交易订单

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

@@ -0,0 +1,48 @@
+<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 : formatName(info?.enterprise.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') 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>

src/views/menduner/system/order/index.vue

@@ -83,7 +83,7 @@
       <el-form-item>
         <el-button v-hasPermi="['menduner:system:trade-order:query']" @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button v-hasPermi="['menduner:system:trade-order:query']" @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button v-hasPermi="['menduner:system:trade-order:create']" type="primary" plain @click="openForm('create')"><Icon icon="ep:plus" />发起订单</el-button>
+        <!-- <el-button v-hasPermi="['menduner:system:trade-order:create']" type="primary" plain @click="openForm('create')"><Icon icon="ep:plus" />发起订单</el-button> -->
       </el-form-item>
     </el-form>
   </ContentWrap>
@@ -91,45 +91,44 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true">
-      <!-- <el-table-column label="编号" align="center" prop="id" :show-overflow-tooltip="true" /> -->
-      <!-- <el-table-column label="用户编号" align="center" prop="userId" :show-overflow-tooltip="true" /> -->
-      <el-table-column label="商品名字" align="center" prop="spuName">
+      <el-table-column label="购买方" align="center" prop="userType" fixed="left">
+        <template #default="scope">
+          <span style="color: #409EFF; cursor: pointer;" @click="handleToDetail(scope.row)">{{ scope.row?.userType === '0' ? scope.row?.person.name : formatName(scope.row?.enterprise.name) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品名字" align="center" prop="spuName" fixed="left" width="180">
         <template #default="scope">{{ formatName(scope.row.spuName) }}</template>
       </el-table-column>
-      <el-table-column label="价格" align="center" prop="price">
+      <el-table-column label="价格" align="center" prop="price" fixed="left">
         <template #default="scope">
           {{ (scope.row.price / 100.0).toFixed(2) }}
         </template>
       </el-table-column>
       <el-table-column label="是否已支付" align="center" prop="payStatus">
         <template #default="scope">
-          {{ scope.row.payStatus ? '已支付' : '未支付' }}
+          <span :style="{'color': scope.row.payStatus ? '#67C23A' : '#F56C6C'}">{{ scope.row.payStatus ? '已支付' : '未支付' }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="支付订单编号" align="center" prop="payOrderId" />
-      <el-table-column label="支付渠道" align="center" prop="payChannelCode">
+      <el-table-column label="支付订单编号" align="center" prop="payOrderId" width="180" />
+      <el-table-column label="支付渠道" align="center" prop="payChannelCode" width="130">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="scope.row.payChannelCode" />
         </template>
       </el-table-column>
       <el-table-column label="订单支付时间" align="center" prop="payTime" :formatter="dateFormatter" width="180px" />
-      <el-table-column label="退款订单编号" align="center" prop="payRefundId" />
-      <el-table-column label="" align="center" prop="" />
-      <el-table-column label="退款金额" align="center" prop="refundPrice">
-        <template #default="scope">
-          {{ (scope.row.refundPrice / 100.0).toFixed(2) }}
-        </template>
+      <el-table-column label="是否退款" align="center" prop="payRefundId">
+        <template #default="scope">{{ scope.row.payRefundId ? '已退款' : '' }}</template>
       </el-table-column>
-      <el-table-column label="退款时间" align="center" prop="refundTime" :formatter="dateFormatter" width="180px" />
-      <el-table-column label="订单取消类型" align="center" prop="cancelType">
+      <el-table-column label="订单是否取消" align="center" prop="cancelType">
         <template #default="scope">
-          <dict-tag :type="DICT_TYPE.MENDUNER_TRADE_ORDER_CANCEL_TYPE" :value="scope.row.cancelType" />
+          {{ scope.row.cancelType ? '订单取消': '' }}
+          <!-- <dict-tag :type="DICT_TYPE.MENDUNER_TRADE_ORDER_CANCEL_TYPE" :value="scope.row.cancelType" /> -->
         </template>
       </el-table-column>
-      <el-table-column label="订单取消时间" align="center" prop="cancelTime" :formatter="dateFormatter" width="180px" />
       <el-table-column label="创建时间" align="center" prop="createTime" :formatter="dateFormatter" width="180px" />
-      <el-table-column label="操作" align="center" fixed="right" min-width="90">
+      <el-table-column label="操作" align="center" fixed="right" min-width="140">
         <template #default="scope">
+          <el-button link type="primary" @click="handleDetail(scope.row)">详情</el-button>
           <el-button link type="primary" @click="handlePay(scope.row)" v-if="!scope.row.payStatus && scope.row.cancelType !== '10'" v-hasPermi="['menduner:system:trade-order:update']">
             前往支付
           </el-button>
@@ -156,12 +155,16 @@
 
   <!-- 表单弹窗：添加/修改 -->
   <TradeOrderForm ref="formRef" @success="getList" />
+
+  <!-- 详情 -->
+  <TradeDetail ref="detailRef" />
 </template>
 
 <script setup lang="ts">
 import { dateFormatter } from '@/utils/formatTime'
 import { TradeOrderApi, TradeOrderVO } from '@/api/menduner/system/order'
 import TradeOrderForm from './TradeOrderForm.vue'
+import TradeDetail from './TradeDetail.vue'
 import { formatName } from '@/utils'
 import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
 
@@ -230,6 +233,20 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
+// 订单详情
+const detailRef = ref()
+const handleDetail = (row: object) => {
+  console.log(row, 'detail');
+  detailRef.value.open(row)
+}
+
+// 跳转购买方详情
+const { push } = useRouter()
+const handleToDetail = (row: object) => {
+	if (row?.userType === '1') push({ name: 'EnterpriseDetail', params: { id: row?.enterpriseId } })
+	else push({ name: 'PersonDetail', query: { id: row?.person?.id, userId: row?.userId } })
+}
+
 /** 支付按钮操作 */
 const handlePay = (row: any) => {
   router.push({
@@ -257,6 +274,7 @@ const handleRefund = async (row: any) => {
 
 /** 初始化 **/
 onMounted(() => {
+  queryParams.payStatus = true
   getList()
 })
 </script>