抽奖页

components.d.ts

@@ -29,6 +29,7 @@ declare module 'vue' {
     CtTextField: typeof import('./src/components/CtVuetify/CtTextField/index.vue')['default']
     DatePicker: typeof import('./src/components/DatePicker/index.vue')['default']
     Echarts: typeof import('./src/components/Echarts/index.vue')['default']
+    ElCascader: typeof import('element-plus/es')['ElCascader']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     Empty: typeof import('./src/components/Empty/index.vue')['default']
     File: typeof import('./src/components/Upload/file.vue')['default']

src/views/mall/components/prizeDraw.vue

@@ -1,23 +1,28 @@
 <template>
   <div class="prizeDrawBox">
-    <div class="text-end cursor-pointer color-666" @click="emit('success')">
-      <v-btn color="primary" variant="tonal" append-icon="mdi-pan-right">我的奖品</v-btn>
-    </div>
     <div class="d-flex flex-column align-center">
-      <div class="numberBox mb-5">恭喜您获得房券抽奖机会</div>
+      <div class="numberBox mb-5">房券抽奖</div>
       <gridPage v-if="props.type === '1'" :lotteryId="props.lotteryId" :disabled="disabled" @end="endCallback"></gridPage>
       <slotMachinePage v-if="props.type === '2'" :lotteryId="props.lotteryId" height="120" :disabled="disabled" @end="endCallback"></slotMachinePage>
 
-      <CtDialog :visible="showDialog" titleClass="text-h6" :footer="false" :widthType="3" title="抽奖详情" @close="showDialog = false">
-        <div class="d-flex align-center flex-column">
-          <svg-icon name="submit" size="300"></svg-icon>
-          <p v-for="(k, i) in prizeData" :key="i" class="mb-3">{{ k.prize.prompt }}</p>
-          <div class="my-10">
-            <v-btn color="primary" variant="outlined" width="120" @click="showDialog = false">取 消</v-btn>
-            <v-btn color="primary" width="120" class="ml-5" @click.stop="emit('success')">前往领取</v-btn>
+      <v-card min-height="300" width="600" class="mt-5 pa-5">
+        <div v-if="showDialog">
+          <p v-for="(k, i) in prizeData" :key="i">{{ k.prize.prompt }}</p>
+          <p>凭此房券在规定有效期内可享受免费住宿一晚。</p>
+          <p class="mb-5">请提供收货地址，以便安排房券派送。</p>
+
+          <!-- 收货地址 -->
+          <div>
+            <v-radio-group v-model="addressSelect" color="primary">
+              <v-radio v-for="val in address" :key="val.id" :label="val.id === 9999 ? val.label : (val.name + '，' + val.mobile + '，' + val.areaName + val.detailAddress)" :value="val.id"></v-radio>
+            </v-radio-group>
+            <v-text-field v-if="addressSelect === 9999" v-model="newAddress" label="新地址" placeholder="示例：张三，13800138000，北京市朝阳区望京街道望京街道" color="primary"></v-text-field>
+            <div class="text-center mt-3">
+              <v-btn color="primary" class="elevation-5" width="180" @click.stop="handleSubmit">确 认</v-btn>
+            </div>
           </div>
         </div>
-      </CtDialog>
+      </v-card>
     </div>
   </div>
 </template>
@@ -28,6 +33,7 @@ import gridPage from './prizeDraw/grid.vue'
 import slotMachinePage from './prizeDraw/slotMachine.vue'
 import { ref } from 'vue'
 import { getLuckLotteryRecordByOrderId } from '@/api/mall/prize'
+import { getMallUserAddressList } from '@/api/mall/address'
 import Snackbar from '@/plugins/snackbar'
 
 const emit = defineEmits(['success'])
@@ -40,14 +46,21 @@ const props = defineProps({
   }
 })
 
+const newAddress = ref('')
+const addressSelect = ref()
 const disabled = ref(false)
 
-// 获取中奖记录
+// 获取中奖记录、收货地址
+const address = ref([])
 const prizeData = ref({})
 const getRecord = async () => {
   const data = await getLuckLotteryRecordByOrderId(props.orderId)
   prizeData.value = data || []
   if (!data || !data.length) disabled.value = true
+
+  const addressData = await getMallUserAddressList()
+  address.value = [...addressData, { id: 9999, label: '使用新地址' }] || []
+  if (addressData && addressData.length) addressSelect.value = addressData[0].id
 }
 if (props.orderId) getRecord()
 
@@ -57,6 +70,8 @@ const endCallback = () => {
   showDialog.value = true
   disabled.value = true
 }
+
+const handleSubmit = async () => {}
 </script>
 
 <style scoped lang="scss">

src/views/mall/home/index.vue

@@ -1,8 +1,5 @@
 <template>
   <div style="min-width: 1184px;" class="white-bgc">
-    <!-- 导航栏 -->
-    <Navbar />
-
     <div id="contentBox" ref="scrollBox" class="pt-3">
       <div class="default-width pb-5">
         <!-- 轮播图 -->
@@ -40,7 +37,6 @@
 <script setup>
 defineOptions({ name: 'mall-home-index'})
 import { ref, onMounted } from 'vue'
-import Navbar from '../components/navbar.vue'
 import HotGoods from './components/hotGoods.vue'
 import PointExchange from './pointExchange'
 import loginPage from '@/views/common/loginDialog.vue'

src/views/mall/payOver/index.vue

@@ -1,7 +1,6 @@
 <!--  -->
 <template>
-  <Navbar class="mb-3" />
-  <v-card class="default-width my-3">
+  <v-card class="default-width my-3 mt-16">
     <showText :class="showPrizeDraw ? '' : 'mb-15'"></showText>
 
     <!-- 抽奖 -->
@@ -12,7 +11,6 @@
 <script setup>
 defineOptions({name: 'payOver-index'})
 import { ref } from 'vue'
-import Navbar from '../components/navbar.vue'
 import showText from './components/show.vue'
 import prizeDraw from '@/views/mall/components/prizeDraw.vue'
 import { useRoute, useRouter } from 'vue-router'