|
@@ -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>
|
|
|
|