teambuy-front/pages/index/center.vue

<template>
    <view class="center-page">
        <!-- 顶部背景和个人信息 -->
        <view class="header" :style="{ 'background-image': 'url(/static/image/红烧肉.png)' }">

            <view class="user-info">
                <image class="avatar" :src="userInfo.avatarUrl" mode="aspectFill"></image>
                <view class="user-name-id">
                    <text class="user-name">{{ userInfo.nickName }}</text>
                    <text class="user-id">ID:{{ userInfo.userId }}</text>
                </view>
            </view>

            <view class="role-switch-btn">
                <uv-icon name="reload" size="30rpx" color="#fff" style="margin-right: 6rpx;" />
                <text>切换为{{ userInfo.role }}</text>
            </view>
        </view>

        <!-- 我的订单区域 -->
        <view class="orders-section">
            <view class="section-header">
                <text class="section-title">我的订单</text>
                <view class="view-all" @tap="navigateTo('/pages/index/order?status=all')">
                    <text>全部</text>
                    <uv-icon name="arrow-right" size="30rpx" color="#999" />
                </view>
            </view>

            <view class="order-types">
                <view class="order-type-item" @tap="navigateTo('/pages/index/order?status=pending')">
                    <view class="order-icon-wrapper">
                        <view class="green-circle">
                            <uv-icon name="red-packet" size="44rpx" color="#fff" />
                        </view>
                        <uv-badge max="9" absolute :offset="[-10, -12]" bgColor="#FF2A2A"
                            :value="userInfo.waitingPayCount" style="padding: 10rpx 15rpx;" />
                    </view>
                    <text class="order-type-text">待支付</text>
                </view>

                <view class="order-type-item" @tap="navigateTo('/pages/index/order?status=processing')">
                    <view class="order-icon-wrapper">
                        <view class="green-circle">
                            <uv-icon name="chat" size="44rpx" color="#fff" />
                        </view>
                        <uv-badge max="9" absolute :offset="[-10, -12]" bgColor="#FF2A2A"
                            :value="userInfo.waitingDiningCount" style="padding: 10rpx 15rpx;" />
                    </view>
                    <text class="order-type-text">待出餐</text>
                </view>

                <view class="order-type-item" @tap="navigateTo('/pages/index/order?status=shipping')">
                    <view class="order-icon-wrapper">
                        <view class="green-circle">
                            <uv-icon name="chat" size="44rpx" color="#fff" />
                        </view>
                        <uv-badge max="9" absolute :offset="[-10, -12]" bgColor="#FF2A2A"
                            :value="userInfo.deliveringCount" style="padding: 10rpx 15rpx;" />
                    </view>
                    <text class="order-type-text">送餐中</text>
                </view>

                <view class="order-type-item" @tap="navigateTo('/pages/index/order?status=delivered')">
                    <view class="order-icon-wrapper">
                        <view class="green-circle">
                            <uv-icon name="chat" size="44rpx" color="#fff" />
                        </view>
                        <uv-badge max="9" absolute :offset="[-10, -12]" bgColor="#FF2A2A" :value="userInfo.pickupCount"
                            style="padding: 10rpx 15rpx;" />
                    </view>
                    <text class="order-type-text">待取餐</text>
                </view>

                <view class="order-type-item" @tap="navigateTo('/pages/index/order?status=completed')">
                    <view class="order-icon-wrapper">
                        <view class="green-circle">
                            <uv-icon name="chat" size="44rpx" color="#fff" />
                        </view>
                        <uv-badge max="9" absolute :offset="[-10, -12]" bgColor="#FF2A2A"
                            :value="userInfo.completedCount" style="padding: 10rpx 15rpx;" />
                    </view>
                    <text class="order-type-text">已完成</text>
                </view>
            </view>
        </view>

        <!-- 团员功能区域 -->
        <view class="member-functions">
            <view class="section-header">
                <text class="section-title">团员功能</text>
            </view>

            <view class="function-grid">
                <view class="function-item" @tap="navigateTo('/pages_order/mine/updateUser')">
                    <view class="function-icon">
                        <uv-icon name="chat" size="94rpx" color="#019245" />
                    </view>
                    <text class="function-text">资料修改</text>
                </view>

                <view class="function-item" @tap="navigateTo('/pages_order/mine/team')">
                    <view class="function-icon">
                        <uv-icon name="chat" size="94rpx" color="#019245" />
                    </view>
                    <text class="function-text">团长申请</text>
                </view>

                <view class="function-item" @tap="navigateTo('/pages_order/mine/leader')">
                    <view class="function-icon">
                        <uv-icon name="chat" size="94rpx" color="#019245" />
                    </view>
                    <text class="function-text">解绑团长</text>
                </view>

                <view class="function-item" @tap="navigateTo('/pages_order/mine/share')">
                    <view class="function-icon">
                        <uv-icon name="chat" size="94rpx" color="#019245" />
                    </view>
                    <text class="function-text">推广链接</text>
                </view>

                <view class="function-item" @tap="navigateTo('/pages_order/mine/coupon')">
                    <view class="function-icon">
                        <uv-icon name="chat" size="94rpx" color="#019245" />
                    </view>
                    <text class="function-text">优惠券</text>
                </view>

                <view class="function-item" @tap="navigateTo('/pages_order/mine/wallet')">
                    <view class="function-icon">
                        <uv-icon name="chat" size="94rpx" color="#019245" />
                    </view>
                    <text class="function-text">钱包</text>
                </view>
            </view>
        </view>

        <tabber select="center" />
    </view>
</template>

<script>
import tabber from '@/components/base/tabbar.vue'
import { mockUserInfo } from '@/static/js/mockUserInfo.js'

export default {
    components: {
        tabber
    },
    data() {
        return {
            userInfo: mockUserInfo
        }
    },
    methods: {
        navigateTo(url) {
            console.log(111222);
            
            this.$utils.navigateTo({
                url
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.center-page {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: 120rpx;
}

.header {
    position: relative;
    height: 340rpx;
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 60rpx 30rpx 0;
    display: flex;
    flex-direction: column;
    align-items: start;
    position: relative;

    .user-info {
        position: absolute;
        display: flex;
        align-items: center;
        margin-top: 30rpx;
        z-index: 2;
        left: 30rpx;
        top: 120rpx;

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

        .user-name-id {
            margin-left: 30rpx;
            display: flex;
            flex-direction: column;

            .user-name {
                font-size: 32rpx;
                font-weight: bold;
                margin-bottom: 6rpx;
            }

            .user-id {
                font-size: 24rpx;
                opacity: 0.9;
            }
        }
    }

    .role-switch-btn {
        position: absolute;
        right: 0;
        top: 180rpx;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 30rpx 0 0 30rpx;
        padding: 10rpx 20rpx;
        font-size: 24rpx;
        z-index: 2;
        display: flex;
        align-items: center;
    }
}

.orders-section {
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    margin: -70rpx auto 0;
    padding: 15rpx;
    position: relative;
    z-index: 3;
    width: 90%;
    // margin: 0 auto;
}

.member-functions {
    background-color: #fff;
    padding: 30rpx;
    margin-top: 20rpx;
    width: 88%;
    border-radius: 20rpx;
    margin: 30rpx auto 0;
}

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

    .section-title {
        font-size: 32rpx;
        font-weight: 500;
        position: relative;
        padding-left: 15rpx;
    }

    .view-all {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: $uni-color-third;
    }
}

.order-types {
    // background-color: red;
    display: flex;
    // justify-content: space-around;

    .order-type-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 20%;

        .order-icon-wrapper {
            position: relative;
            margin-bottom: 4rpx;

            .green-circle {
                width: 70rpx;
                height: 70rpx;
                background-color: $uni-color;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .order-type-text {
            font-size: 26rpx;
            color: #666;
            margin-top: 8rpx;
        }
    }
}

.function-grid {
    display: flex;
    flex-wrap: wrap;

    .function-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 40rpx;

        .function-icon {
            width: 80rpx;
            height: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 16rpx;
        }

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