From a7f9544bc5981f7834be835b3ef99b4493deaaf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=81=E6=9D=B0?= <727475508@qq.com>
Date: Tue, 9 Jun 2026 17:49:15 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E5=AE=9A=E4=B9=89=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=A4=87=E4=BB=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/dynamic-form/FormItemCheckbox.vue |   97 +
 components/dynamic-form/FormItemImage.vue    |  112 +
 components/dynamic-form/FormItemNumber.vue   |   39 +
 components/dynamic-form/FormItemRadio.vue    |   71 +
 components/dynamic-form/FormItemRichtext.vue |   83 +
 components/dynamic-form/FormItemSelect.vue   |   79 +
 components/dynamic-form/FormItemText.vue     |   39 +
 components/dynamic-form/FormItemTextarea.vue |   56 +
 components/dynamic-form/FormItemVideo.vue    |  104 +
 components/dynamic-form/dynamic-form.vue     |  197 ++
 pages/artisan/service-list.vue               | 1501 ++++++-----
 pages/shop/add-service.vue                   | 2519 ++++++++----------
 utils/request.js                             |   12 +-
 13 files changed, 2888 insertions(+), 2021 deletions(-)
 create mode 100644 components/dynamic-form/FormItemCheckbox.vue
 create mode 100644 components/dynamic-form/FormItemImage.vue
 create mode 100644 components/dynamic-form/FormItemNumber.vue
 create mode 100644 components/dynamic-form/FormItemRadio.vue
 create mode 100644 components/dynamic-form/FormItemRichtext.vue
 create mode 100644 components/dynamic-form/FormItemSelect.vue
 create mode 100644 components/dynamic-form/FormItemText.vue
 create mode 100644 components/dynamic-form/FormItemTextarea.vue
 create mode 100644 components/dynamic-form/FormItemVideo.vue
 create mode 100644 components/dynamic-form/dynamic-form.vue

diff --git a/components/dynamic-form/FormItemCheckbox.vue b/components/dynamic-form/FormItemCheckbox.vue
new file mode 100644
index 0000000..85dffca
--- /dev/null
+++ b/components/dynamic-form/FormItemCheckbox.vue
@@ -0,0 +1,97 @@
+<template>
+	<view class="form-checkbox">
+		<view v-for="(item, index) in options" :key="index" class="checkbox-item" @click="toggle(item)">
+			<view :class="['checkbox-dot', { checked: isSelected(item.value) }]">
+				<text v-if="isSelected(item.value)" class="check-icon">&#10003;</text>
+			</view>
+			<text class="checkbox-label">{{ item.label }}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'FormItemCheckbox',
+	props: {
+		value: {
+			type: Array,
+			default: function () {
+				return [];
+			}
+		},
+		options: {
+			type: Array,
+			default: function () {
+				return [];
+			}
+		}
+	},
+	data: function () {
+		return {
+			selectedValues: []
+		};
+	},
+	watch: {
+		value: {
+			handler: function (val) {
+				this.selectedValues = Array.isArray(val) ? val.slice() : [];
+			},
+			immediate: true
+		}
+	},
+	methods: {
+		isSelected: function (val) {
+			return this.selectedValues.indexOf(val) > -1;
+		},
+		toggle: function (item) {
+			var index = this.selectedValues.indexOf(item.value);
+			if (index > -1) {
+				this.selectedValues.splice(index, 1);
+			} else {
+				this.selectedValues.push(item.value);
+			}
+			this.$emit('input', this.selectedValues.slice());
+		}
+	}
+};
+</script>
+
+<style scoped>
+.form-checkbox {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 24rpx;
+}
+
+.checkbox-item {
+	display: flex;
+	align-items: center;
+	padding: 16rpx 0;
+}
+
+.checkbox-dot {
+	width: 36rpx;
+	height: 36rpx;
+	border-radius: 6rpx;
+	border: 2rpx solid #dddddd;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-right: 12rpx;
+}
+
+.checkbox-dot.checked {
+	border-color: #e8101e;
+	background-color: #e8101e;
+}
+
+.check-icon {
+	color: #ffffff;
+	font-size: 24rpx;
+}
+
+.checkbox-label {
+	font-size: 28rpx;
+	color: #333333;
+}
+</style>
diff --git a/components/dynamic-form/FormItemImage.vue b/components/dynamic-form/FormItemImage.vue
new file mode 100644
index 0000000..2d6396c
--- /dev/null
+++ b/components/dynamic-form/FormItemImage.vue
@@ -0,0 +1,112 @@
+<template>
+  <view class="form-image">
+    <view class="image-list">
+      <view v-for="(item, index) in imageList" :key="index" class="image-item">
+        <image :src="item" mode="aspectFill" class="preview-image" @click="previewImage(index)" />
+        <view class="delete-btn" @click.stop="deleteImage(index)">
+          <text class="delete-icon">&times;</text>
+        </view>
+      </view>
+      <view v-if="imageList.length < maxCount" class="image-item add-btn" @click="chooseImage">
+        <text class="add-icon">+</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "FormItemImage",
+  props: {
+    value: { type: Array, default: function() { return []; } },
+    maxCount: { type: Number, default: 9 }
+  },
+  data: function() {
+    return {
+      imageList: []
+    };
+  },
+  watch: {
+    value: {
+      handler: function(val) {
+        this.imageList = Array.isArray(val) ? val.slice() : [];
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    chooseImage: function() {
+      var remaining = this.maxCount - this.imageList.length;
+      if (remaining <= 0) return;
+      var self = this;
+      uni.chooseImage({
+        count: remaining,
+        sizeType: ["compressed"],
+        sourceType: ["album", "camera"],
+        success: function(res) {
+          self.imageList = self.imageList.concat(res.tempFilePaths);
+          self.$emit("input", self.imageList);
+        }
+      });
+    },
+    deleteImage: function(index) {
+      this.imageList.splice(index, 1);
+      this.$emit("input", this.imageList);
+    },
+    previewImage: function(index) {
+      uni.previewImage({
+        urls: this.imageList,
+        current: index
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.form-image {
+  width: 100%;
+}
+.image-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+}
+.image-item {
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 8rpx;
+  overflow: hidden;
+  position: relative;
+}
+.preview-image {
+  width: 100%;
+  height: 100%;
+}
+.delete-btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 40rpx;
+  height: 40rpx;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.delete-icon {
+  color: #ffffff;
+  font-size: 28rpx;
+}
+.add-btn {
+  background-color: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2rpx dashed #cccccc;
+}
+.add-icon {
+  font-size: 60rpx;
+  color: #999999;
+}
+</style>
diff --git a/components/dynamic-form/FormItemNumber.vue b/components/dynamic-form/FormItemNumber.vue
new file mode 100644
index 0000000..1fcfa40
--- /dev/null
+++ b/components/dynamic-form/FormItemNumber.vue
@@ -0,0 +1,39 @@
+<template>
+	<input type="number" class="form-input" :value="value" :placeholder="placeholder" placeholder-class="placeholder"
+		@input="$emit('input', $event.detail.value)" />
+</template>
+
+<script>
+export default {
+	name: 'FormItemNumber',
+	props: {
+		value: {
+			type: [String, Number],
+			default: ''
+		},
+		placeholder: {
+			type: String,
+			default: '请输入数字'
+		}
+	}
+};
+</script>
+
+<style scoped>
+.form-input {
+	flex: 1;
+	height: 80rpx;
+	font-size: 28rpx;
+	color: #333333;
+	text-align: center;
+	background-color: #f5f5f5;
+	border-radius: 8rpx;
+	padding: 0 24rpx;
+}
+
+.placeholder {
+	font-weight: 400;
+	font-size: 28rpx;
+	color: #999999;
+}
+</style>
diff --git a/components/dynamic-form/FormItemRadio.vue b/components/dynamic-form/FormItemRadio.vue
new file mode 100644
index 0000000..6d3c015
--- /dev/null
+++ b/components/dynamic-form/FormItemRadio.vue
@@ -0,0 +1,71 @@
+<template>
+  <view class="form-radio">
+    <view v-for="(item, index) in options" :key="index" class="radio-item" @click="onSelect(item.value)">
+      <view class="radio-dot" :class="{ active: value == item.value }"></view>
+      <text class="radio-label">{{ item.label }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "FormItemRadio",
+  props: {
+    value: {
+      type: [String, Number],
+      default: ""
+    },
+    options: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    }
+  },
+  methods: {
+    onSelect: function(val) {
+      this.$emit("input", val);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.form-radio {
+  display: flex;
+  flex-wrap: wrap;
+}
+.radio-item {
+  display: flex;
+  align-items: center;
+  margin-right: 40rpx;
+  margin-bottom: 16rpx;
+}
+.radio-dot {
+  width: 36rpx;
+  height: 36rpx;
+  border-radius: 50%;
+  border: 2rpx solid #cccccc;
+  margin-right: 12rpx;
+  position: relative;
+}
+.radio-dot.active {
+  border-color: #e8101e;
+  background-color: #e8101e;
+}
+.radio-dot.active::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  background-color: #ffffff;
+}
+.radio-label {
+  font-size: 28rpx;
+  color: #333333;
+}
+</style>
diff --git a/components/dynamic-form/FormItemRichtext.vue b/components/dynamic-form/FormItemRichtext.vue
new file mode 100644
index 0000000..0874f4f
--- /dev/null
+++ b/components/dynamic-form/FormItemRichtext.vue
@@ -0,0 +1,83 @@
+<template>
+  <view class="form-richtext">
+    <view class="richtext-toolbar">
+      <text class="toolbar-btn" @click="insertTag('b')">加粗</text>
+      <text class="toolbar-btn" @click="insertTag('i')">斜体</text>
+      <text class="toolbar-btn" @click="insertImage">图片</text>
+    </view>
+    <textarea class="richtext-editor" :value="value" placeholder="请输入图文内容" placeholder-class="placeholder"
+      @input="$emit('input', $event.detail.value)" />
+    <view v-if="value" class="richtext-preview">
+      <rich-text :nodes="value" />
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "FormItemRichtext",
+  props: {
+    value: { type: String, default: "" },
+  },
+  methods: {
+    insertTag(tag) {
+      const text = `<${tag}></${tag}>`;
+      this.$emit("input", (this.value || "") + text);
+    },
+    insertImage() {
+      uni.chooseImage({
+        count: 1,
+        success: (res) => {
+          const imgTag = `<img src="${res.tempFilePaths[0]}" />`;
+          this.$emit("input", (this.value || "") + imgTag);
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.form-richtext {
+  width: 100%;
+}
+
+.richtext-toolbar {
+  display: flex;
+  gap: 16rpx;
+  padding: 16rpx;
+  background-color: #f0f0f0;
+  border-radius: 8rpx 8rpx 0 0;
+}
+
+.toolbar-btn {
+  padding: 8rpx 16rpx;
+  background-color: #ffffff;
+  border-radius: 4rpx;
+  font-size: 24rpx;
+  color: #333333;
+}
+
+.richtext-editor {
+  width: 100%;
+  height: 300rpx;
+  background-color: #ffffff;
+  border: 2rpx solid #e0e0e0;
+  border-top: none;
+  border-radius: 0 0 8rpx 8rpx;
+  padding: 20rpx;
+  font-size: 28rpx;
+  color: #333333;
+}
+
+.placeholder {
+  color: #999999;
+}
+
+.richtext-preview {
+  margin-top: 16rpx;
+  padding: 16rpx;
+  background-color: #f9f9f9;
+  border-radius: 8rpx;
+}
+</style>
diff --git a/components/dynamic-form/FormItemSelect.vue b/components/dynamic-form/FormItemSelect.vue
new file mode 100644
index 0000000..1e717cf
--- /dev/null
+++ b/components/dynamic-form/FormItemSelect.vue
@@ -0,0 +1,79 @@
+<template>
+  <picker :range="optionLabels" @change="onChange">
+    <view class="form-select">
+      <text :class="['select-text', selectedLabel ? '' : 'placeholder']">
+        {{ selectedLabel || placeholder }}
+      </text>
+      <image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/wxstaic/images/arrow_right.png" class="arrow-right" mode="aspectFit" />
+    </view>
+  </picker>
+</template>
+
+<script>
+export default {
+  name: "FormItemSelect",
+  props: {
+    value: {
+      type: [String, Number],
+      default: ""
+    },
+    options: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    },
+    placeholder: {
+      type: String,
+      default: "请选择"
+    }
+  },
+  computed: {
+    optionLabels: function() {
+      return this.options.map(function(item) {
+        return item.label;
+      });
+    },
+    selectedLabel: function() {
+      var self = this;
+      var found = this.options.find(function(item) {
+        return item.value == self.value;
+      });
+      return found ? found.label : "";
+    }
+  },
+  methods: {
+    onChange: function(e) {
+      var index = e.detail.value;
+      var selected = this.options[index];
+      if (selected) {
+        this.$emit("input", selected.value);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.form-select {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 80rpx;
+  background-color: #f5f5f5;
+  border-radius: 8rpx;
+  padding: 0 24rpx;
+}
+.select-text {
+  font-size: 28rpx;
+  color: #333333;
+}
+.placeholder {
+  color: #999999;
+}
+.arrow-right {
+  width: 24rpx;
+  height: 24rpx;
+}
+</style>
diff --git a/components/dynamic-form/FormItemText.vue b/components/dynamic-form/FormItemText.vue
new file mode 100644
index 0000000..5abc0c0
--- /dev/null
+++ b/components/dynamic-form/FormItemText.vue
@@ -0,0 +1,39 @@
+<template>
+	<input type="text" class="form-input" :value="value" :placeholder="placeholder" placeholder-class="placeholder"
+		@input="$emit('input', $event.detail.value)" />
+</template>
+
+<script>
+export default {
+	name: 'FormItemText',
+	props: {
+		value: {
+			type: String,
+			default: ''
+		},
+		placeholder: {
+			type: String,
+			default: '请输入'
+		}
+	}
+};
+</script>
+
+<style scoped>
+.form-input {
+	flex: 1;
+	height: 80rpx;
+	font-size: 28rpx;
+	color: #333333;
+	text-align: center;
+	background-color: #f5f5f5;
+	border-radius: 8rpx;
+	padding: 0 24rpx;
+}
+
+.placeholder {
+	font-weight: 400;
+	font-size: 28rpx;
+	color: #999999;
+}
+</style>
diff --git a/components/dynamic-form/FormItemTextarea.vue b/components/dynamic-form/FormItemTextarea.vue
new file mode 100644
index 0000000..3783306
--- /dev/null
+++ b/components/dynamic-form/FormItemTextarea.vue
@@ -0,0 +1,56 @@
+<template>
+	<view class="textarea-wrap">
+		<textarea class="form-textarea" :value="value" :placeholder="placeholder" placeholder-class="placeholder"
+			maxlength="200" @input="$emit('input', $event.detail.value)" />
+		<text class="char-count">{{ (value || '').length }}/200</text>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'FormItemTextarea',
+	props: {
+		value: {
+			type: String,
+			default: ''
+		},
+		placeholder: {
+			type: String,
+			default: '请输入'
+		}
+	}
+};
+</script>
+
+<style scoped>
+.textarea-wrap {
+	width: 100%;
+	position: relative;
+}
+
+.form-textarea {
+	width: 100%;
+	height: 150rpx;
+	font-size: 28rpx;
+	color: #333333;
+	line-height: 1.5;
+	background-color: #f5f5f5;
+	border-radius: 8rpx;
+	padding: 20rpx;
+	box-sizing: border-box;
+}
+
+.placeholder {
+	font-weight: 400;
+	font-size: 28rpx;
+	color: #999999;
+}
+
+.char-count {
+	position: absolute;
+	right: 16rpx;
+	bottom: 16rpx;
+	font-size: 24rpx;
+	color: #999999;
+}
+</style>
diff --git a/components/dynamic-form/FormItemVideo.vue b/components/dynamic-form/FormItemVideo.vue
new file mode 100644
index 0000000..31bca3f
--- /dev/null
+++ b/components/dynamic-form/FormItemVideo.vue
@@ -0,0 +1,104 @@
+<template>
+  <view class="form-video">
+    <view v-if="videoUrl" class="video-preview">
+      <video :src="videoUrl" class="video-player" controls />
+      <view class="delete-btn" @click="deleteVideo">
+        <text class="delete-icon">&times;</text>
+      </view>
+    </view>
+    <view v-else class="video-add" @click="chooseVideo">
+      <text class="add-icon">+</text>
+      <text class="add-text">选择视频</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "FormItemVideo",
+  props: {
+    value: { type: String, default: "" }
+  },
+  data: function() {
+    return {
+      videoUrl: ""
+    };
+  },
+  watch: {
+    value: {
+      handler: function(val) {
+        this.videoUrl = val || "";
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    chooseVideo: function() {
+      var self = this;
+      uni.chooseVideo({
+        sourceType: ["album", "camera"],
+        maxDuration: 60,
+        success: function(res) {
+          self.videoUrl = res.tempFilePath;
+          self.$emit("input", self.videoUrl);
+        }
+      });
+    },
+    deleteVideo: function() {
+      this.videoUrl = "";
+      this.$emit("input", "");
+    }
+  }
+};
+</script>
+
+<style scoped>
+.form-video {
+  width: 100%;
+}
+.video-preview {
+  width: 100%;
+  position: relative;
+}
+.video-player {
+  width: 100%;
+  height: 400rpx;
+  border-radius: 8rpx;
+}
+.delete-btn {
+  position: absolute;
+  top: 16rpx;
+  right: 16rpx;
+  width: 48rpx;
+  height: 48rpx;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.delete-icon {
+  color: #ffffff;
+  font-size: 32rpx;
+}
+.video-add {
+  width: 300rpx;
+  height: 300rpx;
+  background-color: #f5f5f5;
+  border: 2rpx dashed #cccccc;
+  border-radius: 8rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.add-icon {
+  font-size: 60rpx;
+  color: #999999;
+}
+.add-text {
+  font-size: 24rpx;
+  color: #999999;
+  margin-top: 8rpx;
+}
+</style>
diff --git a/components/dynamic-form/dynamic-form.vue b/components/dynamic-form/dynamic-form.vue
new file mode 100644
index 0000000..e5a564c
--- /dev/null
+++ b/components/dynamic-form/dynamic-form.vue
@@ -0,0 +1,197 @@
+<template>
+	<view class="dynamic-form">
+		<view v-for="(field, index) in fields" :key="field.id || index" class="form-item"
+			:class="{ 'form-item-up': isUpType(field.type) }">
+			<view class="form-header">
+				<text class="form-label" :class="{ required: field.is_required == 1 }">{{ field.label }}</text>
+				<text v-if="field.tips" class="form-tips">{{ field.tips }}</text>
+			</view>
+			<view class="form-control">
+				<!-- 单行文本 -->
+				<form-item-text v-if="field.type === 'text'" :value="formData[field.key]"
+					:placeholder="field.placeholder" @input="onInput(field.key, $event)" />
+				<!-- 多行文本 -->
+				<form-item-textarea v-else-if="field.type === 'textarea'" :value="formData[field.key]"
+					:placeholder="field.placeholder" @input="onInput(field.key, $event)" />
+				<!-- 数字输入 -->
+				<form-item-number v-else-if="field.type === 'number'" :value="formData[field.key]"
+					:placeholder="field.placeholder" @input="onInput(field.key, $event)" />
+				<!-- 多图上传 -->
+				<form-item-image v-else-if="field.type === 'image_multi'" :value="formData[field.key]"
+					:maxCount="field.maxCount || 9" @input="onInput(field.key, $event)" />
+				<!-- 视频上传 -->
+				<form-item-video v-else-if="field.type === 'video'" :value="formData[field.key]"
+					@input="onInput(field.key, $event)" />
+				<!-- 下拉选择 -->
+				<form-item-select v-else-if="field.type === 'select'" :value="formData[field.key]"
+					:options="field.options" :placeholder="field.placeholder" @input="onInput(field.key, $event)" />
+				<!-- 单选 -->
+				<form-item-radio v-else-if="field.type === 'single_select'" :value="formData[field.key]"
+					:options="field.options" @input="onInput(field.key, $event)" />
+				<!-- 多选 -->
+				<form-item-checkbox v-else-if="field.type === 'multi_select'" :value="formData[field.key]"
+					:options="field.options" @input="onInput(field.key, $event)" />
+				<!-- 图文编辑器 -->
+				<form-item-richtext v-else-if="field.type === 'richtext_editor'" :value="formData[field.key]"
+					@input="onInput(field.key, $event)" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import FormItemText from './FormItemText.vue';
+import FormItemTextarea from './FormItemTextarea.vue';
+import FormItemNumber from './FormItemNumber.vue';
+import FormItemImage from './FormItemImage.vue';
+import FormItemVideo from './FormItemVideo.vue';
+import FormItemSelect from './FormItemSelect.vue';
+import FormItemRadio from './FormItemRadio.vue';
+import FormItemCheckbox from './FormItemCheckbox.vue';
+import FormItemRichtext from './FormItemRichtext.vue';
+
+export default {
+	name: 'DynamicForm',
+	components: {
+		FormItemText,
+		FormItemTextarea,
+		FormItemNumber,
+		FormItemImage,
+		FormItemVideo,
+		FormItemSelect,
+		FormItemRadio,
+		FormItemCheckbox,
+		FormItemRichtext
+	},
+	props: {
+		fields: {
+			type: Array,
+			default: function () {
+				return [];
+			}
+		},
+		value: {
+			type: Object,
+			default: function () {
+				return {};
+			}
+		}
+	},
+	data: function () {
+		return {
+			formData: {}
+		};
+	},
+	watch: {
+		value: {
+			handler: function (val) {
+				this.formData = Object.assign({}, val);
+			},
+			immediate: true,
+			deep: true
+		},
+		fields: {
+			handler: function (val) {
+				var self = this;
+				if (val && val.length > 0) {
+					val.forEach(function (field) {
+						if (self.formData[field.key] === undefined) {
+							self.$set(self.formData, field.key, self.getDefaultValue(field.type));
+						}
+					});
+				}
+			},
+			immediate: true
+		}
+	},
+	methods: {
+		isUpType: function (type) {
+			return type === 'image_multi' || type === 'video';
+		},
+		getDefaultValue: function (type) {
+			if (type === 'multi_select') {
+				return [];
+			}
+			if (type === 'image_multi') {
+				return [];
+			}
+			return '';
+		},
+		onInput: function (key, val) {
+			this.$set(this.formData, key, val);
+			this.$emit('input', Object.assign({}, this.formData));
+		},
+		validate: function () {
+			for (var i = 0; i < this.fields.length; i++) {
+				var field = this.fields[i];
+				if (field.is_required == 1) {
+					var val = this.formData[field.key];
+					if (val === undefined || val === null || val === '' || (Array.isArray(val) && val.length === 0)) {
+						uni.showToast({
+							title: '请填写' + field.label,
+							icon: 'none'
+						});
+						return false;
+					}
+				}
+			}
+			return true;
+		},
+		getData: function () {
+			return Object.assign({}, this.formData);
+		}
+	}
+};
+</script>
+
+<style scoped>
+.dynamic-form {
+	width: 100%;
+}
+
+.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-up {
+	flex-flow: column nowrap;
+	justify-content: space-between;
+	align-items: flex-start;
+}
+
+.form-header {
+	display: flex;
+	align-items: center;
+	margin-bottom: 16rpx;
+}
+
+.form-label {
+	font-size: 28rpx;
+	color: #333333;
+}
+
+.form-label.required::before {
+	content: '*';
+	color: #e8101e;
+	margin-right: 4rpx;
+}
+
+.form-tips {
+	font-size: 24rpx;
+	color: #999999;
+	margin-left: 10rpx;
+}
+
+.form-control {
+	width: 100%;
+	flex: 1;
+}
+</style>
diff --git a/pages/artisan/service-list.vue b/pages/artisan/service-list.vue
index 942f783..9ae8a75 100644
--- a/pages/artisan/service-list.vue
+++ b/pages/artisan/service-list.vue
@@ -49,18 +49,18 @@
 					<!-- 状态标签 -->
 					<view :class="['status-tag', 'state' + item.state]">
 						<text class="status-text">{{
-              item.state == 0
-                ? "草稿"
-                : item.state == 1
-                ? "审核中"
-                : item.state == 2
-                ? "已上架"
-                : item.state == 3
-                ? "下架"
-                : item.state == 4
-                ? "驳回"
-                : ""
-            }}</text>
+							item.state == 0
+								? "草稿"
+								: item.state == 1
+									? "审核中"
+									: item.state == 2
+										? "已上架"
+										: item.state == 3
+											? "下架"
+											: item.state == 4
+												? "驳回"
+												: ""
+						}}</text>
 					</view>
 
 					<!-- 编辑按钮 -->
@@ -100,170 +100,160 @@
 
 		</view>
 		<!-- <view class="add-btn"></view> -->
+
+		<!-- 服务分类选择弹窗 -->
+		<view class="category-popup-mask" v-if="showCategoryPopup" @click="closeCategoryPopup">
+			<view class="category-popup" @click.stop>
+				<view class="category-popup-header">
+					<text class="category-popup-title">选择服务分类</text>
+					<view class="category-popup-close" @click="closeCategoryPopup">
+						<text class="category-popup-close-icon">&times;</text>
+					</view>
+				</view>
+				<view class="category-popup-body">
+					<!-- 左侧一级分类 -->
+					<scroll-view scroll-y class="category-left">
+						<view v-for="(item, index) in firstClassList" :key="item.id"
+							:class="['category-left-item', { active: selectedFirstIndex === index }]"
+							@click="selectFirstClass(index, item)">
+							<text class="category-left-text">{{ item.title }}</text>
+						</view>
+					</scroll-view>
+					<!-- 右侧二级分类 -->
+					<scroll-view scroll-y class="category-right">
+						<view v-if="secondClassList.length === 0" class="category-empty">
+							<text class="category-empty-text">暂无子分类</text>
+						</view>
+						<view v-for="item in secondClassList" :key="item.id" class="category-right-item"
+							@click="selectSecondClass(item)">
+							<text class="category-right-text">{{ item.title }}</text>
+							<view :class="['category-dot', { selected: selectedSecondId === item.id }]"></view>
+						</view>
+					</scroll-view>
+				</view>
+				<!-- 底部按钮 -->
+				<view class="category-popup-footer">
+					<view class="category-popup-btn category-popup-btn-cancel" @click="closeCategoryPopup">
+						<text>取消</text>
+					</view>
+					<view class="category-popup-btn category-popup-btn-confirm" @click="confirmCategory">
+						<text>确认</text>
+					</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
-	import request from "../../utils/request";
-	export default {
-		data() {
-			return {
-				title: "",
-				state: 2,
-				currentTab: 0,
-				tabs: [{
-						id: 2,
-						text: "已上架",
-					},
-					{
-						id: 1,
-						text: "审核中",
-					},
-					{
-						id: 3,
-						text: "下架",
-					},
-					{
-						id: 0,
-						text: "草稿",
-					},
-					{
-						id: 4,
-						text: "驳回",
-					},
-				],
-				services: [],
-				hasMore: false,
-				startX: 0,
-				moveX: 0,
-				currentIndex: -1,
-			};
+import request from "../../utils/request";
+export default {
+	data() {
+		return {
+			title: "",
+			state: 2,
+			currentTab: 0,
+			tabs: [{
+				id: 2,
+				text: "已上架",
+			},
+			{
+				id: 1,
+				text: "审核中",
+			},
+			{
+				id: 3,
+				text: "下架",
+			},
+			{
+				id: 0,
+				text: "草稿",
+			},
+			{
+				id: 4,
+				text: "驳回",
+			},
+			],
+			services: [],
+			hasMore: false,
+			startX: 0,
+			moveX: 0,
+			currentIndex: -1,
+			// 分类选择相关
+			showCategoryPopup: false,
+			firstClassList: [],
+			secondClassList: [],
+			selectedFirstIndex: -1,
+			selectedSecondId: null,
+		};
+	},
+	// computed: {
+	//   filteredServices() {
+	//     return this.services.filter(service => {
+	//       // 根据搜索文本过滤
+	//       if (this.title && !service.title.includes(this.title)) {
+	//         return false
+	//       }
+	//       // 根据当前标签过滤
+	//       switch (this.currentTab) {
+	//         case 0: // 草稿
+	//           return service.state === 2
+	//         case 1: // 审核中
+	//           return service.state === 1
+	//         case 2: // 已上架
+	//           return service.state === 2
+	//         case 3: // 下架
+	//           return service.state === 3
+	//         case 4: // 驳回
+	//           return service.state === 4
+	//         default:
+	//           return true
+	//       }
+	//     })
+	//   }
+	// },
+	onLoad() {
+		this.getServicesList();
+	},
+	methods: {
+		getServicesList() {
+			let url = "/user/sjserverlist";
+			request
+				.post(url, {
+					state: this.state,
+					title: this.title
+				})
+				.then((res) => {
+					if (res.state == 1) {
+						this.services = res.data;
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: "none",
+						});
+					}
+				});
 		},
-		// computed: {
-		//   filteredServices() {
-		//     return this.services.filter(service => {
-		//       // 根据搜索文本过滤
-		//       if (this.title && !service.title.includes(this.title)) {
-		//         return false
-		//       }
-		//       // 根据当前标签过滤
-		//       switch (this.currentTab) {
-		//         case 0: // 草稿
-		//           return service.state === 2
-		//         case 1: // 审核中
-		//           return service.state === 1
-		//         case 2: // 已上架
-		//           return service.state === 2
-		//         case 3: // 下架
-		//           return service.state === 3
-		//         case 4: // 驳回
-		//           return service.state === 4
-		//         default:
-		//           return true
-		//       }
-		//     })
-		//   }
-		// },
-		onLoad() {
+		switchTab(index, id) {
+			this.currentTab = index;
+			this.state = id;
 			this.getServicesList();
 		},
-		methods: {
-			getServicesList() {
-				let url = "/user/sjserverlist";
-				request
-					.post(url, {
-						state: this.state,
-						title: this.title
-					})
-					.then((res) => {
-						if (res.state == 1) {
-							this.services = res.data;
-						} else {
-							uni.showToast({
-								title: res.msg,
-								icon: "none",
-							});
-						}
-					});
-			},
-			switchTab(index, id) {
-				this.currentTab = index;
-				this.state = id;
-				this.getServicesList();
-			},
-			viewRemove(item) {
-				uni.showModal({
-					title: "提示",
-					content: "确定要下架该服务吗？",
-					success: (res) => {
-						if (res.confirm) {
-							request
-								.post("/user/serveronoff", {
-									id: item.id,
-									state: 3
-								})
-								.then((res) => {
-									if (res.state == 1) {
-										uni.showToast({
-											title: "下架成功",
-											icon: "none",
-										});
-										this.getServicesList(0); // 刷新列表
-									} else {
-										uni.showToast({
-											title: res.msg,
-											icon: "none",
-										});
-									}
-								});
-						}
-					},
-				});
-			},
-			viewList(item) {
-				request
-					.post("/user/serveronoff", {
-						id: item.id,
-						state: 2
-					})
-					.then((res) => {
-						if (res.state == 1) {
-							uni.showToast({
-								title: "上架成功",
-								icon: "none",
-							});
-							this.getServicesList(0); // 刷新列表
-						} else {
-							uni.showToast({
-								title: res.msg,
-								icon: "none",
-							});
-						}
-					});
-			},
-			viewEdit(item) {
-				uni.navigateTo({
-					url: `/pages/shop/add-service?id=${item.id}&state=${item.state}`,
-				});
-
-			},
-			addService() {
-				uni.navigateTo({
-					url: `/pages/shop/add-service`,
-				});
-			},
-			deleteService(item) {
-				uni.showModal({
-					title: "提示",
-					content: "确定要删除该服务吗？",
-					success: (res) => {
-						if (res.confirm) {
-							request.post("/user/serverdel", {
-								id: item.id
-							}).then((res) => {
+		viewRemove(item) {
+			uni.showModal({
+				title: "提示",
+				content: "确定要下架该服务吗？",
+				success: (res) => {
+					if (res.confirm) {
+						request
+							.post("/user/serveronoff", {
+								id: item.id,
+								state: 3
+							})
+							.then((res) => {
 								if (res.state == 1) {
 									uni.showToast({
-										title: "删除成功",
+										title: "下架成功",
 										icon: "none",
 									});
 									this.getServicesList(0); // 刷新列表
@@ -274,81 +264,154 @@
 									});
 								}
 							});
-						}
-					},
+					}
+				},
+			});
+		},
+		viewList(item) {
+			request
+				.post("/user/serveronoff", {
+					id: item.id,
+					state: 2
+				})
+				.then((res) => {
+					if (res.state == 1) {
+						uni.showToast({
+							title: "上架成功",
+							icon: "none",
+						});
+						this.getServicesList(0); // 刷新列表
+					} else {
+						uni.showToast({
+							title: res.msg,
+							icon: "none",
+						});
+					}
 				});
-			},
-			touchStart(e, index) {
-				if (this.currentTab != 3) return;
-				// 阻止默认事件和冒泡
-				e.preventDefault();
-				e.stopPropagation();
+		},
+		viewEdit(item) {
+			uni.navigateTo({
+				url: `/pages/shop/add-service?id=${item.id}&state=${item.state}`,
+			});
 
-				// 获取触摸事件的坐标
-				if (e.touches && e.touches[0]) {
-					this.startX = e.touches[0].clientX;
-					this.currentIndex = index;
-				}
-			},
-			touchMove(e) {
-				if (this.currentTab != 3) return;
-				if (this.currentIndex === -1) return;
-
-				// 阻止默认事件和冒泡
-				e.preventDefault();
-				e.stopPropagation();
-
-				// 获取触摸事件的坐标
-				if (e.touches && e.touches[0]) {
-					this.moveX = e.touches[0].clientX - this.startX;
-
-					// 限制只能向左滑动
-					if (this.moveX > 0) {
-						this.moveX = 0;
-					}
-					// 限制最大滑动距离
-					if (this.moveX < -160) {
-						this.moveX = -160;
-					}
-					// 更新当前项的滑动状态
-					this.$set(this.services[this.currentIndex], "slideX", this.moveX);
-				}
-			},
-			touchEnd(e) {
-				if (this.currentTab != 3) return;
-				if (this.currentIndex === -1) return;
-
-				// 阻止默认事件和冒泡
-				e.preventDefault();
-				e.stopPropagation();
-
-				// 如果滑动距离超过一半，则完全展开
-				if (this.moveX < -80) {
-					this.$set(this.services[this.currentIndex], "slideX", -160);
+		},
+		addService() {
+			// 获取一级分类并显示弹窗
+			request.post("/sj/firstclass", {}).then((res) => {
+				if (res.data && res.data.length > 0) {
+					this.firstClassList = res.data;
+					this.selectedFirstIndex = 0;
+					this.selectedSecondId = null;
+					this.secondClassList = [];
+					this.showCategoryPopup = true;
+					// 自动加载第一个一级分类的二级分类
+					this.loadSecondClass(res.data[0].id);
 				} else {
-					// 否则恢复原位
-					this.$set(this.services[this.currentIndex], "slideX", 0);
+					uni.showToast({
+						title: "暂无分类数据",
+						icon: "none",
+					});
 				}
-				this.currentIndex = -1;
-			},
-			mouseDown(e, index) {
-				if (this.currentTab != 3) return;
-				// 阻止默认事件和冒泡
-				e.preventDefault();
-				e.stopPropagation();
+			});
+		},
+		// 加载二级分类
+		loadSecondClass(firstId) {
+			request.post("/user/secondclass", {
+				id: firstId,
+			}).then((res) => {
+				this.secondClassList = res.data || [];
+			});
+		},
+		// 选择一级分类
+		selectFirstClass(index, item) {
+			if (this.selectedFirstIndex === index) return;
+			this.selectedFirstIndex = index;
+			this.selectedSecondId = null;
+			this.loadSecondClass(item.id);
+		},
+		// 选择二级分类（仅记录选中状态）
+		selectSecondClass(item) {
+			this.selectedSecondId = item.id;
+		},
+		// 确认选择分类
+		confirmCategory() {
+			if (this.selectedFirstIndex < 0) {
+				uni.showToast({
+					title: "请选择服务分类",
+					icon: "none",
+				});
+				return;
+			}
+			// 如果有二级分类但未选择
+			if (this.secondClassList.length > 0 && !this.selectedSecondId) {
+				uni.showToast({
+					title: "请选择服务子类",
+					icon: "none",
+				});
+				return;
+			}
+			const firstItem = this.firstClassList[this.selectedFirstIndex];
+			const url = `/pages/shop/add-service?first_class_id=${firstItem.id}`;
+			uni.navigateTo({ url });
+			this.closeCategoryPopup();
+		},
+		// 关闭分类弹窗
+		closeCategoryPopup() {
+			this.showCategoryPopup = false;
+			this.firstClassList = [];
+			this.secondClassList = [];
+			this.selectedFirstIndex = -1;
+			this.selectedSecondId = null;
+		},
+		deleteService(item) {
+			uni.showModal({
+				title: "提示",
+				content: "确定要删除该服务吗？",
+				success: (res) => {
+					if (res.confirm) {
+						request.post("/user/serverdel", {
+							id: item.id
+						}).then((res) => {
+							if (res.state == 1) {
+								uni.showToast({
+									title: "删除成功",
+									icon: "none",
+								});
+								this.getServicesList(0); // 刷新列表
+							} else {
+								uni.showToast({
+									title: res.msg,
+									icon: "none",
+								});
+							}
+						});
+					}
+				},
+			});
+		},
+		touchStart(e, index) {
+			if (this.currentTab != 3) return;
+			// 阻止默认事件和冒泡
+			e.preventDefault();
+			e.stopPropagation();
 
-				this.startX = e.clientX;
+			// 获取触摸事件的坐标
+			if (e.touches && e.touches[0]) {
+				this.startX = e.touches[0].clientX;
 				this.currentIndex = index;
-			},
-			mouseMove(e) {
-				if (this.currentTab != 3) return;
-				if (this.currentIndex === -1) return;
+			}
+		},
+		touchMove(e) {
+			if (this.currentTab != 3) return;
+			if (this.currentIndex === -1) return;
 
-				// 阻止默认事件和冒泡
-				e.preventDefault();
-				e.stopPropagation();
+			// 阻止默认事件和冒泡
+			e.preventDefault();
+			e.stopPropagation();
 
-				this.moveX = e.clientX - this.startX;
+			// 获取触摸事件的坐标
+			if (e.touches && e.touches[0]) {
+				this.moveX = e.touches[0].clientX - this.startX;
 
 				// 限制只能向左滑动
 				if (this.moveX > 0) {
@@ -360,391 +423,633 @@
 				}
 				// 更新当前项的滑动状态
 				this.$set(this.services[this.currentIndex], "slideX", this.moveX);
-			},
-			mouseUp(e) {
-				if (this.currentTab != 3) return;
-				if (this.currentIndex === -1) return;
-
-				// 阻止默认事件和冒泡
-				e.preventDefault();
-				e.stopPropagation();
-
-				// 如果滑动距离超过一半，则完全展开
-				if (this.moveX < -80) {
-					this.$set(this.services[this.currentIndex], "slideX", -160);
-				} else {
-					// 否则恢复原位
-					this.$set(this.services[this.currentIndex], "slideX", 0);
-				}
-				this.currentIndex = -1;
-			},
-			resetSlide() {
-				this.services.forEach((item, index) => {
-					if (index !== this.currentIndex) {
-						this.$set(item, "slideX", 0);
-					}
-				});
-			},
+			}
 		},
-	};
+		touchEnd(e) {
+			if (this.currentTab != 3) return;
+			if (this.currentIndex === -1) return;
+
+			// 阻止默认事件和冒泡
+			e.preventDefault();
+			e.stopPropagation();
+
+			// 如果滑动距离超过一半，则完全展开
+			if (this.moveX < -80) {
+				this.$set(this.services[this.currentIndex], "slideX", -160);
+			} else {
+				// 否则恢复原位
+				this.$set(this.services[this.currentIndex], "slideX", 0);
+			}
+			this.currentIndex = -1;
+		},
+		mouseDown(e, index) {
+			if (this.currentTab != 3) return;
+			// 阻止默认事件和冒泡
+			e.preventDefault();
+			e.stopPropagation();
+
+			this.startX = e.clientX;
+			this.currentIndex = index;
+		},
+		mouseMove(e) {
+			if (this.currentTab != 3) return;
+			if (this.currentIndex === -1) return;
+
+			// 阻止默认事件和冒泡
+			e.preventDefault();
+			e.stopPropagation();
+
+			this.moveX = e.clientX - this.startX;
+
+			// 限制只能向左滑动
+			if (this.moveX > 0) {
+				this.moveX = 0;
+			}
+			// 限制最大滑动距离
+			if (this.moveX < -160) {
+				this.moveX = -160;
+			}
+			// 更新当前项的滑动状态
+			this.$set(this.services[this.currentIndex], "slideX", this.moveX);
+		},
+		mouseUp(e) {
+			if (this.currentTab != 3) return;
+			if (this.currentIndex === -1) return;
+
+			// 阻止默认事件和冒泡
+			e.preventDefault();
+			e.stopPropagation();
+
+			// 如果滑动距离超过一半，则完全展开
+			if (this.moveX < -80) {
+				this.$set(this.services[this.currentIndex], "slideX", -160);
+			} else {
+				// 否则恢复原位
+				this.$set(this.services[this.currentIndex], "slideX", 0);
+			}
+			this.currentIndex = -1;
+		},
+		resetSlide() {
+			this.services.forEach((item, index) => {
+				if (index !== this.currentIndex) {
+					this.$set(item, "slideX", 0);
+				}
+			});
+		},
+	},
+};
 </script>
 
 <style scoped lang="less">
-	.service-page {
-		padding-bottom: 120rpx;
-	}
+.service-page {
+	padding-bottom: 120rpx;
+}
 
-	/* 搜索框样式 */
-	.search-box {
-		width: 750rpx;
-		background-color: #ffffff;
-		border-radius: 8rpx;
-		padding: 24rpx;
-		box-sizing: border-box;
-		position: relative;
-	}
+/* 搜索框样式 */
+.search-box {
+	width: 750rpx;
+	background-color: #ffffff;
+	border-radius: 8rpx;
+	padding: 24rpx;
+	box-sizing: border-box;
+	position: relative;
+}
 
-	.flexed {
-		position: sticky;
-		top: 88rpx;
-		left: 0;
-		z-index: 999;
-	}
+.flexed {
+	position: sticky;
+	top: 88rpx;
+	left: 0;
+	z-index: 999;
+}
 
-	.search-inp {
-		width: 700rpx;
-		height: 68rpx;
-		background-color: #eef4fa;
-		border-radius: 34rpx;
-		padding: 0 70rpx 0 48rpx;
-		font-size: 28rpx;
-		box-sizing: border-box;
-	}
+.search-inp {
+	width: 700rpx;
+	height: 68rpx;
+	background-color: #eef4fa;
+	border-radius: 34rpx;
+	padding: 0 70rpx 0 48rpx;
+	font-size: 28rpx;
+	box-sizing: border-box;
+}
 
-	.placeholder {
-		color: #999999;
-	}
+.placeholder {
+	color: #999999;
+}
 
-	.search-icon {
-		width: 32rpx;
-		height: 32rpx;
-		position: absolute;
-		right: 56rpx;
-		top: 50%;
-		transform: translateY(-50%);
-	}
+.search-icon {
+	width: 32rpx;
+	height: 32rpx;
+	position: absolute;
+	right: 56rpx;
+	top: 50%;
+	transform: translateY(-50%);
+}
 
-	/* 标签栏样式 */
-	.tab-container {
-		display: flex;
-		flex-flow: row nowrap;
-		justify-content: space-between;
-		align-items: center;
-		background-color: #ffffff;
-		padding: 24rpx 24rpx 30rpx;
-		box-sizing: border-box;
-	}
+/* 标签栏样式 */
+.tab-container {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+	align-items: center;
+	background-color: #ffffff;
+	padding: 24rpx 24rpx 30rpx;
+	box-sizing: border-box;
+}
 
-	.tab-item {
-		flex: 1;
-		text-align: center;
-		font-size: 30rpx;
-		color: #666666;
-		padding: 16rpx 0;
-		position: relative;
-	}
+.tab-item {
+	flex: 1;
+	text-align: center;
+	font-size: 30rpx;
+	color: #666666;
+	padding: 16rpx 0;
+	position: relative;
+}
 
-	.tab-item.active {
-		color: #000000;
-		font-weight: 500;
-	}
+.tab-item.active {
+	color: #000000;
+	font-weight: 500;
+}
 
-	.tab-item.active::after {
-		content: "";
-		position: absolute;
-		bottom: 0;
-		left: 50%;
-		transform: translateX(-50%);
-		width: 32rpx;
-		height: 6rpx;
-		background-color: #E8101E;
-		border-radius: 3rpx;
-	}
+.tab-item.active::after {
+	content: "";
+	position: absolute;
+	bottom: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 32rpx;
+	height: 6rpx;
+	background-color: #E8101E;
+	border-radius: 3rpx;
+}
 
-	/* 服务列表样式 */
-	.service-list {
-		margin: 24rpx 24rpx 0;
-	}
+/* 服务列表样式 */
+.service-list {
+	margin: 24rpx 24rpx 0;
+}
 
-	.service-item {
-		height: 248rpx;
-		position: relative;
-		background-color: #ffffff;
-		border-radius: 20rpx;
-		margin-bottom: 32rpx;
-		box-sizing: border-box;
-		overflow: hidden;
-		touch-action: pan-y pinch-zoom;
-	}
+.service-item {
+	height: 248rpx;
+	position: relative;
+	background-color: #ffffff;
+	border-radius: 20rpx;
+	margin-bottom: 32rpx;
+	box-sizing: border-box;
+	overflow: hidden;
+	touch-action: pan-y pinch-zoom;
+}
 
-	.service-item:last-child {
-		margin-bottom: 0;
-	}
+.service-item:last-child {
+	margin-bottom: 0;
+}
 
-	.service-content {
+.service-content {
+	width: 100%;
+	height: 100%;
+	padding: 24rpx;
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: flex-start;
+	align-items: center;
+	box-sizing: border-box;
+	background-color: #ffffff;
+	transition: transform 0.3s ease;
+	position: relative;
+	z-index: 1;
+}
+
+.delete-btn {
+	position: absolute;
+	right: -160rpx;
+	top: 0;
+	width: 160rpx;
+	height: 100%;
+	background-color: #E8101E;
+	color: #ffffff;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 28rpx;
+	transition: transform 0.3s ease;
+	z-index: 2;
+}
+
+.service-item:active .service-content,
+.service-item:active .delete-btn {
+	transform: none;
+}
+
+.service-image {
+	width: 200rpx;
+	height: 200rpx;
+	border-radius: 24rpx;
+	margin-right: 16rpx;
+	background-color: rgba(0, 0, 0, 0.05);
+}
+
+.service-info {
+	height: 200rpx;
+	width: 350rpx;
+	display: flex;
+	flex-flow: column nowrap;
+	justify-content: flex-start;
+	align-items: flex-start;
+}
+
+.service-title {
+	font-size: 28rpx;
+	color: #000000;
+	margin-bottom: 24rpx;
+	font-weight: 500;
+}
+
+.service-price {
+	display: flex;
+	align-items: baseline;
+}
+
+.price-symbol {
+	font-size: 24rpx;
+	color: #E8101E;
+	font-weight: 500;
+}
+
+.price-value {
+	font-size: 28rpx;
+	color: #E8101E;
+	font-weight: 500;
+	margin: 0 4rpx;
+}
+
+.price-unit {
+	font-size: 24rpx;
+	color: #E8101E;
+}
+
+.status-tag {
+	position: absolute;
+	top: 0rpx;
+	right: 0rpx;
+	border-radius: 0 0 0 20rpx;
+	width: 90rpx;
+	height: 38rpx;
+	line-height: 38rpx;
+	text-align: center;
+	box-sizing: border-box;
+	font-size: 24rpx;
+}
+
+/* 已上架 */
+.status-tag.state2 {
+	background-color: rgba(232, 16, 30, 0.2);
+}
+
+.status-tag.state2 .status-text {
+	color: #E8101E;
+}
+
+/* 审核中 */
+.status-tag.state1 {
+	background-color: rgba(40, 209, 137, 0.2);
+}
+
+.status-tag.state1 .status-text {
+	color: #28d189;
+}
+
+/* 草稿/撤回 */
+.status-tag.state0,
+.status-tag.state3,
+.status-tag.state4 {
+	background-color: rgba(209, 15, 19, 0.2);
+}
+
+.status-tag.state0 .status-text,
+.status-tag.state3 .status-text,
+.status-tag.state4 .status-text {
+	color: #d10f13;
+}
+
+.btns {
+	position: absolute;
+	bottom: 26rpx;
+	right: 24rpx;
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: flex-end;
+	align-items: center;
+}
+
+.view-btn {
+	display: flex;
+	align-items: center;
+	margin-left: 24rpx;
+}
+
+.view-icon {
+	width: 32rpx;
+	height: 32rpx;
+	margin-right: 8rpx;
+}
+
+.view-text {
+	font-size: 20rpx;
+	color: #666666;
+}
+
+.load-more {
+	text-align: center;
+	padding: 20rpx 0;
+	color: #999999;
+	font-size: 24rpx;
+}
+
+.service-item {
+	cursor: pointer;
+	user-select: none;
+	-webkit-user-select: none;
+}
+
+.service-content,
+.delete-btn {
+	will-change: transform;
+}
+
+.service-nothings {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: center;
+	align-items: center;
+	padding: 280rpx 0 0;
+}
+
+.nothings-text {
+	font-size: 32rpx;
+	font-weight: 500;
+	color: #999999;
+	text-align: center;
+	font-style: italic;
+}
+
+.add-btn {
+	height: 140rpx;
+}
+
+/* 平台特定样式 */
+/* #ifdef H5 */
+.service-container {
+	padding-bottom: constant(safe-area-inset-bottom);
+	padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* #endif */
+
+/* #ifdef APP-PLUS */
+.service-image {
+	border: 1rpx solid #eeeeee;
+}
+
+.flexed {
+	top: calc(var(--status-bar-height) + 88rpx);
+}
+
+/* #endif */
+
+/* #ifdef MP-WEIXIN */
+.search-box input {
+	/* 小程序搜索框样式调整 */
+	box-sizing: border-box;
+}
+
+.flexed {
+	top: calc(var(--status-bar-height) + 88rpx);
+}
+
+.service-item {
+	/* 小程序阴影效果 */
+	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+}
+
+/* #endif */
+
+
+.serviceBtn-box {
+	position: fixed;
+	left: 0px;
+	bottom: 0px;
+	right: 0px;
+	padding: 20rpx 12rpx 34rpx 12rpx;
+	z-index: 999;
+	background-color: #fff;
+
+	.serviceBtn-card {
 		width: 100%;
-		height: 100%;
-		padding: 24rpx;
-		display: flex;
-		flex-flow: row nowrap;
-		justify-content: flex-start;
-		align-items: center;
-		box-sizing: border-box;
-		background-color: #ffffff;
-		transition: transform 0.3s ease;
-		position: relative;
-		z-index: 1;
-	}
-
-	.delete-btn {
-		position: absolute;
-		right: -160rpx;
-		top: 0;
-		width: 160rpx;
-		height: 100%;
+		height: 88rpx;
+		text-align: center;
+		line-height: 88rpx;
 		background-color: #E8101E;
-		color: #ffffff;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		font-size: 28rpx;
-		transition: transform 0.3s ease;
-		z-index: 2;
-	}
+		border-radius: 16px;
 
-	.service-item:active .service-content,
-	.service-item:active .delete-btn {
-		transform: none;
-	}
+		.serviceBtn-text {
 
-	.service-image {
-		width: 200rpx;
-		height: 200rpx;
-		border-radius: 24rpx;
-		margin-right: 16rpx;
-		background-color: rgba(0, 0, 0, 0.05);
-	}
-
-	.service-info {
-		height: 200rpx;
-		width: 350rpx;
-		display: flex;
-		flex-flow: column nowrap;
-		justify-content: flex-start;
-		align-items: flex-start;
-	}
-
-	.service-title {
-		font-size: 28rpx;
-		color: #000000;
-		margin-bottom: 24rpx;
-		font-weight: 500;
-	}
-
-	.service-price {
-		display: flex;
-		align-items: baseline;
-	}
-
-	.price-symbol {
-		font-size: 24rpx;
-		color: #E8101E;
-		font-weight: 500;
-	}
-
-	.price-value {
-		font-size: 28rpx;
-		color: #E8101E;
-		font-weight: 500;
-		margin: 0 4rpx;
-	}
-
-	.price-unit {
-		font-size: 24rpx;
-		color: #E8101E;
-	}
-
-	.status-tag {
-		position: absolute;
-		top: 0rpx;
-		right: 0rpx;
-		border-radius: 0 0 0 20rpx;
-		width: 90rpx;
-		height: 38rpx;
-		line-height: 38rpx;
-		text-align: center;
-		box-sizing: border-box;
-		font-size: 24rpx;
-	}
-
-	/* 已上架 */
-	.status-tag.state2 {
-		background-color: rgba(232, 16, 30, 0.2);
-	}
-
-	.status-tag.state2 .status-text {
-		color: #E8101E;
-	}
-
-	/* 审核中 */
-	.status-tag.state1 {
-		background-color: rgba(40, 209, 137, 0.2);
-	}
-
-	.status-tag.state1 .status-text {
-		color: #28d189;
-	}
-
-	/* 草稿/撤回 */
-	.status-tag.state0,
-	.status-tag.state3,
-	.status-tag.state4 {
-		background-color: rgba(209, 15, 19, 0.2);
-	}
-
-	.status-tag.state0 .status-text,
-	.status-tag.state3 .status-text,
-	.status-tag.state4 .status-text {
-		color: #d10f13;
-	}
-
-	.btns {
-		position: absolute;
-		bottom: 26rpx;
-		right: 24rpx;
-		display: flex;
-		flex-flow: row nowrap;
-		justify-content: flex-end;
-		align-items: center;
-	}
-
-	.view-btn {
-		display: flex;
-		align-items: center;
-		margin-left: 24rpx;
-	}
-
-	.view-icon {
-		width: 32rpx;
-		height: 32rpx;
-		margin-right: 8rpx;
-	}
-
-	.view-text {
-		font-size: 20rpx;
-		color: #666666;
-	}
-
-	.load-more {
-		text-align: center;
-		padding: 20rpx 0;
-		color: #999999;
-		font-size: 24rpx;
-	}
-
-	.service-item {
-		cursor: pointer;
-		user-select: none;
-		-webkit-user-select: none;
-	}
-
-	.service-content,
-	.delete-btn {
-		will-change: transform;
-	}
-
-	.service-nothings {
-		display: flex;
-		flex-flow: row nowrap;
-		justify-content: center;
-		align-items: center;
-		padding: 280rpx 0 0;
-	}
-
-	.nothings-text {
-		font-size: 32rpx;
-		font-weight: 500;
-		color: #999999;
-		text-align: center;
-		font-style: italic;
-	}
-
-	.add-btn {
-		height: 140rpx;
-	}
-
-	/* 平台特定样式 */
-	/* #ifdef H5 */
-	.service-container {
-		padding-bottom: constant(safe-area-inset-bottom);
-		padding-bottom: env(safe-area-inset-bottom);
-	}
-
-	/* #endif */
-
-	/* #ifdef APP-PLUS */
-	.service-image {
-		border: 1rpx solid #eeeeee;
-	}
-
-	.flexed {
-		top: calc(var(--status-bar-height) + 88rpx);
-	}
-
-	/* #endif */
-
-	/* #ifdef MP-WEIXIN */
-	.search-box input {
-		/* 小程序搜索框样式调整 */
-		box-sizing: border-box;
-	}
-
-	.flexed {
-		top: calc(var(--status-bar-height) + 88rpx);
-	}
-
-	.service-item {
-		/* 小程序阴影效果 */
-		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
-	}
-
-	/* #endif */
-
-
-	.serviceBtn-box {
-		position: fixed;
-		left: 0px;
-		bottom: 0px;
-		right: 0px;
-		padding: 20rpx 12rpx 34rpx 12rpx;
-		z-index: 999;
-		background-color: #fff;
-
-		.serviceBtn-card {
-			width: 100%;
-			height: 88rpx;
-			text-align: center;
-			line-height: 88rpx;
-			background-color: #E8101E;
-			border-radius: 16px;
-
-			.serviceBtn-text {
-
-				font-size: 14px;
-				font-weight: 500;
-				color: #ffffff;
-			}
+			font-size: 14px;
+			font-weight: 500;
+			color: #ffffff;
 		}
-
 	}
+
+}
+
+/* 分类选择弹窗样式 */
+.category-popup-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+	z-index: 2000;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+}
+
+.category-popup {
+	width: 100%;
+	height: 70vh;
+	background-color: #ffffff;
+	border-radius: 32rpx 32rpx 0 0;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.category-popup-header {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 32rpx;
+	position: relative;
+	border-bottom: 1rpx solid #f0f0f0;
+}
+
+.category-popup-title {
+	font-size: 34rpx;
+	font-weight: 600;
+	color: #333333;
+}
+
+.category-popup-close {
+	position: absolute;
+	right: 32rpx;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 48rpx;
+	height: 48rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.category-popup-close-icon {
+	font-size: 48rpx;
+	color: #999999;
+	line-height: 1;
+}
+
+.category-popup-body {
+	flex: 1;
+	display: flex;
+	overflow: hidden;
+}
+
+.category-left {
+	width: 220rpx;
+	background-color: #f5f5f5;
+	height: 100%;
+}
+
+.category-left-item {
+	padding: 30rpx 24rpx;
+	text-align: center;
+	position: relative;
+}
+
+.category-left-item.active {
+	background-color: #ffffff;
+}
+
+.category-left-item.active::before {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 50%;
+	transform: translateY(-50%);
+	width: 6rpx;
+	height: 40rpx;
+	background-color: #E8101E;
+	border-radius: 0 3rpx 3rpx 0;
+}
+
+.category-left-text {
+	font-size: 28rpx;
+	color: #333333;
+}
+
+.category-left-item.active .category-left-text {
+	color: #E8101E;
+	font-weight: 500;
+}
+
+.category-right {
+	flex: 1;
+	background-color: #ffffff;
+	height: 100%;
+}
+
+.category-right-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 30rpx 32rpx;
+	border-bottom: 1rpx solid #f5f5f5;
+}
+
+.category-right-text {
+	font-size: 28rpx;
+	color: #333333;
+	flex: 1;
+}
+
+.category-dot {
+	width: 36rpx;
+	height: 36rpx;
+	border-radius: 50%;
+	border: 2rpx solid #dddddd;
+	margin-left: 16rpx;
+	position: relative;
+}
+
+.category-dot.selected {
+	border-color: #E8101E;
+	background-color: #E8101E;
+}
+
+.category-dot.selected::after {
+	content: "";
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 16rpx;
+	height: 16rpx;
+	border-radius: 50%;
+	background-color: #ffffff;
+}
+
+.category-empty {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 100rpx 0;
+}
+
+.category-empty-text {
+	font-size: 28rpx;
+	color: #999999;
+}
+
+.category-popup-footer {
+	display: flex;
+	padding: 24rpx 32rpx;
+	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+	border-top: 1rpx solid #f0f0f0;
+	background-color: #ffffff;
+}
+
+.category-popup-btn {
+	flex: 1;
+	height: 88rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 44rpx;
+	font-size: 30rpx;
+}
+
+.category-popup-btn-cancel {
+	background-color: #f5f5f5;
+	margin-right: 24rpx;
+}
+
+.category-popup-btn-cancel text {
+	color: #666666;
+}
+
+.category-popup-btn-confirm {
+	background-color: #E8101E;
+}
+
+.category-popup-btn-confirm text {
+	color: #ffffff;
+}
 </style>
\ No newline at end of file
diff --git a/pages/shop/add-service.vue b/pages/shop/add-service.vue
index 74b3a03..58feffd 100644
--- a/pages/shop/add-service.vue
+++ b/pages/shop/add-service.vue
@@ -11,241 +11,8 @@
 
 		<!-- 表单区域 -->
 		<view class="form-container">
-			<!-- 服务名称 -->
-			<view class="form-item">
-				<text class="form-label required">服务名称</text>
-				<input type="text" v-model="formData.title" placeholder="请输入服务名称" placeholder-class="placeholder"
-					class="form-input" />
-			</view>
-
-			<!-- 服务价格 -->
-			<view class="form-item" style="flex-wrap: wrap;">
-				<text class="form-label required">服务定价</text>
-				<input type="digit" v-model.number="formData.line_price" placeholder="请输入定价，最多两位小数"
-					placeholder-class="placeholder" class="form-input" @input="inpPrice2" @blur="inpPrice2"
-					@confirm="inpPrice2" step="0.01" />
-				<view class="price-tip">
-					<text class="price-tip-card">服务的基础定价，未参与任何优惠的价格</text>
-				</view>
-			</view>
-
-			<!-- 服务价格 -->
-			<view class="form-item" style="flex-wrap: wrap;">
-				<text class="form-label required">服务售价</text>
-				<input type="digit" v-model.number="formData.server_price" placeholder="请输入售价，最多两位小数"
-					placeholder-class="placeholder" class="form-input" @input="inpPrice" @blur="inpPrice"
-					@confirm="inpPrice" step="0.01" />
-				<view class="price-tip">
-					<text class="price-tip-card">服务参与单品优惠后的价格</text>
-				</view>
-			</view>
-
-			<!-- 服务分类 -->
-			<view class="form-item">
-				<text class="form-label required">服务分类</text>
-				<view class="form-right" @click="openServiceTypePicker">
-					<text :class="[
-              'form-value',
-              formData.first_class_id ? '' : 'placeholder',
-            ]">
-						{{ serviceType || "选择分类" }}
-					</text>
-					<image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/wxstaic/images/arrow_right.png"
-						class="arrow-right" mode="aspectFit"></image>
-				</view>
-			</view>
-
-			<!-- 服务子类 -->
-			<view class="form-item" v-if="showCategory">
-				<text class="form-label required">服务子类</text>
-				<view class="form-right" @click="openCategoryPicker">
-					<text :class="[
-              'form-value',
-              formData.second_class_id ? '' : 'placeholder',
-            ]">
-						{{ category || "选择子类" }}
-					</text>
-					<image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/wxstaic/images/arrow_right.png"
-						class="arrow-right" mode="aspectFit"></image>
-				</view>
-			</view>
-
-			<!-- 是否允许该服务在门店售卖 -->
-			<view class="form-item shopsale-box" v-if="artisanType == 1">
-				<view class="form-label required">
-					是否允许该服务在门店端售卖，以供门店下单购买。
-					{{
-            showShopPrice
-              ? "门店下单购买后，您需到上门至门店进行服务，门店端展示价格为"
-              : ""
-          }}
-					<text style="color: #e8101e" v-if="showShopPrice">{{
-            shopPrice
-          }}</text>
-					{{ showShopPrice ? "元。" : "" }}
-				</view>
-				<view class="shopsale-change">
-					<view class="shopsale-option" @click="changeSale(2)">
-						<agree-radio :isAgree="formData.sj_see == 2"></agree-radio>
-						<text class="option-text">允许</text>
-					</view>
-					<view class="shopsale-option" @click="changeSale(1)">
-						<agree-radio :isAgree="formData.sj_see == 1"></agree-radio>
-						<text class="option-text">不允许</text>
-					</view>
-				</view>
-			</view>
-
-			<!-- 服务时间 -->
-			<view class="form-item">
-				<text class="form-label required">服务时长</text>
-				<input type="number" v-model="formData.server_time" placeholder="请输入服务时间"
-					placeholder-class="placeholder" class="form-input" />
-				<text class="pr-240">分钟</text>
-			</view>
-
-			<!-- 服务简介 -->
-			<!-- <view class="form-item textarea-item">
-        <text class="form-label">服务简介</text>
-        <textarea 
-          v-model="formData.detail"
-          placeholder="详细描述商品的购买详情、使用情况及出售原因能够更快的出售商品哦~"
-          placeholder-class="placeholder"
-          class="form-textarea"
-		  maxlength="-1"
-        />
-      </view> -->
-
-			<view class="form-step">
-				<view class="form-item">
-					<text class="form-label">图文详情</text>
-					<view class="form-detail">
-						<text @click="goImgAndText">{{
-              formData.graphic_details ? "已设置" : "去设置"
-            }}</text>
-					</view>
-				</view>
-			</view>
-
-			<!-- 服务简介 -->
-			<view class="detail-card">
-				<view class="detail-title">
-					<text class="form-label">服务简介</text>
-				</view>
-
-				<view class="detail-row">
-					<text class="form-label required">服务功效</text>
-					<view class="detail-textarea-wrap">
-						<textarea class="detail-textarea" v-model="detailForm.effect" placeholder="请输入服务功效"
-							placeholder-class="placeholder" maxlength="200"></textarea>
-						<text class="detail-count">{{(detailForm.effect || '').length}}/200</text>
-					</view>
-				</view>
-
-				<view class="detail-row">
-					<text class="form-label required">适用人群</text>
-					<view class="detail-textarea-wrap">
-						<textarea class="detail-textarea" v-model="detailForm.crowd"
-							placeholder="请输入不适用人群，例如：未成年人/孕妇不适用" placeholder-class="placeholder"
-							maxlength="200"></textarea>
-						<text class="detail-count">{{(detailForm.crowd || '').length}}/200</text>
-					</view>
-				</view>
-
-				<view class="detail-row">
-					<text class="form-label">产品清单</text>
-					<view class="detail-textarea-wrap">
-						<textarea class="detail-textarea" v-model="detailForm.product" placeholder="请输入产品清单"
-							placeholder-class="placeholder" maxlength="200"></textarea>
-						<text class="detail-count">{{(detailForm.product || '').length}}/200</text>
-					</view>
-				</view>
-
-				<view class="detail-row">
-					<text class="form-label">适用范围</text>
-					<view class="detail-textarea-wrap">
-						<textarea class="detail-textarea" v-model="detailForm.scope" placeholder="请输入使用时间/适用人数"
-							placeholder-class="placeholder" maxlength="200"></textarea>
-						<text class="detail-count">{{(detailForm.scope || '').length}}/200</text>
-					</view>
-				</view>
-
-				<view class="detail-row">
-					<text class="form-label">温馨提示</text>
-					<view class="detail-textarea-wrap">
-						<textarea class="detail-textarea" v-model="detailForm.tips" placeholder="请输入其他注意事项"
-							placeholder-class="placeholder" maxlength="200"></textarea>
-						<text class="detail-count">{{(detailForm.tips || '').length}}/200</text>
-					</view>
-				</view>
-			</view>
-			<view class="form-step">
-				<view class="form-item">
-					<text class="form-label required">服务流程</text>
-					<text @click="addStep">添加</text>
-				</view>
-				<view class="step" v-for="(item, i) in formData.process">
-					<text class="form-label">第{{ i + 1 }}步</text>
-					<input type="text" class="step-inp" v-model="formData.process[i].text" />
-					<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="form-item textarea-item">
-        <text class="form-label">购买须知</text>
-        <textarea 
-          v-model="formData.purchase_notes"
-          placeholder="详细描述商品的购买详情、使用情况及出售原因能够更快的出售商品哦~"
-          placeholder-class="placeholder"
-          class="form-textarea"
-		  maxlength="-1"
-        />
-      </view> -->
-			<!-- <circle-progress 
-	       :progress="progress"
-	       :size="300"
-	       :strokeWidth="15"
-	       color="rgba(252, 67, 124, 1)"
-	       backgroundColor="rgba(245, 245, 245, 1)"
-	     /> -->
-
-			<!-- 上传短视频 -->
-			<view class="form-item-up upload-item">
-				<view>
-					<text class="form-label">上传短视频</text>
-					<text class="upload-tip">(仅可上传1个视频)</text>
-				</view>
-				<!-- <upload-video
-			@addVideo="addVideo"
-			@deleteVideo="deleteVideo"
-			:video="formData.video"></upload-video> -->
-				<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="上传视频" @success="uploadVideoSuc" @error="uploadVideoErr"
-					@delete="uploadVideoDel" @ckeckisShowPer="ckeckisShowPer" @ckecknowQer="ckecknowQer">
-				</ali-oss-uploader>
-			</view>
-
-			<!-- 服务图片 -->
-			<view class="form-item-up upload-item">
-				<view>
-					<text class="form-label required">服务图片</text>
-					<text class="upload-tip">(仅可上传9个图片)</text>
-				</view>
-				<!-- <upload-img
-        	:photo="formData.photo"
-        	:maxNum="9"
-			:width="'654rpx'"
-        	@addImg="addImg"
-        	@deleteImage="deleteImage"></upload-img> -->
-				<ali-oss-uploader v-model="formData.photo" :max-count="9" :max-size="5" :width="'654rpx'"
-					:type="artisanType + 1" :user-id="formData.publish_user_id" button-text="上传图片"
-					tips="最多上传3张图片，每张不超过5MB" @success="onUploadSuccess" @error="onUploadError" @delete="onFileDelete"
-					@ckeckisShowPer="ckeckisShowPer" @ckecknowQer="ckecknowQer">
-				</ali-oss-uploader>
-			</view>
+			<!-- 动态表单区域 -->
+			<dynamic-form :fields="formFields" v-model="formData" ref="dynamicForm" />
 		</view>
 
 		<!-- 底部按钮 -->
@@ -256,16 +23,6 @@
 			<button class="btn-submit" @click="submitForm">提交</button>
 		</view>
 
-		<!-- 服务类型选择器 -->
-		<popup-picker :show="showServiceTypePicker" title="选择服务类型" :columns="[serviceTypes]"
-			:value="[selectedServiceTypeIndex]" @close="showServiceTypePicker = false"
-			@confirm="handleServiceTypeConfirm" />
-
-		<!-- 服务分类选择器 -->
-		<PopupPickerMy :show="showCategoryPicker" title="选择服务分类" :columns="[categoryAll]" :value="selectedCategoryIndex"
-			@close="showCategoryPicker = false" @confirm="handleCategoryConfirm" />
-		<view class="mask" v-if="isShow" @click="isShow = false"></view>
-
 		<!-- 获取权限提示匡内容 -->
 		<view class="permission" :class="{ transform: isShowPer && nowQer === 'xc' }">
 			<view class="per-tit">美融融plus 对储存空间/照片权限申请说明</view>
@@ -275,1230 +32,1158 @@
 			<view class="per-tit">美融融plus 对相机拍摄权限申请说明</view>
 			<view class="per-cont">便于您使用该功能上传您的照片/图片/视频以及用于更换头像、发布商品等场景中所需内容。</view>
 		</view>
-
-		<!-- 新增上门提醒弹窗-->
-		<transition name="fade">
-			<view class="popup-mask2" v-if="showReminderPopup" @click="closeReminderPopup(false)">
-				<view class="popup-content2" @click.stop>
-					<view class="popup-title">提示</view>
-					<view class="popup-message">此服务是需要上门服务的哦～</view>
-					<view class="popup-buttons">
-						<view class="popup-btn popup-btn-notshow" @click="closeReminderPopup(true)">不再提示</view>
-						<view class="popup-btn popup-btn-know" @click="closeReminderPopup(false)">我已知晓</view>
-					</view>
-				</view>
-			</view>
-		</transition>
-
 	</view>
 </template>
 
 <script>
-	import request from "../../utils/request";
-	import PopupPicker from "@/components/popup-picker/popup-picker.vue";
-	import PopupPickerMy from "@/components/popup-picker/PopupPickerMy.vue";
-	import CircleProgress from "@/components/circle-progress/circle-progress.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";
+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: {
-			PopupPicker,
-			CircleProgress,
-			AliOssUploader,
-			PopupPickerMy,
-		},
-		data() {
-			return {
-				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: [],
-
-				serviceTypes: [], // 服务分类
-				categoryAll: [],
-				showServiceTypePicker: false,
-				showCategoryPicker: false,
-				selectedServiceTypeIndex: 0,
-				selectedCategoryIndex: [0],
-				serviceType: "",
-				category: "",
-				imagesList: [], // 临时图片地址
-				addDetailList: [],
-				showCategory: false,
-				showProgress: false,
+export default {
+	components: {
+		CircleProgress,
+		AliOssUploader,
+		DynamicForm,
+	},
+	data() {
+		return {
+			formFields: [], // 动态表单字段配置
+			showReminderPopup: false,
+			artisanType: getApp().globalData.artisanType,
+			nowQer: "xc",
+			progress: 0,
+			isShow: false,
+			state: null,
+			isShowPer: false,
+			formData: {
 				publish_user_id: null,
-				isAdd: false,
-				isDraft: false,
-			};
+				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,
+		};
+	},
+	onShow() {
+		uni.$on("updateGraphicDetails", (data) => {
+			this.$set(this.formData, "graphic_details", JSON.stringify(data));
+			// 这里可以添加其他处理逻辑
+		});
+	},
+	onLoad(options) {
+		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;
+		}
+		if (options.id) {
+			this.formData.id = options.id;
+			this.getInit();
+		}
+		// 获取模板
+		this.getTemplate();
+		// 判断是否显示上门提醒弹窗
+		const notShow = uni.getStorageSync('addServiceReminderNotShow');
+		this.getUserInfo();
+	},
+	computed: {
+		showShopPrice() {
+			return (
+				this.artisanType == 1 &&
+				this.formData.sj_see == 2 &&
+				this.formData.server_price &&
+				this.formData.first_class_id
+			);
 		},
-		onShow() {
-			uni.$on("updateGraphicDetails", (data) => {
-				this.$set(this.formData, "graphic_details", JSON.stringify(data));
-				// 这里可以添加其他处理逻辑
+		shopPrice() {
+			return _public.roundUpToTwoDecimals(
+				this.formData.server_price,
+				this.ratio
+			);
+		},
+	},
+	methods: {
+		// 获取服务模板
+		async getTemplate() {
+			// 模拟数据
+			const mockFields = [
+				{ key: 'title', type: 'text', label: '服务名称', is_required: 1, placeholder: '请输入服务名称' },
+				{ key: 'service_price', type: 'number', label: '服务定价', is_required: 1, placeholder: '请输入定价，最多两位小数', tips: '(元)' },
+				{ key: 'sale_price', type: 'number', label: '服务售价', is_required: 1, placeholder: '请输入售价，最多两位小数', tips: '(元)' },
+				{ key: 'service_time', type: 'number', label: '服务时长', is_required: 1, placeholder: '请输入服务时间', tips: '(分钟)' },
+				{ key: 'effect', type: 'textarea', label: '服务功效', is_required: 1, placeholder: '请输入服务功效' },
+				{ key: 'crowd', type: 'textarea', label: '适用人群', is_required: 1, placeholder: '请输入不适用人群，例如：未成年人/孕妇不适用' },
+				{ key: 'product', type: 'textarea', label: '产品清单', is_required: 0, placeholder: '请输入产品清单' },
+				{ key: 'scope', type: 'textarea', label: '适用范围', is_required: 0, placeholder: '请输入使用时间/适用人数' },
+				{ key: 'tips_text', type: 'textarea', label: '温馨提示', is_required: 0, placeholder: '请输入其他注意事项' },
+				{ key: 'images', type: 'image_multi', label: '服务图片', is_required: 1, maxCount: 9 },
+				{ key: 'video', type: 'video', label: '上传短视频', is_required: 0 },
+				{ key: 'category', type: 'select', label: '服务分类', is_required: 1, placeholder: '请选择服务分类', options: [{ label: '美发', value: '1' }, { label: '美甲', value: '2' }, { label: '美容', value: '3' }] },
+				{ key: 'service_type', type: 'single_select', label: '服务类型', is_required: 1, options: [{ label: '到店服务', value: '1' }, { label: '上门服务', value: '2' }] },
+				{ key: 'features', type: 'multi_select', label: '服务特色', is_required: 0, options: [{ label: '一对一服务', value: '1' }, { label: '免费咨询', value: '2' }, { label: '售后保障', value: '3' }] },
+			];
+			try {
+				const res = await request.post("/sj/servers/getTemplate", {
+					first_class_id: this.formData.first_class_id,
+				});
+				if (res.data && res.data.fields && res.data.fields.length > 0) {
+					this.formFields = res.data.fields;
+				} else {
+					// 接口返回空数据时使用模拟数据
+					this.formFields = mockFields;
+				}
+			} catch (e) {
+				console.error("获取模板失败", e);
+				// 接口失败时使用模拟数据
+				this.formFields = mockFields;
+			}
+			// 初始化表单数据
+			const initialData = {};
+			this.formFields.forEach((field) => {
+				if (field.default_value !== undefined) {
+					initialData[field.key] = field.default_value;
+				} else if (field.type === 'multi_select' || field.type === 'image_multi') {
+					initialData[field.key] = [];
+				} else if (!this.formData[field.key] && this.formData[field.key] !== 0) {
+					initialData[field.key] = '';
+				}
 			});
+			this.formData = { ...this.formData, ...initialData };
 		},
-		onLoad(options) {
-			this.state = options.state || "";
-			if (options.id) {
-				this.formData.id = options.id;
-				this.getInit();
-			} else {
-				request.post("/sj/firstclass", {}).then((res) => {
-					this.serviceTypes = this.serviceTypes.concat(res.data);
+		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;
+
+			// 如果新字段都为空，则尝试从旧的 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 || "",
+						});
+					}
 				});
 			}
-			// 判断是否显示上门提醒弹窗
-			const notShow = uni.getStorageSync('addServiceReminderNotShow');
-			// if (!notShow) {
-			// 	this.showReminderPopup = true;
-			// }
-			this.getUserInfo();
 		},
-		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
-				);
-			},
+
+		syncDetailForm() {
+			// 将 detailForm 的值映射到 formData 的新字段
+			this.formData.efficacy = (this.detailForm.effect || "").trim();
+			this.formData.crowd = (this.detailForm.crowd || "").trim();
+			this.formData.product = (this.detailForm.product || "").trim();
+			this.formData.scope = (this.detailForm.scope || "").trim();
+			this.formData.prompt = (this.detailForm.tips || "").trim();
 		},
-		methods: {
-			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;
-
-				// 如果新字段都为空，则尝试从旧的 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() {
-				// 将 detailForm 的值映射到 formData 的新字段
-				this.formData.efficacy = (this.detailForm.effect || "").trim();
-				this.formData.crowd = (this.detailForm.crowd || "").trim();
-				this.formData.product = (this.detailForm.product || "").trim();
-				this.formData.scope = (this.detailForm.scope || "").trim();
-				this.formData.prompt = (this.detailForm.tips || "").trim();
-			},
-
-			checkDetailForm() {
-				if (!this.detailForm.effect || !this.detailForm.effect.trim()) {
-					uni.showToast({
-						title: "请输入服务功效",
-						icon: "none",
-					});
-					return false;
-				}
-				if (!this.detailForm.crowd || !this.detailForm.crowd.trim()) {
-					uni.showToast({
-						title: "请输入适用人群",
-						icon: "none",
-					});
-					return false;
-				}
-				// if (!this.detailForm.product || !this.detailForm.product.trim()) {
-				// 	uni.showToast({
-				// 		title: "请输入产品清单",
-				// 		icon: "none",
-				// 	});
-				// 	return false;
-				// }
-				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.formData.video = 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);
+		checkDetailForm() {
+			if (!this.detailForm.effect || !this.detailForm.effect.trim()) {
 				uni.showToast({
-					title: "上传失败",
+					title: "请输入服务功效",
 					icon: "none",
 				});
-			},
-			onFileDelete(file, index) {
-				console.log("删除文件:", this.formData.photo, index);
-			},
-			uploadVideoSuc(file) {
-				this.formData.video = file;
-			},
-			uploadVideoErr() {},
-			uploadVideoDel() {
-				this.formData.video = null;
-			},
-			async getInit() {
-				const firstclass = await request.post("/sj/firstclass");
-				this.serviceTypes = this.serviceTypes.concat(firstclass.data);
-
-				await request
-					.post("/sj/servers/detail", {
-						id: this.formData.id
-					})
-					.then((res) => {
-						// 直接合并所有字段，避免遗漏
-						this.formData = {
-							...this.formData,
-							...res.data
-						};
-						// 确保 detail 数组被保留（可能用于兼容）
-						this.formData.detail = res.data.detail || [];
-						// 调用初始化方法，它会优先使用新字段
-						this.initDetailForm(res.data.detail || []);
-						// 处理分类显示
-						firstclass.data.filter((item, i) => {
-							if (item.id == this.formData.first_class_id) {
-								this.selectedServiceTypeIndex = i;
-								this.serviceType = item.title;
-								this.ratio = item.ratio;
-							}
-						});
-					});
-				request
-					.post("/user/secondclass", {
-						id: this.formData.first_class_id,
-					})
-					.then((result) => {
-						if (result.data.length == 0 || !result.data) {
-							this.showCategory = false;
-						} else {
-							this.categoryAll = result.data;
-							this.categoryAll.filter((e, i) => {
-								if (e.id == this.formData.second_class_id) {
-									this.selectedCategoryIndex = [i];
-									this.category = e.title;
-								}
-							});
-							this.showCategory = true;
-						}
-					});
-			},
-			getUserInfo() {
-				const type = this.artisanType == 1 ? 2 : this.artisanType == 2 ? 3 : 1;
-				request
-					.post("/user/getuser", {
-						type: type,
-					})
-					.then((result) => {
-						this.formData.publish_user_id = result.data.id;
-					});
-			},
-			// 是否在商家端售卖
-			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);
-			},
-
-			// 删除视频
-			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;
+				return false;
+			}
+			if (!this.detailForm.crowd || !this.detailForm.crowd.trim()) {
+				uni.showToast({
+					title: "请输入适用人群",
+					icon: "none",
 				});
-
-				if (isEmpty) {
-					uni.showToast({
-						title: "请至少填写一项内容",
-						icon: "none",
-					});
-					return;
-				}
-
-				// 实现保存草稿逻辑
-				this.formData.state = 0;
-				let url = null;
-				if (!this.formData.id) {
-					url = "/user/serveradd";
-				} else {
-					url = "/user/serverchange";
-				}
-				request.post(url, this.formData).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),
-
-			// 提交表单
-			submitForm: debounce(function() {
-				if (this.isAdd) return;
-				this.syncDetailForm();
-				// 表单验证
-
-				if (!this.formData.title) {
-					uni.showToast({
-						title: "请输入服务名称",
-						icon: "none",
-					});
-					return;
-				}
-				if (!this.formData.line_price) {
-					uni.showToast({
-						title: '请输入服务定价',
-						icon: 'none'
-					})
-					return
-				}
-				if (!this.formData.server_price) {
-					uni.showToast({
-						title: '请输入服务售价',
-						icon: 'none'
-					})
-					return
-				}
-
-				if (!this.formData.first_class_id) {
-					uni.showToast({
-						title: "请选择服务分类",
-						icon: "none",
-					});
-					return;
-				}
-				if (this.showCategory && !this.formData.second_class_id) {
-					uni.showToast({
-						title: "请选择服务子类",
-						icon: "none",
-					});
-					return;
-				}
-				if (!this.formData.server_time) {
-					uni.showToast({
-						title: "请输入服务时长",
-						icon: "none",
-					});
-					return;
-				}
-				if (this.formData.server_time < 10) {
-					uni.showToast({
-						title: "服务时长最短为10分钟",
-						icon: "none",
-					});
-					return;
-				}
-				if (this.formData.server_time > 240) {
-					uni.showToast({
-						title: "服务时长最长为240分钟",
-						icon: "none",
-					});
-					return;
-				}
-				if (!this.formData.sj_see && this.artisanType == 1) {
-					uni.showToast({
-						title: "请选择是否允许在门店端售卖",
-						icon: "none",
-					});
-					return;
-				}
-
-				// 检查服务简介
-				if (!this.checkDetailForm()) {
-					return;
-				}
-				this.syncDetailForm();
-
-				// 检查服务流程数组
-				if (this.formData.process && this.formData.process.length > 0) {
-					for (let item of this.formData.process) {
-						if (!item.text) {
-							uni.showToast({
-								title: "请完善服务流程内容",
-								icon: "none",
-							});
-							return;
-						}
-					}
-				} else {
-					uni.showToast({
-						title: "请添加服务流程内容",
-						icon: "none",
-					});
-					return;
-				}
-
-				// 检查视频和图片
-				// if (!this.formData.video) {
-				//   uni.showToast({
-				//     title: '请上传服务视频',
-				//     icon: 'none'
-				//   })
-				//   return
-				// }
-				if (!this.formData.photo || this.formData.photo.length === 0) {
-					uni.showToast({
-						title: "请上传服务图片",
-						icon: "none",
-					});
-					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-');
-				delete this.formData.shop_business_time
-				delete this.formData.shop_head_photo
-				delete this.formData.shop_address
-				delete this.formData.shop_dependency
-				delete this.formData.shop_class
-				delete this.formData.team_buy
-				
-				
-
-				request.post(url, this.formData).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),
-
-			// 打开服务分类
-			openServiceTypePicker() {
-				console.log("open");
-				// 实现分类选择逻辑
-				this.showServiceTypePicker = true;
-			},
-
-			// 打开服务子类选择器
-			openCategoryPicker() {
-				// 实现子类选择逻辑
-				if (!this.formData.first_class_id) {
-					uni.showToast({
-						title: "请先选择服务分类",
-						icon: "none",
-					});
-				} else {
-					this.showCategoryPicker = true;
-				}
-			},
-
-			// 处理服务类型选择
-			handleServiceTypeConfirm(e) {
-				console.log("e", e);
-				const selectedType = e.items[0];
-				if (this.formData.first_class_id == selectedType.id) return;
-				this.formData.first_class_id = selectedType.id;
-				this.serviceType = selectedType.title;
-				this.ratio = selectedType.ratio;
-				let id = selectedType.id;
-				request
-					.post("/user/secondclass", {
-						id,
-					})
-					.then((res) => {
-						if (res.data.length == 0 || !res.data) {
-							this.showCategory = false;
-							this.selectedCategoryIndex = [0];
-						} else {
-							this.categoryAll = res.data;
-							this.showCategory = true;
-							this.selectedCategoryIndex = [0];
-						}
-					});
-			},
-
-			// 处理服务分类选择
-			handleCategoryConfirm(e) {
-				console.log(e, "selectedCategory", this.categoryAll);
-				const selectedCategory = e.item;
-				this.formData.second_class_id = selectedCategory.id;
-				this.category = selectedCategory.title;
-			},
+				return false;
+			}
+			// if (!this.detailForm.product || !this.detailForm.product.trim()) {
+			// 	uni.showToast({
+			// 		title: "请输入产品清单",
+			// 		icon: "none",
+			// 	});
+			// 	return false;
+			// }
+			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.formData.video = 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.formData.video = file;
+		},
+		uploadVideoErr() { },
+		uploadVideoDel() {
+			this.formData.video = null;
+		},
+		async getInit() {
+			await request
+				.post("/sj/servers/detail", {
+					id: this.formData.id
+				})
+				.then((res) => {
+					// 直接合并所有字段，避免遗漏
+					this.formData = {
+						...this.formData,
+						...res.data
+					};
+					// 确保 detail 数组被保留（可能用于兼容）
+					this.formData.detail = res.data.detail || [];
+					// 调用初始化方法，它会优先使用新字段
+					this.initDetailForm(res.data.detail || []);
+				});
+		},
+		getUserInfo() {
+			const type = this.artisanType == 1 ? 2 : this.artisanType == 2 ? 3 : 1;
+			request
+				.post("/user/getuser", {
+					type: type,
+				})
+				.then((result) => {
+					this.formData.publish_user_id = result.data.id;
+				});
+		},
+		// 是否在商家端售卖
+		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);
+		},
+
+		// 删除视频
+		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;
+			let url = null;
+			if (!this.formData.id) {
+				url = "/user/serveradd";
+			} else {
+				url = "/user/serverchange";
+			}
+			request.post(url, this.formData).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),
+
+		// 提交表单
+		submitForm: debounce(function () {
+			if (this.isAdd) return;
+			this.syncDetailForm();
+			// 表单验证
+
+			if (!this.formData.title) {
+				uni.showToast({
+					title: "请输入服务名称",
+					icon: "none",
+				});
+				return;
+			}
+			if (!this.formData.line_price) {
+				uni.showToast({
+					title: '请输入服务定价',
+					icon: 'none'
+				})
+				return
+			}
+			if (!this.formData.server_price) {
+				uni.showToast({
+					title: '请输入服务售价',
+					icon: 'none'
+				})
+				return
+			}
+
+			if (!this.formData.server_time) {
+				uni.showToast({
+					title: "请输入服务时长",
+					icon: "none",
+				});
+				return;
+			}
+			if (this.formData.server_time < 10) {
+				uni.showToast({
+					title: "服务时长最短为10分钟",
+					icon: "none",
+				});
+				return;
+			}
+			if (this.formData.server_time > 240) {
+				uni.showToast({
+					title: "服务时长最长为240分钟",
+					icon: "none",
+				});
+				return;
+			}
+			if (!this.formData.sj_see && this.artisanType == 1) {
+				uni.showToast({
+					title: "请选择是否允许在门店端售卖",
+					icon: "none",
+				});
+				return;
+			}
+
+			// 检查服务简介
+			if (!this.checkDetailForm()) {
+				return;
+			}
+			this.syncDetailForm();
+
+			// 检查服务流程数组
+			if (this.formData.process && this.formData.process.length > 0) {
+				for (let item of this.formData.process) {
+					if (!item.text) {
+						uni.showToast({
+							title: "请完善服务流程内容",
+							icon: "none",
+						});
+						return;
+					}
+				}
+			} else {
+				uni.showToast({
+					title: "请添加服务流程内容",
+					icon: "none",
+				});
+				return;
+			}
+
+			// 检查视频和图片
+			// if (!this.formData.video) {
+			//   uni.showToast({
+			//     title: '请上传服务视频',
+			//     icon: 'none'
+			//   })
+			//   return
+			// }
+			if (!this.formData.photo || this.formData.photo.length === 0) {
+				uni.showToast({
+					title: "请上传服务图片",
+					icon: "none",
+				});
+				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-');
+			delete this.formData.shop_business_time
+			delete this.formData.shop_head_photo
+			delete this.formData.shop_address
+			delete this.formData.shop_dependency
+			delete this.formData.shop_class
+			delete this.formData.team_buy
+
+
+
+			request.post(url, this.formData).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;
-		}
-	}
-
-	.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-option {
-		display: flex;
-		flex-flow: row nowrap;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.shopsale-option:last-child {
-		margin-left: 220rpx;
-	}
-
-	.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-label {
-		font-size: 28rpx;
-		color: #333333;
-	}
-
-	.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-value {
-		font-size: 28rpx;
-		color: #333333;
-		margin-right: 16rpx;
-	}
-
-	.placeholder {
+	.price-tip-card {
+		padding: 8rpx 12rpx;
+		background: #FDF0F0;
+		border-radius: 8rpx;
 		font-weight: 400;
-		font-size: 28rpx;
-		color: #999999;
-	}
-
-	.textarea-item {
-		padding-bottom: 30rpx;
-	}
-
-	.form-textarea {
-		flex: 1;
-		height: 198rpx;
-		font-size: 28rpx;
-		color: #333333;
-		line-height: 1.5;
-		margin-left: 32rpx;
-	}
-
-	.upload-item {
-		padding-bottom: 30rpx;
-	}
-
-	.upload-tip {
 		font-size: 24rpx;
-		color: #999999;
-		margin-left: 10rpx;
+		color: #EE4853;
+		line-height: 33rpx;
 	}
+}
 
-	.upload-content {
-		margin-top: 20rpx;
-		position: relative;
-	}
+.shopsale-box {
+	flex-flow: column;
+	justify-content: space-between;
+	align-items: space-between;
+}
 
-	.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;
-	}
+.shopsale-change {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+	align-items: center;
+	margin-top: 24rpx;
+}
 
-	.progress-text {
-		font-size: 42rpx;
-		color: #ffffff;
-		font-weight: 500;
-	}
+.shopsale-option {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: center;
+	align-items: center;
+}
 
-	.progress-lable {
-		font-size: 28rpx;
-		color: #ffffff;
-	}
+.shopsale-option:last-child {
+	margin-left: 220rpx;
+}
 
-	.progress-box progress {
-		/* width: 204rpx; */
-		position: absolute;
-		left: 0;
-		right: 0;
-		bottom: 0;
-	}
+.option-text {
+	padding-left: 16rpx;
+}
 
-	.video-preview,
-	.image-preview,
-	.upload-btn {
-		width: 200rpx;
-		height: 200rpx;
-		margin-right: 10rpx;
-		margin-bottom: 20rpx;
-		position: relative;
-	}
+.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;
+}
 
-	.preview-video,
-	.preview-image {
-		width: 200rpx;
-		height: 200rpx;
-		border-radius: 8rpx;
-	}
+.form-label {
+	font-size: 28rpx;
+	color: #333333;
+}
 
-	.upload-btn {
-		border: 2rpx dashed #dddddd;
-		border-radius: 8rpx;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
+.form-input {
+	flex: 1;
+	height: 40rpx;
+	font-size: 28rpx;
+	color: #333333;
+	align-items: center;
+	text-align: center;
+}
 
-	.plus-icon {
-		font-size: 60rpx;
-		color: #999999;
-	}
+.form-right {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
 
-	.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;
-	}
+.form-value {
+	font-size: 28rpx;
+	color: #333333;
+	margin-right: 16rpx;
+}
 
-	.bottom-buttons {
-		/* position: fixed;
+.placeholder {
+	font-weight: 400;
+	font-size: 28rpx;
+	color: #999999;
+}
+
+.textarea-item {
+	padding-bottom: 30rpx;
+}
+
+.form-textarea {
+	flex: 1;
+	height: 198rpx;
+	font-size: 28rpx;
+	color: #333333;
+	line-height: 1.5;
+	margin-left: 32rpx;
+}
+
+.upload-item {
+	padding-bottom: 30rpx;
+}
+
+.upload-tip {
+	font-size: 24rpx;
+	color: #999999;
+	margin-left: 10rpx;
+}
+
+.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-text {
+	font-size: 42rpx;
+	color: #ffffff;
+	font-weight: 500;
+}
+
+.progress-lable {
+	font-size: 28rpx;
+	color: #ffffff;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+	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 {
+	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 .form-item {
+	margin-bottom: 0;
+}
+
+.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-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-label {
+	font-size: 28rpx;
+	color: #333333;
+}
+
+.picker-value {
+	font-size: 28rpx;
+	color: #666666;
+}
+
+.picker-arrow {
+	width: 32rpx;
+	height: 32rpx;
+	margin-left: 16rpx;
+}
+
+.delete-icon {
+	width: 32rpx;
+	height: 32rpx;
+	margin-left: 24rpx;
+}
+
+.form-detail {
+	position: relative;
+}
+
+.required::before {
+	content: "*";
+	color: #ff0000;
+	margin-right: 4rpx;
+}
+
+.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-title {
+	padding: 24rpx 0 25rpx;
+}
+
+.detail-title .form-label {
+	font-size: 30rpx;
+	font-weight: 500;
+	color: #333;
+	line-height: 40rpx;
+}
+
+.detail-row {
+	padding: 0 0 36rpx;
+}
+
+.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 {
+	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;
+}
+
+/* 平台特定样式 */
+/* #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: left;
+	font-style: normal;
+
+	text-align: center;
+
+	.tip-icon {
+		width: 34rpx;
+		height: 34rpx;
+		margin-right: 10rpx;
+		transform: translateY(6rpx);
 	}
+}
 
-	.btn-draft,
-	.btn-submit {
-		width: 334rpx;
-		height: 76rpx;
-		line-height: 76rpx;
-		text-align: center;
-		font-size: 28rpx;
-		border-radius: 40rpx;
-		margin: 0 24rpx;
-	}
+/* 淡入淡出动画 */
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.3s;
+}
 
-	.btn-draft {
-		background-color: #ffffff;
-		color: #e8101e;
-		border: 2rpx solid #e8101e;
-		box-sizing: border-box;
-	}
+.fade-enter,
+.fade-leave-to {
+	opacity: 0;
+}
 
-	.btn-submit {
-		background-color: #e8101e;
-		color: #ffffff;
-		width: 705rpx;
-		height: 76rpx;
-	}
+.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;
+}
 
-	.form-step {
-		background-color: #fff;
-		margin-bottom: 24rpx;
-	}
+.popup-content2 {
+	width: 600rpx;
+	background-color: #ffffff;
+	border-radius: 20rpx;
+	overflow: hidden;
+	padding: 40rpx 30rpx;
+	box-sizing: border-box;
+}
 
-	.form-step .form-item {
-		margin-bottom: 0;
-	}
+.popup-title {
+	font-size: 36rpx;
+	font-weight: 600;
+	color: #333333;
+	text-align: center;
+	margin-bottom: 20rpx;
+}
 
-	.step {
-		display: flex;
-		flex-flow: row nowrap;
-		justify-content: space-between;
-		align-items: center;
-		padding: 0 24rpx 24rpx;
-	}
+.popup-message {
+	font-size: 30rpx;
+	color: #666666;
+	text-align: center;
+	margin-top: 40rpx;
+	margin-bottom: 30rpx;
+	line-height: 1.5;
+}
 
-	.step-inp {
-		flex: 1;
-		font-size: 28rpx;
-		color: #333333;
-		margin-left: 38rpx;
-		padding: 0 24rpx;
-		background-color: rgba(230, 230, 230, 0.5);
-	}
+.popup-buttons {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: space-between;
+	padding: 20rpx 0 0 0;
+	gap: 60rpx;
+}
 
-	.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);
-	}
+.popup-btn {
+	flex: 1;
+	height: 80rpx;
+	line-height: 80rpx;
+	text-align: center;
+	font-size: 26rpx;
+	border-radius: 40rpx;
+}
 
-	/* 选择器触发按钮样式 */
-	.picker-trigger {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 24rpx 32rpx;
-		background-color: #ffffff;
-		border-radius: 12rpx;
-		margin-bottom: 24rpx;
-	}
+.popup-btn-know {
+	background-color: #e8101e;
+	color: #ffffff;
+}
 
-	.picker-label {
-		font-size: 28rpx;
-		color: #333333;
-	}
-
-	.picker-value {
-		font-size: 28rpx;
-		color: #666666;
-	}
-
-	.picker-arrow {
-		width: 32rpx;
-		height: 32rpx;
-		margin-left: 16rpx;
-	}
-
-	.delete-icon {
-		width: 32rpx;
-		height: 32rpx;
-		margin-left: 24rpx;
-	}
-
-	.form-detail {
-		position: relative;
-	}
-
-	.required::before {
-		content: "*";
-		color: #ff0000;
-		margin-right: 4rpx;
-	}
-
-	.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-title {
-		padding: 24rpx 0 25rpx;
-	}
-
-	.detail-title .form-label {
-		font-size: 30rpx;
-		font-weight: 500;
-		color: #333;
-		line-height: 40rpx;
-	}
-
-	.detail-row {
-		padding: 0 0 36rpx;
-	}
-
-	.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 {
-		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;
-	}
-
-	/* 平台特定样式 */
-	/* #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: left;
-		font-style: normal;
-
-		text-align: center;
-
-		.tip-icon {
-			width: 34rpx;
-			height: 34rpx;
-			margin-right: 10rpx;
-			transform: translateY(6rpx);
-		}
-	}
-
-	/* 淡入淡出动画 */
-	.fade-enter-active,
-	.fade-leave-active {
-		transition: opacity 0.3s;
-	}
-
-	.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-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-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-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;
-	}
+.popup-btn-notshow {
+	background-color: #ffffff;
+	color: #e8101e;
+	border: 1rpx #e8101e solid;
+}
 </style>
\ No newline at end of file
diff --git a/utils/request.js b/utils/request.js
index 60b54af..da106d8 100644
--- a/utils/request.js
+++ b/utils/request.js
@@ -120,14 +120,14 @@ const request = async (options, isUpdate) => {
 
   if (process.env.NODE_ENV === "development") {
     baseURL = url; // 发布到生产环境时，此处代码会被摇树移除掉。
-    // baseURL = "http://116.63.163.121:93"; // 发布到生产环境时，此处代码会被摇树移除掉。
-    //baseURL = 'http://60.247.146.5:96'; // 发布到生产环境时，此处代码会被摇树移除掉。
-    baseURL = "https://app.mrrweb.com.cn";
+    baseURL = "http://116.63.163.121:93"; // 发布到生产环境时，此处代码会被摇树移除掉。
+    //baseURL = 'http://116.63.163.121:96'; // 发布到生产环境时，此处代码会被摇树移除掉。
+    // baseURL = "https://app.mrrweb.com.cn";
   } else {
     baseURL = url; // 发布到生产环境时，此处代码会被摇树移除掉。
-    // baseURL = "http://116.63.163.121:93"; // 发布到生产环境时，此处代码会被摇树移除掉。
-    //baseURL = 'http://60.247.146.5:96'; // 发布到生产环境时，此处代码会被摇树移除掉。
-    baseURL = "https://app.mrrweb.com.cn";
+    baseURL = "http://116.63.163.121:93"; // 发布到生产环境时，此处代码会被摇树移除掉。
+    //baseURL = 'http://116.63.163.121:96'; // 发布到生产环境时，此处代码会被摇树移除掉。
+    // baseURL = "https://app.mrrweb.com.cn";
 
     console.log("生产环境");
   }