mrr.sj.front/pages/shop/workSpace/addWorkSpace.vue

<template>
  <view>
    <custom-navbar
      :title="customTitle"
      :showBack="!isClassSelect"
      backgroundColor="#FFFFFF"
    ></custom-navbar>
    <class_select
      :classId="formData.first_class_id"
      :secondClassId="formData.second_class_ids"
      @changeClass="(id) => (formData.first_class_id = id)"
      @changeSecondClass="(ids) => (formData.second_class_ids = ids)"
      @changeTypeText="(typeText) => (serviceType = typeText)"
      @closeClassSelect="endSelect"
      v-show="isClassSelect"
    ></class_select>
    <view class="add-service" v-show="!isClassSelect">
      <!-- 表单区域 -->
      <view class="form-container">
        <!-- 服务分类 -->
        <view class="form-item">
          <text class="form-label">分类</text>
          <view class="form-right" @click="() => (isClassSelect = true)">
            <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-up">
          <text class="form-label">工位名称</text>
          <view class="form-input-box">
            <input
			  type="text"
              v-model="formData.title"
              placeholder="请输入名称"
              placeholder-class="placeholder"
              class="form-input"
          /></view>
        </view>
        <!-- 工时价格 -->
        <view class="form-item-up">
          <view>
            <text class="form-label">工位价格</text>
            <text class="redTip">(*以下按照每10分钟的价格)</text>
          </view>
          <view class="content_box">
            <view class="form-input-box small_input">
              <input
			    type="digit"
                v-model="formData.price"
                placeholder="请输入价格"
                placeholder-class="placeholder"
                class="form-input"
            /></view>
            <text class="unit">元/10分钟</text>
          </view>
        </view>

        <!-- 服务价格 -->
        <view class="form-item-up">
          <text class="form-label">工位描述</text>
          <view class="form-input-box">
            <textarea
              v-model="formData.detail"
              placeholder="请输入描述，可根据环境空间设计、感官体验等方面描述。"
              placeholder-class="placeholder"
              class="form-textarea"
              maxlength="-1"
            ></textarea>
          </view>
        </view>

        <!-- 服务图片 -->
        <view class="form-item-up upload-item">
          <view>
            <text class="form-label">工位图片</text>
            <text class="redTip">(*仅可上传9个图片)</text>
          </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" :class="{'btn-submit2':state != 0}" @click="submitForm">提交</button>
      </view>

      <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>
</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 { debounce } from "@/utils/debounce.js";
import AliOssUploader from "@/components/ali-oss-uploader/ali-oss-uploader.vue";
import _public from "@/utils/public";
import class_select from "./components/class_select.vue";

export default {
  components: {
    PopupPicker,
    CircleProgress,
    AliOssUploader,
    class_select,
  },
  data() {
    return {
      serviceType: "",
      isClassSelect: false,
      artisanType: getApp().globalData.artisanType,
      nowQer: "xc",
      progress: 0,
      isShow: false,
      state: null,
      isShowPer: false,
      formData: {
        first_class_id: undefined,
        second_class_ids: [],
        photo: [],
      },
      ratio: null,
      serviceTypes: [], // 服务分类
      categoryAll: [],
      showServiceTypePicker: false,
      showCategoryPicker: false,
      selectedServiceTypeIndex: 0,
      selectedCategoryIndex: 0,
      category: "",
      imagesList: [], // 临时图片地址
      showCategory: false,
      showProgress: false,
      publish_user_id: null,
      isAdd: false,
      isDraft: false,
    };
  },
  onLoad(options) {
    this.state = options.state || "";
    if (options.id) {
      this.formData.id = options.id;
      this.getInit();
    }
  },
  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
      );
    },
    customTitle() {
      if (this.isClassSelect) {
        return "选择分类";
      }

      if (this.formData.id) {
        return "编辑工位";
      }
      return "添加工位";
    },
  },
  methods: {
    ckeckisShowPer(value) {
      console.log("ckeckisShowPer==========", value);
      this.isShowPer = value;
    },
    ckecknowQer(value) {
      this.nowQer = value;
    },
    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;
    },
    async getInit() {
      request
        .post("/sj/workSeat/details", { id: this.formData.id })
        .then((res) => {
          this.formData = {
            ...res.data,
            second_class_ids: res.data.second_class_ids
              .split(",")
              .map((it) => Number(it)),
            photo: res.data.photo ? JSON.parse(res.data.photo) : [],
          };
        });
    },
    // 输入价格
    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);
    },

    // 保存草稿
    saveDraft: debounce(function () {
      if (this.isDraft) return;
      const formData = {
        ...this.formData,
        second_class_ids: this.formData.second_class_ids.join(","),
        state: 1,
        photo: JSON.stringify(this.formData.photo),
      };
      if (!this.formData.title) {
        uni.showToast({
          title: "请输入工时名称",
          icon: "none",
        });
        return;
      }
      if (!formData.price) {
        uni.showToast({
          title: "请输入工时价格",
          icon: "none",
        });
        return;
      }
      if (formData.price < 0.1) {
        uni.showToast({
          title: "工时价格不能小于0.1",
          icon: "none",
        });
        return;
      }
      if (!this.formData.photo || this.formData.photo.length === 0) {
        uni.showToast({
          title: "请上传服务图片",
          icon: "none",
        });
        return;
      }

      // 实现保存草稿逻辑
      formData.state = 0;
      let url = null;
      if (!formData.id) {
        url = "/sj/workSeat/add";
      } else {
        url = "/sj/workSeat/edit";
      }
      request.post(url, formData).then((res) => {
        if (res.code == 200) {
          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 () {
      const formData = {
        ...this.formData,
        second_class_ids: this.formData.second_class_ids.join(","),
        state: 1,
        photo: JSON.stringify(this.formData.photo),
      };
      console.log(formData);
      if (this.isAdd) return;

      // 表单验证

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

      if (!this.formData.title) {
        uni.showToast({
          title: "请输入工时名称",
          icon: "none",
        });
        return;
      }
      if (!formData.price) {
        uni.showToast({
          title: "请输入工时价格",
          icon: "none",
        });
        return;
      }
      if (formData.price < 0.1) {
        uni.showToast({
          title: "工时价格不能小于0.1",
          icon: "none",
        });
        return;
      }
      if (!this.formData.detail) {
        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 = "/sj/workSeat/add";
      } else {
        url = "/sj/workSeat/edit";
      }
      this.isAdd = true;
      request.post(url, formData).then((res) => {
        if (res.code == 200) {
          const pages = getCurrentPages();
          const prevPage = pages[pages.length - 2]; // 上一个页面
          uni.showToast({
            title: res.msg,
            icon: "success",
            duration: 600,
            mask: 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),
    endSelect(typeText) {
      this.isClassSelect = false;
      this.serviceType = typeText;
    },
  },
};
</script>

<style scoped>
.uni-textarea-wrapper .uni-textarea-placeholder {
display: flex;
align-items: center;
}
.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;
  gap: 24rpx;
}
.form-label {
  font-weight: 500;
  font-size: 32rpx;
  color: #333333;
}

.form-input {
  flex: 1;
  height: 40rpx;
  font-size: 28rpx;
  color: #333333;
  margin-left: 32rpx;
}

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

.form-value {
  font-size: 28rpx;
  color: #333333;
  margin-right: 11rpx;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏溢出 */
  text-overflow: ellipsis; /* 溢出显示省略号 */
  width: 400rpx; /* 固定宽度（关键） */
  text-align: right;
}

.placeholder {
font-weight: 400;
font-size: 28rpx;
color: #CACCCC;
line-height: 40rpx;
text-align: left;
font-style: normal;
}

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

.form-textarea {
  padding: 32rpx 0;
  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: 78rpx;
  line-height: 78rpx;
  text-align: center;
  font-size: 28rpx;
  border-radius: 78rpx;
}

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

.btn-submit2{
  width: 698rpx;
}

.btn-submit {
  background-color: #FF4767;
  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;
}
.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;
}
.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);
}
.lable-view {
  width: 120rpx;
}

.required::before {
  content: "*";
  color: #ff0000;
  margin-right: 4rpx;
}
.step-inp,
.form-input {
  height: 60rpx;
}
.mask {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* background-color: rgba(230, 230, 230, 0.5); */
  z-index: 99;
}
/* 平台特定样式 */
/* #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 */

.redTip {
  color: #FF4767;
  font-size: 24rpx;
  margin-left: 10rpx;
}
.content_box {
  display: flex;
  align-items: center;
  gap: 10rpx;
}
.form-input {
  width: 100%;
  height: 72rpx;
}
.form-input-box {
  border-radius: 10rpx;
  border: 1rpx solid #e5e5e5;
  width: 100%;
}
.unit {
  font-size: 32rpx;
  color: #333333;
  flex: 1;
}
.small_input {
  width: 320rpx !important;
}
</style>