tihuo/addons/pickup/uniapp/pages/gift/gift.vue

<template>
	<view class="gift">
		<view class="qxz">请选择{{item}}件礼品，可选{{kexuan}}件</view>
		<view class="gift-box">
			<view v-for="(item,index) in giftList" :key="index" class="gift-info">
				<view :class="{'mengban':item.buxuan}"></view>
				<view class="gift-item" @tap="chooseGift" :data-index="index" :data-itemid="item.id">
					<view class="xuanz" :class="{'active':item.ischoose}">
						<view class="dui" v-if="item.ischoose"></view>
					</view>
					<view class="gift-img">
						<image :src="$PIC(item.image)"></image>
					</view>
					<view class="title-box">
						<view>
							<view class="zhengbt">{{item.title}}</view>
							<view class="fubt">{{item.subtitle}}</view>
						</view>
						<view class="jiaqian">
							<!-- <view class="jz-box">价值<text class="text1">￥</text><text class="text2">{{item.price}}</text></view> -->
							<view>x1</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="xiayibu" v-if="xzindex==-1">下一步</view>
		<view class="xyb" @click="xiayibu" v-else>下一步</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xzindex: -1,
				item: 1,
				kexuan: 1,
				itemNum: 1,
				gp_id: "",
				giftList: [],
				items: []
			}
		},
		onLoad(e) {
			var _this = this
			_this.gp_id = e.gp_id
			_this.$GET_FUN('/addons/pickup/pickupapi/getGiftPackage', {
				'id': _this.gp_id
			}, res => {
				console.log(res)
				if (res.data.code == 1) {
					this.giftList = res.data.data.goods_list
					this.itemNum = res.data.data.gift.max_select
					this.kexuan = res.data.data.gift.max_select
					this.item = res.data.data.gift.max_select
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		},
		methods: {
			chooseGift(e) {
				var index = e.currentTarget.dataset.index;
				var itemid = e.currentTarget.dataset.itemid;

				if (this.giftList[index].ischoose) {
					for (let j = 0; j < this.giftList.length; j++) {
						for (let i = 0; i < this.items.length; i++) {
							if (this.items[i].id == this.giftList[index].id) {
								this.items.splice(i, 1)
								this.giftList[index].ischoose = false;
							}
							this.$set(this.giftList, j, this.giftList[j]);
						}
						this.xzindex = -1;
						this.giftList[j].buxuan = false
					}
					this.kexuan = this.kexuan + 1;
				} else {
					if (this.items.length < this.itemNum) {
						this.giftList[index].ischoose = true;
						this.items.push(this.giftList[index])

						for (let j = 0; j < this.giftList.length; j++) {
							for (let i = 0; i < this.items.length; i++) {
								this.items[i].ischoose = true;
								this.giftList[index].ischoose = true;

								if (this.giftList[j].id == this.items[i].id) {
									this.$set(this.giftList, j, this.items[i]);
								}
							}
						};
						if (this.items.length == this.itemNum) {
							this.xzindex = index;
							for (let m = 0; m < this.giftList.length; m++) {
								for (let n = 0; n < this.items.length; n++) {
									if (this.items[n].id == this.giftList[m].id) {
										this.giftList[m].buxuan = true
									} else {
										// this.giftList[m].buxuan = true
									}
								}
								if (this.giftList[m].buxuan) {
									this.giftList[m].buxuan = false
								} else {
									this.giftList[m].buxuan = true
								}
							}
						}
						this.kexuan = this.kexuan - 1;
					}
				}
			},
			xiayibu() {
				var gg_ids = ''
				for (let i = 0; i < this.items.length; i++) {
					gg_ids = gg_ids + ',' + this.items[i].id
				}
				uni.setStorageSync("lqgiftList", this.items)
				gg_ids = gg_ids.slice(1)
				uni.navigateTo({
					url: "/pages/receive/receive?gp_id=" + this.gp_id + '&gg_ids=' + gg_ids
				})
			}
		}
	}
</script>

<style>
	.gift {
		line-height: 1;
		/* background: url(../../static/bg.png) no-repeat; */
		background-color: #acd6ff;
		background-size: 100% 100%;
		padding-bottom: 30rpx;
	}

	.qxz {
		font-size: 32rpx;
		color: #000000;
		font-weight: 500;
		text-align: center;
		padding: 50rpx 0 45rpx;
	}

	.gift-box {
		margin: 0 20rpx;
	}

	.gift-info {
		position: relative;
	}

	.gift-item {
		width: 710rpx;
		height: 280rpx;
		padding: 38rpx 42rpx 42rpx 24rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		/* box-shadow: 0 0 20rpx 0 #f2f2f2; */
		margin-bottom: 30rpx;
	}

	.mengban {
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 16rpx;
		z-index: 1;
		width: 710rpx;
		height: 280rpx;
		background: #565656;
		opacity: 0.1;
	}

	.xuanz {
		width: 38rpx;
		height: 38rpx;
		border-radius: 50%;
		border: 3rpx solid #999999;
	}

	.dui {
		width: 10rpx;
		height: 18rpx;
		border-right: 3rpx solid #EB3026;
		border-bottom: 3rpx solid #EB3026;
		margin: 6rpx auto 0;
		transform: rotate(45deg);
	}

	.active {
		border: 3rpx solid #EB3026;
	}

	.gift-img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 16rpx;
		margin: 0 25rpx;
	}

	.gift-img image {
		width: 100%;
		height: 100%;
	}

	.title-box {
		display: flex;
		width: 350rpx;
		flex-direction: column;
		justify-content: space-between;
		font-size: 28rpx;
		color: #1A1A1A;
		font-weight: 500;
		height: 200rpx;
		padding: 10rpx 0 15rpx;
		box-sizing: border-box;
	}

	.zhengbt {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.fubt {
		font-size: 24rpx;
		color: #999999;
		margin-top: 22rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.jiaqian {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		font-size: 24rpx;
		color: #999999;
		font-weight: 500;
		width: 352rpx;
	}

	.jz-box {
		font-size: 26rpx;
		color: #EC433A;
	}

	.text1 {
		font-size: 22rpx;
		color: #EB3026;
		font-weight: bold;
	}

	.text2 {
		font-size: 40rpx;
		color: #EB3026;
		font-weight: bold;
	}

	.xiayibu {
		width: 690rpx;
		height: 94rpx;
		border-radius: 6rpx;
		line-height: 94rpx;
		text-align: center;
		margin: 92rpx auto 30rpx;
		background: #999999;
		font-size: 36rpx;
		color: #fff;
		font-weight: 500;
	}

	.xyb {
		width: 690rpx;
		height: 94rpx;
		border-radius: 6rpx;
		line-height: 94rpx;
		text-align: center;
		margin: 92rpx auto 30rpx;
		background: linear-gradient(to top, #C82D2D, #E06363);
		font-size: 36rpx;
		color: #fff;
		font-weight: 500;
	}
</style>