menduner/src/views/mall/components/prizeDraw.vue

<template>
  <div class="prizeDrawBox">
    <div class="d-flex flex-column align-center">
      <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>

      <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>
      </v-card>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'prizeDraw'})
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'])
const props = defineProps({
  lotteryId: [Number, String],
  orderId: [Number, String],
  type: {
    type: String,
    default: '1'
  }
})

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()

const showDialog = ref(false)
const endCallback = () => {
  if (!prizeData.value.length) return Snackbar.warning('您已经抽过奖了哦')
  showDialog.value = true
  disabled.value = true
}

const handleSubmit = async () => {}
</script>

<style scoped lang="scss">
.prizeDrawBox {
  padding: 20px 40px;
  background-color: var(--default-bgc);
}
.prizeDraw {
  margin: 0 auto; 
}
.numberBox {
  font-size: 20px;
  font-weight: bold;
  padding: 2px 38px;
  border-bottom: 3px solid var(--v-primary-base);
}
.colorBase {
  color: var(--v-primary-base);
  margin: 0 6px;
  font-size: 22px;
}
</style>