抽奖

src/api/mall/prize.js

@@ -32,6 +32,14 @@ export const luckyLotteryRecordReceive = async (data) => {
 	})
 }
 
+// 创建用户期望奖品记录
+export const luckTargetCreate = async (data) => {
+  return await request.post({
+		url: 'app-api/promotion/luck-lottery/user-target/create',
+		data
+	})
+}
+
 // 根据商品id活动对应的奖品区域信息
 export const getPrizeAreaByGoodsId = async (params) => {
   return await request.get({

src/layout/enterprise.vue

@@ -55,6 +55,7 @@ const whiteList = [
 ]
 // 查询是否在白名单内，在则不展示面包屑
 const isInWhiteList = (url, whiteList)=> {
+  debugger
   const path = url.split('?')[0]
   for (const item of whiteList) {
     if (path.startsWith(item)) {
@@ -62,6 +63,7 @@ const isInWhiteList = (url, whiteList)=> {
     }
   }
   return false
+  // return whiteList.includes(url)
 }
 
 // const breadcrumbs = ref([])

src/locales/en.js

@@ -328,5 +328,8 @@ export default {
   unit: { // 单位
     rmb: 'RMB',
     ge: '',
+  },
+  mall: { // 商城
+    getPrizeTip: 'Please select three locations as the expected places to receive the voucher, and the system will randomly select one',
   }
 }

src/locales/zh-CN.js

@@ -328,5 +328,8 @@ export default {
   unit: { // 单位
     rmb: '元',
     ge: '个',
+  },
+  mall: { // 商城
+    getPrizeTip: '请勾选三个地点作为期望获赠房券的所在地，系统随机抽取一张',
   }
 }

src/views/mall/components/confirm_order/confirm.vue

@@ -232,7 +232,11 @@
 
     const data = await createOrder(query)
     if (!data.payOrderId && data.payOrderId > 0) return
-    emit('orderCreated', data.payOrderId, data.id) // 更新购物车列表，如果来自购物车
+    // 更新购物车列表，如果来自购物车
+    emit('orderCreated', {
+      payOrderId: data.payOrderId,
+      orderId: data.id
+    })
     // payImmediately(data.payOrderId)
   }
 

src/views/mall/components/confirm_order/index.vue

@@ -33,11 +33,13 @@ import { useRouter, useRoute } from 'vue-router'; const router = useRouter()
 import { ref } from 'vue'
 import confirm from './confirm.vue'
 import pay from './pay.vue'
+import { luckTargetCreate } from '@/api/mall/prize'
 const { t } = useI18n()
 
 const route = useRoute()
 const { spuId } = route.query
 const skuInfo = ref(localStorage.getItem('confirm_order_data')) // 购买商品规格信息
+debugger
 
 const confirmRef = ref()
 // onMounted(() => {
@@ -51,16 +53,30 @@ const onBuy = () => {
   }
 }
 
+// 创建用户期望奖品所在城市记录
+const setTargetData = async () => {
+  try {
+    await luckTargetCreate({
+      orderId: orderId.value,
+      spuId,
+      skuId: orderId.value,
+      target:skuInfo.value.city,
+    })
+  } catch (error) {
+    console.log(error)
+  }
+}
 
 // 创建订单完成
 const payRef = ref()
 const showPay = ref(false)
 const payOrderId = ref('')
 const orderId = ref('')
-const orderCreated = (id, order) => {
+const orderCreated = ({id, orderId}) => {
   payOrderId.value = id
-  orderId.value = order
+  orderId.value = orderId
   showPay.value = true
+  if (skuInfo.value?.city?.length) setTargetData()
 }
 const confirmWord = ref('立即支付') // '立即购买' : '立即支付'
 

src/views/mall/components/details.vue

@@ -54,6 +54,7 @@
             v-if="showSelectSku"
             class="mb-7"
             :goodsType="goodsType"
+            :showPrize="showPrize"
             :goodsInfo="state.goodsInfo"
             @change="onSkuChange"
             @buy="onBuy"
@@ -132,7 +133,7 @@ const getData = async () => {
   // 查询当前商品是否参与抽奖活动
   const data = await getPrizeByGoodsId(id)
 
-  const bool = data && Object.keys(data).length
+  const bool = Boolean(data && Object.keys(data).length)
   showPrize.value = showActivePrices.value = bool
   
   lotteryId.value = data?.id || null

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

@@ -27,7 +27,39 @@
     <!-- 购买数量- 库存 -->
     <div class="modal-content">
       <!-- 只展示库存 -->
-      <div v-if="props.goodsType === 99" class="parameterColor mb-10"><span class="l-s-10">库存</span>：{{ totalStock }}</div>
+      <div v-if="props.goodsType === 99" class="mb-7">
+        <div class="parameterColor mb-3"><span class="l-s-10">库存</span>：{{ totalStock }}</div>
+        <!-- 我要房券 -->
+        <div v-if="showPrize">
+          <v-checkbox-btn
+            v-model="isGetPrize"
+            color="primary"
+            label="我要房券"
+            class="ml-n3"
+            :disabled="false"
+            hide-details
+            @update:modelValue="isGetPrizeChange"
+          ></v-checkbox-btn>
+          <div v-if="showPrize && noCity" style="color: gray;" class="ma-3">房券已被抢完啦</div>
+          <div v-show="isGetPrize" class="ml-7">
+            <div class="getPrizeTip">{{ $t('mall.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-card>
+          </div>
+        </div>
+      </div>
       <div v-else class="d-flex align-center mb-10">
         <div class="buyCount mr-3">
           <span class="parameterColor"><span class="l-s-10">数量</span>：</span>
@@ -46,8 +78,8 @@
     </div>
     <!-- 操作区 -->
     <div>
-      <v-btn color="primary" width="200" @click="onBuy">立即购买</v-btn>
-      <v-btn class="ml-3" color="warning" width="200" @click="onAddCart">加入购物车</v-btn>
+      <v-btn class="mr-3" color="primary" width="200" @click="onBuy">立即购买</v-btn>
+      <v-btn v-if="props.goodsType !== 99" color="warning" width="200" @click="onAddCart">加入购物车</v-btn>
     </div>
   </div>
 </template>
@@ -58,6 +90,8 @@
   import suNumberBox from '@/components/FormUI/su-number-box/su-number-box.vue'
   import { computed, reactive, watch, ref } from 'vue'
   import { convertProductPropertyList } from '@/views/mall/utils'
+  import { getPrizeAreaByGoodsId } from '@/api/mall/prize'
+  import { toNumber } from 'lodash-es'
 
   const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
   const props = defineProps({
@@ -69,8 +103,14 @@
       type: Number,
       default: 0,
     },
+    showPrize: { // 是否可以抽取房券
+      type: Boolean,
+      default: false,
+    },
   });
 
+  const isGetPrize = ref(false)
+
   const totalStock = ref(props.goodsInfo?.stock-0 || 0)
   const state = reactive({
     selectedSku: {}, // 选中的 SKU
@@ -119,6 +159,11 @@
       return;
     }
 
+    if (isGetPrize.value && !choose.value?.length) {
+      Snackbar.warning('请勾选期望获赠房券的所在地！')
+      return;
+    }
+
     emits('addCart', state.selectedSku);
   }
 
@@ -132,7 +177,7 @@
       Snackbar.warning('库存不足')
       return;
     }
-    emits('buy', state.selectedSku);
+    emits('buy', { ...state.selectedSku, city: choose.value });
   }
 
   // 改变禁用状态：计算每个 property 属性值的按钮，是否禁用
@@ -278,6 +323,45 @@
       if (e.values && e.values.length) onSelectSku(e.id, e.values[0].id)
     })
   }
+
+  const choose = ref([])
+  const noCity = ref(false)
+  // const getPrizeLoading = ref(false)
+  const prizeAreaList = ref([])
+  // 根据商品id活动对应的奖品区域信息
+  const getAreaData = async () => {
+    const id = props.goodsInfo?.id
+    if (!id) return
+    const params = {
+      spuId: id,
+      type: 'city',
+    }
+    // getPrizeLoading.value = true
+    const data = await getPrizeAreaByGoodsId(params)
+    if (!data || !Object.keys(data).length) {
+      noCity.value = true
+      isGetPrize.value = false
+      return
+    }
+
+    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)
+      }
+    })
+    prizeAreaList.value = [...new Set(list)]
+    // getPrizeLoading.value = false
+  }
+
+  const isGetPrizeChange = (bool) => {
+    if (!bool) {
+      return
+    }
+    getAreaData()
+  }
 </script>
 
 <style lang="scss" scoped>
@@ -410,4 +494,13 @@
       content: '￥';
     }
   }
+  .getPrizeTip {
+    font-size: 13px;
+    font-weight: bold;
+    text-decoration: underline;
+  }
+  .prizeArea {
+    display: flex;
+    flex-wrap: wrap;
+  }
 </style>