new-hjb-pc/hjb_pc/components/MyFCSContent.vue

<script setup>
import OrderMap from '~/pages/homeIndex/orderMap.vue';

// ['navList', 'dataList','page']
const props = defineProps({
    navList: Array,
    dataList: Array,
    page: { default: 1 },
    pageSize: { default: 10 },
    total: { default: 0 },
})
const emit = defineEmits(['update:page'])
const navBox = ref(null)
const activeIndex = ref(0)
watch(() => activeIndex.value, () => {
    console.log('切换，根据:======', props.navList[activeIndex.value]);
})

const handle = e => {
    const childrens = navBox.value.children
    for (const i in childrens) {
        if (e.target == childrens[i]) activeIndex.value = i
    }
}
const secretPhone = phone => `${phone}`.slice(0, 3) + '****' + `${phone}`.slice(7)
// 用于解决elmentplus评分组件只读时的不能显示小数评分的问题 ==
onMounted(() => {
    const disAll = document.querySelectorAll('.is-disabled')
    sortList.value.forEach((item, index) => disAll[index].children[Math.ceil(item.shopGrade) - 1]?.firstChild.classList.add('is-active'))
})
// onMounted(() => document.querySelectorAll('.is-disabled').forEach(el => el.children[Math.ceil(value.value) - 1].firstChild.classList.add('is-active')))
// =================================================== ==
const innerVisible = ref(false)
const position = ref({ lat: 39.993252, lon: 116.473083 })
const address = ref('')
const router = useRouter();
const handleMap = (area, vipName) => {
    // address.value = `${area}${vipName}`
    // innerVisible.value = !innerVisible.value
    router.push({
        path:'orderMap',
        query:{
            address:`${area} ${vipName}`
        }
    })
}
function handleSort(activeIndex) {
    let arr = []
    switch (Number(activeIndex)) {
        case 0:
            arr = props.dataList.sort((a, b) => (b.feelingLevel.slice(0, -1) * b.count * (a.shopGrade + b.shopGrade) / 2 + b.shopGrade) - (a.feelingLevel.slice(0, -1) * a.count * (a.shopGrade + b.shopGrade) / 2 + a.shopGrade))
            break;
        case 1:
            arr = props.dataList.sort((a, b) => b.count - a.count)
            break;
        case 2:
            arr = props.dataList.sort((a, b) => b.shopGrade - a.shopGrade)
            break;
    }
    return arr
}
const sortList = computed(() => handleSort(activeIndex.value))
const pageI = ref(props.page)
watch(() => pageI.value, ne => emit('update:page', ne))
const myPageSize = ref(Number(props.pageSize))
</script>

<template>
    <div class="MyFCSContent">
        <div class="content-box">
            <div class="nav-box" @click="handle" ref="navBox">
                <div v-for="item, index in navList" :class="{ active: activeIndex == index }" :key="index">{{ item }}
                </div>
            </div>
        </div>
        <div>
            <div class="commodity-list" v-for="item in sortList" :key="item">
                <div>
                    <div class="list-title">
                        [{{ item.area }}] <span>{{ item.companyName }}</span>
                        <template v-if="item.isIntegrity">
                            <img src="/images/诚信.png" alt=""><span class="my_ml">诚信保证金用户</span>
                        </template>
                        <span>认证信息：</span>
                        <div class="img-box my_no-ml">
                            <img class="verify" v-if="item.realNameCard" src="/images/verify1.png" alt="">
                            <img class="verify" v-if="item.shopCard" src="/images/verify2.png" alt="">
                            <img class="verify" v-if="item.foodYesCard" src="/images/verify3.png" alt="">
                        </div>
                    </div>
                    <div class="list-shop">
                        <div>
                            <div>
                                <img :src="item.imgUrl" alt="">
                            </div>
                            <!-- <div>最近接单：2年前</div> -->
                        </div>
                        <div>
                            <div>商家名称：{{ item.vipName }} <a href="#" class="">店铺信息</a></div>
                            <div>店铺电话：<span class="phone"> {{ secretPhone(item.shopPhone) }}</span></div>
                            <div>店铺地址：{{ item.shopAddress }} <span class="a" href="#"
                                    @click="handleMap(item.area, item.vipName)"><img src="/images/lookMap.png" alt="">
                                    查看地图</span></div>
                            <div>
                                <a href="#" class="btn">下单给他</a>
                                <a href="#" class="btn ml">在线沟通</a>
                            </div>
                        </div>
                        <div>
                        </div>
                        <div>
                            <div class="first">接单数据</div>
                            <div class="last">
                                <div>接单数{{ item.count }}单</div>
                                <div>好评度{{ item.feelingLevel }}</div>
                            </div>
                        </div>
                        <div>
                            <div class="tit">店铺等级</div>
                            <el-rate :model-value="item.shopGrade" disabled show-score size="large" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <template v-if="!dataList.length">
            <el-empty description="description" />
        </template>
        <div class="pagi-box">
            <el-pagination background layout="total,prev, pager, next" :default-current-page="Number(pageI)"
                :hide-on-single-page="true" v-model:current-page="pageI" :total="Number(total)"
                v-model:page-size="myPageSize" />
        </div>

        <el-dialog v-model="innerVisible">
            <goods-map :map-address="address" :position="position"></goods-map>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
::v-deep .el-overlay {
    .el-overlay-dialog {
        .el-dialog {
            border-radius: 0 !important;
            width: 4.6875rem;
            height: 2.6042rem;

            .el-dialog__body {
                padding: 0 !important;
                height: 100%;

                .amap-container {
                    height: 1.5625rem;
                }

            }

            .el-dialog__header {
                display: none;
            }
        }
    }
}

::v-deep .el-rate {
    --el-rate-icon-size: .1563rem;
    --el-rate-icon-margin: .0104rem;
    width: 100%;


    .el-rate__text {
        color: #ff9900 !important;
        font-size: .0729rem 
        // white-space: nowrap;
            // overflow: hidden;
            // text-overflow: ellipsis;
    }
}


.MyFCSContent {
    font-size: .0625rem;

    * {
        box-sizing: border-box;
    }

    img {
        height: 100%;
    }

    .content-box {
        .nav-box {
            font-size: .0833rem;
            font-weight: 100;
            display: flex;
            height: .2083rem;
            line-height: .2083rem;
            border-bottom: .0104rem solid #ff518f;
            background: #f2f2f2;

            &>* {
                padding: 0 .1042rem;
                cursor: pointer;
            }

            .active {
                background: #ff518f;
                color: #fff;
            }
        }
    }

    .commodity-list {
        padding-top: .1042rem;
        display: flex;
        flex-direction: column;
        align-items: center;

        &:last-of-type {
            &>* {
                border-bottom: none;
            }
        }

        &>* {
            width: 5.9896rem;
            padding: .1042rem 0;
            margin: 0 .1042rem;
            border-bottom: .0052rem dashed #aaa;

            .list-title {
                height: .1406rem;
                padding-bottom: .0521rem;
                font-size: .0729rem;
                line-height: 1;
                display: flex;
                align-items: center;

                &>* {
                    margin-left: .0521rem;
                }

                .my_no-ml {
                    margin-left: 0;
                }

                .my_ml {
                    margin-left: .026rem;
                }

                img {
                    vertical-align: middle;
                    height: 100%;
                }

                .img-box {
                    display: flex;
                    align-items: center;
                    height: 100%;

                    img.verify {
                        margin: 0 .0104rem;

                        &:first-child {
                            margin-left: 0;
                        }

                        &:last-child {
                            margin-right: 0;
                        }
                    }
                }

            }

            .list-shop {
                height: .7188rem;
                display: flex;

                &>*:nth-of-type(1) {
                    width: .6771rem;
                    height: .5885rem;
                    display: flex;
                    flex-direction: column;
                    border: .0052rem solid #ff518f;

                    &>*:first-child {
                        height: .4479rem;
                        // padding: .026rem;
                        overflow: hidden;

                        img {
                            width: 100%;
                        }
                    }

                    &>*:last-child {
                        flex-grow: 1;
                        // background-image: linear-gradient(90deg, #f22c1e, #ff677b), linear-gradient(#e7e7e7, #e7e7e7);
                        color: #fff;
                        font-size: .0625rem;
                        text-align: center;
                        line-height: .1302rem;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }

                &>*:nth-of-type(2) {
                    width: 1.7708rem;
                    padding-left: .1042rem;

                    a,
                    .a {
                        color: #005aa0;
                        cursor: pointer;

                        img {
                            width: .0625rem;
                            vertical-align: bottom;
                        }
                    }

                    &>* {
                        line-height: .125rem;

                        .phone {
                            color: #ff518f;
                        }

                        &:last-child {

                            a,
                            .a {
                                margin-right: .0521rem;
                            }
                        }
                    }


                    a.btn {
                        margin-top: .1042rem;
                        display: inline-block;
                        width: .3854rem;
                        height: .1563rem;
                        font-size: .0625rem;
                        line-height: .1563rem;
                        border-radius: .026rem;
                        text-align: center;
                        color: #fff;
                        background: #ff518f;

                        &.ml {
                            margin-left: .0052rem;
                        }
                    }
                }

                &>*:nth-of-type(3) {
                    display: none;
                    width: 1.4063rem;
                    font-size: .0729rem;
                    line-height: .125rem;

                    &>*:first-child {
                        display: flex;
                        height: .1563rem;

                        span {
                            line-height: .1458rem;
                            font-size: .0677rem;
                        }

                    }

                    &>*:last-child {
                        font-size: .0833rem;
                        line-height: 1;
                    }
                }

                &>*:nth-of-type(5) {
                    width: 1.0417rem;
                    font-size: .1302rem;
                    color: #ff518f;
                    display: flex;
                    flex-direction: column;
                    margin-left: .1563rem;

                    .tit {
                        margin: 0 auto;
                        margin-bottom: .0521rem;
                    }
                }

                &>*:nth-of-type(4) {
                    width: .9583rem;
                    height: .7188rem;
                    border-radius: .0417rem;
                    line-height: .125rem;
                    // border: .0104rem solid #fff4e0;
                    color: #ae4900;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    margin-left: 1.4583rem;

                    .first {
                        width: .3333rem;
                        height: .125rem;
                        background: #fff4e0;
                        border-radius: .0417rem 0 .0417rem 0;
                    }

                    .last {
                        flex-grow: 1;
                        padding: 0 .1302rem;

                        &>* {
                            height: 50%;
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            &:first-child {
                                border-bottom: .0052rem dashed #ffe18d;
                            }
                        }
                    }
                }
            }
        }
    }

    .pagi-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: .1042rem;
    }
}
</style>