交易订单

src/router/modules/components/recruit/personCenter.js

@@ -77,6 +77,17 @@ const personCenter = [
             },
             component: () => import('@/views/recruit/personal/PersonalCenter/wallet/index.vue'),
           },
+          // 交易订单
+          {
+            path: '/recruit/personal/personalCenter/tradeOrder',
+            name: 'Trading order',
+            component: () => import('@/views/recruit/personal/PersonalCenter/tradeOrder/index.vue'),
+            meta: {
+              title: '交易订单',
+              enName: 'Trading order',
+              icon: 'mdi-order-bool-ascending-variant'
+            }
+          },
           // 会员福利
           {
             path: '/recruit/personal/personalCenter/memberBenefits',

src/views/recruit/personal/PersonalCenter/tradeOrder/index.vue

@@ -0,0 +1,83 @@
+<!--  -->
+<template>
+  <div class="white-bgc pa-3 ma-3">
+    <!-- <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa" @update:model-value="handleChangeTab">
+      <v-tab :value="0">{{ '交易订单' }}</v-tab>
+    </v-tabs> -->
+    <CtTable
+      class="mt-3"
+      :items="dataList"
+      :headers="headers"
+      :loading="false"
+      :elevation="0"
+      :isTools="false"
+      :showPage="true"
+      :total="total"
+      :page-info="query"
+      itemKey="id"
+      @pageHandleChange="handleChangePage"
+    >
+    </CtTable>
+  </div>
+</template>
+
+<script setup>
+defineOptions({name: 'tradingOrder'})
+import { getUserTradeOrder } from '@/api/recruit/personal/personalCenter'
+import { ref } from 'vue'
+import { timesTampChange } from '@/utils/date'
+import { getDict } from '@/hooks/web/useDictionaries'
+
+// const tab = ref(0)
+const total = ref(0)
+const query = ref({
+  pageNo: 1,
+  pageSize: 10
+})
+const dataList = ref([])
+
+// 支付渠道
+const channelData = ref([])
+const getPayChannelCode = async () => {
+  const { data } = await getDict('pay_channel_code')
+  channelData.value = data
+}
+getPayChannelCode()
+
+
+const headers = [
+  { title: '商品名称', key: 'spuName', sortable: false },
+  { title: '价格', key: 'price', sortable: false, value: item => item.price + '元' },
+  { title: '是否已支付', key: 'payStatus', sortable: false, value: item => item.payStatus ? '已支付' : '未支付' },
+  { title: '支付订单编号', key: 'payOrderId', sortable: false },
+  { title: '支付渠道', key: 'payChannelCode', value: item => channelData.value.find(e => e.value === item.payChannelCode)?.label, sortable: false },
+  { title: '订单支付时间', key: 'payTime', value: item =>  timesTampChange(item.payTime), sortable: false },
+  { title: '退款订单编号', key: 'payReFundId', sortable: false },
+  { title: '退款金额', key: 'refundPrice', sortable: false },
+  { title: '退款时间', key: 'refundTime', value: item =>  timesTampChange(item.refundTime), sortable: false },
+  { title: '更新时间', key: 'updateTime', value: item =>  timesTampChange(item.updateTime), sortable: false },
+]
+
+const getData = async () => {
+  const res = await getUserTradeOrder(query.value)
+  dataList.value = res.list
+  total.value = res.total
+}
+getData()
+
+const handleChangePage = (e) => {
+  query.value.pageNo = e
+  getData()
+}
+
+// 切换
+// const handleChangeTab = () => {
+//   query.value.pageNo = 1
+//   query.value.type = tab.value
+//   getData()
+// }
+
+// const headers = ref([orderHeaders.value])
+</script>
+<style lang="scss" scoped>
+</style>