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

<template>
    <div :class="mobile ? 'mobileMain' : ''">
        <div class="consult-detail-wrapper" v-if="!mobile">
            咨询服务详情 web
        </div>
        <div class="consult-detail-wrapper-mobile" v-else>
            <div class="consult-title">{{ consultDetail.title }}</div>
            <div class="consult-content">{{ consultDetail.content }}</div>
            <div class="consult-image" v-if="consultDetail.coverImage">
                <img :src="consultDetail.coverImage" alt="consult image">
            </div>
            <div class="pay-wrapper">
                <div class="price-info">
                    <div class="price-text">￥{{ consultDetail.price }}</div>
                    <span>支付金额</span>
                </div>
                <!-- <el-button
                    v-if="Number(skillDetail.is_buy) > 0"
                    class="pay-btn"
                    disabled>已购买</el-button> -->
                <el-button
                    class="pay-btn"
                    @click="handleClickPay">一键约聊</el-button>
            </div>
        </div>
        <!-- 约聊时间选择 modal -->
        <el-drawer
            :visible.sync="isShowSelectTimeDialog"
            direction="btt"
            size="380px">
            <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>
                </div>
            </div>
        </el-drawer>
        <!-- <el-dialog
            :visible.sync="isShowSelectTimeDialog"
            width="90vw"
            @close="handleSelectTimeDialogClose">
        </el-dialog> -->
    </div>
</template>

<script>
import {mapState} from "vuex"
import qs from "qs"

export default {
    name: 'SeoConsultDetail',
    data () {
        return {
            baseUrl: '',
            isWeixinApp: true,
            // 是否展示约聊时间 dialog
            isShowSelectTimeDialog: false,
            // 约聊可选时间
            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"])
    },
    async asyncData ({ $axios, params, req, app }) {
        const saleId = params.id || ''
        let consultDetail = {}

        let res = await $axios.$post('/api/sale/saleInfo', { sale_id: saleId })
        if (Number(res.status) === 1) {
            consultDetail = res.data
        }
        let imageList = consultDetail.image.split(',')
        consultDetail.coverImage = imageList[0] || ''

        const head = {
            title: '咨询服务详情'
        }

        return {
            saleId,
            consultDetail,
            mobile: app.$deviceType.isMobile(),
            head
        }
    },
    mounted () {
        this.baseUrl = this.$store.state.domainConfig.siteUrl
        this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1
    },
    methods: {
        /**
         * 获取约聊可选时间
         */
        _getConsultTime () {
            const self = this
            const data = {
                sale_id: this.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}`
                        })
                    })

                    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.isShowSelectTimeDialog = true
                }
            })
        },
        /**
         * 点击一键约聊
         */
        handleClickPay () {
            if (!this.userinfo || !this.userinfo.nickname) {
                location.href = "proginn://login?backToPage=true";
                return
            }
            if (this.orderTime && this.orderTime.length) {
                this.isShowSelectTimeDialog = true
            } else {
                this._getConsultTime()
            }
        },
        /**
         * 点击约聊 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.saleId,
                obj: this.selectedOrderTime,
                next: location.href
            }
            if (!this.userinfo || !this.userinfo.nickname) {
                location.href = "proginn://login?backToPage=true";
            } else {
                location.href = "proginn://pay?" + qs.stringify(query)
            }
            this.isShowSelectTimeDialog = false
        },
        /**
         * 点击约聊 modal 的取消
         */
        // handleClickDialogCancel () {
        //     this.isShowSelectTimeDialog = false
        // },
        /**
         * 约聊时间选择 modal 关闭时
         */
        // handleSelectTimeDialogClose () {
        // }
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/consult/detail/_id.scss";
</style>
<style lang="scss">
.wx-header-custom-detail {
    position: relative !important;
}
</style>