feat:添加不同角色我的和我的档案特么

src/router/globalRoutes.js

@@ -100,4 +100,10 @@ export default [
         name: "ModifyWork",
         component: () => import("@/views/old_mini/modify_work/index.vue"),
     },
+    // 我的档案
+    {
+        path: "/archives",
+        name: "Archives",
+        component: () => import("@/views/old_mini/mine/pages/archives.vue"),
+    },
 ];

src/views/old_mini/farm_manage/components/systemReminder.vue

@@ -35,7 +35,7 @@
 <script setup>
 import { Popup, ActionSheet } from "vant";
 import { ref } from "vue";
-const show = ref(true);
+const show = ref(false);
 const contactShow = ref(false);
 
 const handleContact = () => {

src/views/old_mini/mine/index.vue

@@ -1,24 +1,33 @@
 <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 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">
+                <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-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>
@@ -27,12 +36,7 @@
                 </div>
             </div>
             <div class="cell-group">
-                <div 
-                    class="cell-item" 
-                    v-for="(item, index) in cellItems" 
-                    :key="index"
-                    @click="handleCellClick(item)"
-                >
+                <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>
@@ -42,44 +46,97 @@
 </template>
 <script setup>
 import { Cell, CellGroup } from "vant";
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
+import { onActivated, ref } from "vue";
+import { useRouter } from "vue-router";
 
 const router = useRouter();
 
+// 0: 农户, 1: 专家, 2:农资农服
+const curRole = ref(1);
+
 // 网格项数据
-const gridItems = ref([
-    {
-        title: '我的农场',
-        desc: '查看农场列表',
-        path: '/my_farm'
-    },
-    {
-        title: '我的消息',
-        desc: '查看未读信息',
-        path: '/message'
-    },
-    {
-        title: '农事记录',
-        desc: '查看历史农事',
-        path: '/order/list'
+const gridItems = ref([]);
+
+onActivated(() => {
+    if (curRole.value === 0) {
+        gridItems.value = [
+            {
+                title: "我的农场",
+                desc: "查看农场列表",
+                path: "/my_farm",
+            },
+            {
+                title: "我的消息",
+                desc: "查看未读信息",
+                path: "/message",
+            },
+            {
+                title: "农事记录",
+                desc: "查看历史农事",
+                path: "/order/list",
+            },
+        ];
+    } else if (curRole.value === 1) {
+        gridItems.value = [
+            {
+                title: "我的主页",
+                desc: "查看农场列表",
+                path: "/my_farm",
+            },
+            {
+                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: '/customer-service'
+        title: "联系客服",
+        path: "/customer-service",
     },
     {
-        title: '帮助中心',
-        path: '/help'
+        title: "帮助中心",
+        path: "/help",
     },
     {
-        title: '退出登录',
-        path: '/logout'
-    }
+        title: "退出登录",
+        path: "/logout",
+    },
+]);
+
+// 花园信息项数据
+const gardenInfoItems = ref([
+    { num: 128, label: "服务次数" },
+    { num: 256, label: "累计客户" },
+    { num: 512, label: "服务果园" },
 ]);
 
 // 处理网格项点击
@@ -92,9 +149,9 @@ const handleGridClick = (item) => {
 // 处理单元格项点击
 const handleCellClick = (item) => {
     if (item.path) {
-        if (item.path === '/logout') {
+        if (item.path === "/logout") {
             // 退出登录逻辑
-            console.log('退出登录');
+            console.log("退出登录");
             // 这里可以添加退出登录的具体逻辑
         } else {
             router.push(item.path);
@@ -113,23 +170,67 @@ const handleCellClick = (item) => {
         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;
+        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);
+                }
             }
-            .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;
@@ -145,8 +246,8 @@ const handleCellClick = (item) => {
                     align-items: center;
                     font-weight: 500;
                     margin-bottom: 6px;
-                    span{
-                        margin-right: 10px;
+                    span {
+                        margin-right: 1px;
                     }
                 }
                 .grid-desc {

src/views/old_mini/mine/pages/archives.vue

@@ -0,0 +1,186 @@
+<template>
+    <div class="archives-page">
+        <custom-header name="信息化档案"></custom-header>
+        <div class="archives-content">
+            <div class="archives-header">
+                <el-select class="header-item" v-model="value" placeholder="Select" style="width: 240px">
+                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select>
+                <div class="sort header-item" @click="toggleSort">
+                    <span>时间排序</span>
+                    <div class="sort-icon">
+                        <el-icon :class="{ active: sortDirection === 'asc' }"><CaretTop /></el-icon>
+                        <el-icon class="caret-bottom" :class="{ active: sortDirection === 'desc' }"><CaretBottom /></el-icon>
+                    </div>
+                </div>
+            </div>
+            <div class="archives-list">
+                <div class="archives-item" v-for="item in 3" :key="item">
+                    <div class="item-content">
+                        <div class="img"></div>
+                        <div class="archives-info">
+                            <div class="info-title">
+                                <span class="title-text">无人机飞巡报告</span>
+                                <span>查看详情</span>
+                            </div>
+                            <div class="info-desc van-multi-ellipsis--l2">果园面积共XX亩，共有XX棵生树本次飞巡拍摄了XX张照片，包括果园面积共XX亩，共有XX棵</div>
+                        </div>
+                    </div>
+                    <div class="item-footer">
+                        <span>来自 从化荔博园</span>
+                        <span>2025.05.28</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import customHeader from "@/components/customHeader.vue";
+import { ref } from "vue";
+
+const value = ref("Option1");
+const options = [
+    {
+        value: "Option1",
+        label: "农事类型",
+    },
+    {
+        value: "Option2",
+        label: "Option2",
+    },
+];
+
+// 排序方向状态：asc-升序，desc-降序，null-无排序
+const sortDirection = ref(null);
+
+// 切换排序方向
+const toggleSort = () => {
+    if (sortDirection.value === null) {
+        sortDirection.value = 'asc';
+    } else if (sortDirection.value === 'asc') {
+        sortDirection.value = 'desc';
+    } else {
+        sortDirection.value = 'asc';
+    }
+    
+    // 这里可以添加实际的排序逻辑
+    console.log('排序方向:', sortDirection.value);
+};
+</script>
+
+<style lang="scss" scoped>
+.archives-page {
+    width: 100%;
+    height: 100vh;
+    background-color: #f7f7f7;
+    .archives-content {
+        width: 100%;
+        height: 100%;
+        padding: 12px;
+        box-sizing: border-box;
+        .archives-header{
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            .header-item{
+                flex: 1;
+                ::v-deep{
+                    .el-select__wrapper{
+                        padding: 7px 0;
+                        justify-content: center;
+                        background: none;
+                    }
+                    .el-select__selection {
+                        flex: none;
+                        width: fit-content;
+                    }
+                    .el-select__placeholder {
+                        position: static;
+                        transform: none;
+                        width: fit-content;
+                        color: #6D6D6D;
+                    }
+                    .el-select__caret {
+                        color: #6D6D6D;
+                    }
+                }
+            }
+            .sort{
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                color: #6D6D6D;
+                padding: 7px 0;
+                border-radius: 4px;
+                border: 1px solid #DDDDDD;
+                
+                .sort-icon{
+                    display: flex;
+                    flex-direction: column;
+                    margin-left: 2px;
+                    .caret-bottom{
+                        margin-top: -8px;
+                    }
+                    
+                    .el-icon {
+                        color: #6D6D6D;
+                        
+                        &.active {
+                            color: #409EFF;
+                        }
+                    }
+                }
+            }
+        }
+        .archives-list{
+            .archives-item{
+                margin-top: 12px;
+                border-radius: 8px;
+                background: #fff;
+                padding: 10px;
+                .item-content{
+                    display: flex;
+                    margin-bottom: 12px;
+                    .img{
+                        width: 64px;
+                        height: 64px;
+                        border-radius: 8px;
+                        margin-right: 16px;
+                        background-color: red;
+                    }
+                    .archives-info{
+                        width: calc(100% - 64px - 16px);
+                        .info-title{
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+                            color: #A8A8A8;
+                            font-size: 12px;
+                            .title-text{
+                                font-size: 16px;
+                                font-weight: 500;
+                                color: #000;
+                            }
+                        }
+                        .info-desc{
+                            margin-top: 5px;
+                            font-size: 12px;
+                            color: #575757;
+                        }
+                    }
+                }
+                .item-footer{
+                    border-top: 1px solid rgba(0, 0, 0, 0.1);
+                    padding-top: 12px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    color: #999999;
+                }
+            }
+        }
+    }
+}
+</style>