From e4c883949156f64bda110ba502e52b14733e1513 Mon Sep 17 00:00:00 2001
From: Megghy <megghy@qq.com>
Date: Sun, 18 Feb 2024 20:23:32 +0800
Subject: [PATCH] improve layout

---
 src/components/manage/PointOrderCard.vue       |  9 ++++++++-
 src/views/manage/point/PointManage.vue         |  2 +-
 src/views/manage/point/PointUserDetailCard.vue | 13 +++++++++----
 src/views/manage/point/PointUserManage.vue     | 10 +++++++---
 4 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/components/manage/PointOrderCard.vue b/src/components/manage/PointOrderCard.vue
index da7c95a..c414051 100644
--- a/src/components/manage/PointOrderCard.vue
+++ b/src/components/manage/PointOrderCard.vue
@@ -104,8 +104,12 @@ const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePoint
     title: '时间',
     key: 'time',
     sorter: 'default',
+    minWidth: 80,
     render: (row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
-      return h(NTime, { time: row.createAt })
+      return h(NTooltip, null, {
+        trigger: () => h(NTime, { time: row.createAt, type: 'relative' }),
+        default: () => h(NTime, { time: row.createAt }),
+      })
     },
   },
   {
@@ -171,6 +175,7 @@ const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePoint
   {
     title: '地址',
     key: 'address',
+    minWidth: 250,
     render: (row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
       const collectUrl =
         row.instanceOf == 'user' ? row.goods.collectUrl : props.goods?.find((g) => g.id == row.goodsId)?.collectUrl
@@ -188,6 +193,7 @@ const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePoint
   {
     title: '快递信息',
     key: 'express',
+    minWidth: 150,
     render: (row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
       if (row.type == GoodsTypes.Physical) {
         return row.trackingNumber
@@ -304,6 +310,7 @@ onMounted(() => {
     :columns="orderColumn"
     :data="order"
     :pagination="{ showSizePicker: true, pageSizes: [10, 25, 50, 100], defaultPageSize: 10, size: 'small' }"
+    size="small"
   >
   </NDataTable>
   <NModal
diff --git a/src/views/manage/point/PointManage.vue b/src/views/manage/point/PointManage.vue
index 1fc22c3..ccfc2ba 100644
--- a/src/views/manage/point/PointManage.vue
+++ b/src/views/manage/point/PointManage.vue
@@ -426,7 +426,7 @@ onMounted(() => {})
       <PointOrderManage :goods="goods" />
     </NTabPane>
     <NTabPane name="users" tab="用户" display-directive="show:lazy">
-      <PointUserManage />
+      <PointUserManage :goods="goods" />
     </NTabPane>
     <NTabPane name="settings" tab="设置" display-directive="show:lazy">
       <PointSettings />
diff --git a/src/views/manage/point/PointUserDetailCard.vue b/src/views/manage/point/PointUserDetailCard.vue
index f8affa9..2085a2b 100644
--- a/src/views/manage/point/PointUserDetailCard.vue
+++ b/src/views/manage/point/PointUserDetailCard.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
-import { ResponsePointHisrotyModel, ResponsePointOrder2OwnerModel, ResponsePointUserModel } from '@/api/api-models'
+import {
+  ResponsePointGoodModel,
+  ResponsePointHisrotyModel,
+  ResponsePointOrder2OwnerModel,
+  ResponsePointUserModel,
+} from '@/api/api-models'
 import { QueryGetAPI } from '@/api/query'
 import PointHistoryCard from '@/components/manage/PointHistoryCard.vue'
+import PointOrderCard from '@/components/manage/PointOrderCard.vue'
 import { POINT_API_URL } from '@/data/constants'
 import { useAuthStore } from '@/store/useAuthStore'
 import {
@@ -30,6 +36,7 @@ import { h, onMounted, ref } from 'vue'
 
 const props = defineProps<{
   user: ResponsePointUserModel
+  goods: ResponsePointGoodModel[]
 }>()
 
 const message = useMessage()
@@ -174,9 +181,7 @@ onMounted(async () => {
       <template v-if="orders.length == 0">
         <NEmpty description="暂无订单" />
       </template>
-      <NList v-else>
-        <NListItem v-for="order in orders" v-bind:key="order.id"> </NListItem>
-      </NList>
+      <PointOrderCard v-else :order="orders" type="owner" :goods="goods" />
     </NSpin>
     <NDivider> 积分历史 </NDivider>
     <NSpin :show="isLoading">
diff --git a/src/views/manage/point/PointUserManage.vue b/src/views/manage/point/PointUserManage.vue
index e70efbc..0f8f27c 100644
--- a/src/views/manage/point/PointUserManage.vue
+++ b/src/views/manage/point/PointUserManage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ResponsePointUserModel } from '@/api/api-models'
+import { ResponsePointGoodModel, ResponsePointUserModel } from '@/api/api-models'
 import { QueryGetAPI } from '@/api/query'
 import { POINT_API_URL } from '@/data/constants'
 import {
@@ -26,6 +26,10 @@ import { computed, h, onMounted, ref } from 'vue'
 import PointUserDetailCard from './PointUserDetailCard.vue'
 import { useStorage } from '@vueuse/core'
 
+const props = defineProps<{
+  goods: ResponsePointGoodModel[]
+}>()
+
 type PointUserSettings = {
   onlyAuthed: boolean
 }
@@ -171,12 +175,12 @@ onMounted(async () => {
   <NModal
     v-model:show="showModal"
     preset="card"
-    style="max-width: 600px; min-width: 400px"
+    style="max-width: 1000px; min-width: 400px"
     title="用户详情"
     content-style="padding: 0"
   >
     <NScrollbar style="max-height: 80vh">
-      <PointUserDetailCard v-if="currentUser" :user="currentUser" :authInfo="currentUser.info" />
+      <PointUserDetailCard v-if="currentUser" :user="currentUser" :authInfo="currentUser.info" :goods="goods" />
     </NScrollbar>
   </NModal>
 </template>