menduner/src/views/recruit/personal/PersonalCenter/tradeOrder/dynamic/myPrize.vue

<template>
  <CtTable
    :items="items"
    class="mt-3"
    :headers="headers"
    :loading="false"
    :elevation="0"
    :isTools="false"
    :total="total"
    :showPage="true"
		:itemsPerPage="5"
    :showSelect="false"
    :page-info="queryParams"
    itemKey="id"
		@pageHandleChange="handleChangePage"
  >
    <template #prize="{ item }">
      <div class="d-flex align-center my-1">
        <div style="width: 80px; height: 80px">
          <v-img :src="item.prize.image" width="80px" height="80px"></v-img>
        </div>
        <div class="ml-1">{{ item.prize.name }}</div>
      </div>
    </template>
    <template #receiveInfo="{ item }">
      <div class="ellipsis" style="max-width: 180px;" v-ellipse-tooltip>
        {{ orderReceiveInfo(item) }}
      </div>
    </template>
    <template #deliverInfo="{ item }">
      <div class="ellipsis" style="max-width: 180px;" v-ellipse-tooltip>
        {{ item.record.deliverInfo ? JSON.parse(item.record.deliverInfo).name + '-' + JSON.parse(item.record.deliverInfo).no  : ''}}
      </div>
    </template>
    <template #actions="{ item }">
      <div v-if="!item.record.isReceive && !item.record.receiveInfo">
        <v-btn color="primary" @click.stop="handleReceive(item)" variant="text">领取</v-btn>
        <v-btn color="error" @click.stop="handleGiveUp(item)" variant="text">放弃</v-btn>
      </div>
      <span v-else class="color-666">{{ item.record.deliverInfo ? '已发货' : '等待发货' }}</span>
    </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, computed } from 'vue'
import SelectAddress from '@/views/recruit/personal/PersonalCenter/shippingAddress/index.vue'
import Snackbar from '@/plugins/snackbar'
import { getLuckLotteryRecordPage, luckyLotteryRecordReceive, luckyLotteryRecordGiveUp } from '@/api/mall/prize'
import { timesTampChange } from '@/utils/date'
import Confirm from '@/plugins/confirm'

const queryParams = ref({
	pageNo: 1,
	pageSize: 5,
})
const total = ref(0)
const items = ref([])

const headers = [
  { title: '奖品信息', key: 'prize', sortable: false },
  { title: '收货信息', key: 'receiveInfo', sortable: false },
  { title: '发货信息', key: 'deliverInfo', sortable: false },
  { title: '中奖时间', key: 'record.createTime', sortable: false, value: item => timesTampChange(item.record.createTime) },
  { title: '操作', key: 'actions', sortable: false }
]

// 获取中奖记录
const getLuckLotteryRecordList = async () => {
  const result = await getLuckLotteryRecordPage(queryParams.value)
  items.value = result?.list || []
  total.value = result?.total || 0
}
getLuckLotteryRecordList()

// 收货信息
const orderReceiveInfo = computed(() => (item) => {
  const info = item.record.receiveInfo ? JSON.parse(item.record.receiveInfo) : {}
  if (!info || !Object.keys(info).length) return ''
  return `${info.name}，${info.mobile}，${info.areaName} ${info.detailAddress}`
})

const handleChangePage = (e) => {
	queryParams.value.pageNo = e
	getLuckLotteryRecordList()
}

// 领取
const selectAddressRef = ref()
const showDialog = ref(false)
const recordId = ref('')
const handleReceive = (item) => {
  recordId.value = item.record.id
  showDialog.value = true
}

const handleSubmit = async () => {
  const receive = selectAddressRef.value.getSelected() || {}
  if (!receive || !Object.keys(receive).length) return Snackbar.warning('请选择您的收货地址')
  await luckyLotteryRecordReceive({ id: recordId.value, receiveInfo: JSON.stringify(receive) })
  showDialog.value = false
  recordId.value = null
  Snackbar.success('领取成功，待商家发货')
  getLuckLotteryRecordList()
}

// 放弃领取
const handleGiveUp = async (item) => {
  Confirm('系统提示', `是否确定放弃领取${item.prize.name}？`).then(async () => {
    await luckyLotteryRecordGiveUp(item.record.id)
    Snackbar.success('放弃成功')
    getLuckLotteryRecordList()
  })
}
</script>

<style scoped lang="scss">

</style>