school-peisong/pages/goods/goodsList.vue

<!-- 库存列表页 -->
<template>
	<view class="page1">
		<view class=""
			style="width: 100%;border-top: 1px solid #eee;border-bottom: 1px solid #eee;position: fixed;background: #fff;top: 0;z-index: 99;">
			<view class="title-right">
				<view class="title-right-bottom title-btn" @tap.stop="onGridClick('2')">
					新增商品
				</view>
				<view class="title-right-bottom title-btn" @tap.stop="onGridClick('0')">
					分类管理
				</view>
				<view class="title-right-bottom title-btn" @tap.stop="onGridClick('5')">
					批量下架
				</view>
				<view class="title-right-bottom title-btn" @tap.stop="onGridClick('6')">
					批量删除
				</view>
			</view>
		</view>
		<view class="search">
			<uni-search-bar class="uni-mt-10" radius="5" placeholder="商品名称" cancelButton="none" @input="search"
				@clear="clearSearch" v-model="searchName" />
		</view>
		<view class="content-left" style="height: 100%;float: left;position: fixed;top: 13%;">
			<view v-if="gateType == ''" class="left-box" v-for="(item, index) in indexList" :key="index"
				:class="item.parentId ? 'left-box-hover':''" @tap="clickLeftBtn(index)">
				<text style="width: 100%;height: 90rpx;line-height: 90rpx;display: inline-block;overflow: hidden;"
					:class="item.parentId ? 'red' :''">{{item.categoryName}}</text>
			</view>
		</view>
		<view class="content-right" style="width: 570rpx;background: #fff;margin-left:170rpx;margin-top: 200rpx;">
			<view class="right-box" v-for="(item,index) in shopList" :key="index" @tap="goDetail(item)">
				<view class="box-left" @tap.stop="largeImg(item)">
					<img :src="item.productPicture" class="img-radius" alt="" v-if="item.productPicture">
					<view class="noPic" v-else>暂无图片</view>
				</view>
				<view class="box-right">
					<view class="box-right-num">货号:{{item.productSn==null?'':item.productSn}}</view>
					<view class="box-right-name">名称:{{item.productName == null?'暂无':item.productName}}</view>
					<view class="box-right-name">供应商:{{item.supplierName == null?'暂无':item.supplierName}}</view>
					<!-- 1上架  0下架 -->
					<view class="up-down" v-if="item.delFlag ==1" @tap.stop="upDown('0',item)">下架</view>
					<view class="up-down" v-if="item.delFlag ==0" @tap.stop="upDown('1',item)">上架</view>
					
					<view class="box-right-price">
						<view class="price-box" v-if='type==0'>
							<text
								style="color: red;">{{item.purchasePrice}}</text>
							<text>采购价</text>
						</view>
						<view class="price-box">
							<text>{{item.wholesalePrice}}</text>
							<text>批发价</text>
						</view>
						<view class="price-box">
							<text>{{item.price}}</text>
							<text>零售价</text>
						</view>
						<view class="price-box" @tap.stop="seeStockCount(item.stockCount,item.minusStockCount)">
							<text>{{item.stockCount + item.minusStockCount}}</text>
							<view>
								库存
								<uni-icons type="help" size="15"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="right-box" v-for="(item,index) in shopList1" :key="index" @tap="goDetail(item)">
				<view class="box-left" @tap.stop="largeImg(item)">
					<img :src="item.productPicture" class="img-radius" alt="" v-if="item.productPicture">
					<view class="noPic" v-else>暂无图片</view>
				</view>
				<view class="box-right">

					<view class="box-right-num">货号:{{item.productSn}}</view>
					<view class="box-right-name">名称:{{item.productName == null?'暂无':item.productName}}</view>
					<view class="box-right-name">供应商:{{item.supplierName == null?'暂无':item.supplierName}}</view>
					<!-- 1上架  0下架 -->
					<view class="up-down" v-if="item.delFlag ==1" @tap.stop="upDown('0',item)">下架</view>
					<view class="up-down" v-if="item.delFlag ==0" @tap.stop="upDown('1',item)">上架</view>
					
					<view class="box-right-price">
						<view class="price-box" v-if='type==0'>
							<text
								style="color: red;">{{item.inStorageStatus==0?'待入库':item.purchasePrice==null?'新商品':item.purchasePrice}}</text>
							<text>采购价</text>
						</view>
						<view class="price-box">
							<text>{{item.wholesalePrice}}</text>
							<text>批发价</text>
						</view>
						<view class="price-box">
							<text>{{item.price}}</text>
							<text>零售价</text>
						</view>
						<view class="price-box" @tap.stop="seeStockCount(item.stockCount,item.minusStockCount)">
							<text>{{item.stockCount + item.minusStockCount}}</text>
							<view>
								库存
								<uni-icons type="help" size="15"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹出多图轮播 -->
		<uni-popup ref="imgPopup" background-color="#fff">
			<view class="showImg-box">
				<swiper indicator-dots class="swiper-box" @change="lunbochange" circular autoplay
					:current="swiperDotIndex">
					<swiper-item v-for="(item, index) in bigImg" :key="index">
						<view class="swiper-item">
							<image mode='aspectFit' show-menu-by-longpress :src="item.productPicture" alt=""
								style="width: 100%;height: 100%;border-radius: 10px;" />
							</image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: mapState(['shopIndex', 'region']),
		data() {
			return {
				size: 30,
				indexList: [],
				
				bigImg: [],
				swiperDotIndex: 0,
				pageNum: 1, //分页的页码
				shopList: [],
				categoryId: '', //分类id
				shopId: '', //店铺id,
				type: '',
				orderSort: '',
				sort: '',
				searchName: '',
				categoryIndex: 0,
				shopList1: [],
				gateType: '',
			}
		},
		onLoad(option) {
			
			let that = this
			this.type = uni.getStorageSync('type')
		},
		onReachBottom() {
			if (this.pageNum >= this.pages) return;
			this.pageNum++;
			if (this.gateType == 'search') {
				this.getShareList('search');
			} else {
				this.getShareList();
			}

		},
		onShow() {
			let that = this;
			
			this.shopId = uni.getStorageSync('shopId')
			
			this.searchName = ''
			this.getGategoryList()
			
		},
		methods: {
			lunbochange(e) {
				this.current = e.detail.current
			},
			largeImg(img) {
				if ((img.productPicture == null && img.productPictures == null) || (img.productPicture == '' && img.productPictures == null)) {
					this.tui.toast("暂无可展示的图片", 300)
					return
				}
				this.bigImg = []
				if (img.productPicture != null) {
					let data = {
						productPicture: img.productPicture
					}
					this.bigImg.push(data)
				}
				if (img.productPictures != null) {
					for (let i = 0; i < img.productPictures.length; i++) {
						this.bigImg.push(img.productPictures[i])
					}
				}
				this.$refs.imgPopup.open()
			},
			//初始化获取分类列表
			getGategoryList() {
				this.NB.sendRequest('/app/productCategory/list', {
					
				}, false, 'get', 'application/json').then(res => {
					if (res.code == 200) {
						this.indexList = res.result;
						for (var i = 0; i < this.indexList.length; i++) {
							if (i == this.categoryIndex) {
								this.indexList[i].parentId = true
							} else {
								this.indexList[i].parentId = false
							}
						}
						this.categoryId = this.indexList[this.categoryIndex].id
						this.pageNum = 1
						this.searchName = ""
						this.shopList1 = []
						this.shopList = []
						this.getShareList();
					} else {
						this.tui.toast(res.message)
					}
				})
			},
			//点击左侧菜单切换
			clickLeftBtn(index) {
				uni.removeStorageSync('noReload')
				for (var i = 0; i < this.indexList.length; i++) {
					if (i == index) {
						this.indexList[i].parentId = true
					} else {
						this.indexList[i].parentId = false
					}
				}
				this.categoryIndex = index
				this.categoryId = this.indexList[index].id
				this.pageNum = 1
				this.searchName = ""
				this.orderSort = ""
				this.sort = ''
				this.shopList1 = []
				this.shopList = []
				this.getShareList()
			},
			//库存详情
			goDetail(item) {
				uni.setStorageSync('noReload', true)
				uni.navigateTo({
					url: '/package1/inventory/inventoryDetail?item=' + JSON.stringify(item)
				})
			},
			//点击分类获取商品列表
			getShareList(type) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let data = {}
				if (type == 'search') {
					this.gateType = 'search'
					data = {
						categoryId: "",
						searchStr: this.searchName,
						pageNum: this.pageNum,
						pageSize: '10',
						sort: "",
						order: ""
					}
				} else {
					this.gateType = ''
					data = {
						categoryId: this.categoryId,
						searchStr: this.searchName,
						pageNum: this.pageNum,
						pageSize: '10',
						sort: this.sort,
						// supplierId: "1819981229722832896",
						order: this.orderSort
						
					}
				}
				this.NB.sendRequest('/app/product/getShareList', data, false, 'POST', 'application/json').then(res => {
					if (res.code == 200) {
						if (type == 'search') {
							this.shopList = []
							if (this.pages == 1) {
								this.shopList1 = res.result.records
							} else {
								this.shopList1 = [...this.shopList1, ...res.result.records]
							}
							this.pages = res.result.pages
						} else {
							this.shopList1 = []
							if (this.pages == 1) {
								this.shopList = res.result.records
							} else {
								this.shopList = [...this.shopList, ...res.result.records]
							}
							this.pages = res.result.pages
						}
					} else {
						this.tui.toast(res.message)
					}
				})
				uni.hideLoading()
			},
			//商品上下架
			upDown(type, data) {
				let that = this,
					title = "确定将此款商品" + (type == 0 ? "下架" : "上架") + "吗？"
				uni.showModal({
					title: "提示",
					content: title,
					success: function(res) {
						if (res.confirm) {
							that.pageNum = 1
							that.searchName = ""
							that.shopList1 = []
							that.shopList = []
							if (type == 0) { //下架
								this.NB.sendRequest('/app/product/down', {
									id: data.id
								}, false, 'POST', 'application/json').then(res => {
									if (res.code == 200) {
										that.tui.toast("下架成功")
									} else {
										that.tui.toast(res.message)
									}
									that.categoryId = data.categoryId
									that.getShareList()
								})
							} else { //上架
								this.NB.sendRequest('/app/product/up', {
									id: data.id
								}, false, 'POST', 'application/json').then(res => {
									if (res.code == 200) {
										that.tui.toast("上架成功")
									} else {
										that.tui.toast(res.message)
									}
									that.categoryId = data.categoryId
									that.getShareList()
								})
							}
						}
					}
				})
			},
			//搜索接口
			search(e) {
				if (e == '') {
					this.pageNum = 1
					this.shopList1 = []
					this.shopList = []
					this.searchName = ""
					this.getShareList()
				} else {
					this.pageNum = 1
					this.shopList1 = []
					this.shopList = []
					this.searchName = e
					this.getShareList('search')

				}
			},
			//清空搜索条件
			clearSearch() {
				this.pageNum = 1
				this.shopList1 = []
				this.shopList = []
				this.orderSort = ''
				this.sort = ''
				this.searchName = ''
				this.getShareList()
			},
			//头部按钮
			onGridClick(target) {
				if (target == '0') {
					uni.navigateTo({
						url: '../goods/gategory'
					})
				} else if (target == '2') {
					uni.navigateTo({
						url: "../goods/addGoods"
					})
				} else if (target == '5') {
					uni.navigateTo({
						url: "/package1/inventory/goodsDelisting"
					})
				} else {
					uni.navigateTo({
						url: "/package1/inventory/goodsDelete"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page,.page1{
		font-size: 28rpx;
	}
	.search {
		width: 100%;
		height: 7%;
		background-color: #fff;
		position: fixed;
		top: 110rpx;
		z-index: 99;
	}

	.title-right {
		width: 100%;
		background: #fff;
		display: flex;
	}

	.title-btn {
		width: 140rpx;
		height: 80rpx;
		color: #fff;
		border-radius: 10px;
		text-align: center;
		line-height: 80rpx;
		margin: 10rpx 0 0 20rpx;
		display: inline-block;
	}

	.title-right-bottom {
		background: linear-gradient(90deg, #60F3FF, #088FEB);
	}

	.content-left {
		width: 170rpx;
		background: #eee;
		height: 100%;
		overflow: scroll;
	}

	.left-box {
		width: 100%;
		height: 90rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 90rpx;
		border-bottom: 1px solid #fff;
	}

	.left-box-hover {
		width: 100%;
		height: 90rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 90rpx;
		border-bottom: 1px solid #fff;
		background-color: #fff;
	}

	.red {
		border-right: 3px solid red;
	}

	.content-right {
		width: 550rpx;
		height: 78%;
		overflow-y: scroll;
	}

	.right-box {
		width: 100%;
		height: 250rpx;
		display: flex;
		border-bottom: 1px solid #eee;
		position: relative;
	}

	.box-left {
		width: 130rpx;
		height: 131rpx;
		background-size: 100%;
		margin: 25rpx 30rpx 35rpx 10rpx;
		border-radius: 20rpx;
		position: relative;
	}

	.box-left img {
		width: 140rpx;
		height: 100%;

	}

	.box-right {
		width: 100%;
		margin-top: 17rpx;
	}

	.box-right-price {
		width: 100%;
		display: flex;
		font-size: 25rpx;
	}

	.price-box {
		width: 25%;
		display: flex;
		flex-direction: column;
		margin-top: 10rpx;
	}

	.box-right-name {
		font-size: 26rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.box-right-num {
		padding: 5rpx 0;
		color: #000;
		font-weight: bold;
		font-size: 30rpx;
	}

	.price-box text:first-child {
		color: #ffa200
	}

	.uni-mt-10 {
		position: relative;
		width: 100% !important;
		float: left !important;
	}

	.uni-searchbar,
	.uni-searchbar__box {
		width: 100% !important;
		padding: 5px 10px !important
	}

	.up-down {
		position: absolute;
		bottom: 10rpx;
		left: 10rpx;
		color: #fff;
		background: #088FEB;
		padding: 10rpx 10rpx;
		border-radius: 5px;
		width: 140rpx;
		text-align: center;
	}

	.noPic {
		border-radius: 10px;
		width: 130rpx;
		height: 130rpx;
		// margin: 30rpx 0 0 30rpx;
		text-align: center;
		line-height: 140rpx;
		color: #777;
		background: #eee;
	}

	.showImg-box {
		width: 700rpx;
		height: 1000rpx;
		border-radius: 10px;
	}

	.swiper-box {
		height: 1000rpx;
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 1000rpx;
		color: #fff;
		background-color: #cee1fd;
		border-radius: 10px;
	}

	.vue-ref {
		padding-bottom: 0 !important;
	}

	@media screen and (min-width: 470px) {

		/* 适配宽度为375px及以上的屏幕 */
		.content-left {
			height: 75% !important;
			float: left;
			position: fixed;
			top: 25% !important;
		}

	}
	@media screen and (min-width: 760px) {
	
		/* 适配宽度为375px及以上的屏幕 */
		.content-left {
			height: 70% !important;
			float: left;
			position: fixed;
			top: 29% !important;
			padding-top:50px;
		}
	
	}
</style>