ykt-wxapp/pages/work/components/cert-popup.vue

<template>
  <uni-popup ref="popup" type="center" :mask-click="false">
    <view class="bg-white rounded overflow-hidden" style="width: 690rpx;">
      <template v-if="status === 'unverified'">
        <view class="px-15 py-12 text-center text-lg font-semibold text-dark">
          认证须知
        </view>
        <view class="text-base text-dark px-15 leading-normal font-semibold mt-10">
          1、认证通过后，您个人账号病历档案管理数（含所有团队）上限由10个升级至100个；
        </view>
        <view class="px-15 leading-normal mt-10 ">
          <text class="text-base text-dark">2、认证前请仔细核对个人信息，确保准确无误。认证后部分信息不支持修改，包括姓名、岗位等。如需修改以上信息，请联系客服人工处理</text>
        </view>
        <view class="mt-10 px-15 leading-normal font-semibold pb-50 text-lg text-primary" @click="toService()">点击添加客服
        </view>
      </template>
      <template v-else-if="status === 'verified'">
        <view class="px-15 py-12 text-center text-lg font-semibold text-dark">
          提示
        </view>
        <view class="text-base text-dark px-15 leading-normal font-semibold mt-10">
          您的认证已通过。
        </view>
        <view class="px-15 leading-normal mt-10 text-base text-dark">
          若需要修改姓名、岗位等信息，请联系客服人工处理
        </view>
        <view class="mt-10 px-15 leading-normal font-semibold pb-50 text-lg text-primary" @click="toService()">
          点击添加客服
        </view>
      </template>
      <template v-else-if="status === 'failed'">
        <view class="px-15 py-12 text-center text-lg font-semibold text-dark">
          认证失败原因
        </view>
        <view class="px-15 leading-normal mt-10 text-base text-dark pb-50">
          {{ reason }}
        </view>
      </template>
      <view v-if="btns" class="footer-buttons">
        <button-footer hideden-shadow :cancelText="btns.cancelText" :confirmText="btns.confirmText"
          :showCancel="btns.showCancel" :showConfirm="btns.showConfirm" @confirm="confirm()" @cancel="close()" />
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { storeToRefs } from "pinia";
import useAccountStore from "@/store/account.js";
import api from "@/utils/api.js";
import { toast } from '@/utils/widget';

import ButtonFooter from '@/components/button-footer.vue';

const emits = defineEmits(['close', 'confirm'])
const props = defineProps({
  status: {
    type: String,
    default: ''
  },
  visible: {
    type: Boolean,
    default: false
  }
})
const popup = ref();
const status = ref('');
const reason = ref('');
const { account, doctorInfo } = storeToRefs(useAccountStore());

const btns = computed(() => {
  if (status.value === 'unverified') {
    return { showCancel: true, showConfirm: true, confirmText: '去认证' }
  }
  if (status.value === 'verified') {
    return { showConfirm: false, cancelText: '我知道了' }
  }
  if (status.value === 'failed') {
    return { showCancel: true, showConfirm: true, confirmText: '重新认证' }
  }
})

function close() {
  emits('close')
}

function confirm() {
  close()
  uni.navigateTo({
    url: "/pages/work/profile?type=cert",
  });
}

function toService() {
  close()
}

async function getStatus() {
  const res = await api('getMemberVerifyStatus', { corpId: account.value.corpId, weChatOpenId: account.value.openid, id: doctorInfo.value._id })
  if (res && res.success) {
    status.value = res.data.verifyStatus;
    reason.value = res.data.reason || '';
    popup.value && popup.value.open()
  } else {
    toast(res.message);
    close()
  }
}

watch(() => props.visible, n => {
  if (n) {
    getStatus()
  } else {
    popup.value && popup.value.close()
  }
})
</script>

<style lang="scss" scoped>
.pb-50 {
  padding-bottom: 100rpx;
}
</style>