cyzh-SoundOfMusic-H5/pages/activityList/mine/myWelfare.vue

<template>
	<view>
		<view class="flex bg-white align-center">
			<view class="title padding-lr-sm">公益勋章</view>
			<view class="text-sm">可解锁{{totalCount}}个勋章，总值{{totalPoints}}积分</view>
		</view>
		<view v-if="!$u.test.isEmpty(welfareList)" class="text-center grid col-3 container">
			<block v-for="(item, index) in welfareList" :key="index">
				<view class="padding-tb" @click="select(item)">
					<view>
						<image :src="item.medal.icon" style="width: 200upx;height: 200upx;"></image>
						<view :class="selectShow ? item.selected ? 'theme-color cuIcon-roundcheckfill': 'text-gray cuIcon-round' : 'text-white cuIcon-round'" style="position: relative;bottom: 230upx;left: 70upx;font-size: 50upx;"></view>
					</view>
					<view class="text-bold" style="margin-top: -50upx;" v-if="!selectShow">X{{item.exCount}}</view>
					<view class="justify-center flex align-center" style="margin-top: -50upx;" v-else>
						<view class="" @click.stop="minus(item)"> <u-icon name="minus-circle-fill" color="#5a3ee8" size="36"></u-icon> </view>
						<input type="number" class="text-center input" v-model="item.exCount" />
						<view class="" @click.stop="plus(item)"> <u-icon name="plus-circle-fill" color="#5a3ee8" size="36"></u-icon> </view>
					</view>
				</view>
			</block>
		</view>
		<u-empty mode="data" iconSize="150" margin-top="300" v-else></u-empty>
		<block v-if="!$u.test.isEmpty(welfareList)">
			<view class="footer-fixed flex align-center justify-end padding bg-white" v-if="!selectShow">
				<button class="cu-btn round text-white theme-bg-color" style="width: 180upx;height: 80upx;margin-right: 30upx;">公益证书</button>
				<button class="cu-btn round text-white theme-bg-color" style="width: 180upx;height: 80upx;" @click="selectShow=true">兑换</button>
			</view>
			<view class="footer-fixed flex align-center justify-between padding bg-white" v-else>
				<view class="flex align-center" @click="selectAll">
					<view :class="selectAllShow ? 'theme-color cuIcon-roundcheckfill':'cuIcon-round'" class="padding-right-xs" style="font-size: 50upx;"></view>
					<view class="text-sm padding-right-xs">全选</view>
					<view class="text-sm">积分 {{total}}</view>
				</view>
				<view>
					<button class="cu-btn round text-white theme-bg-color" style="width: 180upx;height: 80upx;margin-right: 30upx;" @click="confirm">兑换</button>
					<button class="cu-btn round line-gray" style="width: 180upx;height: 80upx;" @click="selectShow = false">取消</button>
				</view>
			</view>
		</block>
		<u-popup v-model="dialogShow" mode="center" width="500" height="480" border-radius="30">
			<view class="bg-img text-center" style="background-image: url('https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/e914f556be414767aca011a30961560a-dialogBgImg.png');height: 600rpx;">
				<view style="height: 80upx;"></view>
				<view style="font-size: 50upx;font-family: PingFang SC;font-weight: 600;color: #ffffff;">恭喜你</view>
				<view class="text-bold text-black" style="padding: 80upx 0 10upx 0;">积分兑换成功！</view>
				<view class="text-bold text-black">{{total}}积分到账</view>
				<view class="padding">
					<u-button class="custom-style" shape="circle" @click="dialogConfirm">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId:'',
				welfareList:[],
				totalCount:0,
				totalPoints:0,
				
				selectAllShow: false,
				selectShow: false,
				total: 0,
				dialogShow: false,
			}
		},
		onLoad() {
			this.userId = uni.getStorageSync("userId") || -1;
			this.getMineMedal()
		},
		methods: {
			getMineMedal(){
				this.$u.api.medal.list({userId:this.userId}).then(res=>{
					this.welfareList=res.records
					this.welfareList.forEach(item=>{
						item.selected=false
						item.exCount=item.count
						this.totalCount +=item.count
						this.totalPoints += item.count * item.medal.pointsValue;
					})
				})
			},
			select(item) {
				item.selected = !item.selected;
				if (item.selected) {
					this.total += item.exCount * item.medal.pointsValue;
				} else {
					this.total -= item.exCount * item.medal.pointsValue;
				}
				let flag = true;
				for (let item of this.welfareList) {
					if (!item.selected) {
						flag = false;
					}
				}
				this.selectAllShow = flag;
			},
			selectAll() {
				this.selectAllShow = !this.selectAllShow;
				if (this.selectAllShow) {
					for (let item of this.welfareList) {
						if (!item.selected) {
							this.total += item.exCount * item.medal.pointsValue;
						}	
					}
				} else {
					for (let item of this.welfareList) {
						this.total -= item.exCount * item.medal.pointsValue;
					}
				}
				for (let item of this.welfareList) {
					if (this.selectAllShow) {
						item.selected = true;
					} else {
					    item.selected = false;	
					}
				}
			},
			confirm() {
				if (this.total == 0) {
					uni.showToast({
						title: "请至少选择一个勋章",
						icon: "none"
					})
					return
				}
				let params= this.getExchangeList()
				this.$u.api.medal.exchange(params).then(res=>{
					if (!this.$u.test.isEmpty(res)) {
						this.dialogShow=true
					}
				})
			},
			dialogConfirm(){
				this.dialogShow=false
				this.getMineMedal()
				this.selectAllShow=false
				this.selectShow=false
				this.total=0
			},
			//礼物＋
			plus(item) {
				if (item.exCount<item.count) {
					item.exCount++
				}
				this.reCalculate()
				this.$forceUpdate()
			}, 
			//礼物 -
			minus(item) {
				if (item.exCount>1) {
					item.exCount--
				}
				this.reCalculate()
				this.$forceUpdate()
			},
			//重新计算总积分值
			reCalculate(){
				this.total=0
				this.welfareList.forEach(item=>{
					if (item.selected) {
						this.total += item.exCount * item.medal.pointsValue;
					}
				})
			},
			getExchangeList(){
				let newList=[]
				this.welfareList.forEach(item=>{
					if (item.selected) {
						let obj={
							id:item.id,
							userId:item.userId,
							medalId:item.medalId,
							activityIds:item.activityIds,
							count:item.exCount
						}
						newList.push(obj)
					}
				})
				return newList
			}
		}
	}
</script>

<style>
	.title {
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #222222;
		line-height: 36px;
	}
	.container {
		margin: 20upx;
		border-radius: 20upx;
		background-color: #ffffff;
	}
	.custom-style {
		background-color: #5b3ee7;
		width: 250upx;
		color: #ffffff;
	}
	.input {
		width: 80upx;
		background-color: #ffffff;
		text-align: center;
		border: none;
		height: 60rpx;
		min-height: 1.8rem;
	}
</style>