ts_aimz_uni/pages/shop/publishGoods/publishGoods.vue

<template>
	<view class="page-container page-white">
		<view class="content-box">
			<view class="upload-img-box">
				<uni-file-picker ref="imgPicker" :value="files" :del-icon="true" limit="1" fileMediatype="image"
					@delete="delImgs" :auto-upload="false" :image-styles="imageStyles"
					@select="uploadImgToNet"></uni-file-picker>
			</view>

			<view class="content-container">
				<view class="info-title">软著信息</view>
				<!-- 第一部分 -->
				<view class="section">
					<view class="item">
						<text class="label star">软著名称</text>
						<view class="select-content-item">
							<input :class="['value',rightName != '' ? 'v-select':'']" placeholder="请输入软著名称"
								style="flex:1;align-self: center;" :value="rightName" @input="inputRightName" />
							<view @click="doClearRightName" v-if="rightName.length>0" class="icon-clear-line size-32">
							</view>
						</view>
					</view>
					<view class="item">
						<text class="label star">软著分类</text>
						<view class="select-content-no-h">
							<view class="select-item-box" @click="onShowRightType">
								<view v-if="selRightType.length<=0" class="value-hint">请选择软著分类</view>
								<block v-else>
									<block v-for="(item,index) in selRightType" :key="index">
										<view class="select-item-item">
											<text>{{item.dataName}}</text>
										</view>
									</block>
								</block>
							</view>
							<view style="display: flex;flex-direction: row;">
								<view v-if="selRightType.length>0" @click="clearRightType"
									class="icon-clear-line size-32"></view>
								<view v-if="selRightType.length<=0" class="icon-arrow-solid"></view>
							</view>
						</view>
					</view>
					<view class="item">
						<text class="label star">售卖价格</text>
						<view class="select-content-item">
							<input :class="['value', rightPrice != 0 ? 'v-select':'']" type="number" placeholder="请输入售价"
								style="flex:1;align-self: center;" :value="rightPrice" @input="inputRightPrice" />
							<view @click="doClearPrice" v-if="rightPrice != 0" class="icon-clear-line size-32">
							</view>
						</view>
					</view>
					<view class="item">
						<view class="label star">截止售卖日期</view>
						<view class="select-content-item" style="align-items: center;">
							<picker mode="date" style="flex:1;" :value="rightStopDate" :start="curStartDate"
								end="2050-01-01" @change="bindDateChange">
								<view :class="['select-time', rightStopDate ==''? 'value-hint':'']">
									{{rightStopDate != ''? rightStopDate:'请选择截止售卖日期'}}
								</view>
							</picker>
							<view style="display: flex;flex-direction: row;">
								<view v-if="rightStopDate !=''" @click="clearTime" class="icon-clear-line size-32">
								</view>
								<view v-if="rightStopDate==''" class="icon-calendar-ind size-32"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="info-title">著作权人信息</view>
				<!-- 第一部分 -->
				<view class="section">
					<view class="item">
						<text class="label star">类别</text>
						<view class="select-content-item">
							<picker mode="selector" style="flex:1;" :range="personType" range-key="dataName"
								@change="bindChangePersonType">
								<view :class="['select-time',selPersonType ==null? 'value-hint':'']">
									{{selPersonType != null? selPersonType.dataName:'请选择类别'}}
								</view>
							</picker>
							<view style="display: flex;flex-direction: row;">
								<view v-if="selPersonType !=null" @click="clearPersonType"
									class="icon-clear-line size-32"></view>
								<view v-if="selPersonType==null" class="icon-arrow-solid"></view>
							</view>
						</view>
					</view>
					<view class="item">
						<text class="label star">姓名或机构名称</text>
						<view class="select-content-item">
							<input :class="['value',orgName != '' ? 'v-select':'']" placeholder="请输入姓名或机构名称"
								style="flex:1;align-self: center;" :value="orgName" @input="inputOrgName" />
						</view>
					</view>
					<view class="item">
						<text class="label star">省市</text>
						<view class="select-content-item">
							<view @click="onShowArea" :class="['select-time',selArea ==null? 'value-hint':'']">
								{{selArea != null && selCity != null ? selArea.areaName+'/'+selCity.areaName:'请选择所在省市'}}
							</view>
							<view style="display: flex;flex-direction: row;">
								<view v-if="selArea !=null" @click="clearArea" class="icon-clear-line size-32">
								</view>
								<view v-if="selArea==null" class="icon-arrow-solid"></view>
							</view>
						</view>
					</view>
					<view class="item">
						<text class="label star">联系电话</text>
						<view class="select-content-item">
							<input :class="['value',orgPhone != '' ? 'v-select':'']" placeholder="请输入联系电话"
								style="flex:1;align-self: center;" :value="orgPhone" @input="inputOrgPhone" />
							<view v-if="orgPhone.length>0" @click="doClearPhone" class="icon-clear-line size-32">
							</view>
						</view>
					</view>
					<view class="item">
						<text class="label star">证件类型</text>
						<view class="select-content-item">
							<picker mode="selector" style="flex:1;" :range="creType" range-key="dataName"
								@change="bindChangeCreType">
								<view :class="['select-time',selCreType ==null? 'value-hint':'']">
									{{selCreType != null? selCreType.dataName:'请选择证件类型'}}
								</view>
							</picker>
							<view style="display: flex;flex-direction: row;">
								<view v-if="selCreType !=null" @click="clearCreType" class="icon-clear-line size-32">
								</view>
								<view v-if="selCreType==null" class="icon-arrow-solid"></view>
							</view>
						</view>
					</view>
					<view class="item">
						<text class="label star">证件号码</text>
						<view class="select-content-item" style="border-bottom: none;">
							<input :class="['value',cardNumber != '' ? 'v-select':'']" placeholder="请输入证件号码"
								style="flex:1;align-self: center;" :value="cardNumber" @input="inputCardNumber" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-fixed-footer">
			<view class="bottom-btn-blue" @click="doSave">保存</view>
		</view>
		<uni-popup ref="typeDialog" type="bottom" background-color="#fff" border-radius="15rpx 15rpx 0rpx 0rpx">
			<view class="bottom-dialog-container">
				<view class="dialog-title-box">
					<view class="icon-close size-48" @click="closeDialog"></view>
					<view class="dialog-title-txt has-icon">分类选项</view>
				</view>
				<view style="height: 600rpx;" class="mt-10">
					<scroll-view :scroll-y="true" style="height: 500rpx;">
						<view>
							<view class="pro-list-item">
								<view v-for="(item,index) in rightType" :key="index" @click="bindChangeRightType"
									:data-value="item" :class="['type-item',item.checked? 'type-select':'type-normal']">
									{{item.dataName}}
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="bottom-btn-green" @click="confirmSelType">确定</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="areaDialog" type="bottom" background-color="#fff" border-radius="15rpx 15rpx 0rpx 0rpx">
			<view class="bottom-dialog-container">
				<view class="dialog-title-box">
					<view class="icon-close size-48" @click="closeDialog"></view>
					<view class="dialog-title-txt has-icon">选择省市</view>
				</view>
				<view style="height: 600rpx;" class="mt-10">
					<picker-view class="area-picker-box" @change="areaChange">
						<picker-view-column>
							<view class="area-picker-item" v-for="(item,index) in areaList" :key="index">
								{{item.areaName}}
							</view>
						</picker-view-column>
						<picker-view-column>
							<view class="area-picker-item" v-for="(item,index) in cityList" :key="index">
								{{item.areaName}}
							</view>
						</picker-view-column>
					</picker-view>
					<view class="bottom-btn-green" @click="confirmSelType">确定</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup type="message" ref="msg">
			<uni-popup-message :duration="2000" :type="msgType" :message="msgHint"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import Shop from '@/common/js/net/shop.js'
	import {
		upShopImgUrl,
		sImgPrefix
	} from '@/common/js/net/mainUrl.js'
	import {
		isValidPhone
	} from '../../../common/js/validator.js'
	import {
		get
	} from '@/common/js/cache/storage.js'
	import {
		currentDate
	} from '@/common/js/util.js'
	export default {
		setup() {},
		data() {
			return {
				curStartDate: currentDate(),
				personType: [{
					dataName: '自然人',
					dataId: '1'
				}, {
					dataName: '法人',
					dataId: '2'
				}, {
					dataName: '非法人组织或其他',
					dataId: '3'
				}],
				selPersonType: null,
				creType: [],
				rightType: [],
				areaList: [], //省
				cityList: [], //市
				rightName: '', //软著名称
				orgName: '', //著作权人姓名
				orgPhone: '', //联系电话
				cardNumber: '', //证件号码
				selRightType: [], //选中分类
				rightPrice: '', //售价
				rightStopDate: '', //停止日期
				selCreType: null, //选中证件类型
				showArea: false,
				prevValue: [0, 0], // 用于存储上一次的值
				selArea: null,
				selCity: null,
				msgHint: '',
				msgType: 'info',
				msgShow: false,
				files: [],
				showType: false,
				goodsId: '',
				goods: null,
				imageStyles: {
					width: 200,
					height: 240,
					border: {
						color: "#e5e5e5",
						width: 1,
						style: 'solid',
						radius: '2px'
					}
				},
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: "发布商品",
			});
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: "#FFFFFF",
				animation: {
					duration: 500,
					timingFunc: "easeIn",
				},
			});
			this.selPersonType = this.personType[0]
			var id = options.id
			if (id && id != '') {
				this.goodsId = id
				this.doGetGoodsDetail()
			} else {
				this.getDic()
			}
		},
		methods: {
			//获取商品详情
			doGetGoodsDetail: function() {
				uni.showLoading({
					title: '加载中...',
				})
				var that = this
				Shop.doGetGoodsDetail(that.goodsId)
					.then(function(res) {
						uni.hideLoading()
						var tempFile = [{
							fileId: res.goodsLocalPhoto,
							fileName: 'image',
							fileSize: 0,
							fileUrl: sImgPrefix + res.goodsLocalPhoto,
							url: sImgPrefix + res.goodsLocalPhoto
						}]
						that.rightName = res.goodsName
						that.rightPrice = res.goodsPrice
						that.rightStopDate = res.goodsLastTime
						that.orgName = res.goodsLeader
						that.orgPhone = res.goodsLeaderPhone
						that.cardNumber = res.goodsLeaderIdcard
						that.files = tempFile
						that.goods = res
						that.getDic()
					})
					.catch(function(err) {
						uni.hideLoading()
						that.msgHint = err.msg ? err.msg : '网络错误,请稍后重试'
						that.msgType = 'error'
						that.$refs.msg.open()
						setTimeout(function() {
							uni.navigateBack()
						}, 1500);
					})
			},
			inputRightName: function(e) {
				this.rightName = e.detail.value
			},
			doClearRightName: function() {
				this.rightName = ''
			},
			inputRightPrice: function(e) {
				this.rightPrice = e.detail.value
			},
			doClearPrice: function() {
				this.rightPrice = 0
			},
			inputOrgName: function(e) {
				this.orgName = e.detail.value
			},
			inputCardNumber: function(e) {
				this.cardNumber = e.detail.value
			},
			//著作权人类别
			bindChangePersonType: function(e) {
				this.selPersonType = this.personType[e.detail.value]
			},
			clearPersonType: function() {
				this.selPersonType = null
			},
			//证件类型
			bindChangeCreType: function(e) {
				this.selCreType = this.creType[e.detail.value]
			},
			clearCreType: function() {
				this.selCreType = null
			},
			//选择软著分类
			onShowRightType: function() {
				this.$refs.typeDialog.open()
			},
			//选择软著分类
			bindChangeRightType: function(e) {
				const currentItem = e.currentTarget.dataset.value;
				const dataId = currentItem.dataId;
				const selectedIndex = this.selRightType.findIndex(item => item.dataId === dataId);
				const targetItem = this.rightType.find(item => item.dataId === dataId);
				if (targetItem) {
					targetItem.checked = !targetItem.checked;
				}
				if (selectedIndex !== -1) {
					this.selRightType.splice(selectedIndex, 1);
				} else {
					this.selRightType.push(targetItem);
				}
			},
			clearRightType: function() {
				this.rightType.forEach(function(item) {
					item.checked = false
				})
				this.selRightType = []
				this.rightType = this.rightType
			},
			confirmSelRightType: function() {
				this.showType = false
			},
			//显示日期选择
			bindDateChange: function(e) {
				this.rightStopDate = e.detail.value
			},
			clearTime: function() {
				this.rightStopDate = ''
			},
			//删除图片
			delImgs(e) {
				console.log('删除凭证', e)
				this.files.splice(e.index, 1)
			},
			//上传图片
			async uploadImgToNet(e) {
				uni.showLoading({
					title: '上传中...'
				})
				const tempFilePaths = e.tempFilePaths;
				const token = get('token');
				const header = token ? {
					Auth: `Bearer ${token}`
				} : {};
				const that = this;
				try {
					// 创建一个数组存储上传结果
					const results = [];
					// 串行上传（一个完成后再上传下一个）
					for (let i = 0; i < tempFilePaths.length; i++) {
						const filePath = tempFilePaths[i];
						// 使用 Promise 封装 uni.uploadFile
						const result = await new Promise((resolve, reject) => {
							uni.uploadFile({
								url: upShopImgUrl,
								header: header,
								filePath: filePath,
								name: 'image',
								success(res) {
									if (res.statusCode === 200) {
										let data = res.data;
										if (typeof data === 'string') {
											data = JSON.parse(data);
										}
										resolve(data.data);
									} else {
										reject(new Error('上传失败，状态码非200'));
									}
								},
								fail(err) {
									reject(err);
								}
							});
						});
						// 按顺序添加到结果数组
						//封装参数
						result.url = sImgPrefix + result.fileId
						result.name = result.fileName
						let lastDot = result.fileName.lastIndexOf('.')
						result.extname = result.fileName.substring(lastDot + 1);
						results.push(result);
					}
					// 全部上传成功后更新文件列表
					that.files = that.files.concat(results);
					uni.hideLoading();
				} catch (error) {
					uni.hideLoading();
					that.msgHint = '凭证上传失败,请稍后重试';
					that.msgType = 'error';
					that.$refs.msg.open();
					// 清空已选择的文件
					that.$refs.imgPicker.clearFiles();
					console.error('上传错误:', error);
				}
			},
			//显示省市选择
			onShowArea: function() {
				this.$refs.areaDialog.open()
			},
			//关闭省市选择
			closeDialog() {
				this.$refs.areaDialog.close()
				this.$refs.typeDialog.close()
			},
			clearArea: function() {
				this.selArea = null
				this.selCity = null
			},
			confirmSelArea: function() {
				this.showArea = false
			},
			inputOrgPhone: function(e) {
				this.orgPhone = e.detail.value
			},
			doClearPhone: function() {
				this.orgPhone = ''
			},
			//获取字典
			getDic: function() {
				var that = this
				var cre = Shop.doGetGoodsDic('0b00884a-f7a2-425f-93e5-599fbaad4bde') //软著分类
				var right = Shop.doGetGoodsDic('ce3ded65-68ed-4f42-89da-de1b813b8f7e') //证件类型
				var area = Shop.doGetAreaList('0')
				var list = [cre, right, area]
				Promise.all(list)
					.then(function(res) {
						if (res) {
							that.rightType = res[0]
							that.creType = res[1]
							that.areaList = res[2]
							that.rightType.forEach(function(item) {
								item.checked = false
							})
							//判断是否是编辑
							if (that.goodsId != '') {
								that.rightType.forEach(function(item) {
									// selRightType
									if (that.goods.goodsType.indexOf(item.dataId) != -1) {
										item.checked = true
										that.selRightType.push(item)
									}
								})
								var tempPersonType
								that.personType.forEach(function(item) {
									if (that.goods.goodsLeaderType == item.dataId) {
										tempPersonType = item
									}
								})
								var tempCreType
								that.creType.forEach(function(item) {
									if (that.goods.goodsLeaderIdcardType == item.dataId) {
										tempCreType = item
									}
								})
								var tempSelArea = null
								var tempIndex = 0
								that.areaList.forEach(function(item, index) {
									if (that.goods.goodsLeaderCity1 == item.areaId) {
										tempSelArea = item
										tempIndex = index
									}
								})
								that.rightType = that.rightType
								that.selRightType = that.selRightType
								that.selPersonType = tempPersonType
								that.selCreType = tempCreType
								that.selArea = tempSelArea
								that.prevValue[0] = tempIndex
								that.doGetArea(that.selArea.areaId, false)
							} else {
								//默认加载第一个area
								that.selCreType = that.creType[0]
								that.selArea = that.areaList[0]
								that.rightType = that.rightType
								that.doGetArea(that.selArea.areaId, false)
							}
						}
					})
					.catch(function(err) {
						that.msgHint = err.msg ? err.msg : '数据加载错误,请稍后重试'
						that.msgType = 'error'
						that.$refs.msg.open()
						setTimeout(function() {
							uni.navigateBack()
						}, 1500);
					})

			},
			//获取区域
			doGetArea: function(pId, isChange) {
				uni.showLoading({
					title: '加载中...',
				})
				var that = this
				Shop.doGetAreaList(pId)
					.then(function(res) {
						uni.hideLoading()
						if (res) {
							that.cityList = res
							if (that.goodsId != '') {
								if (isChange) {
									that.selCity = res[0]
									that.prevValue[1] = 0
								} else {
									var tempCity = null
									var tempIndex = 0
									that.cityList.forEach(function(item, index) {
										if (that.goods.goodsLeaderCity2 == item.areaId) {
											tempCity = item
											tempIndex = index
										}
									})
									that.selCity = tempCity
									that.prevValue[1] = tempIndex
								}
							} else {
								that.selCity = res[0]
							}
						}
					})
					.catch(function(err) {
						uni.hideLoading()
						that.msgHint = err.msg ? err.msg : '数据加载错误,请稍后重试'
						that.msgType = 'error'
						that.$refs.msg.open()
					})
			},
			//选中省市
			confirmSelType() {
				this.$refs.areaDialog.close()
				this.$refs.typeDialog.close()
			},
			//选中省市
			areaChange: function(e) {
				console.log(e)
				console.log(this.prevValue)
				const _self = this;
				const currentValue = e.detail.value;
				const prevValue = _self.prevValue;
				_self.prevValue = currentValue;
				for (let i = 0; i < currentValue.length; i++) {
					if (currentValue[i] !== prevValue[i]) {
						if (i === 0) {
							const area = _self.areaList[currentValue[0]];
							_self.selArea = area;
							_self.doGetArea(area.areaId, true);
						} else {
							const city = _self.cityList[currentValue[1]];
							_self.selCity = city;
						}
						break;
					}
				}
			},
			//发布新商品
			doConfirmPublish: function() {
				var isLegal = this.checkParams()
				if (isLegal) {
					var that = this
					var data = that.buildParams()
					uni.showLoading({
						title: '保存中...',
					})
					Shop.doSaveGoods(data)
						.then(function(res) {
							uni.hideLoading()
							that.msgType = 'success'
							that.msgHint = '保存成功'
							that.$refs.msg.open()
							setTimeout(function() {
								that.backPageRefresh()
							}, 1500);
						})
						.catch(function(err) {
							uni.hideLoading()
							that.msgType = 'error'
							that.msgHint = err.msg ? err.msg : '网络错误,请稍后重试'
							that.$refs.msg.open()
						})
				}
			},
			//修改新商品
			doConfirmUpdate: function() {
				var isLegal = this.checkParams()
				if (isLegal) {
					var that = this
					var data = that.buildParams()
					uni.showLoading({
						title: '保存中...',
					})
					Shop.doUpdateGoods(that.goodsId, data)
						.then(function(res) {
							uni.hideLoading()
							//修改成功
							that.msgType = 'success'
							that.msgHint = '修改成功'
							that.$refs.msg.open()
							setTimeout(function() {
								that.backPageRefresh()
							}, 1500);
						})
						.catch(function(err) {
							uni.hideLoading()
							that.msgType = 'error'
							that.msgHint = err.msg ? err.msg : '网络错误,请稍后重试'
							that.$refs.msg.open()
						})
				}
			},
			//保存商品
			doSave: function() {
				if (this.goodsId != '') {
					//编辑
					this.doConfirmUpdate()
				} else {
					//新增
					this.doConfirmPublish()
				}
			},
			//校验参数
			checkParams: function() {
				const rules = [{
						field: 'rightName',
						message: '请输入软著名称',
						validator: (v) => typeof v === 'string' && v.trim().length > 0
					},
					{
						field: 'selRightType',
						message: '请选择软著分类',
						validator: (v) => v !== null && v.length > 0
					},
					{
						field: 'rightPrice',
						message: '请输入软著售价',
						validator: (v) => (typeof v === 'string' || typeof v === 'number') ?
							('' + v).trim().length > 0 : false
					},
					{
						field: 'rightStopDate',
						message: '请选择截止售卖日期',
						validator: (v) => typeof v === 'string' && v.trim().length > 0
					},
					{
						field: 'files',
						message: '请上传软著图片',
						validator: (v) => v && v.length > 0
					},
					{
						field: 'selPersonType',
						message: '请选择著作权人类别',
						validator: (v) => v !== null
					},
					{
						field: 'orgName',
						message: '请输入姓名或机构名称',
						validator: (v) => typeof v === 'string' && v.trim().length > 0
					},
					{
						field: ['selArea', 'selCity'],
						message: '请选择所在省市',
						validator: (_, data) => data.selArea !== null && data.selCity !== null
					},
					{
						field: 'orgPhone',
						message: '请输入合法的联系电话',
						validator: (v) => {
							// 确保isValidPhone函数在当前作用域可用
							const isValidPhone = (phone) => /^1[3-9]\d{9}$/.test(phone);
							return typeof v === 'string' && v.trim().length > 0 && isValidPhone(v.trim());
						}
					},
					{
						field: 'selCreType',
						message: '请选择证件类型',
						validator: (v) => v !== null
					},
					{
						field: 'cardNumber',
						message: '请输入证件号码',
						validator: (v) => typeof v === 'string' && v.trim().length > 0
					}
				];

				for (let i = 0; i < rules.length; i++) {
					const rule = rules[i];
					let isValid;

					if (Array.isArray(rule.field)) {
						// 多字段联合验证
						isValid = rule.validator(null, this.$data); // 使用this.$data访问组件数据
					} else {
						// 单字段验证
						const value = this.$data[rule.field]; // 使用this.$data访问组件数据
						isValid = rule.validator(value, this.$data);
					}

					if (!isValid) {
						this.msgHint = rule.message
						this.msgType = 'error'
						this.$refs.msg.open()
						return false;
					}
				}
				return true;
			},
			buildParams: function() {
				var typeIds = this.selRightType.map(function(item) {
					return item.dataId
				}).join(',');
				var data = {
					goodsLastTime: this.rightStopDate,
					goodsLeader: this.orgName,
					goodsLeaderCity1: this.selArea.areaId,
					goodsLeaderCity2: this.selCity.areaId,
					goodsLeaderIdcard: this.cardNumber,
					goodsLeaderIdcardType: this.selCreType.dataId,
					goodsLeaderPhone: this.orgPhone,
					goodsLeaderType: this.selPersonType.dataId,
					goodsName: this.rightName,
					goodsLocalPhoto: this.files[0].fileId,
					goodsPrice: this.rightPrice,
					goodsType: typeIds
				}

				return data
			},
			backPageRefresh: function() {
				var pages = getCurrentPages();
				var beforePage = pages[pages.length - 2];
				beforePage.$vm.needRefresh = true
				uni.navigateBack()
			}
		},
	};
</script>

<style lang="scss" scoped>
	.page-white {
		background-color: $white-color;
	}

	.content-box {
		border-radius: 20rpx;
	}

	.upload-img-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.content-container {
		margin: 0rpx -30rpx 80rpx -30rpx;
		background-color: white;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
	}

	.info-title {
		font-size: 36rpx;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		align-items: center;
	}


	.info-title::before {
		content: "";
		width: 10rpx;
		height: 36rpx;
		margin-right: 5rpx;
		border-left: 15rpx solid $blue-color;
		vertical-align: middle;
	}

	.section {
		margin-bottom: 15rpx;
		margin-left: 20rpx;
	}

	.pro-list-item {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding-top: 20rpx;
	}

	.type-item {
		white-space: nowrap;
		font-size: 24rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		padding: 0rpx 10rpx;
		margin: 10rpx;
		border-radius: 5rpx;
		position: relative;
		transition: padding-right 0.2s;
	}

	.type-select {
		padding-right: 32rpx;
	}

	/* 对钩区域 */
	.type-item::after {
		content: '✓';
		position: absolute;
		right: 10rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 20rpx;
		color: $primary_color;
		width: 18rpx;
		text-align: center;
		opacity: 0;
		transform: translate(12rpx, -50%);
		transition: all 0.2s;
	}

	.type-select::after {
		opacity: 1;
		transform: translate(0, -50%);
	}

	.type-normal {
		border: 1rpx solid $gray_color;
	}

	.type-select {
		border: 1rpx solid $primary_color;
	}

	.item {
		display: flex;
		flex-direction: column;
		margin-bottom: 10rpx;
		padding: 20rpx 10rpx;
		font-size: 28rpx;
	}

	.label {
		color: $text-color;
		font-weight: bold;
	}

	.select-content {
		margin-top: 15rpx;
		display: flex;
		height: 70rpx;
		flex-direction: row;
		border-radius: 5rpx;
		background-color: $bg-gray-input-color;
		padding: 0rpx 10rpx;
	}

	.select-content-no-h {
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		min-height: 70rpx;
		flex-direction: row;
		border-radius: 5rpx;
		padding: 0rpx 15rpx 10rpx 0rpx;
		border-bottom: 1rpx solid $divider-color;
	}

	.select-content-item {
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 70rpx;
		flex-direction: row;
		border-radius: 5rpx;
		padding: 0rpx 15rpx 10rpx 0rpx;
		border-bottom: 1rpx solid $divider-color;
	}

	.select-item-box {
		flex: 1;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 5rpx;
	}

	.select-item-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: $divider-color;
		padding: 5rpx 15rpx;
		border-radius: 5rpx;
		font-size: 24rpx;
		margin-right: 15rpx;
		margin-top: 5rpx;
		color: $text-color;
	}

	.desc {
		flex: 1;
		color: #999;
		text-align: left;
		padding-left: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-right: 10px;
		align-items: center;
	}

	.select-time {
		color: $text-color;
		flex: 1;
		font-size: 28rpx;
		text-align: left;
	}

	.clear-icon {
		width: 20px;
		height: 20px;
		margin-right: 20rpx;
	}

	.value {
		flex: 1;
		text-align: left;
		font-size: 28rpx;
	}


	.value-hint {
		color: $text-gray-hint-color;
	}

	.v-select {
		color: $text-color;
	}

	.v-normal {
		color: $text-gray-hint-color;
	}

	.custom-dialog {
		background-color: $white-color;
	}

	.custom-tips {
		margin-top: 80px;
	}

	/* 上传图片 */
	.uni-file-picker {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.uni-file-picker__container {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.area-picker-box {
		width: 100%;
		height: 500rpx;
	}

	.area-picker-item {
		text-align: center;
	}
</style>