QianNiaoShop/pagesT/goods/selGoodsBasicBySku.vue

<template>
	<view>
		<view class="search-view">
			<u-search
				@custom="searchList()"
				@search="searchList()"
				@clear="searchList()"
				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" @scrolltolower="scrolltolower" class="rigth-scroll" :scroll-top="scrollTop">
					<view class="goods-li" v-for="(item, index) in goods_list" :key="index">
						<view class="add-btn" v-if="!(is_purchase && item.isEq === 5 && item.unitName === '件')">
							<text @click="addGoods(index)" v-if="item.buyNum === 0" class="custom-icon custom-icon-xinzeng"></text>
							<u-number-box v-else :min="0" :positive-integer="false" :index="index" @change="buyNumChange" :value="item.buyNum"></u-number-box>
						</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-code">
									{{ item.unitName }};
									<text v-for="(sku, skuI) in item.specGroup" :key="skuI">{{ sku.specValueName }};</text>
								</view>
								<view class="goods-tag"><u-tag class="tag-li" mode="plain" size="mini" :text="item.categoryName" /></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 clearfix">{{ item.code }}</view>
						<view class="goods-code clearfix">
							<view class="float_left">
								{{ item.unitName }};
								<block v-if="item.specGroup">
									<text v-for="(sku, skuI) in item.specGroup" :key="skuI">{{ sku.specValueName }};</text>
								</block>
								<text v-else>{{ item.specGropName }}</text>
							</view>
							<view class="float_right"><u-number-box :min="0" :index="index" @change="addBuyNumChange" :value="item.buyNum"></u-number-box></view>
						</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: [],
			goods_detail: {},
			isRevealSku: 4, // 5 只显示基本单位 4:主辅助单位都显示
			shopId: '',
			scrollTop: -1,
			is_purchase: false
		};
	},
	onLoad(options) {
		if (options.pageName) {
			this.is_purchase = true;
		}
		this.add_goods = uni.getStorageSync('purGoods').map(item => {
			return {
				...item,
				title: item.goodsName,
				code: item.goodsCode
			};
		});
		console.log(this.add_goods);
		this.getAllCategory();
		this.getAllGoodsBasicBySku();
	},

	methods: {
		clearGoods() {
			this.add_goods = [];
		},
		openPop() {
			this.sel_pop = true;
		},
		addGoodsTo() {
			this._prePage().goodsData = this.add_goods;
			uni.navigateBack();
		},
		// 滚动到底部，触发上拉加载
		scrolltolower() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.getAllGoodsBasicBySku();
			}
		},
		buyNumChange({ value, index }) {
			let target = this.$u.deepClone(this.goods_list);
			target[index].buyNum = value;
			let addGoods = this.$u.deepClone(this.add_goods);
			const goodsI = addGoods.findIndex(item => item.skuId === target[index].skuId);
			if (!Number(value)) {
				addGoods.splice(goodsI, 1);
			} else {
				addGoods[goodsI].buyNum = value;
			}
			this.add_goods = addGoods;
			this.goods_list = target;
		},
		addBuyNumChange({ value, index }) {
			let target = this.$u.deepClone(this.goods_list);
			let addGoods = this.$u.deepClone(this.add_goods);
			const goodsI = target.findIndex(item => item.skuId === addGoods[index].skuId);
			if (!Number(value)) {
				addGoods.splice(goodsI, 1);
			} else {
				addGoods[index].buyNum = value;
			}
			if (goodsI > -1) {
				target[goodsI].buyNum = value;
			}
			this.add_goods = addGoods;
			this.goods_list = target;
		},
		delGoods(index) {
			let target = this.$u.deepClone(this.goods_list);
			const goodsI = target.findIndex(item => item.skuId === this.add_goods[index].skuId);
			if (goodsI > -1) {
				target[goodsI].buyNum = 0;
			}
			this.goods_list = target;
			this.add_goods.splice(index, 1);
		},
		// 获取商品列表
		getAllGoodsBasicBySku() {
			this.load_status = 'loading';
			this.$u.api
				.getAllGoodsBasicBySku({
					page: this.page,
					pageSize: this.pageSize,
					isRevealSku: this.isRevealSku,
					keyword: this.keyword,
					categoryId: this.category_id
				})
				.then(res => {
					const list = res.data.map(item => {
						const goods = this.add_goods.find(agoods => agoods.skuId === item.skuId);
						return {
							...item,
							buyNum: goods ? goods.buyerNum : 0
						};
					});
					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.page = 1;
			this.searchList();
		},
		searchList() {
			this.page = 1;
			this.getAllGoodsBasicBySku();
		},
		addGoods(index) {
			const target = this.$u.deepClone(this.goods_list);
			const isindex = this.add_goods.findIndex(item => item.skuId === target[index].skuId);
			if (isindex === -1) {
				target[index].buyNum = 1;
				this.add_goods.push(target[index]);
			} else {
				this.add_goods[isindex].buyNum += target[index].buyNum;
			}
			this.goods_list = target;
		}
	}
};
</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;
					right: 20rpx;
					bottom: 20rpx;
					.custom-icon {
						color: #ffffff;
						font-size: 32rpx;
						display: block;
						width: 46rpx;
						height: 46rpx;
						text-align: center;
						line-height: 46rpx;
						background-color: $uni-color-primary;
						border-radius: 100%;
					}
				}
				.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: 24rpx;
				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>