PatientCardInfo.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <template>
  2. <window-size>
  3. <div style="margin-top: 12px">
  4. <div id="qrcode" :style="qrMargin"></div>
  5. </div>
  6. <div class="barcode-wrapper">
  7. <svg id="barcode"></svg>
  8. </div>
  9. <div style="height: 10px"></div>
  10. <van-cell title="姓名" icon="user-o" :value="card.name" />
  11. <van-cell title="就诊卡号" icon="credit-pay" :value="card.patientId" />
  12. <van-cell title="手机号" icon="phone-o" :value="card.phone" />
  13. <van-cell title="身份证号" icon="idcard" :value="card.socialNo" />
  14. <div style="height: 10px"></div>
  15. <van-button type="primary" plain block @click="setThisDefaultCard" :disabled="card.isDefault === 1" icon="star-o">
  16. 设置默认就诊人
  17. </van-button>
  18. <div style="height: 10px"></div>
  19. <van-button type="primary" plain block @click="showEditDialog = true" icon="edit">编辑个人信息</van-button>
  20. <div style="height: 10px"></div>
  21. <van-button type="primary" plain block @click="unbindCard" icon="revoke">解除绑定</van-button>
  22. <van-dialog v-model:show="showEditDialog" title="编辑个人信息" show-cancel-button :before-close="modifyInfo">
  23. <van-field v-model="card.name" label="姓名" placeholder="请输入姓名"></van-field>
  24. <van-field v-model="card.socialNo" label="身份证" placeholder="请输入身份证号"></van-field>
  25. <van-field v-model="card.phone" type="tel" label="手机号" placeholder="请输入手机号"></van-field>
  26. </van-dialog>
  27. </window-size>
  28. </template>
  29. <script>
  30. import store from '../../../store'
  31. import {computed, onMounted, ref} from 'vue'
  32. import {useRouter} from 'vue-router'
  33. import {Dialog, Toast} from 'vant'
  34. import {
  35. relieveBindCard,
  36. relieveBindCardButCanceled,
  37. setDefaultCard,
  38. updateBindInfo,
  39. } from '../../../api/patient-id-cards'
  40. import {checkPatientId, getLocalOpenId} from '../../../utils/check-patient-id'
  41. import {isValidIdcard, isValidPhone} from '../../../utils/validate'
  42. import {qrcanvas} from 'qrcanvas'
  43. import JsBarcode from "jsbarcode";
  44. export default {
  45. name: 'PatientCardInfo',
  46. setup() {
  47. const windowSize = store.state.windowSize
  48. const qrMargin = {
  49. marginLeft: (windowSize.w - 164) / 2 + 'px',
  50. }
  51. const router = useRouter()
  52. const paramId = router.currentRoute.value.params.patientId
  53. const card = computed(() => {
  54. let temp = {}
  55. store.state.patientCards.forEach((item) => {
  56. if (item.patientId === paramId) {
  57. temp = item
  58. }
  59. })
  60. return temp
  61. })
  62. const setThisDefaultCard = () => {
  63. const openId = getLocalOpenId()
  64. setDefaultCard(card.value.patientId, openId).then(() => {
  65. Toast.success('设置成功')
  66. checkPatientId()
  67. })
  68. }
  69. const showEditDialog = ref(false)
  70. const modifyInfo = (action) =>
  71. new Promise((resolve) => {
  72. if (action === 'cancel') {
  73. showEditDialog.value = false
  74. resolve(false)
  75. } else {
  76. if (!card.value.name) {
  77. Toast({
  78. message: '请输入姓名',
  79. position: 'top',
  80. })
  81. resolve(false)
  82. return
  83. }
  84. if (!isValidIdcard(card.value.socialNo)) {
  85. Toast({
  86. message: '请输入正确的身份证号码',
  87. position: 'top',
  88. })
  89. resolve(false)
  90. return
  91. }
  92. if (!isValidPhone(card.value.phone)) {
  93. Toast({
  94. message: '请输入正确的手机号码',
  95. position: 'top',
  96. })
  97. resolve(false)
  98. return
  99. }
  100. setTimeout(() => {
  101. updateBindInfo(card.value)
  102. .then(() => {
  103. Toast.success('修改个人信息成功!')
  104. resolve(true)
  105. })
  106. .catch(() => {
  107. resolve(false)
  108. })
  109. }, 500)
  110. }
  111. })
  112. const unbindCard = () => {
  113. Dialog.confirm({
  114. title: '提示',
  115. message: '是否确定解除绑定?',
  116. })
  117. .then(() => {
  118. card.value.openId = getLocalOpenId()
  119. relieveBindCard(card.value).then((res) => {
  120. Toast.success('解除绑定成功!')
  121. store.commit('SET_PATIENTCARDS', res)
  122. router.go(-1)
  123. })
  124. })
  125. .catch(() => {
  126. relieveBindCardButCanceled(card.value)
  127. })
  128. }
  129. const drawQrcode = (patNo) => {
  130. const canvas = qrcanvas({
  131. data: patNo,
  132. size: 164,
  133. })
  134. document.getElementById('qrcode').appendChild(canvas)
  135. }
  136. const drawBarcode = (patNo) => {
  137. JsBarcode('#barcode', '317452-0', {
  138. lineColor: 'rgb(0, 80, 100)',
  139. width: 2, //线宽
  140. height: 50, //条码高度
  141. displayValue: true,
  142. fontSize: 16,
  143. background: 'rgb(251, 251, 255)',
  144. })
  145. }
  146. onMounted(() => {
  147. drawQrcode(paramId)
  148. drawBarcode(paramId)
  149. })
  150. return {
  151. qrMargin,
  152. card,
  153. setThisDefaultCard,
  154. showEditDialog,
  155. modifyInfo,
  156. unbindCard,
  157. }
  158. },
  159. }
  160. </script>
  161. <style scoped>
  162. .barcode-wrapper {
  163. display: flex;
  164. align-items: center;
  165. justify-content: center;
  166. }
  167. </style>