QianNiaoShop/pages/goods/index.vue

<template>
	<view>
		<u-navbar title="商品列表" back-icon-color="#2D405E" :title-bold="true" title-color="#2D405E" title-size="32" :border-bottom="false" :is-back="false"></u-navbar>
		<block v-if="$accessCheck($Access.PublishGoods)">
			<view class="keyword-view clearfix">
				<view class="float_left">
					<u-search
						@clear="searchList"
						@search="searchList"
						:show-action="false"
						:clearabled="true"
						placeholder="商品名称/编码/条码进行搜索"
						v-model="keyword"
						height="72"
						placeholder-color="#879BBA"
						color="#879BBA"
						bg-color="#ECF0F7"
					></u-search>
				</view>
				<!-- <view class="float_right" v-if="$accessCheck($Access.PublishGoodsSearch)" @click="openSel('search_show')">
					<text class="custom-icon custom-icon-shaixuan"></text>
				</view> -->
				<view class="tabs-view">
					<view class="search-view clearfix">
						<view class="title ellipsis" @click="openSel('salesStatus_show')">
							<u-icon
								size="12"
								label-pos="left"
								label-color="#62738e"
								color="#b8c0c8"
								label-size="26"
								:label="salesStatus_name"
								name="arrow-down-fill"
								class="ico"
							></u-icon>
						</view>
						<view class="title ellipsis" @click="goPage('/pagesT/brand/selBrand')">
							<u-icon
								size="12"
								label-pos="left"
								label-color="#62738e"
								color="#b8c0c8"
								label-size="26"
								:label="brand_name"
								name="arrow-down-fill"
								class="ico"
							></u-icon>
						</view>
						<view class="title ellipsis" @click="goPage('/pagesT/shop/selShop')">
							<u-icon size="12" label-pos="left" label-color="#62738e" color="#b8c0c8" label-size="26" :label="shop_name" name="arrow-down-fill" class="ico"></u-icon>
						</view>
						<view class="title ellipsis" style="line-height: 116rpx;color: #62738e;" @click="clearValue()"><text>重置</text></view>
					</view>
				</view>
			</view>
			<view class="catet-view"><u-tabs name="title" :list="cateT_list" height="70" font-size="28" :current="cateT_current" @change="cateTchange"></u-tabs></view>
			<view class="main-view clearfix" :style="{ height: height }">
				<view class="left-view float_left">
					<scroll-view scroll-y="true" class="left-scroll">
						<view class="cate-li ellipsis" :class="[!category_id ? 'cate-on' : '']" @click="changeCate()">全部</view>
						<view
							class="cate-li ellipsis"
							v-for="(item, index) in category_list"
							:key="index"
							@click="changeCate(item)"
							: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"
						@refresherrefresh="refresherrefresh"
						:refresher-enabled="true"
						:refresher-triggered="refresher_triggered"
					>
						<view class="goods-li" v-for="(item, index) in goods_list" :key="index">
							<view @click="goPage(`/pages/goods/SaleGoodsDetail?id=${item.id}&basicGoodsId=${item.basicGoodsId}`)">
								<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">{{ item.title }}</view>
										<view class="goods-code">{{ item.code }}</view>
									</view>
								</view>
								<view class="goods-tag clearfix">
									<view class="tag-li" :class="[item.enableStatus === 5 ? 'green' : 'red']">{{ item.enableStatus === 5 ? '上架' : '下架' }}</view>
									<view class="tag-li brand">{{ item.categoryName }}</view>
									<view v-if="item.brandName" class="tag-li else">{{ item.brandName }}</view>
								</view>
							</view>
							<view class="handel-btn">
								<view v-if="$accessCheck($Access.PublishGoodsUpdateEnableStatus)" class="btn-li" @click="GoodsUpdateEnableStatus(item)">
									{{ item.enableStatus === 5 ? '下架' : '上架' }}
								</view>
								<view v-if="$accessCheck($Access.PublishGoodsEditGoods)" class="btn-li" style="border-left: 1rpx solid #ECF0F7;" @click="editGoods(item)">
									编辑
								</view>
								<!-- <view v-if="$accessCheck($Access.PublishGoodsGetGoodsInfo)" class="btn-li"
									style="border-left: 1rpx solid #ECF0F7;"
									@click="goPage(`/pages/goods/SaleGoodsDetail?id=${item.id}&basicGoodsId=${item.basicGoodsId}`)">
									查看
								</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 @click="addBtnClick"></addBtn>
		</block>
		<view v-else class="empty-view"><u-empty text="没有权限" mode="order"></u-empty></view>
		<u-popup v-model="search_show" mode="right">
			<view class="search-pop">
				<uniStatusBar></uniStatusBar>
				<view class="form-view" style="padding-top: 45px;">
					<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-item label="所属店铺">
							<view class="clearfix form-val" @click="goPage('/pagesT/shop/selShop')">
								<text class="float_left ellipsis">{{ shopId ? shop_name : '请选择' }}</text>
								<view class="float_right" @click.stop="clearValue('shopId')">
									<u-icon :name="!shopId ? '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>
		<u-modal
			v-model="tip_show"
			@confirm="goPage('/pages/goods/AddSelGoods', $accessCheck($Access.AddBaseData))"
			@cancel="goPage('/pagesT/goods/addGoods', $accessCheck($Access.PublishGoodsAddGoods))"
			:show-cancel-button="true"
			cancel-text="商品资料"
			confirm-text="销售商品"
			content=" "
			title="请选择"
		></u-modal>
		<u-select @confirm="salesStatusChange" v-model="salesStatus_show" :list="status_list"></u-select>
		<!-- 底部tabbar -->
		<Tabbar v-model="tabbar_current"></Tabbar>
	</view>
</template>

<script>
import uniStatusBar from '../../components/uni-status-bar.vue';
export default {
	components: {
		uniStatusBar
	},
	data() {
		return {
			refresher_triggered: false, //设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
			tabbar_current:2,
			cateT_current: 0,
			cateT_list: [],
			tip_show: false,
			brandData: '',
			shopData: '',
			status_list: [{
					value: 5,
					label: '上架'
				},
				{
					value: 4,
					label: '下架'
				}
			],
			search_show: false,
			load_status: 'nomore',
			tab_current: 0,
			category_list: [], // 分类列表
			category_id: '', // 分类id
			category_t_id: '', // 分类二级id
			auditStatus: 2, // 审核状态
			isOption: '', // 是否是自选商品
			page: 1,
			pageSize: 10,
			total: 0,
			goods_list: [],
			brandId: '', //品牌
			brand_name: '所属品牌',
			keyword: '', //关键词
			enableStatus: '', //上下架
			shopId: '',
			shop_name: '所属店铺',
			scrollTop: -1,
			salesStatus_show: false,
			salesStatus_name: '全部商品'
		};
	},
	watch: {
		brandData(val) {
			if (val.id) {
				this.brandId = val.id;
				this.brand_name = val.title;
				this.searchList()
			}
		},
		shopData(val) {
			if (val) {
				this.shopId = val.id;
				this.shop_name = val.name;
				this.searchList()
			}
		}
	},
	computed: {
		height() {
			return this.cateT_list.length ? 'calc(100vh - 388rpx)' : 'calc(100vh - 308rpx)';
		},
		enterprise() {
			return this.$store.state.enterprise;
		}
	},
	onLoad(options) {
		this.getAllCategory();
	},
	onShow() {
		this.page = 1;
		this.getData();
	},
	methods: {
		cateTchange(index) {
			this.cateT_current = index;
			this.category_t_id = index ? this.cateT_list[index].id : '';
			this.scrollTop = 0;
			this.$nextTick(() => {
				this.scrollTop = -1;
			});
			this.page = 1;
			this.getData();
		},
		addBtnClick() {
			if (this.enterprise.scope === 4) {
				this.goPage('/pages/goods/AddGoodsOneStore', this.$accessCheck(this.$Access
					.PublishGoodsAddBasicAndPublishGoods));
			} else {
				this.tip_show = true;
			}
		},
		editGoods(item) {
			if (this.enterprise.scope === 4) {
				this.goPage('/pages/goods/AddGoodsOneStore?id=' + item.id);
			} else {
				this.goPage('/pages/goods/AddSelGoods?id=' + item.id);
			}
		},
		statusChange(row) {
			this.enableStatus = row.value;
		},
		GoodsUpdateEnableStatus(row) {
			uni.showModal({
				title: '提示',
				content: `确定要${row.enableStatus === 5 ? '下架' : '上架'}该商品吗？`,
				success: res => {
					if (res.confirm) {
						this.$u.api
							.GoodsUpdateEnableStatus({
								enableStatus: row.enableStatus === 5 ? 4 : 5,
								id: row.id
							})
							.then(res => {
								this.$u.toast('操作成功');
								this.searchList();
							});
					}
				}
			});
		},
		morehandel(item) {
			item.is_more = !item.is_more;
		},
		//  获取所有商品分类
		getAllCategory() {
			this.$u.api
				.getAllCategory({
					enableStatus: 5
				})
				.then(res => {
					this.category_list = res.data;
				});
		},
		// 切换分类
		changeCate(row) {
			this.scrollTop = 0;
			this.$nextTick(() => {
				this.scrollTop = -1;
			});
			if (row) {
				this.category_id = row.id;
				if (row.children) {
					const children = this.$u.deepClone(row.children);
					children.unshift({
						title: '全部',
						id: 0
					});
					this.cateT_list = children;
				} else {
					this.cateT_list = [];
				}
			} else {
				this.category_id = 0;
				this.cateT_list = [];
			}
			this.category_t_id = '';
			this.cateT_current = 0;
			this.page = 1;
			this.getData();
		},
		// 滚动到底部，触发上拉加载
		moreGoods() {
			if (this.total / this.pageSize > this.page) {
				this.page += 1;
				this.getData();
			}
		},
		// 下拉刷新
		refresherrefresh() {
			this.refresher_triggered = true;
			this.page = 1;
			this.getData();
		},
		searchList() {
			this.search_show = false;
			this.page = 1;
			this.getData();
		},
		// 判断当前使用方法为列表接口还是搜索引擎接口 获取列表数据
		getData() {
			let categoryPath = '';

			if (this.category_id && this.category_t_id) {
				categoryPath = this.category_id + ',' + this.category_t_id;
			} else if (this.category_id) {
				categoryPath = this.category_id;
			} else {
				categoryPath = '';
			}

			// 搜索参数规整
			const obj = {
				keyword: this.keyword,
				brandId: this.brandId,
				categoryPath: categoryPath,
				enableStatus: this.enableStatus,
				shopId: this.shopId
			};
			const isKey = this.$utils.isSerch(obj);
			if (isKey) {
				this.getAllGoodsSearch(obj);
			} else {
				this.getAllGoods();
			}
		},
		// 获取商品列表
		getAllGoods() {
			this.load_status = 'loading';
			let params = {
				page: this.page,
				pageSize: this.pageSize
			};
			this.$u.api.getAllGoods(params).then(res => {
				// 设置当前下拉刷新状态为false
				this.refresher_triggered = false;
				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);
			}).catch(err => {
				// 设置当前下拉刷新状态为false
				this.refresher_triggered = false;
			});
		},
		// 商品搜索
		getAllGoodsSearch(obj) {
			this.load_status = 'loading';
			let params = {
				...obj,
				page: this.page,
				pageSize: this.pageSize
			};
			this.$u.api.getAllGoodsSearch(params).then(res => {
				// 设置当前下拉刷新状态为false
				this.refresher_triggered = false;
				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);
			}).catch(err => {
				// 设置当前下拉刷新状态为false
				this.refresher_triggered = false;
			});;
		},
		enableStatusConfirm(arr) {
			this.enableStatus = arr[0].value;
			this.enableStatus_name = arr[0].value ? arr[0].label : '';
			this.searchList();
		},
		clearProp(key) {
			this[key] = '';
			this[key + '_name'] = '';
			this.searchList();
		},
		openSel(key) {
			this[key] = true;
		},
		clearValue(key) {
			// if (!key) {
			// 	this.keyword = '';
			// 	this.brandId = '';
			// 	this.category_id = '';
			// 	this.enableStatus = '';
			// 	this.shopId = '';
			// 	this.searchList();
			// } else {
			// 	this[key] = '';
			// }
			this.keyword = '';
			this.brandId = '';
			this.category_id = '';
			this.enableStatus = '';
			this.shopId = '';
			this.salesStatus_name = '全部商品'
			this.brand_name = '所属品牌'
			this.shop_name = '所属店铺'
			this.searchList();
		},
		salesStatusChange(e) {
			this.enableStatus = e[0].value
			this.salesStatus_name = e[0].label
			this.searchList();
		}
	}
};
</script>

<style scoped lang="scss">
.tabs-view {
	width: 100%;
	background-color: #ffffff;

	.search-view {
		width: 100%;
		display: flex;

		.title {
			flex: 5;
			height: 102rpx;
			text-align: center;
			font-weight: 400;
			line-height: 102rpx;
		}
	}
}

.catet-view {
	border-bottom: 1px solid #f5f5f5;
}

.keyword-view {
	background-color: #ffffff;
	padding: 0 24rpx 0;

	.float_left {
		width: 100%;
	}

	.float_right {
		line-height: 64rpx;
		width: 50rpx;
		text-align: center;
		color: #666666;
	}
}

.main-view {
	height: calc(100vh - 106rpx);

	.left-view {
		width: 200rpx;
		background-color: #ffffff;
		height: 100%;

		.left-scroll {
			width: 100%;
			height: 100%;

			.cate-li {
				width: 100%;
				line-height: 80rpx;
				padding-left: 36rpx;
				color: #4b4b4b;
				background-color: #ffffff;
				font-size: 26rpx;
				font-weight: 400;
			}

			.cate-on {
				background-color: rgb(235, 240, 248);
				color: #000000;
				position: relative;
				font-weight: 600;
				font-size: 28rpx;

				&::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% - 200rpx);
		background-color: #ffffff;
		height: 100%;

		.rigth-scroll {
			width: 100%;
			height: 100%;
			background-color: #f5f5f6;

			.goods-li {
				padding: 16rpx 0 0;
				margin: 20rpx 16rpx;
				border-bottom: 1px solid #f5f5f5;
				position: relative;
				background-color: #ffffff;
				border-radius: 8rpx;

				.goods-tag {
					// padding: 16rpx 0;
					margin: 16rpx 0 24rpx 16rpx;

					.tag-li {
						float: left;
						margin-right: 8rpx;
						min-width: 104rpx;
						height: 32rpx;
						font-size: 20rpx;
						text-align: center;
						line-height: 32rpx;
						border-radius: 4rpx;
						padding: 0 6rpx;
					}

					.brand {
						line-height: 28rpx;
						border-radius: 4rpx;
						border: 1rpx solid #4076d6;
						color: #4076d6;
					}

					.else {
						background-color: rgb(206, 242, 255);
						color: #32c5ff;
					}

					.red {
						background-color: rgb(255, 237, 238);
						color: #f67778;
					}

					.green {
						background-color: rgb(218, 248, 242);
						color: #00c395;
					}
				}

				.goods-main {
					margin-left: 16rpx;

					.goods-img {
						border-radius: 8rpx;
						width: 114rpx;
						height: 114rpx;
						margin-right: 16rpx;
					}

					.goods-info {
						width: 348rpx;

						.goods-name {
							-webkit-line-clamp: 1;
							font-size: 28rpx;
							color: #2d405e;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
						}

						.goods-code {
							font-size: 22rpx;
							padding-top: 6rpx;
							color: #62738e;
						}

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

							text {
								padding-right: 10rpx;
							}
						}
					}
				}

				.handel-btn {
					display: flex;
					height: 76rpx;
					border-top: 1px solid #ecf0f7;

					.btn-li {
						color: #879bba;
						font-size: 28rpx;
						line-height: 76rpx;
						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>