myc/pages/merchant/Addcommodity.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 }}</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">
				<!-- 空白页 -->
				<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="price">
								<text>￥</text>
								{{ lss.price }}
							</view>
						</view>
						<view class="yishou">已售{{ lss.sales }}</view>
					</view>
				</scroll-view>
			</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" 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,
			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();
	},
	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 }) => {
						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 {
				border-bottom: 4rpx solid #52C696;
			}
		}
	}
}

.input-box {
	margin-top: -5px;
	padding: 25rpx;
	background-color: #ffffff;
	height: 100rpx;
	.input-content {
		border-radius: 99rpx;
		flex-grow: 1;
		padding: 5rpx 30rpx;
		background: #ebebeb;
		.iconsearch {
			font-size: 50rpx;
			color: #999999;
		}
		.input {
			margin-left: 19rpx;
			flex-grow: 1;
			color: #999999;
			input {
				font-size: 26rpx;

				color: #999999;
			}
		}
	}
	.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;
		background: #52C696;
		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: #52C696;
	background: #ffffff;
}
</style>