jhlapp/pagesT/goods/BaseGoodslist.vue

<template>
	<view>
		<view class="keyword-view clearfix">
			<view class="float_left">
				<u-search @clear="searchList" @search="searchList" :show-action="false" :clearabled="true" placeholder="商品名称/编码/条码" v-model="keyword"></u-search>
			</view>
			<view v-if="$accessCheck($Access.BaseDataListSearch)" class="float_right" @click="openSel('search_show')"><text class="custom-icon custom-icon-shaixuan"></text></view>
		</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" @scrolltolower="moreGoods" :scroll-top="scrollTop">
					<view class="goods-li" v-for="(item, index) in goods_list" :key="index">
						<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 class="tag-li" v-if="item.brandTitle" size="mini" type="success" :text="item.brandTitle" />
								</view>
							</view>
						</view>
						<view class="handel-btn">
							<view class="btn-li" v-if="$accessCheck($Access.BaseDataListUpdateEnableStatus)" @click="updateEnableStatusGoods(item)">
								{{ item.enableStatus === 5 ? '禁用' : '启用' }}
							</view>
							<view class="btn-li" @click="goPage('/pagesT/goods/addGoods?id=' + item.id)" v-if="$accessCheck($Access.EditBaseData)">编辑</view>
							<view v-if="$accessCheck($Access.BaseDataListDetail)" class="btn-li" @click="goPage('/pages/goods/goodsDetail?id=' + item.id)">查看</view>
							<!-- <view class="btn-li" @click="goPage('/pages/goods/goodsDetail?id=' + item.id)">发布</view> -->
						</view>
					</view>
					<u-loadmore v-if="goods_list.length" :status="load_status" />
					<view v-if="!goods_list.length" class="empty-view"><u-empty text="暂无商品" mode="favor"></u-empty></view>
				</scroll-view>
			</view>
		</view>
		<addBtn v-if="$accessCheck($Access.AddBaseData)" url="/pagesT/goods/addGoods"></addBtn>
		<u-popup v-model="search_show" mode="right">
			<view class="search-pop">
				<view class="form-view">
					<u-form label-width="160rpx" label-position="left">
						<u-form-item label-position="top" label="销售状态">
							<text
								v-for="(item, index) in status_list"
								:key="index"
								class="check-li"
								:class="[enableStatus === item.value ? 'active' : '']"
								@click="statusChange(item)"
							>
								{{ item.label }}
							</text>
						</u-form-item>
						<u-form-item label="品牌">
							<view class="clearfix form-val" @click="goPage('/pagesT/brand/selBrand')">
								<text class="float_left ellipsis">{{ brandId ? brand_name : '请选择' }}</text>
								<view class="float_right" @click.stop="clearValue('brandId')">
									<u-icon :name="!brandId ? 'arrow-right' : 'close-circle-fill'" size="28" color="#999999"></u-icon>
								</view>
							</view>
						</u-form-item>
					</u-form>
				</view>

				<view class="search-btn">
					<view class="btn-li" @click="clearValue()">重置</view>
					<view class="btn-li" @click="searchList">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			load_status: 'nomore',
			tab_current: 0,
			status_list: [
				{
					label: '启用',
					value: 5
				},
				{
					label: '禁用',
					value: 4
				}
			],
			category_list: [], // 分类列表
			category_id: '', // 分类id
			auditStatus: 2, // 审核状态
			isOption: '', // 是否是自选商品
			page: 1,
			pageSize: 10,
			total: 0,
			goods_list: [],
			brandId: '', //品牌
			brand_name: '',
			keyword: '', //关键词
			enableStatus: '', //上下架
			brandData: {},
			search_show: false,
			scrollTop: -1
		};
	},
	watch: {
		brandData(val) {
			if (val.id) {
				this.brandId = val.id;
				this.brand_name = val.title;
			}
		}
	},
	onLoad() {
		this.getAllCategory();
	},
	onShow() {
		this.page = 1;
		this.getData();
	},
	methods: {
		updateEnableStatusGoods(row) {
			uni.showModal({
				title: '提示',
				content: `确定要${row.enableStatus === 5 ? '禁用' : '启用'}该商品吗？`,
				success: res => {
					if (res.confirm) {
						this.$u.api
							.updateEnableStatusGoods({
								enableStatus: row.enableStatus === 5 ? 4 : 5,
								id: [row.id]
							})
							.then(res => {
								this.$u.toast('操作成功');
								this.searchList();
							});
					}
				}
			});
		},
		//  获取所有商品分类
		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.searchList();
		},
		// 滚动到底部，触发上拉加载
		moreGoods() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.getData();
			}
		},
		searchList() {
			this.search_show = false;
			this.page = 1;
			this.getData();
		},
		// 判断当前使用方法为列表接口还是搜索引擎接口 获取列表数据
		getData() {
			// 搜索参数规整
			const obj = {
				keyword: this.keyword,
				brandId: this.brandId,
				categoryPath: this.category_id,
				enableStatus: this.enableStatus
			};
			const isKey = this.$utils.isSerch(obj);
			if (isKey) {
				this.searchGoods();
			} else {
				this.getAllGoodsBasic();
			}
		},
		// 获取商品列表
		getAllGoodsBasic() {
			this.load_status = 'loading';
			let params = {
				page: this.page,
				pageSize: this.pageSize
			};
			this.$u.api.getAllGoodsBasic(params).then(res => {
				if (this.page === 1) {
					this.goods_list = res.data;
				} else {
					this.goods_list = this.goods_list.concat(res.data);
				}
				this.total = res.pageTotal;
				this.load_status = this.$utils.loadStatus(this.page, this.pageSize, this.total);
			});
		},
		// 商品搜索
		searchGoods() {
			this.load_status = 'loading';
			let params = {
				keyword: this.keyword,
				brandId: this.brandId,
				categoryPath: this.category_id,
				enableStatus: this.enableStatus,
				page: this.page,
				pageSize: this.pageSize
			};
			this.$u.api.searchGoods(params).then(res => {
				if (this.page === 1) {
					this.goods_list = res.data;
				} else {
					this.goods_list = this.goods_list.concat(res.data);
				}
				this.total = res.pageTotal;
				this.load_status = this.$utils.loadStatus(this.page, this.pageSize, this.total);
			});
		},
		statusChange(val) {
			this.enableStatus = val;
		},
		clearValue(key) {
			if (!key) {
				this.keyword = '';
				this.brandId = '';
				this.category_id = '';
				this.enableStatus = '';
				this.searchList();
			} else {
				this[key] = '';
			}
		},
		openSel(key) {
			this[key] = true;
		}
	}
};
</script>

<style scoped lang="scss">
.keyword-view {
	background-color: #ffffff;
	padding: 20rpx 24rpx;
	.float_left {
		width: 640rpx;
	}
	.float_right {
		line-height: 64rpx;
		width: 50rpx;
		text-align: center;
		color: #666666;
	}
}
.main-view {
	.left-view {
		width: 168rpx;
		background-color: #f7f8fa;
		.left-scroll {
			width: 100%;
			height: calc(100vh - 106rpx);
			.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 - 106rpx);
			.goods-li {
				padding: 20rpx;
				border-bottom: 1px solid #f5f5f5;
				position: relative;
				.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;
							}
						}
					}
				}
				.handel-btn {
					display: flex;
					.btn-li {
						font-size: 24rpx;
						line-height: 50rpx;
						flex: 3;
						text-align: center;
						border: 1px solid #dddddd;
						margin: 20rpx 10rpx 0;
						border-radius: 8rpx;
					}
				}
				.more-btn {
					position: absolute;
					right: 20rpx;
					bottom: -120rpx;
					background-color: #ffffff;
					border-radius: 10rpx;
					padding: 0 20rpx;
					z-index: 9;
					box-shadow: 0px 3px 24rpx rgba(0, 0, 0, 0.1);
					.more-btn-li {
						font-size: 24rpx;
						line-height: 60rpx;
						text-align: center;
						border-bottom: 1px solid #f5f5f5;
						&:last-child {
							border: 0 none;
						}
					}
				}
			}
		}
	}
}
</style>