app/pages/mine/openShop/index.vue

<template>
  <view style="padding: 10px">
    <u-form :model="form" ref="firstForm" :rules="rules">
      <h4>企业资质信息</h4>
      <u-form-item prop="companyName" label="公司名称">
        <u-input v-model="form.companyName" placeholder="请填写公司信息" />
      </u-form-item>
      <u-form-item label="公司所在地">
        <u-input
          v-model="path"
          type="select"
          @click="showPicker"
          placeholder="请选择所在地区"
        />
      </u-form-item>
      <u-form-item prop="companyAddress" label="详细地址">
        <u-input
          v-model="form.companyAddress"
          placeholder="请填写公司详细信息"
        />
      </u-form-item>
      <u-form-item prop="employeeNum" label="员工总数">
        <u-input v-model="form.employeeNum" placeholder="请填写公司员工总数"
          ><span slot="append">人</span>
        </u-input>
      </u-form-item>
      <u-form-item prop="companyPhone" label="公司电话">
        <u-input
          v-model="form.companyPhone"
          placeholder="请填写公司电话"
        ></u-input>
      </u-form-item>
      <u-form-item prop="registeredCapital" label="注册资金">
        <u-input
          v-model="form.registeredCapital"
          placeholder="请填写注册资金(万元)"
        >
          <!-- <span slot="append">万元</span> -->
        </u-input>
      </u-form-item>
      <u-form-item prop="linkName" label="联系人姓名">
        <u-input v-model="form.linkName" placeholder="请填写联系人姓名" />
      </u-form-item>
      <u-form-item prop="linkPhone" label="联系人电话">
        <u-input v-model="form.linkPhone" placeholder="请填写联系人电话" />
      </u-form-item>
      <u-form-item prop="companyEmail" label="电子邮箱">
        <u-input v-model="form.companyEmail" placeholder="请填写电子邮箱" />
      </u-form-item>
      <h4>营业执照信息</h4>
      <u-form-item prop="licenseNum" label="营业执照号">
        <u-input v-model="form.licenseNum" placeholder="请填写营业执照号" />
      </u-form-item>
      <u-form-item prop="scope" label="经营范围">
        <u-input
          type="textarea"
          v-model="form.scope"
          maxlength="200"
          show-word-limit
          :rows="4"
          placeholder="请输入营业执照所示经营范围"
        />
      </u-form-item>
      <u-form-item prop="licencePhoto" label="营业执照电子版">
        <u-upload
          :action="action"
          :header="{ accessToken: storage.getAccessToken() }"
          max-count="1"
          style="margin-left: 70px"
          @on-uploaded="onUploadedone"

          @on-remove="onRemoveone"
        ></u-upload>
      </u-form-item>
      <h4>法人信息</h4>
      <u-form-item prop="legalName" label="法人姓名">
        <u-input
          v-model="form.legalName"
          maxlength="20"
          placeholder="请输入法人姓名"
        />
      </u-form-item>
      <u-form-item prop="legalId" label="法人证件号">
        <u-input v-model="form.legalId" placeholder="请输入法人证件号" />
      </u-form-item>
      <u-form-item prop="legalPhoto" label="法人证件电子版">
        <u-upload
          :header="{ accessToken: storage.getAccessToken() }"
          max-count="2"
          :action="action"
          @on-uploaded="onUploadedtwo"
          @on-remove="onRemove"
          style="margin-left: 70px"
        ></u-upload>
        <div class="describe">
          请压缩图片在2M以内，身份证正反面两张照片，确保图片清晰无缺角
        </div>
      </u-form-item>
      <u-form-item> </u-form-item>
    </u-form>
    <button
      type="primary"
      @click="next"
      :style="{ background: '#FE3C3C' }"
      class="bunem"
    >
      填写财务资质信息
    </button>
    <u-toast ref="uToast" />
    <m-city
      :provinceData="list"
      headTitle="区域选择"
      ref="cityPicker"
      @funcValue="getpickerParentValue"
      pickerSize="4"
    >
    </m-city>
  </view>
</template>

<script>
import storage from "@/utils/storage.js";
import { upload } from "@/api/common.js";
import gkcity from "@/components/m-city/m-city.vue";
import { applyFirst } from "@/api/goods";
import * as RegExp from "@/plugins/Reg/RegExp.js";
export default {
  components: {
    "m-city": gkcity,
  },
  data() {
    return {
      list: [
        {
          id: "",
          localName: "请选择",
          children: [],
        },
      ],
      action: upload,
      storage: storage,
      path: "",
      form: {
        legalPhoto: [],
        licencePhoto: [],
        companyAddressIdPath: [],
        legalId: "",
        legalName: "",
        companyName: "",
        companyAddress: "",
        employeeNum: "",
        registeredCapital: "",
        companyAddressPath: "",
        linkName: "",
      },
      rules: {
        companyName: [
          {
            required: true,
            message: "请填写公司信息",
            trigger: ["blur", "change"],
          },
        ],
        companyAddress: [
          {
            required: true,
            message: "请填写公司详细地址",
            trigger: ["blur", "change"],
          },
        ],
        employeeNum: [
          {
            required: true,
            message: "请填写公司员工总数",
            trigger: ["blur", "change"],
          },
          {
            pattern: RegExp.integer,
            message: "只能填写正整数",
            trigger: ["blur", "change"],
          },
        ],
        registeredCapital: [
          {
            required: true,
            message: "请填写公司注册资金",
            trigger: ["blur", "change"],
          },
          {
            pattern: RegExp.integer,
            message: "只能填写正整数",
            trigger: ["blur", "change"],
          },
        ],
        linkName: [
          {
            required: true,
            message: "请填写联系人姓名",
            trigger: ["blur", "change"],
          },
        ],
        linkPhone: [
          {
            required: true,
            message: "请填写联系人电话",
            trigger: ["blur", "change"],
          },
          {
            pattern: RegExp.mobile,
            message: "请填写正确的号码",
            trigger: ["blur", "change"],
          },
        ],
        companyPhone: [
          {
            required: true,
            message: "请填写公司电话",
            trigger: ["blur", "change"],
          },
          {
            pattern: RegExp.TEL,
            message: "请填写正确的号码",
            trigger: ["blur", "change"],
          },
        ],
        companyEmail: [
          {
            required: true,
            message: "请填写电子邮箱",
            trigger: ["blur", "change"],
          },
          {
            type: "email",
            message: "请输入正确的邮箱",
            trigger: ["blur", "change"],
          },
        ],
        licenseNum: [
          {
            required: true,
            message: "请填写营业执照号",
            trigger: ["blur", "change"],
          },
          {
            pattern: RegExp.licenseNum,
            message: "请输入正确的营业执照号",
            trigger: ["blur", "change"],
          },
        ],
        scope: [
          {
            required: true,
            message: "请填写营业执照所示经营范围",
            trigger: ["blur", "change"],
          },
        ],
        legalPhoto: [
          {
            required: true,
            message: "请上传法人身份证照片",
            trigger: ["change"],
          },
        ],
        licencePhoto: [
          {
            required: true,
            message: "请上传营业执照",
            trigger: ["change"],
          },
        ],
        legalName: [
          {
            required: true,
            message: "请输入法人姓名",
            trigger: ["blur", "change"],
          },
        ],
        legalId: [
          {
            required: true,
            message: "请输入法人证件号",
            trigger: ["blur", "change"],
          },
          {
            pattern: RegExp.IDCard,
            message: "请输入正确的证件号",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },

  onLoad() {
    // 页面加载时可以初始化数据
  },
  onShow() {
    // 页面显示时可以执行一些操作
  },
  mounted() {},
  methods: {
    // 显示三级地址联动
    showPicker() {
      this.$refs.cityPicker.show();
    },
    // 三级地址联动回调
    getpickerParentValue(e) {
      // 将需要绑定的地址设置为空，并赋值
      this.form.consigneeAddressIdPath = [];
      this.form.consigneeAddressPath = [];
      this.form.companyAddressIdPath = [];
      let name = "";

      e.forEach((item, index) => {
        if (item.id) {
          // 遍历数据
          this.form.consigneeAddressIdPath.push(item.id);
          this.form.companyAddressIdPath.push(item.id);
          console.log(item.id);
          console.log(this.form.companyAddressIdPath);
          
          this.form.consigneeAddressPath.push(item.localName);
          name += item.localName;
          this.form.companyAddressPath = name;
          this.path = name;
        }
        if (index == e.length - 1) {
          //如果是最后一个
          let _town = item.children.filter((_child) => {
            return _child.id == item.id;
          });

          this.form.lat = _town[0].center.split(",")[1];
          this.form.lon = _town[0].center.split(",")[0];
        }
      });
    },

    consub() {},

    onUploaded(lists) {
      lists.forEach((item) => {
        this.form.businessLicense = item.response.result;
      });
    },
    // 法人证件电子
    onUploadedone(lists) {
      lists.forEach((item) => {
        this.form.licencePhoto = item.response.result;
      });
    },

    onRemoveone(index, lists) {
      this.form.licencePhoto=[]
    },
    // 法人证件电子版
    onUploadedtwo(lists) {
      lists.forEach((item) => {
        const fn = this.form.legalPhoto.indexOf(item.response.result);
        if (fn == -1) {
          this.form.legalPhoto.push(item.response.result);
        }
      });
    },
    onRemove(index, lists) {
      this.form.legalPhoto.splice(index, 1);
    },

    // 下一步
    next() {
      this.$refs.firstForm.validate((valid) => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.form));
          params.legalPhoto = this.form.legalPhoto.toString();
          params.licencePhoto = this.form.licencePhoto.toString();
          params.companyAddressIdPath = this.form.companyAddressIdPath.toString();
          if (
            this.form.legalPhoto != "" &&
            this.form.legalId != "" &&
            this.form.legalName != "" &&
            this.form.linkName!= "" &&
            this.form.linkPhone!= "" 
          ) {
            applyFirst(params)
              .then((res) => {
                if (res.data.success) {
                  uni.navigateTo({
                    url: "/pages/mine/openShop/secon",
                  });
                } else {
                  uni.showToast({
                    title: "请正确输入",
                    icon: "none",
                    duration: 1500,
                  });
                }
              })
              .catch((err) => {
                uni.showToast({
                  title: "请正确输入",
                  icon: "none",
                  duration: 1500,
                });
              });
          } else {
            uni.showToast({
              title: "请正确输入",
              icon: "none",
              duration: 1500,
            });
          }
        } else {
          this.$refs.uToast.show({
            title: "表单校验失败，请检查输入内容",
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .u-form-item--left__content {
    width: 100px;
    white-space: nowrap;
  }
  .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;
  }
  .u-input {
    margin-left: 30px; // 可根据实际情况调整这个值
  }
}
</style>