feiniao-farm-h5/src/views/old_mini/mine/components/friendList.vue

<template>
    <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/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="@/assets/img/mine/img-photo.png" alt="" />
                            <div class="item-text">
                                <div class="name">
                                    <span>{{ ele.name }}</span>
                                    <el-icon color="#00BEDB" size="16"><Edit /></el-icon>
                                </div>
                                <div>电话：19875236548</div>
                                <div>地址：湖北省武汉市富里唱鑫园5023</div>
                            </div>
                        </div>
                    </div>
                </collapse-item>
            </collapse>
        </div>
        <div class="footer">
            <div class="btn" @click="showPopup">新建分组</div>
            <div class="btn big-btn" @click="handleShow">我要定制</div>
        </div>
    </div>
    <!-- 添加分组弹窗 -->
    <add-popup :show="showGroupPopup"></add-popup>
    <!-- 定制详情 -->
    <popup class="custom-popup" position="bottom" v-model:show="customShow">
        <div class="popup-title">
            <span>定制详情</span>
        </div>
        <div class="popup-cont">
            <div class="select-row">
                <span>平均斤数</span>
                <el-select class="select" v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="tips">总斤数为 <span>{{value2.length * 5}}</span> 斤</div>
            <div class="select-row">
                <span class="label">优先 分配果树</span>
                <el-select class="select" v-model="value1" placeholder="请选择">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="select-row">
                <span>分配列表({{value2.length}})</span>
                <el-select class="select select-width" v-model="value2" placeholder="请选择" multiple collapse-tags :max-collapse-tags="1">
                    <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
        </div>
        <div class="popup-button">
            <div class="cancel" @click="customShow = false">取消定制</div>
            <div @click="handleDistribution">确认分配</div>
        </div>
    </popup>
    <!-- 分配树木 -->
    <popup class="distribution-popup" round position="bottom" closeable v-model:show="distributionShow">
        <div class="title">请选择 优先分配果树</div>
        <distribution-list class="distribution-cont" @changeActive="changeActive"></distribution-list>
        <div class="button-wrap">
            <div class="button" @click="handleOk">确认</div>
        </div>
    </popup>
</template>

<script setup>
import { ref } from "vue";
import { Collapse, CollapseItem, Popup } from "vant";
import distributionList from "./distributionList.vue";
import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus'
import addPopup from "../components/addPopup.vue";
const router = useRouter();

//新建分组
const showGroupPopup = ref(false);
const showPopup = () => {
    showGroupPopup.value = true;
};

//我要定制
const customShow = ref(false);
const handleShow = () => {
    value.value = 'Option1'
    value1.value = ''
    value2.value = ''
    customShow.value = true;
};
const input = ref("");
const distributionShow = ref(false);

// 果树选中的监听事件
const checkedList = ref([])
const changeActive = (arr) =>{
    checkedList.value = arr
}

const handleOk = () =>{
    if(checkedList.value.length){
        customShow.value = false
        distributionShow.value = false
    }else{
        ElMessage.warning('请选择果树!')
    }
}

//确认分配
const handleDistribution = () =>{
    if(value2.value.length){
        distributionShow.value = true
    }else{
        ElMessage.warning('请选择好友!')
    }
}

const value = ref('Option1')
const options = [
  {
    value: 'Option1',
    label: '5斤/人',
  },
  {
    value: 'Option2',
    label: '10斤/人',
  },
  {
    value: 'Option2',
    label: '15斤/人',
  },
]

const value1 = ref('')
const options1 = [
  {
    value: 'Option1',
    label: '5斤/人',
  },
  {
    value: 'Option2',
    label: '10斤/人',
  },
  {
    value: 'Option2',
    label: '15斤/人',
  },
]

const value2 = ref('')
const options2 = [
  {
    value: '1',
    label: '好友1',
  },
  {
    value: '2',
    label: '好友2',
  },
  {
    value: '3',
    label: '好友3',
  },
]

// 管理
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>
.list-wrap {
    margin: 0 12px;
    .list-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .search {
            width: 90px;
            margin-right: 10px;
            --el-input-placeholder-color: #00bedb;
            ::v-deep {
                .el-input__wrapper {
                    box-shadow: none;
                    border: 1px solid #18d2ef;
                    background: transparent;
                    border-radius: 20px;
                }
                .el-input__prefix,
                .el-input__inner {
                    color: #00bedb;
                }
            }
        }
        .button {
            width: calc(100% - 100px);
            background: #c8f1f7;
            color: #00bedb;
            border: 1px solid #00d5f6;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 8px;
            border-radius: 20px;
            img {
                width: 20px;
                height: 17px;
                margin-right: 6px;
            }
        }
    }
    .list {
        width: 100%;
        height: 100%;
        margin-top: 12px;
        .text {
            color: #17c2dd;
        }
        ::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;
        }
        .big-btn {
            font-size: 14px;
            color: #fff;
            padding: 8px 80px;
            margin-top: 25px;
            background: linear-gradient(160deg, #18e0ff, #16afc6);
        }
    }
}
// 定制详情
.custom-popup {
    width: calc(100% - 20px);
    border-radius: 8px;
    padding: 10px 14px;
    box-sizing: border-box;
    bottom: 50px;
    left: 10px;
    border: 1px solid #00bedb;
    background: linear-gradient(0deg, #ffffff 60%, #8ef0ff 100%);
    .popup-title {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 12px;
        position: relative;
        span {
            position: relative;
            z-index: 2;
        }
        &::before {
            content: "";
            position: absolute;
            width: 90px;
            height: 8px;
            border-radius: 8px;
            background: linear-gradient(120deg, #18e0ff, rgb(255, 255, 255, 0));
            bottom: 0;
        }
    }
    .popup-cont {
        .select-row + .select-row{
            margin-top: 5px;
        }
        .select-row {
            border: 1px solid rgba(0, 190, 219, 0.8);
            padding: 3px 0 3px 10px;
            border-radius: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;
            .label{
                color: #00BEDB;
            }
            .select{
                width: 32%;
                ::v-deep{
                    .el-select__wrapper{
                        box-shadow: none;
                    }
                    .el-select__caret,.el-select__placeholder{
                        color: #00BEDB;
                        text-align: right;
                    }
                    .el-select__placeholder.is-transparent{
                        color: rgba(0, 190, 219, 0.3);
                    }
                }
            }
            .select-width{
                width: 48%;
            }
        }
        .tips{
            font-size: 12px;
            margin: 6px;
            span{
                color: #00BEDB;
            }
        }
    }
    .popup-button {
        display: flex;
        padding-top: 12px;
        border-top: 1px solid rgba(0, 190, 219, 0.17);
        div {
            font-size: 12px;
            width: calc(100% - 108px - 20px);
            padding: 8px;
            border-radius: 20px;
            background: #00d5f6;
            color: #fff;
            text-align: center;
            border: 1px solid transparent;
        }
        .cancel {
            width: 108px;
            margin-right: 20px;
            background: #f4f4f4;
            border: 1px solid #e5e4e4;
            color: #aaaaaa;
        }
    }
}
.distribution-popup {
    padding-top: 30px;
    height: 60%;
    overflow: auto;
    bottom: 50px;
    .title {
        margin-left: 12px;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 12px;
    }
    .distribution-cont{
        height: calc(100% - 95px);
        overflow-y: auto;
    }
    .button-wrap{
        background: #fff;
        padding: 15px;
        display: flex;
        justify-content: center;
        .button{
            background: #18E0FF;
            color: #fff;
            font-size: 12px;
            padding: 7px 86px;
            border-radius: 20px;
        }
    }
}
</style>