book-hi/pages/mine/index.vue

<template>
    <view class="mine-page">
        <!-- 顶部用户信息 -->
        <view class="user-info">
            <view class="user-header" @tap="handleUpdateUserInfo">
                <view class="user-avatar">
                    <image class="avatar" :src="userInfo.imgPath || 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/logo3.png'" mode="aspectFill"></image>
                </view>
                <view class="user-detail">
                    <view class="nickname">{{ userInfo.nickName }}</view>
                    <view class="user-tag" v-for="(tag, index) in userInfo.tags" :key="index">{{ tag }}</view>
                </view>
            </view>

            <!-- 用户数据 -->
            <view class="user-data">
                <view class="data-item" @click="navigateToTool('/pages-mine/pages/wallet')">
                    <view class="amount">{{ userInfo.accountMoney || 0 }}</view>
                    <view class="label">我的钱包</view>
                </view>
                <view class="data-item">
                    <view class="amount">{{ userInfo.couponNum || 0 }}</view>
                    <view class="label">优惠券</view>
                    <view class="badge" v-if="userInfo.couponNum">{{ userInfo.couponNum }}张可领</view>
                </view>
                <view class="data-item">
                    <view class="amount">{{ userInfo.point || 0 }}</view>
                    <view class="label">我的积分</view>
                </view>
            </view>
        </view>

        <!-- 卖书订单 -->
        <view class="order-section">
            <view class="section-header">
                <text>卖书订单</text>
                <view class="view-all" @click="viewAllOrders">
                    <text>查看全部</text>
                    <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                </view>
            </view>
            <view class="order-types" style="padding: 0 20rpx;">
                <view class="type-item flex-d flex-a-c" v-for="(item, index) in orderTypes" :key="index"
                    @click="navigateToOrder(item.path)">
                    <image class="type-icon" :src="'/pages-mine/static/' + item.icon" mode="aspectFit"></image>
                    <text>{{ item.name }}</text>
                    <view class="badge" v-if="item.badge">{{ item.badge }}</view>
                </view>
            </view>
        </view>

        <!-- 实用工具 -->
        <view class="tools-section">
            <view class="section-title">实用工具</view>
            <view class="tools-grid">
                <view class="tool-item flex-d flex-a-c" v-for="(tool, index) in tools" :key="index"
                    @click="navigateToTool(tool.path)">
                    <image class="tool-icon" :src="'/pages-mine/static/' + tool.icon" mode="aspectFit"></image>
                    <text>{{ tool.name }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            userInfo: {
                userId: 0,
                openid: '',
                imgPath: '',
                nickName: '这里是微信昵称.',
                mobile: '',
                tags: [],
                accountMoney: 0,
                couponNum: 0,
                point: 0,
                firstAuditNum: 0,
                pickUpNum: 0,
                auditNum: 0,
                payNum: 0,
                refundNum: 0
            },
            orderTypes: [
                { name: '待初审', icon: '1.png', badge: 0,key:"firstAuditNum", path: '/pages-mine/pages/order-page?status=2' },
                { name: '待取件', icon: '2.png', badge: 0,key:"pickUpNum", path: '/pages-mine/pages/order-page?status=3' },
                { name: '待审核', icon: '3.png', badge: 0,key:"auditNum", path: '/pages-mine/pages/order-page?status=8' },
                { name: '待到款', icon: '4.png', badge: 0,key:"payNum", path: '/pages-mine/pages/order-page?status=10' },
                { name: '申请退回', icon: '5.png', badge: 0,key:"refundNum", path: '/pages-mine/pages/apply-return' }
            ],
            tools: [
                { name: '消息通知', icon: 't1.png', path: '/pages-mine/pages/notice' },
                { name: '我的收藏', icon: 't2.png', path: '' },
                { name: '我的足迹', icon: 't3.png', path: '' },
                { name: '我的地址', icon: 't4.png', path: '/pages-mine/pages/address/list' },
                { name: '我的优惠券', icon: 't5.png', path: '' },
                { name: '联系客服', icon: 't6.png', path: '/pages/tools/service' },
                { name: '意见反馈', icon: 't7.png', path: '/pages-mine/pages/feedback' },
                { name: '到货提醒', icon: 't8.png', path: '/pages/tools/arrival-notice' },
                { name: '合伙人计划', icon: 't9.png', path: '/pages/tools/partner' },
                { name: '买卖答疑', icon: 't10.png', path: '/pages/tools/faq' },
                { name: '关于书嗨', icon: 't11.png', path: '/pages/tools/about' },
                { name: '我的余额', icon: 't12.png', path: '/pages-mine/pages/wallet' },
                { name: '用户设置', icon: 't13.png', path: '/pages/tools/settings' }
            ]
        }
    },
    methods: {
        //用户信息
        handleUpdateUserInfo() {
            uni.navigateTo({
                url: '/pages-mine/pages/setting'
            })
        },
        //查看全部订单
        viewAllOrders() {
            uni.navigateTo({
                url: '/pages-mine/pages/order-page?status=-1'
            })
        },
        //跳转订单
        navigateToOrder(path) {
            uni.navigateTo({
                url: path
            })
        },
        //跳转工具
        navigateToTool(path) {
			if(!path) return uni.showToast({
				title:"开发中...",
				icon:"none"
			})
            uni.navigateTo({
                url: path
            })
        },
        //获取用户信息
        getUserInfo() {
            uni.$u.http.get('/token/user/detail').then(res => {
                console.log(res)
                if (res.code == 200) {
                    this.userInfo = res.data

                    this.orderTypes.forEach(item => {
                        item.badge = this.userInfo[item.key]
                    })
                }
            })
        },
    },
    onShow() {
        let token = uni.getStorageSync('token')
        if (token) {
            this.getUserInfo()
        }
    }
}
</script>

<style lang="scss" scoped>
.mine-page {
    min-height: 100vh;
    background-color: #f5f5f5;

    .user-info {
        background-color: #38C148;
        padding: 20rpx 50rpx 120rpx;
        color: #fff;
        position: relative;

        &::after {
            width: 140%;
            position: absolute;
            left: -20%;
            top: 0;
            z-index: -1;
            content: '';
            border-radius: 0 0 50% 50%;
            background: #fd6954;
        }

        .user-header {
            display: flex;
            align-items: center;
            margin-bottom: 40rpx;

            .user-avatar {
                border-radius: 50%;
                margin-right: 20rpx;
                border: 4rpx solid #fff;
                width: 128rpx;
                height: 128rpx;

                .avatar {
                    width: 120rpx;
                    height: 120rpx;
                    border-radius: 50%;
                }
            }

            .user-detail {
                .nickname {
                    font-size: 32rpx;
                    font-weight: 500;
                    margin-bottom: 8rpx;
                }

                .user-tag {
                    display: inline-block;
                    font-size: 22rpx;
                    padding: 4rpx 12rpx;
                    background: linear-gradient(-90deg, #272321, #4B4542);
                    border-radius: 4rpx;
                    margin-top: 8rpx;
                    margin-right: 10rpx;
                }
            }
        }

        .user-data {
            display: flex;
            justify-content: space-between;
            position: relative;
            z-index: 1;
            padding: 0 40rpx;

            .data-item {
                position: relative;
                text-align: center;

                .amount {
                    font-size: 38rpx;
                    font-weight: 500;
                    margin-bottom: 8rpx;
                }

                .label {
                    font-size: 24rpx;
                    font-weight: 400;
                    opacity: 0.9;
                }

                .badge {
                    position: absolute;
                    top: -15rpx;
                    right: -120%;
                    padding: 0 10rpx;
                    font-size: 20rpx;
                    line-height: 30rpx;
                    height: 30rpx;
                    background: #FF8400;
                    border-radius: 15rpx 15rpx 15rpx 0rpx;
                }
            }
        }
    }

    .order-section {
        margin: -80rpx 30rpx 20rpx;
        background: #fff;
        border-radius: 12rpx;
        padding: 30rpx;
        position: relative;
        z-index: 2;

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30rpx;

            .view-all {
                display: flex;
                align-items: center;
                color: #999;
                font-size: 26rpx;
            }
        }

        .order-types {
            display: flex;
            justify-content: space-between;

            .type-item {
                text-align: center;
                position: relative;
                .badge {
                    position: absolute;
                    top: -15rpx;
                    right: -6px;
                    padding: 0 10rpx;
                    font-size: 20rpx;
                    line-height: 30rpx;
                    height: 30rpx;
                    background: #f56c6c;
                    color: #fff;
                    border-radius: 15rpx 15rpx 15rpx 0rpx;
                }

                .type-icon {
                    width: 60rpx;
                    height: 60rpx;
                    margin-bottom: 12rpx;
                }

                text {
                    font-size: 26rpx;
                    color: #333;
                }
            }
        }
    }

    .tools-section {
        margin: 30rpx;
        background: #fff;
        border-radius: 12rpx;
        padding: 30rpx;
        position: relative;
        z-index: 2;

        .section-title {
            font-size: 30rpx;
            font-weight: 500;
            margin-bottom: 30rpx;
        }

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

            .tool-item {
                text-align: center;

                .tool-icon {
                    width: 60rpx;
                    height: 60rpx;
                    margin-bottom: 12rpx;
                }

                text {
                    font-size: 24rpx;
                    color: #333;
                }
            }
        }
    }
}
</style>