From ce14cd02e4c3df631ecad3674055b6391d2bdcd7 Mon Sep 17 00:00:00 2001
From: RockYang <yangjian102621@gmail.com>
Date: Fri, 10 Nov 2023 18:06:32 +0800
Subject: [PATCH] feat: add order list compponent

---
 web/src/components/UserOrder.vue | 107 +++++++++++++++++++++++++++++++
 web/src/views/Member.vue         |  33 +++++++---
 2 files changed, 132 insertions(+), 8 deletions(-)
 create mode 100644 web/src/components/UserOrder.vue

diff --git a/web/src/components/UserOrder.vue b/web/src/components/UserOrder.vue
new file mode 100644
index 00000000..a48f73cb
--- /dev/null
+++ b/web/src/components/UserOrder.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="user-bill" v-loading="loading">
+    <el-row>
+      <el-table :data="items" :row-key="row => row.id" table-layout="auto" border
+                style="--el-table-border-color:#373C47;
+                --el-table-tr-bg-color:#2D323B;
+                --el-table-row-hover-bg-color:#373C47;
+                --el-table-header-bg-color:#474E5C;
+                --el-table-text-color:#d1d1d1">
+        <el-table-column prop="order_no" label="订单号">
+          <template #default="scope">
+            <span>{{ scope.row.order_no }}</span>
+            <el-icon class="copy-order-no" :data-clipboard-text="scope.row.order_no">
+              <DocumentCopy/>
+            </el-icon>
+          </template>
+        </el-table-column>
+        <el-table-column prop="subject" label="产品名称"/>
+        <el-table-column prop="amount" label="订单金额"/>
+        <el-table-column label="调用次数">
+          <template #default="scope">
+            <span>{{ scope.row.remark?.calls }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="支付时间">
+          <template #default="scope">
+            <span v-if="scope.row['pay_time']">{{ dateFormat(scope.row['pay_time']) }}</span>
+            <el-tag v-else>未支付</el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+
+    <div class="pagination">
+      <el-pagination v-if="total > 0" background
+                     layout="total,prev, pager, next"
+                     :hide-on-single-page="true"
+                     v-model:current-page="page"
+                     v-model:page-size="pageSize"
+                     @current-change="fetchData()"
+                     :total="total"/>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {onMounted, ref, watch} from "vue";
+import {httpPost} from "@/utils/http";
+import {ElMessage} from "element-plus";
+import {dateFormat} from "@/utils/libs";
+import {DocumentCopy} from "@element-plus/icons-vue";
+import Clipboard from "clipboard";
+
+const items = ref([])
+const total = ref(0)
+const page = ref(1)
+const pageSize = ref(10)
+const loading = ref(true)
+
+onMounted(() => {
+  fetchData()
+  const clipboard = new Clipboard('.copy-order-no');
+  clipboard.on('success', () => {
+    ElMessage.success("复制成功！");
+  })
+
+  clipboard.on('error', () => {
+    ElMessage.error('复制失败！');
+  })
+})
+
+// 获取数据
+const fetchData = () => {
+  httpPost('/api/order/list', {page: page.value, page_size: pageSize.value}).then((res) => {
+    if (res.data) {
+      items.value = res.data.items
+      total.value = res.data.total
+      page.value = res.data.page
+      pageSize.value = res.data.page_size
+    }
+    loading.value = false
+  }).catch(e => {
+    ElMessage.error("获取数据失败：" + e.message);
+  })
+}
+</script>
+
+<style scoped lang="stylus">
+.user-bill {
+  .pagination {
+    margin: 20px 0 0 0;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .copy-order-no {
+    cursor pointer
+    position relative
+    left 6px
+    top 2px
+    color #20a0ff
+  }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/views/Member.vue b/web/src/views/Member.vue
index 33a07740..d615592f 100644
--- a/web/src/views/Member.vue
+++ b/web/src/views/Member.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="member custom-scroll">
+  <div class="member">
     <div class="title">
       会员充值中心
     </div>
-    <div class="inner" :style="{height: listBoxHeight + 'px'}">
+    <div class="inner custom-scroll">
 
       <div class="user-profile">
         <user-profile/>
@@ -28,7 +28,7 @@
         </el-row>
       </div>
 
-      <div class="product-box">
+      <div class="product-box" :style="{height: listBoxHeight + 'px'}">
         <div class="info">
           <el-alert type="info" show-icon :closable="false" effect="dark">
             <strong>说明:</strong> 成为本站会员后每月有500次对话额度，50次 AI 绘画额度，限制下月1号解除，若在期间超过次数后可单独购买点卡。
@@ -36,7 +36,7 @@
           </el-alert>
         </div>
 
-        <ItemList :items="list" v-if="list.length > 0" :gap="30" :width="200">
+        <ItemList :items="list" v-if="list.length > 0" :gap="30" :width="240">
           <template #default="scope">
             <div class="product-item" :style="{width: scope.width+'px'}" @click="orderPay(scope.item)">
               <div class="image-container">
@@ -63,6 +63,12 @@
             </div>
           </template>
         </ItemList>
+
+        <h2 class="headline">消费账单</h2>
+
+        <div class="user-order">
+          <user-order v-if="isLogin"/>
+        </div>
       </div>
     </div>
 
@@ -140,6 +146,7 @@ import RewardVerify from "@/components/RewardVerify.vue";
 import {useRouter} from "vue-router";
 import {removeUserToken} from "@/store/session";
 import CountDown from "@/components/CountDown.vue";
+import UserOrder from "@/components/UserOrder.vue";
 
 const listBoxHeight = window.innerHeight - 97
 const list = ref([])
@@ -302,9 +309,8 @@ const logout = function () {
   .inner {
     display flex
     color #ffffff
-    padding 15px;
-    overflow-y visible
-    overflow-x hidden
+    padding 15px 0 15px 15px;
+    overflow hidden
 
     .user-profile {
       padding 10px 20px
@@ -330,7 +336,10 @@ const logout = function () {
 
 
     .product-box {
-      padding 0 10px
+      overflow-x hidden
+      overflow-y visible
+      width 100%
+      padding-left 20px
 
       .info {
         .el-alert__description {
@@ -412,6 +421,14 @@ const logout = function () {
           }
         }
       }
+
+      .headline {
+        padding 0 20px
+      }
+
+      .user-order {
+        padding 0 20px 20px 20px
+      }
     }
   }