feiniao-farm-h5/src/views/old_mini/expert_detail/index.vue

<template>
    <div class="farm-page">
        <custom-header :name="query.isStore ? '查看详情' : '我的主页'"></custom-header>
        <div class="farm-list">
            <div class="box-wrap expert-info">
                <div class="expert-top">
                    <div class="top-l" v-if="query.isStore">
                        <img class="expert-icon store-icon" src="@/assets/img/home/nz.png" alt="">
                        <div class="l-info store-info">
                            <div class="info-name">
                                <div class="expert-name">{{ storeDetail?.storeName }}</div>
                            </div>
                            <div class="info-bottom">
                                <el-rate
                                    v-model="storeDetail.score"
                                    disabled
                                    :colors="['#FF953D', '#FF953D', '#FF953D']"
                                    disabled-void-color="#DDDDDD"
                                    size="small"
                                    show-score
                                    text-color="#FF953D"
                                    score-template="{value} 分"
                                />
                            </div>
                        </div>
                    </div>
                    <div class="top-l" v-else>
                        <img class="expert-icon" src="https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png" alt="">
                        <div class="l-info">
                            <div class="info-name">
                                <div class="expert-name">韦帮稳</div>
                                <span class="expert-tag">
                                    <img class="expert-img" src="@/assets/img/home/expert-icon.png" alt="">
                                    专家
                                </span>
                            </div>
                            <div class="info-bottom">
                                <div
                                    class="fruit-tag"
                                    v-for="(ele, eleIndex) in tagList"
                                    :key="eleIndex"
                                >
                                    {{ ele.name }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="top-r">编辑信息</div> -->
                </div>
                <div class="expert-list">
                    <div class="page-title">
                        <img class="title-icon" src="@/assets/img/home/man.png" alt="">
                        {{ query.isStore ? '基本简介' : '专家简介' }}
                    </div>
                    <div class="list-one" v-if="query.isStore">
                        <div class="one-info">
                            <span class="one-name">服务类型：</span>
                            <span v-for="(item, index) in storeDetail?.serviceTypeJson" :key="index">
                                {{ item }}
                                <span v-if="index !== storeDetail?.serviceTypeJson.length - 1">、</span>
                            </span>
                            <span v-if="!storeDetail?.serviceTypeJson || storeDetail?.serviceTypeJson.length === 0">--</span>
                        </div>
                        <div class="one-info">
                            <span class="one-name">服务作物：</span>
                            <span v-for="(item, index) in storeDetail?.serviceCropsJson" :key="index">
                                {{ item }}
                                <span v-if="index !== storeDetail?.serviceCropsJson.length - 1">、</span>
                            </span>
                            <span v-if="!storeDetail?.serviceCropsJson || storeDetail?.serviceCropsJson.length === 0">--</span>
                        </div>
                        <div class="one-info">
                            <span class="one-name">服务区域：</span>{{ storeDetail?.address || "--" }}
                        </div>
                        <div class="one-info">
                            <span class="one-name">农机设备：</span>
                            <span v-for="(item, index) in storeDetail?.agriculturalEquipmentJson" :key="index">
                                {{ item }}
                                <span v-if="index !== storeDetail?.agriculturalEquipmentJson.length - 1">、</span>
                            </span>
                            <span v-if="!storeDetail?.agriculturalEquipmentJson || storeDetail?.agriculturalEquipmentJson.length === 0">--</span>
                        </div>
                    </div>
                    <div class="list-one" v-else>
                        <div class="one-info">
                            <span class="one-name">职称：</span>广州荔博园种业有限公司董事长
                        </div>
                        <div class="one-info">
                            <span class="one-name">单位：</span>广州市从化区荔枝文化博览园
                        </div>
                        <div class="one-info">
                            <span class="one-name">擅长：</span>荔枝的病虫害防治、生长异常调节、物候期调 节等等...
                        </div>
                        <div class="one-info last-one">
                            <span class="one-name">服务品类：</span><div class="more">更多<el-icon class="more-icon"><ArrowRightBold /></el-icon></div>
                        </div>
                        <div class="one-type">
                            <div class="type-item" v-for="item in 5" :key="item">
                                <img class="type-img" src="@/assets/img/gallery/icon-0.png" alt="">
                                <div class="type-name">荔枝</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-wrap list-wrap">
                <div class="list-title">
                    <div class="page-title">
                        <img class="garden-icon" src="@/assets/img/home/garden-title.png" alt="">
                        {{ query.isStore ? '服务农场' : '定点基地' }}
                    </div>
                    <div class="more" v-if="farmList && farmList.length > 9">更多<el-icon class="more-icon"><ArrowRightBold /></el-icon></div>
                </div>
                <div class="list-content">
                    <div class="list-item" v-for="item in farmList" :key="item">
                        <div class="item-info">
                            <div class="item-top">
                                <div class="left-img">
                                    <img class="img-dom" src="https://birdseye-img-ali-cdn.sysuimars.com/16926861-1e20-4cbd-8bf2-90208db5a2d0/806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_202509010800_001_806080da-1a30-4b5b-b64b-b22e722c6cb6/DJI_20250901080536_0045_V_code-ws0fsmge97gh.jpeg" alt="">
                                </div>
                                <div class="left-content">
                                    <div class="content-title">
                                        <span>{{ item.farmName }}</span>
                                    </div>
                                    <div class="content-desc">
                                        <div>果园面积：{{ item.mianji || "--" }}亩</div>
                                        <div>服务作物：{{ item.typeName }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item-btn" v-if="!query.isStore">查看详情</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-btn" v-if="query.isStore">
            <div class="share-btn" @click="handleFreeConsult">免费咨询</div>
        </div>
        <div class="bottom-btn" v-else>
            <div class="share-btn">分享</div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import customHeader from "@/components/customHeader.vue";
import { onActivated, ref } from "vue";
import { useRoute } from "vue-router";

const router = useRouter();
let query = ref(useRoute().query);

onActivated(() => {
    query.value = useRoute().query;
    if (query.value.id && query.value.isStore) {
        getStoreDetail();
        getFarmList();
    }
});

const getStoreDetail = () => {
    const params = {
        id: query.value.id,
    };
    VE_API.z_agricultural_store.getStoreDetail(params).then((res) => {
        storeDetail.value = res.data || {};
        storeDetail.value.score = res.data.score || 5;
    });
};

const farmList = ref([]);
const getFarmList = () => {
    const params = {
        id: query.value.id,
    };
    VE_API.z_agricultural_store.getStoreList(params).then((res) => {
        farmList.value = res.data || [];
    });
};
const storeDetail = ref({});
const tagList = [{name: "荔枝"}, {name: "龙眼"}]
const handleFreeConsult = () => {
    router.push(`/chat_frame?userId=${storeDetail.value.managers[0].miniUserId}`);
};
</script>

<style scoped lang="scss">
.farm-page {
    width: 100%;
    height: 100vh;
    .farm-list {
        width: 100%;
        height: calc(100% - 40px - 52px);
        overflow: auto;
        background-color: #f7f7f7;
        padding: 12px;
        box-sizing: border-box;
        .page-title {
            display: flex;
            align-items: center;
            font-size: 16px;
            color: #000000;
            font-weight: bold;
            .title-icon {
                width: 16px;
                height: 16px;
                padding-right: 8px;
            }
            .garden-icon {
                width: 16px;
                padding-right: 8px;
            }
        }
        
        .more {
            display: flex;
            align-items: center;
            color: #999999;
        }
        .box-wrap {
            background: #ffffff;
            border-radius: 12px;
            padding: 12px;
            &.expert-info {
                .expert-top {
                    display: flex;
                    align-items: flex-start;
                    justify-content: space-between;
                    .top-l {
                        display: flex;
                    }
                    .top-r {
                        display: flex;
                        align-items: center;
                        padding: 4px 10px;
                        color: #2199F8;
                        font-size: 12px;
                        background: rgba(33, 153, 248, 0.12);
                        border-radius: 20px;
                    }
                    .l-info {
                        padding-left: 7px;
                        &.store-info {
                            padding-left: 10px;
                            .info-bottom {
                                background: rgba(255, 149, 61, 0.1);
                                border-radius: 4px;
                                margin-top: 2px;
                                padding: 0px 4px 2px 4px;
                                ::v-deep{
                                    .el-rate .el-rate__icon {
                                        margin-right: 2px;
                                    }
                                    .el-rate--small {
                                        height: 20px;
                                    }
                                }
                            }
                        }
                    }
                    .info-name {
                        display: flex;
                        align-items: center;
                    }
                    .info-bottom {
                        padding-top: 8px;
                        display: flex;
                    }
                    
                    .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(2) {
                            background: #eedaff;
                            color: #ac4dff;
                        }
                    }
                    .expert-icon {
                        width: 68px;
                        height: 68px;
                        border-radius: 8px;
                        object-fit: cover;
                        &.store-icon {
                            width: 50px;
                            height: 50px;
                        }
                    }
                    .info-flex{
                        display: flex;
                        align-items: center;
                    }
                    .expert-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);
                        }
                    }
                }
                .expert-list {
                    padding-top: 16px;
                    font-size: 14px;
                    .list-one {
                        padding-top: 8px;
                        .one-info {
                            // display: flex;
                            color: #666666;
                            line-height: 18px;
                            padding-bottom: 4px;
                            .one-name {
                                flex: none;
                                color: rgba(102, 102, 102, 0.5);
                            }
                            &.last-one {
                                padding-top: 6px;
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                            }
                        }
                        .one-type {
                            padding-top: 8px;
                            display: flex;
                            justify-content: space-around;
                            .type-item {
                                width: 20%;
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                align-items: center;
                                .type-img {
                                    width: 48px;
                                    height: 48px;
                                    border-radius: 50%;
                                    border: 1px solid #E5E5E5;
                                }
                                .type-name {
                                    padding-top: 2px;
                                    color: #666666;
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }
            }
            &.list-wrap {
                margin-top: 12px;
                .list-title {
                    padding-bottom: 12px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-bottom: 1px solid #F5F5F5;
                }
            }
        }
        .list-content {
            padding: 12px 0;
        }
        .list-item {
            background-color: #fff;
            border-radius: 10px;
            // padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .item-info {
                .item-top {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    .left-img {
                        width: 68px;
                        height: 68px;
                        border-radius: 8px;
                        .img-dom {
                            border-radius: 8px;
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                    .left-content {
                        .content-title {
                            display: flex;
                            align-items: center;
                            gap: 10px;
                            margin-bottom: 4px;
                            font-size: 16px;
                            font-weight: 500;
                            .content-tag {
                                background-color: #2199f8;
                                color: #fff;
                                padding: 2px 8px;
                                border-radius: 15px;
                                font-size: 12px;
                                font-weight: 400;
                            }
                            .content-text {
                                font-size: 12px;
                                color: #2199F8;
                                font-weight: 400;
                            }
                        }
                        .content-desc {
                            font-size: 12px;
                            color: #999999;
                            line-height: 18px;
                        }
                    }
                }
                .select {
                    width: 105px;
                    margin-left: 80px;
                    margin-top: 10px;
                    ::v-deep{
                        .el-select__wrapper{
                            border: 1px solid #2199F8;
                            box-shadow: none;
                        }
                        .el-select__placeholder,.el-select__caret{
                            color: #2199F8;
                        }
                        .el-select__selection {
                            flex: none;
                            width: fit-content;
                        }
                        .el-select__placeholder {
                            position: static;
                            transform: none;
                            width: fit-content;
                        }
                    }
                }
            }
            .item-btn {
                color: #2199F8;
                padding: 4px 8px;
                border: 1px solid #2199F8;
                border-radius: 4px;
            }
        }
        .list-item + .list-item {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #F5F5F5;
        }
    }
    .bottom-btn {
        height: 52px;
        width: 100%;
        padding: 6px 32px;
        box-sizing: border-box;
        &.flex-between {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .forward-btn {
                background: #fff;
                border: 1px solid rgba(153, 153, 153, 0.5);
                color: #666666;
                padding: 8px 20px;
            }
            .free-btn {
                padding: 8px 20px;
            }
        }
        .share-btn {
            color: #fff;
            text-align: center;
            border-radius: 20px;
            padding: 8px;
            background: linear-gradient(180deg, #76C3FF, #2199F8);
        }
    }
}
</style>