bonus-material-app/src/pages/my/index.vue

<template>
    <view class="content">
        <view class="user-info"> 用户： {{ userInfo.nickName }} </view>
        <view class="user-info"> 用户： {{ userInfo.userName }} </view>
        <view class="user-info"> 手机号：{{ userInfo.phonenumber || '13655555' }} </view>
        <view class="user-info exit-btn" @click="onSignature"> 电子签名 </view>
        <view class="user-info exit-btn" @tap="onExit"> 退出登录 </view>
    </view>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import { useMemberStore } from '@/stores'
const memberStore = useMemberStore()

// const userInfo = memberStore.userInfo || reactive({})
const userInfo = ref(memberStore.userInfo || {})


// 监听 memberStore.userInfo 的变化
watch(() => memberStore.userInfo, (newUserInfo) => {
    userInfo.value = newUserInfo
})

const onExit = () => {
    // 清除token 和用户信息 并返回登录页
    memberStore.clearUserInfo()
    memberStore.clearToken()
    uni.navigateTo({ url: '/pages/login/index' })
}

// 电子签名页
const onSignature = () => {
    uni.navigateTo({ url: '/pages/my/signature' })
}
</script>

<style scoped>
.user-info {
    width: 95%;
    margin: 15rpx auto;
    padding: 15rpx 10rpx;
    font-size: 34rpx;
    background-color: #e9f1f5;
    box-sizing: content-box;
    border-radius: 10rpx;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.exit-btn {
    font-size: 30rpx;
    background-color: #1989fa;
    color: #fff;
    text-align: center;
}
</style>