:ghost:feat: 买卖确认+文件上传+金额format

src/router/index.js

@@ -98,6 +98,13 @@ const router = createRouter({
       component: () => import("@/views/buyOrSell/SellConf.vue"),
       meta: { index: 1 },
     },
+    // posi测试
+    {
+      path: "/posi",
+      name: "posi",
+      component: () => import("@/views/position/PositionIndex1.vue"),
+      meta: { index: 1 },
+    },
     // 持仓
     {
       path: "/position",

src/service/buyOrSell/index.js

@@ -6,11 +6,27 @@ export function getBuyConfList() {
 }
 
 // 买家上传支付凭证
-export function uploadImg() {
-  return axios.post(`/myCenter/uploadCertificateImg`);
+export function uploadImg(params) {
+  return axios.post(`/myCenter/uploadCertificateImg`, params);
 }
 
 // 获取卖出确认列表
 export function getSellConfList() {
   return axios.get(`/myCenter/unconfirmedTradeOrder/sell`);
 }
+
+
+// 买家确认交易单
+export function buyerConf(orderId) {
+  return axios.get(`/myCenter/confirmedTradeOrderForBuyer?orderId=${orderId}`)
+}
+
+// 卖家确认交易单
+export function sellerConf(orderId) {
+  return axios.get(`/myCenter/confirmedTradeOrderForSeller?orderId=${orderId}`)
+}
+
+// 根据交易单id获取上传凭证
+export function getImg(orderId) {
+  return axios.get(`/myCenter/download/${orderId}`)
+}

src/service/home/index.js

@@ -1,6 +1,11 @@
 import axios from '../../utils/axios'
 import { stringToUrl } from '@/common/js/utils';
 
+// 用户累计成交，Top5
+export function getTop5List() {
+    return axios.get(`/index/queryTopTrade`);
+}
+
 // 获取最新股票详情
 export function getStockInfoForNewest() {
     return axios.get(`/index/getStockInfoForNewest`);

src/service/trading/index.js

@@ -1,6 +1,12 @@
 import axios from '../../utils/axios';
 import { stringToUrl } from '@/common/js/utils';
 
+
+// 获取买卖挂单列表
+export function getBuySellList() {
+    return axios.get(`/index/queryPendOrderList`);
+}
+
 // 股票买卖挂单
 export function addPendOrder(params) {
     return axios.post(`/tradeOrder/addPendOrder`, params);

src/styles/home/homeRank5.less

@@ -87,7 +87,7 @@
     .buy-box {
       margin: auto;
       border-radius: 10px;
-      background-color:	#fff6ee;
+      background-color:	#f8f7ff;
       padding: 15px;
       width: 95%;
       max-width: 600px;
@@ -110,7 +110,7 @@
       margin: auto;
       margin-top: 1px;
       border-radius: 10px;
-      background-color: #fff6ee;
+      background-color: #f8f7ff;
       padding: 15px;
       width: 95%;
       max-width: 600px;

src/styles/position/index1.less

@@ -0,0 +1,549 @@
+body * {
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+
+body {
+  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
+    Arial, PingFang SC-Light, Microsoft YaHei;
+}
+
+button {
+  margin: 0;
+  padding: 0;
+  border: 1px solid transparent;
+  outline: none;
+  background-color: transparent;
+}
+
+button:active {
+  opacity: 0.6;
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.justify-start {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.justify-center {
+  display: flex;
+  justify-content: center;
+}
+
+.justify-end {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.justify-evenly {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.justify-around {
+  display: flex;
+  justify-content: space-around;
+}
+
+.justify-between {
+  display: flex;
+  justify-content: space-between;
+}
+
+.align-start {
+  display: flex;
+  align-items: flex-start;
+}
+
+.align-center {
+  display: flex;
+  align-items: center;
+}
+
+.align-end {
+  display: flex;
+  align-items: flex-end;
+}
+
+.group5 {
+  width: 15%;
+  height: 16px;
+  margin-right: 50px;
+
+  .icon2 {
+    width: 18px;
+    height: 18px;
+    margin-right: 5px;
+  }
+
+  .TextGroup2 {
+    height: 16px;
+    width: 22px;
+
+    .txt3 {
+      width: 22px;
+      height: 16px;
+      overflow-wrap: break-word;
+      color: rgba(64, 77, 116, 1);
+      font-size: 14px;
+      font-family: PingFangSC-Semibold;
+      text-align: center;
+      white-space: nowrap;
+      line-height: 16px;
+      display: block;
+    }
+  }
+}
+
+.position {
+  background-color: #fff;
+  width: 100%;
+  // height: calc(100vh - 100px);
+  position: relative;
+
+  .box1 {
+    width: 100%;
+    height: 100%;
+    height: calc(100% - 50px);
+    padding-bottom: 10px;
+    overflow: auto;
+    overflow-x: hidden;
+
+    .van-tabs__line {
+      background-color: #ff3456 !important;
+    }
+
+    .van-tab--active .van-tab__text--ellipsis {
+      color: #ff3456;
+    }
+
+    .box2 {
+      height: 64px;
+      background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnged210ff8540d1e20d828b0758e650612a9ea018b41f720bede87fea0f933d8d8)
+        100% no-repeat;
+      width: 100%;
+
+      .layer1 {
+        width: 364px;
+        height: 20px;
+        margin: 1px 0 0 7px;
+
+        .group1 {
+          width: 34px;
+          height: 6px;
+          background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga64b2ae35561e96115c75cc6dfc235eedb108ecf95df957be1ef364417a9806e)
+            100% no-repeat;
+          margin-top: 7px;
+        }
+
+        .word1 {
+          width: 38px;
+          height: 17px;
+          overflow-wrap: break-word;
+          color: rgba(81, 84, 106, 1);
+          font-size: 12px;
+          font-family: PingFangSC-Semibold;
+          text-align: right;
+          white-space: nowrap;
+          line-height: 17px;
+          margin-left: 21px;
+          display: block;
+        }
+
+        .group2 {
+          width: 30px;
+          height: 17px;
+          overflow-wrap: break-word;
+          font-size: 0;
+          font-family: PingFangSC-Semibold;
+          text-align: right;
+          white-space: nowrap;
+          line-height: 17px;
+          margin: 3px 0 0 73px;
+
+          .info1 {
+            width: 30px;
+            height: 17px;
+            overflow-wrap: break-word;
+            color: rgba(81, 84, 106, 1);
+            font-size: 12px;
+            font-family: PingFangSC-Semibold;
+            text-align: left;
+            white-space: nowrap;
+            line-height: 17px;
+          }
+
+          .word2 {
+            width: 30px;
+            height: 17px;
+            overflow-wrap: break-word;
+            color: rgba(81, 84, 106, 1);
+            font-size: 12px;
+            font-family: PingFangSC-Medium;
+            text-align: left;
+            white-space: nowrap;
+            line-height: 17px;
+          }
+        }
+
+        .group3 {
+          width: 26px;
+          height: 10px;
+          background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2e68dee6e62554db0f6ac40572f41b7be9cc24d35fc06b24c556fed2b7b18626)
+            100% no-repeat;
+          margin: 5px 0 0 142px;
+        }
+      }
+
+      .layer2 {
+        width: 218px;
+        height: 22px;
+        margin: 9px 0 12px 10px;
+
+        .label1 {
+          width: 10px;
+          height: 18px;
+          margin-top: 4px;
+        }
+
+        .txt1 {
+          width: 80px;
+          height: 22px;
+          overflow-wrap: break-word;
+          color: rgba(64, 77, 116, 1);
+          font-size: 16px;
+          font-family: PingFangSC-Medium;
+          text-align: center;
+          white-space: nowrap;
+          line-height: 22px;
+          display: block;
+        }
+      }
+    }
+
+    .box3 {
+      background-color: rgba(255, 255, 255, 1);
+      height: 100%;
+      margin-top: 1px;
+      width: 100%;
+
+      .main1 {
+        width: 100%;
+        height: 100%;
+
+        .groove {
+          height: 10px;
+          width: 100%;
+          background-color: #f5f5f5;
+        }
+
+        .mod1 {
+          .section1 {
+            margin: 15px 15px;
+
+            .ImageText1 {
+              height: 16px;
+              margin-top: 1px;
+              width: 55%;
+
+              .group4 {
+                width: 40%;
+                height: 16px;
+
+                .layer3 {
+                  width: 16px;
+                  height: 16px;
+                  margin-right: 5px;
+                  background: url("../../assets/home/titleIcon.png") top center
+                    no-repeat;
+                  background-size: 100%;
+                }
+
+                .word3 {
+                  width: auto;
+                  height: 14px;
+                  overflow-wrap: break-word;
+                  color: rgba(64, 77, 116, 1);
+                  font-size: 15px;
+                  font-family: PingFangSC-Semibold;
+                  text-align: left;
+                  white-space: nowrap;
+                  line-height: 15px;
+                  display: block;
+                }
+              }
+            }
+
+            .main5 {
+              width: auto;
+              cursor: pointer;
+
+              .label2 {
+                width: 20px;
+                height: 20px;
+                margin-right: 5px;
+              }
+            }
+          }
+        }
+
+        .robotLabelName {
+          width: 25%;
+        }
+
+        .mod3 {
+          background-color: rgba(255, 255, 255, 1);
+          z-index: 24;
+          height: 350px;
+          width: 100%;
+          position: relative;
+        }
+
+        .mod5 {
+          background-color: rgba(255, 255, 255, 1);
+          z-index: 84;
+          height: 350px;
+          width: 100%;
+          position: relative;
+        }
+
+        .mod9 {
+          background-color: rgba(255, 255, 255, 1);
+          z-index: 156;
+          height: 350px;
+          width: 100%;
+          position: relative;
+        }
+
+        .mod11 {
+          background-color: rgba(255, 255, 255, 1);
+          z-index: 217;
+          height: 350px;
+          width: 100%;
+          position: relative;
+        }
+      }
+    }
+
+    .positionBox1 {
+      .searchRow {
+        margin: 18px 15px;
+
+        .bd3 {
+          width: 87px;
+          height: 16px;
+
+          .outer4 {
+            width: 16px;
+            height: 16px;
+            background: url("../../assets/home/titleIcon.png") top center
+              no-repeat;
+            background-size: 100%;
+          }
+
+          .txt2 {
+            width: 65px;
+            height: 15px;
+            overflow-wrap: break-word;
+            color: rgba(64, 77, 116, 1);
+            font-size: 15px;
+            font-family: PingFangSC-Semibold;
+            text-align: left;
+            white-space: nowrap;
+            line-height: 15px;
+            display: block;
+          }
+        }
+
+        .main5 {
+          width: auto;
+          cursor: pointer;
+
+          .label2 {
+            width: 20px;
+            height: 20px;
+            margin-right: 5px;
+          }
+        }
+      }
+    }
+  }
+
+  .bd1 {
+    width: 100%;
+    height: 108px;
+    // background: url(../../assets/home/outer.png) no-repeat;
+    background: #eaf5ff;
+    background-size: 100% 100%;
+
+    .box2 {
+      width: 100%;
+      height: 100%;
+
+      .TextGroup {
+        height: 57px;
+        width: 48px;
+
+        .main6 {
+          width: 48px;
+          height: 57px;
+
+          .word5 {
+            height: 26px;
+            overflow-wrap: break-word;
+            color: rgba(223, 94, 76, 1);
+            font-size: 22px;
+            font-family: Helvetica;
+            text-align: center;
+            white-space: nowrap;
+            line-height: 26px;
+            display: block;
+          }
+
+          .word6 {
+            height: 17px;
+            overflow-wrap: break-word;
+            color: rgb(107, 107, 255);
+            font-size: 12px;
+            text-align: center;
+            white-space: nowrap;
+            line-height: 17px;
+            margin-top: 14px;
+            display: block;
+          }
+        }
+      }
+    }
+  }
+
+  .baseRow {
+    width: 90%;
+    height: 20px;
+    margin-left: 15px;
+    margin-top: 5px;
+    justify-content: flex-start;
+
+    .group2 {
+      background-color: #ff3456;
+      border-radius: 2px;
+      width: 4px;
+      height: 16px;
+      margin-top: 4px;
+    }
+
+    .baseText {
+      width: 150px;
+      height: 20px;
+      margin-top: 2px;
+      overflow-wrap: break-word;
+      color: rgba(64, 77, 116, 1);
+      font-size: 14px;
+      font-family: PingFangSC-Medium;
+      text-align: left;
+      // white-space: nowrap;
+      line-height: 20px;
+      display: block;
+      margin-left: 15px;
+    }
+  }
+
+  .searchRow {
+    margin: 18px 15px;
+
+    .bd3 {
+      width: 87px;
+      height: 16px;
+
+      .outer4 {
+        width: 16px;
+        height: 16px;
+        background: url("../../assets/position/hisBillIcon.png") top center no-repeat;
+        background-size: 100%;
+      }
+
+      .txt2 {
+        width: 65px;
+        height: 15px;
+        overflow-wrap: break-word;
+        color: rgba(64, 77, 116, 1);
+        font-size: 15px;
+        font-family: PingFangSC-Semibold;
+        text-align: left;
+        white-space: nowrap;
+        line-height: 15px;
+        display: block;
+      }
+    }
+
+    .main5 {
+      width: auto;
+      cursor: pointer;
+
+      .label2 {
+        width: 23px;
+        height: 23px;
+        margin-right: 5px;
+      }
+    }
+  }
+
+  .word13 {
+    // height: 14px;
+    width: 4.375rem;
+    overflow-wrap: break-word;
+    color: rgba(64, 77, 116, 1);
+    font-size: 14px;
+    line-height: 15px;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  
+  .van-field__label {
+    width: auto;
+  }
+
+  .van-field__control {
+    width: 70%;
+  }
+
+  .van-field__body {
+    width: 100%;
+  }
+
+  .van-calendar__day--start-end {
+    background-color: #ff3456;
+  }
+
+  .van-calendar__selected-day {
+    background-color: #ff3456;
+  }
+
+  .van-calendar__day--start {
+    background-color: #ff3456;
+  }
+
+  .van-calendar__day--middle {
+    color: #ff3456;
+  }
+
+  .van-calendar__day--end {
+    background-color: #ff3456;
+  }
+
+  .van-calendar__confirm {
+    border-color: #ff3456;
+    background-color: #ff3456;
+  }
+}

src/styles/trading/index.less

@@ -693,7 +693,7 @@
       margin: auto;
       margin-top: 1px;
       border-radius: 10px;
-      background-color: #fff9f7;
+      background-color: #f8f7ff;
       padding: 15px;
       width: 95%;
       max-width: 600px;

src/styles/user/index.less

@@ -161,15 +161,15 @@
                     height: 100%;
                     position: relative;
 
-                    &.taskMessageIcon::after {
+                    &.sysManageIcon::after {
                         content: "";
                         position: absolute;
-                        background: #fff url("../../assets/user/taskMessageIcon.png") top center no-repeat;
+                        background: #fff url("../../assets/user/sysManageIcon.png") top center no-repeat;
                         background-size: 100%;
                         width: 0.55rem;
                         height: 0.55rem;
                         right: 0.2rem;
-                        top: 0.45rem;
+                        top: 0.4rem;
                     }
 
                     &.announcementIcon::after {

src/views/buyOrSell/BuyConf.vue

@@ -1,51 +1,87 @@
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, onMounted, onBeforeUnmount, computed } from "vue";
 import sHeader from "@/components/SimpleHeader";
 import { useTradeStore } from '@/stores/trade';
-import { uploadImg } from "@/service/buyOrSell";
+import { uploadImg, buyerConf } from "@/service/buyOrSell";
 import { showFailToast, showSuccessToast } from "vant";
 import { useRouter } from 'vue-router'
-// const value = ref([
-//     { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
-// ]);
 
-const certificate = ref('SsfOS75GxUGjGk') // 买家用户名
-const price = ref(80.02) // 价格
-const tradeNumber = ref(2000) // 股票数量
+
+const certificate = ref('') // 单据凭证
+const price = ref(0) // 价格
+const tradeNumber = ref(0) // 股票数量
 // const sellerUserName = ref('')  // 卖家用户名
-const sellerPayeeCode = ref('13045678901') // 卖家支付宝
-const sellerCardNo = ref('642343275134234203470') // 卖家银行卡号
-const totalPrice = ref(0)
-const orderId = ref('') // 交易单id
+const sellerPayeeCode = ref('') // 卖家支付宝
+const sellerCardNo = ref('') // 卖家银行卡号
+let totalPrice = computed(() => { // 需付款
+    return price.value * tradeNumber.value
+})
+
 
 const tradeStore = useTradeStore()
-const router = useRouter();
+const router = useRouter()
 
-const imgFile = ref()
+const orderId = ref('') // 交易单id
+const fileList = ref([]);
 
-const onSubmit = async () => {
-    const params = {
-        file: imgFile.value,
-        orderId: orderId.value
+const afterRead = async (file) => {
+    file.status = 'uploading';
+    file.message = '上传中...';
+
+    try {
+        const formData = new FormData();
+        formData.append('file', file.file);
+        formData.append('orderId', orderId.value);
+
+        const { data } = await uploadImg(formData);
+        if (data.code === "00000") {
+            file.status = 'done';
+            file.message = '上传成功';
+
+        } else {
+            file.status = 'failed';
+            file.message = '上传失败';
+        }
+    } catch (error) {
+        file.status = 'failed';
+        file.message = '上传失败';
+        console.error("上传失败", error);
+        if (error.response) {
+            console.error("Response Data:", error.response.data);
+        }
     }
-    const { data } = await uploadImg(params)
-    if (data.code === '00000') {
-        showSuccessToast('成功')
-        router.go(-1)
-    } else {
-        showFailToast(data.message)
+};
+
+
+const onSubmit = async () => {
+    if (!fileList.value || fileList.value.length === 0) {
+        showFailToast('请选择文件');
+        return;
     }
-}
 
+    try {
+        const { data } = await buyerConf(orderId.value)
+        if (data.code === "00000") {
+            showSuccessToast('提交成功');
+            setTimeout(() => {
+                router.go(-1);
+            }, 1500);
+        } else {
+            showFailToast('提交失败')
+        }
+    } catch (error) {
+        console.log("提交失败", error);
+    }
+};
 
 
 onMounted(() => {
     if (tradeStore.tradeItem) {
-        orderId.value = tradeStore.tradeItem.id;
-        totalPrice.value = tradeStore.tradeItem.totalPrice;
         const item = tradeStore.getTradeItem()
-        console.log("item >>>", item);
-        console.log("看看有没有 >>>", tradeStore.tradeItem);
+        certificate.value = item.certificate;
+        tradeNumber.value = item.tradeNumber;
+        price.value = item.price;
+        orderId.value = item.id;
     }
 });
 
@@ -54,47 +90,7 @@ onBeforeUnmount(() => {
     tradeStore.clearTradeItem();
 });
 
-totalPrice.value = price.value * tradeNumber.value;
-
-
-const fileList = ref([
-    // {
-    //     url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg',
-    //     status: 'uploading',
-    //     message: '上传中...',
-    // },
-    // {
-    //     url: 'https://fastly.jsdelivr.net/npm/@vant/assets/tree.jpeg',
-    //     status: 'failed',
-    //     message: '上传失败',
-    // },
-    // { url: 'https://cloud-image', isImage: true },
-    {
-        // url: 'https://fastly.jsdelivr.net/npm/@vant/assets/sand.jpeg',
-        url: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
-        status: 'done',
-        message: '上传完成',
-    }
-]);
-
-// const afterRead = (file) => {
-//     file.status = 'uploading';
-//     file.message = '上传中...';
-
-//     setTimeout(() => {
-//         file.status = 'failed';
-//         file.message = '上传失败';
-//     }, 2000);
-// };
 
-const afterRead = async (file) => {
-    // 将文件上传至服务器
-    // const { data } = await uploadImg(
-    //     // file,OrderId
-    //   );
-    imgFile.value = file
-    console.log("上传文件", file);
-}
 
 </script>
 
@@ -109,6 +105,7 @@ const afterRead = async (file) => {
             <van-cell-group inset>
                 <van-field v-model="certificate" readonly name="单据凭证" label="单据凭证" placeholder="单据凭证"
                     left-icon="coupon" />
+                <!-- :rules="[{ required: true, message: '单据凭证缺失' }]" -->
                 <van-field v-model="tradeNumber" readonly name="买入数量" label="买入数量" placeholder="买入数量"
                     left-icon="goods-collect" :rules="[{ required: true, message: '买入数量不能为空' }]" />
                 <van-field v-model="price" readonly name="买入单价" label="买入单价" placeholder="买入单价" left-icon="gold-coin" />
@@ -118,9 +115,10 @@ const afterRead = async (file) => {
             <!-- 卖家收款信息 -->
             <van-cell-group inset>
                 <van-field v-model="sellerPayeeCode" readonly name="卖家支付宝号" label="卖家支付宝号" placeholder="卖家支付宝号"
-                    left-icon="alipay" :rules="[{ required: true, message: '支付宝号不能为空' }]" />
+                    left-icon="alipay" />
+                <!-- :rules="[{ required: true, message: '支付宝号不能为空' }]" -->
                 <van-field v-model="sellerCardNo" readonly name="卖家银行卡号" label="卖家银行卡号" placeholder="卖家银行卡号"
-                    left-icon="card" :rules="[{ required: true, message: '卖家银行卡号不能为空' }]" />
+                    left-icon="card" />
             </van-cell-group>
             <br>
             <!-- 上传支付宝/银行付款截图 -->

src/views/buyOrSell/BuyConfList.vue

@@ -50,10 +50,11 @@ const getList = async () => {
         }
         // 列表值叠加
         buyConfList.value = buyConfList.value.concat(
-            data.data.records
+            data.data
         );
-        buyConfListTotal.value = data.data.total;
-        if (buyConfList.value.length === data.data.total) {
+
+        buyConfListTotal.value = data.data.length;
+        if (buyConfList.value.length === data.data.length) {
             finished.value = true;
         }
         loading.value = false;
@@ -127,38 +128,21 @@ onMounted(async () => {
                 </div>
 
                 <div class="listBox">
-                    <div v-for="(item) in buyConfList" :key="item.id" class="listItem">
+                    <div v-for="item in buyConfList" :key="item.id" class="listItem">
                         <div class="itemBox">
-
-                            <div class="itemRow">
-                                <span class="itemTitle">挂单价格:&nbsp;</span>{{
-                                    item.price }}
-                            </div>
                             <div class="itemRow">
-                                <span class="itemTitle">委托数量:&nbsp;</span>{{
-                                    item.entrustNumber }}
+                                <span class="itemTitle">卖家:&nbsp;</span>{{
+                                    item.seller }}
                             </div>
                             <div class="itemRow">
-                                <span class="itemTitle">挂单类型:&nbsp;</span>{{
-                                    showTypeText(item.type) }}
+                                <span class="itemTitle">股票价格:&nbsp;</span>{{
+                                    item.price }}
                             </div>
-                            <!-- 状态：0过期，1生效，2撤单，3全部成交，4部分成交 -->
                             <div class="itemRow">
-                                <span class="itemTitle">状态:&nbsp;</span>{{
-                                    showStatusText(item.status) }}
-                            </div>
-                            <!-- if 0，1 不显示其他 -->
-                            <!-- if 2 显示撤单时间 -->
-                            <div v-if="item.status === '2'" class="itemRow">
-                                <span class="itemTitle">撤单时间:&nbsp;</span>{{
-                                    item.cancelTime }}
-                            </div>
-                            <!-- if 3，4 显示成交数量 -->
-                            <div v-if="item.status === '3' || item.status === '4'" class="itemRow">
-                                <span class="itemTitle">成交数量:&nbsp;</span>{{
+                                <span class="itemTitle">股票数量:&nbsp;</span>{{
                                     item.tradeNumber }}
                             </div>
-
+                            
                             <!-- 创建时间 -->
                             <div class="itemRow">
                                 <span class="itemTitle">创建时间:&nbsp;</span>{{
@@ -172,8 +156,8 @@ onMounted(async () => {
                                 }}
                             </div>
 
-                            <!-- 去付款 -->
-                            <div v-if="item.status === '3' || item.status === '4'" class="itemRow"
+                            <!-- 0未确认，去付款 -->
+                            <div v-if="item.status === '0'" class="itemRow"
                                 style="display: flex; justify-content: flex-end">
                                 <van-button span="5" round type="primary" :style="{
                                     height: '2em',
@@ -198,7 +182,7 @@ onMounted(async () => {
                                     showStatusText(item.status)
                                     }}</span>
                             </div>
-
+                            
                         </div>
                     </div>
                 </div>

src/views/buyOrSell/SellConf.vue

@@ -1,12 +1,66 @@
 <script setup>
 import sHeader from "@/components/SimpleHeader";
-import { ref } from 'vue'
+import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
+import { sellerConf, getImg } from "@/service/buyOrSell";
+import { showFailToast, showSuccessToast } from "vant";
+import { useRouter } from 'vue-router'
+import { useTradeStore } from '@/stores/trade';
 
-const certificate = ref('SsfOS75GxUGjGk') // 买家用户名
-const price = ref(80.02) // 价格
-const tradeNumber = ref(2000) // 股票数量
-const totalPrice = ref(0)
-totalPrice.value = price.value * tradeNumber.value;
+
+const router = useRouter()
+const tradeStore = useTradeStore()
+
+const certificate = ref('') // 买家用户名
+const price = ref(0) // 价格
+const tradeNumber = ref(0) // 股票数量
+let totalPrice = computed(() => { // 应收款
+    return price.value * tradeNumber.value
+})
+
+const orderId = ref('') // 交易单id
+
+let imgUrl = ref('')
+
+const getImgFunc = async () => {
+    const { data } = await getImg(orderId.value)
+    if (data.code === '00000') {
+        imgUrl.value = data.data
+    } else {
+        showFailToast('未找到买家付款截图')
+    }
+}
+
+const onSubmit = async () => {
+    try {
+        const { data } = await sellerConf(orderId.value)
+        if (data.code === "00000") {
+            showSuccessToast('已确认');
+            setTimeout(() => {
+                router.go(-1);
+            }, 1500);
+        } else {
+            showFailToast('提交失败')
+        }
+    } catch (error) {
+        console.log("提交失败", error);
+    }
+};
+
+onMounted(() => {
+    if (tradeStore.tradeItem) {
+        const item = tradeStore.getTradeItem()
+        certificate.value = item.certificate;
+        tradeNumber.value = item.tradeNumber;
+        price.value = item.price;
+        orderId.value = item.id;
+    }
+    getImgFunc()
+});
+
+// 当组件卸载时清除用户信息
+onBeforeUnmount(() => {
+    tradeStore.clearTradeItem();
+});
 
 </script>
 
@@ -32,7 +86,9 @@ totalPrice.value = price.value * tradeNumber.value;
                 <!-- 买家的付款截图 -->
                 <van-field name="uploader" label="买家的付款截图">
                     <template #input>
-                        <van-image width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+                        <van-image width="100" height="100"
+                            :src="imgUrl" />
+                            <!-- https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg -->
                     </template>
                 </van-field>
             </van-cell-group>

src/views/buyOrSell/SellConfList.vue

@@ -45,17 +45,21 @@ const getList = async () => {
         Object.assign({}, searchParams)
     );
     if (data.code === "00000") {
-        console.log("data.data >>>", data.data);
-        console.log("object");
+        console.log("打印一下", data.data);
         if (searchParams.current === 0) {
             sellConfList.value = [];
         }
         // 列表值叠加
         sellConfList.value = sellConfList.value.concat(
-            data.data.records
+            data.data
         );
-        sellConfListTotal.value = data.data.total;
-        if (sellConfList.value.length === data.data.total) {
+
+        console.log("sellConfList.value >>", sellConfList.value);
+
+        sellConfListTotal.value = data.data.length;
+        console.log("sellConfListTotal.val >>>", sellConfListTotal.value);
+        console.log("data.data.length >>>", data.data.length);
+        if (sellConfList.value.length === data.data.length) {
             finished.value = true;
         }
         loading.value = false;
@@ -74,7 +78,7 @@ const showDateTime = (date) => {
 // const userStore = useUserStore();
 const tradeStore = useTradeStore();
 // 去付款
-const toBuy = (item) => {
+const toConf = (item) => {
     // userStore.setUserInfo(item);
     tradeStore.setTradeItem(item);
     router.push({ name: 'buyConf' });
@@ -108,7 +112,7 @@ onMounted(async () => {
 </script>
 
 <template>
-    <!-- 卖家确认列表 -->
+    <!-- 卖出确认列表 -->
     <div class="sellConfList flex-col">
         <s-header name="卖出确认" :noback="false"></s-header>
 
@@ -129,38 +133,21 @@ onMounted(async () => {
                 </div>
 
                 <div class="listBox">
-                    <div v-for="(item) in sellConfList" :key="item.id" class="listItem">
+                    <div v-for="item in sellConfList" :key="item.id" class="listItem">
                         <div class="itemBox">
-
-                            <div class="itemRow">
-                                <span class="itemTitle">挂单价格:&nbsp;</span>{{
-                                    item.price }}
-                            </div>
                             <div class="itemRow">
-                                <span class="itemTitle">委托数量:&nbsp;</span>{{
-                                    item.entrustNumber }}
+                                <span class="itemTitle">卖家:&nbsp;</span>{{
+                                    item.seller }}
                             </div>
                             <div class="itemRow">
-                                <span class="itemTitle">挂单类型:&nbsp;</span>{{
-                                    showTypeText(item.type) }}
+                                <span class="itemTitle">股票价格:&nbsp;</span>{{
+                                    item.price }}
                             </div>
-                            <!-- 状态：0过期，1生效，2撤单，3全部成交，4部分成交 -->
                             <div class="itemRow">
-                                <span class="itemTitle">状态:&nbsp;</span>{{
-                                    showStatusText(item.status) }}
-                            </div>
-                            <!-- if 0，1 不显示其他 -->
-                            <!-- if 2 显示撤单时间 -->
-                            <div v-if="item.status === '2'" class="itemRow">
-                                <span class="itemTitle">撤单时间:&nbsp;</span>{{
-                                    item.cancelTime }}
-                            </div>
-                            <!-- if 3，4 显示成交数量 -->
-                            <div v-if="item.status === '3' || item.status === '4'" class="itemRow">
-                                <span class="itemTitle">成交数量:&nbsp;</span>{{
+                                <span class="itemTitle">股票数量:&nbsp;</span>{{
                                     item.tradeNumber }}
                             </div>
-
+                            
                             <!-- 创建时间 -->
                             <div class="itemRow">
                                 <span class="itemTitle">创建时间:&nbsp;</span>{{
@@ -174,8 +161,9 @@ onMounted(async () => {
                                 }}
                             </div>
 
-                            <!-- 去付款 -->
-                            <div v-if="item.status === '3' || item.status === '4'" class="itemRow"
+                            <!-- 这里要改TODO: -->
+                            <!-- 未确认，去确认收款 -->
+                            <div v-if="item.status === '0'" class="itemRow"
                                 style="display: flex; justify-content: flex-end">
                                 <van-button span="5" round type="primary" :style="{
                                     height: '2em',
@@ -185,8 +173,8 @@ onMounted(async () => {
                                     color: '#fff', // 文字颜色为白色
                                     boxShadow: '0 2px 8px rgba(255, 55, 95, 0.3)', // 添加阴影效果
                                     transition: 'all 0.3s ease' // 添加过渡效果，使变化更平滑
-                                }" @click="toBuy(item)">
-                                    付款
+                                }" @click="toConf(item)">
+                                    确认收款
                                 </van-button>
                             </div>
 
@@ -200,7 +188,7 @@ onMounted(async () => {
                                     showStatusText(item.status)
                                     }}</span>
                             </div>
-
+                            
                         </div>
                     </div>
                 </div>

src/views/home/HomeIndex.vue

@@ -4,11 +4,16 @@
     <div class="homeBox">
       <s-header :name="sys ? sys.title : $t('public.homePage')" :noback="true" :isFixed="false"></s-header>
       <!-- 新闻通知 -->
-      <template v-if="noticeContent.title">
+      <!-- <template v-if="noticeContent.title">
         <van-notice-bar @click="noticeClk" mode="link" :scrollable="true" color="rgba(64,77,116,1)" left-icon="volume-o"
           :text="noticeContent.title" />
-      </template>
-      <div class="intervalRow"></div>
+      </template> -->
+      <!-- <template> -->
+        <van-notice-bar @click="noticeClk" mode="link" :scrollable="true" color="rgba(64,77,116,1)" left-icon="volume-o"
+          text="这里是关于SUNZEE内部交易系统的公告说明！" />
+      <!-- </template> -->
+      <!-- 灰线 -->
+      <!-- <div class="intervalRow"></div> -->
       <div class="nameDeviceRow flex-col">
         <span class="txt3">{{ userName }}</span>
         <div class="l-flex-RC">
@@ -65,13 +70,14 @@
         <van-divider>买家Top5排行榜</van-divider>
         <van-row justify="center" class="bold-row">
           <van-col span="8">姓名</van-col>
-          <van-col span="8">交易数量</van-col>
-          <van-col span="8">单价</van-col>
+          <van-col span="8">成交总量</van-col>
+          <van-col span="8">总金额</van-col>
         </van-row>
-        <van-row v-for="(item, index) in top5List" :key="index" justify="center">
-          <van-col span="8">买家{{ index + 1 }}</van-col>
-          <van-col span="8">{{ item.amount }}</van-col>
-          <van-col span="8">{{ item.price }}</van-col>
+        <van-row v-for="(item, index) in buyTop5List" :key="index" justify="center">
+          <!-- <van-col span="8">买家{{ index + 1 }}</van-col> -->
+          <van-col span="8">{{ item.userAnonymousName }}</van-col>
+          <van-col span="8">{{ item.totalNum }}</van-col>
+          <van-col span="8">{{ item.totalPrice }}</van-col>
         </van-row>
       </div>
       <div style="height: 20px;"></div>
@@ -79,13 +85,14 @@
         <van-divider>卖家Top5排行榜</van-divider>
         <van-row justify="center" class="bold-row">
           <van-col span="8">姓名</van-col>
-          <van-col span="8">交易数量</van-col>
-          <van-col span="8">单价</van-col>
+          <van-col span="8">成交总量</van-col>
+          <van-col span="8">总金额</van-col>
         </van-row>
-        <van-row v-for="(item, index) in top5List" :key="index" justify="center">
-          <van-col span="8">卖家{{ index + 1 }}</van-col>
-          <van-col span="8">{{ item.amount }}</van-col>
-          <van-col span="8">{{ item.price }}</van-col>
+        <van-row v-for="(item, index) in sellTop5List" :key="index" justify="center">
+          <!-- <van-col span="8">卖家{{ index + 1 }}</van-col> -->
+          <van-col span="8">{{ item.userAnonymousName }}</van-col>
+          <van-col span="8">{{ item.totalNum }}</van-col>
+          <van-col span="8">{{ item.totalPrice }}</van-col>
         </van-row>
       </div>
     </div>
@@ -110,221 +117,199 @@
   </div>
 </template>
 
-<script>
+<script setup>
 // 导入无数据组件
 import kNoData from "../../components/commom/kNoData/index.vue";
 import kDialog from "../../components/commom/kDialog/index.vue";
 import { onMounted, ref, nextTick } from "vue";
 import sHeader from "@/components/SimpleHeader";
-import { getLoginUser, Format_time, styleUrl } from "@/common/js/utils";
+import { getLoginUser, styleUrl } from "@/common/js/utils";
 import {
   getListStockInfoForMonth,
   Api_getNotice,
   Api_getUpdateNotice,
+  getTop5List,
 } from "../../service/home";
 import { showToast } from "vant";
-import RobotIcon from '@/assets/home/robot.png';
-
-export default {
-  name: "home",
-  components: {
-    sHeader,
-    kDialog,
-    kNoData,
-  },
-  setup() {
-
-    const noticeContent = ref({});
-    // 获取公告
-    const getNotice = () => {
-      Api_getNotice({ adminId: user.id }).then((res) => {
-        noticeContent.value = res.data.data || {};
-      });
-    };
-    // 通知弹窗
-    const kDialogRef = ref(null);
-    // 点击通知栏
-    const noticeClk = () => {
-      kDialogRef.value.openDialog();
-    };
-    // 点击右侧按钮
-    const confirmClk = (e) => {
-      console.log(e, 2222);
-      Api_getUpdateNotice({
-        adminId: user.id,
-      }).then((res) => {
-        showToast(res.data.message);
-        setTimeout(() => {
-          getNotice();
-        }, 500);
-      });
-    };
-    const firstLogin = ref(true);
-    const user = getLoginUser();
-    const userName = ref(user.name);
-    const sys = ref(null);
-    const pic1 = ref([
-      { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg', isImage: true },
-    ]);
-
-
-    // 图表对象
-    const chartBox = ref();
-    let chartObj = null;
-
-    const stockPrice = ref(0);
-    // 查询图表
-    const getListStockInfoForMonthFun = async () => {
-      const { data } = await getListStockInfoForMonth();
-      if (data.code === '00000' && data.data) {
-        stockPrice.value = 0;
-        data.data.series[0].data.forEach((item) => {
-          stockPrice.value = parseInt(stockPrice.value + item);
-        });
-
-        // 解决eacharts与v-if的渲染问题
-        await nextTick();
-        if (chartBox.value) {
-          chartObj = window.echarts.init(chartBox.value, null, {
-            renderer: "canvas",
-            useDirtyRect: false,
-          });
-          const option = {
-            tooltip: {
-              trigger: "axis",
-              axisPointer: {
-                type: "shadow",
-              },
-            },
-            grid: {
-              left: "3%",
-              right: "4%",
-              bottom: "10%",
-              containLabel: true,
-            },
-            legend: {
-              bottom: 0,
-              right: 10,
-              itemWidth: 10,
-              itemHeight: 10,
-              icon: "rect",
-              orient: 'vertical',
-              top: 20,
-            },
-            // 固定屏幕显示多少个，其余的滑动
-            dataZoom: [
-              {
-                type: "inside",
-                xAxisIndex: 0,
-                filterMode: "none",
-                startValue: null,
-                endValue: null,
-                zoomLock: true,
-              },
-            ],
-            xAxis: {
-              type: "category",
-              axisLabel: {
-                rotate: 45,
-              },
-              data: data.data.categories,
-            },
-            yAxis: {
-              type: "value",
-            },
-            series: [
-              {
-                ...data.data.series[0],
-                type: "line", // line折线图，bar柱状图
-                smooth: true, // 针对折线图，平滑曲线
-                itemStyle: { color: "#39a6fe" },
-                name: "股价￥",
-                label: {
-                  show: true,
-                  position: "top",
-                },
-              },
-            ],
-          };
-
-          option.dataZoom[0]["startValue"] =
-            data.data.categories[data.data.categories.length - 5];
-          option.dataZoom[0]["endValue"] =
-            data.data.categories[data.data.categories.length - 1];
-          chartObj && chartObj.setOption(option);
-          //图形宽度随屏幕宽度改变而改变
-          window.onresize = chartObj.resize;
-        }
-      }
-    };
-    const pushToolList = ref([]);
-
-    // 页面初始化
-    onMounted(async () => {
-      // 加载样式
-      styleUrl('home');
-      // if (localStorage.getItem("loginSys")) {
-      //   const loginSysString = localStorage.getItem("loginSys");
-      //   sys.value = JSON.parse(loginSysString);
-      // }
-      firstLogin.value = localStorage.getItem('firstLogin');
-
-      // 获取月度曲线
-      getListStockInfoForMonthFun();
-      // 获取首页公告
+
+
+const buyTop5List = ref([]);
+const sellTop5List = ref([]);
+
+// const getTop5ListFunc = async () => {
+//   const { data } = await   getTop5List();
+
+//   if (data.code === '00000') {
+//     console.log("buyTop5List >>", buyTop5List);
+//   }
+// }
+
+async function getTop5Func() {
+  const { data } = await getTop5List()
+  if (data.code === '00000') {
+    console.log("buyTop5List >>", data.data.buyTopList);
+    console.log("sellTop5List >>", data.data.sellTopList);
+    buyTop5List.value = data.data.buyTopList
+    sellTop5List.value = data.data.sellTopList
+  }
+}
+
+
+const noticeContent = ref({});
+// 获取公告
+const getNotice = () => {
+  Api_getNotice({ adminId: user.id }).then((res) => {
+    noticeContent.value = res.data.data || {};
+  });
+};
+// 通知弹窗
+const kDialogRef = ref(null);
+// 点击通知栏
+const noticeClk = () => {
+  kDialogRef.value.openDialog();
+};
+// 点击右侧按钮
+const confirmClk = (e) => {
+  console.log(e, 2222);
+  Api_getUpdateNotice({
+    adminId: user.id,
+  }).then((res) => {
+    showToast(res.data.message);
+    setTimeout(() => {
       getNotice();
+    }, 500);
+  });
+};
+const firstLogin = ref(true);
+const user = getLoginUser();
+const userName = ref(user.userName);
+const sys = ref(null);
+
+
 
+// 图表对象
+const chartBox = ref();
+let chartObj = null;
+
+const stockPrice = ref(0);
+// 查询图表
+const getListStockInfoForMonthFun = async () => {
+  const { data } = await getListStockInfoForMonth();
+  if (data.code === '00000' && data.data) {
+    stockPrice.value = 0;
+    data.data.series[0].data.forEach((item) => {
+      stockPrice.value = parseInt(stockPrice.value + item);
     });
 
-    const confirmAlarm = () => {
-      localStorage.setItem('firstLogin', false);
+    // 解决eacharts与v-if的渲染问题
+    await nextTick();
+    if (chartBox.value) {
+      chartObj = window.echarts.init(chartBox.value, null, {
+        renderer: "canvas",
+        useDirtyRect: false,
+      });
+      const option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "10%",
+          containLabel: true,
+        },
+        legend: {
+          bottom: 0,
+          right: 10,
+          itemWidth: 10,
+          itemHeight: 10,
+          icon: "rect",
+          orient: 'vertical',
+          top: 20,
+        },
+        // 固定屏幕显示多少个，其余的滑动
+        dataZoom: [
+          {
+            type: "inside",
+            xAxisIndex: 0,
+            filterMode: "none",
+            startValue: null,
+            endValue: null,
+            zoomLock: true,
+          },
+        ],
+        xAxis: {
+          type: "category",
+          axisLabel: {
+            rotate: 45,
+          },
+          data: data.data.categories,
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            ...data.data.series[0],
+            type: "line", // line折线图，bar柱状图
+            smooth: true, // 针对折线图，平滑曲线
+            itemStyle: { color: "#39a6fe" },
+            name: "股价￥",
+            label: {
+              show: true,
+              position: "top",
+            },
+          },
+        ],
+      };
+
+      option.dataZoom[0]["startValue"] =
+        data.data.categories[data.data.categories.length - 5];
+      option.dataZoom[0]["endValue"] =
+        data.data.categories[data.data.categories.length - 1];
+      chartObj && chartObj.setOption(option);
+      //图形宽度随屏幕宽度改变而改变
+      window.onresize = chartObj.resize;
     }
+  }
+};
+
+// 页面初始化
+onMounted(async () => {
+  // 加载样式
+  styleUrl('home');
+  // if (localStorage.getItem("loginSys")) {
+  //   const loginSysString = localStorage.getItem("loginSys");
+  //   sys.value = JSON.parse(loginSysString);
+  // }
+  firstLogin.value = localStorage.getItem('firstLogin');
 
-    const showDataDiv = ref(false);
-
-    // 如果是空数据
-    const noData = (stockPrice) => {
-      if (!stockPrice) {
-        return true;
-      }
-      return false;
-    };
-
-    // 显示logo
-    const showLogo = (url) => {
-      return require(`../../assets/home/${url}.png`);
-    };
-
-    return {
-      userName,
-      chartBox,
-      pushToolList,
-      stockPrice,
-      sys,
-      noticeClk,
-      confirmClk,
-      kDialogRef,
-      noData,
-      noticeContent,
-      showLogo,
-      Format_time,
-      showDataDiv,
-      firstLogin,
-      pic1,
-      confirmAlarm,
-      robotIcon: RobotIcon,
-
-      top5List: [
-        { name: '张三', amount: 100, price: 50 },
-        { name: '李四', amount: 90, price: 55 },
-        { name: '王五', amount: 80, price: 60 },
-        { name: '赵六', amount: 70, price: 65 },
-        { name: '钱七', amount: 60, price: 70 }
-      ]
-    };
-  },
+  // 获取月度曲线
+  getListStockInfoForMonthFun();
+  // 获取首页公告
+  getNotice();
 
+  getTop5Func();
+
+});
+
+
+
+
+// 如果是空数据
+const noData = (stockPrice) => {
+  if (!stockPrice) {
+    return true;
+  }
+  return false;
 };
+
+
+
+
 </script>
 
 <style lang="less" scoped>

src/views/position/PositionIndex.vue

@@ -1,142 +1,162 @@
 <template>
-  <!-- 持仓 -->
-  <div class="position flex-col">
-    <div class="box1 flex-col">
-      <s-header :name="$t('position.machineSalesRanking')" :noback="true" :isFixed="false"></s-header>
-      <div class="positionBox1 flex-col">
-        <div class="searchRow flex-row justify-between">
-          <div class="flex-col">
-            <div class="flex-row justify-between bd3">
-              <div class="flex-col outer4"></div>
-              <span class="flex-col txt2">持仓情况</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <img class="pic1" src="../../assets/device/line.png" />
-    </div>
-
-    <div>
-      <div class="o-plr-15 o-ptb-20">
-        <div class="bd1 flex-col">
-          <div class="box2 l-f l-flex-c l-flex-j-a">
-            <div class="TextGroup flex-col">
-              <div class="main6 flex-col justify-between align-center">
-                <span class="word5">{{ buyPrice }}</span>
-                <span class="word6">买入均价￥</span>
-              </div>
-            </div>
-
-            <div class="TextGroup flex-col">
-              <div class="main6 flex-col justify-between align-center">
-                <span class="word5">{{ dailyDiff }}</span>
-                <span class="word6">当日盈亏￥</span>
-              </div>
-            </div>
-
-            <div class="TextGroup flex-col">
-              <div class="main6 flex-col justify-between align-center">
-                <span class="word5">{{ totalDiff }}</span>
-                <span class="word6">总盈亏￥</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="positionBox">
-
-    </div>
-
-    <img class="img1" referrerpolicy="no-referrer" src="../../assets/line.png" />
-    <div class="groove"></div>
-
-    <div class="tradingHistory">
-      <!-- 交易历史 -->
-      <div class="searchRow flex-row justify-between">
-        <div class="flex-col">
-          <div class="flex-row justify-between bd3">
-            <div class="flex-col outer4"></div>
-            <span class="flex-col txt2">
-              交易历史</span>
-          </div>
-        </div>
-        <!-- 搜索 -->
-        <div class="flex-col">
-          <div class="main5 flex-row justify-between" @click="searchClick">
-            <img class="label2" src="../../assets/position/searchIcon.png" />
-          </div>
-        </div>
-      </div>
-    </div>
-
-
-    <!-- 历史记录明细 -->
-    <div class="historyList">
-      <div v-if="hisLength === 0">
-        <van-empty image="search" description="暂无交易历史" />
-      </div>
-      <div v-else>
-        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
-          <div v-for="item in orderHisList" :key="item.id">
-            <van-card>
-              <template #title>
-                <span class="word13">交易数量：{{ item.entrustNumber }} 股</span>
-              </template>
-              <template #desc>
-                <span class="word11">创建时间：{{ item.createTime }}</span>
-              </template>
-              <template #tags>
-                <div v-if="item.type === '1'">交易类型：<van-tag type="success">买入</van-tag></div>
-                <div v-else>交易类型：<van-tag type="warning">卖出</van-tag></div>
-                <!-- <van-tag  type="danger">挂单失败</van-tag> -->
-              </template>
-              <template #price-top>
-                <!-- status 状态：0过期，1生效，2撤单，3全部成交，4部分成交 -->
-                <!-- <div>
+    <!-- 持仓情况 -->
+    <div class="positionPage flex-col">
+        <div class="listBox">
+            <s-header :name="$t('position.machineSalesRanking')" :noback="true" :isFixed="false"></s-header>
+            <van-list v-model:loading="loading" v-model:error="error" :error-text="$t('public.requestFailed')"
+                :finished="finished" :finished-text="$t('public.noMore')" offset="100" :immediate-check="false"
+                @load="onLoad">
+                <!-- 持仓情况 -->
+                <div class="positionBox1 flex-col">
+                    <div class="searchRow flex-row justify-between">
+                        <div class="flex-col">
+                            <div class="flex-row justify-between bd3">
+                                <div class="flex-col outer4"></div>
+                                <span class="flex-col txt2">
+                                    持仓情况</span>
+                            </div>
+                        </div>
+
+                    </div>
+                    <img class="pic1" src="../../assets/device/line.png" />
+                    <!-- 股价/盈亏 -->
+                    <div class="o-plr-15 o-ptb-20">
+                        <div class="bd1 flex-col">
+                            <div class="box2 l-f l-flex-c l-flex-j-a">
+
+                                <div class="TextGroup flex-col">
+                                    <div class="main6 flex-col justify-between align-center">
+                                        <span class="word5">{{ twoNumber(currentPrice) }}</span>
+                                        <span class="word6">当前股价￥</span>
+                                    </div>
+                                </div>
+
+                                <div class="TextGroup flex-col">
+                                    <div class="main6 flex-col justify-between align-center">
+                                        <span class="word5">{{ twoNumber(dailyDiff) }}</span>
+                                        <span class="word6">当日盈亏￥</span>
+                                    </div>
+                                </div>
+
+                                <div class="TextGroup flex-col">
+                                    <div class="main6 flex-col justify-between align-center">
+                                        <span class="word5">{{ twoNumber(totalDiff) }}</span>
+                                        <span class="word6">总盈亏￥</span>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="positionBox1 flex-col">
+                    <div class="searchRow flex-row justify-between">
+                        <div class="flex-col">
+                            <div class="flex-row justify-between bd3">
+                                <div class="flex-col outer2"></div>
+                                <span class="flex-col txt2">
+                                    交易历史</span>
+                            </div>
+                        </div>
+                        <!-- 菜单，搜索 -->
+                        <div class="flex-col">
+                            <div class="main5 flex-row justify-between">
+                                <!-- <van-popover v-model:show="showPopover" placement="left-start" theme="dark"
+                                    :actions="actions" @select="selectLabel">
+                                    <template #reference>
+                                        <van-icon name="bars" class="fixed-icon o-pr-15" style="font-size: 0.55rem;"
+                                            color="#4d6add" />
+                                    </template>
+</van-popover> -->
+                                <img class="label2" src="../../assets/position/searchIcon.png" @click="searchClick" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 历史交易列表 -->
+                <div class="positionBox2 flex-col justify-between">
+                    <div class="section1 flex-col">
+                        <div class="outer1 flex-col o-plr-15">
+                            <div v-if="hisLength === 0">
+                                <van-empty image="search" description="暂无交易历史" />
+                            </div>
+                            <div v-else>
+                                <!-- <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了"
+                                    @load="onLoad"> -->
+                                    <div v-for="item in orderHisList" :key="item.id">
+                                        <van-card>
+                                            <template #title>
+                                                <span class="word13">交易数量：{{ item.entrustNumber }} 股</span>
+                                            </template>
+                                            <template #desc>
+                                                <span class="word11">创建时间：{{ item.createTime }}</span>
+                                            </template>
+                                            <template #tags>
+                                                <div v-if="item.type === '1'">交易类型：<van-tag type="success">买入</van-tag>
+                                                </div>
+                                                <div v-else>交易类型：<van-tag type="warning">卖出</van-tag></div>
+                                                <!-- <van-tag  type="danger">挂单失败</van-tag> -->
+                                            </template>
+                                            <template #price-top>
+                                                <!-- status 状态：0过期，1生效，2撤单，3全部成交，4部分成交 -->
+                                                <!-- <div>
                   交易状态：<van-tag plain round type="danger">{{ showStatusText(item.status) }}</van-tag>
                 </div> -->
-                <div v-if="item.status === '0'">交易状态：<van-tag plain round type="danger">过期</van-tag></div>
-                <div v-else-if="item.status === '1'">交易状态：<van-tag plain round type="success">生效</van-tag></div>
-                <div v-else-if="item.status === '2'">交易状态：<van-tag plain round>撤单</van-tag></div>
-                <div v-else-if="item.status === '3'">交易状态：<van-tag plain round type="primary">全部成交</van-tag></div>
-                <div v-else-if="item.status === '4'">交易状态：<van-tag plain round type="warning">部分成交</van-tag></div>
-                <div v-else>交易状态：<van-tag plain round>未知状态</van-tag></div>
-              </template>
-              <template #price>
-                <span class="txt9">每股单价
-                  ：￥{{ item.price }}
-                </span>
-              </template>
-            </van-card>
-            <br>
-          </div>
-        </van-list>
-      </div>
+                                                <div v-if="item.status === '0'">交易状态：<van-tag plain round
+                                                        type="danger">过期</van-tag></div>
+                                                <div v-else-if="item.status === '1'">交易状态：<van-tag plain round
+                                                        type="success">生效</van-tag></div>
+                                                <div v-else-if="item.status === '2'">交易状态：<van-tag plain
+                                                        round>撤单</van-tag></div>
+                                                <div v-else-if="item.status === '3'">交易状态：<van-tag plain round
+                                                        type="primary">全部成交</van-tag></div>
+                                                <div v-else-if="item.status === '4'">交易状态：<van-tag plain round
+                                                        type="warning">部分成交</van-tag></div>
+                                                <div v-else>交易状态：<van-tag plain round>未知状态</van-tag></div>
+                                            </template>
+                                            <template #price>
+                                                <span class="txt9">每股单价
+                                                    ：￥{{ item.price }}
+                                                </span>
+                                            </template>
+                                        </van-card>
+                                        <br>
+                                    </div>
+                                <!-- </van-list> -->
+                            </div>
+                            <!-- <van-back-top @click="backTop" right="5vw" bottom="10vh" /> -->
+                        </div>
+                    </div>
+                </div>
+            </van-list>
+        </div>
+        <!-- 使用搜索弹窗组件 -->
+        <!-- <SearchPop :showSearchPop="showSearchPop" @update:showSearchPop="handleUpdateShowSearchPop" /> -->
+
+        <!-- <deviceOper ref="oprRef" @operfinish="operFinish"></deviceOper> -->
+        <!-- 搜索弹出框 -->
+        <!-- <deviceSearch ref="searchRef" @search="search($event)"></deviceSearch> -->
+        <div style="height: 50px;"></div>
+        <!-- <nav-bar></nav-bar> -->
     </div>
-
-
-    <!-- 使用搜索弹窗组件 -->
-    <SearchPop :showSearchPop="showSearchPop" @update:showSearchPop="handleUpdateShowSearchPop" />
-    <div style="height: 50px;"></div>
-    <TestComp param="哈哈哈" />
-  </div>
-
 </template>
 
+
 <script setup>
 // 导入无数据组件
 import sHeader from "@/components/SimpleHeader"
 import { onMounted, reactive, ref } from "vue"
-import SearchPop from './SearchPop.vue';
-import TestComp from './TestComp.vue'
+// import SearchPop from './SearchPop.vue';
+// import TestComp from './TestComp.vue'
 import { listMyOrderHis, getMyStock } from "@/service/position";
 
 const showSearchPop = ref(false);
 
 const orderHisList = ref([]);
+const error = ref(false);
+
 const loading = ref(false)
 const finished = ref(false)
 const hisLength = ref(0)
@@ -152,6 +172,16 @@ const hisLength = ref(0)
 //   return statusMap[statusVal] || '未知状态';
 // }
 
+
+function twoNumber(val) {
+    const num = parseFloat(val)
+    if (!isNaN(num)) {
+        return num.toFixed(2)
+    } else {
+        return val
+    }
+}
+
 const onLoad = async () => {
   if (!finished.value) {
     loading.value = true
@@ -186,14 +216,15 @@ onMounted(
 );
 
 const buyPrice = ref()
+const currentPrice = ref()
 const dailyDiff = ref()
 const totalDiff = ref()
 
 const getMyStockFunc = async () => {
   const { data } = await getMyStock();
   if (data.code === '00000') {
-    console.log("getMyStock >>>", data.data);
     buyPrice.value = data.data.buyPrice
+    currentPrice.value = data.data.currentPrice
     dailyDiff.value = data.data.dailyDiff
     totalDiff.value = data.data.totalDiff
   }
@@ -205,12 +236,13 @@ const searchClick = () => {
 }
 
 // 处理子组件传递回来的更新事件
-const handleUpdateShowSearchPop = (val) => {
-  showSearchPop.value = val;
-}
+// const handleUpdateShowSearchPop = (val) => {
+//   showSearchPop.value = val;
+// }
 
 </script>
 
 <style lang="less" scoped>
-@import "../../styles/position/index.less";
-</style>
+@import "../../common/style/common";
+@import "../../styles/position/index";
+</style>

src/views/position/PositionIndex1.vue

@@ -0,0 +1,219 @@
+<template>
+  <!-- 持仓 -->
+  <div class="positionPage flex-col">
+    <div class="listBox">
+      <s-header :name="$t('position.machineSalesRanking')" :noback="true" :isFixed="false"></s-header>
+
+
+      <div class="positionBox1 flex-col">
+        <div class="searchRow flex-row justify-between">
+          <div class="flex-col">
+            <div class="flex-row justify-between bd3">
+              <div class="flex-col outer4"></div>
+              <span class="flex-col txt2">持仓情况</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="o-plr-15 o-ptb-20">
+          <div class="bd1 flex-col">
+            <div class="box2 l-f l-flex-c l-flex-j-a">
+              <div class="TextGroup flex-col">
+                <div class="main6 flex-col justify-between align-center">
+                  <span class="word5">{{ currentPrice }}</span>
+                  <span class="word6">当前股价￥</span>
+                </div>
+              </div>
+
+              <div class="TextGroup flex-col">
+                <div class="main6 flex-col justify-between align-center">
+                  <span class="word5">{{ dailyDiff }}</span>
+                  <span class="word6">当日盈亏￥</span>
+                </div>
+              </div>
+
+              <div class="TextGroup flex-col">
+                <div class="main6 flex-col justify-between align-center">
+                  <span class="word5">{{ totalDiff }}</span>
+                  <span class="word6">总盈亏￥</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      <img class="pic1" src="../../assets/device/line.png" />
+    </div>
+
+
+    <div class="positionBox">
+
+    </div>
+
+    <img class="img1" referrerpolicy="no-referrer" src="../../assets/line.png" />
+    <div class="groove"></div>
+
+    <div class="tradingHistory">
+      <!-- 交易历史 -->
+      <div class="searchRow flex-row justify-between">
+        <div class="flex-col">
+          <div class="flex-row justify-between bd3">
+            <div class="flex-col outer4"></div>
+            <span class="flex-col txt2">
+              交易历史</span>
+          </div>
+        </div>
+        <!-- 搜索 -->
+        <div class="flex-col">
+          <div class="main5 flex-row justify-between" @click="searchClick">
+            <img class="label2" src="../../assets/position/searchIcon.png" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+    <!-- 历史记录明细 -->
+    <div class="historyList">
+      <div v-if="hisLength === 0">
+        <van-empty image="search" description="暂无交易历史" />
+      </div>
+      <div v-else>
+        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+          <div v-for="item in orderHisList" :key="item.id">
+            <van-card>
+              <template #title>
+                <span class="word13">交易数量：{{ item.entrustNumber }} 股</span>
+              </template>
+              <template #desc>
+                <span class="word11">创建时间：{{ item.createTime }}</span>
+              </template>
+              <template #tags>
+                <div v-if="item.type === '1'">交易类型：<van-tag type="success">买入</van-tag></div>
+                <div v-else>交易类型：<van-tag type="warning">卖出</van-tag></div>
+                <!-- <van-tag  type="danger">挂单失败</van-tag> -->
+              </template>
+              <template #price-top>
+                <!-- status 状态：0过期，1生效，2撤单，3全部成交，4部分成交 -->
+                <!-- <div>
+                  交易状态：<van-tag plain round type="danger">{{ showStatusText(item.status) }}</van-tag>
+                </div> -->
+                <div v-if="item.status === '0'">交易状态：<van-tag plain round type="danger">过期</van-tag></div>
+                <div v-else-if="item.status === '1'">交易状态：<van-tag plain round type="success">生效</van-tag></div>
+                <div v-else-if="item.status === '2'">交易状态：<van-tag plain round>撤单</van-tag></div>
+                <div v-else-if="item.status === '3'">交易状态：<van-tag plain round type="primary">全部成交</van-tag></div>
+                <div v-else-if="item.status === '4'">交易状态：<van-tag plain round type="warning">部分成交</van-tag></div>
+                <div v-else>交易状态：<van-tag plain round>未知状态</van-tag></div>
+              </template>
+              <template #price>
+                <span class="txt9">每股单价
+                  ：￥{{ item.price }}
+                </span>
+              </template>
+            </van-card>
+            <br>
+          </div>
+        </van-list>
+      </div>
+    </div>
+
+
+    <!-- 使用搜索弹窗组件 -->
+    <SearchPop :showSearchPop="showSearchPop" @update:showSearchPop="handleUpdateShowSearchPop" />
+    <!-- <div style="height: 50px;"></div> -->
+    <!-- <TestComp param="哈哈哈" /> -->
+  </div>
+
+</template>
+
+<script setup>
+// 导入无数据组件
+import sHeader from "@/components/SimpleHeader"
+import { onMounted, reactive, ref } from "vue"
+import SearchPop from './SearchPop.vue';
+// import TestComp from './TestComp.vue'
+import { listMyOrderHis, getMyStock } from "@/service/position";
+
+const showSearchPop = ref(false);
+
+const orderHisList = ref([]);
+const loading = ref(false)
+const finished = ref(false)
+const hisLength = ref(0)
+
+// const showStatusText = (statusVal) => {
+//   const statusMap = {
+//     0: '过期',
+//     1: '生效',
+//     2: '撤单',
+//     3: '全部成交',
+//     4: '部分成交',
+//   }
+//   return statusMap[statusVal] || '未知状态';
+// }
+
+const onLoad = async () => {
+  if (!finished.value) {
+    loading.value = true
+    searchParams.current = searchParams.current + 1;
+    getList();
+    getMyStockFunc();
+  }
+};
+
+let searchParams = reactive({
+  current: 1, // 当前页，默认1
+  size: 10, // 页大小，默认10条
+})
+
+const getList = async () => {
+  finished.value = false;
+  const params = Object.assign({}, searchParams);
+  const { data } = await listMyOrderHis(params);
+  if (data.code === "00000") {
+    orderHisList.value = data.data.records
+    hisLength.value = orderHisList.value.length
+    if (orderHisList.value.length >= data.data.total) {
+      finished.value = true;
+    }
+  }
+  // 加载状态结束
+  loading.value = false;
+}
+
+onMounted(
+  onLoad,
+);
+
+const buyPrice = ref()
+const currentPrice = ref()
+const dailyDiff = ref()
+const totalDiff = ref()
+
+const getMyStockFunc = async () => {
+  const { data } = await getMyStock();
+  if (data.code === '00000') {
+    buyPrice.value = data.data.buyPrice
+    currentPrice.value = data.data.currentPrice
+    dailyDiff.value = data.data.dailyDiff
+    totalDiff.value = data.data.totalDiff
+  }
+}
+
+const searchClick = () => {
+  console.log("点击搜索");
+  showSearchPop.value = true;
+}
+
+// 处理子组件传递回来的更新事件
+const handleUpdateShowSearchPop = (val) => {
+  showSearchPop.value = val;
+}
+
+</script>
+
+<style lang="less" scoped>
+@import "../../styles/position/index.less";
+</style>

src/views/trading/TradingIndex.vue

@@ -59,10 +59,11 @@
           <van-col span="8">交易数量</van-col>
           <van-col span="8">单价￥</van-col>
         </van-row>
-        <van-row v-for="(item, index) in sellerList" :key="index" justify="center">
-          <van-col span="8">卖家{{ index + 1 }}</van-col>
-          <van-col span="8">{{ item.amount }}</van-col>
+        <van-row v-for="item in sellerList" :key="item.id" justify="center">
+          <van-col span="8">{{ item.userAnonymousName }}</van-col>
+          <van-col span="8">{{ item.entrustNumber }}</van-col>
           <van-col span="8">{{ item.price }}</van-col>
+          
         </van-row>
       </div>
 
@@ -92,9 +93,9 @@
           <van-col span="8">交易数量</van-col>
           <van-col span="8">单价￥</van-col>
         </van-row>
-        <van-row v-for="(item, index) in buyerList" :key="index" justify="center">
-          <van-col span="8">买家{{ index + 1 }}</van-col>
-          <van-col span="8">{{ item.amount }}</van-col>
+        <van-row v-for="item in buyerList" :key="item.id" justify="center">
+          <van-col span="8">{{ item.userAnonymousName }}</van-col>
+          <van-col span="8">{{ item.entrustNumber }}</van-col>
           <van-col span="8">{{ item.price }}</van-col>
         </van-row>
       </div>
@@ -134,135 +135,101 @@
 </template>
 
 
-<script>
+<script setup>
 
-import { onMounted, reactive, toRefs, ref } from "vue";
+import { onMounted, ref } from "vue";
 import sHeader from "@/components/SimpleHeader";
-import { getLoginUser, Format_calcuDecial, styleUrl } from "@/common/js/utils";
+import { styleUrl } from "@/common/js/utils";
 import {
-
+  getBuySellList
 } from "../../service/trading/index";
 import { useRouter } from "vue-router";
 
+const router = useRouter();
+const finished = ref(false);
+const sys = ref(null);
+const loading = ref(false)
+
+
+// const countDownTime = ref(0);
+
+const countDownTime = ref(calculateCountDownTime());
+
+function calculateCountDownTime() {
+  const now = new Date();
+  const day = now.getDay();
+  const hours = now.getHours();
+  const minutes = now.getMinutes();
+  const seconds = now.getSeconds();
+
+  let remainingTime = 0;
+
+  // Sunday 3 PM to Monday 12 AM (0 AM)
+  if (day === 0 && hours >= 15) {
+    remainingTime = (8 - hours) * 3600 - minutes * 60 - seconds;
+  } else {
+    remainingTime = (7 - day) * 24 * 3600 + (15 - hours) * 3600 - minutes * 60 - seconds;
+  }
+
+  return remainingTime * 1000; // Convert to milliseconds
+}
+
+setInterval(() => {
+  countDownTime.value = calculateCountDownTime();
+}, 1000);
+
+
+const buyerList = ref([]);
+const sellerList = ref([]);
+
+async function getBuySellListFunc() {
+  const { data } = await getBuySellList()
+  if (data.code === '00000') {
+    console.log("buyerList >>", data.data.buyOrderList);
+    console.log("sellerList >>", data.data.sellOrderList);
+    buyerList.value = data.data.buyOrderList
+    sellerList.value = data.data.sellOrderList
+  }
+  // 加载状态结束
+  loading.value = false;
+}
+const pushPageList = (url) => {
+  router.push(url);
+}
+
+
+// 页面列表查询参数
+// let searchParams = reactive({
+//   current: 1, // 当前页,默认第一页，1
+//   size: 10, // 每页多少条数据，默认10条
+// });
+
+// 初始化页面获取列表
+onMounted(() => {
+  init();
+  // 加载样式
+  styleUrl('trading');
+  onLoad()
+});
+// 初始化
+const init = () => {
+  buyerList.value = [];
+  sellerList.value = [];
+  // searchParams.current = 1;
+};
+
 
-export default {
-  name: "trading",
-  components: { sHeader },
-  setup() {
-    const router = useRouter();
-    const searchRef = ref(null);
-    const oprRef = ref(null);
-    const list = ref([]);
-    const loading = ref(true);
-    const error = ref(false);
-    const finished = ref(false);
-    const sys = ref(null);
-    const user = getLoginUser();
-    const labelList = ref([]);
-
-    // const countDownTime = ref(0);
-
-    const countDownTime = ref(calculateCountDownTime());
-
-    function calculateCountDownTime() {
-      const now = new Date();
-      const day = now.getDay();
-      const hours = now.getHours();
-      const minutes = now.getMinutes();
-      const seconds = now.getSeconds();
-
-      let remainingTime = 0;
-
-      // Sunday 3 PM to Monday 12 AM (0 AM)
-      if (day === 0 && hours >= 15) {
-        remainingTime = (8 - hours) * 3600 - minutes * 60 - seconds;
-      } else {
-        remainingTime = (7 - day) * 24 * 3600 + (15 - hours) * 3600 - minutes * 60 - seconds;
-      }
-
-      return remainingTime * 1000; // Convert to milliseconds
-    }
-
-    setInterval(() => {
-      countDownTime.value = calculateCountDownTime();
-    }, 1000);
-
-
-    const buyerList = ref([]);
-    buyerList.value = [
-      { name: '张三', amount: 100, price: 50 },
-      { name: '李四', amount: 90, price: 55 },
-      { name: '王五', amount: 80, price: 60 },
-      { name: '赵六', amount: 70, price: 65 },
-      { name: '钱七', amount: 60, price: 70 }
-    ];
-
-    const sellerList = ref([]);
-    sellerList.value = [
-      { name: '张xx', amount: 10000, price: 50 },
-      { name: '李xx', amount: 9000, price: 51 },
-    ];
-
-
-    const pushPageList = (url) => {
-      router.push(url);
-    }
-
-
-    // 页面列表查询参数
-    let searchParams = reactive({
-      current: 1, // 当前页,默认第一页，1
-      size: 10, // 每页多少条数据，默认10条
-    });
-
-    // 初始化页面获取列表
-    onMounted(() => {
-      init();
-      // 加载样式
-      styleUrl('trading');
-
-    });
-    // 初始化
-    const init = () => {
-      // 获取设备情况
-      // if (localStorage.getItem("loginSys")) {
-      //   const loginSysString = localStorage.getItem("loginSys");
-      //   sys.value = JSON.parse(loginSysString);
-      // }
-      list.value = [];
-      searchParams.current = 1;
-    };
-
-
-    // 滚动加载
-    const onLoad = () => {
-      if (!finished.value) {
-        // console.log("滚动加载")
-        searchParams.current = searchParams.current + 1;
-      }
-    };
-
-
-    return {
-      ...toRefs(searchParams),
-      list,
-      loading,
-      error,
-      finished,
-      onLoad,
-      searchRef,
-      oprRef,
-      sys,
-      Format_calcuDecial,
-      user,
-      labelList,
-      countDownTime,
-      buyerList,
-      sellerList,
-      pushPageList
-    };
-  },
+// 滚动加载
+const onLoad = () => {
+  if (!finished.value) {
+    loading.value = true
+    // searchParams.current = searchParams.current + 1;
+    getBuySellListFunc()
+  }
 };
+
+
+
 </script>
 
 <style lang="less" scoped>

src/views/user/UserIndex.vue

@@ -98,11 +98,11 @@
           <div class="group2 flex-col"></div>
           <span class="baseText">{{ $t("user.commonOperations") }}</span>
         </div>
-        <!-- TODO: 后面这里改成 Grid 宫格 -->
+
         <div class="operListBox">
           <!-- 系统管理 -->
           <div class="taskListRow flex-col" @click="pushPageList('/taskMessage')">
-            <div class="taskIcon taskMessageIcon"></div>
+            <div class="taskIcon sysManageIcon"></div>
             <div class="taskRight">
               <div class="taskTitle">系统管理</div>
             </div>
@@ -315,7 +315,7 @@ export default {
     };
 
     const hiddenCardNo = ref('');
-    if(user.cardNo) {
+    if (user.cardNo) {
       hiddenCardNo.value = user.cardNo.replace(/^(\d{4}).*?(\d{4})$/, "$1********$2");
     }