添加积分商城

Liuyi

2024-11-16 ec17a3732f0f80f4a8d7f7867249f2581b221a27

 pages/functionList/balanceRecord/index.vue

@@ -1,6 +1,6 @@
<script setup>
   import { computed, onMounted, ref } from 'vue'
   import { balanceChangeApi } from '../../../api/index.js'
   import { balanceChangeApi,balanceStatisticsApi} from '../../../api/index.js'
   //返回
   function navBackTo(){
      uni.navigateBack()
@@ -23,6 +23,15 @@
      datePay.value = e.detail.value
      await getBalanceList(datePay.value)
   }
   //获取用户资金变动统计
   const rechargeSta = ref()
   const expendSta = ref()
   async function getStatistics(val){
      await balanceStatisticsApi(val).then((res) =>{
         rechargeSta.value = res.data.rechargeAmount
         expendSta.value = res.data.expenditureAmount
      })
   }
   
   //获取余额变动列表
   const banlanceList = ref([])
@@ -32,6 +41,7 @@
            banlanceList.value = res.data
         }
      })
      await getStatistics(val)
   }
   //动态设置用户支出收入对应样式
   function setStyleMoney(val){
@@ -44,6 +54,7 @@
   onMounted(async() =>{
      getDate()
      await getBalanceList(datePay.value)
      // await getStatistics()
   })
</script>
<template>
@@ -53,17 +64,18 @@
         <view class="picker">
            <picker mode="date" :value="datePay" :fields="'month'" @change="bindDateChange">
               <view class="date-text">
                  <text class="uni-input">{{datePay}}</text>
                  <image src="../../../static/images/other/more.png" alt=''></image>
                  <!-- <text>日期：</text> -->
                  <text class="uni-input">日期：{{datePay}}</text>
                  <image src="../../../static/images/other/expand.png" alt=''></image>
               </view>
            </picker>
         </view>
         <view class="date-money">
            <text>支出￥5341.05</text>
            <text>充值￥941.59</text>
            <text>支出：{{expendSta}}元</text>
            <text>充值：{{rechargeSta}}元</text>
         </view>
      </view>
      <view class="main">
      <view class="main" v-if="banlanceList.length > 0">
         <block v-for="(item,index) in banlanceList">
            <view class="item">
               <view class="item-left">
@@ -76,10 +88,14 @@
                     <text class="money" :style="setStyleMoney(item.business)">{{item.changeMoney}}</text>
                     <text>元</text>
                  </view>
                  <text>{{item.beforeMoney}}</text>
                  <text>余额：{{item.afterMoney}}</text>
               </view>
            </view>
         </block>
      </view>
      <view v-else class="nodata">
         <image src="../../../static/images/other/nodata.png" alt=""></image>
         <text>该月暂无记录</text>
      </view>
   </view>
</template>
@@ -105,11 +121,11 @@
                 text{
                    font-weight: 300;
                    font-size: 32rpx;
                    color: #000000;
                    color: #5487f4;
                    margin-right:10rpx;
                 }
                image{
                   width: 28rpx;
                   width:32rpx;
                   height:32rpx;
                   transform: rotate(90deg);
                   // margin-top:10rpx;
@@ -118,8 +134,8 @@
           }
           .date-money{
              font-weight: 300;
              font-size: 24rpx;
              color: #7E7E7E;
              font-size: 26rpx;
              color: #3368bd; 
              text:first-child{
                 margin-right:30rpx;
              }
@@ -127,7 +143,7 @@
        }
        .main{
           width:99%;
           height: calc(100vh - 84rpx - 176rpx - 70rpx);
           height:1200rpx;
           background: #fff;
           border-radius:20rpx;
           margin: 0 auto;
@@ -187,5 +203,23 @@
              }
           }
        }
        .nodata{
           width:100%;
           height:1200rpx;
           display: flex;
           justify-content: center;
           align-items: center;
           padding-bottom:400rpx;
           box-sizing: border-box;
           flex-direction: column;
           image{
              width:496rpx;
              height:488rpx;
           }
           text{
              // color: rgba(111, 111, 111, 0.5);
              color:#bed2fd;
           }
        }
     } 
</style>