purchase-let/pages/charge/charge_record.vue

286 lines
6.0 KiB
Vue

<!-- 会员充值 -->
<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>