guosen-ldt-shop/pagesGoods/pages/menu/menu.vue

<template>
	<view class="u-wrap ">
		<u-navbar :is-back="false" title="菜单管理"></u-navbar>
		<view class="flex bg-white" style="padding: 30rpx 10rpx;">
			<view class="" style="width: 20%;">
				<u-button @click="operateCategory(null)" size="mini" type="warning" plain
					class=" text-sm text-red flex text-bold">
					<text>添加分类</text>
					<text class="cuIcon-add u-m-l-4 center"></text>
				</u-button>
			</view>

			<view v-if="$isNotEmpty(goodsList[current])" @click="operateGoods(null)" class="center bg-white flex"
				style="width: 80%;color: #007AFF;">
				<text class="cuIcon-roundadd margin-right-10"></text>
				<view class="">
					<text>添加</text>
					<text
						v-if="goodsList[current].goodsCategory.name">【{{goodsList[current].goodsCategory.name}}】</text>
					<text>分类下商品</text>
				</view>
			</view>
		</view>
		<view class="u-menu-wrap">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
				<view v-for="(item,index) in goodsList" :key="index" class="u-tab-item"
					:class="[current==index ? 'u-tab-item-active' : '']" :data-current="index"
					@tap.stop="swichMenu(index)">
					<view class="">
						<text class="u-line-1 u-m-r-4"
							:style="!item.goodsCategory.showStatus?'text-decoration: line-through;color: #bababa':''">{{item.goodsCategory.name}}</text>
						<u-icon color="#EF9944" @click="operateCategory(item.goodsCategory)" name="edit-pen-fill">
						</u-icon>
					</view>
				</view>
			</scroll-view>
			<block v-for="(item,index) in goodsList" :key="index">
				<scroll-view scroll-y class="right-box" v-if="current==index">
					<view class="page-view">
						<view class="class-item">
							<view class="item-title">
								<text>{{item.goodsCategory.name}}</text>
							</view>
							<view class="item-container">
								<view class="thumb-box" v-for="(goods, index1) in item.goods" :key="index1">
									<image @click="$util.preview(goods.image)" class="item-menu-image"
										:src="goods.image" mode=""></image>
									<view class="item-content">
										<view class="name flex justify-between ">
											<view class="text-cut-1 " style="width: 75%;">
												<text>{{goods.name}}</text>
											</view>
											<view class="text-red text-sm" @click="operateGoods(goods)">
												<text>编辑</text>
												<text class="cuIcon-edit u-m-l-2"></text>
											</view>
										</view>
										<view class="tips">
											<view class="text-cut-1 " style="width: 75%;">
												{{ goods.description}}
											</view>

											<view class="text-blue text-sm" @click="operateSku(goods)">
												<text>规格</text>
												<text class="cuIcon-goods u-m-l-2"></text>
											</view>
										</view>
										<view class="price_and_action">
											<text class="price">￥{{ goods.defaultPrice / 100 }}</text>
											<text v-if="!goods.isSell"
												class="margin-left-20 text-sm text-red">已下架</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</block>
		</view>


		<!-- 分类 -->
		<u-popup borderRadius="12" v-model="categoryShow" mode="center" width="80%" :closeable="true">
			<view class="center padding-30 flex-direction">
				<text class="text-center  text-lg" v-text="categoryEdit?'修改分类':'添加分类'"></text>
				<view class="margin-top-30">
					<u-form :model="categoryForm" ref="uForm" label-width="140">
						<u-form-item label="分类名称">
							<u-input :clearable="false" v-model="categoryForm.name" />
						</u-form-item>
						<u-form-item label="显示顺序">
							<u-number-box v-model="categoryForm.displayOrder" :min="1" :max="100"></u-number-box>
						</u-form-item>
						<u-form-item label="是否显示">
							<view class="center" style="justify-content: flex-start;">
								<u-switch active-color="#FF9447" v-model="categoryForm.showStatus" active-value="1"
									inactive-value="0"></u-switch>
							</view>
						</u-form-item>
					</u-form>
				</view>
				<view class="center " style="margin-top: 60rpx;width: 100%;justify-content: space-around;">
					<block v-if="categoryEdit">
						<view @click="deleteCategory" class="cu-btn  flex  text-lg line-red radius"
							style="padding: 40rpx 0;width: 46%;">
							删除
						</view>
						<view @click="submitCategory" class="cu-btn  flex  text-lg bg-base radius"
							style="padding: 40rpx 0;width: 46%;">
							确认
						</view>
					</block>
					<view v-else @click="submitCategory" class="cu-btn  flex  text-lg bg-base radius"
						style="padding: 40rpx 0;width: 90%;">
						确认
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 商品 -->
		<u-popup borderRadius="12" v-model="goodsShow" mode="center" width="90%" :closeable="true" close-icon-pos="top-left">
			<view class="bg-white center  flex-direction" style="padding: 30rpx 20rpx;">
				<text class="text-center text-bold text-lg" v-text="goodsEdit?'修改商品':'添加商品'"></text>
				<view class="margin-top-10">
					<u-form :error-type="['toast']" :model="goodsForm" ref="uGoodsForm" label-width="160">
						<u-form-item prop="image" :required="true" label="商品图片" label-position="top">
							<view class="" style="margin-top: -40rpx;margin-bottom: -20rpx;">
								<mp-upload-img ref="mpUploadImg" @delImg="delGoodsImg" @click='uploadGoodsImg'
									:count="1" col="3"></mp-upload-img>
							</view>
						</u-form-item>
						<u-form-item :required="true" label="所属分类">
							<u-input :clearable="false" disabled placeholder-style="color:#d8d8d8"
								v-model="goodsForm.goodsCategoryName" />
						</u-form-item>
						<u-form-item :required="true" label="商品名称" prop="name">
							<u-input :clearable="false" placeholder-style="color:#d8d8d8" v-model="goodsForm.name" />
						</u-form-item>
						<u-form-item :required="true" label="商品单价">
							<u-input :clearable="false" placeholder-style="color:#d8d8d8" v-model="price" />
							<text slot="right">元</text>
						</u-form-item>
						<u-form-item label="显示顺序">
							<u-number-box v-model="goodsForm.displayOrder" ::min="1" :max="100"></u-number-box>
						</u-form-item>
						<u-form-item label="是否在卖">
							<view class="center" style="justify-content: flex-start;">
								<u-switch active-color="#FF9447" v-model="goodsForm.isSell" active-value="1"
									inactive-value="0"></u-switch>
							</view>
						</u-form-item>
						<u-form-item label="商品描述">
							<u-input :clearable="false" placeholder-style="color:#d8d8d8"
								v-model="goodsForm.description" placeholder="请输入商品描述" />
						</u-form-item>
					</u-form>
				</view>

				<view class="center " style="margin-top: 60rpx;width: 100%;justify-content: space-around;">
					<block v-if="goodsEdit">
						<view @click="deleteGoods" class="cu-btn  flex  text-lg line-red radius"
							style="padding: 40rpx 0;width: 46%;">
							删除
						</view>
						<view @click="submitGoods" class="cu-btn  flex  text-lg bg-base radius"
							style="padding: 40rpx 0;width: 46%;">
							确认
						</view>
					</block>
					<view v-else @click="submitGoods" class="cu-btn  flex  text-lg bg-base radius"
						style="padding: 40rpx 0;width: 90%;">
						确认
					</view>
				</view>
			</view>
		</u-popup>

		<toast ref="toast"></toast>

		<u-tabbar :height="tabbar.height" @change="tabChange" v-model="tabbarCurr" :icon-size="tabbar.iconSize"
			:active-color="tabbar.activeColor" :mid-button-size="tabbar.MinButtonSize" :list="tabbar.list">
		</u-tabbar>
	</view>
</template>

<script>
	import {
		tabbar
	} from "../../assert/js/tarbar.js"
	import mpUploadImg from "@/components/mp-uploadImg/mp-uploadImg.vue"
	export default {
		components: {
			mpUploadImg
		},
		data() {
			return {
				//tabbar
				tabbarCurr: 0,
				tabbar: tabbar,

				goodsList: [],

				//分类
				operateCategoryItem: {},
				categoryEdit: false,
				categoryShow: false,
				categoryForm: {
					id: '',
					shopId: '',
					name: '',
					displayOrder: 10,
					//是否显示
					showStatus: 1,
				},
				//商品 begin
				imgList: [],
				price: 0,
				operateGoodsItem: {},
				goodsEdit: false,
				goodsShow: false,
				goodsForm: {
					id: '',
					shopId: '',
					goodsCategoryName: '',
					name: '',
					displayOrder: 10,
					defaultPrice: 0,
					isSell: 1,
					image: '',
					description: null
				},
				goodsRules: {
					image: [{
						required: true,
						message: '请上传商品图片',
						trigger: ['blur', 'change']
					}],
					name: [{
						required: true,
						message: '请输入商品名称',
						trigger: ['blur', 'change']
					}],
				},
				//商品 end


				// 菜单
				scrollTop: 0, //tab标题的滚动条位置
				current: 0, // 预设当前项的值
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
			}
		},
		onLoad() {
			this.getGoodsList()
		},
		onReady() {
			this.$refs.uGoodsForm.setRules(this.goodsRules);
		},
		methods: {
			tabChange(index){
				if (index==1) {
					uni.redirectTo({
						url:"/pagesGoods/pages/order/order"
					})
				}else if (index==2) {
					uni.redirectTo({
						url:"/pagesGoods/pages/my-shop/my-shop"
					})
				}
			},
			getGoodsList() {
				let params = {
					shopId: this.vuex_shopId
				}
				this.$api.goods.list(params).then(res => {
					this.goodsList = res.data
				})
			},
			//分类 begin
			operateCategory(item) {
				this.operateCategoryItem = item
				this.categoryShow = true
				if (this.$isEmpty(item)) {
					//添加分类
					this.reSetCategoryForm()
					this.categoryEdit = false
					return
				}
				//修改分类
				this.categoryEdit = true
				this.$util.objectCopy(this.categoryForm, item)
			},
			async submitCategory() {
				if (this.$isEmpty(this.categoryForm.name)) {
					this.$u.toast('请输入类目名称！')
					return
				}

				if (!this.categoryEdit) {
					let flag = this.goodsList.some(item => item.goodsCategory.name == this.categoryForm.name)
					if (flag) {
						this.$u.toast('已有该名称的类目！')
						return
					}
				}

				this.categoryForm.shopId = this.vuex_shopId
				let res = await this.$api.goodsCategory.submit(this.categoryForm)
				if (res.success) {
					this.$u.toast('操作成功')
					this.getGoodsList()
					this.categoryShow = false
				}
			},
			deleteCategory() {
				this.$dialog.showModal('确定删除该分类？').then(() => {
					this.$api.goodsCategory.remove(this.operateCategoryItem.id).then(res => {
						if (res.success) {
							this.$u.toast('删除成功')
							this.reloadGoods()
							this.current = 0
							this.categoryShow = false
							this.getGoodsList()
						}
					})
				})
			},
			reSetCategoryForm() {
				this.categoryForm = {
					id: '',
					shopId: '',
					name: '',
					displayOrder: 1,
					//是否显示
					showStatus: 1,
				}
			},
			//分类 end

			//商品begin
			reloadGoods(){
				let params={
					shopId:this.vuex_shopId
				}
				this.$api.goods.reload(params)
			},
			uploadGoodsImg(e) {
				this.goodsForm.image = e[0]
			},
			operateGoods(item) {
				this.goodsForm.goodsCategoryName = this.goodsList[this.current].goodsCategory.name
				this.operateGoodsItem = item
				this.goodsShow = true
				if (this.$isEmpty(item)) {
					//添加商品
					this.reSetGoodsData()
					this.goodsEdit = false
					return
				}
				//修改商品
				this.price = item.defaultPrice / 100
				this.imgList = [item.image]
				this.$refs.mpUploadImg.changeImgList(this.imgList)

				this.goodsEdit = true
				this.$util.objectCopy(this.goodsForm, item)
			},
			delGoodsImg(item) {
				this.imgList = item[0]
				this.goodsForm.image = this.imgList
			},
			reSetGoodsData() {
				this.price = 0
				this.imgList = []
				this.$refs.mpUploadImg.changeImgList(this.imgList)
				let goodsCategoryName = this.goodsForm.goodsCategoryName
				this.goodsForm = {
					id: '',
					shopId: '',
					goodsCategoryName,
					name: '',
					displayOrder: 1,
					defaultPrice: 0,
					isSell: 1,
					image: '',
					description: null
				}
			},
			submitGoods() {
				this.$refs.uGoodsForm.validate(valid => {
					if (valid) {
						this.goodsForm.defaultPrice = this.price * 100
						if (this.$isEmpty(this.goodsForm.defaultPrice)) {
							this.$u.toast('请输入商品单价')
							return
						}
						this.doSubmitGoods()

					} else {
						console.log('验证失败');
					}
				});
			},
			async doSubmitGoods() {
				this.goodsForm.shopId = this.vuex_shopId
				let res = await this.$api.goods.submit(this.goodsForm)
				if (res.success) {
					this.$u.toast('操作成功')
					this.getGoodsList()
					this.goodsShow = false
				}
			},
			deleteGoods() {
				this.$dialog.showModal('确定删除该商品？').then(() => {
					this.$api.goods.remove(this.operateGoodsItem.id).then(res => {
						if (res.success) {
							this.$u.toast('删除成功')
							this.reloadGoods()
							this.goodsShow = false
							this.getGoodsList()
						}
					})
				})
			},
			//商品end

			//商品属性begin
			operateSku(goods) {
				let params = {
					price:goods.defaultPrice,
					goodsName: goods.name,
					goodsId: goods.id
				}
				uni.navigateTo({
					url: "/pagesGoods/pages/menu/sku" + this.$u.queryParams(params),
				})
			},

			//商品属性end
			





















			//菜单 begin
			// 点击左边的栏目切换
			async swichMenu(index) {
				if (index == this.current) return;
				this.current = index;
				// 如果为0，意味着尚未初始化
				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				// 将菜单菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
			},
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + elClass).fields({
						size: true
					}, res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if (!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return;
						}
						this[dataVal] = res.height;
					}).exec();
				})
			}
			// 菜单end
		}
	}
</script>

<style lang="scss" scoped>
	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.u-tab-view {
		width: 200rpx;
		height: 100%;
	}

	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}

	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}

	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid $u-type-primary;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}

	.u-tab-view {
		height: 100%;
	}

	.right-box {
		background-color: rgb(250, 250, 250);
	}

	.page-view {
		padding: 16rpx;
	}

	.class-item {
		margin-bottom: 30rpx;
		background-color: #fff;
		padding: 16rpx;
		border-radius: 8rpx;
	}

	.item-title {
		font-size: 26rpx;
		color: $u-main-color;
		font-weight: bold;
	}

	.item-container {
		display: flex;
		flex-wrap: wrap;

		.thumb-box {
			width: 100%;
			display: flex;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #EEEEEE;

			.item-menu-image {
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
				border-radius: 8rpx;
			}

			.item-content {
				width: calc(100% - 180rpx);
			}


			.name {
				font-size: $font-size-base;
				margin-bottom: 10rpx;
			}

			.tips {
				width: 100%;
				height: 40rpx;
				display: flex;
				justify-content: space-between;
				line-height: 40rpx;
				white-space: nowrap;
				font-size: $font-size-sm;
				color: $text-color-assist;
				margin-bottom: 10rpx;
			}

			.price_and_action {
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 30rpx;

				.price {
					font-size: $font-size-base;
					font-weight: 600;
				}

				.btn-group {
					display: flex;
					justify-content: space-between;
					align-items: center;
					position: relative;

					.btn {
						background-color: $base-color;
						padding: 0 20rpx;
						box-sizing: border-box;
						font-size: $font-size-sm;
						height: 44rpx;
						line-height: 44rpx;

						&.property_btn {
							border-radius: 24rpx;
						}

						&.add_btn,
						&.reduce_btn {
							color: #FFFFFF;
							border: $base-color;
							padding: 0;
							width: 44rpx;
							border-radius: 44rpx;
						}
					}

					.dot {
						position: absolute;
						background-color: #ffffff;
						border: 1px solid $color-primary;
						color: $color-primary;
						font-size: $font-size-sm;
						width: 36rpx;
						height: 36rpx;
						line-height: 36rpx;
						text-align: center;
						border-radius: 100%;
						right: -12rpx;
						top: -10rpx;
					}

					.number {
						width: 44rpx;
						height: 44rpx;
						line-height: 44rpx;
						text-align: center;
					}
				}
			}
		}

		.thumb-box:last-child {
			border: none;
		}
	}
</style>