我的奖品

components.d.ts

@@ -72,4 +72,7 @@ declare module 'vue' {
     VerifySlide: typeof import('./src/components/Verifition/Verify/VerifySlide.vue')['default']
     WangEditor: typeof import('./src/components/FormUI/wangEditor/index.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

src/views/mall/components/details.vue

@@ -66,12 +66,15 @@
       </div>
     </v-card>
   </div>
+  
   <!-- 快速登录 -->
   <loginPage v-if="showLogin" @loginSuccess="loginSuccess" @close="loginClose"></loginPage>
+
   <!-- 结算 -->
   <CtDialog :visible="showSettlement" titleClass="text-h6" :widthType="3" title="订单信息" @submit="handleSubmit" @close="handleClose">
     <confirm ref="confirmRef" :data="skuInfo" @orderCreated="orderCreated"></confirm>
   </CtDialog>
+  
   <!-- 支付 -->
   <CtDialog :visible="showPay" titleClass="text-h6" :widthType="3" title="收银台" :footer="false" @close="payCancel">
     <pay ref="payRef" :id="payOrderId" @paySuccess="paySuccess"></pay>

src/views/mall/components/details/order/addressSelection.vue

@@ -28,7 +28,7 @@
         </div>
       </div>
     </v-card>
-    <CtDialog :visible="selectAddress" titleClass="text-h6" :footer="true" :widthType="1" title="修改收货地址" @submit="handleSubmit" @close="selectAddress = false">
+    <CtDialog :visible="selectAddress" titleClass="text-h6" :footer="true" :widthType="1" title="选择收货地址" @submit="handleSubmit" @close="selectAddress = false">
       <div style="min-height: 60vh;">
         <addressPage ref="addressPageRef" showSelect></addressPage>
       </div>

src/views/mall/user/prize/index.vue

@@ -11,15 +11,35 @@
 		:page-info="queryParams"
     itemKey="id"
   >
+    <template #prize="{ item }">
+      <div class="d-flex align-center my-1">
+        <v-img :src="item.prize.image" width="80px" height="80px"></v-img>
+        <div class="ml-1">{{ item.prize.name }}</div>
+      </div>
+    </template>
+    <template #deliverInfo="{ item }">
+      {{ item.record.deliverInfo ? JSON.parse(item.record.deliverInfo).name + '-' + JSON.parse(item.record.deliverInfo).no  : ''}}
+    </template>
+    <template #receiveInfo="{ item }">
+      {{ item.record.receiveInfo ? JSON.parse(item.record.receiveInfo).name + '，' + JSON.parse(item.record.receiveInfo).phone + '，' + JSON.parse(item.record.receiveInfo).address : ''}}
+    </template>
     <template #actions="{ item }">
-      <v-btn color="primary" @click.stop="handleSelectAddress(item)" variant="text">选择收货地址</v-btn>
+      <v-btn v-if="item.record.isReceive && !item.record.receiveInfo" color="primary" @click.stop="handleSelectAddress(item)" variant="text">选择收货地址</v-btn>
     </template>
   </CtTable>
+
+  <CtDialog :visible="showDialog" titleClass="text-h6" :footer="true" :widthType="1" title="选择收货地址" @submit="handleSubmit" @close="showDialog = false">
+    <div style="min-height: 60vh;">
+      <SelectAddress ref="selectAddressRef" showSelect></SelectAddress>
+    </div>
+  </CtDialog>
 </template>
 
 <script setup>
 defineOptions({ name: 'mall-user-prize-index' })
 import { ref } from 'vue'
+import SelectAddress from '@/views/mall/user/address'
+import Snackbar from '@/plugins/snackbar'
 
 const queryParams = ref({
 	pageNo: 1,
@@ -27,29 +47,57 @@ const queryParams = ref({
 })
 const items = ref([
 	{
-		lotteryName: '抽奖活动1',
-		name: '奖品1',
-		address: '收货地址1',
-		phone: '联系电话1',
+		record: {
+      createTime: 1735128516469,
+      isReceive: true,
+      deliverInfo: "{\"no\":\"SF112056000216589\",\"name\":\"顺丰速运\"}",
+      receiveInfo: '{"name":"张三","phone":"13800138000","address":"北京市海淀区上地十街10号百度大厦"}',
+    },
+    prize: {
+      name: '三亚酒店房券',
+      image: 'https://menduner.citupro.com:3443/dev/e13f9b76b26907f35d0ccf7e7f3e88f89a725429172e0b56ceb88362bc9032e6.jpg'
+    },
+    lottery: {
+      name: '房券抽奖活动'
+    }
 	},
-	{
-		lotteryName: '抽奖活动2',
-		name: '奖品2',
-		address: '收货地址2',
-		phone: '联系电话2',
+  {
+		record: {
+      createTime: 1735128516469,
+      isReceive: true,
+      deliverInfo: '',
+      receiveInfo: ''
+    },
+    prize: {
+      name: '三亚酒店房券',
+      image: 'https://menduner.citupro.com:3443/dev/e13f9b76b26907f35d0ccf7e7f3e88f89a725429172e0b56ceb88362bc9032e6.jpg'
+    },
+    lottery: {
+      name: '房券抽奖活动'
+    }
 	}
 ])
+
 const headers = [
-  { title: '活动名称', key: 'lotteryName', sortable: false },
-  { title: '奖品信息', key: 'name', sortable: false },
-  { title: '收货地址', key: 'address', sortable: false },
-  { title: '联系电话', key: 'phone', sortable: false },
-  { title: '快递信息', key: 'deliveryInfo', sortable: false },
+  { title: '活动名称', key: 'lottery.name', sortable: false },
+  { title: '奖品信息', key: 'prize', sortable: false },
+  { title: '是否领取', key: 'isReceive', sortable: false, value: item => item.record.isReceive ? '是' : '否' },
+  { title: '收货信息', key: 'receiveInfo', sortable: false },
+  { title: '快递信息', key: 'deliverInfo', sortable: false },
   { title: '操作', key: 'actions', sortable: false }
 ]
 
-const handleSelectAddress = (item) => {
-	console.log(item, 'select')
+// 设置收货地址
+const selectAddressRef = ref()
+const showDialog = ref(false)
+const handleSelectAddress = () => {
+  showDialog.value = true
+}
+
+const handleSubmit = async () => {
+  const receive = selectAddressRef.value.getSelected() || {}
+  if (!receive || !Object.keys(receive).length) return Snackbar.warning('请选择您的收货地址')
+  console.log(receive, '收货地址')
 }
 </script>