添加商品关联分组

pages/product/creatProduct.vue

@@ -4,7 +4,7 @@
 		<view class="head">
 			<span class="cuIcon-back" @click="back"></span>
 			<view class="case">
-				{{productId?'编辑商品':'创建商品' }}
+				{{ productId ? '编辑商品' : '创建商品' }}
 			</view>
 		</view>
 		<view class="content">
@@ -22,12 +22,28 @@
 						<u-icon name="arrow-right"></u-icon>
 					</view>
 				</view>
+				<!-- <u-form-item label="车辆类型" prop="categoryName" borderBottom required
+						@click="showcategory = true">
+						<u--input v-model="userInfo.categoryName" disabled disabledColor="#ffffff" placeholder="请选择车辆类型"
+							border="none"></u--input>
+						<u-icon slot="right" name="arrow-right"></u-icon>
+					</u-form-item> -->
+				<view class="item">
+					<view class="label">
+						商品分组<span>*</span>
+					</view>
+					<view class="picker" @click="showGroupPicker = true">
+						<span v-if="form.groupingName == ''">选择商品分组</span>
+						<span v-else style="color: #333333;">{{ form.groupingName }}</span>
+						<u-icon name="arrow-right"></u-icon>
+					</view>
+				</view>
 				<view class="item">
 					<view class="label">
 						商品名称<span>*</span>
 					</view>
 					<view class="picker">
-						<u-input :disabled="tabIndex==1" v-model="form.productName" placeholder="输入商品名称" />
+						<u-input :disabled="tabIndex == 1" v-model="form.productName" placeholder="输入商品名称" />
 					</view>
 				</view>
 				<view class="item upload">
@@ -37,22 +53,22 @@
 					<view class="tips">
 						支持jpg、png格式
 					</view>
-					<view v-if="tabIndex==1">
-						<image v-for="(val,index) in fmImageList" :key="index" :src="val.url" mode=""
+					<view v-if="tabIndex == 1">
+						<image v-for="(val, index) in fmImageList" :key="index" :src="val.url" mode=""
 							style="width: 140rpx;height:140rpx;border-radius: 4px; border: 1px solid #ebecee;margin-right:20rpx;margin-bottom:10rpx">
 						</image>
 					</view>
 					<u-upload v-else ref="uUpload" :action="action" :file-list="fmImageList" @on-success="handleSuccess"
-						@on-remove=" handleRemove" max-count="1" width="140rpx" height="140rpx"></u-upload>
+						@on-remove="handleRemove" max-count="1" width="140rpx" height="140rpx"></u-upload>
 				</view>
 				<view class="item upload">
 					<view class="label">
-						商品详情图<span v-if="tabIndex=='0'">*</span>
+						商品详情图<span v-if="tabIndex == '0'">*</span>
 					</view>
 					<view class="tips">
 						支持jpg、png格式，最多20张
 					</view>
-					<view v-if="tabIndex==1">
+					<view v-if="tabIndex == 1">
 						<view v-html="form.richText"></view>
 					</view>
 					<u-upload v-else ref="dUpload" :action="action" :file-list="xqImage" @on-success="detailsSuccess"
@@ -63,7 +79,7 @@
 						原价<span>*</span>
 					</view>
 					<view class="picker">
-						<u-input :disabled="tabIndex==1" v-model="form.price" placeholder="输入商品原价" />
+						<u-input :disabled="tabIndex == 1" v-model="form.price" placeholder="输入商品原价" />
 					</view>
 					<view class="unit">
 						元
@@ -74,7 +90,7 @@
 						实际售价<span>*</span>
 					</view>
 					<view class="picker">
-						<u-input type="num" :disabled="form.isUpdatePrice==0" v-model="form.soldPrice" placeholder="输入客户实际支付价" />
+						<u-input type="num" :disabled="form.isUpdatePrice == 0" v-model="form.soldPrice" placeholder="输入客户实际支付价" />
 					</view>
 					<view class="unit">
 						元
@@ -107,7 +123,7 @@
 						</view>
 					</view>
 					<view class="spray_items">
-						<view class="spra" v-for="(item,index) in form.specItems" :key="item.craftId">
+						<view class="spra" v-for="(item, index) in form.specItems" :key="item.craftId">
 							<view class="square" @click="select(item)">
 								<image src="/static/product/square_select.png" mode="" v-if="item.replaced == true"></image>
 								<image src="/static/product/square.png" mode="" v-else></image>
@@ -115,7 +131,7 @@
 							<view class="right">
 								<view class="name">
 									<!-- {{item.craftId}} -->
-									{{item.partName}} {{item.positionName}} {{item.craftName}}
+									{{ item.partName }} {{ item.positionName }} {{ item.craftName }}
 								</view>
 								<view class="price">
 									<view class="option">原价<input v-model="item.price" placeholder="输入商品原价" style="height: 49rpx;" />
@@ -139,14 +155,14 @@
 							金豆奖励
 						</view>
 						<view class="picker set">
-							<u-switch v-model="jindouChecked" :disabled="tabIndex==1" style="margin-left:8rpx;" size="28"
-								@change="e=>e==false?form.goldAward='':''"></u-switch>
+							<u-switch v-model="jindouChecked" :disabled="tabIndex == 1" style="margin-left:8rpx;" size="28"
+								@change="e => e == false ? form.goldAward = '' : ''"></u-switch>
 						</view>
 					</view>
 					<view style="border:none;" v-if="jindouChecked">
 						<view class="exchange-input">
 							<input type="digit" v-model.number="form.goldAward"
-								@input="e => form.goldAward = e.detail.value? e.detail.value.replace(/[^\d]/g, ''):''"
+								@input="e => form.goldAward = e.detail.value ? e.detail.value.replace(/[^\d]/g, '') : ''"
 								placeholder="请输入金豆奖励数量" placeholder-class="input-placeholder" />
 							<text class="exchange-all">个金豆</text>
 						</view>
@@ -156,14 +172,14 @@
 							积分奖励
 						</view>
 						<view class="picker set">
-							<u-switch v-model="jifenChecked" :disabled="tabIndex==1" style="margin-left:8rpx;" size="28"
-								@change="e=>e==false?form.integralAward='':''"></u-switch>
+							<u-switch v-model="jifenChecked" :disabled="tabIndex == 1" style="margin-left:8rpx;" size="28"
+								@change="e => e == false ? form.integralAward = '' : ''"></u-switch>
 						</view>
 					</view>
 					<view style="border:none;" v-if="jifenChecked">
 						<view class="exchange-input">
 							<input type="digit" v-model.number="form.integralAward"
-								@input="e => form.integralAward = e.detail.value? e.detail.value.replace(/[^\d]/g, ''):''"
+								@input="e => form.integralAward = e.detail.value ? e.detail.value.replace(/[^\d]/g, '') : ''"
 								placeholder="请输入积分奖励数量" placeholder-class="input-placeholder" />
 							<text class="exchange-all">个积分</text>
 						</view>
@@ -178,7 +194,7 @@
 							售卖时间<span>*</span>
 						</view>
 						<view class="picker set inp" @click="selectDate">
-							<u-input :disabled="tabIndex==1" placeholder="去设置" v-model="showDate" @click="selectDate" />
+							<u-input :disabled="tabIndex == 1" placeholder="去设置" v-model="showDate" @click="selectDate" />
 							<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
 						</view>
 					</view>
@@ -210,14 +226,14 @@
 							需要预约<span>*</span>
 						</view>
 						<view class="picker set">
-							<u-switch v-model="makeChecked" :disabled="tabIndex==1" style="margin-left:8rpx;" size="28"></u-switch>
+							<u-switch v-model="makeChecked" :disabled="tabIndex == 1" style="margin-left:8rpx;" size="28"></u-switch>
 						</view>
 					</view>
 					<view class="item">
 						<view class="label">
 							退款规则<span>*</span>
 						</view>
-						<view class="picker set" @click="tabIndex==0?isRefund = true:''">
+						<view class="picker set" @click="tabIndex == 0 ? isRefund = true : ''">
 							<view class="" v-if="showRule" style="color: #333333;">
 								{{ showRule }}
 							</view>
@@ -232,12 +248,12 @@
 							使用说明
 						</view>
 						<view class="textarea">
-							<u-input v-model="form.instructions" :disabled="tabIndex==1" type="textarea" placeholder="请输入"
+							<u-input v-model="form.instructions" :disabled="tabIndex == 1" type="textarea" placeholder="请输入"
 								maxlength="500" />
 						</view>
 						<view class="num">
-							<span
-								v-if="form.instructions">{{ form.instructions.length > 0 ? form.instructions.length : '0' }}</span>/500
+							<span v-if="form.instructions">{{ form.instructions.length > 0 ? form.instructions.length : '0'
+							}}</span>/500
 						</view>
 					</view>
 				</view>
@@ -256,7 +272,7 @@
 				</view>
 			</view>
 		</view>
-		<rangTime ref="rangTime" :mode="mode" @onSubmit="onEndTimeChange" :title="timeTitle"/>
+		<rangTime ref="rangTime" :mode="mode" @onSubmit="onEndTimeChange" :title="timeTitle" />
 		<refund v-show="isRefund" :Confirm="form.refundConfirm" :Label="form.refundLabel" @confirm="saveFound"
 			@close="cutRule" />
 		<view class="popup" v-if="isSelectType">
@@ -292,915 +308,945 @@
 				</view>
 			</view>
 		</view>
+		<!-- 商品分组 -->
+		<u-select v-model="showGroupPicker" mode="single-column" label-name="name" value-name="id" :list="groupOptions"
+			@confirm="groupConfirm($event)" @cancel="showGroupPicker = false"></u-select>
 	</view>
 </template>
 
 <script>
-	import rangTime from '../../components/dengrq-datetime-picker/dateSelector/index.vue'
-	import refund from '@/components/product/refund.vue'
-
-	import configService from '../../common/service/config.service'
-	import {
-		nextTick
-	} from "vue"
-	export default {
-		components: {
-			rangTime,
-			refund
-		},
-		data() {
-			return {
-				tabIndex: '0',
-				mode: 1,
-				form: {
-					instructions: '',
-					preBook: 0,
-					merchantId: null
-					// categoryId:'',
-					// productName: '',
-					// productImage: '',
-					// checked: null,
-					// num: 0,
-					// refundLabel:null,
-					// refundConfirm:null
-				},
-				fmImageList: [], //封面图回显
-				xqImage: [], //详情图回显
-				showRule: '', //显示退款规则文字
-				action: configService.apiUrl + '/sys/common/upload', //图片上传地址
-				// action: 'http://192.168.0.36:8080/jeecg-boot/sys/common/upload', //图片上传地址
-				schedule: 1, //进度
-				fileList: [],
-				selectedTime: null,
-				isSelectDate: false,
-				isRefund: false,
-				isSelectType: false,
-				treeLeft: [], //一级列表
-				treeCenter: [], //二级列表
-				treeRight: [], //三级列表
-				currentLeft: 0, //一级选中
-				currentCenter: 0, //二级选中
-				currentRight: 0, //三级选中
-				productType: [], //选中的商品分类id
-				selectTypeList: [], //选中的商品分类名称
-				showText: '',
-				showDate: '',
-				showSellDate: '',
-				makeChecked: false,
-				// imageHttp: 'http://192.168.0.36:8080/jeecg-boot/', //上传图片前缀+
-				imageHttp: configService.apiUrl + '/', //上传图片前缀+
-				productId: '',
-				jindouChecked: false,
-				jifenChecked: false,
-				selectVaule: 0, //钣金喷漆选择
-				all: false, //是否全选
-				reverse: false, //是否反选
-				selectProductSunItem:[],
-				timeTitle:'选择售卖时间'
-			}
-		},
-		methods: {
-			//全选
-			allSelect() {
-				this.all = true
-				this.reverse = false
-				this.form.specItems.forEach(item => {
-					item.replaced = true
-				})
-			},
-			//反选
-			reverseSelsct() {
-				this.reverse = true
-				this.all = false
-				this.form.specItems.forEach(item => {
-					item.replaced = !item.replaced
-				})
+import rangTime from '../../components/dengrq-datetime-picker/dateSelector/index.vue'
+import refund from '@/components/product/refund.vue'
+
+import configService from '../../common/service/config.service'
+import {
+	nextTick
+} from "vue"
+export default {
+	components: {
+		rangTime,
+		refund
+	},
+	data() {
+		return {
+			tabIndex: '0',
+			mode: 1,
+			form: {
+				instructions: '',
+				preBook: 0,
+				merchantId: null,
+				groupingId: '',
+				groupingName: '',
+				// categoryId:'',
+				// productName: '',
+				// productImage: '',
+				// checked: null,
+				// num: 0,
+				// refundLabel:null,
+				// refundConfirm:null
 			},
-			//选中
-			select(item) {
+			fmImageList: [], //封面图回显
+			xqImage: [], //详情图回显
+			showRule: '', //显示退款规则文字
+			action: configService.apiUrl + '/sys/common/upload', //图片上传地址
+			// action: 'http://192.168.0.36:8080/jeecg-boot/sys/common/upload', //图片上传地址
+			schedule: 1, //进度
+			fileList: [],
+			selectedTime: null,
+			isSelectDate: false,
+			isRefund: false,
+			isSelectType: false,
+			treeLeft: [], //一级列表
+			treeCenter: [], //二级列表
+			treeRight: [], //三级列表
+			currentLeft: 0, //一级选中
+			currentCenter: 0, //二级选中
+			currentRight: 0, //三级选中
+			productType: [], //选中的商品分类id
+			selectTypeList: [], //选中的商品分类名称
+			showText: '',
+			showDate: '',
+			showSellDate: '',
+			makeChecked: false,
+			// imageHttp: 'http://192.168.0.36:8080/jeecg-boot/', //上传图片前缀+
+			imageHttp: configService.apiUrl + '/', //上传图片前缀+
+			productId: '',
+			jindouChecked: false,
+			jifenChecked: false,
+			selectVaule: 0, //钣金喷漆选择
+			all: false, //是否全选
+			reverse: false, //是否反选
+			selectProductSunItem: [],
+			timeTitle: '选择售卖时间',
+			// 商品分组列表
+			showGroupPicker: false,
+			groupOptions: []
+		}
+	},
+	methods: {
+		//全选
+		allSelect() {
+			this.all = true
+			this.reverse = false
+			this.form.specItems.forEach(item => {
+				item.replaced = true
+			})
+		},
+		//反选
+		reverseSelsct() {
+			this.reverse = true
+			this.all = false
+			this.form.specItems.forEach(item => {
 				item.replaced = !item.replaced
-				// const index = this.form.specItems.findIndex(i => i.id === item.id);
-				// if (index !== -1) {
-				// 	this.form.specItems.splice(index, 1, {
-				// 		...item,
-				// 		replaced: !item.replaced
-				// 	});
-				// }
-			},
+			})
+		},
+		//选中
+		select(item) {
+			item.replaced = !item.replaced
+			// const index = this.form.specItems.findIndex(i => i.id === item.id);
+			// if (index !== -1) {
+			// 	this.form.specItems.splice(index, 1, {
+			// 		...item,
+			// 		replaced: !item.replaced
+			// 	});
+			// }
+		},
 
-			// 上传封面图成功回调
-			handleSuccess(res, index, lists) {
-				this.form.productImage = this.imageHttp + res.message
+		// 上传封面图成功回调
+		handleSuccess(res, index, lists) {
+			this.form.productImage = this.imageHttp + res.message
 
-			},
-			// 移除封面图文件回调
-			handleRemove(index, lists) {
-				this.fmImageList = [];
-			},
-			//上传详情图
-			detailsSuccess(res, index, lists) {
-				console.log(lists)
-				this.processImageList(lists);
-				this.xqImage = lists
-			},
-			detailsRemove(index, lists) {
-				this.xqImage = lists
-				this.processImageList(lists);
-			},
-			// 处理图片列表，生成URL字符串
-			processImageList(lists) {
-				let temp = [];
-				lists.forEach(item => {
-					if (item.response && item.response.message) {
-						temp.push(this.imageHttp + item.response.message);
-					} else if (item.url) {
-						// 处理已存在的图片
-						temp.push(item.url);
+		},
+		// 移除封面图文件回调
+		handleRemove(index, lists) {
+			this.fmImageList = [];
+		},
+		//上传详情图
+		detailsSuccess(res, index, lists) {
+			console.log(lists)
+			this.processImageList(lists);
+			this.xqImage = lists
+		},
+		detailsRemove(index, lists) {
+			this.xqImage = lists
+			this.processImageList(lists);
+		},
+		// 处理图片列表，生成URL字符串
+		processImageList(lists) {
+			let temp = [];
+			lists.forEach(item => {
+				if (item.response && item.response.message) {
+					temp.push(this.imageHttp + item.response.message);
+				} else if (item.url) {
+					// 处理已存在的图片
+					temp.push(item.url);
+				}
+			});
+			this.form.detailImages = temp.join(',');
+			console.log('当前图片URL字符串:', this.form.detailImages);
+		},
+		//下一步
+		next() {
+			let temp = []
+			if (this.form.specItems) {
+				this.form.specItems.forEach(item => {
+					// item.replaced = true
+					if (item.replaced) {
+						this.selectProductSunItem.push(item)
 					}
+				})
+				// this.form.specItems = temp
+			}
+
+			//基础信息必填提示
+			if (!this.form.categoryId) {
+				uni.showToast({
+					title: '请选择商品分类',
+					icon: 'none'
 				});
-				this.form.detailImages = temp.join(',');
-				console.log('当前图片URL字符串:', this.form.detailImages);
-			},
-			//下一步
-			next() {
-				let temp = []
-				if(this.form.specItems){
-					this.form.specItems.forEach(item => {
-						// item.replaced = true
-						if(item.replaced){
-							this.selectProductSunItem.push(item)
-						}
-					})
-					// this.form.specItems = temp
-				}
-				
-				//基础信息必填提示
-				if (!this.form.categoryId) {
-					uni.showToast({
-						title: '请选择商品分类',
-						icon: 'none'
-					});
-					return
-				}
-				if (!this.form.productName) {
-					uni.showToast({
-						title: '请输入商品名称',
-						icon: 'none'
-					});
-					return
-				}
-				if (!this.form.productImage) {
-					uni.showToast({
-						title: '请上传商品封面图',
-						icon: 'none'
-					});
-					return
-				}
-				if (this.tabIndex == '0' && !this.form.detailImages) {
-					uni.showToast({
-						title: '请上传商品详情图',
-						icon: 'none'
-					});
-					return
-				}
-				if (!this.form.price && !this.form.categoryId == '1945013773786701826') {
-					uni.showToast({
-						title: '请输入商品原价',
-						icon: 'none'
-					});
-					return
-				}
-				if (!this.form.soldPrice && !this.form.categoryId == '1945013773786701826') {
-					uni.showToast({
-						title: '请输入商品售价',
-						icon: 'none'
-					});
-					return
-				} else if (this.form.categoryId == '1945013773786701826' && this.selectProductSunItem.length ==0) {
-					uni.showToast({
-						title: '请选择最少一个配置',
-						icon: 'none'
-					});
-				} else {
-					this.schedule += 1
-				}
+				return
+			}
+			if (!this.form.productName) {
+				uni.showToast({
+					title: '请输入商品名称',
+					icon: 'none'
+				});
+				return
+			}
+			if (!this.form.groupingId) {
+				uni.showToast({
+					title: '请选择商品分组',
+					icon: 'none'
+				});
+				return
+			}
+			if (!this.form.productImage) {
+				uni.showToast({
+					title: '请上传商品封面图',
+					icon: 'none'
+				});
+				return
+			}
+			if (this.tabIndex == '0' && !this.form.detailImages) {
+				uni.showToast({
+					title: '请上传商品详情图',
+					icon: 'none'
+				});
+				return
+			}
+			if (!this.form.price && !this.form.categoryId == '1945013773786701826') {
+				uni.showToast({
+					title: '请输入商品原价',
+					icon: 'none'
+				});
+				return
+			}
+			if (!this.form.soldPrice && !this.form.categoryId == '1945013773786701826') {
+				uni.showToast({
+					title: '请输入商品售价',
+					icon: 'none'
+				});
+				return
+			} else if (this.form.categoryId == '1945013773786701826' && this.selectProductSunItem.length == 0) {
+				uni.showToast({
+					title: '请选择最少一个配置',
+					icon: 'none'
+				});
+			} else {
+				this.schedule += 1
+			}
 
-			},
-			// 跳转至组合商品页
-			goGroup() {
-				// if(this.tabIndex==0){
-				uni.navigateTo({
-					url: '/pages/product/group'
-				})
-				// }
+		},
+		// 跳转至组合商品页
+		goGroup() {
+			// if(this.tabIndex==0){
+			uni.navigateTo({
+				url: '/pages/product/group'
+			})
+			// }
 
-			},
-			//返回
-			back() {
-				uni.navigateTo({
-					url: '/pages/product/index'
-				})
-			},
-			// 处理 confirm 事件，接收子组件传递的时间段数据
-			handleConfirm(time) {
-				this.selectedTime = time; // 保存时间段数据
-				this.isSelectDate = false
-			},
-			//隐藏弹窗
-			closeSelectDate() {
-				this.isSelectDate = false
-			},
-			//跳转至可用时间
-			setUsable() {
-				uni.navigateTo({
-					url: '/pages/product/usable'
-				})
+		},
+		//返回
+		back() {
+			uni.navigateTo({
+				url: '/pages/product/index'
+			})
+		},
+		// 处理 confirm 事件，接收子组件传递的时间段数据
+		handleConfirm(time) {
+			this.selectedTime = time; // 保存时间段数据
+			this.isSelectDate = false
+		},
+		//隐藏弹窗
+		closeSelectDate() {
+			this.isSelectDate = false
+		},
+		//跳转至可用时间
+		setUsable() {
+			uni.navigateTo({
+				url: '/pages/product/usable'
+			})
 
-			},
-			// 保存退款规则
-			saveFound(rules) {
-				this.form.refundConfirm = rules.refundConfirm.refundConfirm
-				this.form.refundLabel = rules.refundLabel.refundLabel
-				let value1 = []
-				value1.push(rules.refundConfirm.name, rules.refundLabel.name)
-				this.showRule = value1.join("·")
-				// this.selectedRules = rules; 
-				this.isRefund = false
-			},
-			cutRule() {
-				this.isRefund = false
-			},
-			//获取商品分类一级列表
-			getLeftTree() {
-				this.$http.get("/sys/category/childList?pid=" + '1889836358116098050', {}).then(res => {
-					if (res.data.code == 0) {
-						this.treeLeft = res.data.result
-						if (this.treeLeft[0]) {
-							this.getCenterTree(this.treeLeft[0].id)
-						}
-					}
-				})
-			},
-			//获取商品分类二级列表
-			getCenterTree(id) {
-				this.$http.get("/sys/category/childList?pid=" + id, {}).then(res => {
-					if (res.data.code == 0) {
-						this.treeCenter = res.data.result
-						if (this.treeCenter[0]) {
-							// this.getRightTree(this.treeCenter[0].id)
-						}
+		},
+		// 保存退款规则
+		saveFound(rules) {
+			this.form.refundConfirm = rules.refundConfirm.refundConfirm
+			this.form.refundLabel = rules.refundLabel.refundLabel
+			let value1 = []
+			value1.push(rules.refundConfirm.name, rules.refundLabel.name)
+			this.showRule = value1.join("·")
+			// this.selectedRules = rules; 
+			this.isRefund = false
+		},
+		cutRule() {
+			this.isRefund = false
+		},
+		//获取商品分类一级列表
+		getLeftTree() {
+			this.$http.get("/sys/category/childList?pid=" + '1889836358116098050', {}).then(res => {
+				if (res.data.code == 0) {
+					this.treeLeft = res.data.result
+					if (this.treeLeft[0]) {
+						this.getCenterTree(this.treeLeft[0].id)
 					}
-				})
-			},
-			//获取商品分类三级列表
-			getRightTree(id) {
-				this.$http.get("/sys/category/childList?pid=" + id, {}).then(res => {
-					if (res.data.code == 0) {
-						this.treeRight = res.data.result
+				}
+			})
+		},
+		//获取商品分类二级列表
+		getCenterTree(id) {
+			this.$http.get("/sys/category/childList?pid=" + id, {}).then(res => {
+				if (res.data.code == 0) {
+					this.treeCenter = res.data.result
+					if (this.treeCenter[0]) {
+						// this.getRightTree(this.treeCenter[0].id)
 					}
-				})
-			},
-			selectProductType() {
-				if (this.tabIndex == '0') {
-					this.isSelectType = true
-					this.showText = ''
-					this.productType = []
-					this.selectTypeList = []
-					this.currentLeft = null
-					this.currentCenter = null
-					this.currentRight = null
 				}
-
-			},
-			//选中一级
-			selectLeft(item, index) {
-				this.currentLeft = index
-				this.currentCenter = null
-				this.currentRight = null
-				this.treeCenter = []
-				this.treeRight = []
+			})
+		},
+		//获取商品分类三级列表
+		getRightTree(id) {
+			this.$http.get("/sys/category/childList?pid=" + id, {}).then(res => {
+				if (res.data.code == 0) {
+					this.treeRight = res.data.result
+				}
+			})
+		},
+		selectProductType() {
+			if (this.tabIndex == '0') {
+				this.isSelectType = true
+				this.showText = ''
 				this.productType = []
 				this.selectTypeList = []
-				this.productType.push(item.id)
-				this.selectTypeList.push(item.name)
-				this.getCenterTree(item.id)
-			},
-			//选中二级
-			selectRight(item, index) {
-				this.getRightTree(this.treeCenter[0].id)
-				this.currentCenter = index
+				this.currentLeft = null
+				this.currentCenter = null
 				this.currentRight = null
-				if (this.selectTypeList.length >= 2) {
-					this.productType.splice(1, 2)
-					this.selectTypeList.splice(1, 2)
-				}
-				this.productType.push(item.id)
-				this.selectTypeList.push(item.name)
-				this.getRightTree(item.id)
-			},
-			//选中三级
-			selectLast(item, index) {
-				if (this.selectTypeList.length >= 3) {
-					this.productType.splice(2, 1)
-					this.selectTypeList.splice(2, 1)
+			}
+
+		},
+		//选中一级
+		selectLeft(item, index) {
+			this.currentLeft = index
+			this.currentCenter = null
+			this.currentRight = null
+			this.treeCenter = []
+			this.treeRight = []
+			this.productType = []
+			this.selectTypeList = []
+			this.productType.push(item.id)
+			this.selectTypeList.push(item.name)
+			this.getCenterTree(item.id)
+		},
+		//选中二级
+		selectRight(item, index) {
+			this.getRightTree(this.treeCenter[0].id)
+			this.currentCenter = index
+			this.currentRight = null
+			if (this.selectTypeList.length >= 2) {
+				this.productType.splice(1, 2)
+				this.selectTypeList.splice(1, 2)
+			}
+			this.productType.push(item.id)
+			this.selectTypeList.push(item.name)
+			this.getRightTree(item.id)
+		},
+		//选中三级
+		selectLast(item, index) {
+			if (this.selectTypeList.length >= 3) {
+				this.productType.splice(2, 1)
+				this.selectTypeList.splice(2, 1)
+			}
+			this.productType.push(item.id)
+			this.selectTypeList.push(item.name)
+			this.currentRight = index
+		},
+		//确定分类
+		selectType() {
+			this.isSelectType = false
+			this.form.categoryId = this.productType.join(',')
+			this.showText = this.selectTypeList.join('·')
+		},
+		//关闭选择分类弹窗
+		closePopup() {
+			this.isSelectType = false
+		},
+		//获取商品分组列表
+		getProductGroup() {
+			this.$http.get("/localProductGrouping/localProductGrouping/getList").then(res => {
+				if (res.data.success) {
+					this.groupOptions = res.data.result || []
 				}
-				this.productType.push(item.id)
-				this.selectTypeList.push(item.name)
-				this.currentRight = index
-			},
-			//确定分类
-			selectType() {
-				this.isSelectType = false
-				this.form.categoryId = this.productType.join(',')
-				this.showText = this.selectTypeList.join('·')
-			},
-			//关闭选择分类弹窗
-			closePopup() {
-				this.isSelectType = false
-			},
-			selectDate() {
-				// this.isSelectDate = true
-				this.$refs.rangTime.open()
-			},
-			onEndTimeChange(val) {
-				this.form.saleStartDate = val.startDate
-				this.form.saleEndDate = val.endDate
-				this.showDate = val.startDate + '-' + val.endDate
-				this.$forceUpdate(); // 强制刷新视图
-			},
-			//提交审核
-			submit() {
-				console.log(this.form)
-				this.form.specItems = this.selectProductSunItem
-				this.makeChecked ? this.form.preBook = 1 : this.form.preBook = 0
-				if (!this.form.saleStartDate) {
-					uni.showToast({
-						title: '请设置售卖时间',
-						icon: 'none'
-					});
-					return
-				} else if (!this.form.stockQuantity) {
-					uni.showToast({
-						title: '请输入商品库存',
-						icon: 'none'
-					});
-					return
-				} else if (!this.form.availableEndDate && !this.form.expirationDays) {
-					uni.showToast({
-						title: '请选择可用时间',
-						icon: 'none'
-					});
-					return
+			})
+		},
+		// 确定分组
+		groupConfirm(e) {
+			this.form.groupingId = e[0].value
+			this.form.groupingName = e[0].label
+			this.showGroupPicker = false;
+		},
+		selectDate() {
+			// this.isSelectDate = true
+			this.$refs.rangTime.open()
+		},
+		onEndTimeChange(val) {
+			this.form.saleStartDate = val.startDate
+			this.form.saleEndDate = val.endDate
+			this.showDate = val.startDate + '-' + val.endDate
+			this.$forceUpdate(); // 强制刷新视图
+		},
+		//提交审核
+		submit() {
+			console.log(this.form)
+			this.form.specItems = this.selectProductSunItem
+			this.makeChecked ? this.form.preBook = 1 : this.form.preBook = 0
+			if (!this.form.saleStartDate) {
+				uni.showToast({
+					title: '请设置售卖时间',
+					icon: 'none'
+				});
+				return
+			} else if (!this.form.stockQuantity) {
+				uni.showToast({
+					title: '请输入商品库存',
+					icon: 'none'
+				});
+				return
+			} else if (!this.form.availableEndDate && !this.form.expirationDays) {
+				uni.showToast({
+					title: '请选择可用时间',
+					icon: 'none'
+				});
+				return
 				// } else if (this.tabIndex != 1 && (this.form.refundConfirmName == null || this.form.refundLabelName == null)) {
-					} else if (this.tabIndex != 1 && (this.form.refundConfirm == null || this.form.refundLabel == null)) {
-					uni.showToast({
-						title: '请选择退款标签',
-						icon: 'none'
-					});
-					return
-				} else {
-					if (this.productId == '') {
-						this.$http.post("/app/product/add", this.form).then(res => {
-							if (res.data.code == 200) {
-								uni.showToast({
-									title: '添加成功',
-									icon: 'none'
-								});
-								this.back()
-								uni.removeStorage({
-									key: 'smdate',
-								});
-								uni.removeStorage({
-									key: 'group',
-								});
-							} else {
-								uni.showToast({
-									title: res.message,
-									icon: 'none'
-								});
-							}
-
-
-						})
-					} else {
-						this.form.productId = this.productId
-						this.$http.post("/app/product/edit", this.form).then(res => {
-							if (res.data.code == 200) {
-								uni.showToast({
-									title: '编辑成功',
-									icon: 'none'
-								});
-								this.back()
-							} else {
-								uni.showToast({
-									icon: 'none',
-									title: res.data.sessage
-								})
-							}
+			} else if (this.tabIndex != 1 && (this.form.refundConfirm == null || this.form.refundLabel == null)) {
+				uni.showToast({
+					title: '请选择退款标签',
+					icon: 'none'
+				});
+				return
+			} else {
+				if (this.productId == '') {
+					this.$http.post("/app/product/add", this.form).then(res => {
+						if (res.data.code == 200) {
+							uni.showToast({
+								title: '添加成功',
+								icon: 'none'
+							});
+							this.back()
 							uni.removeStorage({
 								key: 'smdate',
 							});
 							uni.removeStorage({
 								key: 'group',
 							});
+						} else {
+							uni.showToast({
+								title: res.message,
+								icon: 'none'
+							});
+						}
 
-						})
-					}
-
-				}
-			},
-			//回显数据
-			getForm() {
-				this.$http.get("/app/product/queryById?id=" + this.productId, {}).then(res => {
-					if (res.data.code == 200) {
-						this.form = res.data.result
-
-						this.jifenChecked = res.data.result.integralAward ? true : false
-						this.jindouChecked = res.data.result.goldAward ? true : false
-						this.showText = res.data.result.productCategory
-						this.fmImageList.push({
-							url: res.data.result.productImage
-						})
 
-						if (res.data.result.detailImages) {
-							let xqtemp = []
-							xqtemp = res.data.result.detailImages.split(',')
-							xqtemp.map(item => {
-								this.xqImage.push({
-									url: item
-								})
+					})
+				} else {
+					this.form.productId = this.productId
+					this.$http.post("/app/product/edit", this.form).then(res => {
+						if (res.data.code == 200) {
+							uni.showToast({
+								title: '编辑成功',
+								icon: 'none'
+							});
+							this.back()
+						} else {
+							uni.showToast({
+								icon: 'none',
+								title: res.data.sessage
 							})
-							console.log(this.xqImage)
 						}
+						uni.removeStorage({
+							key: 'smdate',
+						});
+						uni.removeStorage({
+							key: 'group',
+						});
 
-						this.showDate = res.data.result.saleStartDate.slice(0, 10) + '-' + res.data.result.saleEndDate.slice(0,
-							10)
-						if (res.data.resultuseType == 2) {
-							this.showSellDate = res.data.result.availableStartDate.slice(0, 10) + '-' + res.data.result
-								.availableEndDate.slice(0, 10)
-						} else if (res.data.result.useType == 1) {
-							this.showSellDate = res.data.result.expirationDays + '天后失效'
-						}else if(res.data.result.useType == 3){
-							this.showSellDate = '长期有效'
-						}
-						res.data.result.preBook == 0 ? this.makeChecked = false : this.makeChecked = true
-						if (res.data.result.refundLabelName && res.data.result.refundConfirmName) {
-							this.showRule = res.data.result.refundLabelName + '·' + res.data.result.refundConfirmName
-						}
+					})
+				}
 
-						console.log(this.showRule)
+			}
+		},
+		//回显数据
+		getForm() {
+			this.$http.get("/app/product/queryById?id=" + this.productId, {}).then(res => {
+				if (res.data.code == 200) {
+					this.form = res.data.result
+
+					this.jifenChecked = res.data.result.integralAward ? true : false
+					this.jindouChecked = res.data.result.goldAward ? true : false
+					this.showText = res.data.result.productCategory
+					this.fmImageList.push({
+						url: res.data.result.productImage
+					})
 
-						uni.setStorage({
-							key: 'group',
-							data: res.data.result.productGroups
+					if (res.data.result.detailImages) {
+						let xqtemp = []
+						xqtemp = res.data.result.detailImages.split(',')
+						xqtemp.map(item => {
+							this.xqImage.push({
+								url: item
+							})
 						})
+						console.log(this.xqImage)
 					}
-				})
-			}
-		},
-		mounted() {
-			this.getLeftTree()
-			this.getForm()
-		},
-		onLoad(options) {
-			if (options.productId) {
-				this.productId = options.productId
-			}
-			if (options.tabIndex) {
-				this.tabIndex = options.tabIndex
-			}
 
-		},
-		onShow() {
-			let that = this
-			uni.getStorage({
-				key: 'login_user_info',
-				success: function(res) {
-					that.form.merchantId = res.data.merchantId
-				}
-			})
-			uni.getStorage({
-				key: 'smdate',
-				success: (res) => {
-					if (res.data.availableEndDate) {
-						this.showSellDate = res.data.availableStartDate + '-' + res.data.availableEndDate
-						this.form.availableStartDate = res.data.availableStartDate
-						this.form.availableEndDate = res.data.availableEndDate
-						this.form.expirationDays = null
-						this.form.useType = 2
-					} else if (res.data.expirationDays) {
-						this.form.expirationDays = res.data.expirationDays
-						this.form.availableEndDate = null
-						this.form.availableStartDate = null
-						this.form.useType = 1
-						this.$nextTick(() => {
-							this.showSellDate = res.data.expirationDays + '天后失效'
-						});
-					}else if(res.data.useType == 3){
-						this.form.useType = 3
+					this.showDate = res.data.result.saleStartDate.slice(0, 10) + '-' + res.data.result.saleEndDate.slice(0,
+						10)
+					if (res.data.resultuseType == 2) {
+						this.showSellDate = res.data.result.availableStartDate.slice(0, 10) + '-' + res.data.result
+							.availableEndDate.slice(0, 10)
+					} else if (res.data.result.useType == 1) {
+						this.showSellDate = res.data.result.expirationDays + '天后失效'
+					} else if (res.data.result.useType == 3) {
 						this.showSellDate = '长期有效'
 					}
+					res.data.result.preBook == 0 ? this.makeChecked = false : this.makeChecked = true
+					if (res.data.result.refundLabelName && res.data.result.refundConfirmName) {
+						this.showRule = res.data.result.refundLabelName + '·' + res.data.result.refundConfirmName
+					}
 
+					console.log(this.showRule)
+
+					uni.setStorage({
+						key: 'group',
+						data: res.data.result.productGroups
+					})
 				}
 			})
-			uni.getStorage({
-				key: 'group',
-				success: function(res) {
-					that.form.productGroups = res.data
-				}
-			})
 		}
+	},
+	mounted() {
+		this.getProductGroup()
+		this.getLeftTree()
+		this.getForm()
+	},
+	onLoad(options) {
+		if (options.productId) {
+			this.productId = options.productId
+		}
+		if (options.tabIndex) {
+			this.tabIndex = options.tabIndex
+		}
+
+	},
+	onShow() {
+		let that = this
+		uni.getStorage({
+			key: 'login_user_info',
+			success: function (res) {
+				that.form.merchantId = res.data.merchantId
+			}
+		})
+		uni.getStorage({
+			key: 'smdate',
+			success: (res) => {
+				if (res.data.availableEndDate) {
+					this.showSellDate = res.data.availableStartDate + '-' + res.data.availableEndDate
+					this.form.availableStartDate = res.data.availableStartDate
+					this.form.availableEndDate = res.data.availableEndDate
+					this.form.expirationDays = null
+					this.form.useType = 2
+				} else if (res.data.expirationDays) {
+					this.form.expirationDays = res.data.expirationDays
+					this.form.availableEndDate = null
+					this.form.availableStartDate = null
+					this.form.useType = 1
+					this.$nextTick(() => {
+						this.showSellDate = res.data.expirationDays + '天后失效'
+					});
+				} else if (res.data.useType == 3) {
+					this.form.useType = 3
+					this.showSellDate = '长期有效'
+				}
+
+			}
+		})
+		uni.getStorage({
+			key: 'group',
+			success: function (res) {
+				that.form.productGroups = res.data
+			}
+		})
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.creat {
-		width: 100vw;
-		height: 100vh;
-		background: #F7F8FC;
+.creat {
+	width: 100vw;
+	height: 100vh;
+	background: #F7F8FC;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+
+	/*#ifdef APP-PLUS*/
+	.top {
+		width: 100%;
+		height: var(--status-bar-height);
+		background-color: #fff;
+	}
+
+	/*#endif*/
+	.head {
+		width: 100%;
+		height: 112rpx;
+		padding: 32rpx 24rpx;
 		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
+		align-items: center;
+		background-color: #fff;
+		position: relative;
 
-		/*#ifdef APP-PLUS*/
-		.top {
-			width: 100%;
-			height: var(--status-bar-height);
-			background-color: #fff;
+		.cuIcon-back {
+			font-size: 40rpx;
+			margin-right: 40rpx;
 		}
 
-		/*#endif*/
-		.head {
-			width: 100%;
-			height: 112rpx;
-			padding: 32rpx 24rpx;
-			display: flex;
-			align-items: center;
-			background-color: #fff;
-			position: relative;
+		.case {
+			font-size: 36rpx;
+			font-weight: 600;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		}
 
-			.cuIcon-back {
-				font-size: 40rpx;
-				margin-right: 40rpx;
-			}
+		.step {
+			position: absolute;
+			right: 20rpx;
+		}
+	}
 
-			.case {
-				font-size: 36rpx;
-				font-weight: 600;
-				position: absolute;
-				top: 50%;
-				left: 50%;
-				transform: translate(-50%, -50%);
-			}
+	.content {
+		width: 100%;
+		flex: 1;
+		padding: 24rpx;
+		overflow-y: auto;
 
-			.step {
-				position: absolute;
-				right: 20rpx;
-			}
+		.prompt {
+			font-weight: 400;
+			font-size: 28rpx;
+			color: #999999;
+			// padding: 10rpx 0;
+			margin-bottom: 18rpx;
 		}
 
-		.content {
+		.titl {
 			width: 100%;
-			flex: 1;
-			padding: 24rpx;
-			overflow-y: auto;
+			// height: 60rpx;
+			font-weight: 600;
+			font-size: 32rpx;
+			color: #333333;
+			margin-bottom: 16rpx;
+		}
 
-			.prompt {
-				font-weight: 400;
-				font-size: 28rpx;
-				color: #999999;
-				// padding: 10rpx 0;
-				margin-bottom: 18rpx;
-			}
+		.form {
+			background-color: #fff;
+			padding: 16rpx;
+			border-radius: 16rpx;
 
-			.titl {
+			.item {
 				width: 100%;
-				// height: 60rpx;
-				font-weight: 600;
-				font-size: 32rpx;
-				color: #333333;
+				height: 58rpx;
+				border-bottom: 1px solid #EEEEEE;
+				display: flex;
+				// align-items: center;
+				padding-bottom: 16rpx;
 				margin-bottom: 16rpx;
-			}
 
-			.form {
-				background-color: #fff;
-				padding: 16rpx;
-				border-radius: 16rpx;
+				.label {
+					margin-right: 20rpx;
+					font-weight: 600;
+					font-size: 28rpx;
+					min-width: 126rpx;
 
-				.item {
-					width: 100%;
-					height: 58rpx;
-					border-bottom: 1px solid #EEEEEE;
+					span {
+						color: red;
+					}
+				}
+
+				.picker {
+					flex: 1;
 					display: flex;
-					// align-items: center;
-					padding-bottom: 16rpx;
-					margin-bottom: 16rpx;
+					align-items: center;
+					justify-content: space-between;
+					font-size: 28rpx;
+					color: #999999;
+				}
 
-					.label {
-						margin-right: 20rpx;
-						font-weight: 600;
-						font-size: 28rpx;
-						min-width: 126rpx;
+				.set {
+					display: flex;
+					justify-content: flex-end;
 
-						span {
-							color: red;
-						}
+					::v-deep.u-input {
+						text-align: right !important;
 					}
+				}
+			}
+
+			.spray {
+				.label {
+					height: 57rpx;
+					margin-right: 20rpx;
+					font-weight: 600;
+					font-size: 28rpx;
+					min-width: 126rpx;
+					margin-bottom: 16rpx;
 
-					.picker {
-						flex: 1;
+					.change {
 						display: flex;
 						align-items: center;
-						justify-content: space-between;
-						font-size: 28rpx;
-						color: #999999;
-					}
+						font-weight: 400;
 
-					.set {
-						display: flex;
-						justify-content: flex-end;
+						span {
+							display: flex;
+							align-items: center;
+							margin-left: 30rpx;
+
+						}
 
-						::v-deep.u-input {
-							text-align: right !important;
+						image {
+							width: 36rpx;
+							height: 36rpx;
+							font-size: 28rpx;
+							margin-right: 4rpx;
 						}
 					}
 				}
 
-				.spray {
-					.label {
-						height: 57rpx;
-						margin-right: 20rpx;
-						font-weight: 600;
-						font-size: 28rpx;
-						min-width: 126rpx;
-						margin-bottom: 16rpx;
-
-						.change {
-							display: flex;
-							align-items: center;
-							font-weight: 400;
-
-							span {
-								display: flex;
-								align-items: center;
-								margin-left: 30rpx;
+				.spray_items {
+					.spra {
+						height: 106rpx;
+						margin-bottom: 32rpx;
+						display: flex;
+						align-items: start;
 
-							}
+						.square {
+							margin-right: 12rpx;
 
 							image {
-								width: 36rpx;
-								height: 36rpx;
-								font-size: 28rpx;
-								margin-right: 4rpx;
+								width: 30rpx;
+								height: 40rpx;
 							}
 						}
-					}
 
-					.spray_items {
-						.spra {
-							height: 106rpx;
-							margin-bottom: 32rpx;
+						.name {
 							display: flex;
-							align-items: start;
-
-							.square {
-								margin-right: 12rpx;
-
-								image {
-									width: 30rpx;
-									height: 40rpx;
-								}
-							}
+							font-size: 28rpx;
+							margin-bottom: 16rpx;
+						}
 
-							.name {
-								display: flex;
-								font-size: 28rpx;
-								margin-bottom: 16rpx;
-							}
+						.price {
+							height: 49rpx;
+							display: flex;
+							justify-content: space-between;
 
-							.price {
-								height: 49rpx;
+							.option {
 								display: flex;
-								justify-content: space-between;
-
-								.option {
-									display: flex;
-									align-items: center;
+								align-items: center;
+								font-size: 26rpx;
+								color: #666666;
+
+								input {
+									height: 49rpx;
+									width: 160rpx;
+									background: #F7F8FC;
+									border-radius: 4rpx;
+									margin-left: 10rpx;
+									text-align: center;
 									font-size: 26rpx;
 									color: #666666;
-
-									input {
-										height: 49rpx;
-										width: 160rpx;
-										background: #F7F8FC;
-										border-radius: 4rpx;
-										margin-left: 10rpx;
-										text-align: center;
-										font-size: 26rpx;
-										color: #666666;
-									}
 								}
-
 							}
-						}
-
 
+						}
 					}
-				}
 
-				.upload {
-					display: block;
-					height: auto;
 
-					.tips {
-						font-size: 20rpx;
-						color: #999999;
-						margin-bottom: 16rpx;
-						margin-top: 10rpx;
-					}
 				}
+			}
 
-				.textarea {
-					width: 100%;
-					height: 196rpx;
-					background: #F7F8FC;
-					border-radius: 4rpx;
-					padding: 12rpx 16rpx;
-					font-size: 26rpx;
-					margin-top: 12rpx;
-				}
+			.upload {
+				display: block;
+				height: auto;
 
-				.num {
-					width: 100%;
-					text-align: right;
-					font-size: 24rpx;
+				.tips {
+					font-size: 20rpx;
 					color: #999999;
-					margin-top: 6rpx;
+					margin-bottom: 16rpx;
+					margin-top: 10rpx;
 				}
 			}
+
+			.textarea {
+				width: 100%;
+				height: 196rpx;
+				background: #F7F8FC;
+				border-radius: 4rpx;
+				padding: 12rpx 16rpx;
+				font-size: 26rpx;
+				margin-top: 12rpx;
+			}
+
+			.num {
+				width: 100%;
+				text-align: right;
+				font-size: 24rpx;
+				color: #999999;
+				margin-top: 6rpx;
+			}
 		}
+	}
 
-		.btn {
-			width: 100%;
-			height: 112rpx;
-			background-color: #fff;
+	.btn {
+		width: 100%;
+		height: 112rpx;
+		background-color: #fff;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		.next {
+			width: 672rpx;
+			height: 76rpx;
+			border-radius: 54rpx;
+			border: 1px solid #449AFF;
+			margin: 0 auto;
 			display: flex;
 			justify-content: center;
 			align-items: center;
+			font-size: 28rpx;
+			color: #449AFF;
+		}
+
+		.handle {
+			width: 100%;
+			display: flex;
+			justify-content: space-around;
 
-			.next {
-				width: 672rpx;
+			.back {
+				width: 205rpx;
 				height: 76rpx;
 				border-radius: 54rpx;
 				border: 1px solid #449AFF;
-				margin: 0 auto;
 				display: flex;
-				justify-content: center;
 				align-items: center;
+				justify-content: center;
 				font-size: 28rpx;
 				color: #449AFF;
 			}
 
-			.handle {
-				width: 100%;
+			.submit {
+				width: 443rpx;
+				height: 76rpx;
+				background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
+				border-radius: 53rpx;
 				display: flex;
-				justify-content: space-around;
-
-				.back {
-					width: 205rpx;
-					height: 76rpx;
-					border-radius: 54rpx;
-					border: 1px solid #449AFF;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					font-size: 28rpx;
-					color: #449AFF;
-				}
-
-				.submit {
-					width: 443rpx;
-					height: 76rpx;
-					background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
-					border-radius: 53rpx;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					font-size: 28rpx;
-					color: #FFFFFF;
-				}
+				align-items: center;
+				justify-content: center;
+				font-size: 28rpx;
+				color: #FFFFFF;
 			}
 		}
+	}
 
-		.popup {
-			width: 100vw;
-			height: 100vh;
-			position: fixed;
-			top: 0;
-			left: 0;
-			background: rgba(0, 0, 0, 0.4);
-			display: flex;
-			align-items: flex-end;
+	.popup {
+		width: 100vw;
+		height: 100vh;
+		position: fixed;
+		top: 0;
+		left: 0;
+		background: rgba(0, 0, 0, 0.4);
+		display: flex;
+		align-items: flex-end;
+
+		z-index: 99;
 
-			z-index: 99;
+		.model {
+			width: 100%;
+			background-color: #fff;
+			border-radius: 20rpx 20rpx 0rpx 0rpx;
+			padding: 0rpx 24rpx;
+			padding-bottom: 20rpx;
 
-			.model {
+			.title {
 				width: 100%;
-				background-color: #fff;
-				border-radius: 20rpx 20rpx 0rpx 0rpx;
-				padding: 0rpx 24rpx;
-				padding-bottom: 20rpx;
-
-				.title {
-					width: 100%;
-					height: 86rpx;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					border-bottom: 1px solid #EEEEEE;
-					position: relative;
-
-					image {
-						width: 40rpx;
-						height: 40rpx;
-						position: absolute;
-						right: 0px;
-					}
+				height: 86rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-bottom: 1px solid #EEEEEE;
+				position: relative;
+
+				image {
+					width: 40rpx;
+					height: 40rpx;
+					position: absolute;
+					right: 0px;
 				}
+			}
 
-				.tree {
-					display: flex;
-					height: 546rpx;
-
-					.left {
-						overflow-y: auto;
+			.tree {
+				display: flex;
+				height: 546rpx;
 
-						.item {
-							width: 224rpx;
-							height: 78rpx;
-							padding: 20rpx;
-							font-size: 26rpx;
-						}
+				.left {
+					overflow-y: auto;
 
-						.active {
-							background: rgba(68, 154, 255, 0.1);
-							color: #2983EC;
-						}
+					.item {
+						width: 224rpx;
+						height: 78rpx;
+						padding: 20rpx;
+						font-size: 26rpx;
 					}
 
-					.border {
-						border-left: 1px solid #eeeeee;
-						border-right: 1px solid #eeeeee;
+					.active {
+						background: rgba(68, 154, 255, 0.1);
+						color: #2983EC;
 					}
 				}
 
-				.sub {
+				.border {
+					border-left: 1px solid #eeeeee;
+					border-right: 1px solid #eeeeee;
+				}
+			}
+
+			.sub {
+				display: flex;
+				justify-content: space-between;
+				margin-top: 16rpx;
+				border-top: 1px solid #eeeeee;
+				padding-top: 16rpx;
+
+				.submit {
+					width: 672rpx;
+					height: 76rpx;
+					background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
+					border-radius: 53rpx;
 					display: flex;
-					justify-content: space-between;
-					margin-top: 16rpx;
-					border-top: 1px solid #eeeeee;
-					padding-top: 16rpx;
-
-					.submit {
-						width: 672rpx;
-						height: 76rpx;
-						background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
-						border-radius: 53rpx;
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						font-size: 28rpx;
-						color: #FFFFFF;
-					}
+					align-items: center;
+					justify-content: center;
+					font-size: 28rpx;
+					color: #FFFFFF;
 				}
 			}
 		}
 	}
+}
+
+::v-deep.u-upload__button {
+	width: 250rpx !important;
+	height: 250rpx !important;
+}
+
+.exchange-input {
+	display: flex;
+	justify-content: space-between;
+	height: 65rpx;
+	background: #F7F8FC;
+	border-radius: 12rpx;
+	margin-bottom: 20rpx;
+	padding: 20rpx;
+	font-size: 28rpx;
+	width: 100%;
+
+	.exchange-all {
+		color: #333333;
+		font-size: 28rpx;
 
-	::v-deep.u-upload__button {
-		width: 250rpx !important;
-		height: 250rpx !important;
 	}
 
-	.exchange-input {
-		display: flex;
-		justify-content: space-between;
-		height: 65rpx;
-		background: #F7F8FC;
-		border-radius: 12rpx;
-		margin-bottom: 20rpx;
-		padding: 20rpx;
+	input {
 		font-size: 28rpx;
-		width: 100%;
-
-		.exchange-all {
-			color: #333333;
-			font-size: 28rpx;
-
-		}
-
-		input {
-			font-size: 28rpx;
-		}
 	}
+}
 </style>

pages/product/details.vue

@@ -17,10 +17,12 @@
 				<view class="data">
 					<span class="span">商品分类</span>{{form.productCategory}}
 				</view>
+				<view class="data">
+					<span class="span">商品分组</span>{{form.groupingName}}
+				</view>
 				<view class="data">
 					<span class="span">商品名称</span>{{form.productName}}
 				</view>
-
 				<view class="img_box">
 					<span class="line">商品封面图</span>
 					<view class="img_list">