hd-miniprogram/src/minePages/account/index.vue

<template>
	<up-navbar
	  title="我的钱包"
	  bgColor="#00aa7f"
	  :autoBack="true"
	  leftIconColor="#fff"
	  titleStyle="color:#fff"
	  :placeholder="true"
	/>
	<view class="content">
		<view id="mancont" class="jiner">
			<view class="num">
				<view>余额</view>
				<view><text style="font-size: 50rpx;">{{totalAmount/100}}</text> 元</view>
			</view>
			<view class="ctbn" @tap="topage('/minePages/recharge/index')">充值</view>
		</view>
		<view class="mingxi">
			<view class="tit">余额明细</view>
			<!--:style="{height:height,overflowY: 'auto'}"-->
			<view>
				<view v-for="n in list" class="mxitem">
					<view>
						<view v-if="n.tradeType == 1" style="padding-bottom: 8rpx;font-size: 40rpx;color: #00aa00;">充值</view>
						<view v-else-if="n.tradeType == 2" style="padding-bottom: 8rpx;font-size: 40rpx;color: #191919;">支付</view>
						<view v-else-if="n.tradeType == 9" style="padding-bottom: 8rpx;font-size: 40rpx;color: #c79a11;">提现</view>
						<view style="font-size: 30rpx;color: #ccc;">{{n.ctime}}</view>
					</view>
					<view style="text-align: right;">
						<view v-if="n.tradeType == 1" style="padding-bottom: 8rpx;font-size: 40rpx;color: #00aa00;">+<text>{{n.tradeTotalAmount/100}}</text></view>
						<view v-else-if="n.tradeType == 2" style="padding-bottom: 8rpx;font-size: 40rpx;color: #191919;"><text>{{n.tradeTotalAmount/100}}</text></view>
						<view v-else-if="n.tradeType == 9" style="padding-bottom: 8rpx;font-size: 40rpx;color: #c79a11;">-<text>{{n.tradeTotalAmount/100}}</text></view>
						<!-- <view style="font-size: 30rpx;color: #ccc;">实际到账金额：100元</view> -->
					</view>
				</view>
				<up-empty v-if="list.length == 0" mode="list" text="暂无记录" />
				<up-loadmore v-else :status="status" color="#c0c4cc" lineColor="#c0c4cc" />
				<!-- <view class="mxitem">
					<view>
						<view style="padding-bottom: 8rpx;font-size: 40rpx;">换电</view>
						<view style="font-size: 30rpx;color: #ccc;">2024-10-20 11:20:00</view>
					</view>
					<view style="text-align: right;">
						<view style="padding-bottom: 8rpx;font-size: 40rpx;">-<text>20</text></view>
						<view style="font-size: 30rpx;color: #ccc;">实际消费：10元</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {ref,reactive,getCurrentInstance} from 'vue'
	import { onLoad,onShow,onReachBottom } from '@dcloudio/uni-app'
	import {
		getaccou,
		balancedetails
	} from '@/utils/service'
	
	let status = ref('nomore')  //loadmore loading
	let totalAmount = ref(0)
	
	//余额记录
	let qsobj = reactive({
		walletCode:uni.getStorageSync('walletCode'),
		pageSize:30,
		pageNo:1
	})
	let list = ref<any[]>([])
	function getylist() {
		balancedetails(qsobj).then((rps:any) => {
			if(rps.data.total > 0){
				list.value = [...list.value,...rps.data.records] 
				if(list.value.length == rps.data.total){
					status.value = 'nomore'
				}else{
					status.value = 'loadmore'
					qsobj.pageNo++
				}
			}
		})
	}
	
	let height = ref('')
	onLoad(() => {
		const instance = getCurrentInstance()
		const query = uni.createSelectorQuery().in((instance as any).proxy)
		
		query.select('#mancont').boundingClientRect(v => {
			uni.getSystemInfo({
			  success: n => {
			    // 屏幕可用高度 减去 其他元素高度
			   height.value = (n.windowHeight - (v as any).height + 20)+'px'
			  }
			})
		})
		.exec()
	})
	
	//获取账户信息
	let account =ref<any>({})
	
	onShow(() => {
		getaccou(uni.getStorageSync('wxuid')).then((rps:any) => {
			if(rps.data.records){
				totalAmount.value =	rps.data.records[0].totalAmount
				uni.setStorageSync('totalAmount',totalAmount.value)
			}
		})
		status.value = 'nomore'
		list.value.splice(0)
		getylist()
	})
	
	onReachBottom(() => {
		if(status.value == 'loadmore'){
			getylist()
		}
	})
	
	function topage(url:string) {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss">
	page{
		background: #f4f4f4;
	}
	.content{
		padding: 30rpx 20rpx;
		.jiner{
			display: flex;
			padding: 28rpx;
			align-items: center;
			justify-content: space-between;
			border-radius: 20rpx;
			background: #00aa00;
			.num{
				color: #fff;
			}
			.ctbn{
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color: #00aa00;
				background: #fff;
				border-radius: 10rpx;
			}
		}
		.mingxi{
			background: #fff;
			margin-top: 30rpx;
			padding: 25rpx;
			border-radius: 10rpx;
			.tit{
				margin-bottom: 25rpx;
				padding-left: 16rpx;
				border-left: 4px solid #00aa00;
			}
			.mxitem{
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;
				padding-top: 20rpx;
				border-top: 1px dashed #ccc;
				>view{
					width: 50%;
				}
			}
		}
	}
</style>