feat:添加专家的用户管理页面

src/router/globalRoutes.js

@@ -118,5 +118,12 @@ export default [
         name: "TaskCondition",
         meta: { showTabbar: true, keepAlive: true },
         component: () => import("@/views/old_mini/task_condition/index.vue"),
+    },
+    // 用户管理
+    {
+        path: "/user",
+        name: "User",
+        meta: { showTabbar: true, keepAlive: true },
+        component: () => import("@/views/old_mini/user/index.vue"),
     }
 ];

src/views/old_mini/create_farm/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="create-farm">
-        <custom-header name="创建农场"></custom-header>
+        <custom-header :name="isClient ? '新增用户' : '创建农场'"></custom-header>
         <!-- 地图 -->
         <div class="map-container" ref="mapContainer"></div>
         <div class="farm-content">
@@ -35,7 +35,7 @@
                     <div class="box-content">
                         <div class="create-title">
                             <img class="title-icon" src="@/assets/img/home/create-icon.png" alt="" />
-                            创建农场
+                            {{ isClient ? '新增用户' : '创建农场' }}
                         </div>
                         <div class="create-content">
                             <div class="create-from">
@@ -97,7 +97,7 @@
                             </div>
                             <div class="create-btn">
                                 <div class="btn-item sencond-btn" @click="resetForm(ruleFormRef)">取消</div>
-                                <div class="btn-item primary-btn" @click="submitForm(ruleFormRef)">立即创建</div>
+                                <div class="btn-item primary-btn" @click="submitForm(ruleFormRef)">{{ isClient ? '添加' : '立即创建' }}</div>
                             </div>
                         </div>
                     </div>
@@ -129,7 +129,11 @@ onMounted(() => {
 });
 
 const polygonArr = ref(null)
+const isClient = ref(false);
 onActivated(() => {
+    if (route.query.type) {
+        isClient.value = true;
+    }
     // 绘制勾画范围
     const polygonData = store.state.home.polygonData
     if (polygonData) {

src/views/old_mini/user/components/addPopup.vue

@@ -0,0 +1,66 @@
+<template>
+    <popup class="add-popup" round v-model:show="showAddPopup" :close-on-click-overlay="false">
+        <div class="popup-title">添加分组</div>
+        <el-input class="popup-input" v-model="input" placeholder="分组名" size="large" />
+        <div class="popup-button">
+            <div class="cancel" @click="showAddPopup = false">取消</div>
+            <div>确定</div>
+        </div>
+    </popup>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import { Popup} from "vant";
+
+const props = defineProps({
+    show:{
+        type:Boolean,
+        defalut:false
+    }
+})
+const input = ref("");
+
+const showAddPopup = ref(false)
+
+watch(()=>props.show,()=>{
+    input.value = ""
+    showAddPopup.value = true
+})
+</script>
+
+<style lang="scss" scoped>
+.add-popup{
+    width: 90%;
+    padding: 20px 16px;
+    .popup-title{
+        font-size: 18px;
+        font-weight: 500;
+        text-align: center;
+        margin-bottom: 12px;
+    }
+    .popup-input{
+        margin-bottom: 30px;
+    }
+    .popup-button{
+        display: flex;
+        padding-top: 20px;
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+        div{
+            flex: 1;
+            font-size: 16px;
+            padding: 9px;
+            border-radius: 20px;
+            background: #2199F8;
+            color: #fff;
+            text-align: center;
+        }
+        .cancel{
+            margin-right: 20px;
+            color: #000;
+            background: #fff;
+            border: 1px solid #999999;
+        }
+    }
+}
+</style>

src/views/old_mini/user/index.vue

@@ -0,0 +1,248 @@
+<template>
+    <div class="user-index">
+        <div class="user-header">
+            <el-input class="search" v-model="input" placeholder="搜索">
+                <template #prefix>
+                    <el-icon><search /></el-icon>
+                </template>
+            </el-input>
+            <div class="button" @click="handleAddClient">
+                <img src="@/assets/img/mine/firend-icon.png" alt="" />
+                新增客户
+            </div>
+        </div>
+        <div class="list">
+            <collapse v-model="activeNames">
+                <collapse-item :name="index" v-for="(item, index) in list" :key="index" :is-link="false">
+                    <template #title>
+                        <el-icon class="icon"><CaretRight /></el-icon>
+                        {{ item.name }}
+                        <span class="span">{{ item.children.length }}</span>
+                    </template>
+                    <template #value>
+                        <div @click.stop="hadnleManage(item)" class="text">管理</div>
+                    </template>
+                    <div class="list-item" v-for="(ele, idx) in item.children" :key="idx + ele.id">
+                        <div class="item-flex">
+                            <img class="photo" src="" alt="" />
+                            <div class="item-text">
+                                <div class="name">
+                                    <span>农场111</span>
+                                    <el-icon color="#2199F8" size="16"><Edit /></el-icon>
+                                </div>
+                                <div>农场品种：荔枝-桂味</div>
+                                <div>农场面积：190亩</div>
+                                <div>农场位置：湖北省武汉市富里唱鑫园5023</div>
+                            </div>
+                        </div>
+                    </div>
+                </collapse-item>
+            </collapse>
+        </div>
+        <div class="footer">
+            <div class="btn" @click="showPopup">新建分组</div>
+        </div>
+    </div>
+    <!-- 添加分组弹窗 -->
+    <add-popup :show="showGroupPopup"></add-popup>
+</template>
+
+<script setup>
+import { Collapse, CollapseItem } from "vant";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import addPopup from "./components/addPopup.vue";
+const router = useRouter();
+
+const input = ref("");
+//新建分组
+const showGroupPopup = ref(false);
+const showPopup = () => {
+    showGroupPopup.value = !showGroupPopup.value;
+};
+
+// 新增客户
+const handleAddClient = () => {
+    router.push("/create_farm?type=client");
+};
+
+// 管理
+const hadnleManage = (value) => {
+    router.push(`/manage?name=${value.name}&total=${value.children.length}&isGroup=${value.isGroup}`);
+};
+
+const list = ref([
+    {
+        name: "常用列表",
+        id: "1",
+        isGroup: 0,
+        children: [
+            {
+                id: "3",
+                name: "糯米糍",
+            },
+            {
+                id: "4",
+                name: "桂味",
+            },
+        ],
+    },
+    {
+        name: "未分组标签好友",
+        id: "2",
+        isGroup: 1,
+        children: [
+            {
+                id: "5",
+                name: "井冈红糯",
+            },
+            {
+                id: "6",
+                name: "测试",
+            },
+        ],
+    },
+    {
+        name: "其他列表",
+        id: "3",
+        children: [],
+    },
+]);
+
+const activeNames = ref([0]);
+</script>
+
+<style lang="scss" scoped>
+.user-index {
+    width: 100%;
+    height: 100vh;
+    box-sizing: border-box;
+    padding: 10px 12px;
+    background: #f5f7fb;
+    .user-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .search {
+            width: 90px;
+            margin-right: 10px;
+            --el-input-placeholder-color: rgba(0, 0, 0, 0.5);
+            ::v-deep {
+                .el-input__wrapper {
+                    box-shadow: none;
+                    border: 1px solid rgba(0, 0, 0, 0.5);
+                    background: transparent;
+                    border-radius: 20px;
+                }
+                .el-input__prefix,
+                .el-input__inner {
+                    color: #000;
+                }
+            }
+        }
+        .button {
+            width: calc(100% - 100px);
+            background: #fff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px;
+            border-radius: 20px;
+            img {
+                width: 20px;
+                height: 17px;
+                margin-right: 6px;
+            }
+        }
+    }
+    .list {
+        width: 100%;
+        margin-top: 12px;
+        .text {
+            color: #2199F8;
+        }
+        ::v-deep {
+            .van-cell {
+                border-radius: 5px 5px 0 0;
+                justify-content: space-between;
+                .van-cell__value {
+                    flex: none;
+                }
+                .van-cell__title {
+                    display: flex;
+                    align-items: center;
+                    .icon {
+                        margin-right: 3px;
+                        color: #bfbfbf;
+                        font-size: 16px;
+                    }
+                    .span {
+                        color: rgba(0, 0, 0, 0.4);
+                        margin-left: 10px;
+                    }
+                }
+            }
+            .van-collapse-item__title--expanded {
+                .van-cell__title {
+                    .icon {
+                        transform: rotate(90deg);
+                    }
+                }
+            }
+            .van-collapse-item + .van-collapse-item {
+                margin-top: 12px;
+            }
+        }
+        .list-item {
+            border-radius: 12px;
+            background: #fff;
+            position: relative;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .item-flex {
+                display: flex;
+                align-items: center;
+            }
+            .photo {
+                width: 68px;
+                height: 68px;
+                border-radius: 8px;
+                margin-right: 12px;
+                background: red;
+            }
+            .item-text {
+                color: #999999;
+                font-size: 12px;
+                line-height: 1.6;
+                .name {
+                    display: flex;
+                    align-items: center;
+                    span {
+                        font-size: 15px;
+                        color: #000;
+                        font-weight: 500;
+                        margin-right: 5px;
+                    }
+                }
+            }
+        }
+        .list-item + .list-item {
+            margin-top: 12px;
+        }
+    }
+    .footer {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 12px;
+        .btn {
+            font-size: 12px;
+            color: #7f7f7f;
+            padding: 5px 45px;
+            background: rgba(201, 201, 201, 0.27);
+            border-radius: 20px;
+        }
+    }
+}
+</style>