wxservice-web/src/views/mine/patient-id-cards/PatientCardInfo.vue

<template>
  <window-size>
    <van-cell title="姓名" icon="user-o" :value="card.name" />
    <van-cell title="就诊卡号" icon="credit-pay" :value="card.patientId" />
    <van-cell title="手机号" icon="phone-o" :value="card.phone" />
    <van-cell title="身份证号" icon="idcard" :value="card.socialNo" />
    <div style="height: 10px"></div>
    <van-button type="primary" plain block @click="setThisDefaultCard" :disabled="card.isDefault === 1" icon="star-o">
      设置默认就诊人
    </van-button>
    <div style="height: 10px"></div>
    <van-button type="primary" plain block @click="showEditDialog = true" icon="edit">编辑个人信息</van-button>
    <div style="height: 10px"></div>
    <van-button type="primary" plain block @click="unbindCard" icon="revoke">解除绑定</van-button>

    <van-dialog v-model:show="showEditDialog" title="编辑个人信息" show-cancel-button :before-close="modifyInfo">
      <van-field v-model="card.name" label="姓名" placeholder="请输入姓名"></van-field>
      <van-field v-model="card.socialNo" label="身份证" placeholder="请输入身份证号"></van-field>
      <van-field v-model="card.phone" type="tel" label="手机号" placeholder="请输入手机号"></van-field>
    </van-dialog>
  </window-size>
</template>

<script>
import store from '../../../store'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Dialog, Toast } from 'vant'
import {
  setDefaultCard,
  relieveBindCard,
  relieveBindCardButCanceled,
  updateBindInfo,
} from '../../../api/patient-id-cards'
import { getLocalOpenId, checkPatientId } from '../../../utils/check-patient-id'
import { isValidIdcard, isValidPhone } from '../../../utils/validate'
export default {
  name: 'PatientCardInfo',
  setup() {
    const router = useRouter()
    const paramId = router.currentRoute.value.params.patientId
    const card = computed(() => {
      let temp = {}
      store.state.patientCards.forEach((item) => {
        if (item.patientId === paramId) {
          temp = item
        }
      })
      return temp
    })
    const setThisDefaultCard = () => {
      const openId = getLocalOpenId()
      setDefaultCard(card.value.patientId, openId).then(() => {
        Toast.success('设置成功')
        checkPatientId()
      })
    }

    const showEditDialog = ref(false)
    const modifyInfo = (action) =>
      new Promise((resolve) => {
        if (action === 'cancel') {
          showEditDialog.value = false
          resolve(false)
        } else {
          if (!card.value.name) {
            Toast({
              message: '请输入姓名',
              position: 'top',
            })
            resolve(false)
            return
          }
          if (!isValidIdcard(card.value.socialNo)) {
            Toast({
              message: '请输入正确的身份证号码',
              position: 'top',
            })
            resolve(false)
            return
          }
          if (!isValidPhone(card.value.phone)) {
            Toast({
              message: '请输入正确的手机号码',
              position: 'top',
            })
            resolve(false)
            return
          }
          setTimeout(() => {
            updateBindInfo(card.value)
              .then(() => {
                Toast.success('修改个人信息成功！')
                resolve(true)
              })
              .catch(() => {
                resolve(false)
              })
          }, 500)
        }
      })
    const unbindCard = () => {
      Dialog.confirm({
        title: '提示',
        message: '是否确定解除绑定？',
      })
        .then(() => {
          const openId = getLocalOpenId()
          card.value.openId = openId
          relieveBindCard(card.value).then((res) => {
            Toast.success('解除绑定成功！')
            store.commit('SET_PATIENTCARDS', res)
            router.go(-1)
          })
        })
        .catch(() => {
          relieveBindCardButCanceled(card.value)
        })
    }
    return {
      card,
      setThisDefaultCard,
      showEditDialog,
      modifyInfo,
      unbindCard,
    }
  },
}
</script>