奖品列表

src/views/mall/components/details.vue

@@ -58,7 +58,7 @@
         </div>
         <describe v-if="describeTab === 0 && state.goodsInfo?.description" :content="state.goodsInfo.description"></describe>
         <commentCard v-if="describeTab === 1 && state.goodsId" class="detail-comment-selector" :goodsId="state.goodsId" />
-        <prizeDrawContent v-if="describeTab === 2" />
+        <prizeDrawContent v-if="describeTab === 2 && lotteryId" :lotteryId="lotteryId" />
       </div>
     </v-card>
   </div>
@@ -107,6 +107,7 @@ const carouselHover = ref(false)
 const showSelectedSkuImg = ref(false)
 
 const showPrize = ref(false)
+const lotteryId = ref('')
 // 获取商品详情
 const getData = async () => {
   const obj = await getProductDetail({ id })
@@ -121,6 +122,7 @@ const getData = async () => {
   // 查询当前商品是否参与抽奖活动
   const data = await getPrizeByGoodsId(id)
   showPrize.value = data && Object.keys(data).length > 0
+  lotteryId.value = data.id
 }
 getData()
 

src/views/mall/components/details/prizeDrawContent.vue

@@ -1,7 +1,7 @@
 <!--  -->
 <template>
   <div class="d-flex">
-    <div style="width: 200px; border-right: 1px dashed #b7b7b7;">
+    <!-- <div style="width: 200px; border-right: 1px dashed #b7b7b7;">
       <v-treeview
         :items="treeData"
         activatable
@@ -20,8 +20,8 @@
           </div>
         </template>
       </v-treeview>
-    </div>
-    <div class="ml-5" style="width: calc(100% - 200px - 20px);">
+    </div> -->
+    <div class="ml-5" style="width: 100%;">
       <!-- <div class="d-flex justify-space-between color-666 mb-5">
         <div class="pt-2" style="font-size: 25px;">房券列表</div>
         <div style="width: 200px;" class="mt-2">
@@ -40,13 +40,19 @@
         </div>
       </div> -->
       <div class="goods-box">
-        <v-card v-for="val in dataList" :key="val.id" class="goods-box-item" elevation="2" style="background-color: #00ad9b;" @click="null">
+        <v-card v-for="val in dataList" :key="val.id" class="goods-box-item" elevation="2" @click="null">
           <div style="width: 100%; height: 200px;">
-            <v-img :src="val.url" :aspect-ratio="1" style="border-radius: 8px;"></v-img>
+            <v-img :src="val.image" :aspect-ratio="1" style="border-radius: 8px;"></v-img>
           </div>
-          <div class="text-center pa-3 pb-2 mt-5" style=" border-top: 2px dashed #b7b7b7; color: #fff;">
-            <div class="ellipsis-2">{{ val.name }}</div>
+          <div class=" pa-3 pb-2 mt-5">
+            <div class="ellipsis-2 text-left">{{ val.name }}</div>
             <div class="font-size-12 mt-2">{{ val.time }}</div>
+            <div class="font-size-12 mt-2" v-if="val.extend">
+              <span class="mr-1">地区：</span>
+              <span class="mr-1">{{ val.extend.provinceName }}</span>
+              <span class="mr-1">{{ val.extend.cityName }}</span>
+              <span class="mr-1">{{ val.extend.districtName }}</span>
+            </div>
           </div>
         </v-card>
       </div>
@@ -57,11 +63,11 @@
 <script setup>
 defineOptions({name: 'GoodsItem-prizeDrawContent'})
 import { ref } from 'vue'
-import { getPrizeAreaByGoodsId } from '@/api/mall/prize'
-import { useRouter } from 'vue-router'
-const router = useRouter()
-const { id } = router.currentRoute.value.params
-// import { getHotPositionList } from '@/api/common/index'
+// import { useRouter } from 'vue-router'; const router = useRouter()
+import { getPrizeByLotteryId } from '@/api/mall/prize'
+const props = defineProps({ lotteryId: [Number, String] })
+
+// const { id } = router.currentRoute.value.params
 
 const loading = ref(false)
 // const content = ref('')
@@ -69,45 +75,43 @@ const loading = ref(false)
 
 // 数据
 const dataList = ref([
-  { name: '凯悦酒店1866/2晚的房券-大床带双早', id: '1', url: 'https://img1.baidu.com/it/u=2383065711,2021783868&fm=253&fmt=auto&app=138&f=JPEG?w=719&h=500', time: '2025.02.01-2025.02.30' },
-  { name: '房券-高端酒店房券', id: '2', url: 'https://img1.baidu.com/it/u=1781363061,1773318172&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', time: '2025.01.01-2025.12.30' },
-  { name: '金茂万丽免房券', id: '3', url: 'https://img1.baidu.com/it/u=1791205046,4251623717&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375', time: '2025.01.01-2025.12.30' },
-  { name: '苏州昆山阳澄喜柯大酒店1晚套餐通兑券（住园景/全湖景尊享房+双人份豪华早餐+可自选蟹宴/价值198元正餐+免费使用泳池健身房）', id: '4', url: 'https://img2.baidu.com/it/u=4056160349,3161141178&fm=253&fmt=auto&app=138&f=JPEG?w=668&h=500', time: '2025.01.01-2025.12.30' },
-  { name: '上海万怡酒店房券+迪士尼门票', id: '5', url: 'https://picx.zhimg.com/v2-d21746f72d02ee821e35c6db11c0935f_r.jpg?source=1940ef5c', time: '2025.01.01-2025.12.30' }
+  { name: '凯悦酒店1866/2晚的房券-大床带双早', id: '1', image: 'https://img1.baidu.com/it/u=2383065711,2021783868&fm=253&fmt=auto&app=138&f=JPEG?w=719&h=500', time: '2025.02.01-2025.02.30' },
+  { name: '房券-高端酒店房券', id: '2', image: 'https://img1.baidu.com/it/u=1781363061,1773318172&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', time: '2025.01.01-2025.12.30' },
+  { name: '金茂万丽免房券', id: '3', image: 'https://img1.baidu.com/it/u=1791205046,4251623717&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375', time: '2025.01.01-2025.12.30' },
+  { name: '苏州昆山阳澄喜柯大酒店1晚套餐通兑券（住园景/全湖景尊享房+双人份豪华早餐+可自选蟹宴/价值198元正餐+免费使用泳池健身房）', id: '4', image: 'https://img2.baidu.com/it/u=4056160349,3161141178&fm=253&fmt=auto&app=138&f=JPEG?w=668&h=500', time: '2025.01.01-2025.12.30' },
+  { name: '上海万怡酒店房券+迪士尼门票', id: '5', image: 'https://picx.zhimg.com/v2-d21746f72d02ee821e35c6db11c0935f_r.jpg?source=1940ef5c', time: '2025.01.01-2025.12.30' }
 ])
 
 // 获取房券列表
 const getDataList = async () => {
   loading.value = true
-  // try {
-  //   const { list, total: number } = await getEnterpriseUserList(query.value)
-  //   tableData.value = list
-  //   total.value = number
-  // } finally {
-  //   loading.value = false
-  // }
+  try {
+    const data = await getPrizeByLotteryId(props.lotteryId)
+    dataList.value = data || []
+    console.log('获取房券列表:', data)
+  } finally {
+    loading.value = false
+  }
 }
+getDataList()
 
-// 树形click
-const handleClick = (e) => {
-  if (!e.length) return
-  // query.value.enterpriseId = e[0]
-  // getDataList()
-}
+// // 树形click
+// const handleClick = (e) => {
+//   if (!e.length) return
+//   // getDataList()
+// }
 
-const treeData = ref([])
-// 根据商品id活动对应的奖品区域信息
-const getTreeData = async () => {
-  const params = {
-    spuId: id
-  }
-  const data = await getPrizeAreaByGoodsId(params)
-  console.log('getPrizeAreaByGoodsId:', data)
-  // if (!data) return
-  // query.value.enterpriseId = data.id
-  getDataList()
-}
-getTreeData()
+// const treeData = ref([])
+// // 根据商品id活动对应的奖品区域信息
+// const getTreeData = async () => {
+//   const params = {
+//     spuId: id
+//   }
+//   const data = await getPrizeAreaByGoodsId(params)
+//   console.log('getPrizeAreaByGoodsId:', data)
+//   getDataList()
+// }
+// getTreeData()
 
 </script>
 

src/views/mall/payOver/index.vue

@@ -2,10 +2,10 @@
 <template>
   <Navbar class="mb-3" />
   <v-card class="default-width my-3">
-    <showText></showText>
+    <showText class="mb-7"></showText>
 
     <!-- 抽奖 -->
-    <prizeDraw v-if="showPrizeDraw" :lotteryId="lotteryId" class="prizeDraw mx-15 my-7" @success="handleReceive"></prizeDraw>
+    <prizeDraw v-if="showPrizeDraw" :lotteryId="lotteryId" class="prizeDraw mx-15 mb-7" @success="handleReceive"></prizeDraw>
   </v-card>
 </template>