From 25b2ba1cf86bc3439e7ad2acf2cd4a9ea7e4b0ed Mon Sep 17 00:00:00 2001
From: dcc <dcc@163.com>
Date: Fri, 28 Jun 2024 09:28:04 +0800
Subject: [PATCH] 123
---
src/page/placeAnOrder/components/selectItem/SelectItem.vue | 72 +++++++++++++++++++++--------------
1 files changed, 43 insertions(+), 29 deletions(-)
diff --git a/src/page/placeAnOrder/components/selectItem/SelectItem.vue b/src/page/placeAnOrder/components/selectItem/SelectItem.vue
index f85cf02..d6dde03 100644
--- a/src/page/placeAnOrder/components/selectItem/SelectItem.vue
+++ b/src/page/placeAnOrder/components/selectItem/SelectItem.vue
@@ -3,22 +3,38 @@
<div class="flex justify-between box-border items-center">
<div class="text-grey font-26">{{ $t(title) }}</div>
<div class="font-26" @click="show = !show">
- <span class="mr-17 text-color">{{ $t('全部') }}</span>
+ <span class="mr-17 text-color">{{ $t("全部") }}</span>
<van-icon name="arrow-down" class="text-color" />
</div>
</div>
- <div class="select-wrapper mt-35" :class="{ 'show': show }">
- <div v-if="dataType() === '[object Object]'"
+ <div class="select-wrapper mt-35" :class="{ show: show }">
+ <div
+ v-if="dataType() === '[object Object]'"
class="relative h-82 lh-82 text-center rounded-xl font-28 c2cColor box-border tabBackground"
- @click="handlerClick({ code: 99 })" :class="{ 'active': value === 99 }">
- <img v-show="value === 99" class="absolute top-0 left-0 w-full h-full"
- :src="require('@/assets/image/c2c/Group317.png')" alt="">
- {{ $t('全部') }}
+ @click="handlerClick({ code: 99 })"
+ :class="{ active: value === 99 }"
+ >
+ <img
+ v-show="value === 99"
+ class="absolute top-0 left-0 w-full h-full"
+ :src="require('@/assets/image/c2c/Group317.png')"
+ alt=""
+ />
+ {{ $t("全部") }}
</div>
- <div class="relative text-center rounded-xl font-28 c2cColor box-border tabBackground px-6 py-10"
- v-for="(item, index) in options" :key="index" @click="handlerClick(item)" :class="{ 'active': a(value, item) }">
- <img v-show="a(value, item)" class="absolute top-0 left-0 w-full h-full"
- :src="require('@/assets/image/c2c/Group317.png')" alt="">
+ <div
+ class="relative text-center rounded-xl font-28 c2cColor box-border tabBackground px-6 py-10"
+ v-for="(item, index) in options"
+ :key="index"
+ @click="handlerClick(item)"
+ :class="{ active: a(value, item) }"
+ >
+ <img
+ v-show="a(value, item)"
+ class="absolute top-0 left-0 w-full h-full"
+ :src="require('@/assets/image/c2c/Group317.png')"
+ alt=""
+ />
{{ item.title || item.name }}
</div>
</div>
@@ -26,18 +42,16 @@
</template>
<script>
-import {
- Icon
-} from "vant";
+import { Icon } from "vant";
export default {
name: "SelectItem",
- props: ['title', 'options', 'value'],
+ props: ["title", "options", "value"],
data() {
return {
activeIndex: 0,
show: false,
- }
+ };
},
created() {
console.log(this.options);
@@ -55,36 +69,36 @@
let val;
if (item.method_type || item.method_type === 0) {
console.log(item.method_type);
- val = item.method_type
+ val = item.method_type;
} else {
- val = item.code
+ val = item.code;
}
console.log(val);
// this.activeIndex = index;
- this.$emit('input', val)
+ this.$emit("input", val);
},
dataType() {
- return Object.prototype.toString.call(this.options)
+ return Object.prototype.toString.call(this.options);
},
a(a, item) {
let val;
if (item.method_type || item.method_type === 0) {
- val = item.method_type
+ val = item.method_type;
} else {
- val = item.code
+ val = item.code;
}
return a === val;
- }
+ },
},
components: {
[Icon.name]: Icon,
- }
-}
+ },
+};
</script>
<style lang="scss" scoped>
.text-color {
- color: #868D9A;
+ color: #868d9a;
}
.show {
@@ -92,7 +106,7 @@
}
.active {
- border-color: #1D91FF !important;
+ border-color: #1d91ff !important;
}
.select-wrapper {
@@ -101,10 +115,10 @@
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
- transition: all ease .4s;
+ transition: all ease 0.4s;
//background: #00ff33;
- &>div {
+ & > div {
border-width: 1px;
border-style: solid;
--
Gitblit v1.9.3