liveShop/pages/product/productAdd.vue

<template>
	<view class="center">
		
		<view class="input-box flex" @click="clickSearch">
			<view class=" input-content flex">
				<view class="iconfont iconsearch"></view>
				<view class="input"><input type="text" disabled value="商品搜索" /></view>
			</view>
		</view>
		<view class="mp-height"></view>
		<scroll-view scroll-x="true" class="class-box flex" :scroll-left="scrollLeft" :scroll-with-animation="true">
			<view @click="tabClass(item,idx)" class="item"  v-for="(item, idx) in indexList" :key="idx" >
				<view class="time" :class="{ action: idx == classIndex }">{{ item.cate_name }}</view>
			</view>
		</scroll-view>
		<view class="line"></view>
		<swiper class="list-Box" :current="classIndex" @change="swiperChange" duration="500">
			<swiper-item class="list-item" v-for="(ls, idx) in indexList">
				<!-- 空白页 -->
				<empty v-if="ls.dataList.loaded === true && ls.dataList.length === 0"></empty>
				<template v-else>
				<scroll-view scroll-y="true" class="list" >
					<view class="goodsList-item flex" v-for="(lss,ind) in ls.dataList" @click="check('item', ind, idx)">
						<view class="iconfont iconroundcheckfill checkbox" :class="{ checked: lss.checked }"></view>
						<view class="img">
								<image :src="lss.image" mode="scaleToFill"></image>
						</view>
						<view class="text">
							<view class="spname">{{ lss.store_name }}</view>
							<view class="earning"><text>推广后最高可得￥{{ lss.bs }}</text></view>
							<view class="price"><text>￥</text>{{ lss.price }}</view>
						</view>
						<view class="yishou">已售{{ lss.sales }}</view>
					</view>
				</scroll-view>
				</template>
			</swiper-item>
		</swiper>
		<view class="btn flex" >
			<view class="checkAllbox" @click="check('all')">
				<view class="iconfont iconroundcheckfill checkalls" :class="{ checked: allChecked }"></view>
				<view class="quanxuan">全选</view>
			</view>
			<view class="btn-box flex">
				<view class="button" @click="navTo('/pages/product/productUp')" v-if="userInfo.store_info.type > 1">上传商品</view>
				<view class="button" style="margin-left: 20rpx;" @click="submit()">添加</view>
			</view>
			
		</view>
	</view>
</template>

<script>
import { getProducts, choseProducts} from '@/api/product.js';
import { getList } from '@/api/category.js';
import { mapState, mapMutations } from 'vuex';
import empty from '@/components/empty';
	export default {
		components: {
			empty,
		},
		data() {
			return {
				chose: [],//选择的商品id，
				allChecked: false,
				indexList: [],
				topNavWidth: '12%',//设置导航默认宽度
				classIndex: 0,//当前进行中的活动
				itemWidht: 0 ,//顶部分类宽度
				loadingType: 'more', //加载更多状态
				actionClassInd: 0,
				bs: '',
				page: 1,
				limit: 10 
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'baseURL', 'urlFile']),
			// 计算左侧距离
			scrollLeft() {
				if (this.classIndex > 1) {
					return this.itemWidht * (this.classIndex - 1.5);
				} else {
					return 0;
				}
			}
		},
		onLoad() {
			// 载入分类
			this.loadData();
			this.bs = this.userInfo.store_info.ratio / 100;
		},
		methods: {
			async loadData(type = 'add',loading) {
				let obj = this;
				let data = {
					page: obj.page,
					limit: obj.limit
				};
				//没有更多直接返回
				if (type === 'add') {
					if (obj.loadingType === 'nomore') {
						return;
					}
					obj.loadingType = 'loading';
				} else {
					obj.loadingType = 'more';
				}
				if (type === 'refresh') {
					// 清空数组
					obj.page = 1;
				}
				getList({})
					.then(({ data }) => {
						console.log('------',data);
						obj.indexList = data.map(e => {
							e.dataList = [];
							e.loadingType = 'more';
							e.page = 1;
							e.limit = 10;
							return e;
						});
						obj.classIndex = 0;
						obj.getDataList(obj.indexList[obj.classIndex]);
						if (obj.indexList.length <= 4) {
							// 当数量小于等于4的时候自适应宽度
							obj.topNavWidth = 100 / obj.indexList.length + '%';
						} else {
							// 页面渲染完毕后加载scroll-view左侧距离
							obj.$nextTick(() => {
								obj.numClassWidht();
							});
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			getDataList(item, type = 'add') {
				const obj = this;
				const requestData = {
						page: item.page,
						limit: item.limit,
						cid: item.id,
						can_chose: 1,
					};
					// 判断数据是否加载中
					if (item.loadingType == 'nomore' || item.loadingType == 'loading') {
						return;
					}
					// 判断是否重新加载数据
					if(type=='refresh'){
						item.dataList=[];
					}
					// 设置数据加载中
					item.loadingType = 'loading';
					return new Promise((ok, erro) => {
						getProducts(requestData)
							.then(({ data }) => {
								data.forEach((sj,index) => {
									sj.bs = (sj.price * obj.bs).toFixed(2);
									obj.$set(sj,'checked',false);
									item.dataList.push(sj);
								})
								console.log(item.dataList);
								if (item.limit == data.length) {
									item.page++;
									item.loadingType = 'more';
								} else {
									item.loadingType = 'nomore';
								}
								if (type === 'refresh') {
									if (loading == 1) {
										uni.hideLoading();
									} else {
										uni.stopPullDownRefresh();
									}
								}
								this.$set(item.dataList, 'loaded', true);
							})
							.catch(err => {
								console.log(err);
							});
					});
					
				},
			swiperChange(e) {
				const obj = this;
				obj.classIndex = e.target.current;
				obj.getDataList(obj.indexList[obj.classIndex], 'tabChange');
				obj.allChecked = true;

				if (obj.indexList[obj.classIndex].dataList.length > 0){
					let list = obj.indexList[obj.classIndex].dataList;


					for(let i = 0 ; i < list.length ; i++){
						if(!list[i].checked){
							obj.allChecked = false;
							break;
						}

					}

				}else {
					obj.allChecked = false;
				}
				
			},
			tabClass(item,index){
				const obj = this;
				obj.classIndex = index;
				obj.actionClassInd = index;
				let ls = obj.indexList[obj.actionClassInd];
				obj.allChecked = true;
				if (obj.indexList[obj.classIndex].dataList.length > 0){
					let list = obj.indexList[obj.classIndex].dataList;
					for(let i = 0 ; i < list.length ; i++){
						if(!list[i].checked){
							obj.allChecked = false;
							break;
						}

					}
				}else {
					obj.allChecked = false;
				}
				
				// 判断当前数据是否已经加载完毕
				if (ls.loadingType == 'more') {
					this.getDataList(ls);
				}
			},
			check(type, index, erindex) {
				const obj = this;
				if (type === 'item') {
					const list = obj.indexList[erindex].dataList
					list[index].checked = !list[index].checked;
					if(list[index].checked ) {
						if(!obj.chose.includes(list[index].id)){
							obj.chose.push(list[index].id);
						}
					}else {
						if(obj.chose.includes(list[index].id)){
							// console.log(list[index].id);
							let aid = list[index]
							console.log(aid);
							let index = obj.chose.indexOf(aid);
							obj.chose.splice(index,1);
						}
					}
					this.allChecked = true;
					for(let i = 0 ; i < list.length ; i++){
						if(!list[i].checked){
							this.allChecked = false;
						}
					}
				} else {
					const checked = !obj.allChecked;
					const list = obj.indexList[obj.classIndex].dataList;
					list.forEach(item => {
						item.checked = checked;
					});
					obj.allChecked = checked;
					if(obj.allChecked){
						list.forEach(item => {
							if(!obj.chose.includes(item.id)){
								obj.chose.push(item.id);
							}
						})
					}else {
						list.forEach(item => {
							if(obj.chose.includes(item.id)){
								let index = obj.chose.indexOf(item.id);
								obj.chose.splice(index,1);
							}
						})
					}
				}
			},
			numClassWidht() {
				uni.createSelectorQuery()
					.select('.center')
					.fields(
						{
							size: true
						},
						data => {
							// 设置项目宽度
							// console.log(data);
							this.itemWidht = Math.floor((data.width / 750) * 187.5);
						}
					)
					.exec();
			},
			
			clickSearch() {
				uni.navigateTo({
					url: '/pages/product/search'
				});
			},
			navTo(url) {
				uni.navigateTo({
					url
				});
			},
			submit() {
				const obj = this;
				// obj.chose = [];
				
				// let indexCd = obj.indexList.length;
				// for(let i = 0; i < indexCd; i++){
				// 	let dataCd = obj.indexList[i].dataList.length;
				// 	for(let j = 0; j < dataCd; j++){
				// 		if(obj.indexList[i].dataList[j].checked){
				// 			obj.chose=obj.chose.concat(obj.indexList[i].dataList[j].id);
				// 		}
				// 	}
				// }
				console.log(obj.chose);
				if (obj.chose.length != 0){
					choseProducts({ids: obj.chose})
						.then(() => {
							obj.$api.msg('添加商品成功')
							this.loadData();
						})
						.catch((err) => {
							console.log(err);
						})
				}else {
					obj.$api.msg('请选择要添加的数据');
				}
			},
		}
	}
</script>

<style lang="scss">
page{
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
}
.center {
	height: 100%;
}
.class-box {
	background: #FFFFFF;
	white-space: nowrap;
	height: 78rpx;
	.item {
		text-align: center;
		display: inline-block;
		color: $font-color-base;
		margin: 26rpx 34rpx 15rpx 29rpx;
		background-color: #fff;
		line-height: 1;
		.time {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			padding-bottom: 19rpx;
			&.action {
				color: #FF0000;
				border-bottom: 4rpx solid #ff0000;
			}
		}
	}
}

.input-box {
	margin-top: -5px;
	padding: 25rpx;
	background-color: #ff0000;
	height: 100rpx;
	.input-content {
		border-radius: 99rpx;
		flex-grow: 1;
		padding: 5rpx 30rpx;
		background-color: #FFFFFF;
		.iconsearch {
			font-size: 50rpx;
			color: #FFAAAA;
		}
		.input {
			margin-left: 19rpx;
			flex-grow: 1;
			color: #FFAAAA;
			input {
				font-size: 26rpx;
				
				color: #FF9090;
			}
		}
	}
	.input-button {
		padding-left: 20rpx;
		font-size: $font-base;
		height: 100%;
	}
}
.line{
	width: 100%;
	height: 24rpx;
	background-color: #f8f8f8;
}
.list-Box {
	height: calc(100vh - 200px);
	.list-item {
		height: 100%;
		.list {
			height: 100%;
		}
	}
}
.goodsList-item {
	position: relative;
	justify-content: flex-start;
	width: 100%;
	padding: 30rpx;
	.checkbox {
		display: flex;
		flex-shrink: 0;
		font-size: 32rpx;
		color: #EEEEEE;
		background: #EEEEEE;
		border-radius: 50px;
	}
	.img {
		margin-left: 28rpx;
		width: 146rpx;
		height: 146rpx;
		background: #F0F0F0;
		border-radius: 10px;
		image {
			width: 146rpx;
			height: 146rpx;
		}
	}
	.text {
		position: relative;
		padding-left: 35rpx;
		height: 146rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		.spname {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		.earning {
			width: 275rpx;
			padding: 7rpx;
			margin-top: 12rpx;
			background: #FEE1D7;
			border-radius: 5rpx;
			text-align: center;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FC4141;
			line-height: 1;

		}
		.price {
			margin-top: 19rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FF0000;
			font-size: 36rpx;
			text{
				font-size: 24rpx;
			}
		}
	}
	.yishou {
		position: absolute;
		right: 29rpx;
		bottom: 40rpx;
	}
}
.btn{
	position: fixed;
	bottom:0;
	width: 100%;
	height: 100rpx;
	justify-content: space-between;
	padding: 0 39rpx 0 54rpx;
	line-height: 1;
	border-top: 1rpx solid #f0f0f0;
	.checkAllbox {
		display: flex;
		.checkalls{
		font-size: 32rpx;
		color: #EEEEEE;
		background: #EEEEEE;
		border-radius: 50px;
		}
		.quanxuan {
			margin-left: 16rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #1D2023;
		}
	}
	.button {
		width: 160rpx;
		height: 64rpx;
		border: 1px solid #FF0000;
		background: #FD4646;
		border-radius: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 64rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
	}
}
.checkAllbox .checkalls.checked,
.goodsList-item .checkbox.checked {
	color: #FD4343;
	background:#FFFFFF;
}
</style>