添加修改个人信息功能。

src/api/patient-id-cards.js

@@ -32,6 +32,14 @@ export function setDefaultCard(patientId, openId) {
   })
 }
 
+export function updateBindInfo(data) {
+  return request({
+    url: '/patientCards/updateBindInfo',
+    method: 'post',
+    data,
+  })
+}
+
 export function relieveBindCard(data) {
   return request({
     url: '/patientCards/relieveBindCard',

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

@@ -1,24 +1,39 @@
 <template>
   <window-size>
     <van-cell title="姓名" icon="user-o" :value="card.name" />
-    <van-cell title="就诊卡号" icon="idcard" :value="card.patientId" />
+    <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"
-      >设置默认就诊人</van-button
-    >
+    <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="unbindCard">解除绑定</van-button>
+    <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 } from 'vue'
+import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { Dialog, Toast } from 'vant'
-import { setDefaultCard, relieveBindCard, relieveBindCardButCanceled } from '../../../api/patient-id-cards'
+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() {
@@ -40,6 +55,50 @@ export default {
         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: '提示',
@@ -61,6 +120,8 @@ export default {
     return {
       card,
       setThisDefaultCard,
+      showEditDialog,
+      modifyInfo,
       unbindCard,
     }
   },