app/pages/enter/idEnter/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="name">
          <u-input v-model="form.name" placeholder="请输入姓名" />
        </u-form-item>

        <u-form-item label="性别" prop="gender">
          <u-input v-model="form.gender" placeholder="请输入性别" />
        </u-form-item>

        <u-form-item label="民族" prop="ethnicity">
          <u-input v-model="form.ethnicity" placeholder="请输入民族" />
        </u-form-item>

        <u-form-item label="出生日期" prop="birthDate">
          <u-input v-model="form.birthDate" 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="address">
          <u-input v-model="form.address" placeholder="请输入住址" />
        </u-form-item>

        <u-form-item label="公民身份号码" prop="idCardNumber">
          <u-input v-model="form.idCardNumber" placeholder="请输入公民身份号码" />
        </u-form-item>

        <u-form-item label="签发机关" prop="issuingAuthority">
          <u-input v-model="form.issuingAuthority" placeholder="请输入签发机关" />
        </u-form-item>

        <u-form-item label="有效期开始日期" prop="validityStart">
          <u-input v-model="form.validityStart" 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="validityEnd">
          <u-input v-model="form.validityEnd" type="select" placeholder="选择有效期结束日期" @click="calendar3.show = true" />
          <u-calendar v-model="calendar3.show" mode="date" @change="onCalendar3"></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({
  name: '',
  gender: '',
  ethnicity: '',
  birthDate: '',
  address: '',
  idCardNumber: '',
  issuingAuthority: '',
  validityStart: '',
  validityEnd: '',
  infoImages: [],
  // infoStatus: ''
});

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

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

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

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

const rules = {
  userId: [
    { required: true, message: '请输入用户编号', trigger: ['change', 'blur'] }
  ],
  name: [
    { required: true, message: '请输入姓名', trigger: ['change', 'blur'] }
  ],
  idCardNumber: [
    { required: true, message: '请输入身份证号码', trigger: ['change', 'blur'] }
  ]
};

const getUserIdcardAxios = async () => {
  const res = await EnterApi.getUserIdcard(route.value.id);
  if (res.code === 0) {
    form.value = { ...res.data, infoImages: JSON.parse(res.data.infoImages) };
  }
};
onMounted(() => {
  form1.value.setRules(rules);
  console.log(route.value, 55555)
  if (route.value.id) {
    getUserIdcardAxios();
  }
});
onLoad(async (options) => {
  route.value = options;
});
const submit = () => {
  form1.value.validate(async (valid) => {
    if (valid) {
      if (route.value.formType === 'create') {
        const res = await EnterApi.createUserIdcard(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.updateUserIdcard(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.birthDate = e.result;
};

const onCalendar2 = (e) => {
  form.value.validityStart = e.result;
};

const onCalendar3 = (e) => {
  form.value.validityEnd = 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>