对接用户及会员卡数据接口，添加位置申请api

Liuyi

2024-09-24 4fbb636f415ec390e6681018964916e94c11d6fe

 pages/balanceRecord/index.vue

@@ -1,19 +1,128 @@
<template>
   <view class="container">
      <navbar @navBackTo="navBackTo()" title="余额记录"></navbar>
   </view>
</template>

<script setup>
   import { ref } from 'vue'
   //返回
   function navBackTo(){
      uni.navigateBack()
   }
   const banlanceList = ref([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15])
</script>
<template>
   <view class="container">
      <navbar @navBackTo="navBackTo()" title="余额记录"></navbar>
      <view class="date">
         <view>
            <text>2024年09月</text>
         </view>
         <view>
            <text>支出￥5341.05</text>
            <text>充值￥941.59</text>
         </view>
      </view>
      <view class="main">
         <block v-for="(item,index) in banlanceList">
            <view class="item">
               <view class="item-left">
                  <text>缴费</text>
                  <text class="methods">支付方式：微信</text>
                  <text>2024年09月20日　18:25</text>
               </view>
               <view class="item-right">
                  <text>-￥125.00</text>
                  <text>2000.00</text>
               </view>
            </view>
         </block>
      </view>
   </view>
</template>

<style lang="scss">
     .container{
        width: 100%;
        height: 100vh;
      background:linear-gradient(to top,#FFFFFF,#E8EFFF);
          .date{
           height: 84rpx;
           width:100%;
           display: flex;
           padding: 0 36rpx;
           box-sizing: border-box;
           justify-content:space-between;
           align-items: center;
           view:first-child{
              font-weight: 300;
              font-size: 32rpx;
              color: #000000;
           }
           view:last-child{
              font-weight: 300;
              font-size: 24rpx;
              color: #7E7E7E;
              text:first-child{
                 margin-right:30rpx;
              }
           }
        }
        .main{
           width:99%;
           height: calc(100vh - 84rpx - 176rpx - 70rpx);
           background: #fff;
           border-radius:20rpx;
           margin: 0 auto;
           padding:28rpx 48rpx;
           box-sizing: border-box;
           overflow-y: scroll;
           // background: #7E7E7E;
           .item{
              width:100%;
              height:184rpx;
              // background:rgba(170, 216, 255, 0.2);
              border-bottom:1rpx solid #D8D8D8;
              box-sizing:border-box;
              padding-bottom:38rpx;
              justify-content:space-between;
              align-items: flex-end;
              display: flex;
              .item-left{
                 height:100%;
                 display:flex;
                 flex-direction:column;
                 justify-content:space-between;
                 align-items: flex-start;
                 text:first-child{
                  font-weight: 300;
                  font-size: 32rpx;
                  color: #000000;  
                 }
                 .methods{
                  font-weight: 300;
                  font-size: 32rpx;
                  color: #474646;  
                 }
                 text:last-child{
                    font-weight: 300;
                    font-size: 24rpx;
                    color: #A7A7A7;
                 }
              }
              .item-right{
                 height:100%;
                 display:flex;
                 flex-direction:column;
                 justify-content:flex-end;
                 align-items: flex-end;
                 text:first-child{
                    font-weight: 300;
                    font-size: 32rpx;
                    color: #000000;
                 }
                 text:last-child{
                    font-weight: 300;
                    font-size: 24rpx;
                    color: #A7A7A7;
                 }
              }
           }
        }
     } 
</style>