<!-- 会员充值 --> <template> <view class="member"> <view class="card-wrap"> <view class="card" :style="{'background-image':'url(../../static/icon/account_bg.webp)'}"> <view class="card-info"> <u-image width="100rpx" height="100rpx" :src="userInfo.avatar" /> <view class="card-info-right"> <view class="phone">{{userInfo.mobile}}</view> <view class="level">开通会员 享折扣权益</view> </view> </view> <view class="charge"> <view class="charge-left"> <view> <text class="txt">账户余额(元)</text> <text class="money">{{userInfo.now_money}}</text> </view> </view> <view class="charge-right" @click="onPageBack">充值</view> </view> </view> </view> <view class="detail"> <view class="detail-title">账户详情</view> <view class="detail-total"> <view class="detail-total-item"> <text>累计消费</text> <view>{{order}}</view> </view> <view class="detail-total-item"> <text>累计充值</text> <view>{{recharge}}</view> </view> </view> <view class="detail-card" v-if="chargeRecordList.length > 0"> <block v-for="(item,indx) in chargeRecordList" :key="indx"> <view class="detail-card-item"> <view class="detail-card-item-left"> <u-image width="60rpx" height="60rpx" src="../../static/icon/order.jpg" v-if="item.category=='user_order_pay'" /> <u-image width="60rpx" height="60rpx" src="../../static/icon/diamond.jpg" v-else /> </view> <view class="detail-card-item-right"> <view class="detail-card-item-right-money"> <text>{{item.category=='user_order_pay'?'订单编号':'会员充值'}} </text> <text>+{{item.amount}}</text> </view> <viewl class="detail-card-item-right-remind"> <text>{{item.create_time}}</text> <text>余额{{item.before_balance}}元</text> </viewl> </view> </view> </block> </view> <up-loadmore :status="status" iconColor="#b3b3b3" color="#b3b3b3" /> </view> </view> </template> <script setup> import { rechargeApi, capitalCountAPi, chargeListApi } from "@/api/user.js"; import { onLoad, onReachBottom } from "@dcloudio/uni-app"; import { reactive, ref } from "vue"; import useUserStore from "@/store/user"; //用户信息 const userInfo = useUserStore().userInfo; const queryParams = reactive({ page_no: 1, page_size: 8 }); const status = ref(''); const chargeRecordList = ref([]); const getChargeRecordData = () => { if (status.value == 'nomore') return; if (status.value == 'loading') return; status.value == 'loading'; chargeListApi(queryParams).then(res => { let len = res.data.data; status.value = queryParams.page_size > len.length ? 'nomore' : 'loadmore'; chargeRecordList.value = chargeRecordList.value.concat(res.data.data); if (status.value == 'loadmore') queryParams.page_no += 1; }) } // 充值统计 const order = ref(0), recharge = ref(0); const getChargeCountData = () => { capitalCountAPi().then(rs => { order.value = rs.data.order; recharge.value = rs.data.recharge; }) } const onPageBack = () => { uni.navigateBack() } onLoad(() => { getChargeRecordData(); getChargeCountData(); }) onReachBottom((e) => { getChargeRecordData(); }) </script> <style lang="scss"> .member { padding-bottom: 300rpx; .card-wrap { padding: 40rpx 0 20rpx 0; background-color: #fff; margin-bottom: 30rpx; .card { background-size: 100%; background-repeat: no-repeat; height: 272rpx; margin: 0 30rpx; border-radius: 10rpx; padding: 20rpx 0 0 20rpx; box-sizing: border-box; background-color: #fff; .card-info { display: flex; align-items: center; margin-bottom: 60rpx; .card-info-right { margin-left: 40rpx; .phone { margin-bottom: 12rpx; font-weight: 600; font-size: 32rpx; color: #444444; } .level { font-size: 28rpx; color: #7B5232; } } } .charge { display: flex; align-items: center; padding-right: 38rpx; .charge-left { flex: 1; display: flex; margin-right: 30rpx; &>view { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10rpx; .txt { margin-right: 16rpx; font-size: 24rpx; color: #7B5232; } .money { font-weight: 600; font-size: 48rpx; color: #7B5232; } } } .charge-right { width: 148rpx; height: 52rpx; line-height: 52rpx; background: #7B5232; border-radius: 30rpx; font-size: 22rpx; color: #FFFFFF; text-align: center; } } } } .detail { margin: 0 30rpx; .detail-title { margin-bottom: 16rpx; font-weight: 600; font-size: 32rpx; color: #262626; } .detail-total { display: flex; align-items: center; margin-bottom: 50rpx; .detail-total-item { display: flex; align-items: center; margin-right: 68rpx; text { margin-right: 4rpx; font-size: 28rpx; color: #777777; } view { font-weight: 600; font-size: 28rpx; color: #333333; } } } } .detail-card { background-color: #fff; border-radius: 12rpx; padding: 0 20rpx; box-sizing: border-box; .detail-card-item { display: flex; align-items: center; height: 130rpx; border-bottom: 2rpx solid #F3F3F3; .detail-card-item-left { margin-right: 22rpx; } .detail-card-item-right { flex: 1; .detail-card-item-right-money { margin-bottom: 14rpx; display: flex; align-items: center; justify-content: space-between; font-size: 30rpx; color: #333333; } .detail-card-item-right-remind { display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; color: #333333; } } } } } </style>