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">共解锁12个勋章，相当于2500积分</view>
		</view>
		<view class="text-center grid col-3 container">
			<block v-for="(item, index) in welfareList" :key="index">
				<view class="padding-tb" @click="select(index)">
					<view>
						<image :src="item.image" 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.count}}</view>
					<view class="justify-center flex align-center" style="margin-top: -50upx;" v-else>
						<view class="" @click.stop="minus(index)"> <u-icon name="minus-circle-fill" color="#5a3ee8" size="36"></u-icon> </view>
						<input type="number" class="text-center input" v-model="item.count" />
						<view class="" @click.stop="plus(index)"> <u-icon name="plus-circle-fill" color="#5a3ee8" size="36"></u-icon> </view>
					</view>
				</view>
			</block>
		</view>
		<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>
		<u-popup v-model="dialogShow" mode="center" width="500" height="480" border-radius="30">
			<view class="bg-img text-center" style="background-image: url('/static/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="dialogShow = false">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectAllShow: false,
				selectShow: false,
				total: 0,
				welfareList: [
					{image: '/static/welfare/welfare1.png', count: 2, points: 200, selected: false},
					{image: '/static/welfare/welfare2.png', count: 3, points: 200, selected: false},
					{image: '/static/welfare/welfare3.png', count: 2, points: 200, selected: false},
					{image: '/static/welfare/welfare4.png', count: 1, points: 200, selected: false},
					{image: '/static/welfare/welfare5.png', count: 1, points: 200, selected: false},
				],
				dialogShow: false,
			}
		},
		methods: {
			select(index) {
				this.welfareList[index].selected = !this.welfareList[index].selected;
				if (this.welfareList[index].selected) {
					this.total += this.welfareList[index].count * this.welfareList[index].points;
				} else {
					this.total -= this.welfareList[index].count * this.welfareList[index].points;
				}
				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.count * item.points;
						}	
					}
				} else {
					for (let item of this.welfareList) {
						this.total -= item.count * item.points;
					}
				}
				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"
					})
				} else {
					this.dialogShow = true;
				}
			},
			//礼物＋
			plus(count) {
				let tmp = count;
				if (count < tmp) {
					count++
				}
			}, 
			//礼物 -
			minus(count) {
				let tmp = count;
				if (count < tmp && count > 1) {
					count--
				}
			},
		}
	}
</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>