1233

dcc

2024-06-29 e5108083cff1cb9b4df2de3fb845be56ea1622d4

 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;