englishread-front/pages/index/user.vue

<template>
    <view class="user-container">
        <!-- 用户信息区域 -->
        <view class="user-info-section">
            <!-- #ifndef H5 -->

            <view class="page-title">我的</view>
            <!-- #endif -->
            <view class="user-info">
                <view class="user-avatar" @click="goLogin">
                    <image
                        :src="isLogin ? userInfo.avatar === 'undefined' ? displayInfo.avatar : userInfo.avatar : displayInfo.avatar"
                        mode="aspectFill"></image>
                </view>
                <view class="user-details" @click="clickInfo">

                    <view class="user-name">{{ isLogin ? userInfo.name : displayInfo.name }}</view>
                    <view class="user-phone">手机号：{{ isLogin ? userInfo.phone || displayInfo.phone : displayInfo.phone }}
                    </view>
                    <!-- <view class="user-desc">{{ displayInfo.description }}</view> -->
                </view>
            </view>
        </view>

        <!-- 功能菜单列表 -->
        <!-- 第一组菜单 -->
        <!-- 会员中心 -->
        <view class="menu-item special-item" @click="goToMember">
            <view class="menu-left">
                <image src="/static/member-diamond.png" class="menu-icon"></image>
                <text class="menu-title">会员中心</text>
            </view>
            <view class="menu-right">
                <uv-button shape="circle" :customStyle="{
                    width: '170rpx',
                    height: '70rpx',
                    fontSize: '28rpx',
                    fontWeight: '500',
                    lineHeight: '70rpx',
                    letterSpacing: '0%',
                    verticalAlign: 'middle',
                    backgroundColor: '#06DADC',
                    color: '#fff',
                }">查看会员</uv-button>
            </view>
        </view>

        <view class="menu-list">

            <!-- 推广中心 -->
            <view class="menu-item" @click="goToPromotion" v-if="userInfo.isPromote === 'Y'">
                <view class="menu-left">
                    <image src="/static/promotion-icon.png" class="menu-icon"></image>
                    <text class="menu-title">推广中心</text>
                </view>
                <view class="menu-right">
                    <uv-icon name="arrow-right" color="#999" size="16"></uv-icon>
                </view>
            </view>

            <!-- 我的优惠券 -->
            <view class="menu-item" @click="goToCoupons">
                <view class="menu-left">
                    <image src="/static/coupon-icon.png" class="menu-icon"></image>
                    <text class="menu-title">我的优惠券</text>
                </view>
                <view class="menu-right">
                    <uv-icon name="arrow-right" color="#999" size="16"></uv-icon>
                </view>
            </view>

            <!-- 产品介绍 -->
            <view class="menu-item" @click="goToProduct">
                <view class="menu-left">
                    <image src="/static/intro-icon.png" class="menu-icon"></image>
                    <text class="menu-title">产品介绍</text>
                </view>
                <view class="menu-right">
                    <uv-icon name="arrow-right" color="#999" size="16"></uv-icon>
                </view>
            </view>
        </view>

        <!-- 第二组菜单 -->
        <view class="menu-list">
            <!-- 联系我们 -->
            <view class="menu-item" @click="goToContact">
                <view class="menu-left">
                    <image src="/static/contact-icon.png" class="menu-icon"></image>
                    <text class="menu-title">联系我们</text>
                </view>
                <view class="menu-right">
                    <uv-icon name="arrow-right" color="#999" size="16"></uv-icon>
                </view>
            </view>

            <!-- 服务协议与隐私政策 -->
            <view class="menu-item" @click="goToPolicy">
                <view class="menu-left">
                    <image src="/static/privacy-icon.png" class="menu-icon"></image>
                    <text class="menu-title">服务与隐私</text>
                </view>
                <view class="menu-right">
                    <text class="menu-arrow">></text>
                </view>
            </view>

            <view class="menu-item" @click="goToProfile">
                <view class="menu-left">
                    <image src="/static/edit-info-icon.png" class="menu-icon"></image>
                    <text class="menu-title">修改信息</text>
                </view>
                <view class="menu-right">
                    <uv-icon name="arrow-right" color="#999" size="16"></uv-icon>
                </view>
            </view>

            <view class="menu-item" @click="logout" v-if="isLogin">
                <view class="menu-left">
                    <image src="/static/logout-icon.png" class="menu-icon"></image>
                    <text class="menu-title">退出登录</text>
                </view>
                <view class="menu-right">
                    <uv-icon name="arrow-right" color="#999" size="16"></uv-icon>
                </view>
            </view>
        </view>

        <view>
            <uv-popup ref="contactModal" closeIconPos="top-left" closeable round="30rpx" :safeAreaInsetBottom="false">
                <view class="contact-content">
                    <view class="title">联系我们</view>
                    <view class="contact-item" @click="callPhone">
                        <text class="contact-phone">{{ configParamContent('contact_us') }}</text>
                        <image src="/static/phone-icon.png" class="contact-icon"></image>
                    </view>
                </view>
            </uv-popup>
        </view>
    </view>
</template>

<script>

export default {
    data() {
        return {
            userInfo: {
                avatar: '/static/default-avatar.png',
                name: '请先登录',
                id: 'XXXXX'
            },
            isLogin: uni.getStorageSync('token'),
            // 用户展示信息
            displayInfo: {
                name: '点击登录',
                phone: 'xxxxxxxxx',
                avatar: '/static/default-avatar.png'
            }
        }
    },
    computed: {
        // 检查是否已登录

    },
    onShow() {
        this.isLogin = uni.getStorageSync('token')
        // 如果没登陆过 就别登了
        if (uni.getStorageSync('token')) {

            this.getUserInfo();
        }
    },
    methods: {
        // 拨打电话
        callPhone() {
            uni.makePhoneCall({
                phoneNumber: this.configParamContent('contact_us'),
            })
        },
        // 跳转登录页面
        goLogin() {
            if (!this.isLogin) {
                uni.navigateTo({
                    url: '/subPages/login/login'
                })
            } else {
                uni.navigateTo({
                    url: '/subPages/user/profile'
                })
            }
        },

        // 跳转到基本信息页面
        goToBasicInfo() {
            uni.navigateTo({
                url: '/subPages/user/profile'
            })
        },

        // 获取用户信息
        async getUserInfo() {
            const res = await this.$api.login.getUserInfo();
            if (res.code === 200) {
                this.userInfo = res.result;
                // 存储用户信息到store
                this.$store.dispatch('updateUserInfo', this.userInfo)
            }
        },

        // 显示隐私政策弹窗
        showPrivacyPolicy() {
            this.$refs.privacyModal.open()
        },

        // 跳转到会员页面
        goToMember() {
            uni.switchTab({
                url: '/pages/index/member'
            })
        },

        // 跳转到推广中心
        goToPromotion() {
            uni.navigateTo({
                url: '/subPages/user/promote'
            })
        },

        // 跳转到我的优惠券
        goToCoupons() {
            uni.navigateTo({
                url: '/subPages/user/discount'
            })
        },

        // 跳转到产品介绍
        goToProduct() {
            uni.navigateTo({ url: '/subPages/user/introduce' })
        },

        //// 跳转到联系我们
        goToContact() {
            this.$refs.contactModal.open('bottom')
        },

        // 跳转到隐私政策页面
        goToPolicy() {
            uni.navigateTo({
                url: '/subPages/user/policy'
            })
        },

        // 跳转到登陆页面
        clickInfo() {
            if (!this.isLogin) {

                uni.navigateTo({
                    url: '/subPages/login/login'
                })
            } else {
                uni.navigateTo({
                    url: '/subPages/user/profile'
                })
            }
        },

        // 退出登录
        logout() {
            uni.showModal({
                title: '提示',
                content: '确定要退出登录吗？',
                confirmColor: '#06DADC',
                success: (res) => {
                    if (res.confirm) {
                        // 清除本地存储的用户信息
                        uni.removeStorageSync('token')
                        // 清空store中的用户信息
                        this.$store.commit('updateUserInfo', {})

                        // 重置用户信息
                        this.userInfo = {
                            avatar: '/static/default-avatar.png',
                            name: '请先登录',
                            id: 'XXXXX'
                        }

                        this.isLogin = false;

                        // 显示退出成功提示
                        uni.showToast({
                            title: '退出成功',
                            icon: 'success'
                        })
                    }
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.user-container {
    min-height: 100vh;
    background: #fff;

    /* 用户信息区域 */
    .user-info-section {
        background: linear-gradient(180deg, #ABFFFF 0%, #FFFFFF 100%);

        height: 300rpx;

        /* #ifdef H5 */
        height: 200rpx;
        /* #endif */
        // display: flex;
        // align-items: center;
        padding: 60rpx 32rpx 0rpx;
        gap: 40rpx;

        .user-info {
            display: flex;
            align-items: center;
        }

        .page-title {
            text-align: center;
            margin: 0 auto;
            margin-top: 60rpx;
            margin-bottom: 40rpx;
            font-size: 32rpx;
            font-weight: 500;
        }
    }

    .user-avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 30rpx;
        border: 2px solid #FFFFFF;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .user-details {
        flex: 1;
    }

    .user-name {
        font-size: 36rpx;
        line-height: 44rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
    }

    .user-phone {
        font-size: 24rpx;
        color: #252545;
        margin-bottom: 8rpx;
    }

    .user-desc {
        font-size: 24rpx;
        color: #252545;
    }

    /* 菜单列表 */
    .menu-list {
        background: #F8F8F8;
        border-radius: 32rpx;
        overflow: hidden;
        margin: 0 32rpx;
        margin-bottom: 32rpx;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .menu-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 40rpx 30rpx;
        border: 2rpx solid #F2F2F2;

        &:last-child {
            border-bottom: none;
        }

        &.special-item {
            background: linear-gradient(180deg, #DEFFFF 0%, #FBFEFF 22.65%, #F0FBFF 100%);
            border: 1px solid #06DADC12;
            height: 98rpx;
            border-radius: 32rpx;
            border-width: 2rpx;
            padding-top: 12rpx;
            padding-right: 40rpx;
            padding-bottom: 12rpx;
            padding-left: 40rpx;
            gap: 24rpx;
            margin: 0 32rpx;
            margin-bottom: 32rpx;

            .menu-icon {
                width: 60rpx;
                height: 60rpx;
            }

            .menu-title {
                font-size: 36rpx;
                font-weight: 600;
            }
        }
    }

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

    .menu-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 20rpx;
    }

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

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

    /* 联系我们弹窗样式 */
    .contact-content {

        // padding: 40rpx 0;
        .title {
            height: 90rpx;
            text-align: center;
            line-height: 90rpx;
            font-size: 34rpx;
            font-weight: 500;
            border-bottom: 2rpx solid #EEEEEE
        }

        // text-align: center;
    }

    .contact-item {
        // background: red;
        height: 240rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20rpx;
    }

    .contact-icon {
        width: 72rpx;
        height: 72rpx;
    }

    .contact-phone {
        font-size: 36rpx;
        color: #181818;

    }
}
</style>