feiniao-farm-h5/src/views/old_mini/home/subPages/expertList.vue

<template>
    <div class="prescription-list">
        <custom-header v-if="!isShowHeader" :name="isToSelect ? '选择专家' : '咨询专家'"></custom-header>
        <div class="prescription-filter">
            <div class="filter-search">
                <el-input v-model="keyword" style="width: 100%" placeholder="搜索位置" :prefix-icon="Search" />
            </div>
            <div class="select-box">
                <div class="select-item width-30">
                    <el-select v-model="typeVal" placeholder="品种" @change="getList">
                        <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </div>
                <div class="select-item width-20">
                    <el-select v-model="regionVal" placeholder="城市">
                        <el-option
                            v-for="item in regionOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="select-item width-30">
                    <el-select v-model="levelVal" placeholder="专家擅长">
                        <el-option
                            v-for="item in levelOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="select-item width-20">
                    <el-select v-model="levelVal" placeholder="筛选">
                        <el-option
                            v-for="item in levelOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
            </div>
        </div>
        <div class="prescription-content">
            <div class="list">
                <div class="list-item" v-for="(item, index) in list" :key="index">
                    <div class="list-top">
                        <div class="user">
                            <!-- <img :src="item.pic" alt="" /> -->
                            <img v-show="index === 0" :src="require(`@/assets/img/home/zj-1.png`)" alt="" />
                            <img v-show="index === 1" :src="require(`@/assets/img/home/zj-2.png`)" alt="" />
                            <img v-show="index === 2" :src="require(`@/assets/img/home/zj-3.png`)" alt="" />
                            <!-- <div class="checkbox" @click.stop="handleCheck(item)">
                                <el-icon class="icon" v-if="item.isDefault"><Select /></el-icon>
                                <el-icon class="icon rotate" v-else><CloseBold /></el-icon>
                            </div> -->
                        </div>
                        <div class="info">
                            <div class="text">
                                <div class="info-flex">
                                    <span class="name">{{ item.name }}</span>
                                    <!-- <span class="expert-tag">
                                        <img class="expert-img" src="@/assets/img/home/expert-icon.png" alt="">
                                        专家
                                    </span> -->
                                    <div class="fruit-tag" v-for="(ele, eleIndex) in item.tagList" :key="eleIndex">
                                        {{ ele.name }}
                                    </div>
                                </div>
                                <div class="add-btn">
                                    <el-icon size="16" color="#fff"><Plus /></el-icon>
                                </div>
                            </div>
                            <div class="van-multi-ellipsis--l2 ellipsis">擅长：{{ item.strongPoint }}</div>

                            <div class="list-btn">
                                <div class="btn-primary" @click.stop="toPage(item)">
                                    <span>免费咨询</span>
                                </div>
                                <div class="btn-plain" @click.stop="handlePage(item)">查看处方</div>
                            </div>
                        </div>
                    </div>
                </div>
                <empty
                    v-show="list.length < 1"
                    image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
                    image-size="80"
                    description="暂无数据"
                />
            </div>
        </div>
    </div>
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import { Empty } from "vant";
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";
const store = useStore();
const router = useRouter();
const route = useRoute();

const props = defineProps({
    isShowHeader: {
        type: Boolean,
        default: false,
    },
});

const isToSelect = route.query.isToSelect ? true : false;

const handlePage = ({ isDefault, userId }) => {
    if (isDefault == null) {
        console.log("isDefault", isDefault);
        // router.push(`/expert_prescription?userId=${userId}&disabled=true`)
    } else {
        router.push("/expert_prescription");
    }
};

const typeOptions = ref([]);

function getSpecieList() {
    VE_API.farm.fetchSpecieList().then(({ data }) => {
        typeOptions.value = data;

        // getList(data[0].id);
    });
}

const list = ref([
    {
        containerId: "9",
        expertId: "739294587868155904",
        name: "冼继东",
        strongPoint: "擅长：长期从事农业昆虫与害虫防治教学与研究工作。取得成果和奖励10项，发表学术论文50余篇。多年来一直致力于果树、蔬菜以及水稻主要病虫害非化学防控技术的推广工作，为有机荔枝龙眼、稻米、蔬菜以及多种水果的高效、安全生产提供技术指导。",
        tagList: [
            {
                id: 825,
                name: "荔枝",
                remark: "花穗生长速度过慢",
            },
            {
                id: 829,
                name: "病虫害",
                remark: "防止落果",
            },
        ],
        userId: 81881,
    },
    {
        containerId: "9",
        expertId: "739294587868155904",
        name: "韦帮稳",
        pic: "https://birdseye-img-ali-cdn.sysuimars.com//expert/1757473957076.png",
        strongPoint: "擅长：深耕果树栽培领域达30年，在荔枝、龙眼、柑橘、番茄、木瓜等多个品类果树具有非常丰富的种植栽培经验；自管荔枝果园超2000亩，每年指导海南、湛江、茂名、广州、汕尾、惠州、广西等多地的种植户超百户，面积超1万亩！",
        tagList: [
            {
                id: 825,
                name: "荔枝",
                remark: "花穗生长速度过慢",
            },
            {
                id: 829,
                name: "龙眼",
                remark: "防止落果",
            },
        ],
        userId: 81881,
    },
    {
        containerId: "9",
        expertId: "739294587868155904",
        name: "黄旭明",
        pic: "https://birdseye-img-ali-cdn.sysuimars.com//expert/1757473957076.png",
        strongPoint: "擅长：长期从事南方果树生理学研究，研究领域包括常绿果树枝梢生长节奏及调控、具假种皮果实果皮发育、细胞壁代谢和钙营养与生理病害发生关系、果实膨大生长与水分关系等。研究方向为果树生态生理学。1998年获华南农业大学植物生理学博士学位，现任南方果树研究室主任。",
        tagList: [
            {
                id: 825,
                name: "荔枝",
                remark: "花穗生长速度过慢",
            },
            {
                id: 829,
                name: "龙眼",
                remark: "防止落果",
            },
        ],
        userId: 81881,
    },
]);

const getList = (speciesId) => {
    VE_API.home.fetchExpertList({ speciesId }).then(({ data }) => {
        list.value = data || [];
    });
};

onMounted(() => {
    getSpecieList();
});

function toPage({ containerId, userId, name }) {
    if (isToSelect) {
        router.push(`/expert_homepage?containerId=${containerId}`);
        // router.replace(`/expert_homepage?containerId=${containerId}`)
    } else {
        router.push(`/chat_frame?userId=${userId}`);
    }
}

// 搜索
const keyword = ref(null);
const typeVal = ref(null);
const regionVal = ref(null);
const levelVal = ref(null);

const regionOptions = ref([
    {
        label: "全部",
        value: "all",
    },
    {
        label: "区域1",
        value: "1",
    },
    {
        label: "区域2",
        value: "2",
    },
    {
        label: "区域3",
        value: "3",
    },
]);

const levelOptions = ref([
    { label: "全部", value: "all" },
    { label: "荔枝", value: "1" },
    { label: "龙眼", value: "2" },
    { label: "枇杷", value: "3" },
]);
</script>

<style lang="scss" scoped>
.prescription-list {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #f5f7fb;
    .prescription-filter {
        padding: 12px 12px 0 12px;
        .filter-search {
            padding-bottom: 6px;
            ::v-deep {
                .el-input__wrapper {
                    box-shadow: 0 0 0 1px #fff inset;
                    border-radius: 20px;
                }
            }
        }
        .select-box {
            width: 100%;
            display: flex;
            justify-content: space-around;
            .select-item {
                width: fit-content;
                ::v-deep {
                    .el-input__wrapper {
                        background: none;
                        box-shadow: none;
                    }
                    .el-input__inner {
                        font-size: 14px;
                        color: rgba(0, 0, 0, 0.5);
                    }
                    .el-select__wrapper {
                        background: none;
                        box-shadow: none;
                        gap: 2px;
                        padding: 4px 2px;
                        justify-content: center;
                    }
                    .el-select__selection {
                        flex: none;
                        width: fit-content;
                    }
                    .el-select__placeholder {
                        color: rgba(0, 0, 0, 0.5);
                        position: static;
                        transform: none;
                        width: fit-content;
                    }
                }
            }
            .width-30 {
                width: 30%;
            }
            .width-20 {
                width: 20%;
            }
        }
    }
    .prescription-content {
        overflow-y: auto;
        height: calc(100% - 40px);
        padding: 6px 12px 12px;
        box-sizing: border-box;
        width: 100%;
        .list {
            position: relative;
            .list-item {
                background: #fff;
                padding: 16px 12px 12px;
                border-radius: 8px;
                .user {
                    width: 68px;
                    height: 68px;
                    margin-right: 12px;
                    position: relative;
                    img {
                        width: 100%;
                        height: 100%;
                        border-radius: 8px;
                        object-fit: scale-down;
                    }
                    .checkbox {
                        position: absolute;
                        bottom: -2px;
                        right: -1px;
                        width: 25px;
                        height: 25px;
                        background: #2199f8;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        .icon {
                            color: #fff;
                            font-size: 16px;
                        }
                        .rotate {
                            transform: rotate(45deg);
                        }
                    }
                }
                .list-top {
                    display: flex;
                    img{
                        border-radius: 50%;
                        object-fit: cover;
                    }
                }
                .list-btn {
                    display: flex;
                    // justify-content: center;
                    font-size: 12px;
                    margin-top: 8px;
                    .btn-primary {
                        background: rgba(33, 153, 248, 0.12);
                        padding: 0 12px;
                        color: #2199f8;
                        border-radius: 20px;
                        height: 32px;
                        line-height: 32px;
                        display: flex;
                        span {
                            margin-left: 3px;
                        }
                    }
                    .btn-plain {
                        background: rgba(162, 162, 162, 0.12);
                        color: rgba(0, 0, 0, 0.5);
                        padding: 0px 12px;
                        border-radius: 20px;
                        height: 32px;
                        line-height: 32px;
                        margin-left: 8px;
                    }
                }
                .info {
                    width: calc(100% - 78px);
                    line-height: 1.6;
                    .ellipsis {
                        max-width: 255px;
                        color: #666666;
                    }
                    .text {
                        display: flex;
                        color: #666666;
                        align-items: center;
                        justify-content: space-between;
                        .info-flex {
                            display: flex;
                            align-items: center;
                        }
                        .add-btn {
                            width: 26px;
                            height: 26px;
                            border-radius: 50%;
                            background: #2199f8;
                            text-align: center;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                        .name {
                            color: #000;
                            font-size: 16px;
                            font-weight: bold;
                        }
                        .expert-tag {
                            height: 20px;
                            width: 48px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: #c77d05;
                            background: #ffecad;
                            border-radius: 4px;
                            font-size: 12px;
                            margin-left: 8px;
                            line-height: 20px;
                            .expert-img {
                                width: 12px;
                                padding-right: 2px;
                            }
                        }
                        .btn-text {
                            font-size: 12px;
                            color: #a8a8a8;
                            padding: 2px 12px;
                            border-radius: 20px;
                            border: 1px solid #a8a8a8;
                            background: rgba(220, 220, 220, 0.1);
                            &.actice {
                                color: #f3c11d;
                                border-color: #f3c11d;
                                background: rgba(243, 193, 29, 0.1);
                            }
                        }
                    }
                    .fruit-tag {
                        margin-left: 5px;
                        padding: 0 8px;
                        height: 20px;
                        line-height: 20px;
                        background: #cae7ff;
                        border-radius: 2px;
                        font-size: 12px;
                        color: #2199f8;
                        // &.pest {
                        //     background: #eedaff;
                        //     color: #ac4dff;
                        // }
                        &:nth-child(3) {
                            background: #eedaff;
                            color: #ac4dff;
                        }
                    }
                    .ellipsis {
                        font-size: 12px;
                        color: #999;
                        margin-top: 4px;
                    }
                }
            }
            .list-item + .list-item {
                margin-top: 16px;
                padding-top: 16px;
                border-top: 1px solid #f5f5f5;
            }
        }
    }
}
</style>