LocalLivingServicesUniapp/pages/product/creatProduct.vue

<template>
	<view class="creat">
		<view class="head">
			<span class="cuIcon-back" @click="back"></span>
			<view class="case">
				创建商品
			</view>
		</view>
		<view class="content">
			<view class="form" v-if="schedule ==1">
				<view class="titl">
					基础信息
				</view>
				<view class="item">
					<view class="label">
						商品分类<span>*</span>
					</view>
					<view class="picker" @click="isSelectType = true">
						<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="fileList" 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 :action="action" :file-list="fileList" 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>
			<!-- <u-form :model="form" ref="uForm" v-if="schedule ==1"
				style="background-color: #fff;padding: 16rpx;border-radius: 16rpx;">
				<view class="titl">
					基础信息
				</view>
				<u-form-item style="display: flex;">
					<label>
						商品分类 <span style="color: red;">*</span>
					</label>
					<picker v-model="form.sex" :range="genderOptions" range-key="label" @change="onGenderChange">
						<view class="">{{ form.sex || '请选择分类' }}</view>
					</picker>
				</u-form-item>
				<u-form-item label="商品名称" label-width="200"><u-input v-model="form.intro" /></u-form-item>
				<u-form-item label="商品封面图" label-width="200">
					<u-upload :action="action" :file-list="fileList"></u-upload>
				</u-form-item>
				<u-form-item label="商品详情图" label-width="200">
					<u-upload :action="action" :file-list="fileList"></u-upload>
				</u-form-item>
				<u-form-item label="原价" label-width="200"><u-input v-model="form.intro" /></u-form-item>
				<u-form-item label="实际售价" label-width="200"><u-input v-model="form.intro" /></u-form-item>
				<u-form-item label="组合套餐" label-width="200">
					<view class="" @click="goGroup">
						设置组合套餐
					</view>
				</u-form-item>
			</u-form> -->
			<view class="form" v-if="schedule == 2">
				<view class="titl ">
					售卖/使用信息
				</view>
				<view class="item">
					<view class="label">
						售卖时间<span>*</span>
					</view>
					<view class="picker set inp" @click="isSelectDate = true">
						去设置
						<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 v-model="form.productName" placeholder="输入库存数量" />
					</view>
				</view>
				<view class="item">
					<view class="label">
						可用时间<span>*</span>
					</view>
					<view class="picker set">
						去设置
						<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-switch v-model="form.checked" style="margin-left:8rpx;" size="28"></u-switch>
					</view>
				</view>
				<view class="item">
					<view class="label">
						退款规则
					</view>
					<view class="picker set">
						请选择
						<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
					</view>
				</view>
				<view class="item upload">
					<view class="label">
						使用说明
					</view>
					<view class="textarea">
						<u-input v-model="form.num" type="textarea" placeholder="输入库存数量" maxlength="500" />
					</view>
					<view class="num">
						0/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">
					提交审核
				</view>
			</view>
		</view>
		<selectDate @confirm="handleConfirm" @close="closeSelectDate" v-if="isSelectDate" />
		<refund v-if="isRefund" saveRule="saveFound" @closeRule="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 selectDate from '@/components/product/select_date.vue'
	import refund from '@/components/refund.vue'
	export default {
		components: {
			selectDate,
			refund
		},
		data() {
			return {
				form: {
					productName: '',
					productImage: '',
					intro: '',
					sex: '',
					checked: false,
					num: 0
				},
				action: 'http://192.168.0.52:8080/jeecg-boot/sys/common/upload', //图片上传地址
				checkboxList: [{
						name: '苹果',
						checked: false,
						disabled: false
					},
					{
						name: '雪梨',
						checked: false,
						disabled: false
					},
					{
						name: '柠檬',
						checked: false,
						disabled: false
					}
				],
				genderOptions: [{
						label: '男',
						value: 'male'
					},
					{
						label: '女',
						value: 'female'
					},
					{
						label: '其他',
						value: 'other'
					}
				],
				schedule: 1, //进度
				fileList: [],
				selectedTime: null,
				isSelectDate: false,
				isRefund: false,
				selectedRules: null,
				isSelectType: false,
				treeLeft: [], //一级列表
				treeCenter: [], //二级列表
				treeRight: [], //三级列表
				currentLeft: null, //一级选中
				currentCenter: null, //二级选中
				currentRight: null, //三级选中
				productType: [], //选中的商品分类id
				selectTypeList: [], //选中的商品分类名称
				showText: ''
			}
		},
		methods: {
			onGenderChange(event) {
				const selectedIndex = event.detail.value;
				this.form.sex = this.genderOptions[selectedIndex].label;
				this.selectedGenderLabel = this.genderOptions[selectedIndex].label;
			},
			//下一步
			next() {
				this.schedule += 1
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				this.form.productImage = files[0].response.message
				console.log(this.form.productImage)
			},
			// 跳转至组合商品页
			goGroup() {
				uni.navigateTo({
					url: '/pages/product/group'
				})
			},
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 处理 confirm 事件，接收子组件传递的时间段数据
			handleConfirm(time) {
				this.selectedTime = time; // 保存时间段数据
				console.log(this.selectedTime)
				this.isSelectDate = false
			},
			//隐藏弹窗
			closeSelectDate() {
				this.isSelectDate = false
			},
			//跳转至可用时间
			setUsable() {
				uni.navigateTo({
					url: '/pages/product/usable'
				})
			},
			//跳转至预约规则
			setRule() {
				uni.navigateTo({
					url: '/pages/product/rule'
				})
			},
			saveFound(rules) {
				this.selectedRules = rules; // 保存退款规则
				this.selectedRules = 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
					}
				})
			},
			//选中一级
			selectLeft(item, index) {
				this.showText = ''
				this.productType = []
				this.selectTypeList = []
				this.currentLeft = index
				this.currentCenter = null
				this.currentRight = null
				this.productType.push(item.id)
				this.selectTypeList.push(item.name)
				this.getCenterTree(item.id)
			},
			//选中二级
			selectRight(item, index) {
				this.currentCenter = index
				this.currentRight = null
				this.productType.push(item.id)
				this.selectTypeList.push(item.name)
				this.getRightTree(item.id)
			},
			//选中三级
			selectLast(item, index) {
				this.productType.push(item.id)
				this.selectTypeList.push(item.name)
				this.currentRight = index
			},
			//确定分类
			selectType() {
				this.isSelectType = false
				this.showText = this.selectTypeList.join('·')
			},
			//关闭选择分类弹窗
			closePopup() {
				this.isSelectType = false
			}
		},
		mounted() {
			this.getLeftTree()
		}
	}
</script>

<style lang="scss" scoped>
	.creat {
		width: 100vw;
		height: 100vh;
		background: #F7F8FC;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

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

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