Liuyi
2024-11-16 ec17a3732f0f80f4a8d7f7867249f2581b221a27
pages/functionList/paymentRecord/index.vue
@@ -1,6 +1,6 @@
<script setup>
   import { onMounted, ref } from 'vue'
   import { paymentChangeApi } from '../../../api/index.js'
   import { paymentChangeApi,balanceStatisticsApi } from '../../../api/index.js'
   //返回
   function navBackTo(){
      uni.navigateBack()
@@ -30,10 +30,19 @@
   //获取消费变动列表
   const banlanceList = ref([])
   async function getBalanceList(val){
      await paymentChangeApi(val).then((res) =>{
      await paymentChangeApi(val).then(async(res) =>{
         if(res.code == 200){
            banlanceList.value = res.data
            await getStatistics(val)
         }
      })
   }
   //消费统计
   const expendSta = ref()
   async function getStatistics(val){
      await balanceStatisticsApi(val).then((res) =>{
         expendSta.value = res.data.expenditureAmount
      })
   }
   onMounted(async() =>{
@@ -48,13 +57,14 @@
         <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 class="uni-input">日期:{{datePay}}</text>
                  <image src="../../../static/images/other/expand.png" alt=''></image>
               </view>
            </picker>
         </view>
         <view class="payAll">消费:{{expendSta}}元</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">
@@ -68,6 +78,10 @@
               </view>
            </view>
         </block>
      </view>
      <view v-else class="nodata">
         <image src="../../../static/images/other/nodata.png" alt=""></image>
         <text>该月暂无记录</text>
      </view>
   </view>
</template>
@@ -83,7 +97,7 @@
           display: flex;
           padding: 0 36rpx;
           box-sizing: border-box;
           justify-content:flex-start;
           justify-content:space-between;
           align-items: center;
          .picker{
             .date-text{
@@ -93,7 +107,7 @@
                 text{
                    font-weight: 300;
                    font-size: 32rpx;
                    color: #000000;
                    color: #5487f4;
                    margin-right:10rpx;
                 }
                image{
@@ -104,10 +118,15 @@
                } 
             }
           }
           .payAll{
             font-weight: 300;
             font-size: 26rpx;
             color: #3368bd;
           }
        }
        .main{
           width:99%;
           height: calc(100vh - 84rpx - 176rpx - 70rpx);
           height:1200rpx;
           background: #fff;
           border-radius:20rpx;
           margin: 0 auto;
@@ -166,5 +185,24 @@
              }
           }
        }
        .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:#bed2fd;
                 }
        }
     } 
</style>