OpenDoorManageMini/pages/globalPages/components/commodity.vue

<template>
	<view class="container">
		<u-navbar bgColor="#2C6FF3" :placeholder="true" :autoBack="false">
			<view slot="left" style="color:#fff;font-size: 36rpx;">
				商品私库
			</view>
		</u-navbar>
		<view class="content">
			<view class="btn-wrap flex justify-between">
				<xbutton bgColor="#F7F7F7" color="#777777" @click="$tab.navigateTo('/pages/commodity/search')">商品上下架
				</xbutton>
				<xbutton bgColor="#F7F7F7" color="#777777" @click="$tab.navigateTo('/pages/commodity/addCom')">新品建模
				</xbutton>
				<xbutton bgColor="#F7F7F7" color="#777777" @click="$tab.navigateTo('/pages/commodity/publicCom')">官方商品库
				</xbutton>
			</view>
			<view class="search" @click="searchComm">
				<view class="search-input">
					<u-search placeholder="商品搜索" actionText="取消" :actionStyle="{color:'#2C6FF3'}"
						:showAction="!leftShow" :clearabled="false" v-model="keyword" @search="search"
						@custom="cancle"></u-search>
					<view @click="scan" :class="[leftShow?'scan-icon scan-left-show':'scan-icon scan-left-hidden']">
						<u-icon name="scan" size="22" color="#909399"></u-icon>
					</view>
				</view>

				<view class="search-history flex flex-wrap flex-start" v-if="!leftShow">
					<view class="history-item" v-for="(item,index) in historyList" :key="index"
						@click="searchFast(item)">
						{{item}}
					</view>
				</view>
			</view>
			<view class="classify-wrap">
				<Classify storeName="perStor" :tabList="tabList" :status="status" :commList="commList"
					@switchMenu="switchMenu" @comClick='detail' @lowerBottom="lowerBottom" :height="fullHeight"
					:leftShow="leftShow" />
			</view>
		</view>
	</view>
</template>

<script>
	import Classify from "@/components/classify/index.vue"

	import {
		goodsCategory,
		ownerGoodsList
	} from "@/api/commodity/mercGoods.js"
	export default {
		components: {
			Classify
		},
		data() {
			return {
				fullHeight: '0',
				tabList: [], //商品类目
				commList: [], //商品列表

				page: 1, //商品分页
				size: 10,
				categoryCode: null,

				status: 'loadmore', //加载更多

				leftShow: true,
				keyword: '',
				historyList: []
			}
		},
		created() {
			let _this = this;
			const query = uni.createSelectorQuery().in(this);
			query.select(".classify-wrap").boundingClientRect((data) => {
				_this.top = data.top;

				uni.getSystemInfo({
					success(res) {
						// 针对iPhone X等机型底部安全距离做适配
						const model = res.model;
						const modelInclude = [
							"iPhone X", 
							'iPhone XR', 
							"iPhone XS", 
							"iPhone XS MAX",
							"iPhone 12/13 mini",
							"iPhone 12/13 (Pro)",
							"iPhone 12/13 Pro Max",
							"iPhone 14 Pro Max"
						];
						let safeDistance = modelInclude.includes(model)
						//动态设置商品区域高度
						if (safeDistance) {
							_this.fullHeight = res.windowHeight - _this.top - 84 + 'px';
						} else {
							_this.fullHeight = res.windowHeight - _this.top - 50 + 'px';
						}
					},
				});
			}).exec();

			if (uni.getStorageSync('goods')) {
				this.historyList = JSON.parse(uni.getStorageSync('goods'))
			}
			this.getCategory()
		},

		methods: {
			onshow() {
				this.reset()
				this.getCommList()
			},

			search(val) {
				this.saveKeyWord('goods', this.keyword)
				this.reset();
				this.getCommList()
			},

			cancle(val) {
				this.keyword = ''
				this.leftShow = true
				this.search()
			},

			saveKeyWord(type, val) {
				if (val) {
					let arr = []
					if (uni.getStorageSync(type)) {
						let arr = JSON.parse(uni.getStorageSync(type))
						if (arr.indexOf(val) != -1) {
							console.log('arr.indexOf(val)', arr.indexOf(val))
							arr.splice(arr.indexOf(val), 1)
						}
						arr.unshift(val)
						if (arr.length > 6) {
							arr.pop()
						}
						this.historyList = JSON.parse(JSON.stringify(arr))
						uni.setStorageSync(type, JSON.stringify(arr))
					} else {
						arr.unshift(val)
						this.historyList = JSON.parse(JSON.stringify(arr))
						uni.setStorageSync(type, JSON.stringify(arr))
					}
				} else {
					return
				}
			},

			searchFast(e) {
				this.keyword = e
				this.search()
			},

			//扫码
			scan() {
				uni.scanCode({
					success: (res) => {
						this.keyword = res.result;
						this.search()
					}
				});
			},

			searchComm() {
				this.leftShow = false
			},

			//获取类目列表
			getCategory() {
				goodsCategory().then(res => {
					this.tabList = res.data
					if (this.tabList && this.tabList.length > 0) {
						this.switchMenu(this.tabList[0])
					} else {
						this.reset()
					}
				})
			},

			//商品类目切换
			switchMenu(item) {
				this.categoryCode = item.categoryCode
				this.reset()
				this.getCommList()
			},

			//根据类目获取商品列表
			getCommList() {
				let params = {}
				if (this.leftShow) { //搜索
					params = {
						categoryCode: this.categoryCode,
						page: {
							current: this.page,
							size: this.size
						},
						status: '1' //0下架1上架
					}
				} else { //非搜索
					params = {
						page: {
							current: this.page,
							size: this.size
						},
						status: '1', //0下架1上架
						keyword: this.keyword
					}
				}
				ownerGoodsList(params).then(res => {
					let data = res.data.records;
					if (data && data.length > 0) {
						data = data.map(i => {
							i.name = i.goodsName;
							i.barcode = i.goodsBarcode;
							i.cover = i.goodsCover;
							i.price = i.price / 100;
							i.categoryName = i.capacity == null ? '未分类' : i.capacity;
							return i
						})
					}
					if (data.length < 10) {
						this.status = "nomore"
					} else {
						this.status = "loadmore"
					}
					this.commList = this.commList.concat(data)
				})
			},

			//触底加载更多
			lowerBottom() {
				if (this.status == 'nomore') return
				this.page++
				this.getCommList()
			},

			reset() {
				this.status == 'loadmore'
				this.page = 1;
				this.size = 10;
				this.commList = [];
			},

			detail(e) {
				this.$tab.navigateTo('/pages/commodity/comEdit?id=' + e.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn-wrap {
		padding: 24rpx;
		background-color: #fff;
	}

	.search {
		padding: 0 24rpx 24rpx;
		background-color: #fff;

		.search-input {
			position: relative;

			.scan-icon {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				z-index: 2;

				&.scan-left-show {
					right: 36rpx;
				}

				&.scan-left-hidden {
					right: 100rpx;
				}
			}
		}

		.search-history {

			.history-item {
				margin-right: 24rpx;
				padding: 0 12rpx;
				background-color: #f2f2f2;
				color: #333;
				font-size: 24rpx;
				line-height: 40rpx;
				border-radius: 40rpx;
				margin-top: 24rpx;
			}
		}
	}

	.classify-wrap {
		// padding-bottom: 200rpx;
	}

	.btn {
		width: 100%;
		position: fixed;
		bottom: 120rpx;
		left: 0;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		padding: 0 24rpx;

		&.safa-btn {
			bottom: 180rpx;
		}
	}
</style>