<!-- 姓名部分 -->
<van-cell
        title="名稱"
        is-link
        :value="profile.name"
        @click="showNameDialogFn" />
<!-- 修改用戶名稱的對話框 -->
<van-dialog
      v-model="isShowNameDialog"
      title="修改名稱"
      show-cancel-button
      :before-close="onNameDialogBeforeClose">
      <!-- 輸入框 -->
      <van-field
        v-model.trim="userName"
        input-align="center"
        maxlength="7"
        placeholder="請輸入名稱"
        v-fofo
      />
</van-dialog>
<script>
export default {
  data () {
    return {
      isShowNameDialog: false, // 是否顯示姓名彈出框
      userName: '' // 編輯用戶名
    }
  },
  methods: {
    // 點(diǎn)擊名字-出現(xiàn)彈出框
    showNameDialogFn () {
      this.isShowNameDialog = true
      this.userName = this.profile.name // 設(shè)置默認(rèn)顯示內(nèi)容
    },
    // 姓名修改彈出層-關(guān)閉前方法
    onNameDialogBeforeClose (action, done) {
    }
  }
}
</script>

// 姓名修改彈出層-關(guān)閉前方法
async onNameDialogBeforeClose (action, done) {
    // action的值: confirm或cancel(點(diǎn)擊按鈕區(qū)分)
    if (action === 'confirm') {
        // 確定
        // unicode編碼 \u4092
        // url編碼 %E2%C3%D1
        if (/^[A-Za-z0-9\u4e00-\u9fa5]{1,7}$/.test(this.userName)) {
            // 通過校驗(yàn)
            // 調(diào)用接口
            // 更新頁面顯示的名字
            // 關(guān)閉彈窗
            done()
        } else {
            // 提示用戶
            Notify({ type: 'warning', message: '用戶名中英文和數(shù)字1-7位' })
            // 阻止彈窗關(guān)閉
            done(false)
        }
    } else if (action === 'cancel') {
        // 取消
        done()
    }
}

// 用戶 - 更新資料
export const updateProfileAPI = ({ birthday, userName }) => {
  return request({
    url: '/v1_0/user/profile',
    method: 'PATCH',
    data: {
      birthday: birthday,
      name: userName
    }
  })
}

import { updateProfileAPI } from '@/api'
if (/^[A-Za-z0-9\u4e00-\u9fa5]{1,7}$/.test(this.userName)) {
    // 通過校驗(yàn)
    // 調(diào)用接口
    await updateProfileAPI({
        userName: this.userName
    })
    // 更新頁面顯示的名字
    this.profileObj.name = this.userName
    // 關(guān)閉彈窗
    done()
}