refactor(custom): 我的账户细微修改

src/pages/users/account/index.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import Taro from "@tarojs/taro";
+import * as dayjs from "dayjs";
 import { getIntegralDetail, getBeanDetail, getGiftRecord } from "@/api/user";
 
 const tabValue = ref(1);
@@ -55,6 +56,7 @@ interface DataType {
   order_number: number;
   type: number;
   oid: string;
+  residue: number;
 }
 
 const data = ref<DataType[]>([]);
@@ -108,7 +110,6 @@ const getList = async () => {
 <template>
   <view>
     <view class="card">
-      <!--      <view class="greeting">Hello! YuanHuakk</view>-->
       <view class="info">
         <view class="left">
           <view>
@@ -118,7 +119,6 @@ const getList = async () => {
             <view class="num">积分: {{ userInfo.data?.integral }}</view>
           </view>
         </view>
-        <!-- <image class="img" src="https://picdm.sunbangyan.cn/2023/08/15/ste192.png"/> -->
       </view>
     </view>
     <scroll-view scroll-x>
@@ -138,18 +138,35 @@ const getList = async () => {
     </scroll-view>
 
     <view v-if="data.length > 0">
-      <view v-if="tabValue === 1 || tabValue === 3 || tabValue === 5">
+      <view v-if="tabValue === 1">
+        <view class="card-list" v-for="(item, index) in data" :key="index">
+          <view class="left">
+            <view>订单号: {{ item.oid }}</view>
+            <text class="jf">{{
+              dayjs(item.add_time).format("YYYY/MM/DD mm:ss")
+            }}</text>
+          </view>
+          <view class="right">
+            <view v-if="tabValue === 1" style="color: red"
+              >-
+              <text>{{ item.number }}</text>
+            </view>
+            <text class="jf">积分余额: {{ item.residue || 0 }}</text>
+          </view>
+        </view>
+      </view>
+      <view v-if="tabValue === 3 || tabValue === 5">
         <view class="card-list" v-for="(item, index) in data" :key="index">
           <view class="left">
             <view>订单：{{ item.oid }}</view>
             <view>时间：{{ item.add_time.slice(0, 10) }}</view>
           </view>
           <view class="right">
-            <view v-if="tabValue === 1 || tabValue === 5" style="color: green"
+            <view v-if="tabValue === 5" style="color: red"
               >-
               <text>{{ item.number }}积分</text>
             </view>
-            <view v-if="tabValue === 3" style="color: red"
+            <view v-if="tabValue === 3" style="color: green"
               >+
               <text>{{ item.number }}</text>
               积分
@@ -164,7 +181,7 @@ const getList = async () => {
             <view>时间：{{ item.add_time.slice(0, 10) }}</view>
           </view>
           <view class="right">
-            <view style="color: red"
+            <view style="color: green"
               >+
               <text>{{ item.number }}</text>
               豆子
@@ -179,7 +196,7 @@ const getList = async () => {
             <view>时间：{{ item.add_time.slice(0, 10) }}</view>
           </view>
           <view class="right">
-            <view style="color: red"
+            <view style="color: green"
               >+
               <text>{{ item.number }}</text>
               豆子
@@ -207,28 +224,15 @@ const getList = async () => {
 
 .card {
   width: 90%;
-  height: 300px;
   border-radius: 20px;
   background-color: #282828;
-  box-shadow: 0 0 10px rgba(40, 40, 40, 0.1);
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
   margin: 10px auto;
   color: #d0a568;
   padding: 20px;
 
-  .greeting {
-    font-size: 35px;
-    font-weight: bold;
-  }
-
   .info {
-    display: flex;
-    justify-content: space-between;
-
     .left {
-      height: 300px;
-      width: 50%;
+      height: 200px;
       text-align: left;
       margin-left: 50px;
       display: flex;
@@ -241,11 +245,6 @@ const getList = async () => {
         margin-top: 10px;
       }
     }
-
-    .img {
-      width: 380px;
-      height: 270px;
-    }
   }
 }
 
@@ -259,19 +258,25 @@ const getList = async () => {
   padding: 0 10px;
   text-align: center;
   overflow-x: auto;
-  
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
   view {
     width: 200px;
   }
 
   .text {
-    margin: 10px 20px;
+    margin: 10px 0;
     align-items: center;
+    font-size: large;
   }
 
   .line {
     margin: 0 auto;
-    width: 50px;
+    width: 100px;
     height: 5px;
     border-radius: 30px;
     transition: all 0.3s ease-in-out;
@@ -291,18 +296,22 @@ const getList = async () => {
   justify-content: space-between;
   align-items: center;
 
-  .left {
-    width: 500px;
+  .jf {
+    color: #8a8a8a;
+  }
 
+  .left {
     .text {
       text-align: left;
-      width: 100%;
+      font-weight: bolder;
       // 超出一行隐藏
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 1;
       overflow: hidden;
       word-break: break-word;
+      color: #484848;
+      font-size: large;
     }
   }