feat：添加客户列表页面

src/views/home/components/clientList.vue

@@ -1,21 +1,249 @@
 <template>
-    <div class="client-list">
-      kehu
+    <div class="list-wrap">
+        <div class="list-header">
+            <el-input class="search" v-model="input" placeholder="搜索">
+                <template #prefix>
+                    <el-icon><search /></el-icon>
+                </template>
+            </el-input>
+            <div class="button">
+                <img src="@/assets/images/foster-home/firend-icon.png" alt="" />
+                新增客户
+            </div>
+        </div>
+        <div class="list-content">
+            <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="@/assets/images/foster-home/image.png" alt="" />
+                            <div class="item-text">
+                                <div class="name">
+                                    <span>{{ ele.name }}</span>
+                                    <el-icon color="#FFD489" size="16" ><Edit /></el-icon>
+                                </div>
+                                <div>电话：19875236548</div>
+                                <div>地址：湖北省武汉市富里唱鑫园5023</div>
+                            </div>
+                        </div>
+                    </div>
+                </collapse-item>
+            </collapse>
+        </div>
+        <!-- <div class="list-footer">
+          <div class="settings">批量设置</div>
+        </div> -->
     </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from 'vue'
+import { ref } from "vue";
+import { Collapse, CollapseItem, Popup } from "vant";
+import { useRouter } from "vue-router";
+import { ElMessage } from 'element-plus'
+const router = useRouter();
 
-onMounted(()=>{
-})
+//新建分组
+const showGroupPopup = ref(false);
+const showPopup = () => {
+    showGroupPopup.value = true;
+};
+const input = ref("");
+const distributionShow = ref(false);
 
+// 果树选中的监听事件
+const checkedList = ref([])
+const changeActive = (arr) =>{
+    checkedList.value = arr
+}
+
+// 管理
+const hadnleManage = (value) => {
+  console.log('val',value);
+  list.value = [defalutList[1]]
+};
+
+const defalutList = [
+    {
+        name: "常用列表",
+        id: "1",
+        isGroup: 0,
+        children: [
+            {
+                id: "3",
+                name: "周浩",
+            },
+            {
+                id: "4",
+                name: "王丽丽",
+            },
+        ],
+    },
+    {
+        name: "未分组列表",
+        id: "2",
+        isGroup: 1,
+        children: [
+            {
+                id: "5",
+                name: "李莉",
+            },
+            {
+                id: "6",
+                name: "陈林",
+            },
+        ],
+    },
+]
+const list = ref(defalutList);
+
+const activeNames = ref([0]);
 </script>
 
 <style lang="scss" scoped>
-.client-list {
-  height: 100%;
-  overflow: auto;
-  
+.list-wrap {
+    width: 100%;
+    height: 100%;
+    .list-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .search {
+            width: 90px;
+            margin-right: 10px;
+            --el-input-placeholder-color: rgba(255, 212, 137, 0.6);
+            ::v-deep {
+                .el-input__wrapper {
+                    box-shadow: none;
+                    border: 1px solid rgba(255, 212, 137, 0.6);
+                    background: transparent;
+                }
+                .el-input__prefix,
+                .el-input__inner {
+                    color: rgba(255, 212, 137, 0.6);
+                }
+            }
+        }
+        .button {
+            width: calc(100% - 100px);
+            color: #FFD489;
+            background: rgba(255, 212, 137, 0.06);
+            border: 1px solid rgba(255, 212, 137, 0.3);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px;
+            border-radius: 5px;
+            img {
+                width: 20px;
+                height: 17px;
+                margin-right: 6px;
+            }
+        }
+    }
+    .list-content {
+        width: 100%;
+        height: calc(100% - 50px - 40px);
+        margin-top: 12px;
+        .text {
+            color: #FFD489;
+            cursor: pointer;
+        }
+        ::v-deep {
+            .van-cell:after,.van-collapse-item--border:after,.van-hairline--top-bottom:after{
+              border: none !important;
+            }
+            .van-cell {
+                border-radius: 5px 5px 0 0;
+                justify-content: space-between;
+                background: rgba(255, 255, 255, 0.08);
+                color: #fff;
+                .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(255, 255, 255, 0.4);
+                        margin-left: 10px;
+                    }
+                }
+            }
+            .van-collapse-item__content{
+              background: rgba(255, 255, 255, 0.08);
+            }
+            .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;
+            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;
+            }
+            .item-text {
+                color: #999999;
+                font-size: 12px;
+                line-height: 1.6;
+                .name {
+                    display: flex;
+                    align-items: center;
+                    span {
+                        font-size: 15px;
+                        color: #FFFFFF;
+                        font-weight: 500;
+                        margin-right: 5px;
+                    }
+                }
+            }
+        }
+        .list-item + .list-item {
+            margin-top: 12px;
+        }
+    }
+    .list-footer{
+      width: 100%;
+      background: rgba(255, 255, 255, 0.08);
+      display: flex;
+      justify-content: center;
+      .settings{
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 4px;
+        padding: 12px 36px;
+        color: #fff;
+      }
+    }
 }
 </style>

src/views/home/components/homeFile.vue

@@ -1,380 +0,0 @@
-<template>
-    <div class="file-wrap">
-        <div class="file-title">
-            <img src="@/assets/images/common/chart-yellow.png" alt="" />
-            果园档案
-        </div>
-
-        <div class="box-wrap">
-            <div class="overview-file">
-                <div class="box-title">总体档案</div>
-                <div class="base-data">
-                    <div
-                        class="base-item"
-                        v-for="(item, index) in photoBaseData"
-                        :key="item.label"
-                        @click.stop="toggleFileItem(item.label, index)"
-                    >
-                        <span class="label">{{ item.label }}</span>
-                        <div v-if="index === 0" class="value">
-                            <el-select
-                                v-model="item.speciesItemId"
-                                size="small"
-                                @change="changeSelect"
-                                class="type-select"
-                            >
-                                <el-option
-                                    v-for="item in selectOptions"
-                                    :key="item.speciesItemId"
-                                    :label="item.speciesItemName"
-                                    :value="item.speciesItemId"
-                                />
-                            </el-select>
-                        </div>
-                        <div v-else class="value">{{ item.value }}</div>
-                    </div>
-                </div>
-                <div class="list">
-                    <div class="list-item" v-for="item in photoList" :key="item.key">
-                        <div class="list-name">
-                            <img src="@/assets/images/common/title-icon.png" alt="" />
-                            {{ item.key }}
-                        </div>
-                        {{ item.statement }}
-                    </div>
-                </div>
-            </div>
-
-            <div class="box-r">
-                <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"
-                            @click="toggleAcitve(item.name, item.field)"
-                            :class="{ active: activeOuput === item.name }"
-                        >
-                            <div class="item-name">{{ item.name }}</div>
-                            <div class="item-val">
-                                {{ item.value }}<span>{{ item.unit }}</span>
-                            </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"
-                            @click="toggleAcitve(item.name, item.field)"
-                            :class="{ active: activeOuput === item.name }"
-                        >
-                            <div class="item-name">{{ item.name }}</div>
-                            <div class="item-val">
-                                {{ item.value }}<span>{{ item.unit }}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import eventBus from "@/api/eventBus";
-import { onMounted, ref } from "vue";
-const outputBox = ref([
-    { id: 1, name: "产量估计", field: "cl", value: "--", unit: "斤/亩" },
-    { id: 2, name: "高质果率", field: "spgl", value: "--", unit: "%" },
-    { id: 3, name: "雌花比例", value: "--", unit: "%" },
-]);
-
-const qualityBox = ref([
-    { id: 5, name: "通风率", field: "tfl", value: "--", unit: "%" },
-    { id: 6, name: "透光率", field: "tgl", value: "--", unit: "%" },
-    { id: 7, name: "病虫比例", value: "--", unit: "%" },
-]);
-
-const photoBaseData = ref([
-    {
-        label: "品种",
-        value: "--",
-    },
-    {
-        label: "冠幅平均表面积",
-        value: "--",
-    },
-    {
-        label: "平均总枝条",
-        value: "--",
-    },
-    {
-        label: "平均树龄",
-        value: "--",
-    },
-]);
-
-const photoList = ref([
-    { key: "物候", statement: "--" },
-    { key: "病虫", statement: "--" },
-    { key: "异常", statement: "--" },
-    { key: "农事", statement: "--" },
-]);
-
-const activeOuput = ref(1);
-
-// 品种
-const farmId = ref(null);
-onMounted(() => {
-    eventBus.off("area:id", toggleAreaId);
-    eventBus.on("area:id", toggleAreaId);
-    farmId.value = sessionStorage.getItem("farmId");
-
-    eventBus.off("resetFileActive", resetActive2);
-    eventBus.on("resetFileActive", resetActive2);
-});
-function resetActive2(name) {
-    activeOuput.value = name
-    console.log('222resetActive2', name);
-}
-
-const selectOptions = ref([]);
-const getSpeciesItemList = (farmId, regionId) => {
-    VE_API.farm.getSpeciesItemList({ farmId, regionId }).then((res) => {
-        selectOptions.value = res.data;
-        selectOptions.value.unshift({ speciesItemId: "0", speciesItemName: "全部" });
-        photoBaseData.value[0].speciesItemId = res.data[0].speciesItemId;
-    });
-};
-
-function changeSelect(e) {
-    console.log("eee", e);
-    setFileData(e);
-}
-
-function toggleFileItem(name, index) {
-    if (index !== 0) {
-        toggleAcitve(name);
-    }
-}
-
-// 产量详情
-function toggleAcitve(name, field) {
-    activeOuput.value = name;
-    console.log("产量详情产量详情产量详情", name);
-    // eventBus.emit("change:mapPoint", name)
-    if (name === "透光率" || name === "通风率") {
-        eventBus.emit("handleTabItem", name)
-        eventBus.emit("handleActive", { name, key: "生态指标", index: 1, isFile: name === "通风率" ? true : false });
-        // eventBus.emit('handleTab',"透光率")
-    } else {
-        eventBus.emit("change:mapPoint", field);
-    }
-}
-
-const regionId = ref(null);
-function toggleAreaId({ areaId, farmId }) {
-    regionId.value = areaId;
-    getSpeciesItemList(farmId, areaId);
-    getFileData(farmId, areaId);
-}
-
-const allTypeData = ref([]);
-function getFileData(farmId, regionId) {
-    VE_API.farm.getFarmFiles({ farmId, regionId: regionId ? regionId : undefined }).then(({ data }) => {
-        allTypeData.value = data;
-        setFileData(photoBaseData.value[0].speciesItemId);
-    });
-}
-
-function setFileData(type_id) {
-    const res = allTypeData.value.find((item) => item.type_id == type_id);
-    photoBaseData.value[1].value = res.meta_info.avg_crown + "平方米";
-    photoBaseData.value[2].value = res.meta_info.avg_branch_num;
-    photoBaseData.value[3].value = res.meta_info.avg_age + "年";
-    photoList.value[0].key = res.meta_info.phenology_info.key;
-    photoList.value[0].statement = res.meta_info.phenology_info.statement;
-    photoList.value[1].key = res.meta_info.dp_alert_info.key;
-    photoList.value[1].statement = res.meta_info.dp_alert_info.statement;
-    photoList.value[2].key = res.meta_info.grow_alert_info.key;
-    photoList.value[2].statement = res.meta_info.grow_alert_info.statement;
-    photoList.value[3].key = res.meta_info.prescription_info.key;
-    photoList.value[3].statement = res.meta_info.prescription_info.statement;
-    // if(res.production_info.production){
-    //   res.production_info.production = (res.production_info.production * 1.3).toFixed(1)
-    // }
-    outputBox.value[0].value = res.production_info.production;
-    outputBox.value[1].value = res.production_info.quality.toFixed(0);
-    outputBox.value[2].value = res.production_info.cihua_ratio.toFixed(0);
-    qualityBox.value[0].value = res.ecology_info.ventilation;
-    qualityBox.value[1].value = res.ecology_info.transmittance;
-    qualityBox.value[2].value = res.ecology_info.dp_situation;
-}
-</script>
-
-<style lang="scss" scoped>
-.file-wrap {
-    margin-top: 16px;
-    background: url("@/assets/images/home/file-bg-w.png") no-repeat top center / 100% 100%;
-    margin-left: 12px;
-    padding: 12px 18px 20px 16px;
-    .file-title {
-        font-size: 20px;
-        color: #ffd489;
-    }
-    .box-wrap {
-        display: flex;
-        .box-r {
-            padding-left: 24px;
-        }
-    }
-    .overview-file {
-        padding-top: 20px;
-        .box-title {
-            font-size: 16px;
-            padding-left: 13px;
-            margin-bottom: 16px;
-            position: relative;
-            display: flex;
-            justify-content: space-between;
-            color: #fff;
-            &::before {
-                content: "";
-                position: absolute;
-                left: 0;
-                top: 3px;
-                width: 3px;
-                height: 16px;
-                background: #fff;
-                border-radius: 11px;
-            }
-        }
-        .title {
-            color: #f3c11d;
-            font-size: 16px;
-            font-family: "PangMenZhengDao";
-            margin-bottom: 20px;
-            .big {
-                width: 13px;
-                height: 13px;
-                margin: -10px 0 0 4px;
-            }
-            .small {
-                width: 7px;
-                height: 7px;
-                margin-left: -3px;
-            }
-        }
-        .base-data {
-            background: rgba(207, 207, 207, 0.1);
-            border-radius: 4px;
-            padding: 6px 0;
-            display: flex;
-            .base-item {
-                // flex: 1;
-                text-align: center;
-                padding: 0 14px;
-                .label {
-                    font-size: 12px;
-                    color: #666666;
-                    width: max-content;
-                    display: block;
-                    margin: 0 auto;
-                    padding-bottom: 2px;
-                }
-                .value {
-                    padding-top: 2px;
-                    font-size: 16px;
-                    color: #ffffff;
-                    width: max-content;
-                    margin: 0 auto;
-                }
-                .type-select {
-                    width: 72px;
-                    ::v-deep {
-                        .el-select__wrapper {
-                            background: rgba(247, 190, 90, 0.1);
-                            box-shadow: 0 0 0 1px #f7be5a inset;
-                            color: #ffd489;
-                        }
-                        .el-select__placeholder {
-                            color: #ffd489;
-                        }
-                    }
-                }
-            }
-            .base-item + .base-item {
-                border-left: 1px solid rgba(102, 102, 102, 0.42);
-            }
-        }
-        .list {
-            margin-top: 15px;
-            width: max-content;
-            font-size: 14px;
-            .list-item {
-                color: #bbbbbb;
-                display: flex;
-                margin-bottom: 8px;
-                .list-name {
-                    color: #f3c11d;
-                    margin-right: 6px;
-                    img {
-                        width: 17px;
-                        height: 13px;
-                    }
-                }
-            }
-        }
-    }
-    .overview-file + .overview-file {
-        margin-top: 8px;
-    }
-    .box-wrap {
-        display: flex;
-        .box-item {
-            box-sizing: border-box;
-            min-width: 110px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            padding: 6px 16px;
-            background: rgba(207, 207, 207, 0.1);
-            border-radius: 4px;
-            border: 1px solid rgba(207, 207, 207, 0.1);
-            cursor: pointer;
-            .item-name {
-                font-size: 12px;
-                color: #666666;
-                width: max-content;
-            }
-            .item-val {
-                font-size: 18px;
-                color: #fff;
-                width: max-content;
-                padding-top: 3px;
-                span {
-                    font-size: 12px;
-                    padding-left: 2px;
-                }
-            }
-            &.active {
-                background: rgba(255, 212, 137, 0.16);
-                border: 1px solid #ffd489;
-                .item-name {
-                    color: #bbbbbb;
-                }
-            }
-        }
-        .box-item + .box-item {
-            margin-left: 8px;
-        }
-    }
-}
-</style>

src/views/home/index.vue

@@ -99,7 +99,7 @@ const components = {
 const router = useRouter();
 const mapRef = ref(null);
 
-const activeName = ref('认养列表')
+const activeName = ref('客户列表')
 onMounted(() => {
     //区域切换监听事件
     eventBus.on("area:id", areaId);