jhlapp/pagesT/goods/selBaseGoods.vue

<template>
	<view>
		<view class="search-view">
			<u-search
				@custom="searchData()"
				@search="searchData()"
				@clear="searchData()"
				action-text="搜索"
				:clearabled="true"
				placeholder="商品名称/编码/条码"
				v-model="keyword"
			></u-search>
		</view>
		<view class="main-view clearfix">
			<view class="left-view float_left">
				<scroll-view scroll-y="true" class="left-scroll">
					<view class="cate-li" :class="[!category_id ? 'cate-on' : '']" @click="changeCate(0)">全部</view>
					<view class="cate-li" v-for="(item, index) in category_list" :key="index" @click="changeCate(item.id)" :class="[category_id === item.id ? 'cate-on' : '']">
						{{ item.title }}
					</view>
				</scroll-view>
			</view>
			<view class="rigth-view float_left">
				<scroll-view scroll-y="true" class="rigth-scroll" :scroll-top="scrollTop" @scrolltolower="scrolltolower">
					<view class="goods-li" v-for="(item, index) in goods_list" :key="index" @click="addGoods(item)">
						<view class="add-btn" :class="sel_goods_id.indexOf(item.id) > -1 ? 'add-on' : ''"><text class="custom-icon custom-icon-xinzeng"></text></view>
						<view class="goods-main clearfix">
							<image class="goods-img float_left" :src="item.images[0]" mode="aspectFill"></image>
							<view class="goods-info float_left">
								<view class="goods-name ellipsis">{{ item.title }}</view>
								<view class="goods-code">{{ item.code }}</view>
								<view class="goods-tag">
									<u-tag class="tag-li" mode="plain" size="mini" :text="item.categoryTitle" />
									<u-tag class="tag-li" size="mini" :text="item.enableStatus === 5 ? '启用' : '禁用'" />
									<!-- <u-tag v-if="item.topTime === 0" class="tag-li" size="mini" text="置顶" type="success" /> -->
								</view>

								<!-- <view class="goods-num">
									<text>库存 {{ Number(item.inventorTotal) }}</text>
									<text>销量 {{ item.salesNum }}</text>
								</view> -->
							</view>
						</view>
					</view>
					<u-loadmore :status="load_status" />
				</scroll-view>
			</view>
		</view>
		<view class="bottom-view clearfix">
			<view class="float_left" @click="openPop">
				<view class="shop-icon-view"><u-icon name="shopping-cart-fill" class="uicon" color="#ffffff" size="40"></u-icon></view>
				<text>共{{ add_goods.length }}个商品</text>
			</view>
			<view class="float_right"><u-button type="primary" size="medium" @click="addGoodsTo">选好了</u-button></view>
		</view>
		<u-popup v-model="sel_pop" mode="bottom">
			<view class="sel-goods-pop">
				<view class="pop-tit clearfix">
					<view class="float_left">本次已选商品</view>
					<view class="float_right" @click="clearGoods">
						<text class="custom-icon custom-icon-shanchu"></text>
						<text>清空</text>
					</view>
				</view>
				<scroll-view class="goods-ul" scroll-y>
					<view class="goods-li" v-for="(item, index) in add_goods" :key="index">
						<view class="goods-name">{{ item.title }}</view>
						<view class="goods-code">{{ item.code }}</view>
						<text class="custom-icon custom-icon-shanchu" @click="delGoods(index)"></text>
					</view>
					<view style="padding-top: 100rpx;" v-if="!add_goods.length"><u-empty text="未选择商品" mode="data"></u-empty></view>
				</scroll-view>
				<view class="btn-view" @click="addGoodsTo">选好了</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sel_pop: false, //已选商品
			load_status: 'nomore',
			activeName: 'all',
			keyword: '',
			is_more: false,
			page: 1,
			pageSize: 10,
			total: 0,
			category_list: [], // 分类列表
			category_id: '', // 分类id
			auditStatus: 2, // 审核状态
			goods_list: [],
			add_goods: [],
			sel_goods_id: [],
			check: '',
			scrollTop: -1,
			shopId:''
		};
	},
	onLoad(options) {
		if (options.goodsId) {
			this.sel_goods_id = JSON.parse(options.goodsId);
		}
		if (options.check) {
			this.check = Number(options.check);
		}
		if(options.shopId) {
			this.shopId = options.shopId
		}
		this.getAllCategory();
		this.getGoodsBasicOfShopId();
	},

	methods: {
		addGoodsTo() {
			this._prePage().add_goods = this.add_goods;
			uni.navigateBack();
		},
		// 滚动到底部，触发上拉加载
		scrolltolower() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.getData();
			}
		},
		// 判断当前使用方法为列表接口还是搜索引擎接口 获取列表数据
		getData() {
			this.getGoodsBasicOfShopId();
		},
		// 获取商品列表
		getGoodsBasicOfShopId() {
			this.load_status = 'loading';
			this.$u.api
				.getGoodsBasicOfShopId({
					page: this.page,
					pageSize: this.pageSize,
					categoryId: this.category_id,
					enableStatus: 5,
					keyword: this.keyword,
					page: this.page,
					pageSize: this.pageSize,
					shopId: this.shopId,
				})
				.then(res => {
					const list = res.data.map(item => {
						return {
							...item,
							is_more: false
						};
					});
					if (this.page === 1) {
						this.goods_list = list;
					} else {
						this.goods_list = this.goods_list.concat(list);
					}
					this.total = res.pageTotal;
					this.load_status = this.$utils.loadStatus(this.page, this.pageSize, this.total);
				});
		},
		//  获取所有商品分类
		getAllCategory() {
			this.$u.api
				.getAllCategory({
					enableStatus: 5
				})
				.then(res => {
					this.category_list = res.data;
				});
		},
		// 切换分类
		changeCate(id) {
			this.scrollTop = 0;
			this.$nextTick(() => {
				this.scrollTop = -1;
			});
			this.category_id = id;
			this.searchData();
		},
		searchData() {
			this.page = 1;
			this.getData();
		},
		addGoods(item) {
			// 商品发布选择商品
			if (this.check === -1) {
				this._prePage().goodsSel = item;
				uni.navigateBack();
				return;
			}
			// this.add_goods.push(item)
			if (this.sel_goods_id.indexOf(item.id) > -1) {
				return;
			}
			this.$u.api
				.getAllGoodsBasicBySku({
					page: 1,
					pageSize: 100,
					isRevealSku: 4,
					materielId: item.id
				})
				.then(res => {
					const specMultiple = res.data.map(itemP => {
						return {
							id: itemP.skuId,
							specGroup: itemP.specGroup,
							unitName: itemP.unitName
						};
					});
					const addGoods = {
						...item,
						specMultiple: specMultiple
					};
					this.add_goods.push(addGoods);
					this.sel_goods_id.push(item.id);
					this.$u.toast('已选择');
				});
		},
		openPop() {
			this.sel_pop = true;
		},
		clearGoods() {
			const target = this.$u.deepClone(this.add_goods);
			target.forEach(item => {
				const index = this.sel_goods_id.indexOf(item.id);
				if (index > -1) {
					this.sel_goods_id.splice(index, 1);
				}
			});
			this.add_goods = [];
		},
		delGoods(index) {
			const indexS = this.sel_goods_id.indexOf(this.add_goods[index].id);
			if (indexS > -1) {
				this.sel_goods_id.splice(indexS, 1);
			}
			this.add_goods.splice(index, 1);
		}
	}
};
</script>

<style scoped lang="scss">
.bottom-view {
	box-shadow: 0px 2px 12rpx rgba(0, 0, 0, 0.2);
	position: fixed;
	width: 100%;
	padding: 20rpx;
	bottom: 0;
	left: 0;
	background-color: #ffffff;

	.float_left {
		line-height: 70rpx;

		.shop-icon-view {
			display: inline-block;
			width: 60rpx;
			height: 60rpx;
			border-radius: 100%;
			background-color: $uni-color-primary;
			text-align: center;
			line-height: 60rpx;
			vertical-align: middle;
			margin-right: 20rpx;

			.uicon {
				display: inline-block;
				margin-top: 6rpx;
			}
		}
	}
}

.search-view {
	background-color: #ffffff;
	padding: 20rpx;
	.input-view {
		padding: 0 24rpx;
		input {
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 24rpx;
			margin: 0 auto;
			width: 620rpx;
			border: 1px solid #f5f5f5;
			vertical-align: middle;
			border-radius: 8rpx;
			background-color: #f7f8fa;
		}
	}

	.search-other {
		display: flex;
		border-bottom: 1px solid #f5f5f5;

		.search-li {
			flex: 2;
			text-align: center;
			font-size: 24rpx;
			line-height: 80rpx;

			.arrow-down {
				margin-left: 10rpx;
			}
		}
	}
}

.main-view {
	.left-view {
		width: 168rpx;
		background-color: #f7f8fa;

		.left-scroll {
			width: 100%;
			height: calc(100vh - 214rpx);

			.cate-li {
				line-height: 90rpx;
				padding-left: 36rpx;
				color: #666666;
			}

			.cate-on {
				background-color: #ffffff;
				color: #000000;
				position: relative;

				&::before {
					content: '';
					display: block;
					width: 6rpx;
					height: 20rpx;
					background-color: $uni-color-primary;
					position: absolute;
					left: 14rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	}

	.rigth-view {
		width: calc(100% - 168rpx);
		background-color: #ffffff;

		.rigth-scroll {
			width: 100%;
			height: calc(100vh - 214rpx);

			.goods-li {
				padding: 20rpx;
				border-bottom: 1px solid #f5f5f5;
				position: relative;

				.add-btn {
					position: absolute;
					width: 46rpx;
					height: 46rpx;
					text-align: center;
					line-height: 46rpx;
					background-color: $uni-color-primary;
					color: #ffffff;
					border-radius: 100%;
					right: 20rpx;
					bottom: 20rpx;

					.custom-icon {
						font-size: 32rpx;
					}
				}
				.add-on {
					background-color: #999999;
				}

				.goods-main {
					.goods-img {
						border-radius: 10rpx;
						width: 156rpx;
						height: 156rpx;
						margin-right: 20rpx;
					}

					.goods-info {
						width: 366rpx;

						.goods-name {
							-webkit-line-clamp: 1;
						}

						.goods-code {
							font-size: 24rpx;
							padding-top: 6rpx;
						}

						.goods-tag {
							padding: 10rpx 0;

							.tag-li {
								margin-right: 14rpx;
							}
						}

						.goods-num {
							color: #999999;
							font-size: 22rpx;

							text {
								padding-right: 10rpx;
							}
						}
					}
				}
			}
		}
	}
}
.sel-goods-pop {
	padding-bottom: 1px;
	.pop-tit {
		line-height: 70rpx;
		background-color: #f5f5f5;
		padding: 0 24rpx;
		.float_right {
			font-size: 24rpx;
			color: #666666;
			.custom-icon-shanchu {
				font-size: 26rpx;
				margin-right: 10rpx;
			}
		}
	}
	.goods-ul {
		min-height: 400rpx;
		max-height: 600rpx;
		.goods-li {
			padding: 24rpx;
			position: relative;
			border-bottom: 1px solid #f5f5f5;
			.goods-name {
				width: 660rpx;
			}
			.goods-code {
				padding-top: 10rpx;
				font-size: 24rpx;
				color: #999999;
			}
			.custom-icon-shanchu {
				position: absolute;
				right: 24rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 40rpx;
				height: 40rpx;
				color: $uni-color-error;
			}
		}
	}
	.btn-view {
		width: 680rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 10rpx;
		background-color: $uni-color-primary;
		color: #ffffff;
		text-align: center;
		margin: 20rpx auto;
	}
}
</style>