优化了消费记录页面

api/user/index.js

@@ -131,6 +131,17 @@ export function telMessage(data){
   });
 }
 
+/**
+ * 查看消费记录
+ */
+export function getConsumeRecord(data){
+  return request({
+    method: "get",
+    url: '/app/memGoldCoinFlow/list',
+    data,
+  });
+}
+
 /**
  * 充值金币
  */

pagesme/goldCoin/consumeRecord.vue

@@ -2,25 +2,38 @@
   <view style="background-color: #F4F5F9;min-height: 100vh;">
     <!--    页头-->
     <u-navbar @leftClick="backbar" bgColor="#F4F5F9" title="消费记录"></u-navbar>
+    <view :style="{'top':navHeight+'px','position': 'relative'}">
+      <u-tabbar
+          :value="tabbarValue"
+          :fixed="false"
+          :placeholder="false"
+          :safeAreaInsetBottom="false"
+      >
+        <u-tabbar-item text="全部" icon="home" @click="tabbarClick"/>
+        <u-tabbar-item text="近三个月" icon="calendar" @click="tabbarClick"/>
+        <u-tabbar-item text="近一个月" icon="clock" @click="tabbarClick"/>
+        <u-tabbar-item text="消费类型" icon="grid" @click="tabbarClick"/>
+      </u-tabbar>
+    </view>
     <view class="recommendation" :style="{'top':navHeight+'px'}">
       <view v-if="isdata" class="nodatacard">
         <view class="text">暂无数据</view>
       </view>
       <view class="card">
-        <view class="recommendation-card" v-for="item in record" @click="gotoBusinessDetail(item)">
+        <view class="recommendation-card" v-for="item in record">
           <view class="card-image"style="justify-content: left;display: flex">
             <view style="margin-left: 20rpx;margin-top: 20rpx;">
               <view style="font-weight: 400;font-size: 25rpx">
-                {{ item.title }}
+                {{ item.title + '(' + item.actionType +')'}}
               </view>
               <view class="message">
                 {{item.createDate}}
               </view>
             </view>
           </view>
-          <view style="margin: 20rpx 20rpx 0 0;font-size: 26rpx;color: #8a8888;display: flex;align-items: center">
-            <text v-if="item.amount.includes('+')" style="color: rgb(55,156,72)">{{ item.amount }}</text>
-            <text v-else style="color: rgba(219,59,59,1)">{{ item.amount }}</text>
+          <view style="margin: 20rpx 20rpx 0 0;font-size: 28rpx;display: flex;align-items: center">
+            <text v-if="item.type === '1'" style="color: rgb(219,59,59)">+{{ item.count }}</text>
+            <text v-if="item.type === '2'" style="color: rgb(55,156,72)">-{{ item.count }}</text>
           </view>
         </view>
       </view>
@@ -29,52 +42,69 @@
 </template>
 
 <script>
-import {messageList} from "../../api/user";
-import {getOssUrl} from "../../api/article";
+import {getConsumeRecord} from "../../api/user";
 
 export default {
   data() {
     return {
+      //选项值
+      tabbarValue:0,
       record:[
         {
           title:'余额充值',
           createDate:'2025-02-05 09:19:13',
-          amount:'+10'
+          count:'10',
+          type:'1',
+          actionType:'系统赠送'
         },
         {
           title:'余额消费',
           createDate:'2025-02-05 09:19:13',
-          amount:'-10'
+          count:'10',
+          type:'2',
+          actionType:'点赞'
         },
         {
           title:'余额充值',
           createDate:'2025-02-05 09:19:13',
-          amount:'+20'
+          count:'20',
+          type:'1',
+          actionType:'系统充值'
         },
         {
           title:'余额消费',
           createDate:'2025-02-05 09:19:13',
-          amount:'-30'
+          count:'30',
+          type:'2',
+          actionType:'留言'
         },
         {
           title:'余额充值',
           createDate:'2025-02-05 09:19:13',
-          amount:'+40'
+          count:'40',
+          type:'1',
+          actionType:'系统赠送'
         },
         {
           title:'余额消费',
           createDate:'2025-02-05 09:19:13',
-          amount:'-50'
+          count:'50',
+          type:'2',
+          actionType:'换微信'
         },
         {
           title:'余额充值',
           createDate:'2025-02-05 09:19:13',
-          amount:'+60'
+          count:'60',
+          type:'1',
+          actionType:'系统赠送'
         },
         {
           title:'余额消费',
           createDate:'2025-02-05 09:19:13',
-          amount:'-70'
+          count:'70',
+          type:'2',
+          actionType:'留言'
         }
       ],
       //是否有数据
@@ -101,8 +131,41 @@ export default {
         this.navHeight = (height + statusBarHeight + (margin * 3)) //导航栏总高
       }
     })
+    this.getRecord()
   },
   methods: {
+    tabbarClick(e){
+      this.tabbarValue = e
+      if (e === 0){
+        //全部
+
+      }
+      if (e === 1){
+        //近三个月
+
+      }
+      if (e === 2){
+        //近一个月
+
+      }
+      if (e === 3){
+        //类型
+
+      }
+    },
+    //获取消费记录
+    getRecord(){
+      const params = {
+        page:1,
+        rows:10
+      }
+      getConsumeRecord(params).then(res=>{
+        // if (res.data.code == 200){
+        //   this.record = res.data.data
+        // }
+      })
+    },
+    //返回
     backbar() {
       uni.navigateBack({
         delta: 1, //返回层数，2则上上页
@@ -114,7 +177,8 @@ export default {
 
 <style lang="scss" scoped>
 .recommendation {
-  background-color: #F4F5F9;
+  background-color: white;
+  min-height: 100vh;
   position: relative;
   padding: 0 34rpx;
   .nodatacard{