barter-app/pages/coupons/selectGoods.vue

<template>
	<view>
		<!-- 商品列表 -->
		<view class="lists">
			<view class="goods-item" v-for="(item, index) in goods" :key="index">
				<checkbox class="checkbox" :checked="item.isSelect" @click="onSelect(index)"/>
				<view class="mian">
					<image class="cover" :src="item.cover" mode="aspectFill" />
					<view class="title">{{item.title}}</view>
					<view class="subtitle">{{item.description}}</view>
					<view class="mian-flex">
						<view class="price"><text>￥</text>{{item.price}}</view>
						<view class="inventory">权证剩余{{item.stock}}</view>
					</view>
				</view>
			</view>
			<view class="ios-bottom"></view>
		</view>
		<!-- footer -->
		<view class="footer">
			<view class="footer-flex">
				<view class="flex-checkbox">
					<checkbox class="checkbox" :checked="allSelect" @click="onAllSelect"/>
					<label for="all">
						<view class="text">全选</view>
						<view class="sub-text">已选{{selectGoods.length}}件</view>
					</label>
				</view>
				<view class="flex-button" @click="setGoods">确定</view>
			</view>
			<view class="ios-bottom"></view>
		</view>
	</view>
</template>

<script>
	import { couponsGoods, couponsAddgoods } from '@/apis/interfaces/coupons'
	export default {
		data() {
			return {
				goods		: [],
				selectGoods	: [],
				allSelect	: false
			};
		},
		created() {
			couponsGoods({
				type: this.$Route.query.type
			}).then(res => {
				let coupongoodsIds = this.$store.getters.getCoupongoods,
					goodsArr	   = res
				for(let id of coupongoodsIds){
					let selectIndex = goodsArr.findIndex(val => val.goods_sku_id === id)
					goodsArr[selectIndex].isSelect = true
				}
				this.goods = goodsArr
				this.selectNumber()
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods:{
			// 全选产品
			onAllSelect(){
				for(let val of this.goods){
					val.isSelect = !this.allSelect
				}
				this.selectNumber()
			},
			// 选择产品
			onSelect(index){
				const goodsItem = this.goods[index]
				goodsItem.isSelect = !goodsItem.isSelect
				this.$set(this.goods, index, goodsItem)
				this.selectNumber()
			},
			// 计算产品数量
			selectNumber(){
				let selectArr = [];
				for(let val of this.goods){
					if(val.isSelect) selectArr.push(val.goods_sku_id)
				}
				this.selectGoods = selectArr
				if(selectArr.length == this.goods.length && this.goods.length != 0) this.allSelect = true
				else this.allSelect = false
			},
			// 添加设置产品
			setGoods(){
				if(this.selectGoods.length <= 0){
					uni.showToast({
						title: '请选择优惠券关联商品',
						icon : 'none'
					})
					return
				}
				this.$store.commit('setCoupongoods', this.selectGoods)
				this.$Router.back()
			}
		}
	}
</script>

<style lang="scss">
	// 列表
	.lists{
		padding-bottom: ($padding + 10) + 70;
		.goods-item{
			background: white;
			padding: $padding $padding $padding ($padding + 70);
			position: relative;
			border-bottom: solid 1rpx $border-color;
			.checkbox{
				left: $padding;
			}
			.mian{
				position: relative;
				padding-left: $padding + 168;
				min-height: 168rpx;
				.cover{
					position: absolute;
					left: 0;
					top: 0;
					width: 168rpx;
					height: 168rpx;
				}
				.title{
					font-size: $title-size-lg;
					line-height: 40rpx;
					height: 48rpx;
					@extend .nowrap;
				}
				.subtitle{
					color: $text-gray;
					font-size: $title-size-m;
					height: 80rpx;
					line-height: 40rpx;
					margin-bottom: 8rpx;
					@extend .nowrap;
				}
				.mian-flex{
					display: flex;
					justify-content: space-between;
					.price{
						width: 50%;
						font-weight: bold;
						color: $text-price;
						font-size: $title-size;
						height: 40rpx;
						line-height: 40rpx;
						@extend .nowrap;
					}
					.inventory{
						width: 50%;
						text-align: right;
						font-size: $title-size-sm;
						color: $text-gray;
						height: 40rpx;
						line-height: 40rpx;
						@extend .nowrap;
					}
				}
			}
		}
	}
	// footer
	.footer{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		padding: ($padding - 10) $padding;
		z-index: 99;
		box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
		.footer-flex{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.flex-checkbox{
				position: relative;
				width: 50%;
				padding-right: $padding;
				padding-left: 70rpx;
				box-sizing: border-box;
				.text{
					font-size: $title-size-lg;
					font-weight: bold;
					line-height: 40rpx;
					color: $text-color;
				}
				.sub-text{
					font-size: $title-size-sm;
					color: $text-gray;
					line-height: 40rpx;
					@extend .nowrap;
				}
			}
			.flex-button{
				background: $text-price;
				color: white;
				width: 50%;
				text-align: center;
				line-height: 80rpx;
				border-radius: $radius/2;
				font-size: $title-size;
				font-weight: bold;
			}
		}
	}
	// checkbox
	.checkbox{
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -28rpx;
		.uni-checkbox-input{
			border: 1px solid $border-color;
			border-radius: 50%;
			width: 46rpx;
			height: 46rpx;
			box-sizing:border-box;
		}
		.uni-checkbox-input.uni-checkbox-input-checked{
			border: none;
			background: $text-price;
		}
		.uni-checkbox-input.uni-checkbox-input-checked::before{
			border-radius: 50%;
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			font-size: 24rpx;
			color:#fff;
			background: transparent;
			transform:translate(-50%, -50%) scale(1);
			-webkit-transform:translate(-50%, -50%) scale(1);
		}
	}
</style>