moxuan_takeaway_shanghu/my/store/addgood.vue

<template>
	<view>
		<view>
			<!-- #ifndef H5 -->
			<view style="position: fixed;top: 0;left: 0;right: 0;z-index: 9999;background: #fff;">
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view style="position: fixed;top: 44px;left: 0;right: 0;z-index: 1;background: #fff;">
					<!-- #endif -->
					<view class="bg padding-lr padding-tb-sm flex align-center">
						<u-search @change="search" v-model="goodsName" placeholder="搜索商品标题 " bg-color="#F7F7F7"
							style="width: 100%;" shape="square" :show-action="false"></u-search>
					</view>
					<view class="flex bg">
						<view v-for="(item,index) in tab" :key="index" class="flex-sub boxIndex"
							:class="tabIndex == index?'tans':''"
							:style="index==1?'text-align:center':(index==2?'text-align:right;margin-right:40rpx':'')"
							style="position: relative;padding-left: 40rpx;" @click="bindindex(index)">
							{{item.name}}
							<view :class="index==0?'tabse':(index==1?'tabse1':'tabse2')" v-show="tabIndex == index">
					
							</view>
						</view>
					</view>
					<scroll-view scroll-x="true" class="flex align-center padding-sm"
						style="height: 100rpx;width: 100%;white-space: nowrap">
						<view v-for="(item,index) in list" :key="index" class="boxs"
							:class="counts == index?'actives':''" @click="bindTabs(index,item)">{{item.classifyName}}
						</view>
					</scroll-view>
				</view>
				<!-- #ifdef H5 -->
				<view style="margin-top: 155px;" v-if="goodsList.length>0">
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<view style="margin-top: 290upx;padding-bottom: 170px;" v-if="goodsList.length>0">
						<!-- #endif -->
						<u-checkbox-group  class="flex justify-center flex-wrap">
						<view class="bg radius" style="width: 686rpx;margin-top: 20rpx;" v-for="(item,index) in goodsList" :key='index'>
							<view class="padding-sm" style="position: relative;">
								<u-checkbox @change="checkboxChange(item)" v-model="item.checkeds">
								</u-checkbox>
								创建时间：{{item.createTime}}
								<span style="position: absolute;right: 20rpx;">
									<u-switch v-model="item.checked" active-color="#17cd8a" inactive-color="#eee" size="40"
										@change="changeKg(index,item)"></u-switch>
								</span>
							</view>
							<view style="width:100%;border-top: 1upx solid #E6E6E6;"></view>
							<view class="flex padding" @click="goDet(item)">
								<view>
									<image :src="item.goodsCover?item.goodsCover:'../../static/logo.png'" class="radius"
										style="width:210upx;height:170upx;"></image>
								</view>
								<view class="margin-left flex flex-direction justify-between">
									<view class="text-lg text-bold">{{item.goodsName}}</view>
									<view class="margin-tb-xs u-line-2" style="color:#999999;">
										{{item.goodsDescribe}}
									</view>
									<view style="width: 414rpx;" class="text-lg flex justify-between align-center">
										<view class="">
											<text class="text-sm">￥</text>{{item.goodsMoney}}
										</view>
										<view style="margin-right: 10rpx;">库存：{{item.inventory?item.inventory:'0'}}</view>
									</view>
								</view>
							</view>
							<view style="width: 686upx;height: 1upx;border: 1upx solid #E6E6E6;margin:0 auto;"></view>
							<view class="flex justify-between padding align-center" >
								<!-- <view>库存：{{item.inventory?item.inventory:'0'}}</view> -->
								<view class="flex align-center justify-end" style="width: 100%;">
									<view @click="goodsSort(item)" class="btn margin-right-sm">排序</view>
									<view @click="goodupdete(item)" class="btn margin-right-sm">删除</view>
									<view @click="deitor(item)" class="btn margin-right-sm">库存</view>
									<view @click="goUpdate(item)" class="btn">修改</view>
								</view>
							</view>
						</view>
						</u-checkbox-group>
					</view>
					<!-- <view class="addguige text-bold" @click="goAdd()">添加商品</view> -->
					<empty v-if="goodsList.length == 0"></empty>
				</view>
				<view class="selectcz flex align-center">
					<u-checkbox @change="checkboxChanges()" style="margin-left: 40rpx;" v-model="checkedz">全选</u-checkbox>
					<view class="addguige text-bold addguigezz" @click="selectczan">操作</view>
					<view class="addguige text-bold addguigezzs" @click="goAdd()">添加商品</view>
				</view>
				<!-- 排序 -->
				<u-popup v-model="shows3" mode="center" border-radius="14" width="500rpx" height="300rpx"
					:closeable="true">
					<view>
						<view class="padding">
							<view>排序</view>
							<view style="margin-top: 20rpx;" class="flex justify-center">
								<u-number-box :input-width="300" :input-height="60" v-model="paixu" :min="0"  placeholder="请填写"></u-number-box>
							</view>
						</view>
						<view class="addguiges" @click="bindclose3()">确定</view>
					</view>
				</u-popup>
				<u-popup v-model="shows" mode="center" border-radius="14" width="500rpx" height="300rpx"
					:closeable="closeable">
					<view>
						<view class="padding">
							<view>添加库存</view>
							<view>
								<u-input v-model="typeperature" placeholder="请填写" type="number" />
							</view>
						</view>
						<view class="addguiges" @click="bindclose()">确定</view>
					</view>
				</u-popup>
				<!-- 批量修改库存 -->
				<u-popup v-model="shows2" mode="center" border-radius="14" width="500rpx" height="300rpx"
					:closeable="true">
					<view>
						<view class="padding">
							<view>修改库存</view>
							<view>
								<u-input v-model="typeperature2" placeholder="请填写" type="number" />
							</view>
						</view>
						<view class="addguiges" @click="bindclose2()">确定</view>
					</view>
				</u-popup>
				<!-- 多选操作菜单 -->
				<u-action-sheet :list="tabIndex==2?lists1:lists" @click="click" v-model="show"></u-action-sheet>
			</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				goodsIds:[],
				shows3:false,
				paixu:0,
				shows2:false,
				typeperature2:'',
				checkedz:false,
				show: false,
				lists: [{
					text: '批量下架'
				}, {
					text: '修改库存'
				}, {
					text: '批量删除'
				}],
				lists1: [{
					text: '批量上架',
				}, {
					text: '修改库存'
				}, {
					text: '批量删除'
				}],
				tab: [{
					name: '出售中',
				}, {
					name: '已售完',
				}, {
					name: '已下架'
				}],
				tabIndex: 0,
				list: [{
					name: '奶茶热饮'
				}, {
					name: '鲜榨果汁'
				}, {
					name: '牛奶系列'
				}, {
					name: '超低折扣'
				}],
				counts: '',
				classifyId: '',
				page: 1,
				limit: 10,
				shopId: '',
				goodsName: '',
				goodsList: [],
				totalCount: 0,
				shows: false,
				typeperature: '',
				goodsId: '',
				checked: false,
				pageList: [],
				closeable: true
			}
		},
		onLoad(option) {
			uni.showLoading({
				title: '加载中......',
				icon: 'loading'
			})

			// this.shopId = option.shopId
			this.shopId = this.$queue.getData("shopId")
			this.getClassifyList()

		},
		onShow() {
			this.getGoodsList()
		},
		methods: {
			// 批量库存
			bindclose2(index){
				if (!this.typeperature2) {
					uni.showToast({
						title: '请填写规格数量',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if(this.typeperature2<0){
					uni.showToast({
						title: '库存数量不得小于0',
						icon: 'none',
						duration: 1000
					})
					return
				}
				let data = {
					goodsIds: this.goodsIds.join(),
					inventory: this.typeperature2
				}
				let that = this
				that.shows2 = false
				uni.showModal({
					title:'提示',
					content:'确认已选中的商品批量修改库存?',
					complete:function(ret){
						if(ret.confirm){
							that.$Request.getA("/admin/goods/updateBatchInventory", data).then(res => {
								if (res.code == 0) {
									that.shows2 = false
									uni.showToast({
										title: '修改成功',
										icon: 'none'
									})
									that.typeperature2 = ''
									that.checkedz = false
									that.goodsIds = []
									that.page = 1
									that.getGoodsList()
								}
							});
						}
					}
				})
				
			},
			bindclose3(){
				let data = {
					sort:this.paixu,
					goodsId:this.goodsId
				}
				this.$Request.getA('/admin/goods/updateSort', data).then(res => {
					if(res.code==0){
						uni.showToast({
							title:'修改成功'
						})
						this.goodsId = ''
						this.shows3 = false
						this.page = 1
						this.getGoodsList();
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			//排序
			goodsSort(item){
				if(item.sort){
					this.paixu = item.sort
				}else{
					this.paixu = 0
				}
				
				this.shows3 = true
				this.goodsId = item.goodsId
			},
			selectczan(){
				if(this.goodsIds.length==0){
					uni.showToast({
						title:'请选择商品后操作',
						icon:'none'
					})
				}else{
					this.show = true
				}
			},
			//全选
			checkboxChanges(){
				this.goodsIds = []
				if(this.checkedz==false){//全选（把总复选框选中并把goodsid赋给数组）
					this.goodsList.map(item=>{
						item.checkeds = true
						this.goodsIds.push(item.goodsId)
					})
					console.log(this.goodsList)
				}else{//全不选
					this.goodsList.map(item=>{
						item.checkeds = false
					})
				}
			},
			//批量操作
			caozuos(url,datas,data){
				let that = this
				uni.showModal({
					title:'提示',
					content:'确认'+data+'已选中的商品?',
					complete:function(ret){
						if(ret.confirm){
							that.$Request.getA(url, datas).then(res => {
								if(res.code==0){
									uni.showToast({
										title:data+'成功'
									})
									that.checkedz=false
									that.goodsIds = []
									that.page = 1
									that.getGoodsList();
								}else{
									uni.showToast({
										title:res.msg,
										icon:'none'
									})
								}
							})
						}
					}
				})
				
			},
			//选择的操作
			click(e) {
				let data = this.lists[e].text
				if(this.tabIndex==2){
					if(data == '批量下架'){
						data = '批量上架'
					}
				}
				switch (data) {
					case '批量下架':
						let datas = {
							goodsIds:this.goodsIds.join(','),
							status:1
						}
						this.caozuos('/admin/goods/updateBatchStatus',datas,data)
						break;
					case '修改库存':
						this.shows2 = true
						break;
					case '批量删除':
						let datas2 = {
							goodsIds:this.goodsIds.join(','),
						}
						this.caozuos('/admin/goods/deleteBatchIds',datas2,data)
						break;
					case '批量上架':
						let datas1 = {
							goodsIds:this.goodsIds.join(','),
							status:0
						}
						this.caozuos('/admin/goods/updateBatchStatus',datas1,data)
						break;
					default:
						break;
				}
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				if(this.goodsIds.indexOf(e.goodsId)==-1){//如果没有选中则把goodsid增加到数组中
					this.goodsIds.push(e.goodsId)
				}else{//如果找到了则把goodsid删除
					this.goodsIds.splice(this.goodsIds.indexOf(e.goodsId),1)
				}
				if(this.goodsIds.length==this.goodsList.length){ //判断是否全部选中
					this.checkedz = true
				}else{
					this.checkedz = false
				}
			},
			//修改商品
			goUpdate(item) {
				uni.navigateTo({
					url: '/my/publish/goods?goodsId=' + item.goodsId
				})
			},
			goAdd() {
				uni.navigateTo({
					url: '/my/publish/goods'
				})
			},
			//搜索
			search() {
				this.getGoodsList()
			},
			bindindex(index) {
				console.log(index)
				uni.showLoading({
					title: '加载中......',
					icon: 'loading'
				})
				this.page = 1
				this.tabIndex = index
				this.getGoodsList()
			},
			getGoodsList() {
				let data = {
					page: this.page,
					limit: this.limit,
					goodsName: this.goodsName,
					// shopId: this.shopId,
					classifyId: this.classifyId,
					shopId: uni.getStorageSync('shopId'),
					status: this.tabIndex == 1 ? 2 : (this.tabIndex == 2 ? 1 : this.tabIndex)
				}
				this.$Request.getA("/admin/goodsShop/selectGoodsByShopId", data).then(res => {
					if (res.code == 0) {
						uni.hideLoading()
						if (res.data.list.length > 0) {
							for (var i in res.data.list) {
								if (res.data.list[i].status == 1) {
									res.data.list[i].checked = false
								} else {
									res.data.list[i].checked = true
								}

							}
							console.log('res.data.list', res.data.list)
							if (this.page == 1) {
								this.goodsList = res.data.list
							} else {
								this.goodsList = [...this.goodsList, ...res.data.list]
							}
							this.totalCount = res.data.totalCount
						} else {
							if (this.page == 1) {
								this.goodsList = []
							} else {
								this.goodsList = this.goodsList
							}

						}

					}
					uni.stopPullDownRefresh();
					uni.hideLoading()
				});
			},
			//删除商品
			goodupdete(e) {
				console.log(e)
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要删除当前商品吗？刪除后无法恢复',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确定", // 确认按钮文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: '#39B54A',
					success: (res) => {
						if (res.confirm) {
							let data = {
								shopId: uni.getStorageSync('shopId'),
								goodsId: e.goodsId,
							}
							that.$Request.postA("/admin/goodsShop/deleteGoodsByShopId", data).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: "删除成功",
										icon: 'none'
									})
									that.page = 1
									that.getGoodsList();
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							});
						} else {

						}
					}
				})

			},
			// 商品类型
			getClassifyList() {
				this.$Request.getA("/admin/goods/selectAllClassify?shopId=" + this.shopId).then(res => {
					if (res.code == 0) {
						let data = [{
							classifyName: '全部',
							classifyId: ''
						}]
						this.list = [...data, ...res.data]
						this.classifyId = this.list[0].classifyId
						this.getGoodsList()
					}
				});
			},
			//库存弹框
			bindclose(index) {
				if (!this.typeperature) {
					uni.showToast({
						title: '请填写规格数量',
						icon: 'none',
						duration: 1000
					})
					return
				}
				let data = {
					shopId: uni.getStorageSync('shopId'),
					goodsId: this.goodsId,
					inventory: this.typeperature
				}
				this.$Request.postJson("/admin/goodsShop/updateGoodsByShopId", data).then(res => {
					if (res.code == 0) {
						this.shows = false
						this.typeperature = ''
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
						this.getGoodsList()
					}
				});
			},
			//编辑库存
			deitor(e) {
				this.shows = true
				this.goodsId = e.goodsId
			},
			add(item) {
				let that = this
				let data = [{
					goodsId: item.goodsId,
					shopId: this.shopId
				}]
				this.$Request.postJsonA("/admin/goodsShop/addGoodsByShopId", data).then(res => {
					if (res.code == 0) {
						this.page = 1
						this.getGoodsList()
						uni.showToast({
							title: '添加成功',
							icon: 'none'
						})
						this.getGoodsList()
					}
				});
			},
			goDet(e) {
				uni.navigateTo({
					url: '/my/store/goodDetail?goodsId=' + e.goodsId + "&shopId=" + this.shopId + '&type=2'
				})
			},
			bindDetail() {
				uni.navigateTo({
					url: './goodDetail'
				})
			},
			bindTabs(index, e) {
				console.log(e)
				uni.showLoading({
					title: '加载中......',
					icon: 'loading'
				})
				this.counts = index
				this.classifyId = e.classifyId
				this.page = 1
				this.getGoodsList()
			},
			bindAddgood() {
				uni.navigateTo({
					url: './addgood'
				})
			},
			// 上下架商品
			changeKg(index, row) {
				console.log(row.status)
				var datas = {}
				datas.goodsId = row.goodsId
				if (row.status == 0) {
					datas.status = 1
				}
				if (row.status == 1) {
					datas.status = 0
				}
				// datas.status = row.status

				this.$Request.postJsonA("/admin/goods/update", datas).then(res => {
					if (res.code == 0) {
						this.page = 1
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
						this.getGoodsList()
					}
				});
			}
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getGoodsList();
			if (this.totalCount == this.goodsList.length) {
				uni.showToast({
					title: '已经到底了~',
					icon: 'none'
				})
			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getGoodsList();
		},

	}
</script>

<style lang="scss" scoped>
	page {
		background: #EDF1F7;
	}
	.selectcz {
		width: 100%;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0upx;
		left: 0;
		right: 0;
		z-index: 9;
	}
	
	.tabse {
		width: 50rpx;
		height: 10rpx;
		background-color: #FCD202;
		position: absolute;
		bottom: 0;
		left: 45%;
		transform: translate(-100%, -100%);
	}
	
	.tabse1 {
		width: 50rpx;
		height: 10rpx;
		background-color: #FCD202;
		position: absolute;
		bottom: 0;
		left: 70%;
		transform: translate(-100%, -100%);
	}
	
	.tabse2 {
		width: 50rpx;
		height: 10rpx;
		background-color: #FCD202;
		position: absolute;
		bottom: 0;
		left: 95%;
		transform: translate(-100%, -100%);
	}
	.bg {
		background: #FFFFFF;
	}

	.boxs {
		width: 150upx;
		height: 55upx;
		border: 2upx solid #CCCCCC;
		border-radius: 28upx;
		text-align: center;
		line-height: 55upx;
		color: #999999;
		margin-right: 30rpx;
		display: inline-block;
	}

	.actives {
		width: 150upx;
		height: 55upx;
		border: 2upx solid #FFCC00;
		border-radius: 28upx;
		text-align: center;
		line-height: 55upx;
		color: #000000;
		margin-right: 30rpx;
	}

	.btn {
		width: 120upx;
		height: 64upx;
		border: 2upx solid #999999;
		border-radius: 8upx;
		text-align: center;
		line-height: 64rpx;
		color: #000000;
	}

	.box {
		width: 131upx;
		height: 45rpx;
		background: #FFEAF0;
		border-radius: 4upx;
		text-align: center;
		line-height: 45rpx;
		font-size: 24upx;
		font-weight: 500;
		color: #FE215B;
	}

	.page-box {
		position: relative;
		// left: 0;
		height: 100vh;
		z-index: 0;
		top: -20px;
	}

	.centre {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		height: 400rpx;
		text-align: center;
		// padding: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 387rpx;
			height: 341rpx;
			// margin-bottom: 20rpx;
			margin: 0 auto 20rpx;
			// border: 1px dotted #000000;
		}

		.tips {
			font-size: 32rpx;
			color: #2F3044;
			margin-top: 20rpx;
			font-weight: 700;
		}

		.btn {
			margin: 80rpx auto;
			width: 600rpx;
			border-radius: 32rpx;
			line-height: 90rpx;
			color: #ffffff;
			font-size: 34rpx;
			background: #5074FF;
		}
	}

	.boxIndex {
		height: 78upx;
		line-height: 78upx;
	}

	.tans {
		background: #fff;
	}
	.addguige {
		width: 38%;
		color: #ffffff;
		text-align: center;
		height: 88upx;
		line-height: 88upx;
	}
	.addguigezz{
		border-radius: 16upx 0 0 0;
		background-color: #999999;
		box-shadow: 0px 10upx 20upx 0px #999999;
	}
	.addguigezzs{
		border-radius: 0 16upx 0 0;
		background: #FCD202;
		box-shadow: 0px 10upx 20upx 0px #FCD202;
	}
	.addguiges {
		width: 90%;
		margin: 0 auto;
		background: #FCD202;
		box-shadow: 0px 10upx 20upx 0px #FFD9B3;
		border-radius: 16upx;
		text-align: center;
		height: 88upx;
		line-height: 88upx;
		/* position: fixed;
		bottom: 25upx;
		left: 0;
		right: 0; */

	}
</style>