menduner/src/views/mall/user/order/detail.vue

<template>
  <div>
    <Navbar class="mb-3" />
    <div class="default-width pb-5">
      <v-banner color="primary" :text="formatOrderStatusDescription(order)" style="background-color: #00897B; color: #fff;"></v-banner>

      <v-row no-gutters class="mt-3">
        <v-col span="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 span="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>收货地址：{{ order.receiverName }}，{{ order.receiverMobile }}，{{ order.receiverAreaName }} {{ order.receiverDetailAddress }}</p>
              <p class="my-3">物流公司：{{ order.logisticsName }}</p>
              <p>运单号：{{ order.logisticsNo }}</p>
            </div>
          </v-card>
        </v-col>
      </v-row>

      <!-- 商品列表 -->
      <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"></v-img>
          </template>
          <template #spuName="{ item }">
            <span class="color-primary cursor-pointer" @click="handleToGoodsDetail(item)">{{ item.spuName }}</span>
          </template>
        </CtTable>
        <div class="text-end color-primary mr-3 mt-5 font-size-20">
          共{{ order.productCount }}件商品，合计：￥{{ fen2yuan(order.payPrice) }}
        </div>
      </v-card>
    </div>
  </div>
</template>

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

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 }
]

onMounted(async () =>{
  if (!id) return Snackbar.error('订单不存在')
  const data = await getMallOrderDetail(id)
  order.value = data
})

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

<style scoped lang="scss">

</style>