jd_logistics/jd_logistics-app/pages/recharge/wallet.vue

<template>
<view class="wallet">
	<z-paging
	ref="pagingRef"
	class="paginng-contaner"
	:default-page-size="20"
	:use-refresher-status-bar-placeholder="true"
	v-model="list"
	@query="handleQuery"
	>
		<!-- 余额 -->
		<view class="blance">
			<view class="flex-center-between">
				<view class="color_fff">
					<text class="font_size60 bold mr20">{{appStore.userInfo?.rechargeBalance}}</text>
					<text class="font_size30">{{appStore.moneyUnit}}</text>
				</view>
				<view class="order_btn plain chongzhi font_size30" @click="toRecharge">充值</view>
			</view>
			<view class="color_fff font_size25 mt20">账户余额 ( {{appStore.moneyUnit}} )</view>
		</view>
		<!-- 账户明细 -->
		<view class="padding30 accountDetails bg_color_f5">
			<view class="flex-center-flex-start mb20">
				<view class="line_vertical"></view>
				<view class="font_size30 bold">账户明细</view>
			</view>
			<view class="bg_color_fff border_radius_20 padding30">
				<view class="flex-center-between paddingTB20 border_bottom" v-for="item in list" :key="item.recordId">
					<view class="flex_1">
						<!-- 交易类型（0=充值,1=消费,2=退款） -->
						<view class="font_size25 bold">
							{{item.transactionTypeName}}
						</view>
						<view class="font_size20 color_999 mt10">{{item.createTime}}</view>
					</view>
					<!-- 交易金额（充值/退款为正，消费为负） -->
					<view class="flex-column-end">
						<text class="font_size40 color_price">{{item.amount}}</text>
						<text class="font_size25 gray">余额{{item.balanceAfter}}</text>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</view>
</template>
<script setup>
import { ref } from "vue";
import { getRecordList } from "@/api/user";
import { useAppStore } from "@/stores/app"
const appStore = useAppStore();
const pagingRef = ref();
const list = ref([]);
// 下拉刷新和滚动底部会自动触发此方法
async function handleQuery(page, pageSize, from) {
  try {
    const params = {
      pageNum: page,
      pageSize,
			reasonable:false,
			orderByColumn: 'createTime',
			isAsc: 'desc'
    };
    const { rows } = await getRecordList(params);
    pagingRef.value.complete(rows);
  } catch (e) {
		console.log('msg-comment',e)
    pagingRef.value.complete(false);
  }
}
function toRecharge(){
	uni.navigateTo({
		url: '/pages/recharge/recharge'
	});
}
</script>
<style lang="less" scoped>
.wallet{
	.blance{
		padding: 80rpx 60rpx;
		background-color: #fb7145;
	}
	.chongzhi{
		color: #fb7145;
		padding: 10rpx 40rpx;
		border-radius: 50rpx;
	}
	.line_vertical{
		background-color: #fb7145;
		margin-right: 20rpx;
	}
	.accountDetails{
		border-radius: 30rpx 30rpx 0 0;
		position: relative;
		top: -30rpx;
		padding-bottom: 0;
	}
}
</style>