fix: 用户管理

src/components/fnHeader.vue

@@ -6,9 +6,9 @@
             <!-- <img class="logo-icon" src="@/assets/images/common/logo-icon.png" alt="" /> -->
         </div>
         <div class="path-btn">
-            <router-link to="/layout/home" class="nav-item" :class="{ active: isTreeActive }"> 果树管理 </router-link>
+            <div @click="toPageUrl('/layout/home')" class="nav-item" :class="{ active: isTreeActive }"> 果树管理 </div>
 
-            <router-link to="/layout/user" class="nav-item" :class="{ active: isUserActive }"> 用户管理 </router-link>
+            <div @click="toPageUrl('/layout/user')" class="nav-item" :class="{ active: isUserActive }"> 用户管理 </div>
         </div>
     </div>
     <!-- 四个方向的阴影 -->
@@ -22,8 +22,9 @@
 
 <script setup>
 import { onMounted, computed, ref } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 const route = useRoute();
+const router = useRouter();
 
 const props = defineProps({
     hideShadow: {
@@ -43,6 +44,10 @@ const isUserActive = computed(() => {
     return activeNav.value === "user";
 });
 
+function toPageUrl(url) {
+    router.push(url)
+}
+
 const userInfo = JSON.parse(sessionStorage.getItem("userinfo"));
 </script>
 
@@ -78,8 +83,6 @@ const userInfo = JSON.parse(sessionStorage.getItem("userinfo"));
         align-items: center;
         box-sizing: border-box;
         //   background: url("@/assets/images/common/header-bg.png") no-repeat center center / 100% 100%;
-
-        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
         .logo {
             width: 23px;
             height: 26px;
@@ -95,11 +98,33 @@ const userInfo = JSON.parse(sessionStorage.getItem("userinfo"));
         }
     }
     .path-btn {
-        ::v-deep {
-            .router-link-active {
-                color: yellow;
+        display: flex;
+        align-items: center;
+        flex: none;
+        padding-right: 50px;
+        .nav-item {
+            color: #090909;
+            font-size: 24px;
+            line-height: 30px;
+            font-family: "PangMenZhengDao";
+            cursor: pointer;
+            &.active {
+                color: #2199F8;
+                position: relative;
+                &::after {
+                    content: "";
+                    position: absolute;
+                    bottom: -10px;
+                    left: 0;
+                    width: 100%;
+                    height: 2px;
+                    background: #2199F8;
+                }
             }
         }
+        .nav-item + .nav-item {
+            margin-left: 70px;
+        }
     }
     .focus-farm {
         position: absolute;

src/views/home/album_compoents/albumCarousel.vue

@@ -27,79 +27,84 @@
                     果树档案
                     <span class="tag" v-if="showTag">小农户</span>
                 </div>
-                <div class="overview-file">
-                    <div class="box-title">总体档案</div>
-                    <!-- <div class="base-data">
-                        <div class="base-item" v-for="item in photoBaseData" :key="item.label">
-                            <span class="label">{{ item.label }}</span>
-                            <div class="value">{{ item.value }}</div>
+                <div class="file-content">
+
+                    <div class="content-box">
+                        <div class="overview-file">
+                            <div class="box-title">总体档案</div>
+                            <!-- <div class="base-data">
+                                <div class="base-item" v-for="item in photoBaseData" :key="item.label">
+                                    <span class="label">{{ item.label }}</span>
+                                    <div class="value">{{ item.value }}</div>
+                                </div>
+                            </div> -->
+                            <div class="box-form">
+                                <el-form
+                                    ref="ruleFormRef"
+                                    :model="ruleForm"
+                                    :rules="rules"
+                                    label-position="left"
+                                    label-width="92px"
+                                >
+                                    <el-form-item label="品种" prop="pz">
+                                        <el-input v-model="ruleForm.pz" placeholder="请输入品种" style="width: 240px;" />
+                                    </el-form-item>
+                                    <el-form-item label="树龄" prop="age">
+                                        <el-input-number
+                                            class="number-input"
+                                            :controls="false"
+                                            placeholder="请输入树龄"
+                                            v-model="ruleForm.age"
+                                            :min="0"
+                                            style="width: 240px;"
+                                        />
+                                    </el-form-item>
+                                    <el-form-item label="栽种时间" prop="time">
+                                        <el-date-picker
+                                            v-model="ruleForm.time"
+                                            type="date"
+                                            format="YYYY.MM.DD"
+                                            style="width: 240px;"
+                                            value-format="YYYY.MM.DD"
+                                            placeholder="请选择栽种时间"
+                                        />
+                                    </el-form-item>
+                                    <el-form-item label="守护人" prop="user">
+                                        <el-select v-model="ruleForm.user" style="width: 240px;" placeholder="请选择守护人">
+                                            <el-option label="张三" value="张三" />
+                                            <el-option label="张四" value="张四" />
+                                        </el-select>
+                                    </el-form-item>
+                                </el-form>
+                            </div>
                         </div>
-                    </div> -->
-                    <div class="box-form">
-                        <el-form
-                            ref="ruleFormRef"
-                            :model="ruleForm"
-                            :rules="rules"
-                            label-position="left"
-                            label-width="78px"
-                        >
-                            <el-form-item label="品种" prop="pz">
-                                <el-input v-model="ruleForm.pz" placeholder="请输入品种" style="width: 240px;" />
-                            </el-form-item>
-                            <el-form-item label="树龄" prop="age">
-                                <el-input-number
-                                    class="number-input"
-                                    :controls="false"
-                                    placeholder="请输入树龄"
-                                    v-model="ruleForm.age"
-                                    :min="0"
-                                    style="width: 240px;"
-                                />
-                            </el-form-item>
-                            <el-form-item label="栽种时间" prop="time">
-                                <el-date-picker
-                                    v-model="ruleForm.time"
-                                    type="date"
-                                    format="YYYY.MM.DD"
-                                    style="width: 240px;"
-                                    value-format="YYYY.MM.DD"
-                                    placeholder="请选择栽种时间"
-                                />
-                            </el-form-item>
-                            <el-form-item label="守护人" prop="user">
-                                <el-select v-model="ruleForm.user" style="width: 240px;" placeholder="请选择守护人">
-                                    <el-option label="张三" value="张三" />
-                                    <el-option label="张四" value="张四" />
-                                </el-select>
-                            </el-form-item>
-                        </el-form>
-                    </div>
-                </div>
 
-                <div class="overview-file">
-                    <div class="box-title">产量详情</div>
-                    <div class="box-wrap">
-                        <div class="box-item" v-for="(item, index) in outputBox" :key="index">
-                            <div class="item-name">{{ item.name }}</div>
-                            <div class="item-val">{{ item.value }}</div>
+                        <div class="overview-file">
+                            <div class="box-title">产量详情</div>
+                            <div class="box-wrap">
+                                <div class="box-item" v-for="(item, index) in outputBox" :key="index">
+                                    <div class="item-name">{{ item.name }}</div>
+                                    <div class="item-val">{{ item.value }}</div>
+                                </div>
+                            </div>
                         </div>
-                    </div>
-                </div>
 
-                <div class="overview-file">
-                    <div class="box-title">质量详情</div>
-                    <div class="box-wrap">
-                        <div class="box-item" v-for="(item, index) in qualityBox" :key="index">
-                            <div class="item-name">{{ item.name }}</div>
-                            <div class="item-val">{{ item.value }}</div>
+                        <div class="overview-file">
+                            <div class="box-title">质量详情</div>
+                            <div class="box-wrap">
+                                <div class="box-item" v-for="(item, index) in qualityBox" :key="index">
+                                    <div class="item-name">{{ item.name }}</div>
+                                    <div class="item-val">{{ item.value }}</div>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
 
-                
-                <div class="btn-group">
-                    <div class="btn cancel-btn" @click="saveEdit(0)">取消</div>
-                    <div class="btn edit-btn" @click="saveEdit(1)">确认修改</div>
+                    
+                    <div class="btn-group">
+                        <div class="btn cancel-btn" @click="saveEdit(0)">取消</div>
+                        <div class="btn edit-btn" @click="saveEdit(1)">确认修改</div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -378,6 +383,12 @@ async function saveEdit(isToSave) {
                     .el-input-number .el-input__inner {
                         text-align: left;
                     }
+                    .el-form-item__label {
+                        font-size: 16px;
+                    }
+                    .el-form-item--default {
+                        margin-bottom: 12px;
+                    }
                 }
             }
         }
@@ -413,6 +424,14 @@ async function saveEdit(isToSave) {
         .overview-file + .overview-file {
             margin-top: 8px;
         }
+        .file-content {
+            height: calc(100% - 30px);
+            display: flex;
+            flex-direction: column;
+            .content-box {
+                flex: 1;
+            }
+        }
         .box-wrap {
             display: flex;
             .box-item {

src/views/user/index.vue

@@ -1,13 +1,348 @@
 <template>
-    <div>
-user
+    <div class="user-page">
+        <div class="user-title">
+            <div class="title-l">
+                <el-icon size="24" class="user-icon" color="#000000"><UserFilled /></el-icon>
+                <span class="user-name">用户管理</span>
+                <span class="title-line"></span>
+                <span class="title-info">共 258 个用户，更新日期于 2025.06.26</span>
+            </div>
+            <div class="title-r">
+                <el-input
+                    size="large"
+                    v-model="searchVal"
+                    style="width: 200px"
+                    placeholder="搜索用户/手机号"
+                    :prefix-icon="Search"
+                    />
+                <el-button class="ml-10" size="large" type="primary">上传订单</el-button>
+                <el-button size="large" type="primary" plain>新建分组</el-button>
+                <el-button size="large" type="primary" plain>批量发送</el-button>
+            </div>
+        </div>
+        <div class="user-btn-group">
+            <div class="btn-l">
+                <el-button  size="large" type="primary">优质用户</el-button>
+                <el-button size="large" type="primary" plain>中等用户</el-button>
+                <el-button size="large" type="primary" plain>普通用户</el-button>
+            </div>
+            <div class="select-group">
+                <el-select
+                    v-model="cityVal"
+                    placeholder="选择省份"
+                    size="large"
+                    class="ml-10"
+                    style="width: 100px"
+                    >
+                    <el-option
+                        v-for="item in cityOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    />
+                </el-select>
+                <el-select
+                    v-model="groupVal"
+                    placeholder="选择分组"
+                    size="large"
+                    class="ml-10"
+                    style="width: 120px"
+                    >
+                    <el-option
+                        v-for="item in groupOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    />
+                </el-select>
+                <el-select
+                    v-model="levelVal"
+                    placeholder="守护等级"
+                    size="large"
+                    class="ml-10"
+                    style="width: 120px"
+                    >
+                    <el-option
+                        v-for="item in levelOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    />
+                </el-select>
+            </div>
+        </div>
+        <div class="table-wrap">
+            <el-table :data="tableData" style="width: 100%" @selection-change="handleTableSelect">
+                <el-table-column type="selection" width="55" />
+                <el-table-column property="code" label="用户编码" />
+                <el-table-column property="name" label="用户昵称">
+                    <template #default="scope">
+                        <div class="user-info">
+                            <el-avatar :size="24" src="https://birdseye-img-ali-cdn.sysuimars.com/birdseye-look-mini/91754/1750583672619.png" />
+                            <span class="ml-10">{{ scope.row.name }}</span>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column property="tel" label="联系电话" />
+                <el-table-column
+                    property="address"
+                    label="具体住址"
+                    width="240"
+                    show-overflow-tooltip
+                />
+                <el-table-column property="count" label="订单量" />
+                <el-table-column label="守护等级">
+                    <template #default="scope">
+                        <span :class="['level-tag', 'level-'+scope.row.level]">{{ levelObj[scope.row.level] }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column property="treeCode" label="守护树编号" />
+                <el-table-column label="状态">
+                    <template #default="scope">
+                        <span :class="['status-text', 'status-'+scope.row.status]">{{ statusObj[scope.row.status] }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="日期" sortable>
+                    <template #default="scope">{{ scope.row.date }}</template>
+                </el-table-column>
+                <el-table-column label="操作" width="260">
+                    <template #default="scope">
+                        <div class="action-btn">
+                            <el-button type="primary" @click="handleMsg(scope.row)"><el-icon class="el-icon--right"><Comment /></el-icon>发消息</el-button>
+                            <el-button type="primary" @click="handleMsg(scope.row)"><el-icon><Briefcase /></el-icon>发礼物</el-button>
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+        <div class="put-btn" v-if="selectedRows.length">
+            <div class="btn-l">推送消息</div>
+            <div class="btn-r">推送优惠券</div>
+        </div>
     </div>
 </template>
 
 <script setup>
+import { ref } from 'vue';
+import { Search } from '@element-plus/icons-vue'
 
+const searchVal = ref(null)
+
+const levelObj = {
+    0: "平民",
+    1: "青铜守护",
+    2: "白银守护",
+    3: "赤金守护",
+    4: "星勋守护",
+}
+
+const statusObj = {
+    0: "未授权",
+    1: "待登录",
+    2: "待激活",
+}
+
+const tableData = ref([
+    {
+        code: "c2547475411",
+        name: "张三三",
+        tel: "13969685874",
+        address: "湖北省武汉市智慧谷A3座1104",
+        count: "3",
+        treeCode: "tree857874574",
+        level: 1,
+        status: 1,
+        date: "2025-07-04",
+    },
+    {
+        code: "c388547411",
+        name: "李四四",
+        tel: "159856874",
+        address: "湖北省武汉市江夏区山川街道光束庆南城12栋1258室",
+        count: "3",
+        treeCode: "tree857874574",
+        level: 0,
+        status: 0,
+        date: "2025-07-04",
+    },
+    {
+        code: "c2547475411",
+        name: "张三三",
+        tel: "13969685874",
+        address: "湖北省武汉市智慧谷A3座1104",
+        count: "3",
+        treeCode: "tree857874574",
+        level: 2,
+        status: 2,
+        date: "2025-07-04",
+    },
+    {
+        code: "c2547475411",
+        name: "张三三",
+        tel: "13969685874",
+        address: "湖北省武汉市智慧谷A3座1104",
+        count: "1",
+        treeCode: "tree857874574",
+        level: 3,
+        status: 1,
+        date: "2025-07-04",
+    },
+    {
+        code: "c2547475411",
+        name: "张三三",
+        tel: "13969685874",
+        address: "湖北省武汉市智慧谷A3座1104",
+        count: "3",
+        treeCode: "tree857874574",
+        level: 4,
+        status: 2,
+        date: "2025-07-04",
+    },
+]);
+
+const selectedRows = ref([])
+function handleTableSelect(selection) {
+    selectedRows.value = selection
+}
+function handleMsg(row) {
+    console.log('row');
+}
+
+const cityVal = ref("广东省")
+const cityOptions = ref([
+    {label: "广东省", value: "广东省"},
+    {label: "湖北省", value: "湖北省"},
+])
+
+const groupVal = ref("分组101")
+const groupOptions = ref([
+    {label: "分组101", value: "分组101"},
+    {label: "分组102", value: "分组102"},
+])
+
+const levelVal = ref("")
+const levelOptions = ref([
+    {label: "平民", value: "平民"},
+    {label: "青铜守护", value: "青铜守护"},
+    {label: "白银守护", value: "白银守护"},
+])
 </script>
 
 <style lang="scss" scoped>
-
-</style>
+.user-page {
+    padding: 41px 20px 0 20px;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    .user-title {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .title-l {
+            display: flex;
+            align-items: center;
+            .user-name {
+                font-family: "PangMenZhengDao";
+                padding-left: 10px;
+                font-size: 24px;
+                color: #000000;
+            }
+            .title-line {
+                display: inline-block;
+                width: 1px;
+                height: 12px;
+                background: rgba(0, 0, 0, 0.5);
+                margin: 0 15px;
+            }
+            .title-info {
+                color: rgba(0, 0, 0, 0.5);
+                font-size: 12px;
+            }
+        }
+        .title-r {
+            display: flex;
+            align-items: center;
+        }
+    }
+    .ml-10 {
+        margin-left: 10px;
+    }
+    .user-btn-group {
+        padding: 24px 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+    .table-wrap {
+        flex: 1;
+        .action-btn {
+            display: flex;
+            align-items: center;
+        }
+        .user-info {
+            display: flex;
+            align-items: center;
+        }
+        .level-tag {
+            font-size: 16px;
+            line-height: 30px;
+            padding: 0 10px;
+            border-radius: 4px;
+        }
+        .level-0 {
+            color: #7D7D7D;
+            background: rgba(125, 125, 125, 0.2);
+        }
+        .level-1 {
+            color: #D88C4A;
+            background: rgba(200, 156, 117, 0.2);
+        }
+        .level-2 {
+            color: #6293C1;
+            background: rgba(115, 193, 255, 0.2);
+        }
+        .level-3 {
+            color: #B18C0D;
+            background: rgba(243, 191, 48, 0.2);
+        }
+        .level-4 {
+            color: #BD6FE8;
+            background: rgba(236, 125, 255, 0.2);
+        }
+        .status-text {
+            font-size: 16px;
+            color: #7D7D7D;
+        }
+        .status-1 {
+            color: #FFAA00;
+        }
+        .status-2 {
+            color: #2199F8;
+        }
+    }
+    .put-btn {
+        padding: 20px 0 26px 0;
+        border-top: 1px solid rgba(0, 0, 0, 0.2);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .btn-l {
+            padding: 18px 44px;
+            background: #F0AC37;
+            border-radius: 4px;
+            font-size: 16px;
+            color: #fff;
+        }
+        .btn-r {
+            margin-left: 30px;
+            padding: 18px 36px;
+            background: #2199F8;
+            border-radius: 4px;
+            font-size: 16px;
+            color: #fff;
+        }
+    }
+}
+</style>