proginn-frontend/pages/frontend/consult/user/_id.vue

<template>
    <div :class="mobile ? 'mobileMain' : ''"
        :style="{marginTop: mainMarginTop}"
        style="margin-bottom: 30px !important;">
        <div class="consult-detail-wrapper" v-if="!mobile">
            <div class="userinfo-wrapper">
                <div class="avatar-content">
                    <img :src="consultDetail.user.icon_url" class="avatar" alt="avatar">
                    <div class="line-status">{{ consultDetail.user.lineStatus }}</div>
                </div>
                <div class="userinfo-content">
                    <div class="nickname">{{ consultDetail.user.nickname }}</div>
                    <div class="split-line"></div>
                    <div class="company-content">
                        <img src="@/assets/img/common/company-icon@2x.png" class="icon" alt="company icon">
                        <div class="text company-text">{{ consultDetail.user.company }}</div>
                        <img src="@/assets/img/common/title-icon@2x.png" class="icon" alt="title icon">
                        <div class="text title-text">{{ consultDetail.user.title }}</div>
                    </div>
                    <div class="stats-content">
                        <div v-if="consultDetail.user.zxRating" class="rating-text">响应率：<span>{{ consultDetail.user.zxRatingText }}</span></div>
                        <div v-if="consultDetail.user.zx_total_num" class="num-text">约聊人数：<span>{{ consultDetail.user.zx_total_num }}人</span></div>
                    </div>
                </div>
            </div>
            <div class="consult-list">
                <div
                    class="consult-item"
                    v-for="(item, index) in consultDetail.sale_list"
                    :key="item.sale_id">
                    <div class="consult-item-header">{{ item.title }}</div>
                    <div class="consult-item-content">
                        <!-- 展开时 -->
                        <div class="content-info-expand" v-show="item.expand">
                            <div style="width: 100%;">{{ item.content }}</div>
                            <img v-if="item.img_array.length && item.img_array[0]" :src="item.img_array[0]" alt="">
                        </div>
                        <!-- 收起时 -->
                        <div class="content-info" v-show="!item.expand">{{ item.content }}</div>
                    </div>
                    <div class="consult-item-pay">
                        <div class="expand-wrapper" @click="handleClickExpand(index)">
                            <span v-show="item.showExpand">{{ item.expand ? '收起' : '展开' }}</span>
                            <img v-show="item.showExpand" class="expand-icon" :src="item.expand ? ExpandTopIcon : ExpandDownIcon" alt="expand">
                        </div>
                        <div class="price-wrapper">
                            <div class="price-text">￥{{ item.price }}</div>
                            <el-button
                                :loading="item.loading"
                                @click="handleClickPay(item.sale_id, index)"
                                class="pay-btn">一键约聊</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="consult-detail-wrapper-mobile" v-else>

        </div>
        <!-- 约聊时间选择 modal -->
        <el-dialog
            :visible.sync="isShowSelectTimeDialog"
            width="670px"
            @close="handleSelectTimeDialogClose">
            <div class="time-dialog-title" slot="title">选择预约时间</div>
            <div class="time-dialog-content">
                <div class="date-wrapper">
                    <div class="title">日期：</div>
                    <div class="date-list-wrapper">
                        <div
                            class="date-item"
                            :class="currentDateIndex === index ? 'active' : ''"
                            v-for="(item, index) in orderTime"
                            :key="index"
                            @click="handleClickDialogDate(index)">
                            {{ item.date }}
                        </div>
                    </div>
                </div>
                <div class="time-wrapper">
                    <div class="title">时间：</div>
                    <div class="time-list-wrapper">
                        <div
                            class="time-list-item"
                            v-show="currentDateIndex === index"
                            v-for="(item, index) in orderTime"
                            :key="`time-${index}`">
                            <!-- empty info -->
                            <div class="time-empty" v-if="item.time.length === 1 && item.time[0].date === '00:00'">
                                当前日期无服务
                            </div>
                            <template v-else>
                                <div
                                    class="time-item"
                                    :class="selectedOrderTime === timeItem.value ? 'active' : ''"
                                    v-for="timeItem in item.time"
                                    :key="timeItem.value"
                                    @click="handleClickDialogTime(timeItem.value)">
                                    {{ timeItem.date }}
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
                <div class="action-wrapper">
                    <el-button
                        class="confirm-btn"
                        @click="handleClickDialogConfirm">确认</el-button>
                    <el-button
                        class="cancel-btn"
                        @click="handleClickDialogCancel">取消</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {mapState} from "vuex"
import DealSeoDetail from "@/components/consult/dealSeoDetail"
import qs from "qs"
import ExpandTopIcon from "@/assets/img/common/expand-top-icon@2x.png"
import ExpandDownIcon from "@/assets/img/common/expand-down-icon@2x.png"

export default {
    // web - 咨询服务详情页
    name: 'SeoConsultUser',
    data () {
        return {
            ExpandTopIcon,
            ExpandDownIcon,
            baseUrl: '',
            isWeixinApp: true,
            // 是否展示约聊时间 dialog
            isShowSelectTimeDialog: false,
            // 正在约聊的 saleId
            actionSaleId: '',
            // 约聊可选时间
            orderTime: [],
            // 约聊选择的时间
            selectedOrderTime: '',
            // dialog 当前选中的日期索引
            currentDateIndex: 0
        }
    },
    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
            }, {
                name: "viewport",
                content: "width=device-width, initial-scale=1.0, viewport-fit=cover"
            }],
            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 DealSeoDetail(params)
        let ans = await dealDataObj.dealData()

        return {
            ...ans
        }
    },
    mounted () {
        const self = this
        this.baseUrl = this.$store.state.domainConfig.siteUrl
        this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1

        if (this.act === 'pay') {
            setTimeout(() => {
                self.$message.success('购买成功，请等待对方接单')
            }, 800)
        }
    },
    methods: {
        /**
         * 获取约聊可选时间
         * @param {Number} saleId - 服务 id
         * @param {Number} index - 咨询列表索引
         */
        _getConsultTime (saleId, index) {
            const self = this
            const data = {
                sale_id: saleId
            }

            this.$axios.$post('/api/sale/time', data).then(res => {
                if (Number(res.status) === 1) {
                    // 可约聊时间
                    let orderTime = res.data.list || []
                    // 为约聊的时间增加下单所需 value
                    orderTime.forEach((item) => {
                        item.time.forEach(dateItem => {
                            dateItem.value = `${item.ymd} ${dateItem.date}`
                        })
                    })

                    let consultItem = self.consultDetail.sale_list[index]
                    consultItem.orderTime = orderTime
                    self.consultDetail.sale_list.splice(index, 1, consultItem)

                    if (orderTime[0].time &&
                        orderTime[0].time.length > 1 &&
                        orderTime[0].time[0].date !== '00:00') {
                        self.selectedOrderTime = orderTime[0].time[0].value
                    }
                    self.orderTime = orderTime
                    self.actionSaleId = saleId
                    self.isShowSelectTimeDialog = true
                }
                console.log(res)
            })
        },
        /**
         * 点击展开收起时
         * @param {Number} index - 咨询列表索引
         */
        handleClickExpand (index) {
            let consultItem = this.consultDetail.sale_list[index]
            consultItem.expand = !consultItem.expand

            this.consultDetail.sale_list.splice(index, 1, consultItem)
        },
        /**
         * 点击一键约聊时
         * @param {Number} saleId - 服务 id
         * @param {Number} index - 咨询列表索引
         */
        handleClickPay (saleId, index) {
            // this.$message.info(`一键约聊：${saleId}`)
            let consultItem = this.consultDetail.sale_list[index]
            if (consultItem.orderTime && consultItem.orderTime.length) {
                // 已获取过约聊时间数据，为 dialog 赋值即可
                this.orderTime = consultItem.orderTime
                this.actionSaleId = saleId
                if (consultItem.orderTime[0].time &&
                    consultItem.orderTime[0].time.length > 1 &&
                    consultItem.orderTime[0].time[0].date !== '00:00') {
                    this.selectedOrderTime = consultItem.orderTime[0].time[0].value
                }
                this.isShowSelectTimeDialog = true
            } else {
                this._getConsultTime(saleId, index)
            }
        },
        /**
         * 点击约聊 modal 的日期
         * @param {Number} index - 日期索引
         */
        handleClickDialogDate (index) {
            if (this.currentDateIndex !== index) {
                this.currentDateIndex = index
            }
        },
        /**
         * 点击约聊 modal 的时间
         * @param {String} value - 选择的值
         */
        handleClickDialogTime (value) {
            this.selectedOrderTime = value
        },
        /**
         * 点击约聊 modal 的确定
         */
        handleClickDialogConfirm () {
            // this.$message.info('稍微校验数据，然后直接跳转支付')
            if (!this.selectedOrderTime) {
                this.$message.error('请选择预约时间')
                return
            }

            const query = {
                product_type: 503,
                product_id: this.actionSaleId,
                obj: this.selectedOrderTime,
                next: location.href + '?act=pay'
            }
            if (!this.userinfo || !this.userinfo.nickname) {
                location.href = this.baseUrl + "/?loginbox=show&next=" + encodeURIComponent(location.href)
            } else {
                location.href = `/pay?${qs.stringify(query)}`
            }
            this.isShowSelectTimeDialog = false
        },
        /**
         * 点击约聊 modal 的取消
         */
        handleClickDialogCancel () {
            this.isShowSelectTimeDialog = false
        },
        /**
         * 约聊时间选择 modal 关闭时
         */
        handleSelectTimeDialogClose () {
            this.selectedOrderTime = ''
            this.currentDateIndex = 0
            this.orderTime = []
            this.actionSaleId = ''
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/consult/user/_id.scss";
</style>