menduner-admin/src/views/menduner/system/order/TradeDetail.vue

<template>
  <Dialog title="订单详情" v-model="dialogVisible" width="70%">
    <el-descriptions title="" border :column="2">
      <el-descriptions-item label="购买方">
				<span style="color: #409EFF; cursor: pointer;" @click="handleDetail">
          {{ info?.userType === '0' ? info?.person?.name : info?.enterprise ? formatName(info?.enterprise.name) : info?.person?.name }}
        </span>
			</el-descriptions-item>
      <el-descriptions-item label="商品名称">{{ info?.spuName }}</el-descriptions-item>
      <el-descriptions-item label="价格">{{ (info?.price / 100.0).toFixed(2) }}元</el-descriptions-item>
      <el-descriptions-item label="是否已支付">{{ info?.payStatus ? '已支付' : '未支付' }}</el-descriptions-item>
      <el-descriptions-item label="支付订单编号">{{ info?.payOrderId }}</el-descriptions-item>
      <el-descriptions-item label="支付渠道">
				<dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="info.payChannelCode" />
			</el-descriptions-item>
      <el-descriptions-item label="订单支付时间">{{ info?.payTime ? formatDate(info?.payTime) : '' }}</el-descriptions-item>
      <el-descriptions-item label="是否退款">{{ info.payRefundId ? '已退款' : '' }}</el-descriptions-item>
      <el-descriptions-item label="退款金额">{{ (info.refundPrice / 100.0).toFixed(2) }}</el-descriptions-item>
      <el-descriptions-item label="退款时间">{{ info?.refundTime ? formatDate(info?.refundTime) : '' }}</el-descriptions-item>
      <el-descriptions-item label="订单是否取消">{{ info.cancelType ? '订单取消': '' }}</el-descriptions-item>
      <el-descriptions-item label="订单取消时间">{{ info?.cancelTime ? formatDate(info?.cancelTime) : '' }}</el-descriptions-item>
      <el-descriptions-item label="订单创建时间">{{ info.createTime ? formatDate(info?.createTime) : '' }}</el-descriptions-item>
    </el-descriptions>
  </Dialog>
</template>

<script setup lang="ts">
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import { formatName } from '@/utils'

defineOptions({ name: 'TradeOrderDetail' })
const dialogVisible = ref(false) // 弹窗的是否展示

/** 打开弹窗 */
const info = ref({}) // 详情数据
const open = async (item: object) => {
	info.value = item
  dialogVisible.value = true
}

const { push } = useRouter()
const handleDetail = () => {
	dialogVisible.value = false
	if (info.value?.userType === '1' && info.value?.enterprise) push({ name: 'EnterpriseDetail', params: { id: info.value?.enterpriseId } })
	else push({ name: 'PersonDetail', query: { id: info.value?.person?.id, userId: info.value?.userId } })
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>