designer-hub/packages/app/src/pages/mine/setting/mobile/index.vue

<route lang="json">
{ "style": { "navigationBarTitleText": "手机号" } }
</route>
<script setup lang="ts">
import BottomAppBar from '@/components/bottom-app-bar.vue'
import { useUserStore } from '../../../../store'
const userStore = useUserStore()
const { userInfo } = userStore
const handleModify = () => {
  uni.navigateTo({
    url: '/pages/mine/setting/mobile/modify/index',
  })
}
</script>
<template>
  <div class="flex-grow bg-white px-4">
    <div class="px-3.5">
      <div
        class="mt-26.25 text-black/90 text-base font-normal font-['PingFang_SC'] leading-[10.18px]"
      >
        您已绑定手机号
      </div>
      <div class="mt-8.25 text-black/90 text-2xl font-normal font-['PingFang_SC'] leading-none">
        {{ userInfo.mobile?.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}
      </div>
    </div>
    <BottomAppBar fixed :border="false">
      <wd-button block :round="false" @click="handleModify">去更换</wd-button>
    </BottomAppBar>
  </div>
</template>