mini_rabot/pages/selfInfo/rechargeRecord/rechargeRecord.vue

<template>
	<view class="content">
		
		<view class="recharge-box" v-for="pay in payList" :key='pay.id'>
			 <view class="recharge-time-box">
				 <view class="recharge-font">微信充值</view>
				 <view class="recharge-time">{{pay.paytime || '-'}} · {{pay.times || '-'}}次</view>
			 </view>
			 <view class="recharge-money"> 
				 <text>{{pay.money || '-'}}元</text>
			 </view>
		</view>
		<view v-if='payList.length === 0' style="font-size: 14px;margin-top: 5%;">
			<p>暂无充值记录</p>
		</view>
	
	</view>
</template>

<script>
	var md5 = require("../../../common/md5.js");
	export default {
		data() {
			return { 
				payList:[
					{
						paytime:'-',
						money:'-',
						id:'-',	
					},
				],
			}
		},
		onShow() {
			this.getRechargeList()
		},
		methods: {
			getRechargeList(){
				uni.showLoading({
				})
				let that = this;
				uni.request({
					url:getApp().globalData.shareUrl, //需要设置为全局
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						method: 'charge_list',
						timestamp: getApp().globalData.globalTimestamp, //Date.now()
						uid:getApp().globalData.user_id,
						sign: md5('charge_list' + getApp().globalData.globalTimestamp),
					},
					success: res => {
					  uni.hideLoading()
					  that.payList = res.data.msg
					} 
				});
			},
		}
	}
	
</script>

<style>
	page{
		height: 100%;
	}
     .content {
		height: 100%;
     	display: flex;
     	flex-direction: column;
     	align-items: center;
     	justify-content: flex-start;
     	background: #f4f5f7;
     }
	 
	 .recharge-box {
		 width:100%;
		 height: 150upx;
		 display: flex;
		 align-items: center;
		 justify-content: space-between;
		 background: #fff;
		 border-bottom: 1upx solid #D8D8D8;
	 }
	 
	 .recharge-time-box {
		 display: flex;
		 flex-direction: column;
		 align-items: center;
		 justify-content: space-between;
		 margin-left: 5%;
		 height: 110upx;
	 }
	 .recharge-font {
		 font-size: 30upx;
		 margin-left: -65%;
	 }
	 .recharge-time {
		 color:#D9D9D9;
		 font-size: 26upx;
	 }
	 .recharge-money {
		 margin-right: 5%;
	 }
	 .recharge-money text {
		 font-size: 28upx;
	 }
</style>