gz_att_web_wechat/src/pages/my/index.vue

<template>
    <view class="container">
        <!-- 用户信息区域 -->
        <view class="user-info">
            <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
            <view class="user-detail">
                <text class="username">{{ userInfo.name }}</text>
                <text class="phone">{{ userInfo.phone }}</text>
            </view>
        </view>

        <view class="menu-list">
            <view class="menu-item" @tap="onChangePassword">
                <view class="menu-item-left">
                    <image
                        style="width: 20px; height: 20px; margin-right: 10px"
                        src="/static/updatePassword.png"
                        mode="aspectFit"
                    ></image>
                    <text class="menu-text">修改密码</text>
                </view>
                <image
                    style="width: 20px; height: 20px"
                    src="/static/more.png"
                    mode="aspectFit"
                ></image>
            </view>

            <view class="menu-item" @tap="onCheckForUpdates">
                <view class="menu-item-left">
                    <image
                        style="width: 20px; height: 20px; margin-right: 10px"
                        src="/static/version.png"
                        mode="aspectFit"
                    ></image>
                    <text class="menu-text">检查新版本</text>
                </view>
                <text class="version">{{ version }}</text>
            </view>
        </view>

        <button class="logout-btn" @tap="onLogout">退出登录</button>
    </view>
</template>

<script>
    import { getUsetInfo } from '@/api/index.js'
    export default {
        data() {
            return {
                userInfo: {
                    name: '',
                    phone: '',
                    avatar: '/static/defaultHead.png',
                },
                version: '3.1.8',
            }
        },
        onLoad() {
            // develop开发版  trial体验版  release正式版
            let miniProgram = wx.getAccountInfoSync().miniProgram
            if (miniProgram == 'release' || miniProgram == 'trial') {
                this.version = wx.getAccountInfoSync().miniProgram.version || this.version
            }
        },
        onShow() {
            this.getUsetInfoEvent()
        },
        mounted() {
            // 在组件挂载后读取存储的数据
            this.userInfo.name = uni.getStorageSync('username') || ''
            this.userInfo.phone = uni.getStorageSync('phone') || ''
            if (/^1\d{10}$/.test(this.userInfo.phone)) {
                this.userInfo.phone = this.maskPhoneNumber(this.userInfo.phone)
            }
        },
        methods: {
            // 获取用户信息
            getUsetInfoEvent() {
                getUsetInfo(uni.getStorageSync('userId')).then((res) => {
                    if (res.res == 1) {
                        if (res.obj && res.obj.appliedFace) {
                            if (
                                res.obj.appliedFace == '' ||
                                res.obj.appliedFace == null ||
                                res.obj.appliedFace == 'null'
                            ) {
                                this.userInfo.avatar = '/static/defaultHead.png'
                            } else {
                                this.userInfo.avatar = res.obj.appliedFace
                            }
                        }
                    }
                })
            },
            maskPhoneNumber(phoneNumber) {
                return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
            },
            onChangePassword() {
                uni.navigateTo({
                    url: '/pages/password/index',
                })
            },
            /**
             * 检查并处理小程序更新
             */
            onCheckForUpdates() {
                const updateManager = uni.getUpdateManager()

                // 检查更新
                updateManager.onCheckForUpdate((res) => {
                    console.log('[App] 是否有新版本:', res.hasUpdate)
                    if (!res.hasUpdate) {
                        uni.showToast({
                            title: '已是最新版本',
                            icon: 'none',
                        })
                    }
                })

                // 监听新版本下载成功
                updateManager.onUpdateReady(() => {
                    this.promptForUpdate(updateManager)
                })

                // 监听新版本下载失败
                updateManager.onUpdateFailed(() => {
                    console.error('[App] 新版本下载失败')
                })
            },

            /**
             * 提示用户应用新版本
             * @param {Object} updateManager - 更新管理对象
             */
            promptForUpdate(updateManager) {
                uni.showModal({
                    title: '更新提示',
                    content: '新版本已准备好，是否重启应用？',
                    showCancel: false,
                    success: (res) => {
                        if (res.confirm) {
                            console.log('[App] 用户确认重启应用')
                            updateManager.applyUpdate()
                        }
                    },
                })
            },
            onLogout() {
                uni.showModal({
                    title: '提示',
                    content: '确认退出登录？',
                    success: (res) => {
                        if (res.confirm) {
                            // 执行退出登录逻辑
                            uni.clearStorageSync()
                            uni.setStorageSync('isLoginOut', 'yes')
                            uni.reLaunch({
                                url: '/pages/login/index',
                            })
                        }
                    },
                })
            },
        },
    }
</script>

<style lang="scss">
    .container {
        min-height: 100vh;
        background-color: #f5f5f5;
        padding: 32rpx;
    }

    .user-info {
        display: flex;
        align-items: center;
        margin-bottom: 30rpx;

        .avatar {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            margin-right: 20rpx;
        }

        .user-detail {
            display: flex;
            flex-direction: column;

            .username {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 6rpx;
            }

            .phone {
                font-size: 28rpx;
                color: #666;
            }
        }
    }

    .menu-list {
        background-color: #fff;
        border-radius: 16rpx;
        overflow: hidden;
    }

    .menu-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32rpx;
        border-bottom: 2rpx solid #f5f5f5;
    }

    .menu-item:last-child {
        border-bottom: none;
    }

    .menu-item-left {
        display: flex;
        align-items: center;
    }

    .iconfont {
        font-size: 40rpx;
        margin-right: 20rpx;
        color: #666;
    }

    .menu-text {
        font-size: 32rpx;
        color: #333;
    }

    .version {
        font-size: 32rpx;
        color: #999;
    }

    .icon-arrow {
        color: #999;
        margin-right: 0;
    }

    .logout-btn {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        background-color: #4080ff;
        color: #fff;
        border-radius: 44rpx;
        font-size: 32rpx;
        margin-top: 60rpx;
    }

    /* 去除按钮默认边框 */
    .logout-btn::after {
        border: none;
    }

    /* 按钮点击效果 */
    .logout-btn:active {
        opacity: 0.8;
    }
</style>