From 7e107a4ea4cdf39b8c57f3c9885786d83995f6b7 Mon Sep 17 00:00:00 2001
From: BAKEYi <16298417+bakeyi@user.noreply.gitee.com>
Date: Wed, 25 Mar 2026 15:41:25 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=AE=B6=E7=AB=AF=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=9C=8D=E5=8A=A1=20=E6=9C=8D=E5=8A=A1=E7=AE=80=E4=BB=8B?=
 =?UTF-8?q?=E6=96=B0=E9=9C=80=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/shop/add-service.vue | 2484 ++++++++++++++++++++----------------
 1 file changed, 1389 insertions(+), 1095 deletions(-)

diff --git a/pages/shop/add-service.vue b/pages/shop/add-service.vue
index 88274b6..228b6c7 100644
--- a/pages/shop/add-service.vue
+++ b/pages/shop/add-service.vue
@@ -1,80 +1,123 @@
 <template>
-	<view class="add-service">
-		<view class="tip" v-if="formData.back_text && formData.state==4">
-			<image src="/static/images/shop/pintuan/warn.png" class="tip-icon">
-			</image>
+  <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>
 
-			<text>{{ formData.back_text }}</text>
-		</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-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">
-				<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>
+      <!-- 服务价格 -->
+      <view class="form-item">
+        <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>
 
-			<!-- 服务分类 -->
-			<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="/static/images/arrow_right.png" class="arrow-right" mode="aspectFit"></image>
-				</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="/static/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 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">
+        <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">
+      <!-- 服务简介 -->
+      <!-- <view class="form-item textarea-item">
         <text class="form-label">服务简介</text>
         <textarea 
           v-model="formData.detail"
@@ -84,48 +127,117 @@
 		  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="form-step">
-				<view class="form-item">
-					<text class="form-label required">服务简介</text>
-					<view class="form-detail">
-						<text @click="showDetailCont">添加</text>
-						<scroll-view class="detail-cont" scroll-y="true" v-if="isShow">
-							<view class="detail-item" v-for="(item,i) in nowDetailList" @click="addDetailItem(item)">
-								{{item.detailItem}}</view>
-						</scroll-view>
-					</view>
-				</view>
-				<view class="step" v-for="(item,i) in formData.detail">
-					<text class="form-label lable-view">{{item.title}}</text>
-					<textarea class="step-textarea" v-model="formData.detail[i].text" />
-					<image src="/static/images/delete_icon.png" class="delete-icon" mode="aspectFit"
-						@click="deleteDetailItem(item,i)"></image>
-				</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="/static/images/delete_icon.png" class="delete-icon" mode="aspectFit"
-						@click="deleteStep(i)"></image>
-				</view>
-			</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="form-item textarea-item">
+      <!-- 服务简介 -->
+      <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 required">产品清单</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"
@@ -135,7 +247,7 @@
 		  maxlength="-1"
         />
       </view> -->
-			<!-- <circle-progress 
+      <!-- <circle-progress 
 	       :progress="progress"
 	       :size="300"
 	       :strokeWidth="15"
@@ -143,1088 +255,1270 @@
 	       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
+      <!-- 上传短视频 -->
+      <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>
+        <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
+      <!-- 服务图片 -->
+      <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>
+        <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>
+    <!-- 底部按钮 -->
+    <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" />
+    <!-- 服务类型选择器 -->
+    <popup-picker
+      :show="showServiceTypePicker"
+      title="选择服务类型"
+      :columns="[serviceTypes]"
+      :value="[selectedServiceTypeIndex]"
+      @close="showServiceTypePicker = false"
+      @confirm="handleServiceTypeConfirm"
+    />
 
-		<!-- 服务分类选择器 -->
-		<popup-picker :show="showCategoryPicker" title="选择服务分类" :columns="[categoryAll]"
-			:value="[selectedCategoryIndex]" @close="showCategoryPicker = false" @confirm="handleCategoryConfirm" />
-		<view class="mask" v-if="isShow" @click="isShow = false"></view>
+    <!-- 服务分类选择器 -->
+    <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>
-	</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 CircleProgress from '@/components/circle-progress/circle-progress.vue'
-	import sparkMD5 from 'spark-md5'; // 引入MD5计算库
-	import {
-		debounce
-	} from '@/utils/debounce.js'
-	import AliOssUploader from '../../components/ali-oss-uploader/ali-oss-uploader.vue';
-	import permissionUtils from '../../utils/per'
-	import locationService from '../../utils/locationService';
-	import _public from '../../utils/public';
+import request from "../../utils/request";
+import 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
-		},
-		data() {
-			return {
-				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: '',
-					server_time: '',
-					first_class_id: '',
-					second_class_id: '',
-					detail: [],
-					process: [],
-					video: '',
-					photo: [],
-					graphic_details: "",
-					sj_see: null // 1代表商家端不可见  2代表商家端可见
-				},
-				ratio: null,
-				detailList: [{
-					id: 0,
-					detailItem: '服务功效',
-					choose: false
-				}, {
-					id: 1,
-					detailItem: '温馨提示',
-					choose: false
-				}, {
-					id: 2,
-					detailItem: '备注',
-					choose: false
-				}, {
-					id: 3,
-					detailItem: '适用人群',
-					choose: false
-				}, {
-					id: 4,
-					detailItem: '使用范围',
-					choose: false
-				}, {
-					id: 5,
-					detailItem: '注意事项',
-					choose: false
-				}, {
-					id: 6,
-					detailItem: '场地要求',
-					choose: false
-				}, {
-					id: 7,
-					detailItem: '产品清单',
-					choose: false
-				}],
-				nowDetailList: [{
-					id: 0,
-					detailItem: '服务功效',
-					choose: false
-				}, {
-					id: 1,
-					detailItem: '温馨提示',
-					choose: false
-				}, {
-					id: 2,
-					detailItem: '备注',
-					choose: false
-				}, {
-					id: 3,
-					detailItem: '适用人群',
-					choose: false
-				}, {
-					id: 4,
-					detailItem: '使用范围',
-					choose: false
-				}, {
-					id: 5,
-					detailItem: '注意事项',
-					choose: false
-				}, {
-					id: 6,
-					detailItem: '场地要求',
-					choose: false
-				}, {
-					id: 7,
-					detailItem: '产品清单',
-					choose: false
-				}],
-				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 || '';
-			console.log(222, options)
-			if (options.id) {
-				this.formData.id = options.id;
-				this.getInit();
-			} else {
-				request.post('/sj/firstclass', {
-					id: this.$store.state.sjInfo.id
-				}).then((res) => {
-					this.serviceTypes = this.serviceTypes.concat(res.data);
-				})
-			}
-			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: {
-			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', {
-					id: this.$store.state.sjInfo.id
-				});
-				this.serviceTypes = this.serviceTypes.concat(firstclass.data);
+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: "",
+        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: [],
 
-				await request.post('/user/serverdetail', {
-					id: this.formData.id
-				}).then(res => {
-					this.formData.state = res.data.state;
-					this.formData.back_text = res.data.back_text;
-					this.formData.title = res.data.title;
-					this.formData.server_price = res.data.server_price;
-					this.formData.server_time = res.data.server_time;
-					this.formData.first_class_id = res.data.first_class_id;
-					this.formData.second_class_id = res.data.second_class_id;
-					this.formData.detail = res.data.detail;
-					this.formData.process = res.data.process;
-					this.formData.video = res.data.video;
-					this.formData.photo = res.data.photo;
-					this.formData.sj_see = res.data.sj_see;
-					this.formData.graphic_details = res.data.graphic_details || "";
-					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;
+      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: {
+    // 服务简介部分
+    initDetailForm(detail = []) {
+      // 先重置 detailForm 为空
+      this.detailForm = {
+        effect: "",
+        crowd: "",
+        product: "",
+        scope: "",
+        tips: "",
+      };
+      this.detailOtherList = [];
 
-				// 1. 移除非数字和小数点
-				value = value.replace(/[^\d.]/g, '');
+      // 优先从后端返回的新字段赋值
+      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;
 
-				// 2. 确保只有一个小数点
-				const parts = value.split('.');
-				if (parts.length > 2) {
-					value = parts[0] + '.' + parts.slice(1).join('');
-				}
+      // 如果新字段都为空，则尝试从旧的 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 || "",
+            });
+          }
+        });
+      }
+    },
 
-				// 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);
-			},
-			addDetailItem(item) {
-				let detailItem = {
-					title: item.detailItem,
-					text: '',
-					photo: ''
-				}
-				const targetItem = this.detailList.find(detail => detail.id == item.id);
-				if (targetItem) {
-					targetItem.choose = true;
-				}
-				this.formData.detail.push(detailItem)
-				this.isShow = false;
-			},
-			deleteDetailItem(item, i) {
-				const targetItem = this.detailList.find(detail => detail.detailItem == item.title);
-				if (targetItem) {
-					targetItem.choose = false;
-				}
-				this.formData.detail.splice(i, 1)
-			},
-			deleteStep(i) {
-				this.formData.process.splice(i, 1)
-			},
-			showDetailCont() {
-				this.nowDetailList = this.detailList
-					.filter(item => !item.choose)
-				this.isShow = true;
-			},
-			addStep() {
-				let i = this.formData.process.length + 1;
-				let arr = {
-					title: '第' + i + '步',
-					text: '',
-					photo: ''
-				}
-				this.formData.process.push(arr)
-			},
+    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();
+    },
 
-			// 删除视频
-			deleteVideo() {
-				this.formData.video = ''
-			},
+    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;
+    },
 
-			// 保存草稿
-			saveDraft: debounce(function() {
-				if (this.isDraft) return;
-				const {
-					title,
-					server_price,
-					server_time,
-					first_class_id,
-					second_class_id,
-					detail,
-					process,
-					video,
-					photo
-				} = this.formData;
-				let item = {
-					title,
-					server_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;
-				}
+    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);
 
-				// 实现保存草稿逻辑
-				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),
+      await request
+      .post("/user/serverdetail", { 
+        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;
 
-			// 提交表单
-			submitForm: debounce(function() {
-				if (this.isAdd) return;
-				// 表单验证
+      // 1. 移除非数字和小数点
+      value = value.replace(/[^\d.]/g, "");
 
-				if (!this.formData.title) {
-					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.sj_see && this.artisanType == 1) {
-					uni.showToast({
-						title: '请选择是否允许在门店端售卖',
-						icon: 'none'
-					})
-					return
-				}
+      // 2. 确保只有一个小数点
+      const parts = value.split(".");
+      if (parts.length > 2) {
+        value = parts[0] + "." + parts.slice(1).join("");
+      }
 
-				// 检查服务简介数组
-				if (this.formData.detail && this.formData.detail.length > 0) {
-					for (let item of this.formData.detail) {
-						if (!item.title || !item.text) {
-							uni.showToast({
-								title: '请完善服务简介内容',
-								icon: 'none'
-							})
-							return
-						}
-					}
-				} else {
-					uni.showToast({
-						title: '请添加服务简介内容',
-						icon: 'none'
-					})
-					return
-				}
+      // 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);
+    },
 
-				// 检查服务流程数组
-				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
-				}
+    // 删除视频
+    deleteVideo() {
+      this.formData.video = "";
+    },
 
-				// 检查视频和图片
-				// 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'
-				}
-				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),
+    // 保存草稿
+    saveDraft: debounce(function () {
+      if (this.isDraft) return;
+      this.syncDetailForm();
+      const {
+        title,
+        server_price,
+        server_time,
+        first_class_id,
+        second_class_id,
+        detail,
+        process,
+        video,
+        photo,
+      } = this.formData;
+      let item = {
+        title,
+        server_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;
+      });
 
-			// 打开服务分类
-			openServiceTypePicker() {
-				console.log('open')
-				// 实现分类选择逻辑
-				this.showServiceTypePicker = true
-			},
+      if (isEmpty) {
+        uni.showToast({
+          title: "请至少填写一项内容",
+          icon: "none",
+        });
+        return;
+      }
 
-			// 打开服务子类选择器
-			openCategoryPicker() {
-				// 实现子类选择逻辑
-				if (!this.formData.first_class_id) {
-					uni.showToast({
-						title: '请先选择服务分类',
-						icon: 'none'
-					})
-				} else {
-					this.showCategoryPicker = true
-				}
-			},
+      // 实现保存草稿逻辑
+      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),
 
-			// 处理服务类型选择
-			handleServiceTypeConfirm(e) {
-				console.log('e', e)
-				const selectedType = e.items[0];
-				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;
-					} else {
-						this.categoryAll = res.data;
-						this.showCategory = true;
-					}
-				})
-			},
+    // 提交表单
+    submitForm: debounce(function () {
+      if (this.isAdd) return;
+      this.syncDetailForm();
+      // 表单验证
 
-			// 处理服务分类选择
-			handleCategoryConfirm(e) {
-				const selectedCategory = e.items[0];
-				this.formData.second_class_id = selectedCategory.id;
-				this.category = selectedCategory.title;
-			}
-		}
-	}
+      if (!this.formData.title) {
+        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";
+      }
+      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;
-	}
+.add-service {
+  padding: 24rpx 24rpx 0;
+  box-sizing: border-box;
+}
 
-	.form-container {
-		margin-top: 20rpx;
-	}
+.form-container {
+  margin-top: 20rpx;
+}
 
-	.form-item {
-		background-color: #fff;
-		padding: 24rpx;
-		display: flex;
-		flex-flow: row nowrap;
-		justify-content: space-between;
-		align-items: center;
-		box-sizing: border-box;
-		border-radius: 10rpx;
-		margin-bottom: 24rpx;
-	}
+.form-item {
+  background-color: #fff;
+  padding: 24rpx;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  border-radius: 10rpx;
+  margin-bottom: 24rpx;
+}
 
-	.shopsale-box {
-		flex-flow: column;
-		justify-content: space-between;
-		align-items: space-between;
-	}
+.shopsale-box {
+  flex-flow: column;
+  justify-content: space-between;
+  align-items: space-between;
+}
 
-	.shopsale-change {
-		display: flex;
-		flex-flow: row nowrap;
-		justify-content: space-between;
-		align-items: center;
-		margin-top: 24rpx;
-	}
+.shopsale-change {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 24rpx;
+}
 
-	.shopsale-option {
-		display: flex;
-		flex-flow: row nowrap;
-		justify-content: center;
-		align-items: center;
-	}
+.shopsale-option {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+}
 
-	.shopsale-option:last-child {
-		margin-left: 220rpx;
-	}
+.shopsale-option:last-child {
+  margin-left: 220rpx;
+}
 
-	.option-text {
-		padding-left: 16rpx;
-	}
+.option-text {
+  padding-left: 16rpx;
+}
 
-	.form-item-up {
-		background-color: #fff;
-		padding: 24rpx;
-		display: flex;
-		flex-flow: column nowrap;
-		justify-content: space-between;
-		align-items: flex-start;
-		box-sizing: border-box;
-		border-radius: 10rpx;
-		margin-bottom: 24rpx;
-	}
+.form-item-up {
+  background-color: #fff;
+  padding: 24rpx;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  box-sizing: border-box;
+  border-radius: 10rpx;
+  margin-bottom: 24rpx;
+}
 
-	.form-label {
-		font-size: 28rpx;
-		color: #333333;
-	}
+.form-label {
+  font-size: 28rpx;
+  color: #333333;
+}
 
-	.form-input {
-		flex: 1;
-		height: 40rpx;
-		font-size: 28rpx;
-		color: #333333;
-		margin-left: 32rpx;
-	}
+.form-input {
+  flex: 1;
+  height: 40rpx;
+  font-size: 28rpx;
+  color: #333333;
+  align-items: center;
+  text-align: center;
+}
 
-	.form-right {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
+.form-right {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 
-	.form-value {
-		font-size: 28rpx;
-		color: #333333;
-		margin-right: 16rpx;
-	}
+.form-value {
+  font-size: 28rpx;
+  color: #333333;
+  margin-right: 16rpx;
+}
 
-	.placeholder {
-		color: #999999;
-	}
+.placeholder {
+  font-weight: 400;
+  font-size: 28rpx;
+  color: #999999;
+}
 
-	.textarea-item {
-		padding-bottom: 30rpx;
-	}
+.textarea-item {
+  padding-bottom: 30rpx;
+}
 
-	.form-textarea {
-		flex: 1;
-		height: 198rpx;
-		font-size: 28rpx;
-		color: #333333;
-		line-height: 1.5;
-		margin-left: 32rpx;
-	}
+.form-textarea {
+  flex: 1;
+  height: 198rpx;
+  font-size: 28rpx;
+  color: #333333;
+  line-height: 1.5;
+  margin-left: 32rpx;
+}
 
-	.upload-item {
-		padding-bottom: 30rpx;
-	}
+.upload-item {
+  padding-bottom: 30rpx;
+}
 
-	.upload-tip {
-		font-size: 24rpx;
-		color: #999999;
-		margin-left: 10rpx;
-	}
+.upload-tip {
+  font-size: 24rpx;
+  color: #999999;
+  margin-left: 10rpx;
+}
 
-	.upload-content {
-		margin-top: 20rpx;
-		position: relative;
-	}
+.upload-content {
+  margin-top: 20rpx;
+  position: relative;
+}
 
-	.progress-box {
-		width: 204rpx;
-		height: 204rpx;
-		background-color: rgba(0, 0, 0, 0.5);
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		z-index: 99;
-		display: flex;
-		flex-flow: column nowrap;
-		justify-content: center;
-		align-items: center;
-	}
+.progress-box {
+  width: 204rpx;
+  height: 204rpx;
+  background-color: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 99;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+}
 
-	.progress-text {
-		font-size: 42rpx;
-		color: #FFFFFF;
-		font-weight: 500;
-	}
+.progress-text {
+  font-size: 42rpx;
+  color: #ffffff;
+  font-weight: 500;
+}
 
-	.progress-lable {
-		font-size: 28rpx;
-		color: #FFFFFF;
-	}
+.progress-lable {
+  font-size: 28rpx;
+  color: #ffffff;
+}
 
-	.progress-box progress {
-		/* width: 204rpx; */
-		position: absolute;
-		left: 0;
-		right: 0;
-		bottom: 0;
-	}
+.progress-box progress {
+  /* width: 204rpx; */
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
 
-	.video-preview,
-	.image-preview,
-	.upload-btn {
-		width: 200rpx;
-		height: 200rpx;
-		margin-right: 10rpx;
-		margin-bottom: 20rpx;
-		position: relative;
-	}
+.video-preview,
+.image-preview,
+.upload-btn {
+  width: 200rpx;
+  height: 200rpx;
+  margin-right: 10rpx;
+  margin-bottom: 20rpx;
+  position: relative;
+}
 
-	.preview-video,
-	.preview-image {
-		width: 200rpx;
-		height: 200rpx;
-		border-radius: 8rpx;
-	}
+.preview-video,
+.preview-image {
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 8rpx;
+}
 
-	.upload-btn {
-		border: 2rpx dashed #DDDDDD;
-		border-radius: 8rpx;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
+.upload-btn {
+  border: 2rpx dashed #dddddd;
+  border-radius: 8rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
-	.plus-icon {
-		font-size: 60rpx;
-		color: #999999;
-	}
+.plus-icon {
+  font-size: 60rpx;
+  color: #999999;
+}
 
-	.delete-btn {
-		position: absolute;
-		top: -20rpx;
-		right: -20rpx;
-		width: 40rpx;
-		height: 40rpx;
-		background-color: rgba(0, 0, 0, 0.5);
-		border-radius: 50%;
-		color: #FFFFFF;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		font-size: 32rpx;
-	}
+.delete-btn {
+  position: absolute;
+  top: -20rpx;
+  right: -20rpx;
+  width: 40rpx;
+  height: 40rpx;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 32rpx;
+}
 
-	.bottom-buttons {
-		/* position: fixed;
+.bottom-buttons {
+  /* position: fixed;
   left: 0;
   right: 0;
   bottom: 0; */
-		height: 100rpx;
-		padding: 40rpx 0 64rpx;
-		box-sizing: border-box;
-		display: flex;
-		flex-flow: row nowrap;
-		justify-content: space-between;
-		align-items: center;
-	}
+  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: 64rpx;
-		line-height: 64rpx;
-		text-align: center;
-		font-size: 28rpx;
-		border-radius: 40rpx;
-	}
+.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-draft {
+  background-color: #ffffff;
+  color: #e8101e;
+  border: 2rpx solid #e8101e;
+  box-sizing: border-box;
+}
 
-	.btn-submit {
-		background-color: #E8101E;
-		color: #FFFFFF;
-	}
+.btn-submit {
+  background-color: #e8101e;
+  color: #ffffff;
+}
 
-	.form-step {
-		background-color: #fff;
-		margin-bottom: 24rpx;
-	}
+.form-step {
+  background-color: #fff;
+  margin-bottom: 24rpx;
+}
 
-	.form-step .form-item {
-		margin-bottom: 0;
-	}
+.form-step .form-item {
+  margin-bottom: 0;
+}
 
-	.step {
-		display: flex;
-		flex-flow: row nowrap;
-		justify-content: space-between;
-		align-items: center;
-		padding: 0 24rpx 24rpx;
-	}
+.step {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 24rpx 24rpx;
+}
 
-	.step-inp {
-		flex: 1;
-		font-size: 28rpx;
-		color: #333333;
-		margin-left: 38rpx;
-		padding: 0 24rpx;
-		background-color: rgba(230, 230, 230, 0.5);
-	}
+.step-inp {
+  flex: 1;
+  font-size: 28rpx;
+  color: #333333;
+  margin-left: 38rpx;
+  padding: 0 24rpx;
+  background-color: rgba(230, 230, 230, 0.5);
+}
 
-	.step-textarea {
-		font-size: 24rpx;
-		flex: 1;
-		height: 70rpx;
-		border-radius: 6rpx;
-		margin-left: 38rpx;
-		padding: 24rpx;
-		background-color: rgba(230, 230, 230, 0.5);
-	}
+.step-textarea {
+  font-size: 24rpx;
+  flex: 1;
+  height: 70rpx;
+  border-radius: 6rpx;
+  margin-left: 38rpx;
+  padding: 24rpx;
+  background-color: rgba(230, 230, 230, 0.5);
+}
 
-	/* 选择器触发按钮样式 */
-	.picker-trigger {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 24rpx 32rpx;
-		background-color: #FFFFFF;
-		border-radius: 12rpx;
-		margin-bottom: 24rpx;
-	}
+/* 选择器触发按钮样式 */
+.picker-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx 32rpx;
+  background-color: #ffffff;
+  border-radius: 12rpx;
+  margin-bottom: 24rpx;
+}
 
-	.picker-label {
-		font-size: 28rpx;
-		color: #333333;
-	}
+.picker-label {
+  font-size: 28rpx;
+  color: #333333;
+}
 
-	.picker-value {
-		font-size: 28rpx;
-		color: #666666;
-	}
+.picker-value {
+  font-size: 28rpx;
+  color: #666666;
+}
 
-	.picker-arrow {
-		width: 32rpx;
-		height: 32rpx;
-		margin-left: 16rpx;
-	}
+.picker-arrow {
+  width: 32rpx;
+  height: 32rpx;
+  margin-left: 16rpx;
+}
 
-	.delete-icon {
-		width: 32rpx;
-		height: 32rpx;
-		margin-left: 24rpx;
-	}
+.delete-icon {
+  width: 32rpx;
+  height: 32rpx;
+  margin-left: 24rpx;
+}
 
-	.form-detail {
-		position: relative;
-	}
+.form-detail {
+  position: relative;
+}
 
-	.detail-cont {
-		display: flex;
-		flex-flow: column nowrap;
-		justify-content: center;
-		align-items: center;
-		width: 170rpx;
-		height: 210rpx;
-		position: absolute;
-		top: 50rpx;
-		right: -24rpx;
-		background-color: #fff;
-		padding: 20rpx;
-		border-radius: 20rpx;
-		box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.5);
-		z-index: 999;
-	}
+.required::before {
+  content: "*";
+  color: #ff0000;
+  margin-right: 4rpx;
+}
 
-	.detail-item {
-		display: flex;
-		flex-flow: column nowrap;
-		justify-content: center;
-		align-items: center;
-		padding: 12rpx 0;
-		border-bottom: 1rpx solid rgba(230, 230, 230, 0.5);
-	}
+.step-inp,
+.form-input {
+  height: 60rpx;
+}
 
-	.lable-view {
-		width: 120rpx;
-	}
+// 服务简介相关
+.detail-card {
+  background: #ffffff;
+  border-radius: 20rpx;
+  padding: 0 24rpx 8rpx;
+  margin-bottom: 24rpx;
+  box-sizing: border-box;
+  overflow: hidden;
+}
 
-	.required::before {
-		content: '*';
-		color: #FF0000;
-		margin-right: 4rpx;
-	}
+.detail-title {
+  padding: 24rpx 0 25rpx;
+}
 
-	.step-inp,
-	.form-input {
-		height: 60rpx;
-	}
+.detail-title .form-label {
+  font-size: 30rpx;
+  font-weight: 500;
+  color: #333;
+  line-height: 40rpx;
+}
 
-	.mask {
-		position: fixed;
-		top: 0;
-		right: 0;
-		left: 0;
-		width: 100vw;
-		height: 100vh;
-		/* background-color: rgba(230, 230, 230, 0.5); */
-		z-index: 99;
-	}
+.detail-row {
+  padding: 0 0 36rpx;
+}
 
-	/* 平台特定样式 */
-	/* #ifdef H5 */
+.detail-row .form-label {
+  display: block;
+  margin-bottom: 20rpx;
+  line-height: 40rpx;
+}
 
-	.form-input,
-	.form-textarea {
-		outline: none;
-	}
+.detail-textarea-wrap {
+  position: relative;
+  background: #f7f7f7;
+  border-radius: 16rpx;
+  padding: 24rpx 24rpx 52rpx;
+  box-sizing: border-box;
+}
 
-	.upload-btn {
-		cursor: pointer;
-	}
+.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;
+}
 
-	/* #endif */
+.detail-count {
+  position: absolute;
+  right: 24rpx;
+  bottom: 16rpx;
+  font-size: 22rpx;
+  color: #999999;
+  line-height: 32rpx;
+}
 
-	/* #ifdef APP-PLUS */
-	.form-input {
-		height: 90rpx;
-	}
+/* 平台特定样式 */
+/* #ifdef H5 */
 
-	.permission.transform {
-		top: calc(var(--status-bar-height) + 88rpx + 30rpx);
-		opacity: 1;
-		visibility: visible;
-	}
+.form-input,
+.form-textarea {
+  outline: none;
+}
 
-	/* #endif */
+.upload-btn {
+  cursor: pointer;
+}
 
-	/* #ifdef MP-WEIXIN */
-	.form-input {
-		height: 80rpx;
-	}
+/* #endif */
 
-	.bottom-buttons {
-		padding-bottom: env(safe-area-inset-bottom);
-	}
+/* #ifdef APP-PLUS */
+.form-input {
+  height: 90rpx;
+}
 
-	/* #endif */
-	.tip {
-		padding: 20rpx 30rpx;
-		background: #FEEFEC;
-		font-weight: 400;
-		font-size: 30rpx;
-		color: #F31D2F;
-		line-height: 42rpx;
-		text-align: left;
-		font-style: normal;
+.permission.transform {
+  top: calc(var(--status-bar-height) + 88rpx + 30rpx);
+  opacity: 1;
+  visibility: visible;
+}
 
-		text-align: center;
+/* #endif */
 
-		.tip-icon {
-			width: 34rpx;
-			height: 34rpx;
-			margin-right: 10rpx;
-			transform: translateY(6rpx);
-		}
-	}
-</style>
\ No newline at end of file
+/* #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>