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

<template>
  <full-page pageClass="bg-white">
    <view class="p-15">
      <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="uploadIdCard('idCardFront')">
          <image v-if="form.idCardFront" class="w-full h-full" :src="form.idCardFront" />
          <view v-else class="relative w-full h-full ">
            <image class="absolute w-full h-full" src="/static/work/fIDCard.png" />
            <view class="absolute w-full h-full flex flex-col items-center justify-center">
              <image class="carmra-icon" src="/static/work/camera.png" />
              <view class="text-lg font-semibold color-428">上传人像面</view>
            </view>
          </view>
        </view>
        <view class="album border rounded  overflow-hidden" @click="uploadIdCard('idCardBack')">
          <image v-if="form.idCardBack" class="w-full h-full" :src="form.idCardBack" />
          <view v-else class="relative w-full h-full ">
            <image class="absolute w-full h-full" src="/static/work/aIDCard.png" />
            <view class="absolute w-full h-full flex flex-col items-center justify-center">
              <image class="carmra-icon" src="/static/work/camera.png" />
              <view class="text-lg font-semibold color-428">上传国徽面</view>
            </view>
          </view>
        </view>
      </view>
      <view class="exam px-15 rounded-sm leading-normal text-dark text-base">
        身份证示例
      </view>
      <view class="mt-12 flex items-center justify-between">
        <image class="album" src="/static/work/cardFront.png" />
        <image class="album" src="/static/work/cardBack.png" />
      </view>
      <view class="mt-12 text-dark font-semibold text-base">拍摄须知</view>
      <view class="mt-10 flex items-center justify-between">
        <view class="flex flex-col items-center justify-center">
          <image class="mb-5 exam-icon" src="/static/work/fIDCard.png" />
          <image class="mb-5 status-icon" src="/static/work/hook.png" />
          <view class="text-base text-dark">标准</view>
        </view>
        <view class="flex flex-col items-center justify-center">
          <image class="mb-5 exam-icon" src="/static/work/lackCard.png" />
          <image class="mb-5 status-icon" src="/static/work/error.png" />
          <view class="text-base text-dark">缺边</view>
        </view>
        <view class="flex flex-col items-center justify-center">
          <image class="mb-5 exam-icon" src="/static/work/vagueCard.png" />
          <image class="mb-5 status-icon" src="/static/work/error.png" />
          <view class="text-base text-dark">模糊</view>
        </view>
        <view class="flex flex-col items-center justify-center">
          <image class="mb-5 exam-icon" src="/static/work/flashCard.png" />
          <image class="mb-5 status-icon" src="/static/work/error.png" />
          <view class="text-base text-dark">闪光</view>
        </view>
      </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 uploadIdCard(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.idCardFront !== 'string' || formData.value.idCardFront.trim() === '') {
    return toast('请上传人像面')
  }
  if (typeof formData.value.idCardBack !== 'string' || formData.value.idCardBack.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: 200rpx;
}

.carmra-icon {
  width: 96rpx;
  height: 96rpx;
}

.color-428 {
  color: #428bf0;
}

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

.exam-icon {
  width: 160rpx;
  height: 104rpx;
}

.status-icon {
  width: 40rpx;
  height: 40rpx;
}
</style>