cyzh-SoundOfMusic-H5/pages/activityList/activity/awards.vue

<template>
	<view>
		<view class="bg-img" style="background-image: url('https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/5f263a5a6e7c4f2493e0325f28ab659a-bgimg.png');height: 310upx;"></view>
		<view class="container" style="margin: -80upx 30upx 30upx 30upx;">
			<view class="padding">
				<text class="text-bold text-black padding-right-sm">账户热力值</text>
				<text class="text-bold" style="color: #f87a3a;">可兑换到账{{data.totalWithDraw}}元</text>
			</view>
			<view class="padding-lr flex justify-between align-center">
				<view>
					<text
						style="font-size: 60upx;font-family: PingFang SC;font-weight: 800;color: #F3484E;">{{data.usableHotValue}}</text>
					<text class="padding-left-xs"
						style="font-size: 24upx;font-family: PingFang SC;font-weight: 800;color: #878787;">热力值</text>
				</view>
				<button @click="doAwards" class="cu-btn round text-white" style="background-color: #f75757;width: 140upx;">提现</button>
			</view>
			<view style="margin: 10upx 20upx;">
				<u-line color="#e0e0e0"></u-line>
			</view>
			<view style="padding: 20upx 0upx 0upx 30upx;">
				<text class="title">已提现：</text>
				<text class="number">{{data.withdrawed}}</text>
				<text class="title padding-left-xs">元</text>
			</view>
			<view class="flex justify-between align-center">
				<view style="padding: 10upx 0upx 20upx 30upx;">
					<text class="title">可提现：</text>
					<text class="number">{{data.usableWithdraw}}</text>
					<text class="title padding-left-xs">元</text>
				</view>
				<view class="flex text-sm align-center">
					<block v-if="!$u.test.isEmpty(cardNumber)">
						<view class="padding-right-xs">已绑定卡号{{cardNumber}}</view>
						<button class="cu-btn sm round margin-right-sm" style="background-color: #f75757;color: #ffffff;" @click="changeNum">点击更换</button>
					</block>
					<block v-else>
						<button class="cu-btn sm round margin-right-sm" style="background-color: #f75757;color: #ffffff;" @click="changeNum">点击绑定</button>
					</block>
				</view>
			</view>
		</view>
		<view class="container margin-lr">
			<view class="padding flex align-center">
				<view class="cuIcon-text text-bold padding-right-xs" style="font-size: 38upx;"></view>
				<view class="title">
					提现明细
				</view>
			</view>
			<view v-for="(item, index) in list" :key="index" class="flex align-center justify-between padding-sm">
				<view class="padding-lr">
					<view class="title">
						{{item.note}}
						<text v-if="item.withdrawStatus==0" style="font-size: 28rpx;color: #ff9900;padding-left: 20rpx;font-weight: 500;">未发款</text>
						<text v-if="item.withdrawStatus==1" style="font-size: 28rpx;color: #19be6b;padding-left: 20rpx;font-weight: 500;">已发款</text>
					</view>
					<view class="padding-top-sm" style="font-size: 24upx;font-family: PingFang SC;font-weight: bold;color: #686868;">
						{{item.createTime}}</view>
				</view>
				<view class="padding-right">
					<text style="font-size: 36upx;font-family: PingFang SC;font-weight: bold;color: #F3484E;">+{{ +item.cashValue}}</text>
					<text class="text-bold padding-left-xs">元</text>
				</view>
			</view>
			<view class="padding-top-sm">
				
			</view>
			 <u-loadmore :status="status" v-if="list.length>8"/>
			<view style="padding: 20upx;">
				<u-line color="#e0e0e0"></u-line>
			</view>
		</view>
		<view style="height: 30upx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',
				data: {},
				list:[],
				cardNumber: '',
				status: 'loadmore',
				current:1,
				cardInfo: {},
			}
		},
		onLoad() {
			this.init()
		},
		onReachBottom() {
			 if(this.list.length<this.current*10){
				this.status = 'nomore';
				return
			 }else{
				 this.status = 'loading';
				 this.current = ++ this.current;
				 this.fetchData()
			}
		 },
		onShow() {
			this.getCardInfo();
			if (this.canRest) {
				this.list=[]
				this.status='loadmore'
				this.current=1
				this.init()
			}
			this.canRest=true
		},
		methods: {
			getCardInfo() {
				let userId = uni.getStorageSync("userId");
				this.$u.api.bankCard.cardDetail({userId: userId}).then(res => {
					if (!this.$u.test.isEmpty(res.records[0])) {
						this.cardInfo = res.records[0];
						let cardNo = res.records[0].cardNo;
						this.cardNumber = "**** " + cardNo.substring(cardNo.length - 4, cardNo.length);
					}
				})
			},
			init(){
				this.userId = uni.getStorageSync("userId");
				if (!this.userId) {
					this.$u.toast('用户未登录')
					return
				}
				this.getBonus()
				this.fetchData()
			},
			getBonus() {
				this.$u.api.user.getBonus({
					userId: this.userId
				}).then(res => {
					this.data = res
				})
			},
			fetchData() {
				let params={
					size:10,
					userId: this.userId,
					current:this.current
				}
				this.$u.api.user.withdrawrecords(params).then(res => {
					this.list = [...this.list,...res.records]
				})
			},
			doAwards(){
				uni.navigateTo({
					url:"doAwards?userId="+this.userId
				})
			},
			changeNum(id) {
				if (this.$u.test.isEmpty(this.cardInfo)) {
					uni.navigateTo({
						url: "/pages/activityList/activity/bankCard"
					})
				} else {
					uni.navigateTo({
						url: "/pages/activityList/activity/bankCard?cardId=" + this.cardInfo.id
					})
				}
			}
		}
	}
</script>

<style>
	.container {
		background-color: #FFFFFF;
		border-radius: 16upx;
		box-shadow: 0px 3px 79px 0px rgba(132, 132, 132, 0.22);
	}

	.title {
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.number {
		font-size: 30upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #F3484E;
	}
</style>