Merge branch 'master' of http://www.sysuimars.cn:3000/feiniao/feiniao-farm-h5

src/App.vue

@@ -70,7 +70,7 @@
                 />
             </template>
         </tabbar-item>
-        <tabbar-item replace to="/message" v-if="curRole == 0">
+        <tabbar-item replace to="/agri_services" v-if="curRole == 0">
             <span>农资农服</span>
             <template #icon="props">
                 <img
@@ -126,7 +126,7 @@ const router = useRouter();
 // 首页loading加载完才显示底部导航栏
 const showTab = ref(false);
 // 0: 农户, 1: 专家, 2:农资农服
-const curRole = ref(1);
+const curRole = ref(0);
 
 let tabBarHeight = 0;
 onMounted(() => {

src/components/customHeader.vue

@@ -1,8 +1,11 @@
 <template>
     <div class="custom-header" :style="{background:bgColor}">
-        <div class="back" @click="goback">
+        <div class="back" @click="goback" v-if="!isClose">
             <el-icon class="icon" color="rgba(0, 0, 0, 0.9)"><ArrowLeftBold /></el-icon>
         </div>
+        <div class="close" @click="close" v-else>
+            <el-icon class="icon" color="rgba(0, 0, 0, 0.9)"><CloseBold /></el-icon>
+        </div>
         <div class="title">{{name}}</div>
     </div>
 </template>
@@ -24,9 +27,15 @@ const props = defineProps({
     isGoBack:{
         type:Boolean,
         defalut:false
+    },
+    isClose:{
+        type:Boolean,
+        defalut:false
     }
 })
 
+const emit = defineEmits(['close'])
+
 
 const goback = () => {
   if(!props.isGoBack){
@@ -36,6 +45,10 @@ const goback = () => {
   }
 };
 
+const close = () => {
+    emit('close')
+}
+
 </script>
 
 <style lang="scss" scoped>
@@ -49,7 +62,7 @@ const goback = () => {
     align-items: center;
     position: relative;
     z-index: 12;
-    .back{
+    .back,.close{
         display: flex;
         align-items: center;
         color: #656565;

src/router/globalRoutes.js

@@ -131,5 +131,18 @@ export default [
         name: "User",
         meta: { showTabbar: true, keepAlive: true },
         component: () => import("@/views/old_mini/user/index.vue"),
+    },
+    // 用户管理详情
+    {
+        path: "/user_manage",
+        name: "UserManage",
+        component: () => import("@/views/old_mini/user/manage.vue"),
+    },
+    // 农资农服
+    {
+        path: "/agri_services",
+        name: "AgriServices",
+        meta: { showTabbar: true, keepAlive: true },
+        component: () => import("@/views/old_mini/agri_services/index.vue"),
     }
 ];

src/views/old_mini/agri_services/index.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="agri-services">
+        <tabs v-model:active="active" class="tabs">
+            <tab title="农事动态">
+                农事动态
+                <!-- <farm-manage /> -->
+            </tab>
+            <tab title="农资农服大厅">
+                农资农服大厅
+                <!-- <demand-hall /> -->
+            </tab>
+        </tabs>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { Tab, Tabs } from "vant";
+
+const active = ref(0);
+</script>
+<style lang="scss" scoped>
+.agri-services {
+    width: 100%;
+    height: 100%;
+    .tabs {
+        ::v-deep {
+            .van-tabs__wrap {
+                margin-bottom: 8px;
+            }
+            .van-tabs__line {
+                width: 24px;
+                height: 4px;
+            }
+            .van-tab {
+                width: 100px;
+                flex: none;
+            }
+            .van-tabs__nav {
+                justify-content: center;
+            }
+        }
+    }
+}
+</style>

src/views/old_mini/mine/index.vue

@@ -20,7 +20,7 @@
             </div>
         </div>
         <div class="mine-content">
-            <div class="garden-info">
+            <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>

src/views/old_mini/user/index.vue

@@ -68,7 +68,7 @@ const handleAddClient = () => {
 
 // 管理
 const hadnleManage = (value) => {
-    router.push(`/manage?name=${value.name}&total=${value.children.length}&isGroup=${value.isGroup}`);
+    router.push(`/user_manage?name=${value.name}&total=${value.children.length}&isGroup=${value.isGroup}`);
 };
 
 const list = ref([

src/views/old_mini/user/manage.vue

@@ -0,0 +1,295 @@
+<template>
+    <div class="container">
+        <custom-header :name="headerName" :isClose="isClose" @close="handleClose"></custom-header>
+        <div class="content" v-if="total!=='0'">
+            <el-input class="search" v-model="input" placeholder="搜索">
+                <template #prefix>
+                    <el-icon class="el-input__icon"><search /></el-icon>
+                </template>
+            </el-input>
+            <div class="list">
+                <div class="list-item" v-for="(item, index) in list" :key="index">
+                    <checkbox @change="changeCheck" v-show="setingShow" v-model="item.checked"></checkbox>
+                    <div class="item-flex">
+                        <img class="photo" src="" alt="" />
+                        <div class="item-text">
+                            <div class="name">{{ item.name }}</div>
+                            <div>电话：19875236548</div>
+                            <div>地址：湖北省武汉市富里唱鑫园5023</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div v-else class="no-data">
+            <span>当前列表无好友</span>
+            <div class="button-row">
+                <div class="del">删除分组</div>
+                <div>添加好友</div>
+            </div>
+        </div>
+        <div class="footer" v-show="total!=='0'">
+            <span @click="handleSeting('新增分组')" v-show="!setingShow && isGroup === '1'">批量设置</span>
+            <div v-show="!setingShow && isGroup!=='1'" class="btn-group">
+                <div class="delete" @click="handleDelete">删除分组</div>
+                <div class="btn-txt">
+                    <span @click="handleSeting('添加')" class="add">添加</span>
+                    <span @click="handleSeting('移出')">移出</span>
+                </div>
+            </div>
+            <div v-show="setingShow" class="footer-flex">
+                <div class="text-group">
+                    <div class="icon" v-show="filterList.length">
+                        <el-icon><ArrowUpBold /></el-icon>
+                    </div>
+                    <div class="text-item" v-for="(item, index) in filterList" :key="index">
+                        {{ item.name }}
+                        <span v-show="filterList.length - 1 !== index">/</span>
+                    </div>
+                </div>
+                <div class="button" @click="handleAdd">{{btnText}}（{{ filterList.length }}）</div>
+            </div>
+        </div>
+    </div>
+    <!-- 新增分组弹窗 -->
+    <add-popup :show="showPopup"></add-popup>
+    <!-- 删除弹窗 -->
+    <action-sheet class="action-sheet" v-model:show="showAction" :actions="actions" cancel-text="取消" @select="onSelect">
+        <template #description>
+            <span class="desc">该分组下还有好友存在，删除后好友会放在 未分组的好友列表里</span>
+        </template>
+    </action-sheet>
+</template>
+
+<script setup>
+import customHeader from "@/components/customHeader.vue";
+import addPopup from "./components/addPopup.vue";
+import { onActivated, onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+import { Checkbox } from "vant";
+import { ElMessage } from "element-plus";
+import { ActionSheet } from 'vant';
+const route = useRoute();
+
+const input = ref("");
+const list = ref([
+    {
+        name: "123",
+        checked: false,
+    },
+    {
+        name: "456",
+        checked: false,
+    },
+]);
+
+const showPopup = ref(false);
+//新增分组
+const handleAdd = () => {
+    if (filterList.value.length) {
+        showPopup.value = !showPopup.value;
+    } else {
+        ElMessage.warning("请选择好友");
+    }
+};
+
+const isClose = ref(false);
+const handleClose = () => {
+    isClose.value = false;
+    setingShow.value = false;
+    list.value = list.value.map((item) => {
+        item.checked = false;
+        return item;
+    });
+}
+
+//批量设置
+const setingShow = ref(false);
+const btnText = ref('')
+const handleSeting = (str) => {
+    btnText.value = str
+    setingShow.value = true;
+    isClose.value = true;
+};
+
+//删除
+const showAction = ref(false)
+const actions = [{ name: '删除' ,color: '#F73C3C'},]
+const handleDelete = () =>{
+    showAction.value = true
+}
+const onSelect = (item) =>{
+    showAction.value = false
+}
+
+const filterList = ref([]);
+const changeCheck = () => {
+    filterList.value = list.value.filter((item) => item.checked);
+};
+
+const headerName = ref("");
+const isGroup = ref(null);
+const total = ref(0)
+onMounted(() => {
+    headerName.value = `${route.query.name}(${route.query.total})`;
+    total.value = route.query.total;
+    isGroup.value = route.query.isGroup;
+    // setingShow.value = false
+    // filterList.value = []
+});
+</script>
+
+<style lang="scss" scoped>
+.container {
+    width: 100%;
+    height: 100vh;
+    background: #f5f7fb;
+    .content {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        padding: 20px 12px;
+        box-sizing: border-box;
+        .search {
+            width: 100%;
+            ::v-deep {
+                &.el-input {
+                    --el-input-placeholder-color: #000;
+                }
+                .el-input__prefix {
+                    color: #000;
+                }
+                .el-input__wrapper {
+                    box-shadow: none;
+                    border-radius: 20px;
+                    border: 1px solid rgba(0, 0, 0, 0.25);
+                }
+            }
+        }
+        .list {
+            .list-item {
+                padding: 12px 10px;
+                border-radius: 8px;
+                background: #fff;
+                display: flex;
+                align-items: center;
+                margin-top: 12px;
+                .item-flex {
+                    display: flex;
+                    align-items: center;
+                }
+                .item-flex {
+                    display: flex;
+                    align-items: center;
+                    margin-left: 10px;
+                }
+                .photo {
+                    width: 62px;
+                    height: 62px;
+                    border-radius: 8px;
+                    margin-right: 12px;
+                }
+                .item-text {
+                    color: #999999;
+                    font-size: 12px;
+                    line-height: 1.6;
+                    .name {
+                        font-size: 15px;
+                        color: #000;
+                        font-weight: 500;
+                    }
+                }
+            }
+        }
+    }
+     .no-data{
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        span{
+            font-size: 16px;
+            color: rgba(0, 0, 0, 0.49);
+        }
+        .button-row{
+            margin-top: 12px;
+            display: flex;
+            div{
+                padding: 7px 24px;
+                color: rgba(0, 0, 0, 0.49);
+                border-radius: 5px;
+                background: #fff;
+            }
+            .del{
+                color: #F27777;
+                margin-right: 10px;
+                background: rgba(242, 119, 119, 0.12);
+            }
+        }
+    }
+    .footer {
+        position: fixed;
+        bottom: 0;
+        background: #fff;
+        width: 100%;
+        padding: 12px;
+        box-sizing: border-box;
+        text-align: center;
+        color: #262626;
+        .btn-group{
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .delete{
+                color: #F27777;
+                padding: 5px 12px;
+                border-radius: 20px;
+                background: rgba(242, 119, 119, 0.12);
+            }
+            .btn-txt{
+                span{
+                   padding: 5px 12px;
+                }
+                .add{
+                    color: #8F8F8F;
+                    margin-right: 5px;
+                }
+            }
+        }
+        .footer-flex {
+            display: flex;
+            justify-content: space-between;
+            .text-group {
+                display: flex;
+                align-items: center;
+                color: #2199F8;
+                .icon {
+                    width: 18px;
+                    height: 18px;
+                    background: #2199F8;
+                    border-radius: 50%;
+                    color: #fff;
+                    line-height: 22px;
+                    font-size: 13px;
+                    margin-right: 5px;
+                }
+            }
+            .button {
+                color: #fff;
+                padding: 5px 12px;
+                font-size: 12px;
+                border-radius: 2px;
+                background: #2199F8;
+            }
+        }
+    }
+}
+
+.action-sheet{
+    .desc{
+        font-size: 12px;
+    }
+}
+</style>