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

<template>
    <div class="mine-index">
        <div class="mine-header">
            <div class="user-info-box">
                <el-avatar
                    class="avatar"
                    :size="54"
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                />
                <div class="user-info">
                    <div class="user-name">
                        <span>听妈妈的话</span>
                        <span class="score" v-if="curRole !== 0">5.0分</span>
                    </div>
                    <div class="user-day">这是您使用飞鸟有味的第15天</div>
                </div>
            </div>
            <div class="code-icon" v-if="curRole === 1">
                <img src="@/assets/img/mine/code-icon.png" alt="" />
            </div>
        </div>
        <div class="mine-content">
            <div class="garden-info" v-if="curRole !== 0">
                <div class="item" v-for="(item, index) in gardenInfoItems" :key="index">
                    <span class="num">{{ item.num }}</span>
                    <span>{{ item.label }}</span>
                </div>
            </div>
            <!-- <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 { onActivated, ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

// 0: 农户, 1: 专家, 2:农资农服
const curRole = ref(0);

// 网格项数据
const gridItems = ref([]);

onActivated(() => {
    if (curRole.value === 0) {
        gridItems.value = [
            {
                title: "我的农场",
                desc: "查看农场列表",
                path: "/my_farm",
            },
            {
                title: "我的消息",
                desc: "查看未读信息",
                path: "/message",
            },
            {
                title: "农事记录",
                desc: "查看历史农事",
                path: "/farm_records",
            },
        ];
    } else if (curRole.value === 1) {
        gridItems.value = [
            {
                title: "我的主页",
                desc: "查看农场列表",
                path: "/expert_detail",
            },
            {
                title: "我的报价",
                desc: "查看未读信息",
                path: "/message",
            },
            {
                title: "信息化档案",
                desc: "查看历史农事",
                path: "/archives",
            },
        ];
    } else if (curRole.value === 2) {
        gridItems.value = [
            {
                title: "我的主页",
                desc: "查看农场列表",
                path: "/my_farm",
            },
            {
                title: "我的消息",
                desc: "查看未读信息",
                path: "/message",
            },
            {
                title: "信息化档案",
                desc: "查看历史农事",
                path: "/archives",
            },
        ];
    }
    // curRole.value = localStorage.getItem('SET_USER_CUR_ROLE');
});

// 单元格项数据
const cellItems = ref([
    {
        title: "我的农场",
        path: "/my_farm",
    },
    {
        title: "认证农资",
        path: "/register?identity=NZ&role=2",
    },
    {
        title: "报价维护",
        path: "/offer_price?identity=NZ&role=2",
    },
    {
        title: "服务维护",
        path: "/service_manage?identity=NZ&role=2",
    },
    // {
    //     title: "联系客服",
    //     path: "/customer-service",
    // },
    {
        title: "退出登录",
        path: "/logout",
    },
]);

// 花园信息项数据
const gardenInfoItems = ref([
    { num: 128, label: "服务次数" },
    { num: 256, label: "累计客户" },
    { num: 512, label: "服务果园" },
]);

// 处理网格项点击
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;
        justify-content: space-between;
        .user-info-box {
            display: flex;
            align-items: center;
            .avatar {
                border: 1px solid #fff;
                margin-right: 12px;
            }
            .user-info {
                font-size: 20px;
                .user-name {
                    font-weight: 500;
                    display: flex;
                    align-items: center;
                    .score {
                        font-size: 14px;
                        color: #2199f8;
                        margin-left: 6px;
                        font-weight: 500;
                    }
                }
                .user-day {
                    font-size: 12px;
                    color: rgba(0, 0, 0, 0.5);
                }
            }
        }
        .code-icon {
            width: 21px;
            height: 21px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .mine-content {
        margin-top: 20px;
        .garden-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 8px;
            padding: 6px 0;
            background-color: rgba(255, 255, 255, 0.5);
            margin-bottom: 10px;
            .item {
                display: flex;
                flex: 1;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: #999999;
                font-size: 13px;
                .num {
                    font-size: 16px;
                    color: #000;
                    margin-bottom: 2px;
                }
            }
        }
        .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: 1px;
                    }
                }
                .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>