eduepos_ui_store/pages/goods/goods-edit.vue

<template>
	<view class="goods-edit-page">
		<scroll-view scroll-y class="scroll-content">
			<view class="title">基本设置</view>
			<view class="cell-group">
				<view class="cell dubble">
					<view class="row">
						<view class="label"><span class="required">*</span>商品图片</view>
						<view class="value">
							<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1"
								:previewFullImage="true" :maxCount="1"></u-upload>
						</view>
					</view>
				</view>
				<view class="cell">
					<view class="row">
						<view class="label"><span class="required">*</span>商品名称</view>
						<view class="value">
							<u-input border="none" inputAlign="left" fontSize="14" v-model="goodsInfo.goodsName"
								placeholder="请输入商品名称"></u-input>
						</view>
					</view>
				</view>
				<view class="cell">
					<view class="row">
						<view class="label w280">最低购买数量</view>
						<view class="value">
							<u-input border="none" type="number" inputAlign="left" fontSize="14"
								v-model="goodsInfo.miniNum"></u-input>
						</view>
					</view>
					<view class="desc">默认 1 为没有限制，如设为 2 ，则用户最少买两份才能下单。</view>
				</view>
				<view class="cell">
					<view class="row">
						<view class="label">商品单位</view>
						<view class="value">
							<u-input border="none" inputAlign="left" fontSize="14" v-model="goodsInfo.utils"
								placeholder="请输入商品单位,默认为:份,最多一个字"></u-input>
						</view>
					</view>
				</view>
				<view class="cell">
					<view class="row">
						<view class="label"><span class="required">*</span>商品分类</view>

						<view class="value" @click="handCheckGoodsType">
							<view class="class-name">{{ goodsInfo.goodsTypeName }}</view>
							<u-icon name="arrow-right" size="20" color="#6c6c6c"></u-icon>
						</view>
					</view>
				</view>
				<view class="cell dubble h240">
					<view class="row">
						<view class="label">商品描述</view>
						<view class="value">
							<u--textarea v-model="goodsInfo.rmk" maxlength="100" placeholder="请输入商品描述"></u--textarea>
						</view>
					</view>
				</view>
			</view>
			<view class="title">商品规格</view>
			<view class="list-group">
				<view class="item" v-for="(item,index) in modelBeanList" :key="item.id">
					<view class="cell">
						<view class="label"><span class="required">*</span>规格名称</view>
						<view class="value">
							<u-input border="none" maxlength="20" inputAlign="left" fontSize="14" v-model="item.modelName"
								placeholder="请输入规格名称"></u-input>
						</view>
					</view>
					<view class="cell">
						<view class="label"><span class="required">*</span>价格</view>
						<view class="value">
							<u-input border="none" inputAlign="left" fontSize="14" v-model="item.costPrice"
								placeholder="请输入价格"></u-input>
						</view>
					</view>
					<view class="cell">
						<view class="label"><span class="required">*</span>餐盒费</view>
						<view class="value">
							<u-input border="none" inputAlign="left" fontSize="14" v-model="item.packingFee"
								placeholder="请输入餐盒费"></u-input>
						</view>
					</view>
					<view class="cell">
						<view class="label"><span class="required">*</span>库存</view>
						<view class="value">
							<u-input border="none" type="number" inputAlign="left" @input="inventoryInput(index,$event)" fontSize="14" v-model="item.inventory"
								placeholder="请输入库存"></u-input>
							<view class="btn" @click="reset(index)">沽清</view>
							<view class="btn" @click="addAll(index)">置满</view>
						</view>
					</view>
					<view class="cell">
						<view class="label">最大库存</view>
						<view class="value">
							9999
						</view>
					</view>
					<view class="cell no-bor">
						<view class="del-btn" v-if="item.modelId == null || item.modelId == ''" @click="deleteModel(item)">删除该规格</view>
					</view>
				</view>
				<view class="add-specificatin" @click="addModel">添加规格</view>
			</view>
			<view class="title">添加属性</view>
			<view class="list-group">
				<view class="item" v-for="(item,index) in propertyBeanList" :key="item.id">
					<view class="cell">
						<view class="label"><span class="required">*</span>属性名称</view>
						<view class="value">
							<u-input border="none" maxlength="5" inputAlign="left" fontSize="14" v-model="item.propertyName"
								placeholder="请输入属性名称"></u-input>
						</view>
					</view>
					<view class="cell dubble" style="height: 280rpx;">
						<view class="label"><span class="required">*</span>属性描述</view>
						<view class="value" style="border: 2rpx solid #ececec; border-radius: 6rpx;">
							<u--textarea height="100" v-model="item.propertyList" maxlength="200" placeholder="多个属性用逗号隔开，例如：微辣，变态辣"></u--textarea>
						</view>
					</view>
					<view class="cell no-bor">
						<view class="del-btn" @click="deleteProperty(item)">删除该属性</view>
					</view>
				</view>
				<view class="add-specificatin" @click="addProperty">添加属性</view>
			</view>
		</scroll-view>
		<view class="save">
			<view class="btn" @click="save">保存</view>
		</view>
		<popupPickerView :list="goodsTypeList" ref="popupPickerView" @callback="confirm" />
	</view>
</template>
<script>
	import { mapState } from 'vuex';
	import popupPickerView from '../components/popup-picker-view.vue';
	export default {
		components: {
			popupPickerView
		},
		data() {
			return {
				goodsTypeUrl: '/goodsTypeManageApi/getGoodsTypeList',
				goodsInfoUrl: '/storeGoodsManageApi/getGoodsInfo',
				saveUrl: '/storeGoodsManageApi/update',
				checkSpecialUrl: '/storeGoodsManageApi/checkSpecial',
				fileList: [],
				goodsTypeList: [],
				typeList: [],
				modelBeanList: [{
					id: 1,
					modelId: '',
					modelName: '',
					packingFee: '',
					salePrice: '',
					costPrice: '',
					inventory: ''
				}],
				propertyBeanList: [],
				goodsInfo: {
					goodsId: '',
					pictureUrl: '',
					goodsName: '',
					miniNum: 1,
					utils: '份',
					goodsTypeId: '',
					goodsTypeName: '',
					rmk: '',
					modelBeanList: [],
					propertyBeanList: [],
				},
				specifications: [{
					id: 1,
					name: '',
					price: 1,
					package: 0,
					inventory: 0,
					maxInventory: 9999
				}],
				params: [{
					id: 1,
					name: '',
					subdivide: ''
				}],
				file: {},
				event: {},
				goodsId: '',
				isSpecial: false,
				handleControl: true
			}
		},
		computed: {
			...mapState(['storeInfo'])
		},
		methods: {
			getGoodsInfo(goodsId) {
				uni.showLoading({
					title: '加载中'
				});
				var dateStr = (new Date()).getTime();
				var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
				this.requst({
					url: this.goodsInfoUrl,
					data: {
						timestamp: dateStr,
						sign: sign,
						storeId: this.storeInfo.storeId,
						storeUserId: this.storeInfo.storeUserId,
						goodsId: goodsId
					},
					success: res => {
						if (res.data.rtnBean.rtnCode == 0) {
							this.goodsInfo = res.data.obj;
							if (this.goodsInfo.utils === '' || this.goodsInfo.utils === null) {
								this.goodsInfo.utils = '份'
							}
							this.modelBeanList = this.goodsInfo.modelBeanList;
							
							let that = this
							if (that.modelBeanList.length > 0) {
								for (var i = 0; i < that.modelBeanList.length; i++) {
									that.modelBeanList[i].costPrice = that.moneyConverter(that.modelBeanList[i].costPrice)
									that.modelBeanList[i].packingFee = that.moneyConverter(that.modelBeanList[i].packingFee)
									that.$set(that.modelBeanList[i], 'id', i + 1)
								}
							}
							if (that.goodsInfo.propertyBeanList != null) {
								that.propertyBeanList = that.goodsInfo.propertyBeanList;
								if (that.propertyBeanList != null && that.propertyBeanList.length > 0) {
									for (var i = 0; i < that.propertyBeanList.length; i++) {
										that.$set(that.propertyBeanList[i], 'id', i + 1)
									}
								}
							}
							
							let picUrl = this.goodsInfo.pictureUrl;
							this.fileList.push({
								url: picUrl
							})
							this.check();
						}
						uni.hideLoading();
					},
					fail: (e) => {
						console.log("接口调用失败:" + JSON.stringify(e));
						uni.hideLoading();
					}
				})
			},
			check() {
				var dateStr = (new Date()).getTime();
				var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
				this.requst({
					url: this.checkSpecialUrl,
					data: {
						timestamp: dateStr,
						sign: sign,
						storeId: this.storeInfo.storeId,
						storeUserId: this.storeInfo.storeUserId,
						goodsId: this.goodsId
					},
					success: res => {
						if (res.data.rtnBean.rtnCode == 0) {
							this.isSpecial = res.data.obj
						}
						uni.hideLoading();
					},
					fail: (e) => {
						console.log("接口调用失败:" + JSON.stringify(e));
						uni.hideLoading();
					}
				});
			},
			addModel() {
				if (this.isSpecial) {
					this.$api.msg("该商品已参加特价菜活动,只有一个规格");
					return false;
				}
				let model = {
					id: this.modelBeanList.length + 1,
					modelId: '',
					modelName: '',
					packingFee: '',
					salePrice: '',
					costPrice: '',
					inventory: ''
				}
				this.modelBeanList.push(model)
			},
			deleteModel(item) {
				if (this.modelBeanList.length === 1) {
					
					uni.showToast({
						title: "商品规格至少有一个",
						duration: 3000,
						icon: 'none',
					});
									
					return false
				}
				let index = this.modelBeanList.indexOf(item)
				if (index !== -1) {
					this.modelBeanList.splice(index, 1)
				} 
			},
			addProperty() {
				// if (this.isSpecial) {
				// 	this.$api.msg("该商品已参加特价菜活动,无法添加属性");
				// 	return false;
				// }
				if (this.propertyBeanList.length == 4) {
					uni.showToast({
						title: "商品属性最多有四个",
						duration: 3000,
						icon: 'none',
					});
									
					return false
				}
				let model = {
					id: this.propertyBeanList.length + 1,
					propertyId: '',
					propertyName: '',
					propertyList: '',
					goodsId: ''
				}
				this.propertyBeanList.push(model)
			},
			deleteProperty(item) {
				// if (this.propertyBeanList.length === 1) {
				// 	return false
				// }
				let index = this.propertyBeanList.indexOf(item)
				if (index !== -1) {
					this.propertyBeanList.splice(index, 1)
				} 
			},
			getGoodsTypeList() {
				uni.showLoading({
					title: '加载中'
				});
				var dateStr = (new Date()).getTime();
				var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
				this.requst({
					url: this.goodsTypeUrl,
					data: {
						timestamp: dateStr,
						sign: sign,
						storeId: this.storeInfo.storeId,
						storeUserId: this.storeInfo.storeUserId
					},
					success: res => {
						if (res.data.rtnBean.rtnCode == 0) {
							let arr = []
							arr.push(res.data.list);
							this.typeList = res.data.list
							this.goodsTypeList = arr;
							}
						uni.hideLoading();
					},
					fail: (e) => {
						console.log("接口调用失败:" + JSON.stringify(e));
						uni.hideLoading();
					}
				})
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.goodsInfo.pictureUrl = ''
			},
			// 新增图片
			async afterRead(event) {
				this.event = event
				this.file = event.file
				let file1 = event.file
				let fileListLen = this.fileList.length
				// lists.map((item) => {
				this.fileList.push({
					...file1,
					status: 'success',
					// message: '上传中'
				})
				this.goodsInfo.pictureUrl = this.file.url

			},
			handCheckGoodsType () {
				this.$refs.popupPickerView.show()
			},
			confirm(e) {
				this.goodsInfo.goodsTypeId = e.goodsTypeId;
				this.goodsInfo.goodsTypeName = e.goodsTypeName;
			},
			handChangeClass() {
			},
			addAll(index) {
				this.modelBeanList[index].inventory = 9999;
			},
			reset(index) {
				this.modelBeanList[index].inventory = 0;
			},
			save() {
				uni.showLoading({
					title: '保存中'
				})
		
				this.goodsInfo.modelBeanList = this.modelBeanList;
				this.goodsInfo.propertyBeanList= this.propertyBeanList;
				let goodsType = ''
				if (this.goodsInfo.goodsTypeId !== null || this.goodsInfo.goodsTypeId !== '') {
					for (var i = 0; i < this.typeList.length; i++) {
						if(this.typeList[i].goodsTypeId === this.goodsInfo.goodsTypeId) {
							goodsType = this.typeList[i]
						}
					}
					console.log(goodsType);
				}
				
				if (this.goodsInfo.pictureUrl == null || this.goodsInfo.pictureUrl == undefined || this.goodsInfo.pictureUrl == '') {
					this.$api.msg("请上传商品图片");
					return;
				} else if (this.goodsInfo.goodsName == null || this.goodsInfo.goodsName == '') {
					this.$api.msg("请输入商品名称");
					return;
				} else if (this.goodsInfo.goodsName.length > 30) {
					this.$api.msg("商品名称不能超过30个字符");
					return;
				} else if (this.goodsInfo.utils.length > 10 ) {
					this.$api.msg("商品单位最多输入十个字符");
					return;
				} else if (this.goodsInfo.goodsTypeId == null || this.goodsInfo.goodsTypeId == '') {
					this.$api.msg("请选择商品分类");
					return;
				} else if (this.isSpecial && goodsType !== '' && goodsType.type === 1) {
					this.$api.msg("特价菜不能修改为必选商品");
					return;
				} else if (this.modelBeanList.length == 0 || this.modelBeanList == '') {
					this.$api.msg("请添加商品规格");
					return;
				} else {
					
					let that = this
					let aoo = true
					if(that.propertyBeanList != null && that.propertyBeanList.length > 0) {
						let num = false
						if (that.propertyBeanList.length > 0 || that.propertyBeanList[0].propertyName || that.propertyBeanList[0].propertyList) {
							num = true
						}
						for (var i = 0; i < that.propertyBeanList.length; i++) {
							if (num){
								if (that.propertyBeanList[i].propertyName == null || that.propertyBeanList[i].propertyName == '') {
									that.$api.msg("请输入属性名称");
									aoo = false;
									return;
								} else if (that.propertyBeanList[i].propertyList == null || that.propertyBeanList[i].propertyList == '') {
									that.$api.msg("请输入属性描述");
									aoo = false;
									return;
								} else if (that.propertyBeanList[i].propertyList.indexOf(',') == -1 && that.propertyBeanList[i].propertyList.indexOf('，') == -1) {
									this.$api.msg("属性描述必须大于等于两个");
									aoo = false;
									return;
								}
								let str = that.propertyBeanList[i].propertyList.replace(/，/g,',')
								
								let arr = str.split(",").map(el => el.trim()).filter(item => item.trim() != '')
								if(arr.length <=1){
									this.$api.msg("属性描述必须大于等于两个");
									aoo = false;
									return;
								}
								that.propertyBeanList[i].propertyList = arr.join(',')
							}
						}
					}
					
					
					let boo = true;
					
					let regPrice = (/^[0-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/);
					// let regPrice = (/^\d+(?=\.{0,1}\d+$|$)/);
					if (that.modelBeanList.length > 0) {
						for (var i = 0; i < that.modelBeanList.length; i++) {
							if (that.modelBeanList[i].modelName == null || that.modelBeanList[i].modelName == '') {
								that.$api.msg("请输入规格名称");
								boo = false;
								return;
							} else if (that.modelBeanList[i].costPrice === null || that.modelBeanList[i].costPrice === '') {
								that.$api.msg("请输入价格");
								boo = false;
								return;
							} else if (!regPrice.test(that.modelBeanList[i].costPrice)) {
								that.$api.msg("价格只能是整数或小数点后两位");
								boo = false;
								return;
							} else if (that.modelBeanList[i].packingFee === null || that.modelBeanList[i].packingFee ===
								undefined || that.modelBeanList[i].packingFee === '') {
								that.$api.msg("请输入餐盒费");
								boo = false;
								return;
							} else if (that.modelBeanList[i].inventory === null || that.modelBeanList[i].inventory === '') {
								that.$api.msg("请输入库存");
								boo = false;
								return;
							} else if (that.modelBeanList[i].inventory > Number(9999)) {
								that.$api.msg("库存不能超过最大库存数");
								boo = false;
								return;
							} else if (that.isSpecial && Number(that.modelBeanList[i].costPrice * 100) < Number(that.modelBeanList[i].salePrice)) {
								that.$api.msg("商品价格不能小于售价");
								boo = false;
								return;
							}
						}
					}
					if (aoo && boo) {
						
						var dateStr = (new Date()).getTime();
						var sign = that.getSign('' + that.storeInfo.storeUserId + dateStr);
						if (that.event.file) {
							return new Promise((resolve, reject) => {
								let a = uni.uploadFile({
									url: that.storeInfo.code + this.saveUrl,
									filePath: that.goodsInfo.pictureUrl,
									name: 'file',
									formData: {
										timestamp: dateStr,
										sign: sign,
										storeId: that.storeInfo.storeId,
										storeUserId: that.storeInfo.storeUserId,
										goodsId: that.goodsInfo.goodsId,
										pictureUrl: that.goodsInfo.pictureUrl,
										goodsName: that.goodsInfo.goodsName,
										miniNum: that.goodsInfo.miniNum || 1,
										utils: that.goodsInfo.utils || '份',
										goodsTypeId: that.goodsInfo.goodsTypeId,
										rmk: that.goodsInfo.rmk || '',
										modelBeanListJson: JSON.stringify(that.goodsInfo.modelBeanList),
										propertyBeanListJson: JSON.stringify(that.goodsInfo.propertyBeanList)
									},
									header: {
										'content-type': 'multipart/form-data'
									}, // header 值
									success: (res) => {
										if(res.data) {
											let data = JSON.parse(res.data)
											if (data.rtnBean.rtnCode == 0) {
												uni.hideLoading();
												uni.showToast({
													title: "保存成功",
													duration: 3000,
													icon: 'none',
												});
											
												var pages = getCurrentPages();
												var prevPage = pages[pages.length - 2]; //上一个页面
												prevPage.$vm.loadData()
												uni.navigateBack();
												// return;
											} else {
												uni.hideLoading();
												if (data.rtnBean.rtnMsg != '') {
													that.$api.msg(data.rtnBean.rtnMsg);
												}
											}
										} else {
											uni.hideLoading();
											that.$api.msg('商品更新失败，请稍后重试');
										}
										
									},
									fail: (res) => {
										uni.hideLoading();
									}
								});
							})
						} else {
							that.requst({
								url: that.saveUrl,
								data: {
									timestamp: dateStr,
									sign: sign,
									storeId: that.storeInfo.storeId,
									storeUserId: that.storeInfo.storeUserId,
									goodsId: that.goodsInfo.goodsId,
									pictureUrl: that.goodsInfo.pictureUrl,
									goodsName: that.goodsInfo.goodsName,
									miniNum: that.goodsInfo.miniNum || 1,
									utils: that.goodsInfo.utils || '份',
									goodsTypeId: that.goodsInfo.goodsTypeId,
									rmk: that.goodsInfo.rmk || '',
									modelBeanListJson: JSON.stringify(that.goodsInfo.modelBeanList),
									propertyBeanListJson: JSON.stringify(that.goodsInfo.propertyBeanList)
								},
								success: res => {
									if (res.data.rtnBean.rtnCode == 0) {
										uni.hideLoading();
										uni.showToast({
											title: "保存成功",
											duration: 3000,
											icon: 'none',
										});

										var pages = getCurrentPages();
										var prevPage = pages[pages.length - 2]; //上一个页面
										prevPage.$vm.loadData()
										uni.navigateBack();
										// return;
									} else {
										uni.hideLoading();
										if (res.data.rtnBean.rtnMsg != '') {
											that.$api.msg(res.data.rtnBean.rtnMsg);
										}
									}
									
								},
								fail: (e) => {
									that.isDisable = false;
									console.log("接口调用失败:" + JSON.stringify(e));
									uni.hideLoading();
								},
							});
						}

					}
				}
				// uni.navigateBack();
			},
			inventoryInput(index,e){
				// 只能输入数字
				const inputType = /[^\d]/g
				this.$nextTick(function () {
					this.modelBeanList[index].inventory = e.replace(inputType,'');
				})
			}
		},
		onLoad(options) {
			this.goodsId = options.goodsId
			if (options.goodsId != undefined && options.goodsId != null && options.goodsId != '') {
				this.getGoodsInfo(options.goodsId);
			}
			this.getGoodsTypeList();
		}
	}
</script>
<style lang="scss" scoped>
	.required {
		color: red;
		margin-left: 5px;
	}
	.goods-edit-page {
		background-color: #f5f5f5;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}

	.save {
		width: 100vw;
		@include flexCenter;
		z-index: 99;
		margin-top: 40rpx;

		.btn {
			width: 80vw;
			height: 80rpx;
			border-radius: 40rpx;
			background-color: $theme-color;
			color: #fff;
			@include flexCenter;
		}
	}

	.scroll-content {
		height: calc(100vh - 120rpx - env(safe-area-inset-bottom));
		height: calc(100vh - 120rpx - constant(safe-area-inset-bottom));
	}

	.title {
		height: 80rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		@include flexStart;
		font-size: 36rpx;
	}

	.cell-group {
		background-color: #fff;
		border-top: 2px solid transparent;

		.cell {
			padding: 0 20rpx;
			margin: 20rpx 0;
			border-bottom: 2rpx solid #ececec;
			font-size: $font-base;
		}

		.cell.dubble {
			height: 200rpx;
		}

		.cell.h240 {
			height: 240rpx;
			margin-bottom: 0;
		}
		.cell.h280 {
			height: 280rpx;
			margin-bottom: 0;
		}

		.row {
			@include flexStart;
			padding: 20rpx 0;
		}

		.dubble {
			.row {
				@include flexStart(flex-start);
			}
		}

		.label {
			width: 180rpx;
		}

		.label.w280 {
			width: 280rpx;
		}

		.value {
			width: calc(100% - 180rpx);
			@include between;
		}

		.class-name {
			width: calc(100% - 100rpx);
		}

		.desc {
			color: $uni-color-button;
			margin-bottom: 20rpx;
			font-size: $font-sm;
		}
	}

	.list-group {
		background-color: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: $font-base;

		.item {
			box-shadow: 0 0 10rpx #d1d1d1;
			padding: 20rpx 20rpx 1rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
		}

		.cell {
			height: 60rpx;
			@include flexStart;
			margin-bottom: 20rpx;
			border-bottom: 2rpx solid #ececec;
		}

		.label {
			width: 160rpx;
		}

		.value {
			width: calc(100% - 160rpx);
			@include flexStart;

			.btn {
				margin-left: 50rpx;
				color: $theme-color;
			}
		}

		.no-bor {
			border: none;
		}

		.del-btn {
			width: 100%;
			color: $uni-color-button;
			text-align: center;
		}

		.dubble {
			@include flexStart(flex-start);
			padding-top: 20rpx;
			box-sizing: border-box;
		}

		.h240 {
			height: 240rpx;
		}
	}
	.add-specificatin {
		width: 100%;
		text-align: center;
		color: $theme-color;
		font-size: $font-lg;
	}
</style>