房券地点勾选

src/views/mall/components/details/s-select-sku.vue

@@ -44,18 +44,19 @@
           <div v-show="isGetPrize" class="ml-7">
             <div class="getPrizeTip">请勾选一到三个地点作为期望获赠房券的所在地，系统将随机抽取一张</div>
             <v-card :loading="getPrizeLoading" elevation="0" class="prizeArea">
-              <v-checkbox
-                v-model="choose"
-                v-for="(item, index) of prizeAreaList"
-                :key="item+index"
-                color="primary"
-                class="mr-3"
-                :label="item"
-                :value="item"
-                density="compact"
-                :disabled="choose.length > 2 && !choose.includes(item)"
-                hide-details
-              ></v-checkbox>
+              <v-chip-group v-model="choose" column multiple :max="3" mandatory>
+                <v-chip
+                  v-for="(item, index) of prizeAreaList"
+                  :key="item+index"
+                  color="primary"
+                  :text="item.label"
+                  :value="item.label"
+                  class="mr-3 mb-3"
+                  label
+                  :disabled="item.total <= 0"
+                  filter
+                ></v-chip>
+              </v-chip-group>
             </v-card>
           </div>
         </div>
@@ -91,7 +92,7 @@
   import { computed, reactive, watch, ref } from 'vue'
   import { convertProductPropertyList } from '@/views/mall/utils'
   import { getPrizeAreaByGoodsId } from '@/api/mall/prize'
-  import { toNumber } from 'lodash-es'
+  // import { toNumber } from 'lodash-es'
 
   const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
   const props = defineProps({
@@ -329,6 +330,16 @@
   const noCity = ref(false)
   const getPrizeLoading = ref(false)
   const prizeAreaList = ref([])
+
+  function checkAllTotalsAreZero(obj) {
+    for (let city in obj) {
+      if (obj.hasOwnProperty(city) && obj[city].total !== 0) {
+        return false
+      }
+    }
+    return true
+  }
+
   // 根据商品id活动对应的奖品区域信息
   const getAreaData = async () => {
     const id = props.goodsInfo?.id
@@ -339,7 +350,7 @@
     }
     getPrizeLoading.value = true
     const data = await getPrizeAreaByGoodsId(params)
-    if (!data || !Object.keys(data).length) {
+    if (!data || !Object.keys(data).length || checkAllTotalsAreZero(data)) {
       noCity.value = true
       isGetPrize.value = false
       return
@@ -347,11 +358,12 @@
 
     let list = [] // 只显示还有库存的城市
     Object.keys(data).forEach(cityName => {
-      if (data[cityName]?.length) {
-        let total = 0
-        data[cityName].forEach(i => { if (i.total) total+= toNumber(i.total) })
-        if (total) list.push(cityName)
-      }
+      // if (data[cityName].list?.length) {
+      //   let total = 0
+      //   data[cityName].list.forEach(i => { if (i.total) total+= toNumber(i.total) })
+      //   if (total) list.push(cityName)
+      // }
+      list.push({ label: cityName, total: data[cityName].total })
     })
     prizeAreaList.value = [...new Set(list)]
     getPrizeLoading.value = false