mall-app-t/pages/index/my.vue

<template>
    <pb-layout navbar="inner" tabbar="/pages/index/my" :bgStyle="bgStyle">
        <view class="my-module ss-p-x-30">
            <view class="user-info flex align-center justify-between">
                <view class="flex align-center ss-gap-10">
                    <image
                        class="avatar"
                        :src="userInfo.avatar || '/static/default_avatar.png'"
                        mode="aspectFill"
                    ></image>

                    <view class="detail flex flex-column justify-center gap-10">
                        <view class="name ss-font-26">{{ userInfo.nickname }}</view>
                        <view class="description ss-font-26">{{ userInfo.mobile }}</view>
                    </view>
                </view>
                <!-- <view>
                    <text style="color: #fff; font-size: 20px" class="cicon-settings-o"></text>
                </view> -->
            </view>

            <view class="statistic ss-m-t-24">
                <view class="title ss-font-24 ss-m-b-20"> 账户余额 </view>
                <view class="remain flex justify-between align-center">
                    <view class="left flex align-center">
                        <view class="unit self-start">￥</view>
                        <view class="sremain ss-font-60">{{ remain }}</view>
                    </view>
                    <button @click="peach.$router.go('/pages/user/wallet/money')" class="right-btn ss-reset-button">
                        查看详情
                    </button>
                </view>
                <view class="cent ss-m-t-20"> 总获取积分 {{ userInfo.point }} </view>
            </view>

            <view class="menu ss-m-t-70">
                <view class="title ss-m-b-30">我的服务</view>
                <view class="items">
                    <view class="item" v-for="item in state.menus" :key="item.name" @click="navService(item)">
                        <image class="icon" :src="item.icon" mode="aspectFill"></image>
                        <view class="label">{{ item.name }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="ss-p-x-30 bottom">
            <button class="ss-reset-button login-btn-start" @tap="logOut">退出登录</button>
        </view>
    </pb-layout>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import AuthUtil from '@/peach/api/member/auth'
import peach from '@/peach'

const bgStyle = {
    backgroundImage: '/static/bg-page.png',
    imageType: 'local',
    backgroundColor: '#fff',
}

const state = ref({
    menus: [
        {
            name: '余额提现',
            icon: '/static/withdraw.png',
            path: '/pages/user/wallet/withdraw',
        },
        {
            name: '购买积分',
            icon: '/static/buycent.png',
            path: '/pages/user/point/buy',
        },
        {
            name: '分发积分',
            icon: '/static/dispensecent.png',
            path: '/pages/user/point/share',
        },
        {
            name: '提现规则',
            icon: '/static/rule.png',
            path: '',
        },
    ],
})

const userStore = peach.$store('user')

const remain = computed(() => {
    return userStore.userWallet?.balance
})

const userInfo = computed(() => {
    return userStore.userInfo
})

function navService(item) {
    peach.$router.go(item.path)
}

function logOut() {
    uni.showModal({
        title: '提示',
        content: '确认退出账号？',
        success: async function (res) {
            if (!res.confirm) {
                return
            }
            await AuthUtil.logout()
            userStore.logOut()
            peach.$router.go('/pages/index/login')
        },
    })
}
onShow(() => {
    peach.$store('user').updateUserData()
})
</script>

<style lang="scss" scoped>
.my-module {
    .user-info {
        .avatar {
            width: 80rpx;
            height: 80rpx;
            margin-right: 20rpx;
        }

        .detail {
            .name {
                color: #fff;
            }

            .description {
                color: #fff;
                opacity: 0.4;
            }
        }
    }

    .statistic {
        height: 200rpx;
        background-color: #fffefe;
        opacity: 0.9;
        border-radius: 26rpx;
        padding: 31rpx 40rpx;

        .title {
            font-weight: 500;
            color: var(--ui-TC);
            font-size: 24rpx;
        }

        .remain {
            .left {
                font-weight: 600;
                flex: 1;
                color: var(--ui-BG-Main);

                .unit {
                    position: relative;
                    top: 4px;
                }
            }

            .right-btn {
                width: 161rpx;
                height: 63rpx;
                background-color: var(--ui-BG-Main);
                color: #fff;
            }
        }

        .cent {
            color: var(--ui-TC-2);
            font-size: 24rpx;
        }
    }

    .menu {
        .title {
            font-weight: 600;
        }

        .items {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30rpx 30rpx;

            .item {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                gap: 23rpx;

                .icon {
                    width: 94rpx;
                    height: 94rpx;
                }

                .label {
                    font-size: 22rpx;
                    color: #0c0c0cff;
                }
            }
        }
    }
}

.bottom {
    position: absolute;
    bottom: 70px;
    width: calc(100% - 60rpx);

    .login-btn-start {
        height: 82rpx;
        line-height: normal;
        background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
        border-radius: 28rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #fff;
    }
}
</style>