1498 lines
37 KiB
Vue
1498 lines
37 KiB
Vue
<template>
|
||
<view class="add-service">
|
||
<view class="fixed-header">
|
||
<view class="tip" v-if="formData.back_text && formData.state == 4">
|
||
<image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/390d9d12-3c30-4639-9ac3-7b604b606b6d.png" class="tip-icon"></image>
|
||
<text>{{ formData.back_text }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 表单区域 -->
|
||
<view class="form-container">
|
||
<!-- 服务名称 -->
|
||
<view class="form-item">
|
||
<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>
|
||
<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 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"
|
||
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>
|
||
|
||
|
||
</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 {
|
||
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: [],
|
||
|
||
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("/syr/firstclass", {}).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: {
|
||
// 服务简介部分
|
||
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;
|
||
},
|
||
|
||
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("/syr/firstclass");
|
||
this.serviceTypes = this.serviceTypes.concat(firstclass.data);
|
||
|
||
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;
|
||
|
||
// 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,
|
||
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;
|
||
}
|
||
|
||
// 实现保存草稿逻辑
|
||
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.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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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>
|