app/pages/mine/expert/index.vue

<template>
  <view style="padding: 10px">
    <u-form :model="form" ref="uForm" :rules="rules">
      <u-form-item label="姓名"
        ><u-input v-model="form.name" placeholder="请输入您真实姓名"
      /></u-form-item>
      <u-form-item label="性别">
        <u-radio-group v-model="form.sex" style="margin-left: 30px">
          <u-radio
            v-for="(item, index) in radioList"
            :key="index"
            :name="item.value"
            :value="item.value"
            :disabled="item.disabled"
          >
            {{ item.name }}
          </u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item label="联系方式"
        ><u-input v-model="form.contact" placeholder="请输入"
      /></u-form-item>
      <u-form-item label="店铺地址"
        ><u-input v-model="form.residenceAddress" placeholder="请输入"
      /></u-form-item>
      <u-form-item label="营业执照">
        <u-upload
          :action="action"
          :header="{ accessToken: storage.getAccessToken() }"
          max-count="1"
          style="margin-left: 30px"
          @on-uploaded="onUploaded"
        ></u-upload>
        <!-- <u-input v-model="form.businessLicense" placeholder="请输入"/> -->
      </u-form-item>

      <u-form-item label="证件类别"
        ><u-input v-model="idType" type="select" @click="show = true" />
        <u-action-sheet
          :list="actionSheetList"
          v-model="show"
          @click="actionSheetCallback"
        ></u-action-sheet>
      </u-form-item>

      <u-form-item label="证件照片">
        <u-upload
          :header="{ accessToken: storage.getAccessToken() }"
          max-count="2"
          :action="action"
          @on-uploaded="onUploadedtwo"
          style="margin-left: 30px"
        ></u-upload>
      </u-form-item>
      <u-form-item label="证件有效期" right-icon="arrow-right">
        <u-input
          v-model="form.idExpiryDate"
          placeholder="请输入"
          @click="showtime = true"
        />
        <u-calendar
          v-model="showtime"
          mode="date"
          @change="changetime"
          max-date="30000"
          range-color="#FE3C3C"
        ></u-calendar>
      </u-form-item>
      <u-form-item label="经营范围">
        <u-checkbox-group
          @change="checkboxGroupChange"
          style="margin-left: 30px"
        >
          <u-checkbox
            v-model="item.checked"
            v-for="(item, index) in cateList"
            :key="index"
            :name="item.id"
            >{{ item.name }}</u-checkbox
          >
        </u-checkbox-group>
      </u-form-item>
    </u-form>
    <button @click="consub" :style="{ background: '#FE3C3C' }" class="bunem">
      提交
    </button>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import storage from "@/utils/storage.js";
import { upload } from "@/api/common.js";
import { getCategoryList, getMon } from "@/api/goods.js";
export default {
  data() {
    return {
      action: upload,
      storage: storage,
      form: {
        name: "",
        sex: "",
        contact: "",
        residenceAddress: "",
        businessLicense: "",
        idType: "",
        idPhoto: [],
        idExpiryDate: "",
        businessAddress: "",
        businessScope: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: "blur",
          },
        ],
        sex: [
          {
            required: true,
            message: "性别不能为空",
            trigger: "change",
          },
        ],
        contact: [
          {
            required: true,
            message: "联系方式不能为空",
            trigger: "blur",
          },
        ],
        residenceAddress: [
          {
            required: true,
            message: "居住地址不能为空",
            trigger: "blur",
          },
        ],
        businessLicense: [
          {
            required: true,
            message: "营业执照不能为空",
            trigger: "change",
          },
        ],
        idType: [
          {
            required: true,
            message: "证件类别不能为空",
            trigger: "change",
          },
        ],
        idPhoto: [
          {
            required: true,
            message: "证件照片不能为空",
            trigger: "change",
          },
        ],
        idExpiryDate: [
          {
            required: true,
            message: "证件有效期不能为空",
            trigger: "change",
          },
        ],
        businessAddress: [
          {
            required: true,
            message: "经营范围不能为空",
            trigger: "change",
          },
        ],
      },
      idType: "",
      radioList: [
        {
          name: "男",
          disabled: false,
          value: "MALE",
        },
        {
          name: "女",
          disabled: false,
          value: "FEMALE",
        },
      ],
      showtime: false, // 控制u-calendar的显示与隐藏
      show: false, // 控制actionSheet的显示与隐藏--证件
      //   证件
      actionSheetList: [
        {
          text: "身份证",
          value: "ID",
        },
        {
          text: "护照",
          value: "PASSPORT",
        },
        {
          text: "其他",
          value: "OTHER",
        },
      ],
      radio: "",
      switchVal: false,
      cateList: [],
    };
  },

  onLoad() {
    // 页面加载时可以初始化数据
  },
  onShow() {
    // 页面显示时可以执行一些操作
  },
  mounted() {
    this.getCategoryList(); // 调用获取分类列表的方法
  },
  methods: {
    //点击actionSheet回调--证件
    actionSheetCallback(index) {
      this.form.idType = this.actionSheetList[index].value;
      this.idType = this.actionSheetList[index].text;
    },
    consub() {
      const {
        name,
        sex,
        contact,
        residenceAddress,
        businessLicense,
        idType,
        idPhoto,
        idExpiryDate,
        businessAddress,
        businessScope,
      } = this.form;
      if (
        name == "" ||
        sex == "" ||
        contact == "" ||
        residenceAddress == "" ||
        businessLicense.length == 0 ||
        idType == "" ||
        idPhoto.length == 0 ||
        idExpiryDate == "" ||
        businessScope.length == 0
      ) {
        this.$refs.uToast.show({
          title: "不能为空",
          type: "error",
        });
      } else {
        this.form.businessAddress = this.form.residenceAddress;
        getMon(this.form).then((res) => {
          if (res.data.code == 200) {
            this.$refs.uToast.show({
              title: "提交成功",
              type: "success",
            });
            setTimeout(() => {
              uni.switchTab({
                url: "/pages/tabbar/user/my",
              });
            }, 1000);
          }
        });
      }
    },
    onUploaded(lists) {
      console.log(lists); // 打印上传成功后的文件列表
      lists.forEach((item) => {
        this.form.businessLicense = item.response.result;
      });
    },
    onUploadedtwo(lists) {
      let images = [];
      lists.forEach((item) => {
        images.push(item.response.result);
      });
      this.form.idPhoto = images;
    },
    changetime(value) {
      this.form.idExpiryDate = value.result; // 将选择的日期赋值给form.idExpiryDate
    },
    // 选中某个复选框时，由checkbox时触发
    checkboxChange(e) {
      console.log(e, "[====]");
    },
    // 选中任一checkbox时，由checkbox-group触发
    checkboxGroupChange(e) {
      this.form.businessScope = e;
    },

    getCategoryList() {
      getCategoryList(0).then((res) => {
        res.data.result.forEach((item) => {
          item.checked = false; // 初始化每个项目的checked属性为false
        });
        this.cateList = res.data.result;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  
  .u-btn--primary {
    color: #ffffff;
    border-color: #fe3c3c !important;
    background-color: #fe3c3c !important;
  }
  .u-form-item--left__content {
    width: 100px;
    white-space: nowrap;
  }
  .u-input {
    margin-left: 30px; // 可根据实际情况调整这个值
  }
  .u-checkbox__icon-wrap--checked {
    border-color: #fe3c3c !important;
    background-color: #fe3c3c !important;
  }
  .u-radio__icon-wrap--checked {
    border-color: #fe3c3c !important;
    background-color: #fe3c3c !important;
  }
}
.bunem {
  width: 309px;
  margin-top: 20px;
  height: 32px;
  display: flex;
  align-items: #ffffff;
  margin-bottom: 35px;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
}
</style>