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

<template>
	<view>
		<u-sticky h5-nav-height="0">
			<u-tabs :list="list" active-color="#5c40e8" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</u-sticky>
		<view v-if="current == 0">
			<block v-for="(item, index) in giftList" :key="index">
				<view class="card">
					<view class="padding">
						<view class="flex justify-between align-center padding-bottom-sm">
							<view class="flex align-center">
								<view class="cuIcon-goods padding-right-xs text-bold text-black" style="font-size: 40upx;"></view>
								<view class="title">{{item.title}}</view>
							</view>
							<view v-if="item.status == '已完成'">
								<text class="padding-right-sm text-gray">已完成</text>
								<text class="cuIcon-delete text-gray" style="font-size: 30upx;"></text>
							</view>
							<view v-else>
								<text class="text-red">{{item.status}}</text>
							</view>
						</view>
						<view class="flex margin-top-xs">
							<image :src="item.image" style="width: 220upx;height: 220upx;"></image>
							<view class="padding-left-sm">
								<view class="name text-cut" style="width: 350upx;">{{item.name}}</view>
								<view class="specification">
									<view>{{item.specification}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex justify-end padding" style="margin-top: -120upx;">
						<view class="count">x{{item.count}}</view>
					</view>
				</view>
			</block>
		</view>
		<view v-if="current == 1">
			<block v-for="(item, index) in giftList" :key="index">
				<view class="card" @click="select(index)" v-if="item.status == '待领取'">
					<view class="flex">
						<view :class="item.selected ? 'theme-color cuIcon-roundcheckfill':'cuIcon-round'" class="padding-sm" style="font-size: 50upx;"></view>
						<view class="padding-tb-sm">
							<view class="flex align-center padding-bottom-sm">
								<view class="cuIcon-goods padding-right-xs text-bold text-black" style="font-size: 40upx;"></view>
								<view class="title">{{item.title}}</view>
							</view>
							<view class="flex margin-top-xs">
								<image :src="item.image" style="width: 220upx;height: 220upx;"></image>
								<view class="padding-left-sm">
									<view class="name text-cut" style="width: 350upx;">{{item.name}}</view>
									<view class="specification">
										<view>{{item.specification}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex justify-end padding" style="margin-top: -110upx;">
						<view class="count" style="border: #d9d9d9 1upx solid;" v-if="!item.selected">x{{item.count}}</view>
						<view class="justify-center flex align-center" 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>
				</view>
			</block>
			<view style="height: 120upx;"></view>
			<view class="footer-fixed flex align-center justify-between padding-sm bg-white">
				<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>
				<view>
					<button class="cu-btn round text-white theme-bg-color" style="width: 180upx;height: 80upx;margin-right: 30upx;" @click="donate">捐赠</button>
					<button class="cu-btn round text-white theme-bg-color" style="width: 180upx;height: 80upx;" @click="navTap">领取</button>
				</view>
			</view>
		</view>
		<view v-if="current == 2">
			<block v-for="(item, index) in giftList" :key="index">
				<view class="card" v-if="item.status == '已完成'">
					<view class="padding">
						<view class="flex justify-between align-center padding-bottom-sm">
							<view class="flex align-center">
								<view class="cuIcon-goods padding-right-xs text-bold text-black" style="font-size: 40upx;"></view>
								<view class="title">{{item.title}}</view>
							</view>
							<view>
								<text class="padding-right-sm text-gray">已完成</text>
								<text class="cuIcon-delete text-gray" style="font-size: 30upx;"></text>
							</view>
						</view>
						<view class="flex margin-top-xs">
							<image :src="item.image" style="width: 220upx;height: 220upx;"></image>
							<view class="padding-left-sm">
								<view class="name text-cut" style="width: 350upx;">{{item.name}}</view>
								<view class="specification">
									<view>{{item.specification}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex justify-end padding" style="margin-top: -120upx;">
						<view class="count">x{{item.count}}</view>
					</view>
				</view>
			</block>
		</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;">广发基金会已收到您的捐赠！</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 {
				list: [{
					name: '全部'
				}, {
					name: '待领取'
				}, {
					name: '已完成'
				}],
				current: 0,
				selectAllShow: false,
				clickShow: false,
				giftList: [
					{image: '/static/gift/commodity2.png', title: 'lilbetter化妆品旗舰', name: 'Lilbetter发泥男士定型自然', specification: '发泥+洁面乳 120ml', count: 1, selected: true, status: '已完成'},
					{image: '/static/gift/commodity1.png', title: '轩城工艺沙发', name: '创意单人懒人沙发香蕉躺椅', specification: '黄色（皮质）', count: 3, selected: false, status: '待领取'},
					{image: '/static/gift/commodity3.png', title: '懒虫家居生活馆', name: '懒人沙发阳台躺卧飘窗榻榻米', specification: '亚麻经典灰', count: 2, selected: true, status: '已完成'},
					{image: '/static/gift/commodity4.png', title: '白七自制', name: '白七尼龙帆布单肩斜跨学生', specification: '黑色', count: 1, selected: false, status: '待领取'},
					
				],
				dialogShow: false,
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			select(index) {
				this.giftList[index].selected = !this.giftList[index].selected;
				let flag = true;
				for (let item of this.giftList) {
					if (!item.selected) {
						flag = false;
					}
				}
				this.selectAllShow = flag;
			},
			selectAll() {
				this.selectAllShow = !this.selectAllShow;
				for (let item of this.giftList) {
					if (this.selectAllShow) {
						item.selected = true;
					} else {
					    item.selected = false;	
					}
				}
			},
			donate() {
				let count = 0;
				for (let item of this.giftList) {
					if (item.status == '待领取' && item.selected) {
						console.log(item.title);
					} else {
						count++
					}
				}
				if (count == this.giftList.length) {
					uni.showToast({
						title: "请至少选择一件礼包",
						icon: "none"
					})
				}
			},
			navTap() {
				uni.navigateTo({
					url: '/pages/activityList/mine/order/orderConfirm'
				})
			},
			//礼物＋
			plus() {
				this.count++
			}, 
			//礼物 -
			minus() {
				if (this.count > 1) {
					this.count--
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		margin: 20upx;
		border-radius: 16upx;
		background-color: #FFFFFF;
		.title {
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #222222;
		}
		.name {
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #222222;
		}
		.specification {
			padding-top: 30upx;
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #959595;
		}
		.count {
			width: 60upx;
			height: 60upx;
			border-radius: 16upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.input {
		width: 80upx;
		background-color: #ffffff;
		text-align: center;
		border: none;
		height: 60rpx;
		min-height: 1.8rem;
	}
	.custom-style {
		background-color: #5b3ee7;
		width: 250upx;
		color: #ffffff;
	}
</style>