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">
				{{productId?'编辑商品':'创建商品' }}
			</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 :disabled="tabIndex==1" v-model="form.productName" placeholder="输入商品名称" />
					</view>
				</view>
				<view class="item upload">
					<view class="label">
						商品封面图<span>*</span>
					</view>
					<view class="tips">
						支持jpg、png格式
					</view>
					<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>
				</view>
				<view class="item upload">
					<view class="label">
						商品详情图<span v-if="tabIndex=='0'">*</span>
					</view>
					<view class="tips">
						支持jpg、png格式，最多20张
					</view>
					<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"
						@on-remove="detailsRemove" max-count="20" width="140rpx" height="140rpx"></u-upload>
				</view>
				<view class="item" v-if="form.categoryId != '1945013773786701826'">
					<view class="label">
						原价<span>*</span>
					</view>
					<view class="picker">
						<u-input :disabled="tabIndex==1" v-model="form.price" placeholder="输入商品原价" />
					</view>
					<view class="unit">
						元
					</view>
				</view>
				<view class="item" v-if="form.categoryId != '1945013773786701826'">
					<view class="label">
						实际售价<span>*</span>
					</view>
					<view class="picker">
						<u-input type="num" :disabled="form.isUpdatePrice==0" v-model="form.soldPrice" placeholder="输入客户实际支付价" />
					</view>
					<view class="unit">
						元
					</view>
				</view>
				<view class="item" v-if="form.categoryId != '1945013773786701826'">
					<view class="label">
						组合套餐
					</view>
					<view class="picker set" @click="goGroup">
						去设置
						<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
					</view>
				</view>
				<!-- 钣金喷漆 -->
				<view class="spray" v-if="form.categoryId == '1945013773786701826'">
					<view class="label" style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
						商品规格
						<view class="change">
							<span @click="allSelect">
								<image src="/static/product/select.png" mode="" v-if="all"></image>
								<image src="/static/product/round.png" mode="" v-else></image>
								全选
							</span>
							<span @click="reverseSelsct">
								<image src="/static/product/select.png" mode="" v-if="reverse"></image>
								<image src="/static/product/round.png" mode="" v-else></image>
								反选
							</span>
						</view>
					</view>
					<view class="spray_items">
						<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>
							</view>
							<view class="right">
								<view class="name">
									<!-- {{item.craftId}} -->
									{{item.partName}} {{item.positionName}} {{item.craftName}}
								</view>
								<view class="price">
									<view class="option">原价<input v-model="item.price" placeholder="输入商品原价" style="height: 49rpx;" />
									</view>
									<view class="option">参考售价<input v-model="item.soldPrice" placeholder="输入商品参考售价" /></view>
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
			<view v-show="schedule == 2">
				<view class="form" style="margin-bottom: 24rpx;">
					<view class="titl ">
						下单奖励
					</view>
					<view class="prompt">提示:金豆或积分余额不足时，将自动关闭奖励，不影响商品状态</view>
					<view class="item" style="border:none;margin-bottom:0">
						<view class="label">
							金豆奖励
						</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>
						</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, ''):''"
								placeholder="请输入金豆奖励数量" placeholder-class="input-placeholder" />
							<text class="exchange-all">个金豆</text>
						</view>
					</view>
					<view class="item" style="border:none;">
						<view class="label">
							积分奖励
						</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>
						</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, ''):''"
								placeholder="请输入积分奖励数量" placeholder-class="input-placeholder" />
							<text class="exchange-all">个积分</text>
						</view>
					</view>
				</view>
				<view class="form">
					<view class="titl ">
						售卖/使用信息
					</view>
					<view class="item">
						<view class="label">
							售卖时间<span>*</span>
						</view>
						<view class="picker set inp" @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>
					<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" :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="" 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" :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
						</view>
					</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" :title="timeTitle"/>
		<refund v-show="isRefund" :Confirm="form.refundConfirm" :Label="form.refundLabel" @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'

	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
				})
			},
			//选中
			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

			},
			// 移除封面图文件回调
			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'
					});
					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
				}

			},
			// 跳转至组合商品页
			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'
				})

			},
			// 保存退款规则
			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() {
				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 = []
				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() {
				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
								})
							}
							uni.removeStorage({
								key: 'smdate',
							});
							uni.removeStorage({
								key: 'group',
							});

						})
					}

				}
			},
			//回显数据
			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
								})
							})
							console.log(this.xqImage)
						}

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

			.prompt {
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				// padding: 10rpx 0;
				margin-bottom: 18rpx;
			}

			.titl {
				width: 100%;
				// height: 60rpx;
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
				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;

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

						.change {
							display: flex;
							align-items: center;
							font-weight: 400;

							span {
								display: flex;
								align-items: center;
								margin-left: 30rpx;

							}

							image {
								width: 36rpx;
								height: 36rpx;
								font-size: 28rpx;
								margin-right: 4rpx;
							}
						}
					}

					.spray_items {
						.spra {
							height: 106rpx;
							margin-bottom: 32rpx;
							display: flex;
							align-items: start;

							.square {
								margin-right: 12rpx;

								image {
									width: 30rpx;
									height: 40rpx;
								}
							}

							.name {
								display: flex;
								font-size: 28rpx;
								margin-bottom: 16rpx;
							}

							.price {
								height: 49rpx;
								display: flex;
								justify-content: space-between;

								.option {
									display: flex;
									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;
									}
								}

							}
						}


					}
				}

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

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

		}

		input {
			font-size: 28rpx;
		}
	}
</style>