mrr.sj.front/pages/shop/add-service.vue

<template>
	<view class="add-service">
		<view class="fixed-header">
			<view class="tip" v-if="formData.back_text && formData.state == 4">
				<image
					src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/390d9d12-3c30-4639-9ac3-7b604b606b6d.png"
					class="tip-icon"></image>
				<text>{{ formData.back_text }}</text>
			</view>
		</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 服务分类（仅显示不可编辑） -->
			<view class="form-item service-class-item" v-if="serviceClassName">
				<text class="form-label">服务分类：</text>
				<text class="form-value service-class-value">{{ serviceClassName }}</text>
			</view>
			<!-- 动态表单区域 -->
			<dynamic-form :fields="formFields" v-model="formData" :upload-user-id="formData.publish_user_id"
				ref="dynamicForm" />

			<!-- 服务流程 -->
				<view class="form-step" v-if="!hasDynamicServiceStepField">
				<view class="form-item">
					<text class="form-label">服务流程</text>
					<text @click="addStep" style="color: #FF4767;">添加步骤</text>
				</view>
				<view class="step" v-for="(item, i) in formData.process" :key="i">
					<text class="form-label">第{{ i + 1 }}步</text>
					<input type="text" class="step-inp" v-model="formData.process[i].text" placeholder="请输入步骤内容" />
					<image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/wxstaic/images/delete_icon.png"
						class="delete-icon" mode="aspectFit" @click="deleteStep(i)"></image>
				</view>
			</view>

			<!-- 视频上传 -->
			<view class="video-upload" v-if="!hasDynamicVideoField">
				<view class="flex-c">
					<text class="form-label required">上传视频</text>
					<text class="upload-tip">(仅可上传1个视频)</text>
				</view>
				<ali-oss-uploader :max-count="1" :max-size="100" :type="artisanType + 1"
					:user-id="formData.publish_user_id" :width="'654rpx'" :kind="2" :file-string="formData.video"
					accept="video/*" button-text="上传视频" @input="setVideoValue" @change="setVideoValue"
					@success="uploadVideoSuc" @error="uploadVideoErr" @delete="uploadVideoDel"
					@ckeckisShowPer="ckeckisShowPer" @ckecknowQer="ckecknowQer">
				</ali-oss-uploader>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-buttons">
			<button class="btn-draft" @click="saveDraft" v-if="!state || state == 0">
				存草稿
			</button>
			<button class="btn-submit" @click="submitForm">提交</button>
		</view>

		<!-- 获取权限提示匡内容 -->
		<view class="permission" :class="{ transform: isShowPer && nowQer === 'xc' }">
			<view class="per-tit">美融融plus 对储存空间/照片权限申请说明</view>
			<view class="per-cont">便于您使用该功能上传您的照片/图片/视频以及用于更换头像、发布商品等场景中读取相册和文件内容。</view>
		</view>
		<view class="permission" :class="{ transform: isShowPer && nowQer === 'xj' }">
			<view class="per-tit">美融融plus 对相机拍摄权限申请说明</view>
			<view class="per-cont">便于您使用该功能上传您的照片/图片/视频以及用于更换头像、发布商品等场景中所需内容。</view>
		</view>
	</view>
</template>

<script>
import request from "../../utils/request";
import CircleProgress from "@/components/circle-progress/circle-progress.vue";
import DynamicForm from "@/components/dynamic-form/dynamic-form.vue";
import sparkMD5 from "spark-md5"; // 引入MD5计算库
import {
	debounce
} from "@/utils/debounce.js";
import AliOssUploader from "../../components/ali-oss-uploader/ali-oss-uploader.vue";
import permissionUtils from "../../utils/per";
import locationService from "../../utils/locationService";
import _public from "../../utils/public";

export default {
	components: {
		CircleProgress,
		AliOssUploader,
		DynamicForm,
	},
	data() {
		return {
			formFields: [], // 动态表单字段配置
			processFieldKey: "", // 服务步骤在config_data中的key，用作提交参数名
			firstClassName: "",
			secondClassName: "",
			showReminderPopup: false,
			artisanType: getApp().globalData.artisanType,
			nowQer: "xc",
			progress: 0,
			isShow: false,
			state: null,
			isShowPer: false,
			formData: {
				publish_user_id: null,
				server_kind: getApp().globalData.artisanType,
				title: "",
				server_price: "",
				line_price: '',
				server_time: "",
				first_class_id: "",
				second_class_id: "",
				detail: [],
				process: [],
				video: "",
				photo: [],
				graphic_details: "",
				sj_see: null, // 1代表商家端不可见  2代表商家端可见
				// 新增的五个独立字段
				efficacy: "",
				crowd: "",
				product: "",
				scope: "",
				prompt: "",
			},
			ratio: null,
			// 服务简介部分
			detailForm: {
				effect: "",
				crowd: "",
				product: "",
				scope: "",
				tips: "",
			},
			detailOtherList: [],

			imagesList: [], // 临时图片地址
			addDetailList: [],
			showProgress: false,
			publish_user_id: null,
			isAdd: false,
			isDraft: false,
			postid: 0
		};
	},
	onShow() { },
	async onLoad(options) {
		// 监听图文详情编辑回调（在onLoad注册，确保navigateBack时能收到事件）
		uni.$on("updateGraphicDetails", (data) => {
			// 替换整个formData对象引用，确保dynamic-form的watch.value能触发
			this.formData = Object.assign({}, this.formData, {
				graphic_details: JSON.stringify(data)
			});
		});
		this.state = options.state || "";
		// 接收分类参数
		if (options.first_class_id) {
			this.formData.first_class_id = options.first_class_id;
		}
		if (options.second_class_id) {
			this.formData.second_class_id = options.second_class_id;
		}
		// 获取模板（先加载模板，再获取详情，确保formFields已就绪）
		await this.getTemplate();
		if (options.id) {
			this.formData.id = options.id;
			await this.getInit();
		}
		// 获取分类名称用于顶部显示
		await this.loadClassNames();
		// 判断是否显示上门提醒弹窗
		const notShow = uni.getStorageSync('addServiceReminderNotShow');
		await this.getUserInfo();
	},
	onUnload() {
		uni.$off("updateGraphicDetails");
	},
	computed: {
		showShopPrice() {
			return (
				this.artisanType == 1 &&
				this.formData.sj_see == 2 &&
				this.formData.server_price &&
				this.formData.first_class_id
			);
		},
		shopPrice() {
			return _public.roundUpToTwoDecimals(
				this.formData.server_price,
				this.ratio
			);
		},
			hasDynamicVideoField() {
				return this.formFields.some((group) => {
				if (group.type === 'single' && group.field) {
					return group.field.type === 'video';
				}
				if (group.type === 'section' && Array.isArray(group.fields)) {
					return group.fields.some((field) => field.type === 'video');
				}
					return group.type === 'video';
				});
			},
			hasDynamicServiceStepField() {
				return this.formFields.some((group) => {
					if (group.type === 'single' && group.field) {
						return group.field.type === 'service_step';
					}
					if (group.type === 'section' && Array.isArray(group.fields)) {
						return group.fields.some((field) => field.type === 'service_step');
					}
					return group.type === 'service_step';
				});
			},
			serviceClassName() {
				return [this.firstClassName, this.secondClassName].filter(Boolean).join('/');
			},
		},
	methods: {
		// 字段类型映射：接口类型 -> dynamic-form类型
		mapFieldType(fieldType) {
			const typeMap = {
				'text': 'text',
					'number': 'number',
					'image_multi': 'image_multi',
					'video': 'video',
					'service_step': 'service_step',
					'richtext_editor': 'richtext_editor',
					'select': 'select',
					'single_select': 'single_select',
					'radio': 'single_select',
					'switch': 'single_select',
					'boolean': 'single_select',
					'multi_select': 'multi_select',
					'textarea': 'textarea',
				};
				return typeMap[fieldType] || 'text';
			},

			normalizeFieldOptions(options) {
				if (!Array.isArray(options)) return [];
				return options.map((item) => {
					if (item && typeof item === 'object') {
						const value = item.value !== undefined ? item.value :
							(item.id !== undefined ? item.id :
								(item.key !== undefined ? item.key :
									(item.code !== undefined ? item.code : item.label)));
						const label = item.label || item.title || item.name || item.text || String(value);
						return {
							...item,
							label,
							value,
						};
					}
					return {
						label: String(item),
						value: item,
					};
				});
			},

			applyFieldHint(field, rawConfig) {
				if (!rawConfig || !rawConfig.hint) return;
				if (rawConfig.showHint === false || rawConfig.showHint === 0 || rawConfig.showHint === '0') return;
				field.tip = rawConfig.hint;
			},

		// 将接口config_data转换为dynamic-form需要的分组格式
		transformConfigToFields(configData) {
			const groups = [];
			let customFieldIndex = 0;

			// 1. 处理presetFields（预设字段）- 每个字段独立一组
			if (configData.presetFields && Array.isArray(configData.presetFields)) {
				configData.presetFields.forEach((preset) => {
					if (!preset.enabled) return;

					const field = {
						key: preset.key,
						type: this.mapFieldType(preset.fieldType),
						label: preset.title,
						is_required: preset.required,
						placeholder: preset.placeholder || `请输入${preset.title}`,
					};

						if (preset.options && Array.isArray(preset.options) && preset.options.length > 0) {
							field.options = this.normalizeFieldOptions(preset.options);
						}
						if (preset.default_value !== undefined) {
							field.default_value = preset.default_value;
						} else if (preset.defaultValue !== undefined) {
							field.default_value = preset.defaultValue;
						}

						this.applyFieldHint(field, preset);

						if (preset.key === 'line_price' || preset.key === 'server_price') {
							field.tips = '(元)';
							if (!field.tip) {
								field.tip = preset.key === 'line_price' ? '服务的基础定价，未参与任何优惠的价格' : '服务参与单品优惠后的价格';
							}
					} else if (preset.key === 'server_time') {
						field.placeholder = '请输入服务时长';
						field.tips = '分钟';
					}

					if (preset.maxCount) {
						field.maxCount = preset.maxCount;
					}
					if (preset.maxLength && preset.fieldType === 'text') {
						field.maxLength = preset.maxLength;
					}
					if (preset.maxFileSize) {
						field.maxFileSize = preset.maxFileSize;
						field.maxSize = preset.maxFileSize;
					}

					field._fieldType = preset.fieldType;
					field._hasOriginalKey = !!preset.key;
					groups.push({
						type: 'single',
						field
					});
				});
			}

			// 2. 处理sections（区段）- 整个section为一组
			if (configData.sections && Array.isArray(configData.sections)) {
				configData.sections.forEach((section) => {
					const sectionFields = [];
					if (section.fields && Array.isArray(section.fields)) {
						section.fields.forEach((sectionField) => {
							const fieldKey = sectionField.key ||
								`custom_${sectionField.id || customFieldIndex++}`;

							const field = {
								key: fieldKey,
								type: this.mapFieldType(sectionField.fieldType),
								label: sectionField.title,
								is_required: sectionField.required,
								placeholder: sectionField.placeholder ||
									`请输入${sectionField.title}`,
							};

							if (sectionField.key === 'server_time') {
								field.placeholder = '请输入服务时长';
								field.tips = '分钟';
							}

								this.applyFieldHint(field, sectionField);

								if (sectionField.options && Array.isArray(sectionField.options) &&
									sectionField.options.length > 0) {
									field.options = this.normalizeFieldOptions(sectionField.options);
								}
								if (sectionField.default_value !== undefined) {
									field.default_value = sectionField.default_value;
								} else if (sectionField.defaultValue !== undefined) {
									field.default_value = sectionField.defaultValue;
								}

							if (sectionField.maxCount && (sectionField.fieldType === 'multi_select' ||
								sectionField.fieldType === 'image_multi' || sectionField.fieldType === 'video')) {
								field.maxCount = sectionField.maxCount;
							}

							if (sectionField.maxLength && (sectionField.fieldType === 'text' ||
								sectionField.fieldType === 'textarea')) {
								field.maxLength = sectionField.maxLength;
							}

							if (sectionField.maxLength && sectionField.fieldType === 'number') {
								field.maxLength = sectionField.maxLength;
							}

							if (sectionField.maxFileSize) {
								field.maxFileSize = sectionField.maxFileSize;
								field.maxSize = sectionField.maxFileSize;
							}

							field._fieldType = sectionField.fieldType;
							field._hasOriginalKey = !!sectionField.key;
								field._original = {
									id: sectionField.id,
									sectionId: section.id,
									sectionType: section.sectionType,
									userDefined: sectionField.userDefined,
								};
								field._sectionTitle = section.sectionTitle || '';
								field._sectionId = section.id;
								field._sectionType = section.sectionType;

							sectionFields.push(field);
						});
					}

					groups.push({
						type: 'section',
						sectionTitle: section.sectionTitle || '',
						fields: sectionFields,
					});
				});
			}

			return groups;
		},

		// 获取服务模板
		async getTemplate() {
			try {
				const res = await request.post("/sj/servers/getTemplate", {
					first_class: this.formData.first_class_id,
				});
				console.log("模板接口返回数据:", res);
				if (res.data && res.data.config_data) {
					// 使用接口返回的config_data转换为表单字段
					// config_data 可能是字符串，需要解析
					const configData = typeof res.data.config_data === 'string' ?
						JSON.parse(res.data.config_data) :
						res.data.config_data;
					console.log("解析后的config_data:", configData);
					// 查找service_step类型的字段，记录其key作为提交参数名
					this.processFieldKey = "";
					const allConfigFields = [
						...(configData.presetFields || []),
						...(configData.sections || []).reduce((acc, s) => acc.concat(s.fields || []), [])
					];
					const stepField = allConfigFields.find(f => f.fieldType === 'service_step');
					if (stepField && stepField.key) {
						this.processFieldKey = stepField.key;
					}
					const fields = this.transformConfigToFields(configData);
					console.log("转换后的fields数组:", fields, "长度:", fields.length);
					this.formFields = fields;
				} else if (res.data && res.data.fields && res.data.fields.length > 0) {
					// 兼容旧格式
					this.formFields = res.data.fields;
				}
			} catch (e) {
				console.error("获取模板失败", e);
			}
			// 初始化表单数据
			const initialData = {};
			const allFields = this.getDynamicFields();
			allFields.forEach((field) => {
				if (field.default_value !== undefined) {
					initialData[field.key] = field.default_value;
				} else if (
					field.type === 'multi_select' ||
					field.type === 'image_multi' ||
					field.type === 'service_step' ||
					(field.type === 'video' && field.maxCount > 1)
				) {
					initialData[field.key] = [];
				} else if (!this.formData[field.key] && this.formData[field.key] !== 0) {
					initialData[field.key] = '';
				}
			});
			this.formData = {
				...this.formData,
				...initialData
			};
		},
		getDynamicFields() {
			const fields = [];
			this.formFields.forEach((group) => {
				if (group.type === 'single' && group.field) {
					fields.push(group.field);
				} else if (group.type === 'section' && Array.isArray(group.fields)) {
					fields.push(...group.fields);
				} else if (group.key) {
					fields.push(group);
				}
			});
			return fields;
		},
		// 根据分类ID获取分类名称
		async loadClassNames() {
			if (!this.formData.first_class_id) return;
			try {
				const firstRes = await request.post("/sj/firstclass", {});
				if (firstRes.data && firstRes.data.length > 0) {
					const matched = firstRes.data.find(item => item.id == this.formData.first_class_id);
					if (matched) {
						this.firstClassName = matched.title;
					}
				}
			} catch (e) {
				console.error("获取一级分类失败", e);
			}
			if (!this.formData.second_class_id) return;
			try {
				const secondRes = await request.post("/user/secondclass", {
					id: this.formData.first_class_id,
				});
				if (secondRes.data && secondRes.data.length > 0) {
					const matched = secondRes.data.find(item => item.id == this.formData.second_class_id);
					if (matched) {
						this.secondClassName = matched.title;
					}
				}
			} catch (e) {
				console.error("获取二级分类失败", e);
			}
		},
		inpPrice2(e) {
			let that = this;
			let value = e.detail.value;

			// 1. 移除非数字和小数点
			value = value.replace(/[^\d.]/g, '');

			// 2. 确保只有一个小数点
			const parts = value.split('.');
			if (parts.length > 2) {
				value = parts[0] + '.' + parts.slice(1).join('');
			}

			// 3. 限制小数点后最多一位
			if (parts.length > 1) {
				value = parts[0] + '.' + parts[1].slice(0, 2);
			}
			// 4. 如果以小数点开头，前面补0
			if (value.startsWith('.')) {
				value = '0' + value;
			}
			that.$set(that.formData, 'line_price', value);
		},
			// 服务简介部分
			initDetailForm(detail = []) {
			// 先重置 detailForm 为空
			this.detailForm = {
				effect: "",
				crowd: "",
				product: "",
				scope: "",
				tips: "",
			};
			this.detailOtherList = [];

			// 优先从后端返回的新字段赋值
			if (this.formData.efficacy) this.detailForm.effect = this.formData.efficacy;
			if (this.formData.crowd) this.detailForm.crowd = this.formData.crowd;
			if (this.formData.product) this.detailForm.product = this.formData.product;
			if (this.formData.scope) this.detailForm.scope = this.formData.scope;
			if (this.formData.prompt) this.detailForm.tips = this.formData.prompt;
			// 优先从后端返回的新字段赋值
			if (this.formData.efficacy) this.detailForm.effect = this.formData.efficacy;
			if (this.formData.crowd) this.detailForm.crowd = this.formData.crowd;
			if (this.formData.product) this.detailForm.product = this.formData.product;
			if (this.formData.scope) this.detailForm.scope = this.formData.scope;
			if (this.formData.prompt) this.detailForm.tips = this.formData.prompt;

			// 如果新字段都为空，则尝试从旧的 detail 数组中提取（兼容旧数据）
			if (!this.formData.efficacy && !this.formData.crowd && !this.formData.product) {
				(detail || []).forEach((item) => {
					if (item.title === "服务功效") {
						this.detailForm.effect = item.text || "";
					} else if (item.title === "适用人群") {
						this.detailForm.crowd = item.text || "";
					} else if (item.title === "产品清单") {
						this.detailForm.product = item.text || "";
					} else if (item.title === "适用范围" || item.title === "使用范围") {
						this.detailForm.scope = item.text || "";
					} else if (item.title === "温馨提示") {
						this.detailForm.tips = item.text || "";
					} else {
						this.detailOtherList.push({
							title: item.title || "",
							text: item.text || "",
							photo: item.photo || "",
						});
					}
				});
			}
		},

		syncDetailForm() {
			// 双向同步：如果formData有值（来自dynamic-form），同步到detailForm；否则从detailForm同步到formData
			if (this.formData.efficacy) {
				this.detailForm.effect = this.formData.efficacy;
			} else {
				this.formData.efficacy = (this.detailForm.effect || "").trim();
			}
			if (this.formData.crowd) {
				this.detailForm.crowd = this.formData.crowd;
			} else {
				this.formData.crowd = (this.detailForm.crowd || "").trim();
			}
			if (this.formData.product) {
				this.detailForm.product = this.formData.product;
			} else {
				this.formData.product = (this.detailForm.product || "").trim();
			}
			if (this.formData.scope) {
				this.detailForm.scope = this.formData.scope;
			} else {
				this.formData.scope = (this.detailForm.scope || "").trim();
			}
			if (this.formData.prompt) {
				this.detailForm.tips = this.formData.prompt;
			} else {
				this.formData.prompt = (this.detailForm.tips || "").trim();
			}
		},

		checkDetailForm() {
			return true;
		},


		closeReminderPopup(notShowAgain) {
			console.log('关闭弹窗，不再提示：', notShowAgain);
			if (notShowAgain) {
				uni.setStorageSync('addServiceReminderNotShow', true);
			}
			this.showReminderPopup = false;
		},
		goImgAndText() {
			uni.navigateTo({
				url: `/pages/shop/add-img-text?list=${this.formData.graphic_details}`,
			});
		},
		ckeckisShowPer(value) {
			console.log("ckeckisShowPer==========", value);
			this.isShowPer = value;
		},
		ckecknowQer(value) {
			this.nowQer = value;
		},
			addVideo(value) {
				this.setVideoValue(value);
			},
			normalizeVideoValue(value) {
				if (!value) return "";
				if (typeof value === "string") {
					const str = value.trim();
					if (!str) return "";
					if ((str.startsWith("{") && str.endsWith("}")) || (str.startsWith("[") && str.endsWith("]"))) {
						try {
							return this.normalizeVideoValue(JSON.parse(str));
						} catch (error) {
							return str;
						}
					}
					return str;
				}
				if (Array.isArray(value)) {
					for (let i = 0; i < value.length; i++) {
						const url = this.normalizeVideoValue(value[i]);
						if (url) return url;
					}
					return "";
				}
				if (typeof value === "object") {
					const candidates = [value.url, value.path, value.filePath, value.tempFilePath, value.src, value.value];
					for (let i = 0; i < candidates.length; i++) {
						const url = this.normalizeVideoValue(candidates[i]);
						if (url) return url;
					}
					return "";
				}
				return String(value);
			},
			setVideoValue(value) {
				this.formData.video = this.normalizeVideoValue(value);
			},
		// addImg(arr) {
		// 	this.formData.photo = this.formData.photo.concat(arr);
		// },
		// deleteImage(index) {
		//   this.formData.photo.splice(index, 1)
		// },
		onUploadSuccess(file) {
			console.log("添加的图片", this.formData.photo);
		},
		onUploadError(error) {
			console.error("上传失败:", error);
			uni.showToast({
				title: "上传失败",
				icon: "none",
			});
		},
		onFileDelete(file, index) {
			console.log("删除文件:", this.formData.photo, index);
		},
			uploadVideoSuc(file) {
				this.setVideoValue(file);
			},
		uploadVideoErr() { },
		uploadVideoDel() {
			this.formData.video = null;
		},
		async getInit() {
				await request
					.post("/sj/servers/detail", {
						id: this.formData.id
					})
					.then(async (res) => {
						// 直接合并所有字段，避免遗漏
						this.formData = {
							...this.formData,
							...res.data
						};
						this.setVideoValue(this.formData.video);
						if (this.formData.first_class_id && this.formFields.length === 0) {
							await this.getTemplate();
						}
						// 确保 process 保持为数组（后端可能返回字符串）
					if (!Array.isArray(this.formData.process)) {
						this.formData.process = [];
					}
					// 确保 detail 数组被保留（可能用于兼容）
					this.formData.detail = res.data.detail || [];
					// 确保photo为纯字符串数组（去除对象索引）
					if (this.formData.photo && !Array.isArray(this.formData.photo)) {
						this.formData.photo = Object.values(this.formData.photo);
					}
					if (Array.isArray(this.formData.photo)) {
						this.formData.photo = this.formData.photo.map(function (item) {
							return typeof item === 'string' ? item : (item && item.url ? item.url :
								String(item));
						});
					}
					// 解析intro字段的JSON数据用于回显自定义字段
					if (res.data.intro) {
						try {
							const introArr = typeof res.data.intro === 'string' ?
								JSON.parse(res.data.intro) :
								res.data.intro;
							if (Array.isArray(introArr)) {
								// 遍历所有表单字段，构建 id -> field 的映射
								const idToFieldMap = {};
								this.formFields.forEach(function (group) {
									const fields = group.field ? [group.field] : (group.fields || []);
									fields.forEach(function (f) {
										if (f._original && f._original.id) {
											idToFieldMap[f._original.id] = f;
										}
									});
								});
								// 用intro中的id去匹配表单字段，将值回填到formData
								introArr.forEach(function (item) {
									const matchedField = idToFieldMap[item.id];
									if (matchedField && item.value !== undefined) {
										this.$set(this.formData, matchedField.key, item.value);
									}
								}.bind(this));
							}
						} catch (e) {
							console.error('解析intro字段失败:', e);
						}
					}
					// 解析服务步骤数据回显
					if (this.processFieldKey && res.data[this.processFieldKey]) {
						try {
							const processRaw = res.data[this.processFieldKey];
							const processArr = typeof processRaw === 'string' ?
								JSON.parse(processRaw) : processRaw;
							if (Array.isArray(processArr)) {
								this.formData.process = processArr.map(item => ({
									title: item.title || '',
									text: item.text || '',
									photo: item.photo || '',
								}));
							}
						} catch (e) {
							console.error('解析服务步骤数据失败:', e);
						}
					} else if (res.data.intro) {
						// 无独立key时，从intro数组中查找service_step
						try {
							const introArr = typeof res.data.intro === 'string' ?
								JSON.parse(res.data.intro) : res.data.intro;
							if (Array.isArray(introArr)) {
								const stepItem = introArr.find(item => item.id === 'service_step');
								if (stepItem && Array.isArray(stepItem.value)) {
									this.formData.process = stepItem.value.map(item => ({
										title: item.title || '',
										text: item.text || '',
										photo: item.photo || '',
									}));
								}
							}
						} catch (e) {
							console.error('从intro解析服务步骤失败:', e);
						}
					}
					// 调用初始化方法，它会优先使用新字段
					this.initDetailForm(res.data.detail || []);
				});
		},
		getUserInfo() {
			return request
				.post("/sj/user/getuser", {
					type: 2,
				})
				.then((result) => {
					console.log('getUserInfo返回:', result);
					const userId = result.data.id || result.data.user_id || result.data.userId;
					console.log('12121212');
					if (userId) {
						this.formData.publish_user_id = userId;
						this.publish_user_id = userId;
						uni.setStorageSync('userId', userId);
					} else {
						// 接口没有返回id，从storage获取
						this.formData.publish_user_id = uni.getStorageSync('userId') || '';
					}
					console.log('publish_user_id:', this.formData.publish_user_id);
					this.postid = result.data.id
				})
				.catch((err) => {
					console.error('getUserInfo失败:', err);
					// 接口失败，从storage获取
					this.formData.publish_user_id = uni.getStorageSync('userId') || '';
				});
		},
		// 是否在商家端售卖
		changeSale(value) {
			this.formData.sj_see = value;
		},
		// 输入价格
		inpPrice(e) {
			let that = this;
			let value = e.detail.value;

			// 1. 移除非数字和小数点
			value = value.replace(/[^\d.]/g, "");

			// 2. 确保只有一个小数点
			const parts = value.split(".");
			if (parts.length > 2) {
				value = parts[0] + "." + parts.slice(1).join("");
			}

			// 3. 限制小数点后最多一位
			if (parts.length > 1) {
				value = parts[0] + "." + parts[1].slice(0, 2);
			}
			// 4. 如果以小数点开头，前面补0
			if (value.startsWith(".")) {
				value = "0" + value;
			}
			that.$set(that.formData, "server_price", value);
		},
		deleteStep(i) {
			this.formData.process.splice(i, 1);
		},
		addStep() {
			let i = this.formData.process.length + 1;
			let arr = {
				title: "第" + i + "步",
				text: "",
				photo: "",
			};
			this.formData.process.push(arr);
		},
		// 视频上传相关方法
		uploadVideoSuc(file) {
			this.setVideoValue(file);
		},
		uploadVideoErr() { },
		uploadVideoDel() {
			this.formData.video = '';
		},
		ckeckisShowPer(val) {
			this.isShowPer = val;
		},
		ckecknowQer(val) {
			this.nowQer = val;
		},

		// 删除视频
		deleteVideo() {
			this.formData.video = "";
		},
		// 删除视频
		deleteVideo() {
			this.formData.video = "";
		},

		// 保存草稿
		saveDraft: debounce(function () {
			if (this.isDraft) return;
			this.syncDetailForm();
			const {
				title,
				server_price,
				line_price,
				server_time,
				first_class_id,
				second_class_id,
				detail,
				process,
				video,
				photo,
			} = this.formData;
			let item = {
				title,
				server_price,
				line_price,
				server_time,
				first_class_id,
				second_class_id,
				detail,
				process,
				video,
				photo,
			};
			// 检查是否所有字段都为空
			const isEmpty = Object.values(item).every((value) => {
				if (Array.isArray(value)) {
					return value.length === 0;
				}
				return !value;
				});
				if (isEmpty) {
					uni.showToast({
						title: "请至少填写一项内容",
						icon: "none",
					});
					return;
				}

				// 实现保存草稿逻辑
				this.formData.state = 0;
				const submitData = this.buildSubmitData();
				submitData.state = 0;
				let url = null;
				if (!this.formData.id) {
					url = "/user/serveradd";
				} else {
					url = "/user/serverchange";
				}
				request.post(url, submitData).then((res) => {
					if (res.state == 1) {
						this.isDraft = true;
						const pages = getCurrentPages();
						const prevPage = pages[pages.length - 2]; // 上一个页面
						uni.showToast({
							title: res.msg,
							icon: "success",
							duration: 1000,
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
								success: () => {
									prevPage.$vm.currentTab = 3;
									prevPage.$vm.state = 0;
									prevPage.$vm.getServicesList(); // 直接调用上个页面的刷新方法
								},
							});
						}, 500);
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
						this.isDraft = false;
					}
				});
			}, 500),

				// 验证动态表单字段
				validateDynamicForm() {
					// 遍历 formGroups（分组结构）按顺序验证必填项
					for (let i = 0; i < this.formFields.length; i++) {
					const group = this.formFields[i];
					const fieldsToCheck = [];
					if (group.type === 'single' && group.field) {
						fieldsToCheck.push(group.field);
					} else if (group.type === 'section' && group.fields) {
						fieldsToCheck.push(...group.fields);
					}

					for (let j = 0; j < fieldsToCheck.length; j++) {
						const field = fieldsToCheck[j];
						if (!field.is_required) continue;

						const value = this.formData[field.key];
						const isEmpty = value === undefined || value === null || value === '' ||
							(Array.isArray(value) && value.length === 0);

							if (isEmpty) {
								// 根据字段类型显示不同的提示语
								const prefix = (field.type === 'image_multi' || field.type === 'video') ? '请上传' :
									(field.type === 'select' || field.type === 'single_select' || field.type === 'multi_select') ?
										'请选择' : '请输入';
								uni.showToast({
									title: `${prefix}${field.label}`,
									icon: "none",
							});
								return false;
							}

							if (field.type === 'service_step' && Array.isArray(value)) {
								const hasEmptyStep = value.some((item) => !item || !item.text || !item.text.trim());
								if (hasEmptyStep) {
									uni.showToast({
										title: "请完善服务流程内容",
										icon: "none",
									});
									return false;
								}
							}

							// 服务时长特殊验证
						if (field.key === 'server_time') {
							if (value < 10) {
								uni.showToast({
									title: "服务时长最短为10分钟",
									icon: "none",
								});
								return false;
							}
							if (value > 240) {
								uni.showToast({
									title: "服务时长最长为240分钟",
									icon: "none",
								});
								return false;
							}
						}
					}
				}
				return true;
			},
			// 构建提交数据：有key的字段直接作为参数，没有key的字段放入intro数组
			buildSubmitData() {
				const submitData = {};
				const introArr = [];
				console.log(this.formData, '=-=-=-=-=-=');
				// 添加固定字段
				if (this.formData.publish_user_id) {
					if (this.formData.id) {
						submitData.id = this.formData.id;
					}
					submitData.publish_user_id = this.formData.publish_user_id || uni.getStorageSync('userId') || '';
					submitData.first_class_id = this.formData.first_class_id || '';
					submitData.second_class_id = this.formData.second_class_id || '';
					submitData.server_kind = this.formData.server_kind || getApp().globalData.artisanType;
				}

				// 视频字段（独立上传组件）
				const videoUrl = this.normalizeVideoValue(this.formData.video);
				if (videoUrl) {
					submitData.video = videoUrl;
				}

				// 遍历分组，按顺序处理字段
				for (let i = 0; i < this.formFields.length; i++) {
					const group = this.formFields[i];
					let fieldsToProcess = [];
					if (group.type === 'single' && group.field) {
						fieldsToProcess.push(group.field);
					} else if (group.type === 'section' && group.fields) {
						fieldsToProcess = group.fields;
					}
						for (let j = 0; j < fieldsToProcess.length; j++) {
							const field = fieldsToProcess[j];
							const value = this.formData[field.key];
							if (value === undefined || value === null || value === '') continue;
							if (Array.isArray(value) && value.length === 0) continue;

							if (field.type === 'service_step' && Array.isArray(value)) {
								const processArr = value
									.filter(item => item && item.text && item.text.trim())
									.map(item => ({ text: item.text.trim() }));
								if (processArr.length === 0) continue;
								if (field._hasOriginalKey) {
									submitData[field.key] = JSON.stringify(processArr);
								} else {
									introArr.push({
										id: field._original ? field._original.id : field.key,
										title: field.label,
										type: field._fieldType || field.type,
										value: processArr,
										sectionId: field._sectionId || (field._original && field._original.sectionId),
										sectionTitle: field._sectionTitle || '',
										sectionType: field._sectionType || (field._original && field._original.sectionType),
									});
								}
								continue;
							}

							if (field._hasOriginalKey) {
								// 有key的字段直接作为请求参数
								// 图片字段确保为纯URL字符串数组
							if (field.type === 'image_multi' && Array.isArray(value)) {
								submitData[field.key] = value.map(function (item) {
									return typeof item === 'string' ? item : (item && item.url ? item.url : item);
								});
							} else {
								submitData[field.key] = value;
							}
						} else {
							// 没有key的字段放入intro数组
								introArr.push({
									id: field._original ? field._original.id : field.key,
									title: field.label,
									type: field._fieldType || field.type,
									value: value,
									sectionId: field._sectionId || (field._original && field._original.sectionId),
									sectionTitle: field._sectionTitle || '',
									sectionType: field._sectionType || (field._original && field._original.sectionType),
								});
							}
					}
				}

				if (introArr.length > 0) {
					submitData.intro = JSON.stringify(introArr);
				}

				// 服务步骤：有key时作为独立参数，无key时放入intro数组
					if (!this.hasDynamicServiceStepField && this.formData.process && this.formData.process.length > 0) {
						const processArr = this.formData.process
							.filter(item => item.text && item.text.trim())
						.map(item => ({ text: item.text.trim() }));
					if (processArr.length > 0) {
						if (this.processFieldKey) {
							submitData[this.processFieldKey] = JSON.stringify(processArr);
						} else {
							let introList = [];
							try {
								introList = submitData.intro ? JSON.parse(submitData.intro) : [];
							} catch (e) {
								introList = [];
							}
								introList.push({
									id: 'service_step',
									title: '服务流程',
									type: 'service_step',
									value: processArr,
								});
							submitData.intro = JSON.stringify(introList);
						}
					}
				}

				return submitData;
			},

			// 提交表单
			submitForm: debounce(function () {
				if (this.isAdd) return;

					// 先同步服务简介数据到formData
					this.syncDetailForm();

					if (!this.formData.first_class_id) {
						uni.showToast({
							title: "请选择服务分类",
							icon: "none",
						});
						return;
					}

					// 验证动态表单字段
					if (!this.validateDynamicForm()) {
					return;
				}

				if (this.artisanType == 2) {
					delete this.formData.sj_see;
				}
				// 提交表单逻辑
				delete this.formData.state;
				let url = null;
				if (!this.formData.id) {
					url = "/user/serveradd";
				} else {
					url = "/user/serverupdate";
				}
				console.log(this.formData, '-0-0-0-0-0-');
				const submitData = this.buildSubmitData();
				submitData.publish_user_id = this.formData.publish_user_id;
				submitData.second_class_id = this.formData.second_class_id;
				submitData.photo = Object.values(this.formData.photo || {});
				console.log(submitData, 'submitData');
				submitData.publish_user_id = this.postid
				submitData.server_kind = 2
				submitData.first_class_id = this.formData.first_class_id

				request.post(url, submitData).then((res) => {
					if (res.state == 1) {
						const pages = getCurrentPages();
						const prevPage = pages[pages.length - 2]; // 上一个页面
						uni.showToast({
							title: res.msg,
							icon: "success",
							duration: 600,
							mask: true,
						});
						this.isAdd = true;
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
								success: () => {
									prevPage.$vm.currentTab = 1;
									prevPage.$vm.state = 1;
									prevPage.$vm.getServicesList(); // 直接调用上个页面的刷新方法
								},
							});
						}, 500);
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
						this.isAdd = false;
					}
				});
			}, 500),
	},
};
</script>

<style lang="less">
.add-service {
	padding: 24rpx 24rpx 0;
	box-sizing: border-box;
}

.add-service {
	padding: 24rpx 24rpx 0;
	box-sizing: border-box;
}

.form-container {
	margin-top: 20rpx;
}

.form-container {
	margin-top: 20rpx;
}

.form-item {
	background-color: #fff;
	padding: 24rpx;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	border-radius: 10rpx;
	margin-bottom: 24rpx;
}

.form-item {
	background-color: #fff;
	padding: 24rpx;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	border-radius: 10rpx;
	margin-bottom: 24rpx;
}

.price-tip {
	width: 100%;
	margin-top: 40rpx;

	.price-tip {
		width: 100%;
		margin-top: 40rpx;

		.price-tip-card {
			padding: 8rpx 12rpx;
			background: #FDF0F0;
			border-radius: 8rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #EE4853;
			line-height: 33rpx;
		}
	}

	.price-tip-card {
		padding: 8rpx 12rpx;
		background: #FDF0F0;
		border-radius: 8rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #EE4853;
		line-height: 33rpx;
	}
}

.shopsale-box {
	flex-flow: column;
	justify-content: space-between;
	align-items: space-between;
}

.shopsale-box {
	flex-flow: column;
	justify-content: space-between;
	align-items: space-between;
}

.shopsale-change {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	margin-top: 24rpx;
}

.shopsale-change {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	margin-top: 24rpx;
}

.shopsale-option {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}

.shopsale-option {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}

.shopsale-option:last-child {
	margin-left: 220rpx;
}

.shopsale-option:last-child {
	margin-left: 220rpx;
}

.option-text {
	padding-left: 16rpx;
}

.option-text {
	padding-left: 16rpx;
}

.form-item-up {
	background-color: #fff;
	padding: 24rpx;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: flex-start;
	box-sizing: border-box;
	border-radius: 10rpx;
	margin-bottom: 24rpx;
}

.form-item-up {
	background-color: #fff;
	padding: 24rpx;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	align-items: flex-start;
	box-sizing: border-box;
	border-radius: 10rpx;
	margin-bottom: 24rpx;
}

.form-label {
	font-size: 28rpx;
	color: #333333;
}

.form-label {
	font-size: 28rpx;
	color: #333333;
}

.form-input {
	flex: 1;
	height: 40rpx;
	font-size: 28rpx;
	color: #333333;
	align-items: center;
	text-align: center;
}

.form-input {
	flex: 1;
	height: 40rpx;
	font-size: 28rpx;
	color: #333333;
	align-items: center;
	text-align: center;
}

.form-right {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.form-right {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.form-value {
	font-size: 28rpx;
	color: #333333;
	margin-right: 16rpx;
}

.service-class-item {
	justify-content: flex-start;
	align-items: flex-start;
}

.service-class-value {
	flex: 1;
	margin-right: 0;
	line-height: 40rpx;
	word-break: break-all;
}

.placeholder {
	font-weight: 400;
	font-size: 28rpx;
	color: #999999;
}

.placeholder {
	font-weight: 400;
	font-size: 28rpx;
	color: #999999;
}

.textarea-item {
	padding-bottom: 30rpx;
}

.textarea-item {
	padding-bottom: 30rpx;
}

.form-textarea {
	flex: 1;
	height: 198rpx;
	font-size: 28rpx;
	color: #333333;
	line-height: 1.5;
	margin-left: 32rpx;
}

.form-textarea {
	flex: 1;
	height: 198rpx;
	font-size: 28rpx;
	color: #333333;
	line-height: 1.5;
	margin-left: 32rpx;
}

.upload-item {
	padding-bottom: 30rpx;
}

.upload-item {
	padding-bottom: 30rpx;
}

.upload-tip {
	font-size: 24rpx;
	color: #999999;
	margin-left: 10rpx;
}

.upload-tip {
	font-size: 24rpx;
	color: #999999;
	margin-left: 10rpx;
}

.upload-content {
	margin-top: 20rpx;
	position: relative;
}

.upload-content {
	margin-top: 20rpx;
	position: relative;
}

.progress-box {
	width: 204rpx;
	height: 204rpx;
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}

.progress-box {
	width: 204rpx;
	height: 204rpx;
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}

.progress-text {
	font-size: 42rpx;
	color: #ffffff;
	font-weight: 500;
}

.progress-text {
	font-size: 42rpx;
	color: #ffffff;
	font-weight: 500;
}

.progress-lable {
	font-size: 28rpx;
	color: #ffffff;
}

.progress-lable {
	font-size: 28rpx;
	color: #ffffff;
}

.progress-box progress {
	/* width: 204rpx; */
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

.progress-box progress {
	/* width: 204rpx; */
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}

.video-preview,
.image-preview,
.upload-btn {
	width: 200rpx;
	height: 200rpx;
	margin-right: 10rpx;
	margin-bottom: 20rpx;
	position: relative;
}

.video-preview,
.image-preview,
.upload-btn {
	width: 200rpx;
	height: 200rpx;
	margin-right: 10rpx;
	margin-bottom: 20rpx;
	position: relative;
}

.preview-video,
.preview-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 8rpx;
}

.preview-video,
.preview-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 8rpx;
}

.upload-btn {
	border: 2rpx dashed #dddddd;
	border-radius: 8rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.upload-btn {
	border: 2rpx dashed #dddddd;
	border-radius: 8rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.plus-icon {
	font-size: 60rpx;
	color: #999999;
}

.plus-icon {
	font-size: 60rpx;
	color: #999999;
}

.delete-btn {
	position: absolute;
	top: -20rpx;
	right: -20rpx;
	width: 40rpx;
	height: 40rpx;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
}

.delete-btn {
	position: absolute;
	top: -20rpx;
	right: -20rpx;
	width: 40rpx;
	height: 40rpx;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
}

.bottom-buttons {
	/* position: fixed;
.bottom-buttons {
	/* position: fixed;
  left: 0;
  right: 0;
  bottom: 0; */
	height: 100rpx;
	padding: 40rpx 0 64rpx;
	box-sizing: border-box;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
}

	.btn-draft,
	.btn-submit {
	width: 334rpx;
	height: 76rpx;
	line-height: 76rpx;
	text-align: center;
	font-size: 28rpx;
	border-radius: 40rpx;
	margin: 0 24rpx;
}

.btn-draft,
.btn-submit {
	width: 334rpx;
	height: 76rpx;
	line-height: 76rpx;
	text-align: center;
	font-size: 28rpx;
	border-radius: 40rpx;
	margin: 0 24rpx;
}

.btn-draft {
	background-color: #ffffff;
	color: #e8101e;
	border: 2rpx solid #e8101e;
	box-sizing: border-box;
}

.btn-submit {
	background-color: #e8101e;
	color: #ffffff;
	width: 705rpx;
	height: 76rpx;
}

.form-step {
	background-color: #fff;
	margin-bottom: 24rpx;
}

.form-step {
	background-color: #fff;
	margin-bottom: 24rpx;
}

.form-step .form-item {
	margin-bottom: 0;
}

.form-step .form-item {
	margin-bottom: 0;
}

.step {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	padding: 0 24rpx 24rpx;
}

.step {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	padding: 0 24rpx 24rpx;
}

.step-inp {
	flex: 1;
	font-size: 28rpx;
	color: #333333;
	margin-left: 38rpx;
	padding: 0 24rpx;
	background-color: rgba(230, 230, 230, 0.5);
}

.step-inp {
	flex: 1;
	font-size: 28rpx;
	color: #333333;
	margin-left: 38rpx;
	padding: 0 24rpx;
	background-color: rgba(230, 230, 230, 0.5);
}

.step-textarea {
	font-size: 24rpx;
	flex: 1;
	height: 70rpx;
	border-radius: 6rpx;
	margin-left: 38rpx;
	padding: 24rpx;
	background-color: rgba(230, 230, 230, 0.5);
}

.step-textarea {
	font-size: 24rpx;
	flex: 1;
	height: 70rpx;
	border-radius: 6rpx;
	margin-left: 38rpx;
	padding: 24rpx;
	background-color: rgba(230, 230, 230, 0.5);
}

/* 选择器触发按钮样式 */
.picker-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 32rpx;
	background-color: #ffffff;
	border-radius: 12rpx;
	margin-bottom: 24rpx;
}

/* 选择器触发按钮样式 */
.picker-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 32rpx;
	background-color: #ffffff;
	border-radius: 12rpx;
	margin-bottom: 24rpx;
}

.picker-label {
	font-size: 28rpx;
	color: #333333;
}

.picker-label {
	font-size: 28rpx;
	color: #333333;
}

.picker-value {
	font-size: 28rpx;
	color: #666666;
}

.picker-value {
	font-size: 28rpx;
	color: #666666;
}

.picker-arrow {
	width: 32rpx;
	height: 32rpx;
	margin-left: 16rpx;
}

.picker-arrow {
	width: 32rpx;
	height: 32rpx;
	margin-left: 16rpx;
}

.delete-icon {
	width: 32rpx;
	height: 32rpx;
	margin-left: 24rpx;
}

.delete-icon {
	width: 32rpx;
	height: 32rpx;
	margin-left: 24rpx;
}

.form-detail {
	position: relative;
}

.form-detail {
	position: relative;
}

.required::before {
	content: "*";
	color: #ff0000;
	margin-right: 4rpx;
}

.required::before {
	content: "*";
	color: #ff0000;
	margin-right: 4rpx;
}

.step-inp,
.form-input {
	height: 60rpx;
}

.step-inp,
.form-input {
	height: 60rpx;
}

// 服务简介相关
.detail-card {
	background: #ffffff;
	border-radius: 20rpx;
	padding: 0 24rpx 8rpx;
	margin-bottom: 24rpx;
	box-sizing: border-box;
	overflow: hidden;
}

// 服务简介相关
.detail-card {
	background: #ffffff;
	border-radius: 20rpx;
	padding: 0 24rpx 8rpx;
	margin-bottom: 24rpx;
	box-sizing: border-box;
	overflow: hidden;
}

.detail-title {
	padding: 24rpx 0 25rpx;
}

.detail-title {
	padding: 24rpx 0 25rpx;
}

.detail-title .form-label {
	font-size: 30rpx;
	font-weight: 500;
	color: #333;
	line-height: 40rpx;
}

.detail-title .form-label {
	font-size: 30rpx;
	font-weight: 500;
	color: #333;
	line-height: 40rpx;
}

.detail-row {
	padding: 0 0 36rpx;
}

.detail-row {
	padding: 0 0 36rpx;
}

.detail-row .form-label {
	display: block;
	margin-bottom: 20rpx;
	line-height: 40rpx;
}

.detail-row .form-label {
	display: block;
	margin-bottom: 20rpx;
	line-height: 40rpx;
}

.detail-textarea-wrap {
	position: relative;
	background: #f7f7f7;
	border-radius: 16rpx;
	padding: 24rpx 24rpx 52rpx;
	box-sizing: border-box;
}

.detail-textarea-wrap {
	position: relative;
	background: #f7f7f7;
	border-radius: 16rpx;
	padding: 24rpx 24rpx 52rpx;
	box-sizing: border-box;
}

.detail-textarea {
	width: 100%;
	height: 108rpx;
	min-height: 108rpx;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	font-size: 28rpx;
	line-height: 40rpx;
	color: #333333;
	box-sizing: border-box;
}

.detail-textarea {
	width: 100%;
	height: 108rpx;
	min-height: 108rpx;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	font-size: 28rpx;
	line-height: 40rpx;
	color: #333333;
	box-sizing: border-box;
}

.detail-count {
	position: absolute;
	right: 24rpx;
	bottom: 16rpx;
	font-size: 22rpx;
	color: #999999;
	line-height: 32rpx;
}

.detail-count {
	position: absolute;
	right: 24rpx;
	bottom: 16rpx;
	font-size: 22rpx;
	color: #999999;
	line-height: 32rpx;
}

/* 平台特定样式 */
/* #ifdef H5 */
.form-input,
.form-textarea {
	outline: none;
}

.upload-btn {
	cursor: pointer;
}
/* #endif */

/* #ifdef APP-PLUS */
.form-input {
	height: 90rpx;
}

.permission.transform {
	top: calc(var(--status-bar-height) + 88rpx + 30rpx);
	opacity: 1;
	visibility: visible;
}
/* #endif */

/* #ifdef MP-WEIXIN */
.form-input {
	height: 80rpx;
}

.bottom-buttons {
	padding-bottom: env(safe-area-inset-bottom);
}
/* #endif */

.tip {
	padding: 20rpx 30rpx;
	background: #feefec;
	font-weight: 400;
	font-size: 30rpx;
	color: #f31d2f;
	line-height: 42rpx;
	text-align: center;
	font-style: normal;

	.tip-icon {
		width: 34rpx;
		height: 34rpx;
		margin-right: 10rpx;
		transform: translateY(6rpx);
	}
}

/* 淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.3s;
}

/* 淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
	opacity: 0;
}

.fade-enter,
.fade-leave-to {
	opacity: 0;
}

.popup-mask2 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	// z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.popup-mask2 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	// z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.popup-content2 {
	width: 600rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	overflow: hidden;
	padding: 40rpx 30rpx;
	box-sizing: border-box;
}

.popup-content2 {
	width: 600rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	overflow: hidden;
	padding: 40rpx 30rpx;
	box-sizing: border-box;
}

.popup-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333333;
	text-align: center;
	margin-bottom: 20rpx;
}

.popup-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333333;
	text-align: center;
	margin-bottom: 20rpx;
}

.popup-message {
	font-size: 30rpx;
	color: #666666;
	text-align: center;
	margin-top: 40rpx;
	margin-bottom: 30rpx;
	line-height: 1.5;
}

.popup-message {
	font-size: 30rpx;
	color: #666666;
	text-align: center;
	margin-top: 40rpx;
	margin-bottom: 30rpx;
	line-height: 1.5;
}

.popup-buttons {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	padding: 20rpx 0 0 0;
	gap: 60rpx;
}

.popup-buttons {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	padding: 20rpx 0 0 0;
	gap: 60rpx;
}

.popup-btn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 26rpx;
	border-radius: 40rpx;
}

.popup-btn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 26rpx;
	border-radius: 40rpx;
}

.popup-btn-know {
	background-color: #e8101e;
	color: #ffffff;
}

.popup-btn-notshow {
	background-color: #ffffff;
	color: #e8101e;
	border: 1rpx #e8101e solid;
}

.video-upload {
	background-color: #fff;
	padding: 24rpx;
	margin-bottom: 24rpx;
}

.flex-c {
	display: flex;
	align-items: center;
}

.flex {
	display: flex;
}
</style>