ykt-wxapp/pages/work/verify/doctor.vue

<template>
  <full-page pageClass="bg-white">
    <view class="p-15">
      <view class="title-bar relative text-dark text-base font-semibold">请填写执业医院</view>
      <view class="mt-12 p-10 flex items-center justify-between border rounded">
        <view class="w-0 flex-grow truncate text-base mr-10" :class="formData.hospitalName ? 'text-dark' : 'text-gray'">
          {{ formData.hospitalName || '请填写执业医院' }}
        </view>
        <uni-icons class="flex-shrink-0" color="#666" type="right" size="16" />
      </view>
      <view class="mt-15 title-bar relative font-semibold">
        <text class="mr-5 text-dark text-base">请上传</text>
        <text class="text-primary text-base">医师执业资格证</text>
      </view>
      <view class="mt-12 flex items-center justify-between">
        <view class="album border rounded overflow-hidden" @click="uploadLicense('medicalLicenseFront')">
          <image v-if="formData.medicalLicenseFront" class="w-full h-full" :src="formData.medicalLicenseFront" />
          <view v-else class="w-full h-full flex flex-col items-center justify-center">
            <uni-icons color="#666" type="camera" size="36" />
            <view class="text-dark text-base">上传第一页</view>
          </view>
        </view>
        <view class="album border rounded  overflow-hidden" @click="uploadLicense('medicalLicenseBack')">
          <image v-if="formData.medicalLicenseBack" class="w-full h-full" :src="formData.medicalLicenseBack" />
          <view v-else class="w-full h-full flex flex-col items-center justify-center">
            <uni-icons color="#666" type="camera" size="36" />
            <view class="text-dark text-base">上传第二页</view>
          </view>
        </view>
      </view>
      <view class="exam px-15 rounded-sm leading-normal text-dark text-base">
        证书示例
      </view>
      <view class="mt-10 text-sm text-dark leading-normal">1、确保姓名、照片、编号、执业范围、签发机关等清晰可见</view>
      <view class="mt-10 text-sm text-dark leading-normal">2、需上传证书第一、第二页，图片仅供参考，以实际证书为准</view>
      <view class="mt-12 flex items-center justify-between">
        <image class="album" src="/static/work/licenseFront.png" />
        <image class="album" src="/static/work/licenseBack.png" />
      </view>
    </view>
    <template #footer>
      <button-footer cancelText="上一步" confirmText="提交审核" @confirm="save()" @cancel="back()" />
    </template>
  </full-page>
</template>
<script setup>
import { computed, ref } from "vue";
import { storeToRefs } from "pinia";
import useGuard from "@/hooks/useGuard.js";
import useAccountStore from "@/store/account.js";
import { upload } from "@/utils/http.js";
import { hideLoading, loading as showLoading, toast } from "@/utils/widget";

import buttonFooter from '@/components/button-footer.vue';
import fullPage from '@/components/full-page.vue';

useGuard();
const { account, doctorInfo } = storeToRefs(useAccountStore());
const form = ref({});
const formData = computed(() => ({ ...(doctorInfo.value || {}), ...form.value }))

function back() {
  uni.navigateBack()
}

function uploadLicense(type) {
  uni.chooseImage({
    count: 1,
    success: async (res) => {
      const [path] = res.tempFilePaths;
      showLoading('正在上传')
      const url = await upload(path);
      hideLoading()
      if (url) {
        form.value[type] = url;
      } else {
        toast('上传失败')
      }
    }
  })
}

async function save() {
  if (typeof formData.value.hospitalName !== 'string' || formData.value.hospitalName.trim() === '') {
    return toast('请填写执业医院')
  }
  if (typeof formData.value.medicalLicenseFront !== 'string' || formData.value.medicalLicenseFront.trim() === '') {
    return toast('请上传医师执业资格证第一页')
  }
  if (typeof formData.value.medicalLicenseBack !== 'string' || formData.value.medicalLicenseBack.trim() === '') {
    return toast('请上传医师执业资格证第二页')
  }
  console.log('form.value: ', formData.value)

  // uni.showToast({ title: '提交成功', icon: 'none' })
}
</script>
<style scoped>
.title-bar {
  padding-left: 20rpx;
}

.title-bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 80%;
  width: 8rpx;
  transform: translateY(-50%);
  border-radius: 4rpx;
  background: #0074ff;
}

.album {
  width: 330rpx;
  height: 240rpx;
}

.exam {
  margin-top: 80rpx;
  background: #dde6f6;
  padding: 8rpx 30rpx;
  width: fit-content;
}
</style>