proginn-frontend/pages/frontend/consult/list.vue

<template>
    <div
        :class="mobile ? 'mobileMain' : ''"
        :style="{marginTop: mainMarginTop, marginBottom: mobile ? '0px' : '30px !important'}">
        <div class="consult-wrapper" v-if="!mobile">
            <div class="consult-top">
                <div class="tabs">
                    <!-- <a href="/skill/" class="tabs-item">技能服务</a> -->
                    <div class="tabs-item active">咨询服务</div>
                    <a href="/learn/" class="tabs-item">客栈学院</a>
                    <el-button class="add-btn" @click="handleClickAdd">添加咨询赚钱</el-button>
                </div>
                <div class="consult-category-wrapper">
                    <!-- <div class="category-title">技术分类</div> -->
                    <!-- 一级分类内容 -->
                    <div
                        class="category-one-wrapper"
                        :class="categoryExpanded ? 'expand' : ''">
                        <!-- 更多 -->
                        <!-- <div
                            class="category-more"
                            @click="handleClickExpandCategory">{{ categoryExpanded ? '收起' : '更多' }}</div> -->
                        <!-- 全部 -->
                        <a
                            href="/consult/"
                            class="category-one-item"
                            :class="pagination.selectedCateIdOne == '' ? 'active' : ''">全部</a>
                        <!-- 一级分类 -->
                        <a
                            v-for="categoryOne in consultCate"
                            :key="categoryOne.value"
                            class="category-one-item"
                            :class="pagination.selectedCateIdOne == categoryOne.value ? 'active' : ''"
                            :href="`/consult/${categoryOne.value}/`">{{ categoryOne.label }}</a>
                    </div>
                    <!-- 二级分类内容 -->
                    <div class="category-two-wrapper">
                        <div
                            class="category-two-content"
                            v-for="categoryOne in consultCate"
                            :key="`cate-two-parnet${categoryOne.value}`"
                            v-show="pagination.selectedCateIdOne == categoryOne.value">
                            <a
                                class="category-two-item"
                                :class="pagination.selectedCateIdTwo == categoryTwo.value ? 'active' : ''"
                                :href="`/consult/${categoryTwo.value}/`"
                                v-for="categoryTwo in categoryOne.children"
                                :key="`cate-two-${categoryTwo.value}`">{{ categoryTwo.label }}</a>
                        </div>
                    </div>
                </div>
                <!-- 最新的交易数据 -->
                <div class="newest-trade-wrapper" :style="{ marginTop: pagination.selectedCateIdTwo ? '8px' : 0 }">
                    <el-carousel
                        height="34px"
                        direction="vertical"
                        autoplay
                        loop
                        :interval="1600"
                        indicator-position="none">
                        <el-carousel-item v-for="(item, index) in newestTradeList" :key="`newest-trade-${index}`">
                            <div class="newest-trade-item">
                                    <div class="newest-trade-item-content">
                                    <img :src="item.avatar" class="avatar">
                                    <span class="time">{{ item.time }}</span>
                                    <span class="nickname">{{ item.nickname }}</span>
                                    <span class="event">{{ item.event_name }}</span>
                                    <span class="price">￥{{ item.price }}</span>
                                </div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
            <div class="consult-content">
                <div class="consult-list-wrapper" v-if="consultList.length">
                    <div
                        class="consult-item-new"
                        v-for="item in consultList"
                        :key="item.uid">
                        <a class="consult-item-top" :href="`/c/${item.uid}`">
                            <img class="consult-cover" :src="item.zx_sale_img" alt="cover">
                            <div class="consult-info">
                                <div class="consult-info-title">TA擅长的</div>
                                <div
                                    class="consult-info-text"
                                    v-for="(consultItem, index) in item.saleList"
                                    v-show="index <= 2"
                                    :key="index">
                                    {{ index + 1 }}· {{ consultItem.title }}
                                </div>
                            </div>
                        </a>
                        <div class="owner-info">
                            <a class="owner-content" :href="`/wo/${item.uid}`">
                                <img :src="item.avatar" class="user-avatar" alt="userAvatar">
                                <!-- <img class="img" :src="defaultImg" v-real-img="item.avatar" alt="userAvatar"> -->
                                <span class="nickname">{{ item.nickname }}</span>
                                <img class="cert-img" v-if="item.freework_level == 3" src="@/assets/img/common/cert-f3@2x.png">
                                <img class="cert-img" v-if="item.freework_level == 2" src="@/assets/img/common/cert-f2@2x.png">
                            </a>
                            <div class="trade-info" v-if="item.zxLastOrder.buy_uid">
                                <img :src="item.zxLastOrder.avatar" class="avatar">
                                <!-- <span class="time">12</span> -->
                                <span class="trade-text">{{ item.zxLastOrder.nickname }} 发起咨询</span>
                            </div>
                        </div>
                        <div class="owner-company">{{ item.company }} {{ item.title }}</div>
                        <div class="price-info">
                            <div class="price-content">
                                <div class="price">￥{{ item.zxPriceMin }}<span>起</span></div>
                                <div class="num">{{ item.zxViewNum }}人浏览过</div>
                            </div>
                            <div class="buyer-content">
                                <div v-if="item.zxViewInfo && item.zxViewInfo.length==4" style="display:flex;">
                                    <img
                                    class="buyer-item"
                                    v-for="(buyerInfo, index) in item.zxViewInfo"
                                    :key="`${buyerInfo.avatar}-${index}`"
                                    :src="buyerInfo.avatar"/>
                                    <span class="more-img">...</span>
                                </div>
                                <div v-else>
                                    <img
                                    class="buyer-item"
                                    v-for="(buyerInfo, index) in item.zxViewInfo"
                                    :key="`${buyerInfo.avatar}-${index}`"
                                    :src="buyerInfo.avatar">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <a
                        class="consult-item"
                        v-for="item in consultList"
                        :key="item.uid"
                        :href="`/c/${item.uid}`">
                        <div class="owner-info">
                            <img :src="item.avatar" style="border-radius:50% !important;" class="avatar" alt="avatar">
                            <div class="owner-content">
                                <div class="nickname">{{ item.nickname }}</div>
                                <div class="company">{{ item.company }} {{ item.title }}</div>
                                <div class="price">￥{{ item.zxPriceMin }}<span>起</span></div>
                            </div>
                        </div>
                        <div class="consult-info">
                            <div
                                class="consult-info-item"
                                v-for="(consultItem, index) in item.saleList"
                                :key="index">
                                · {{ consultItem.title }}
                            </div>
                        </div>
                        <div class="stats-info">
                            <div v-if="item.zxTotalNum"><span class="num">{{ item.zxTotalNum }}</span> 人咨询过</div>
                            <div v-if="item.zxTotalNum && item.zxRating" class="line"></div>
                            <div v-if="item.zxRating">响应率：<span class="rate">{{ item.zxRatingText }}</span></div>
                        </div>
                    </a> -->
                </div>
                <div class="result-empty-wrapper" v-else>
                    <img src="@/assets/img/common/empty@2x.png" alt="empty">
                    <span>暂无搜索内容</span>
                </div>
                <div class="pagination-wrapper" v-if="pagination.pageCount > 1">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :current-page="pagination.page"
                        :page-count="pagination.pageCount"
                        @current-change="handlePageChange">
                    </el-pagination>
                </div>
            </div>
        </div>
        <div class="consult-wrapper-mobile" v-else>
            <div class="consult-category">
                <div class="consult-category-one">
                    <div class="category-scroller">
                        <div
                            class="consult-category-one-item"
                            :class="!pagination.selectedCateIdOne ? 'active' : ''"
                            @click="handleClickCategoryOne(0)">
                            全部
                        </div>
                        <div
                            class="consult-category-one-item"
                            :class="pagination.selectedCateIdOne == category.value ? 'active' : ''"
                            v-for="(category) in consultCate"
                            :key="`category-one-${category.value}`"
                            @click="handleClickCategoryOne(category.value)">
                            {{ category.label }}
                        </div>
                    </div>
                    <!-- filter -->
                    <div class="filter-bg"></div>
                    <div class="filter-wrapper" @click="handleShowCategoryDrawer">
                        <img src="@/assets/img/works/filter-icon@2x.png" alt="filter">
                    </div>
                </div>
                <div class="consult-category-two">
                    <!-- 全部二级分类 -->
                    <div
                        class="consult-category-two-wrapper"
                        v-show="!pagination.selectedCateIdOne">
                        <div
                            class="consult-category-two-item"
                            :class="pagination.selectedCateIdTwo == category.value ? 'active' : ''"
                            v-for="category in consultCateAll"
                            :key="`category-all-${category.value}`"
                            @click="handleClickCategoryTwo(category.value)">
                            {{ category.label }}
                        </div>
                    </div>
                    <!-- 接口返回的二级分类 -->
                    <div
                        class="consult-category-two-wrapper"
                        v-for="(category) in consultCate"
                        :key="`category-two-wrapper-${category.value}`"
                        v-show="pagination.selectedCateIdOne === category.value">
                        <div
                            class="consult-category-two-item"
                            :class="pagination.selectedCateIdTwo == categoryChild.value ? 'active' : ''"
                            v-for="categoryChild in category.children"
                            :key="`category-two-${categoryChild.value}`"
                            @click="handleClickCategoryTwo(categoryChild.value)">
                            {{ categoryChild.label }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="consult-list" :class="showWxHeader ? 'consult-list__showWxHeader' : ''">
                <ul
                    class="consult-list-wrapper"
                    v-infinite-scroll="handleLoadMoreConsult"
                    :infinite-scroll-disabled="pagination.noMore"
                    :infinite-scroll-immediate="false">
                    <div
                        class="consult-item"
                        v-for="item in consultList"
                        :key="item.uid"
                        @click="handleClickConsultItem(item.uid)">
                        <div class="owner-content">
                            <img class="avatar" style="border-radius:50% !important;" v-lazy="item.avatar" alt="avatar">
                            <div class="owner-info">
                                <div class="nickname">{{ item.nickname }}</div>
                                <div class="company">{{ item.company }} {{ item.title }}</div>
                                <div class="price">￥{{ item.zxPriceMin }}<span>起</span></div>
                            </div>
                        </div>
                        <div class="consult-info">
                            <div
                                class="consult-info-item"
                                v-for="(consultItem, index) in item.saleList"
                                :key="index">
                                · {{ consultItem.title }}
                            </div>
                        </div>
                        <div class="stats-info">
                            <div v-if="item.zxTotalNum"><span class="num">{{ item.zxTotalNum }}</span> 人咨询过</div>
                            <div v-if="item.zxTotalNum && item.zxRating" class="line"></div>
                            <div v-if="item.zxRating">响应率：<span class="rate">{{ item.zxRatingText }}</span></div>
                        </div>
                    </div>
                    <!-- 空数据 -->
                    <div class="result-empty-wrapper" v-if="!consultList.length && !pagination.loading">
                        <img src="@/assets/img/common/empty@2x.png" alt="empty">
                        <span>暂无搜索内容</span>
                    </div>
                    <p v-if="pagination.loading" class="consult-list-tips">加载中...</p>
                    <p v-if="consultList.length && pagination.noMore" class="consult-list-tips">没有更多了</p>
                </ul>
            </div>
            <!-- 弹出的分类选择 -->
            <el-drawer
                ref="categoryDrawer"
                class="category-drawer"
                :visible.sync="showCategoryDrawer"
                direction="ttb"
                :withHeader="false">
                <div class="drawer-category-one">
                    <div
                        class="drawer-category-one-item"
                        :class="currentDrawerCategoryIndex === 0 ? 'active' : ''"
                        @click="handleClickDrawerCategoryOne(0)">
                        全部
                    </div>
                    <div
                        class="drawer-category-one-item"
                        :class="currentDrawerCategoryIndex === index + 1 ? 'active' : ''"
                        v-for="(category, index) in consultCate"
                        :key="`drawer-category-one-${category.value}`"
                        @click="handleClickDrawerCategoryOne(index + 1)">
                        {{ category.label }}
                    </div>
                </div>
                <div class="drawer-category-two">
                    <!-- 全部二级分类 -->
                    <div
                        class="drawer-category-two-wrapper"
                        v-show="currentDrawerCategoryIndex === 0">
                        <div
                            class="drawer-category-two-item"
                            :class="currentDrawerCategoryId == category.value ? 'active' : ''"
                            v-for="category in consultCateAll"
                            :key="`drawer-category-all-${category.value}`"
                            @click="handleClickDrawerCategoryTwo(category.value)">
                            {{ category.label }}
                        </div>
                    </div>
                    <!-- 接口返回的二级分类 -->
                    <div
                        class="drawer-category-two-wrapper"
                        v-for="(category, index) in consultCate"
                        :key="`drawer-category-two-wrapper-${category.value}`"
                        v-show="currentDrawerCategoryIndex === index + 1">
                        <div
                            class="drawer-category-two-item"
                            :class="currentDrawerCategoryId == categoryChild.value ? 'active' : ''"
                            v-for="categoryChild in category.children"
                            :key="`drawer-category-two-${categoryChild.value}`"
                            @click="handleClickDrawerCategoryTwo(categoryChild.value)">
                            {{ categoryChild.label }}
                        </div>
                    </div>
                </div>
            </el-drawer>
        </div>
    </div>
</template>

<script>
import {mapState} from "vuex"
import DealSeoList from "@/components/consult/dealSeoList"
import qs from "qs"

export default {
    name: 'SeoConsultList',
    data () {
        return {
            baseUrl: '',
            // firstLoad: true,
            isWeixinApp: true,
            categoryExpanded: true, // 更多按钮不要，默认为展开状态
            showCategoryDrawer: false,
            currentDrawerCategoryId: 0,
            currentDrawerCategoryIndex: 0,
            // defaultImg: require('@/assets/img/common/empty@2x.png')
        }
    },
    head() {
        const {
            title = "",
            keyword = "",
            description = "",
            h1 = "",
            canonical = "",
            metaLocation
        } = this.head || {}
        let obj = {
            title: title,
            meta: [{
                name: "keywords",
                content: keyword
            }, {
                name: "description",
                content: description
            }, {
                name: "h1",
                content: h1
            }],
            link: [{rel: "canonical", href: canonical}]
        }
        if (metaLocation) {
            obj.meta.push({name: "location", content: metaLocation})
        }
        return obj
    },
    computed: {
        ...mapState(["deviceType"]),
        showWxHeader () {
            return !this.deviceType.app && !this.isWeixinApp &&
                (this.deviceType.android || this.deviceType.ios)
        },
        mainMarginTop () {
            if (this.mobile && this.showWxHeader) {
                return '64px !important'
            } else if (this.mobile) {
                return '0px !important'
            } else {
                return '20px !important'
            }
        }
    },
    async asyncData ({...params}) {
        let dealDataObj = new DealSeoList(params)
        let ans = await dealDataObj.dealData()

        return {
            ...ans
        }
    },
    mounted () {
        this.baseUrl = this.$store.state.domainConfig.siteUrl
        this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1
    },
    methods: {
        /** 分页获取技能列表数据 */
        _getConsultList () {
            const self = this
            const data = {
                page: this.pagination.page,
                sale_zx_open: 1,
                cate_id_two_zx: this.pagination.selectedCateIdTwo || '',
                root_type: this.root_type
            }

            this.pagination.loading = true
            this.pagination.noMore = false

            this.$axios.$post('/api/user_list/list', data).then(res => {
                if (Number(res.status) === 1) {
                    let consultList = res.data.list || []
                    consultList = consultList.map(item => {
                        let zxRating = item.zx_rating || ''
                        let zxRatingText = ''
                        if (zxRating >= 0.8) {
                            zxRatingText = '高'
                        } else if (zxRating >= 0.6) {
                            zxRatingText = '较高'
                        } else if (zxRating >= 0.4) {
                            zxRatingText = '中'
                        } else if (zxRating >= 0.2) {
                            zxRatingText = '较低'
                        }  else {
                            zxRatingText = '低'
                        }
                        return {
                            uid: item.uid || '',
                            nickname: item.nickname || '',
                            avatar: item.icon_url || '',
                            lineStatus: item.lineStatus || '',
                            company: item.company || '',
                            title: item.title || '',
                            saleList: item.sale_list || [],
                            zxTotalNum: item.zx_total_num || 0,
                            zxRating: item.zx_rating || '',
                            zxRatingText: zxRatingText,
                            zxPriceMin: item.zx_price_min || '0.00'
                        }
                    })

                    if (self.mobile) {
                        self.consultList = self.consultList.concat(consultList)
                    } else {
                        self.consultList = consultList
                    }

                    this.pagination.total = res.data.total
                    this.pagination.pageCount = res.data.pages
                    // 当前页码 大于等于 页面总数：已加载所有数据
                    if (this.pagination.page >= this.pagination.pageCount) {
                        this.pagination.noMore = true
                    } else {
                        this.pagination.noMore = false
                    }
                } else {
                    // 查询错误时
                    this.pagination.noMore = true
                }
            }).then(() => {
                self.pagination.loading = false
            })
        },
        /** 点击展开、收起 */
        handleClickExpandCategory () {
            this.categoryExpanded = !this.categoryExpanded
        },
        /** 点击一级分类时 */
        handleClickCategoryOne (id) {
            if (id === 0) {
                // 点击全部时，移除筛选分类
                this.pagination.selectedCateIdOne = id
                this.pagination.selectedCateIdTwo = ''
                this.currentDrawerCategoryId = ''
                this.pagination.page = 1
                this.consultList = []
                window.scroll(0, 0)

                this._getConsultList()
                return
            }
            if (this.pagination.selectedCateIdOne !== id) {
                this.pagination.selectedCateIdOne = id
            }
        },
        /** 分页页码改变时 */
        handlePageChange (val) {
            let query = {
                page: val
            }
            if (this.root_type && Number(this.root_type) > 0) {
                query.root_type = this.root_type
            }
            window.location.href = `${window.location.origin}${window.location.pathname}?${qs.stringify(query)}`
        },
        /** mobile 加载更多 */
        handleLoadMoreConsult () {
            if (this.pagination.loading) {
                return
            }

            this.pagination.page++
            this._getConsultList()
        },
        /** 点击筛选时 */
        handleClickFilter () {
            this.showCategoryDrawer = true
        },
        /**
         * 点击 mobile 分类 drawer 一级分类
         */
        handleClickDrawerCategoryOne (id) {
            console.log(id)
            if (id === 0) {
                this.showCategoryDrawer = false
                return
            }
            if (id !== this.currentDrawerCategoryIndex) {
                this.currentDrawerCategoryIndex = id
            }
        },
        /** 点击二级分类时：移动端 */
        handleClickCategoryTwo (id) {
            if (this.pagination.selectedCateIdTwo === id) {
                this.pagination.selectedCateIdTwo = ''
                this.currentDrawerCategoryId = ''
            } else {
                this.pagination.selectedCateIdTwo = id
                this.currentDrawerCategoryId = id
            }
            this.pagination.page = 1
            this.consultList = []
            window.scroll(0, 0)

            this._getConsultList()
        },
        /**
         * 点击 mobile 分类 drawer 二级分类
         */
        handleClickDrawerCategoryTwo (id) {
            if (this.currentDrawerCategoryId === id) {
                this.pagination.selectedCateIdTwo = ''
            } else {
                this.pagination.selectedCateIdTwo = id
            }
            this.currentDrawerCategoryId = id
            this.showCategoryDrawer = false
            this.pagination.page = 1
            this.consultList = []
            window.scroll(0, 0)

            this._getConsultList()
        },
        /** 点击筛选时 */
        handleShowCategoryDrawer () {
            this.showCategoryDrawer = true
        },
        /**
         * 点击 mobile 的一项咨询服务时
         */
        handleClickConsultItem (uid) {
            if (this.deviceType.android || this.deviceType.ios) {
                // 端跳转
                let jumpUrl = `${this.baseUrl}/wo/${uid}?from=consult`
                location.href = `proginn://webview?url=${jumpUrl}`
            } else {
                // web 跳转
                location.href = `/wo/${uid}?from=consult`
            }
        },
        /**
         * 点击专家入驻
         */
        handleClickAdd () {
            location.href = '/workbench/consult/index'
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/consult/list.scss";
</style>
<style lang="scss">
.category-drawer {
    .el-drawer {
        height: 100vh !important;
        .el-drawer__body {
            position: relative;
            width: 100%;
            display: flex;
        }
    }
    .drawer-category-one {
        width: 100px;
        height: 100vh;
        padding-bottom: 34px;
        background: #f4f5f9;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        &::-webkit-scrollbar {
            display: none;
        }
        .drawer-category-one-item {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 15px;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            color: #222222;
            background: inherit;
            &.active {
                color: #308eff;
                background: #ffffff;
            }
        }
    }
    .drawer-category-two {
        width: calc(100% - 100px);
        height: 100vh;
        padding: 4px 10px 34px;
        background: #ffffff;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        &::-webkit-scrollbar {
            display: none;
        }
        .drawer-category-two-wrapper {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            .drawer-category-two-item {
                margin: 8px 8px 0 0;
                padding: 0 12px;
                height: 35px;
                line-height: 35px;
                background: rgba(244,245,249,.8);
                border-radius: 4px;
                // opacity: 0.8;
                font-size: 13px;
                font-family: PingFangSC, PingFangSC-Regular;
                font-weight: 400;
                color: #222222;
                &.active {
                    height: 33px;
                    line-height: 33px;
                    border: 1px solid #308eff;
                    background: #ffffff;
                    font-size: 12px;
                    font-family: PingFangSC, PingFangSC-Medium;
                    font-weight: 500;
                    color: #308eff;
                }
            }
        }
    }
}
.wx-header-custom-list {
    position: fixed !important;
    z-index: 11 !important;
}
</style>