moxuan_takeaway_shanghu/my/store/select_shang.vue

<template>
	<view class="padding">
		<view class="text-white padding bg radius">
			<view class="bg padding-lr padding-tb-sm flex align-center" style="background-color: white;">
				<u-search @change="search" v-model="goodsName" placeholder="请输入商品名称 " bg-color="#F7F7F7"
					style="width: 100%;" shape="square" :show-action="false"></u-search>
			</view>
			<view class="all_circle" v-if="ifallselece" @click="quSelect()" style="background-color:rgba(245, 211, 71, 1);"></view>
			<view class="all_circle" v-else @click="allSelect()"></view>
			<view class="quanxuan">全选</view>
			<view class="all_select" @click="yixuan">已选商品</view>
			<!-- 商品列表 -->
			<view style="margin-left: -16px;">
				<view v-for="(item,index) in shangList" :key="index" class="shang_list">
					<view class="shang_circle" v-if="item.shangpin==0" @click="qiehuan(item.goodsId)"></view>
					<view class="shang_circle_select" v-if="item.shangpin==1" @click="qiehuan2(item.goodsId,index)"></view>
					<image class="shang_image" :src="item.goodsPicture.split(',')[0]"></image>
					<view class="shang_name">{{item.goodsName}}</view>
					<view class="shang_time">{{item.createTime}}</view>
				</view>
			</view>
		</view>


		<u-button @click="submit" class="margin-top" :custom-style="customStyle" shape="square" :hair-line="false">确认
		</u-button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					backgroundColor: '#FFCC00',
					color: '#000000',
					border: 0
				},
				actShopid:'',
				page: 1,
				limit: 10,
				goodsName:'',
				shangList:[],
				shangIds:[],
				ifallselece:false,
			}
		},
		onLoad(option) {
			this.actShopid=option.actShopid
			//已选择的商品
			this.selectShang()
		},
		onShow() {
			//我参与的活动
			// this.selectShang()
		},
		methods: {
			//搜索
			search() {
				this.selectShang()
			},
			//商品全选
			allSelect(){
				this.shangList.forEach(item => {
					// 'status'为属性名，'非活动'为修改后的内容
					item.shangpin = 1
					this.shangIds.push(item.goodsId)
				})
				this.ifallselece=true
			},
			//取消全选
			quSelect(){
				this.shangList.forEach(item => {
					// 'status'为属性名，'非活动'为修改后的内容
					item.shangpin = 0
				})
				this.shangIds=[]
				this.ifallselece=false
			},
			//变成选中状态
			qiehuan(goodsId){
				if(this.shangIds.length==this.shangList.length){
					if(this.ifallselece){
						this.ifallselece=false
					}else {
						this.ifallselece=true
					}
				}
				this.shangList.forEach(item => {
					if (goodsId===item.goodsId) {
					// 'status'为属性名，'非活动'为修改后的内容
					item.shangpin = 1
					}
				})
				this.shangIds.push(goodsId)
			},
			//变成不选中
			qiehuan2(goodsId,index){
				if(this.shangIds.length==this.shangList.length){
					if(this.ifallselece){
						this.ifallselece=false
					}else {
						this.ifallselece=true
					}
				}
				this.shangList.forEach(item => {
					if (goodsId===item.goodsId) {
					// 'status'为属性名，'非活动'为修改后的内容
					item.shangpin = 0
					}
				})
				this.shangIds.splice(index, 1);
				console.log(this.shangIds,'dddd')
			},
			//商品加入活动
			submit(){
				let data = {
					"activityShopId": this.actShopid,
					"goodsIds": this.shangIds
				}
				this.$Request.postJson("/admin/activity-goods", data).then(res => {
					if(res.code==0){
						uni.showToast({
							title: '选择成功',
							icon: 'success'
						})
						uni.navigateBack({
							delta: 1
						})
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			//已选择的商品
			selectShang(){
				// var shopId=uni.getStorageSync('shopId')
				this.$Request.get(`/admin/activity-goods/${this.actShopid}`).then(res => {
					if (res.code == 0) {
						let returnData = res.data
						//活动列表
						this.allShang(returnData)
					}else{
						uni.showModal({
							content:res.msg
						})
					}
				});
			},
			//店铺所有商品
			allShang(returnData){
				// /ad?page=1&limit=10&goodsName=&classifyId=&shopId=147&status=0
				let data = {
					page: this.page,
					limit: this.limit,
					goodsName: this.goodsName,
					shopId: uni.getStorageSync('shopId'),
					// status: this.tabIndex == 1 ? 2 : (this.tabIndex == 2 ? 1 : this.tabIndex)
				}
				this.$Request.getA("/admin/goodsShop/selectGoodsByShopId", data).then(res => {
					if (res.code == 0) {
						var total = res.data.totalCount
						let data2 = {
							page: this.page,
							limit: total,
							goodsName: this.goodsName,
							shopId: uni.getStorageSync('shopId'),
							// status: this.tabIndex == 1 ? 2 : (this.tabIndex == 2 ? 1 : this.tabIndex)
						}
						this.$Request.getA("/admin/goodsShop/selectGoodsByShopId", data2).then(res => {
							if (res.code == 0) {
								uni.hideLoading()
								let returnData2 = res.data
								const newList =returnData2.list.map(item =>{
								return{...item,shangpin:0}
								})
								var arr = []
								if(returnData.length===0){
									newList.forEach(item => {
										// 'status'为属性名，'非活动'为修改后的内容
										item.shangpin = 1
										this.shangList.forEach(item => {
											this.shangIds.push(item.goodsId)
										})
									})
									this.ifallselece=true
									
								}else{
									for(var j in returnData){
										newList.forEach(item => {
											if (item.goodsId === returnData[j]) {
											// 'status'为属性名，'非活动'为修改后的内容
											item.shangpin = 1
											this.shangIds.push(item.goodsId)
											}
										})
									}
									this.ifallselece=true
								}
								arr=newList
								this.shangList = arr
								
								// if (this.page == 1) {
								// 	this.shangList = arr
								// } else {
								// 	this.shangList = [...this.shangList, ...arr]
								// }
								// if(this.page == this.total){
								// 	this.status = 'nomore'
								// }else{
								// 	this.status = 'loadmore'
								// }
						}
						})
					}
					uni.stopPullDownRefresh();
					uni.hideLoading()
				});
				
			},
			//已选商品
			yixuan() {
				uni.navigateTo({
					url:'./yixuan_shang?actShopid='+this.actShopid
				})
			},
		}
	}
</script>

<style>
	page {
		/* background-color: #F5F5F5; */
	}
	.padding{
		padding-top: 0px;
	}
	.all_circle{
		margin-top: 20rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 86rpx;
		border: 1rpx solid rgba(166, 166, 166, 1);
	}
	.quanxuan{
		margin: -60rpx 0 0 70rpx;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 74rpx;
		color: rgba(0, 0, 0, 1);
	}
	.all_select{
		margin: -75rpx 0 0 400rpx;
		width: 137rpx;
		height: 74rpx;
		border-radius: 22rpx;
		background: rgba(245, 211, 71, 1);
		font-size: 24rpx;
		line-height: 74rpx;
		color: rgba(0, 0, 0, 1);
		text-align: center;
	}
	/* 商品列表 */
	.shang_list{
		width: 711rpx;
		height: 160rpx;
		margin-top: 20rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
	}
	.shang_circle{
		position: absolute;
		margin: 50rpx 0 0 41rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 86rpx;
		border: 1rpx solid rgba(166, 166, 166, 1);
	}
	.shang_circle_select{
		position: absolute;
		margin: 50rpx 0 0 41rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 86rpx;
		background-color:rgba(245, 211, 71, 1);
	}
	.shang_image{
		position: absolute;
		margin: 31rpx 0 0 141rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 6rpx;
		/* background: url(https://img.js.design/assets/smartFill/img395164da755928.jpeg), rgba(204, 204, 204, 1); */
	}
	.shang_name{
		position: absolute;
		margin: 29rpx 0 0 259rpx;
		font-size: 32rpx;
		color: rgba(0, 0, 0, 1);
	}
	.shang_time{
		position: absolute;
		margin: 90rpx 0 0 259rpx;
		font-size: 24rpx;
		color: rgba(153, 153, 153, 1);
	}
</style>