From 6aa66ce311a47d0acb42c0b93ea9ecd90d66002c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=81=E6=9D=B0?= <727475508@qq.com>
Date: Wed, 10 Jun 2026 10:15:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=B9=E7=AA=97=E6=A0=B7=E5=BC=8F=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=EF=BC=8C=E7=BB=84=E4=BB=B6=E9=A2=84=E5=AE=9A=E4=B9=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/dynamic-form/FormItemCheckbox.vue |  133 +-
 components/dynamic-form/FormItemImage.vue    |   52 +-
 components/dynamic-form/FormItemNumber.vue   |   52 +-
 components/dynamic-form/FormItemRadio.vue    |   31 +-
 components/dynamic-form/FormItemRichtext.vue |   74 +-
 components/dynamic-form/FormItemSelect.vue   |   63 +-
 components/dynamic-form/FormItemText.vue     |   52 +-
 components/dynamic-form/FormItemTextarea.vue |   82 +-
 components/dynamic-form/FormItemVideo.vue    |   78 +-
 components/dynamic-form/dynamic-form.vue     |  451 ++++--
 pages/artisan/service-list.vue               |  383 ++---
 pages/shop/add-service copy.vue              | 1504 ++++++++++++++++++
 pages/shop/add-service.vue                   |   28 +-
 13 files changed, 2233 insertions(+), 750 deletions(-)
 create mode 100644 pages/shop/add-service copy.vue

diff --git a/components/dynamic-form/FormItemCheckbox.vue b/components/dynamic-form/FormItemCheckbox.vue
index 85dffca..d658b91 100644
--- a/components/dynamic-form/FormItemCheckbox.vue
+++ b/components/dynamic-form/FormItemCheckbox.vue
@@ -1,97 +1,86 @@
 <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>
+  <view class="form-checkbox">
+    <view v-for="(item, index) in options" :key="index" class="checkbox-item" @click="onToggle(item)">
+      <view class="checkbox-dot" :class="{ active: isChecked(item) }"></view>
+      <text class="checkbox-label">{{ item }}</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());
-		}
-	}
+  name: 'FormItemCheckbox',
+  props: {
+    value: { type: Array, default: function () { return []; } },
+    options: { type: Array, default: function () { return []; } },
+    maxCount: { type: Number, default: 0 }
+  },
+  methods: {
+    isChecked: function (val) {
+      return this.value && this.value.indexOf(val) !== -1;
+    },
+    onToggle: function (val) {
+      var newValue = (this.value || []).slice();
+      var index = newValue.indexOf(val);
+      if (index === -1) {
+        if (this.maxCount > 0 && newValue.length >= this.maxCount) {
+          uni.showToast({
+            title: '最多只能选择' + this.maxCount + '项',
+            icon: 'none'
+          });
+          return;
+        }
+        newValue.push(val);
+      } else {
+        newValue.splice(index, 1);
+      }
+      this.$emit('input', newValue);
+    }
+  }
 };
 </script>
 
 <style scoped>
 .form-checkbox {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 24rpx;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .checkbox-item {
-	display: flex;
-	align-items: center;
-	padding: 16rpx 0;
+  display: flex;
+  align-items: center;
+  margin-right: 40rpx;
+  margin-bottom: 16rpx;
 }
 
 .checkbox-dot {
-	width: 36rpx;
-	height: 36rpx;
-	border-radius: 6rpx;
-	border: 2rpx solid #dddddd;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin-right: 12rpx;
+  width: 36rpx;
+  height: 36rpx;
+  border-radius: 8rpx;
+  border: 2rpx solid #cccccc;
+  margin-right: 12rpx;
+  position: relative;
 }
 
-.checkbox-dot.checked {
-	border-color: #e8101e;
-	background-color: #e8101e;
+.checkbox-dot.active {
+  border-color: #e8101e;
+  background-color: #e8101e;
 }
 
-.check-icon {
-	color: #ffffff;
-	font-size: 24rpx;
+.checkbox-dot.active::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -60%) rotate(-45deg);
+  width: 20rpx;
+  height: 12rpx;
+  border-left: 4rpx solid #ffffff;
+  border-bottom: 4rpx solid #ffffff;
 }
 
 .checkbox-label {
-	font-size: 28rpx;
-	color: #333333;
+  font-size: 28rpx;
+  color: #333333;
 }
 </style>
diff --git a/components/dynamic-form/FormItemImage.vue b/components/dynamic-form/FormItemImage.vue
index 2d6396c..9bf1f8f 100644
--- a/components/dynamic-form/FormItemImage.vue
+++ b/components/dynamic-form/FormItemImage.vue
@@ -16,44 +16,44 @@
 
 <script>
 export default {
-  name: "FormItemImage",
+  name: 'FormItemImage',
   props: {
-    value: { type: Array, default: function() { return []; } },
+    value: { type: Array, default: function () { return []; } },
     maxCount: { type: Number, default: 9 }
   },
-  data: function() {
+  data: function () {
     return {
       imageList: []
     };
   },
   watch: {
     value: {
-      handler: function(val) {
+      handler: function (val) {
         this.imageList = Array.isArray(val) ? val.slice() : [];
       },
       immediate: true
     }
   },
   methods: {
-    chooseImage: function() {
+    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) {
+        sizeType: ['compressed'],
+        sourceType: ['album', 'camera'],
+        success: function (res) {
           self.imageList = self.imageList.concat(res.tempFilePaths);
-          self.$emit("input", self.imageList);
+          self.$emit('input', self.imageList);
         }
       });
     },
-    deleteImage: function(index) {
+    deleteImage: function (index) {
       this.imageList.splice(index, 1);
-      this.$emit("input", this.imageList);
+      this.$emit('input', this.imageList);
     },
-    previewImage: function(index) {
+    previewImage: function (index) {
       uni.previewImage({
         urls: this.imageList,
         current: index
@@ -67,44 +67,54 @@ export default {
 .form-image {
   width: 100%;
 }
+
 .image-list {
   display: flex;
   flex-wrap: wrap;
-  gap: 16rpx;
 }
+
 .image-item {
   width: 200rpx;
   height: 200rpx;
+  margin-right: 10rpx;
+  margin-bottom: 20rpx;
   border-radius: 8rpx;
   overflow: hidden;
   position: relative;
 }
+
 .preview-image {
-  width: 100%;
-  height: 100%;
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 8rpx;
 }
+
 .delete-btn {
   position: absolute;
-  top: 0;
-  right: 0;
+  top: -20rpx;
+  right: -20rpx;
   width: 40rpx;
   height: 40rpx;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
 .delete-icon {
   color: #ffffff;
-  font-size: 28rpx;
+  font-size: 32rpx;
 }
+
 .add-btn {
-  background-color: #f5f5f5;
+  background-color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 2rpx dashed #cccccc;
+  border: 2rpx dashed #dddddd;
 }
+
 .add-icon {
   font-size: 60rpx;
   color: #999999;
diff --git a/components/dynamic-form/FormItemNumber.vue b/components/dynamic-form/FormItemNumber.vue
index 1fcfa40..4f3ef03 100644
--- a/components/dynamic-form/FormItemNumber.vue
+++ b/components/dynamic-form/FormItemNumber.vue
@@ -1,39 +1,39 @@
 <template>
-	<input type="number" class="form-input" :value="value" :placeholder="placeholder" placeholder-class="placeholder"
-		@input="$emit('input', $event.detail.value)" />
+  <view class="form-number-wrap">
+    <input type="digit" :value="value" :placeholder="placeholder" placeholder-class="placeholder" class="form-input" @input="onInput" />
+  </view>
 </template>
 
 <script>
 export default {
-	name: 'FormItemNumber',
-	props: {
-		value: {
-			type: [String, Number],
-			default: ''
-		},
-		placeholder: {
-			type: String,
-			default: '请输入数字'
-		}
-	}
+  name: 'FormItemNumber',
+  props: {
+    value: { type: [String, Number], default: '' },
+    placeholder: { type: String, default: '请输入' }
+  },
+  methods: {
+    onInput: function(e) {
+      this.$emit('input', e.target.value);
+    }
+  }
 };
 </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;
+.form-number-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+.form-input {
+  flex: 1;
+  font-size: 28rpx;
+  color: #333333;
+  text-align: center;
 }
-
 .placeholder {
-	font-weight: 400;
-	font-size: 28rpx;
-	color: #999999;
+  font-weight: 400;
+  font-size: 28rpx;
+  color: #999999;
 }
 </style>
diff --git a/components/dynamic-form/FormItemRadio.vue b/components/dynamic-form/FormItemRadio.vue
index 6d3c015..f07bedf 100644
--- a/components/dynamic-form/FormItemRadio.vue
+++ b/components/dynamic-form/FormItemRadio.vue
@@ -1,30 +1,22 @@
 <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 v-for="(item, index) in options" :key="index" class="radio-item" @click="onSelect(item)">
+      <view class="radio-dot" :class="{ active: value === item }"></view>
+      <text class="radio-label">{{ item }}</text>
     </view>
   </view>
 </template>
 
 <script>
 export default {
-  name: "FormItemRadio",
+  name: 'FormItemRadio',
   props: {
-    value: {
-      type: [String, Number],
-      default: ""
-    },
-    options: {
-      type: Array,
-      default: function() {
-        return [];
-      }
-    }
+    value: { type: [String, Number], default: '' },
+    options: { type: Array, default: function () { return []; } }
   },
   methods: {
-    onSelect: function(val) {
-      this.$emit("input", val);
+    onSelect: function (val) {
+      this.$emit('input', val);
     }
   }
 };
@@ -35,12 +27,14 @@ export default {
   display: flex;
   flex-wrap: wrap;
 }
+
 .radio-item {
   display: flex;
   align-items: center;
   margin-right: 40rpx;
   margin-bottom: 16rpx;
 }
+
 .radio-dot {
   width: 36rpx;
   height: 36rpx;
@@ -49,12 +43,14 @@ export default {
   margin-right: 12rpx;
   position: relative;
 }
+
 .radio-dot.active {
   border-color: #e8101e;
   background-color: #e8101e;
 }
+
 .radio-dot.active::after {
-  content: "";
+  content: '';
   position: absolute;
   top: 50%;
   left: 50%;
@@ -64,6 +60,7 @@ export default {
   border-radius: 50%;
   background-color: #ffffff;
 }
+
 .radio-label {
   font-size: 28rpx;
   color: #333333;
diff --git a/components/dynamic-form/FormItemRichtext.vue b/components/dynamic-form/FormItemRichtext.vue
index 0874f4f..5874b51 100644
--- a/components/dynamic-form/FormItemRichtext.vue
+++ b/components/dynamic-form/FormItemRichtext.vue
@@ -1,83 +1,43 @@
 <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 class="richtext-trigger" @click="goEdit">
+      <text class="richtext-value">{{ value ? '已设置' : '去设置' }}</text>
     </view>
   </view>
 </template>
 
 <script>
 export default {
-  name: "FormItemRichtext",
+  name: 'FormItemRichtext',
   props: {
-    value: { type: String, default: "" },
+    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);
-        },
+    goEdit: function () {
+      uni.navigateTo({
+        url: '/pages/shop/add-img-text?list=' + this.value
       });
-    },
-  },
+    }
+  }
 };
 </script>
 
 <style scoped>
 .form-richtext {
-  width: 100%;
-}
-
-.richtext-toolbar {
+  flex: 1;
   display: flex;
-  gap: 16rpx;
-  padding: 16rpx;
-  background-color: #f0f0f0;
-  border-radius: 8rpx 8rpx 0 0;
+  align-items: center;
+  justify-content: flex-end;
 }
 
-.toolbar-btn {
-  padding: 8rpx 16rpx;
-  background-color: #ffffff;
-  border-radius: 4rpx;
-  font-size: 24rpx;
-  color: #333333;
+.richtext-trigger {
+  display: flex;
+  align-items: center;
 }
 
-.richtext-editor {
-  width: 100%;
-  height: 300rpx;
-  background-color: #ffffff;
-  border: 2rpx solid #e0e0e0;
-  border-top: none;
-  border-radius: 0 0 8rpx 8rpx;
-  padding: 20rpx;
+.richtext-value {
   font-size: 28rpx;
   color: #333333;
-}
-
-.placeholder {
-  color: #999999;
-}
-
-.richtext-preview {
-  margin-top: 16rpx;
-  padding: 16rpx;
-  background-color: #f9f9f9;
-  border-radius: 8rpx;
+  text-align: right;
 }
 </style>
diff --git a/components/dynamic-form/FormItemSelect.vue b/components/dynamic-form/FormItemSelect.vue
index 1e717cf..c3c3ce7 100644
--- a/components/dynamic-form/FormItemSelect.vue
+++ b/components/dynamic-form/FormItemSelect.vue
@@ -1,53 +1,29 @@
 <template>
-  <picker :range="optionLabels" @change="onChange">
+  <picker :range="options" @change="onChange">
     <view class="form-select">
-      <text :class="['select-text', selectedLabel ? '' : 'placeholder']">
-        {{ selectedLabel || placeholder }}
+      <text :class="['select-text', value ? '' : 'placeholder']">
+        {{ value || placeholder }}
       </text>
-      <image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/wxstaic/images/arrow_right.png" class="arrow-right" mode="aspectFit" />
+      <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",
+  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 : "";
-    }
+    value: { type: [String, Number], default: '' },
+    options: { type: Array, default: function () { return []; } },
+    placeholder: { type: String, default: '请选择' }
   },
   methods: {
-    onChange: function(e) {
+    onChange: function (e) {
       var index = e.detail.value;
       var selected = this.options[index];
-      if (selected) {
-        this.$emit("input", selected.value);
+      if (selected !== undefined) {
+        this.$emit('input', selected);
       }
     }
   }
@@ -59,21 +35,22 @@ export default {
   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;
+  margin-right: 16rpx;
 }
+
 .placeholder {
+  font-weight: 400;
+  font-size: 28rpx;
   color: #999999;
 }
+
 .arrow-right {
-  width: 24rpx;
-  height: 24rpx;
+  width: 32rpx;
+  height: 32rpx;
 }
 </style>
diff --git a/components/dynamic-form/FormItemText.vue b/components/dynamic-form/FormItemText.vue
index 5abc0c0..eee09d4 100644
--- a/components/dynamic-form/FormItemText.vue
+++ b/components/dynamic-form/FormItemText.vue
@@ -1,39 +1,39 @@
 <template>
-	<input type="text" class="form-input" :value="value" :placeholder="placeholder" placeholder-class="placeholder"
-		@input="$emit('input', $event.detail.value)" />
+  <view class="form-text-wrap">
+    <input type="text" :value="value" :placeholder="placeholder" placeholder-class="placeholder" class="form-input" @input="onInput" />
+  </view>
 </template>
 
 <script>
 export default {
-	name: 'FormItemText',
-	props: {
-		value: {
-			type: String,
-			default: ''
-		},
-		placeholder: {
-			type: String,
-			default: '请输入'
-		}
-	}
+  name: 'FormItemText',
+  props: {
+    value: { type: [String, Number], default: '' },
+    placeholder: { type: String, default: '请输入' }
+  },
+  methods: {
+    onInput: function(e) {
+      this.$emit('input', e.target.value);
+    }
+  }
 };
 </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;
+.form-text-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+.form-input {
+  flex: 1;
+  font-size: 28rpx;
+  color: #333333;
+  text-align: center;
 }
-
 .placeholder {
-	font-weight: 400;
-	font-size: 28rpx;
-	color: #999999;
+  font-weight: 400;
+  font-size: 28rpx;
+  color: #999999;
 }
 </style>
diff --git a/components/dynamic-form/FormItemTextarea.vue b/components/dynamic-form/FormItemTextarea.vue
index 3783306..43b741d 100644
--- a/components/dynamic-form/FormItemTextarea.vue
+++ b/components/dynamic-form/FormItemTextarea.vue
@@ -1,56 +1,52 @@
 <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>
+  <view class="detail-textarea-wrap">
+    <textarea class="detail-textarea" :value="value" :placeholder="placeholder" placeholder-class="placeholder" maxlength="200" @input="onInput" />
+    <text class="detail-count">{{ (value || '').length }}/200</text>
+  </view>
 </template>
 
 <script>
 export default {
-	name: 'FormItemTextarea',
-	props: {
-		value: {
-			type: String,
-			default: ''
-		},
-		placeholder: {
-			type: String,
-			default: '请输入'
-		}
-	}
+  name: 'FormItemTextarea',
+  props: {
+    value: { type: String, default: '' },
+    placeholder: { type: String, default: '请输入' }
+  },
+  methods: {
+    onInput: function(e) {
+      this.$emit('input', e.target.value);
+    }
+  }
 };
 </script>
 
 <style scoped>
-.textarea-wrap {
-	width: 100%;
-	position: relative;
+.detail-textarea-wrap {
+  position: relative;
+  background: #f7f7f7;
+  border-radius: 16rpx;
+  padding: 24rpx 24rpx 52rpx;
+  box-sizing: border-box;
 }
-
-.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;
+.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;
 }
-
-.placeholder {
-	font-weight: 400;
-	font-size: 28rpx;
-	color: #999999;
-}
-
-.char-count {
-	position: absolute;
-	right: 16rpx;
-	bottom: 16rpx;
-	font-size: 24rpx;
-	color: #999999;
+.detail-count {
+  position: absolute;
+  right: 24rpx;
+  bottom: 16rpx;
+  font-size: 22rpx;
+  color: #999999;
+  line-height: 32rpx;
 }
 </style>
diff --git a/components/dynamic-form/FormItemVideo.vue b/components/dynamic-form/FormItemVideo.vue
index 31bca3f..7165281 100644
--- a/components/dynamic-form/FormItemVideo.vue
+++ b/components/dynamic-form/FormItemVideo.vue
@@ -1,52 +1,51 @@
 <template>
   <view class="form-video">
     <view v-if="videoUrl" class="video-preview">
-      <video :src="videoUrl" class="video-player" controls />
+      <video :src="videoUrl" class="preview-video" 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 v-else class="upload-btn" @click="chooseVideo">
+      <text class="plus-icon">+</text>
     </view>
   </view>
 </template>
 
 <script>
 export default {
-  name: "FormItemVideo",
+  name: 'FormItemVideo',
   props: {
-    value: { type: String, default: "" }
+    value: { type: String, default: '' }
   },
-  data: function() {
+  data: function () {
     return {
-      videoUrl: ""
+      videoUrl: ''
     };
   },
   watch: {
     value: {
-      handler: function(val) {
-        this.videoUrl = val || "";
+      handler: function (val) {
+        this.videoUrl = val || '';
       },
       immediate: true
     }
   },
   methods: {
-    chooseVideo: function() {
+    chooseVideo: function () {
       var self = this;
       uni.chooseVideo({
-        sourceType: ["album", "camera"],
+        sourceType: ['album', 'camera'],
         maxDuration: 60,
-        success: function(res) {
+        success: function (res) {
           self.videoUrl = res.tempFilePath;
-          self.$emit("input", self.videoUrl);
+          self.$emit('input', self.videoUrl);
         }
       });
     },
-    deleteVideo: function() {
-      this.videoUrl = "";
-      this.$emit("input", "");
+    deleteVideo: function () {
+      this.videoUrl = '';
+      this.$emit('input', '');
     }
   }
 };
@@ -56,49 +55,50 @@ export default {
 .form-video {
   width: 100%;
 }
+
 .video-preview {
-  width: 100%;
+  width: 200rpx;
+  height: 200rpx;
   position: relative;
 }
-.video-player {
-  width: 100%;
-  height: 400rpx;
+
+.preview-video {
+  width: 200rpx;
+  height: 200rpx;
   border-radius: 8rpx;
 }
+
 .delete-btn {
   position: absolute;
-  top: 16rpx;
-  right: 16rpx;
-  width: 48rpx;
-  height: 48rpx;
-  background-color: rgba(0, 0, 0, 0.6);
+  top: -20rpx;
+  right: -20rpx;
+  width: 40rpx;
+  height: 40rpx;
+  background-color: rgba(0, 0, 0, 0.5);
   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;
+
+.upload-btn {
+  width: 200rpx;
+  height: 200rpx;
+  background-color: #ffffff;
+  border: 2rpx dashed #dddddd;
   border-radius: 8rpx;
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
+  align-items: center;
 }
-.add-icon {
+
+.plus-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
index e5a564c..54a391f 100644
--- a/components/dynamic-form/dynamic-form.vue
+++ b/components/dynamic-form/dynamic-form.vue
@@ -1,42 +1,91 @@
 <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>
+  <view class="dynamic-form">
+    <view v-for="(field, index) in fields" :key="field.key" class="form-section">
+      <!-- 单行文本 -->
+      <view v-if="field.type === 'text'" class="form-item">
+        <text :class="['form-label', field.is_required === true ? 'required' : '']">{{ field.label }}</text>
+        <input type="text" :value="formData[field.key]" :placeholder="field.placeholder" placeholder-class="placeholder"
+          class="form-input" @input="onInput(field.key, $event)" />
+      </view>
+
+      <!-- 多行文本 -->
+      <view v-else-if="field.type === 'textarea'" class="detail-card">
+        <view class="detail-row">
+          <text :class="['form-label', field.is_required === true ? 'required' : '']">{{ field.label }}</text>
+          <view class="detail-textarea-wrap">
+            <textarea class="detail-textarea" :value="formData[field.key]" :placeholder="field.placeholder"
+              placeholder-class="placeholder" maxlength="200" @input="onInput(field.key, $event)" />
+            <text class="detail-count">{{ (formData[field.key] || '').length }}/200</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 数字输入 -->
+      <view v-else-if="field.type === 'number'" class="form-item" :style="field.tip ? 'flex-wrap: wrap;' : ''">
+        <text :class="['form-label', field.is_required === true ? 'required' : '']">{{ field.label }}</text>
+        <input type="digit" :value="formData[field.key]" :placeholder="field.placeholder"
+          placeholder-class="placeholder" class="form-input" @input="onInput(field.key, $event)" />
+        <text v-if="field.tips && !field.tip" class="form-tips">{{ field.tips }}</text>
+        <view v-if="field.tip" class="price-tip">
+          <text class="price-tip-card">{{ field.tip }}</text>
+        </view>
+      </view>
+
+      <!-- 多图上传 -->
+      <view v-else-if="field.type === 'image_multi'" class="form-item-up upload-item">
+        <view>
+          <text :class="['form-label', field.is_required === true ? 'required' : '']">{{ field.label }}</text>
+          <text class="upload-tip">(仅可上传{{ field.maxCount || 9 }}个图片)</text>
+        </view>
+        <view class="upload-content">
+          <form-item-image :value="formData[field.key]" :maxCount="field.maxCount || 9"
+            @input="onInput(field.key, $event)" />
+        </view>
+      </view>
+
+      <!-- 视频上传 -->
+      <view v-else-if="field.type === 'video'" class="form-item-up upload-item">
+        <view>
+          <text :class="['form-label', field.is_required === true ? 'required' : '']">{{ field.label }}</text>
+          <text class="upload-tip">(仅可上传1个视频)</text>
+        </view>
+        <view class="upload-content">
+          <form-item-video :value="formData[field.key]" @input="onInput(field.key, $event)" />
+        </view>
+      </view>
+
+      <!-- 下拉选择 -->
+      <view v-else-if="field.type === 'select'" class="form-item">
+        <text :class="['form-label', field.is_required === true ? 'required' : '']">{{ field.label }}</text>
+        <form-item-select :value="formData[field.key]" :options="field.options || []" :placeholder="field.placeholder"
+          @input="onInput(field.key, $event)" />
+      </view>
+
+      <!-- 单选 -->
+      <view v-else-if="field.type === 'single_select'" class="form-item" style="flex-wrap: wrap;">
+        <text :class="['form-label', field.is_required === true ? 'required' : '']">{{ field.label }}</text>
+        <view class="select-options">
+          <form-item-radio :value="formData[field.key]" :options="field.options || []"
+            @input="onInput(field.key, $event)" />
+        </view>
+      </view>
+
+      <!-- 多选 -->
+      <view v-else-if="field.type === 'multi_select'" class="form-item" style="flex-wrap: wrap;">
+        <text :class="['form-label', field.is_required === true ? 'required' : '']">{{ field.label }}</text>
+        <view class="select-options">
+          <form-item-checkbox :value="formData[field.key]" :options="field.options || []"
+            :maxCount="field.maxCount || 0" @input="onInput(field.key, $event)" />
+        </view>
+      </view>
+
+      <!-- 图文编辑器 -->
+      <view v-else-if="field.type === 'richtext_editor'" class="form-item">
+        <text :class="['form-label', field.is_required === true ? 'required' : '']">{{ field.label }}</text>
+        <form-item-richtext :value="formData[field.key]" @input="onInput(field.key, $event)" />
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
@@ -51,147 +100,225 @@ 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);
-		}
-	}
+  name: 'DynamicForm',
+  components: {
+    'form-item-text': FormItemText,
+    'form-item-textarea': FormItemTextarea,
+    'form-item-number': FormItemNumber,
+    'form-item-image': FormItemImage,
+    'form-item-video': FormItemVideo,
+    'form-item-select': FormItemSelect,
+    'form-item-radio': FormItemRadio,
+    'form-item-checkbox': FormItemCheckbox,
+    'form-item-richtext': 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
+    },
+    fields: {
+      handler: function () {
+        var self = this;
+        var data = {};
+        this.fields.forEach(function (field) {
+          if (self.formData[field.key] !== undefined) {
+            data[field.key] = self.formData[field.key];
+          } else if (field.default_value !== undefined) {
+            data[field.key] = field.default_value;
+          } else if (field.type === 'multi_select' || field.type === 'image_multi') {
+            data[field.key] = [];
+          } else {
+            data[field.key] = '';
+          }
+        });
+        this.formData = Object.assign({}, this.formData, data);
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    onInput: function (key, event) {
+      var value = event;
+      if (event && event.target && event.target.value !== undefined) {
+        value = event.target.value;
+      }
+      this.$set(this.formData, key, value);
+      this.$emit('input', this.formData);
+    },
+    getData: function () {
+      return Object.assign({}, this.formData);
+    },
+    validate: function () {
+      var self = this;
+      for (var i = 0; i < this.fields.length; i++) {
+        var field = this.fields[i];
+        if (field.is_required === true) {
+          var value = self.formData[field.key];
+          if (!value || (Array.isArray(value) && value.length === 0)) {
+            uni.showToast({
+              title: field.label + '不能为空',
+              icon: 'none'
+            });
+            return false;
+          }
+        }
+      }
+      return true;
+    }
+  }
 };
 </script>
 
 <style scoped>
 .dynamic-form {
-	width: 100%;
+  width: 100%;
+}
+
+.form-section {
+  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;
+  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-label {
-	font-size: 28rpx;
-	color: #333333;
+  font-size: 28rpx;
+  color: #333333;
 }
 
-.form-label.required::before {
-	content: '*';
-	color: #e8101e;
-	margin-right: 4rpx;
+.required::before {
+  content: '*';
+  color: #ff0000;
+  margin-right: 4rpx;
 }
 
 .form-tips {
-	font-size: 24rpx;
-	color: #999999;
-	margin-left: 10rpx;
+  font-size: 24rpx;
+  color: #999999;
+  margin-left: 10rpx;
 }
 
-.form-control {
-	width: 100%;
-	flex: 1;
+.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: #E8101E;
+  line-height: 32rpx;
+}
+
+.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;
+}
+
+.upload-item {
+  padding-bottom: 30rpx;
+}
+
+.upload-tip {
+  font-size: 24rpx;
+  color: #999999;
+  margin-left: 10rpx;
+}
+
+.upload-content {
+  margin-top: 20rpx;
+  width: 100%;
+}
+
+.select-options {
+  width: 100%;
+  margin-top: 16rpx;
+}
+
+.detail-card {
+  background: #ffffff;
+  border-radius: 20rpx;
+  padding: 0 24rpx 8rpx;
+  margin-bottom: 24rpx;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.detail-row {
+  padding: 24rpx 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;
 }
 </style>
diff --git a/pages/artisan/service-list.vue b/pages/artisan/service-list.vue
index 9ae8a75..f622790 100644
--- a/pages/artisan/service-list.vue
+++ b/pages/artisan/service-list.vue
@@ -99,13 +99,12 @@
 			</view>
 
 		</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>
+					<text class="category-popup-title">选择服务类型</text>
 					<view class="category-popup-close" @click="closeCategoryPopup">
 						<text class="category-popup-close-icon">&times;</text>
 					</view>
@@ -124,10 +123,16 @@
 						<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"
+						<view v-for="item in secondClassList" :key="item.id"
+							:class="['category-right-item', { selected: selectedSecondId === item.id }]"
 							@click="selectSecondClass(item)">
 							<text class="category-right-text">{{ item.title }}</text>
-							<view :class="['category-dot', { selected: selectedSecondId === item.id }]"></view>
+							<image class="category-icon"
+								src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b6fa6b5b-b5c1-45e3-9372-74ade548f76b.png"
+								mode="widthFix" v-if="!selectedSecondId || selectedSecondId !== item.id"></image>
+							<image class="category-icon"
+								src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/f0f97cad-03f6-4363-abb5-58d3176cfa81.png"
+								mode="widthFix" v-else></image>
 						</view>
 					</scroll-view>
 				</view>
@@ -187,31 +192,6 @@ export default {
 			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();
 	},
@@ -256,7 +236,7 @@ export default {
 										title: "下架成功",
 										icon: "none",
 									});
-									this.getServicesList(0); // 刷新列表
+									this.getServicesList(0);
 								} else {
 									uni.showToast({
 										title: res.msg,
@@ -280,7 +260,7 @@ export default {
 							title: "上架成功",
 							icon: "none",
 						});
-						this.getServicesList(0); // 刷新列表
+						this.getServicesList(0);
 					} else {
 						uni.showToast({
 							title: res.msg,
@@ -296,7 +276,6 @@ export default {
 
 		},
 		addService() {
-			// 获取一级分类并显示弹窗
 			request.post("/sj/firstclass", {}).then((res) => {
 				if (res.data && res.data.length > 0) {
 					this.firstClassList = res.data;
@@ -304,7 +283,6 @@ export default {
 					this.selectedSecondId = null;
 					this.secondClassList = [];
 					this.showCategoryPopup = true;
-					// 自动加载第一个一级分类的二级分类
 					this.loadSecondClass(res.data[0].id);
 				} else {
 					uni.showToast({
@@ -314,7 +292,6 @@ export default {
 				}
 			});
 		},
-		// 加载二级分类
 		loadSecondClass(firstId) {
 			request.post("/user/secondclass", {
 				id: firstId,
@@ -322,18 +299,15 @@ export default {
 				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({
@@ -342,7 +316,6 @@ export default {
 				});
 				return;
 			}
-			// 如果有二级分类但未选择
 			if (this.secondClassList.length > 0 && !this.selectedSecondId) {
 				uni.showToast({
 					title: "请选择服务子类",
@@ -355,7 +328,6 @@ export default {
 			uni.navigateTo({ url });
 			this.closeCategoryPopup();
 		},
-		// 关闭分类弹窗
 		closeCategoryPopup() {
 			this.showCategoryPopup = false;
 			this.firstClassList = [];
@@ -377,7 +349,7 @@ export default {
 									title: "删除成功",
 									icon: "none",
 								});
-								this.getServicesList(0); // 刷新列表
+								this.getServicesList(0);
 							} else {
 								uni.showToast({
 									title: res.msg,
@@ -391,11 +363,8 @@ export default {
 		},
 		touchStart(e, index) {
 			if (this.currentTab != 3) return;
-			// 阻止默认事件和冒泡
 			e.preventDefault();
 			e.stopPropagation();
-
-			// 获取触摸事件的坐标
 			if (e.touches && e.touches[0]) {
 				this.startX = e.touches[0].clientX;
 				this.currentIndex = index;
@@ -404,87 +373,60 @@ export default {
 		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);
 			} 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;
@@ -578,7 +520,7 @@ export default {
 	transform: translateX(-50%);
 	width: 32rpx;
 	height: 6rpx;
-	background-color: #E8101E;
+	background-color: #FF4767;
 	border-radius: 3rpx;
 }
 
@@ -623,7 +565,7 @@ export default {
 	top: 0;
 	width: 160rpx;
 	height: 100%;
-	background-color: #E8101E;
+	background-color: #FF4767;
 	color: #ffffff;
 	display: flex;
 	justify-content: center;
@@ -669,20 +611,20 @@ export default {
 
 .price-symbol {
 	font-size: 24rpx;
-	color: #E8101E;
+	color: #FF4767;
 	font-weight: 500;
 }
 
 .price-value {
 	font-size: 28rpx;
-	color: #E8101E;
+	color: #FF4767;
 	font-weight: 500;
 	margin: 0 4rpx;
 }
 
 .price-unit {
 	font-size: 24rpx;
-	color: #E8101E;
+	color: #FF4767;
 }
 
 .status-tag {
@@ -700,11 +642,11 @@ export default {
 
 /* 已上架 */
 .status-tag.state2 {
-	background-color: rgba(232, 16, 30, 0.2);
+	background-color: rgba(255, 71, 103, 0.2);
 }
 
 .status-tag.state2 .status-text {
-	color: #E8101E;
+	color: #FF4767;
 }
 
 /* 审核中 */
@@ -720,13 +662,13 @@ export default {
 .status-tag.state0,
 .status-tag.state3,
 .status-tag.state4 {
-	background-color: rgba(209, 15, 19, 0.2);
+	background-color: rgba(255, 71, 103, 0.2);
 }
 
 .status-tag.state0 .status-text,
 .status-tag.state3 .status-text,
 .status-tag.state4 .status-text {
-	color: #d10f13;
+	color: #FF4767;
 }
 
 .btns {
@@ -816,7 +758,6 @@ export default {
 
 /* #ifdef MP-WEIXIN */
 .search-box input {
-	/* 小程序搜索框样式调整 */
 	box-sizing: border-box;
 }
 
@@ -825,7 +766,6 @@ export default {
 }
 
 .service-item {
-	/* 小程序阴影效果 */
 	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
 }
 
@@ -846,17 +786,15 @@ export default {
 		height: 88rpx;
 		text-align: center;
 		line-height: 88rpx;
-		background-color: #E8101E;
+		background-color: #FF4767;
 		border-radius: 16px;
 
 		.serviceBtn-text {
-
 			font-size: 14px;
 			font-weight: 500;
 			color: #ffffff;
 		}
 	}
-
 }
 
 /* 分类选择弹窗样式 */
@@ -881,175 +819,160 @@ export default {
 	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-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 32rpx;
+		position: relative;
+		border-bottom: 1rpx solid #f0f0f0;
+	}
 
-.category-popup-title {
-	font-size: 34rpx;
-	font-weight: 600;
-	color: #333333;
-}
+	.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 {
+		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-close-icon {
+		font-size: 48rpx;
+		color: #999999;
+		line-height: 1;
+	}
 
-.category-popup-body {
-	flex: 1;
-	display: flex;
-	overflow: hidden;
-}
+	.category-popup-body {
+		flex: 1;
+		display: flex;
+		overflow: hidden;
+	}
 
-.category-left {
-	width: 220rpx;
-	background-color: #f5f5f5;
-	height: 100%;
-}
+	.category-left {
+		width: 220rpx;
+		background-color: #f5f5f5;
+		height: 100%;
+	}
 
-.category-left-item {
-	padding: 30rpx 24rpx;
-	text-align: center;
-	position: relative;
-}
+	.category-left-item {
+		padding: 30rpx 24rpx;
+		text-align: center;
+		position: relative;
+	}
 
-.category-left-item.active {
-	background-color: #ffffff;
-}
+	.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-item.active::before {
+		content: "";
+		position: absolute;
+		left: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 6rpx;
+		height: 40rpx;
+		background-color: #FF4767;
+		border-radius: 0 3rpx 3rpx 0;
+	}
 
-.category-left-text {
-	font-size: 28rpx;
-	color: #333333;
-}
+	.category-left-text {
+		font-size: 28rpx;
+		color: #333333;
+	}
 
-.category-left-item.active .category-left-text {
-	color: #E8101E;
-	font-weight: 500;
-}
+	.category-left-item.active .category-left-text {
+		color: #FF4767;
+		font-weight: 500;
+	}
 
-.category-right {
-	flex: 1;
-	background-color: #ffffff;
-	height: 100%;
-}
+	.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-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-right-item.selected .category-right-text {
+		color: #FF4767;
+		font-weight: 500;
+	}
 
-.category-dot {
-	width: 36rpx;
-	height: 36rpx;
-	border-radius: 50%;
-	border: 2rpx solid #dddddd;
-	margin-left: 16rpx;
-	position: relative;
-}
+	.category-right-text {
+		font-size: 28rpx;
+		color: #333333;
+		flex: 1;
+	}
 
-.category-dot.selected {
-	border-color: #E8101E;
-	background-color: #E8101E;
-}
+	.category-icon {
+		width: 36rpx;
+		height: 36rpx;
+		margin-left: 16rpx;
+	}
 
-.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 {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 100rpx 0;
-}
+	.category-empty-text {
+		font-size: 28rpx;
+		color: #999999;
+	}
 
-.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-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 {
-	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 {
-	background-color: #f5f5f5;
-	margin-right: 24rpx;
-}
+	.category-popup-btn-cancel text {
+		color: #666666;
+	}
 
-.category-popup-btn-cancel text {
-	color: #666666;
-}
+	.category-popup-btn-confirm {
+		background-color: #FF4767;
+	}
 
-.category-popup-btn-confirm {
-	background-color: #E8101E;
-}
-
-.category-popup-btn-confirm text {
-	color: #ffffff;
+	.category-popup-btn-confirm text {
+		color: #ffffff;
+	}
 }
 </style>
\ No newline at end of file
diff --git a/pages/shop/add-service copy.vue b/pages/shop/add-service copy.vue
new file mode 100644
index 0000000..74b3a03
--- /dev/null
+++ b/pages/shop/add-service copy.vue	
@@ -0,0 +1,1504 @@
+<template>
+	<view class="add-service">
+		<view class="fixed-header">
+			<view class="tip" v-if="formData.back_text && formData.state == 4">
+				<image
+					src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/390d9d12-3c30-4639-9ac3-7b604b606b6d.png"
+					class="tip-icon"></image>
+				<text>{{ formData.back_text }}</text>
+			</view>
+		</view>
+
+		<!-- 表单区域 -->
+		<view class="form-container">
+			<!-- 服务名称 -->
+			<view class="form-item">
+				<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>
+		</view>
+
+		<!-- 底部按钮 -->
+		<view class="bottom-buttons">
+			<button class="btn-draft" @click="saveDraft" v-if="!state || state == 0">
+				存草稿
+			</button>
+			<button class="btn-submit" @click="submitForm">提交</button>
+		</view>
+
+		<!-- 服务类型选择器 -->
+		<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>
+			<view class="per-cont">便于您使用该功能上传您的照片/图片/视频以及用于更换头像、发布商品等场景中读取相册和文件内容。</view>
+		</view>
+		<view class="permission" :class="{ transform: isShowPer && nowQer === 'xj' }">
+			<view class="per-tit">美融融plus 对相机拍摄权限申请说明</view>
+			<view class="per-cont">便于您使用该功能上传您的照片/图片/视频以及用于更换头像、发布商品等场景中所需内容。</view>
+		</view>
+
+		<!-- 新增上门提醒弹窗-->
+		<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";
+
+	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,
+				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.id) {
+				this.formData.id = options.id;
+				this.getInit();
+			} else {
+				request.post("/sj/firstclass", {}).then((res) => {
+					this.serviceTypes = this.serviceTypes.concat(res.data);
+				});
+			}
+			// 判断是否显示上门提醒弹窗
+			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
+				);
+			},
+		},
+		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);
+				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() {
+				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;
+				});
+
+				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;
+			},
+		},
+	};
+</script>
+
+<style lang="less">
+	.add-service {
+		padding: 24rpx 24rpx 0;
+		box-sizing: border-box;
+	}
+
+	.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;
+	}
+
+	.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 {
+		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;
+	}
+
+	.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);
+		}
+	}
+
+	/* 淡入淡出动画 */
+	.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;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/shop/add-service.vue b/pages/shop/add-service.vue
index 58feffd..1458dd4 100644
--- a/pages/shop/add-service.vue
+++ b/pages/shop/add-service.vue
@@ -151,20 +151,20 @@ export default {
 		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' }] },
+				{ key: 'title', type: 'text', label: '服务名称', is_required: true, placeholder: '请输入服务名称' },
+				{ key: 'service_price', type: 'number', label: '服务定价', is_required: true, placeholder: '请输入定价，最多两位小数', tips: '(元)', tip: '服务的基础定价，未参与任何优惠的价格' },
+				{ key: 'sale_price', type: 'number', label: '服务售价', is_required: true, placeholder: '请输入售价，最多两位小数', tips: '(元)', tip: '服务参与单品优惠后的价格' },
+				{ key: 'service_time', type: 'number', label: '服务时长', is_required: true, placeholder: '请输入服务时间', tips: '(分钟)' },
+				{ key: 'effect', type: 'textarea', label: '服务功效', is_required: true, placeholder: '请输入服务功效' },
+				{ key: 'crowd', type: 'textarea', label: '适用人群', is_required: true, placeholder: '请输入不适用人群，例如：未成年人/孕妇不适用' },
+				{ key: 'product', type: 'textarea', label: '产品清单', is_required: false, placeholder: '请输入产品清单' },
+				{ key: 'scope', type: 'textarea', label: '适用范围', is_required: false, placeholder: '请输入使用时间/适用人数' },
+				{ key: 'tips_text', type: 'textarea', label: '温馨提示', is_required: false, placeholder: '请输入其他注意事项' },
+				{ key: 'images', type: 'image_multi', label: '服务图片', is_required: true, maxCount: 9 },
+				{ key: 'video', type: 'video', label: '上传短视频', is_required: false },
+				{ key: 'service_type', type: 'single_select', label: '服务类型', is_required: true, options: ['到店服务', '上门服务'] },
+				{ key: 'features', type: 'multi_select', label: '服务特色', is_required: false, options: ['一对一服务', '免费咨询', '售后保障'], maxCount: 2 },
+				{ key: 'graphic_details', type: 'richtext_editor', label: '图文详情', is_required: false },
 			];
 			try {
 				const res = await request.post("/sj/servers/getTemplate", {