feiniao-farm-h5/src/views/old_mini/mine/index.vue

<template>
    <div class="mine-index">
        <div class="mine-header">
            <el-avatar
                class="avatar"
                :size="54"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
            <div class="user-info">
                <span class="user-name">听妈妈的话</span>
                <div class="user-day">这是您使用飞鸟有味的第15天</div>
            </div>
        </div>
        <div class="mine-content">
            <div class="grid-group">
                <div 
                    class="grid-item" 
                    v-for="(item, index) in gridItems" 
                    :key="index"
                    @click="handleGridClick(item)"
                >
                    <div class="grid-title">
                        <span>{{ item.title }}</span>
                        <el-icon><ArrowRight /></el-icon>
                    </div>
                    <span class="grid-desc">{{ item.desc }}</span>
                </div>
            </div>
            <div class="cell-group">
                <div 
                    class="cell-item" 
                    v-for="(item, index) in cellItems" 
                    :key="index"
                    @click="handleCellClick(item)"
                >
                    <span class="item-title">{{ item.title }}</span>
                    <el-icon class="item-arrow"><ArrowRight /></el-icon>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { Cell, CellGroup } from "vant";
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 网格项数据
const gridItems = ref([
    {
        title: '我的农场',
        desc: '查看农场列表',
        path: '/my_farm'
    },
    {
        title: '我的消息',
        desc: '查看未读信息',
        path: '/message'
    },
    {
        title: '农事记录',
        desc: '查看历史农事',
        path: '/order/list'
    }
]);

// 单元格项数据
const cellItems = ref([
    {
        title: '联系客服',
        path: '/customer-service'
    },
    {
        title: '帮助中心',
        path: '/help'
    },
    {
        title: '退出登录',
        path: '/logout'
    }
]);

// 处理网格项点击
const handleGridClick = (item) => {
    if (item.path) {
        router.push(item.path);
    }
};

// 处理单元格项点击
const handleCellClick = (item) => {
    if (item.path) {
        if (item.path === '/logout') {
            // 退出登录逻辑
            console.log('退出登录');
            // 这里可以添加退出登录的具体逻辑
        } else {
            router.push(item.path);
        }
    }
};
</script>
<style lang="scss" scoped>
.mine-index {
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
    padding: 20px 16px;
    background: url("@/assets/img/mine/mine-bg.png") no-repeat center center / 100% 100%;
    .mine-header {
        width: 100%;
        display: flex;
        align-items: center;
        .avatar {
            border: 1px solid #fff;
            margin-right: 12px;
        }
        .user-info {
            font-size: 20px;
            .user-name {
                font-weight: 500;
            }
            .user-day {
                font-size: 12px;
                color: rgba(0, 0, 0, 0.5);
            }
        }
    }
    .mine-content {
        margin-top: 20px;
        .grid-group {
            display: flex;
            align-items: center;
            .grid-item {
                background-color: #fff;
                border-radius: 14px;
                padding: 10px 0 10px 10px;
                color: #000;
                font-size: 16px;
                flex: 1;
                .grid-title {
                    display: flex;
                    align-items: center;
                    font-weight: 500;
                    margin-bottom: 6px;
                    span{
                        margin-right: 10px;
                    }
                }
                .grid-desc {
                    font-size: 12px;
                    color: rgba(0, 0, 0, 0.2);
                }
            }
            .grid-item + .grid-item {
                margin-left: 10px;
            }
        }
        .cell-group {
            .cell-item {
                margin-top: 10px;
                background-color: #fff;
                border-radius: 14px;
                padding: 13px 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                color: #000;
                font-size: 16px;
            }
        }
    }
}
</style>