app/pages/enter/businessLicenseEnter/index.vue

<template>
  <s-layout>
    <u-notice-bar mode="horizontal" :list="list"></u-notice-bar>
    <view class="form-container">
      <u-form :model="form" ref="form1" :border-bottom="false" label-width="220">
        <u-form-item label="相关照片" prop="infoImages">
          <view class="tpClass">
            <s-uploader v-model:url="form.infoImages" fileMediatype="image" limit="9" mode="grid"
              :imageStyles="{ width: '168rpx', height: '168rpx' }" />
          </view>
          <u-button @click="extractClick" type="primary">提取</u-button>
        </u-form-item>
        <!-- <u-form-item label="用户编号" prop="userId">
          <u-input v-model="form.userId" placeholder="请输入用户编号" />
        </u-form-item> -->

        <u-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode">
          <u-input v-model="form.unifiedSocialCreditCode" placeholder="请输入统一社会信用代码" />
        </u-form-item>

        <u-form-item label="名称" prop="businessName">
          <u-input v-model="form.businessName" placeholder="请输入名称" />
        </u-form-item>

        <u-form-item label="类型" prop="businessType">
          <u-input v-model="form.businessType" placeholder="请输入类型" />
        </u-form-item>

        <u-form-item label="法定代表人" prop="legalRepresentative">
          <u-input v-model="form.legalRepresentative" placeholder="请输入法定代表人" />
        </u-form-item>

        <u-form-item label="注册资本" prop="registeredCapital">
          <u-input v-model="form.registeredCapital" placeholder="请输入注册资本" />
        </u-form-item>

        <u-form-item label="成立日期" prop="establishmentDate">
          <u-input v-model="form.establishmentDate" type="select" placeholder="选择成立日期" @click="calendar1.show = true" />
          <u-calendar v-model="calendar1.show" mode="date" @change="onCalendar1"></u-calendar>
        </u-form-item>

        <u-form-item label="住所" prop="businessAddress">
          <u-input v-model="form.businessAddress" placeholder="请输入住所" />
        </u-form-item>

        <u-form-item label="经营范围" prop="businessScope">
          <u-input v-model="form.businessScope" placeholder="请输入经营范围" />
        </u-form-item>

        <u-form-item label="登记机关" prop="registrationAuthority">
          <u-input v-model="form.registrationAuthority" placeholder="请输入登记机关" />
        </u-form-item>

        <u-form-item label="发证日期" prop="issueDate">
          <u-input v-model="form.issueDate" type="select" placeholder="选择发证日期" @click="calendar2.show = true" />
          <u-calendar v-model="calendar2.show" mode="date" @change="onCalendar2"></u-calendar>
        </u-form-item>

        <!-- <u-form-item label="数据使用状态" prop="infoStatus">
          <u-radio-group v-model="form.infoStatus">
            <u-radio v-for="(item, index) in infoStatusOptions" :key="index" :name="item.value">
              {{ item.label }}
            </u-radio>
          </u-radio-group>
        </u-form-item> -->
      </u-form>
      <view style="height: 80px;"></view>
      <view class="submit-btn">
        <u-button @click="submit" type="primary">提交</u-button>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import EnterApi from '@/sheep/api/enter/index.js'
import sheep from '@/sheep';

const form1 = ref(null);
const route = ref({});
const list = ref([
  '温馨提示：请上传营业执照照片，照片需清晰可见全部信息。进行提取！',
])

const form = ref({
  // userId: '',
  unifiedSocialCreditCode: '',
  businessName: '',
  businessType: '',
  legalRepresentative: '',
  registeredCapital: '',
  establishmentDate: '',
  businessAddress: '',
  businessScope: '',
  registrationAuthority: '',
  issueDate: '',
  infoImages: [],
  // infoStatus: ''
});

const calendar1 = reactive({
  show: false
});

const calendar2 = reactive({
  show: false
});

const infoStatusOptions = reactive([
  {
    value: '1',
    label: '启用'
  },
  {
    value: '0',
    label: '停用'
  }
]);

const rules = {
  userId: [
    { required: true, message: '请输入用户编号', trigger: ['change', 'blur'] }
  ],
  unifiedSocialCreditCode: [
    { required: true, message: '请输入统一社会信用代码', trigger: ['change', 'blur'] }
  ],
  businessName: [
    { required: true, message: '请输入名称', trigger: ['change', 'blur'] }
  ]
};

const getUserBusinessLicenseAxios = async () => {
  const res = await EnterApi.getUserBusinessLicense(route.value.id);
  if (res.code === 0) {
    form.value = { ...res.data, infoImages: JSON.parse(res.data.infoImages) };
  }
};

onMounted(() => {
  form1.value.setRules(rules);
  if (route.value.id) {
    getUserBusinessLicenseAxios();
  }
});

onLoad(async (options) => {
  route.value = options;
});

const submit = () => {
  form1.value.validate(async (valid) => {
    if (valid) {
      if (route.value.formType === 'create') {
        const res = await EnterApi.createUserBusinessLicense(form.value)
        if (res.code === 0) {
          uni.showToast({
            title: '创建成功',
            icon: 'success'
          })
          sheep.$router.back()
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      } else {
        const res = await EnterApi.updateUserBusinessLicense(form.value)
        if (res.code === 0) {
          uni.showToast({
            title: '更新成功',
            icon: 'success'
          })
          sheep.$router.back()
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      }
    }
  })
};

const extractClick = async () => {
  if (form.value.infoImages && form.value.infoImages.length == 0)
    return uni.showToast({
      icon: "none",
      title: "请上传营业执照照片"
    })
  const res = await EnterApi.difyOrcs(
    {
      "type": "提取营业执照",
      "images": form.value.infoImages
    }
  )
  const data = JSON.parse(res.data)
  for (const key in data) {
    if (Object.prototype.hasOwnProperty.call(data, key)) {
      const element = data[key];
      if (!element) {
        delete data[key]
      }
    }
  }
  form.value = { ...form.value, ...data }

  if (res.code === 0) {
    uni.showToast({
      icon: "none",
      title: "提取成功"
    })
  } else {
    uni.showModal({
      content: res.msg,
      showCancel: false
    })
  }
};

const onCalendar1 = (e) => {
  form.value.establishmentDate = e.result;
};

const onCalendar2 = (e) => {
  form.value.issueDate = e.result;
};
</script>

<style lang="scss" scoped>
.form-container {
  padding: 40rpx;
  background-color: #ffffff;

  .u-form {
    background: #fff;
  }

  .submit-btn {
    padding: 40rpx 0;
    background: #fff;
    position: fixed;
    bottom: 0;
    width: calc(100% - 80rpx);
  }

  .form-data {
    padding: 20rpx;
    background-color: #f8f8f8;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #666;
  }
}
</style>