menduner/src/views/recruit/personal/PersonalCenter/tradeOrder/components/detail.vue

<template>
  <div class="mt-16">
    <div class="default-width pb-5">
      <v-banner color="primary" :text="formatOrderStatusDescription(order)" style="background-color: #00B760; color: #fff;"></v-banner>

      <!-- 商品列表 -->
      <v-card class="my-3 pa-5">
        <h3 class="mb-3">商品列表</h3>
        <v-divider></v-divider>

        <CtTable
          class="mt-3"
          :items="order.items"
          :headers="headers"
          :loading="false"
          :elevation="0"
          :isTools="false"
          :showPage="false"
          itemKey="id"
        >
          <template #picUrl="{ item }">
            <v-img :src="item.picUrl" width="90" height="90" class="my-1"></v-img>
          </template>
          <template #spuName="{ item }">
            <span class="color-primary cursor-pointer" @click="handleToGoodsDetail(item)">{{ item.spuName }}</span>
            <p v-if="order.lottery && order.lottery.length" class="color-999  mt-1 " @click.stop="router.push('/recruit/personal/personalCenter/tradeOrder?key=3')">
              <span class="color-primary cursor-pointer border-bottom-primary">奖品：{{ order.lottery.map(e => e.prize.name).join('、') }}</span>
              <span v-if="!order.lottery[0].record.receiveInfo" class="color-999">（10天内未领取的，则视为主动放弃当前奖品）</span>
            </p>
          </template>
          <template #actions="{ item }">
            <div v-if="[10, 20, 30].includes(order.status) && item.extend && item.extend.fileUrls && item.extend.fileUrls.length > 0">
              <v-btn variant="text" color="primary" prepend-icon="mdi-eye-outline" @click="previewFile(item.extend.fileUrls[0])">预览</v-btn>
              <v-btn variant="text" color="primary" prepend-icon="mdi-arrow-down-bold-outline" @click="handleDownload(item.extend.fileUrls[0], item.spuName)">下载</v-btn>
            </div>
          </template>
        </CtTable>
        <div class="text-end color-primary mr-3 mt-5 font-size-20">
          共{{ order.productCount }}件商品，合计：￥{{ fen2yuan(order.payPrice) }}
        </div>
      </v-card>

      <v-row no-gutters class="mt-3">
        <v-col cols="6">
          <!-- 订单信息 -->
          <v-card class="pa-5">
            <h3>订单信息</h3>
            <v-divider class="my-3"></v-divider>
            <div class="font-size-15 color-666">
              <p>订单编号：{{ order.no }}</p>
              <p class="my-3">下单时间：{{ timesTampChange(order.createTime) }}</p>
              <p>支付时间：{{ timesTampChange(order.payTime) }}</p>
              <p class="mt-3">支付方式：{{ order.payChannelName }}</p>
              <p class="mt-3">订单备注：{{ order.userRemark }}</p>
            </div>
          </v-card>
        </v-col>
        <v-col cols="6" class="ml-3">
          <!-- 物流信息 -->
          <v-card class="pa-5" style="height: 100%">
            <h3>物流信息</h3>
            <v-divider class="my-3"></v-divider>
            <div class="font-size-15 color-666">
              <p>收货地址：<span v-if="order.receiverName && order.receiverMobile">{{ order.receiverName }}，{{ order.receiverMobile }}，{{ order.receiverAreaName }} {{ order.receiverDetailAddress }}</span></p>
              <p class="my-3">物流公司：{{ order.logisticsName }}</p>
              <p>运单号：{{ order.logisticsNo }}</p>
            </div>
          </v-card>
        </v-col>
      </v-row>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'mall-user-order-detail'})
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { getMallOrderDetail } from '@/api/mall/user'
import Snackbar from '@/plugins/snackbar'
import { timesTampChange } from '@/utils/date'
import { fen2yuan, formatOrderStatusDescription } from '@/hooks/web/useGoods'
import { getBlob, saveAs, previewFile } from '@/utils'
import { getLuckLotteryRecordByOrderId } from '@/api/mall/prize'

const router = useRouter()
const { id } = router.currentRoute.value.params
const order = ref({})

const headers = [
  { title: '', key: 'picUrl', sortable: false },
  { title: '商品名称', key: 'spuName', sortable: false },
  { title: '规格', key: 'contactAddress', sortable: false, value: item => item.properties.map((property) => property.valueName).join(' ') },
  { title: '单价', key: 'price', sortable: false, value: item => '￥' + fen2yuan(item.price) },
  { title: '数量', key: 'count', sortable: false },
  { title: '操作', sortable: false, key: 'actions' }
]

onMounted(async () =>{
  const data = await getMallOrderDetail(id)
  const result = await getLuckLotteryRecordByOrderId(id)
  if (!data) {
    Snackbar.warning('订单不存在')
    setTimeout(() => {
      window.close()
    }, 1000)
    return
  }
  order.value = data
  order.value.lottery = result // 赠品信息
})

const showBanner = computed(() => (order) => {
  return order?.items?.length ? order.items.every(k => k.spuType === '0') : false
})

// 下载附件
const handleDownload = (url, name) => {
  getBlob(url).then(blob => {
    saveAs(blob, name)
  })
}

// 跳转商品详情
const handleToGoodsDetail = (item) => {
  router.push(`/mall/goodsDetail/${item.spuId}`)
}
</script>

<style scoped lang="scss">

</style>