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

<template>
  <window-size>
    <div id="paddingRightZero">
      <van-cell title="关系">
        <template #right-icon>
          <van-radio-group v-model="card.relation" direction="horizontal">
            <van-radio name="1">本人</van-radio>
            <van-radio name="2">他人</van-radio>
          </van-radio-group>
        </template>
      </van-cell>
    </div>
    <div style="height: 5px"></div>
    <van-field v-model="card.name" label="姓名" type="text" placeholder="请输入姓名" />
    <div style="height: 5px"></div>
    <van-cell>
      <span style="font-size: 13px; color: gray">门诊号/就诊卡/身份证</span>
      <div style="height: 5px"></div>
      <van-radio-group v-model="card.cardType" direction="horizontal">
        <van-radio name="0">门诊号</van-radio>
        <van-radio name="1">就诊卡</van-radio>
        <van-radio name="2">身份证</van-radio>
      </van-radio-group>
    </van-cell>
    <van-field v-model="card.cardNo" :placeholder="cardNoHint" />
    <div style="height: 5px"></div>
    <van-field v-model="card.phone" type="tel" placeholder="请输入手机号" />
    <div style="height: 5px"></div>
    <van-field
      readonly
      clickable
      name="area"
      v-model="card.address"
      label="住址地区"
      placeholder="点击选择省市区"
      @click="showArea = true"
    />
    <van-popup v-model:show="showArea" position="bottom">
      <van-area :area-list="allArea" value="430105" @confirm="onConfirmArea" @cancel="showArea = false" />
    </van-popup>
    <van-field v-model="card.street" label="街道、小区" type="text" placeholder="请输入住址所在街道、小区" />
    <div style="height: 10px"></div>
    <van-button type="primary" block icon="checked" @click="bindCard">立即绑定</van-button>
  </window-size>
  <van-dialog v-model:show="multipleCards.show" title="请选择一张就诊卡" @confirm="bindSelectCard">
    <van-radio-group v-model="multipleCards.cardNo">
      <div style="height: 30px"></div>
      <div id="smallRadio">
        <van-row>
          <van-col span="6"><div style="width: 100%; text-align: center">姓名</div></van-col>
          <van-col span="6"><div style="width: 100%; text-align: center">就诊卡号</div></van-col>
          <van-col span="8"><div style="width: 100%; text-align: center">上次就诊</div></van-col>
          <van-col span="4">选择</van-col>
        </van-row>
        <div style="height: 30px"></div>
        <div v-for="item in multipleCards.cards" :key="item.patientId">
          <van-row @click="multipleCards.cardNo = item.patientId">
            <van-col span="6"
              ><div style="width: 100%; text-align: center">
                {{ item.name }}
              </div></van-col
            >
            <van-col span="6"
              ><div style="width: 100%; text-align: center">
                {{ item.patientId }}
              </div></van-col
            >
            <van-col span="8"
              ><div style="width: 100%; text-align: center">
                {{ item.lvDate }}
              </div></van-col
            >
            <van-col span="4">
              <van-radio :name="item.patientId" />
            </van-col>
          </van-row>
          <div style="height: 20px"></div>
        </div>
      </div>
    </van-radio-group>
  </van-dialog>
</template>

<script>
import store from '../../../store'
import { computed, onMounted, reactive, ref } from 'vue'
import allArea from '../../../utils/area'
import { getLocalOpenId } from '../../../utils/check-patient-id'
import { bindPatientId } from '../../../api/patient-id-cards'
import { validateBindPatientId } from '../../../utils/validate'
import { Dialog, Toast } from 'vant'
import router from '../../../router'
export default {
  name: 'BindPatientCard',
  setup() {
    const card = reactive({
      openId: getLocalOpenId(),
      relation: '1',
      name: '',
      cardType: '0',
      cardNo: '',
      phone: '',
      province: '',
      city: '',
      district: '',
      street: '',
    })
    const cardNoHint = computed(() => {
      const type = card.cardType
      if (type === '0') {
        return '请输入门诊ID号'
      } else if (type === '1') {
        return '请输入就诊卡号码'
      } else {
        return '请输入身份证号码'
      }
    })
    const showArea = ref(false)
    const onConfirmArea = (values) => {
      card.province = values[0].code
      card.city = values[1].code
      card.district = values[2].code
      card.address = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/')
      showArea.value = false
    }
    const multipleCards = reactive({
      show: false,
      cards: [],
      cardNo: '',
    })
    const bindCard = () => {
      const validate = validateBindPatientId(card)
      if (validate === 'success') {
        bindPatientId(card).then((res) => {
          if (res.code === 0) {
            Toast.success('绑定成功')
            store.commit('SET_PATIENTCARDS', res.cards)
            router.go(-1)
          } else {
            multipleCards.cards = res.cards
            multipleCards.show = true
          }
        })
      } else {
        Dialog.alert({
          title: '提示',
          message: validate,
        })
      }
    }
    const bindSelectCard = () => {
      multipleCards.cards.forEach((item) => {
        if (item.patientId === multipleCards.cardNo) {
          card.name = item.name
          card.cardType = '1'
          card.cardNo = item.patientId
          bindPatientId(card).then((res) => {
            Toast.success('绑定成功')
            store.commit('SET_PATIENTCARDS', res.cards)
            router.go(-1)
          })
        }
      })
    }
    onMounted(() => {
      if (store.state.patientCards.length > 0) {
        card.relation = '2'
      }
    })
    return {
      card,
      cardNoHint,
      showArea,
      allArea,
      onConfirmArea,
      bindCard,
      multipleCards,
      bindSelectCard,
    }
  },
}
</script>

<style>
#paddingRightZero .van-cell {
  padding-right: 0;
}

#smallRadio {
  font-size: 13px;
  color: gray;
}

#smallRadio .van-radio__icon {
  font-size: 15px;
}
</style>