LocalLivingServicesUniapp/pages/product/creatProduct.vue

<template>
	<view class="creat">
		<view class="top"></view>
		<view class="head">
			<span class="cuIcon-back" @click="back"></span>
			<view class="case">
				创建商品
			</view>
		</view>
		<view class="content">
			<view class="form" v-show="schedule ==1">
				<view class="titl">
					基础信息
				</view>
				<view class="item">
					<view class="label">
						商品分类<span>*</span>
					</view>
					<view class="picker" @click="selectProductType">
						<span v-if="showText == ''">选择商品分类</span>
						<span v-else style="color: #333333;">{{showText}}</span>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="label">
						商品名称<span>*</span>
					</view>
					<view class="picker">
						<u-input v-model="form.productName" placeholder="输入商品名称" />
					</view>
				</view>
				<view class="item upload">
					<view class="label">
						商品封面图<span>*</span>
					</view>
					<view class="tips">
						支持jpg、png格式，尺寸为00px*00px
					</view>
					<u-upload ref="uUpload" :action="action" :file-list="fmImageList" @on-success="handleSuccess"
						@on-remove="handleRemove" max-count="1" width="140rpx" height="140rpx"></u-upload>
				</view>
				<view class="item upload">
					<view class="label">
						商品详情图<span>*</span>
					</view>
					<view class="tips">
						支持jpg、png格式，尺寸为00px*00px，最多20张
					</view>
					<u-upload ref="dUpload" :action="action" :file-list="xqImage" @on-success="detailsSuccess"
						@on-remove="detailsRemove" max-count="20" width="140rpx" height="140rpx"></u-upload>
				</view>
				<view class="item">
					<view class="label">
						原价<span>*</span>
					</view>
					<view class="picker">
						<u-input v-model="form.price" placeholder="输入商品原价" />
					</view>
					<view class="unit">
						元
					</view>
				</view>
				<view class="item">
					<view class="label">
						实际售价<span>*</span>
					</view>
					<view class="picker">
						<u-input type="num" v-model="form.soldPrice" placeholder="输入客户实际支付价" />
					</view>
					<view class="unit">
						元
					</view>
				</view>
				<view class="item">
					<view class="label">
						组合套餐
					</view>
					<view class="picker set" @click="goGroup">
						去设置
						<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
					</view>
				</view>
			</view>
			<view class="form" v-show="schedule == 2">
				<view class="titl ">
					售卖/使用信息
				</view>
				<view class="item">
					<view class="label">
						售卖时间<span>*</span>
					</view>
					<view class="picker set inp" @click="selectDate">
						<u-input placeholder="去设置" v-model="showDate" @click="selectDate" />
						<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="label">
						库存<span>*</span>
					</view>
					<view class="picker set">
						<u-input type="number" v-model="form.stockQuantity" placeholder="输入库存数量" />
					</view>
				</view>
				<view class="item">
					<view class="label">
						可用时间<span>*</span>
					</view>
					<view class="picker set">
						<view class="picker set inp" @click="setUsable" v-if="showSellDate == ''">
							<u-input placeholder="去设置" />
							<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
						</view>
						<view class="picker set inp" @click="setUsable" v-else>
							<span style="color: #333333;">{{showSellDate}}</span>
							<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="label">
						需要预约<span>*</span>
					</view>
					<view class="picker set">
						<u-switch v-model="makeChecked" style="margin-left:8rpx;" size="28"></u-switch>
					</view>
				</view>
				<view class="item">
					<view class="label">
						退款规则
					</view>
					<view class="picker set" @click="isRefund = true">
						<view class="" v-if="showRule" style="color: #333333;">
							{{showRule}}
						</view>
						<view class="" v-else>
							请选择
							<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
						</view>
					</view>
				</view>
				<view class="item upload">
					<view class="label">
						使用说明
					</view>
					<view class="textarea">
						<u-input v-model="form.instructions" type="textarea" placeholder="输入库存数量" maxlength="500" />
					</view>
					<view class="num">
						<span v-if="form.instructions">{{form.instructions.length>0?form.instructions.length:'0'}}</span>/500
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<view class="next" @click="next" v-if="schedule==1">
				下一步
			</view>
			<view class="handle" v-else>
				<view class="back" @click="schedule-=1">
					上一步
				</view>
				<view class="submit" @click="submit">
					提交审核
				</view>
			</view>
		</view>
		<rangTime ref="rangTime" :mode="mode" @onSubmit="onEndTimeChange" />
		<refund v-if="isRefund" @confirm="saveFound" @close="cutRule" />
		<view class="popup" v-if="isSelectType">
			<view class="model">
				<view class="title">
					商品品类
					<image src="/static/index/cut.png" mode="" @click="closePopup"></image>
				</view>
				<view class="tree">
					<view class="left">
						<view class="item" :class="currentLeft == index?'active':''" v-for="(item,index) in treeLeft" :key="item.id"
							@click="selectLeft(item,index)">
							{{item.name}}
						</view>
					</view>
					<view class="left border">
						<view class="item" :class="currentCenter == index?'active':''" v-for="(item,index) in treeCenter"
							:key="item.id" @click="selectRight(item,index)">
							{{item.name}}
						</view>
					</view>
					<view class="left">
						<view class="item" :class="currentRight == index?'active':''" v-for="(item,index) in treeRight"
							:key="item.id" @click="selectLast(item,index)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="sub">
					<view class="submit" @click="selectType">
						确定
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import rangTime from '../../components/dengrq-datetime-picker/dateSelector/index.vue'
	import refund from '@/components/product/refund.vue'
	export default {
		components: {
			rangTime,
			refund
		},
		data() {
			return {
				mode: 1,
				form: {
					instructions: '',
					preBook: 0,
					merchantId: null
					// categoryId:'',
					// productName: '',
					// productImage: '',
					// checked: null,
					// num: 0,
					// refundLabel:null,
					// refundConfirm:null
				},
				fmImageList: [], //封面图回显
				xqImage: [], //详情图回显
				showRule: '', //显示退款规则文字
				action: 'http://192.168.0.36:8080/jeecg-boot/sys/common/upload', //图片上传地址
				schedule: 2, //进度
				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/', //上传图片前缀+
				productId: '',
				postImage: [], //上传图片详情
			}
		},
		methods: {
			// 上传封面图成功回调
			handleSuccess(res, index, lists) {

				this.form.productImage = this.imageHttp + res.message
			},
			// 移除封面图文件回调
			handleRemove(index, lists) {
				this.fmImageList = [];
			},
			//上传详情图
			detailsSuccess(res, index, lists) {
				// this.postImage.push({url:this.imageHttp + res.message})
				this.postImage = lists

			},
			detailsRemove(index, lists) {
				this.postImage = lists
			},
			//下一步
			next() {
				let temp = []
				if (this.postImage.length > 0) {
					this.postImage.forEach(item => {
						temp.push(this.imageHttp + item.response.message)
					})
				}
				if (this.xqImage.length > 0) {
					this.xqImage.forEach((item => {
						temp.push(item.url)
					}))

				}
				this.form.detailImages = temp.join(',')
				//基础信息必填提示
				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.form.detailImages) {
					uni.showToast({
						title: '请上传商品详情图',
						icon: 'none'
					});
					return
				}
				if (!this.form.price) {
					uni.showToast({
						title: '请输入商品原价',
						icon: 'none'
					});
					return
				}
				if (!this.form.soldPrice) {
					uni.showToast({
						title: '请输入商品售价',
						icon: 'none'
					});
					return
				} else {
					this.schedule += 1
				}

			},
			// 跳转至组合商品页
			goGroup() {
				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'
				})
			},
			// 保存退款规则
			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)
						}
					}
				})
			},
			//获取商品分类三级列表
			getRightTree(id) {
				this.$http.get("/sys/category/childList?pid=" + id, {}).then(res => {
					if (res.data.code == 0) {
						this.treeRight = res.data.result
					}
				})
			},
			selectProductType() {
				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 = []
				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
			},
			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() {
				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.productId == '') {
						this.$http.post("/app/product/add", this.form).then(res => {
							if (res.data.code == 200) {
								uni.showToast({
									title: '添加成功',
									icon: 'none'
								});
							}
							uni.removeStorage({
								key: 'smdate',
							});
							uni.removeStorage({
								key: 'group',
							});
							this.back()
						})
					} 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'
								});
							}
							uni.removeStorage({
								key: 'smdate',
							});
							uni.removeStorage({
								key: 'group',
							});
							this.back()
						})
					}

				}
			},
			//回显数据
			getForm() {
				this.$http.get("/app/product/queryById?id=" + this.productId, {}).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						this.form = res.data.result
						this.showText = res.data.result.productCategory
						this.fmImageList.push({
							url: res.data.result.productImage
						})
						let xqtemp = []
						xqtemp = res.data.result.detailImages.split(',')
						xqtemp.map(item => {
							this.xqImage.push({
								url: item
							})
						})
						this.showDate = res.data.result.saleStartDate.slice(0, 10) + '-' + res.data.result.saleEndDate.slice(0,
							10)
						if (res.data.result.availableEndDate) {
							this.showSellDate = res.data.result.availableStartDate.slice(0, 10) + '-' + res.data.result
								.availableEndDate.slice(0, 10)
						} else if (res.data.result.expirationDays) {
							this.showSellDate = res.data.result.expirationDays + '天后失效'
						}
						res.data.result.preBook == 0 ? this.makeChecked = false : this.makeChecked = true
						this.showRule = res.data.result.refundLabelName + '·' + res.data.result.refundConfirmName
						uni.setStorage({
							key: 'group',
							data: res.data.result.productGroups
						})
					}
				})
			}
		},
		mounted() {
			this.getLeftTree()
			this.getForm()
		},
		onLoad(options) {
			if (options.productId) {
				this.productId = options.productId
			}
		},
		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
					} else if (res.data.expirationDays) {
						this.form.expirationDays = res.data.expirationDays
						this.form.availableEndDate = null
						this.form.availableStartDate = null
						this.$nextTick(() => {
							this.showSellDate = res.data.expirationDays + '天后失效'
						});
					}

				}
			})
			uni.getStorage({
				key: 'group',
				success: function(res) {
					that.form.productGroups = res.data
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.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;
			align-items: center;
			background-color: #fff;
			position: relative;

			.cuIcon-back {
				font-size: 40rpx;
				margin-right: 40rpx;
			}

			.case {
				font-size: 36rpx;
				font-weight: 600;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.step {
				position: absolute;
				right: 20rpx;
			}
		}

		.content {
			width: 100%;
			flex: 1;
			padding: 24rpx;
			overflow-y: auto;

			.titl {
				width: 100%;
				// height: 60rpx;
				font-weight: 500;
				margin-bottom: 16rpx;
			}

			.form {
				background-color: #fff;
				padding: 16rpx;
				border-radius: 16rpx;

				.item {
					width: 100%;
					height: 58rpx;
					border-bottom: 1px solid #EEEEEE;
					display: flex;
					// align-items: center;
					padding-bottom: 16rpx;
					margin-bottom: 16rpx;

					.label {
						margin-right: 20rpx;
						font-weight: 600;
						font-size: 28rpx;
						min-width: 126rpx;

						span {
							color: red;
						}
					}

					.picker {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 28rpx;
						color: #999999;
					}

					.set {
						display: flex;
						justify-content: flex-end;

						/deep/.u-input {
							text-align: right !important;
						}
					}
				}

				.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;
				}

				.num {
					width: 100%;
					text-align: right;
					font-size: 24rpx;
					color: #999999;
					margin-top: 6rpx;
				}
			}
		}

		.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;

				.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;
				}
			}
		}

		.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;

			.model {
				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;
					}
				}

				.tree {
					display: flex;
					height: 546rpx;

					.left {
						overflow-y: auto;

						.item {
							width: 224rpx;
							height: 78rpx;
							padding: 20rpx;
							font-size: 26rpx;
						}

						.active {
							background: rgba(68, 154, 255, 0.1);
							color: #2983EC;
						}
					}

					.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;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	/deep/.u-upload__button {
		width: 250rpx !important;
		height: 250rpx !important;
	}
</style>