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

<template>
    <div class="create-consult-wrapper">
        <div class="create-consult-title">创建话题</div>
        <div class="form-wrapper">
            <!-- 标题 -->
            <div class="title-field">
                <div class="field-name"><span class="required">*</span> 话题标题</div>
                <el-input
                    class="title-input"
                    v-model="title"
                    placeholder="请输入话题"></el-input>
            </div>
            <!-- 描述 -->
            <div class="content-field">
                <div class="content-field-name">
                    <div><span class="required">*</span> 话题描述</div>
                    <a class="example" :href="`/c/${exampleUid}?from=example`" target="_blank">查看示例</a>
                </div>
                <el-input
                    class="content-input"
                    type="textarea"
                    :rows="8"
                    :autosize="{ minRows: 8 }"
                    placeholder="请输入话题描述"
                    v-model="content"></el-input>
            </div>
            <!-- 价格、分类 -->
            <div class="price-field">
                <div class="price-wrapper">
                    <div class="field-name"><span class="required">*</span> 话题价格</div>
                    <el-input
                        class="price-input"
                        type="number"
                        placeholder="请输入价格"
                        v-model="price"></el-input>
                    <span class="append">元</span>
                </div>
                <div class="cate-wrapper">
                    <div class="field-name"><span class="required">*</span> 话题类别</div>
                    <el-cascader
                        class="cate-cascader"
                        v-model="selectedConsultCate"
                        :options="consultCate"
                        :props="{ expandTrigger: 'hover' }"
                        placeholder="请选择类别"></el-cascader>
                </div>
            </div>
            <!-- 咨询时间 -->
            <div class="week-field">
                <div class="week-field-name"><span class="required">*</span> 咨询时间：</div>
                <el-radio-group class="week-checkbox" v-model="week">
                    <el-radio-button label="0">周一</el-radio-button>
                    <el-radio-button label="1">周二</el-radio-button>
                    <el-radio-button label="2">周三</el-radio-button>
                    <el-radio-button label="3">周四</el-radio-button>
                    <el-radio-button label="4">周五</el-radio-button>
                    <el-radio-button label="5">周六</el-radio-button>
                    <el-radio-button label="6">周日</el-radio-button>
                </el-radio-group>
            </div>
            <!-- 开放时间 -->
            <div class="time-field">
                <div class="time-field-name"><span class="required">*</span> 开放时间：</div>
                <div class="time-field-content">
                    <div class="time-field-cards">
                        <div
                            class="time-card"
                            v-for="(item, index) in savedTime"
                            :key="`time-card-${index}`">
                            <div class="time-card-title">
                                <div>{{ item.week }}</div>
                                <img
                                    src="@/assets/img/consult/close-icon@2x.png"
                                    @click="handleDeleteSavedTime(index)"
                                    class="close-icon"
                                    alt="">
                            </div>
                            <div class="time-card-time">{{ item.showTime }}</div>
                        </div>
                    </div>
                    <div
                        class="time-item"
                        v-for="(item, index) in time"
                        :key="index"
                        v-show="week == index">
                        <el-time-select
                            placeholder="起始时间"
                            style="width: 200px;"
                            :class="{ 'is-error': item.sError }"
                            value-format="HH:mm"
                            :editable="false"
                            v-model="item.stime"
                            :picker-options="{
                                start: '00:00',
                                end: '22:00',
                                step: '00:30'
                            }">
                        </el-time-select>
                        <el-time-select
                            placeholder="结束时间"
                            style="width: 200px;"
                            :class="{ 'is-error': item.eError }"
                            value-format="HH:mm"
                            :editable="false"
                            v-model="item.etime"
                            :picker-options="{
                                start: '00:00',
                                end: '24:00',
                                step: '00:30',
                                minTime: minEtime[index]
                            }">
                        </el-time-select>
                        <el-button
                            class="time-save-btn"
                            type="text"
                            @click="handleSaveTime(index)">保存</el-button>
                    </div>
                    <div
                        class="time-error"
                        v-for="(item, index) in time"
                        :key="`error-${index}`"
                        v-show="week == index && item.error.length">
                        {{ item.error }}
                    </div>
                </div>
            </div>
            <!-- 图片 -->
            <div class="image-field">
                <div class="field-name"><span class="required">*</span> 话题介绍图</div>
                <multi-uploader
                    class="consult-image-uploader"
                    :showTips="false"
                    :limit="1"
                    v-model="imageList"></multi-uploader>
                <div class="upload-tips">请上传话题介绍图，至多一张
                    建议比例16:9（如：1920*1080、800*450）支持J(E)PG、PNG格式，小于5MB
                </div>
            </div>
            <!-- 按钮 -->
            <div class="actions-wrapper">
                <el-button
                    class="create-btn"
                    :loading="publishIsLoading"
                    :disabled="pcreateIsLoading"
                    @click="handleCreate">提交审核</el-button>
                <el-button
                    class="pcreate-btn"
                    :loading="pcreateIsLoading"
                    :disabled="publishIsLoading"
                    @click="handlePcreate">存草稿</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import editor from "@/components/editor";
import multiUploader from '@/components/multi-uploader';

export default {
    head: {
        title: '新建咨询服务'
    },
    components: {
        editor,
        multiUploader
    },
    data () {
        return {
            sale_id: '', // 编辑时的 id
            title: '', // 标题
            selectedConsultCate: [], // 选中的技能分类
            consultCate: [], // 技能分类数据源
            content: '', // 话题描述
            contentText: '', // 话题描述文字
            defaultContent: '', // 默认的话题描述
            price: '', // 价格
            week: '0', // 当前接受咨询的星期几
            time: [ // 接受咨询的时间范围
                { stime: '', etime: '', sError: false, eError: false, error: '' },
                { stime: '', etime: '', sError: false, eError: false, error: '' },
                { stime: '', etime: '', sError: false, eError: false, error: '' },
                { stime: '', etime: '', sError: false, eError: false, error: '' },
                { stime: '', etime: '', sError: false, eError: false, error: '' },
                { stime: '', etime: '', sError: false, eError: false, error: '' },
                { stime: '', etime: '', sError: false, eError: false, error: '' }
            ],
            savedTime: [],
            // savedTime: {
            //     monday: [{ stime: '00:00', etime: '00:00', week: '', showTime: '', isShow: false }],
            //     tuesday: [{ stime: '00:00', etime: '00:00', week: '', showTime: '', isShow: false }],
            //     wednesday: [{ stime: '00:00', etime: '00:00', week: '', showTime: '', isShow: false }],
            //     thursday: [{ stime: '00:00', etime: '00:00', week: '', showTime: '', isShow: false }],
            //     friday: [{ stime: '00:00', etime: '00:00', week: '', showTime: '', isShow: false }],
            //     saturday: [{ stime: '00:00', etime: '00:00', week: '', showTime: '', isShow: false }],
            //     sunday: [{ stime: '00:00', etime: '00:00', week: '', showTime: '', isShow: false }]
            // },
            imageList: [], // 用户上传的图片
            publishIsLoading: false,
            pcreateIsLoading: false
        }
    },
    computed: {
        // 接受咨询的时间范围
        minEtime () {
            let minEtime = []

            this.time.forEach(item => {
                if (item.stime) {
                    let res = item.stime.split(':')
                    if (res.length && res.length === 2) {
                        let eHour = Number(res[0])
                        let eMin = Number(res[1])

                        if (eMin == 0) {
                            eHour += 0
                            eMin = 29
                        } else {
                            eHour += 0
                            eMin = 59
                        }
                        if (eHour < 10) {
                            eHour = "0" + eHour
                        }
                        minEtime.push(`${eHour}:${eMin}`)
                    } else {
                        minEtime.push('00:00')
                    }
                } else {
                    minEtime.push('00:00')
                }
            })

            return minEtime
        },
        // 查看示例 uid
        exampleUid () {
            let uid = ''

            if (process.env.NODE_ENV == "development") {
                uid = '680581'
            } else {
                uid = '583073'
            }

            return uid
        }
    },
    mounted () {
        this.needLogin()
        this._getConsultCate()
        this.sale_id = this.$route.query.sale_id || ''
        if (this.sale_id) {
            this._getConsultDetail()
        }
    },
    methods: {
        /** 获取咨询分类 */
        _getConsultCate () {
            this.$axios.$post('/api/sale/cateListYes', { type: 3, point: 1 }).then(res => {
                if (res.status === 1) {
                    let consultCate = res.data || []
                    this.consultCate = consultCate.map(item => {
                        let children = item.child_list.map(child => {
                            return {
                                value: child.category_id,
                                label: child.name
                            }
                        })
                        return {
                            value: item.category_id,
                            label: item.name,
                            children: children
                        }
                    })
                }
            }).catch(err => {
                console.log('get consult cate error: ', err)
            })
        },
        /** 获取咨询服务详情 */
        _getConsultDetail () {
            const self = this

            this.$axios.$post('/api/sale/saleInfo', { sale_id: this.sale_id }).then(res => {
                if (res.status === 1) {
                    console.log('获取技能详情成功', res.data)
                    self.title = res.data.title || ""
                    self.price = res.data.price || ""
                    self.content = res.data.content || self.defaultContent
                    if (res.data.cate_id_one && res.data.cate_id_two) {
                        self.selectedConsultCate = [res.data.cate_id_one, res.data.cate_id_two]
                    }
                    if (res.data.image) {
                        self._setConsultImages(res.data)
                    }
                    let time = [
                        { stime: '', etime: '', sError: false, eError: false, error: '' },
                        { stime: '', etime: '', sError: false, eError: false, error: '' },
                        { stime: '', etime: '', sError: false, eError: false, error: '' },
                        { stime: '', etime: '', sError: false, eError: false, error: '' },
                        { stime: '', etime: '', sError: false, eError: false, error: '' },
                        { stime: '', etime: '', sError: false, eError: false, error: '' },
                        { stime: '', etime: '', sError: false, eError: false, error: '' }
                    ]
                    let timeJson = JSON.parse(res.data.time_json || '')
                    for (let key in timeJson) {
                        let times = timeJson[key][0]
                        // console.log(key, times)
                        if (!(times.stime == '00:00' && times.etime == '00:00')) {
                            // console.log(key, times)
                            let timeItem = {
                                stime: times.stime,
                                etime: times.etime,
                                sError: false,
                                eError: false,
                                error: ''
                            }
                            let savedTimeItem = {
                                key: key,
                                stime: times.stime,
                                etime: times.etime,
                                week: '',
                                showTime: `${times.stime}~${times.etime}`
                            }
                            if (key == 'monday') {
                                time[0] = timeItem
                                savedTimeItem.week = '周一'
                                this.savedTime.push(savedTimeItem)
                            } else if (key == 'tuesday') {
                                time[1] = timeItem
                                savedTimeItem.week = '周二'
                                this.savedTime.push(savedTimeItem)
                            } else if (key == 'wednesday') {
                                time[2] = timeItem
                                savedTimeItem.week = '周三'
                                this.savedTime.push(savedTimeItem)
                            } else if (key == 'thursday') {
                                time[3] = timeItem
                                savedTimeItem.week = '周四'
                                this.savedTime.push(savedTimeItem)
                            } else if (key == 'friday') {
                                time[4] = timeItem
                                savedTimeItem.week = '周五'
                                this.savedTime.push(savedTimeItem)
                            } else if (key == 'saturday') {
                                time[5] = timeItem
                                savedTimeItem.week = '周六'
                                this.savedTime.push(savedTimeItem)
                            } else if (key == 'sunday') {
                                time[6] = timeItem
                                savedTimeItem.week = '周日'
                                this.savedTime.push(savedTimeItem)
                            }
                        }
                    }
                    this.time = time
                }
            })
        },
        /** 编辑时初始化图片列表 */
        _setConsultImages (data) {
            let images = data.image.split(',')
            if (images && images.length > 0) {
                images.forEach((image, index) => {
                    let imageName = this._getImageName(image);
                    console.log("imageName", imageName);
                    this.imageList.push({ name: imageName + index, url: image });
                })
            }
        },
        /** 通过 image url 获取名字 */
        _getImageName (url)  {
            if (url) {
                try {
                    const lastquotaIndex = url.lastIndexOf("/");
                    const lastDotIndex = url.lastIndexOf('.');
                    return url.substring(lastquotaIndex + 1, lastDotIndex);
                } catch (e) {
                    console.log(e);
                }
            }
            return ""
        },
        /** 创建、编辑咨询服务 */
        _publishConsultData (actType) {
            const self = this
            let timeJson = {
                monday: [{ stime: '00:00', etime: '00:00' }],
                tuesday: [{ stime: '00:00', etime: '00:00' }],
                wednesday: [{ stime: '00:00', etime: '00:00' }],
                thursday: [{ stime: '00:00', etime: '00:00' }],
                friday: [{ stime: '00:00', etime: '00:00' }],
                saturday: [{ stime: '00:00', etime: '00:00' }],
                sunday: [{ stime: '00:00', etime: '00:00' }]
            }
            this.savedTime.forEach((item) => {
                if (item.key === 'monday') {
                    timeJson.monday = [{ stime: item.stime, etime: item.etime }]
                } else if (item.key === 'tuesday') {
                    timeJson.tuesday = [{ stime: item.stime, etime: item.etime }]
                } else if (item.key === 'wednesday') {
                    timeJson.wednesday = [{ stime: item.stime, etime: item.etime }]
                } else if (item.key === 'thursday') {
                    timeJson.thursday = [{ stime: item.stime, etime: item.etime }]
                } else if (item.key === 'friday') {
                    timeJson.friday = [{ stime: item.stime, etime: item.etime }]
                } else if (item.key === 'saturday') {
                    timeJson.saturday = [{ stime: item.stime, etime: item.etime }]
                } else if (item.key === 'sunday') {
                    timeJson.sunday = [{ stime: item.stime, etime: item.etime }]
                }
            })
            // this.time.forEach((item, index) => {
            //     if (item.stime && item.etime) {
            //         if (index == 0) {
            //             timeJson.monday = [{ stime: item.stime, etime: item.etime }]
            //         } else if (index == 1) {
            //             timeJson.tuesday = [{ stime: item.stime, etime: item.etime }]
            //         } else if (index == 2) {
            //             timeJson.wednesday = [{ stime: item.stime, etime: item.etime }]
            //         } else if (index == 3) {
            //             timeJson.thursday = [{ stime: item.stime, etime: item.etime }]
            //         } else if (index == 4) {
            //             timeJson.friday = [{ stime: item.stime, etime: item.etime }]
            //         } else if (index == 5) {
            //             timeJson.saturday = [{ stime: item.stime, etime: item.etime }]
            //         } else if (index == 6) {
            //             timeJson.sunday = [{ stime: item.stime, etime: item.etime }]
            //         }
            //     }
            // })

            const data = {
                title: this.title,
                price: this.price,
                content: this.content,
                img: this.imageList.map((it) => it.url).join(","),
                type: 2,
                cate_id_one: this.selectedConsultCate[0],
                cate_id_two: this.selectedConsultCate[1],
                act: actType,
                sale_id: this.sale_id || '',
                time_json: JSON.stringify(timeJson)
            }

            if (actType === 'pcreate') {
                this.pcreateIsLoading = true
            } else {
                this.publishIsLoading = true
            }

            this.$axios.$post('/api/sale/create', data).then(res => {
                if (res.status === 1) {
                    // self.$message.success(`${self.sale_id ? '编辑' : '创建'}技能成功！`)
                    if (actType === 'pcreate') {
                        self.$message.success('保存草稿成功')
                    } else {
                        self.$message.success('您已成功提交咨询服务审核，平台将在1-3个工作日内完成审核，并通过短信、邮件通知您')
                    }
                    setTimeout(() => {
                        window.location.href = '/workbench/consult/index'
                    }, 1200)
                } else {
                    console.error('保存失败')
                    // self.$message.error('保存失败')
                }
            }).then(() => {
                setTimeout(() => {
                    self.pcreateIsLoading = false
                    self.publishIsLoading = false
                }, 800)
            })
        },
        /** 验证提交的数据 */
        _validateConsultData () {
            if (this.title === '') {
                this.$message.error('请输入话题标题')
                return false
            }
            if (this.title.length < 5) {
                this.$message.error('话题标题不可少于5字符')
                return false
            }
            if (this.title.length > 30) {
                this.$message.error('话题标题不可超过50字符，请删减')
                return false
            }
            if (this.content.length < 50) {
                this.$message.error('话题描述不可少于50字符')
                return false
            }
            if (this.content.length > 5000) {
                this.$message.error('话题描述不可超过5000字符，请删减')
                return false
            }
            if (this.price < 1 || this.price > 100000) {
                this.$message.error('请输入1-100000元的整数价格')
                return false
            }
            if (String(this.price).indexOf('.') > -1) {
                if (parseInt(this.price) != Number(this.price)) {
                    this.$message.error('价格只能为整数')
                    return false
                }
            }
            if (this.selectedConsultCate.length !== 2 ||
                (!this.selectedConsultCate[0] || !this.selectedConsultCate[1])) {
                this.$message.error('请选择话题类别')
                return false
            }
            // 开放时间的校验逻辑放到保存时间时了
            if (this.savedTime.length === 0) {
                this.$message.error('请至少选择并保存一天开放时间')
                return false
            }
            // 校验开放时间：结束时间 - 起始时间 > 两小时 || 起始、结束时间均为空
            // let validateTimeResult = ''
            // let emptyCount = 0
            // let week = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            // for (let i = 0; i < this.time.length; i++) {
            //     if (this.time[i].stime == '00:00' && this.time[i].etime == '00:00') {
            //         // 均为 0
            //         emptyCount++
            //         continue
            //     } else if (!this.time[i].stime && !this.time[i].etime) {
            //         // 均为空
            //         emptyCount++
            //         continue
            //     } else if ((this.time[i].stime && !this.time[i].etime) ||
            //                (!this.time[i].stime && this.time[i].etime)) {
            //         validateTimeResult = `请补充完成${week[i]}的开放时间`
            //         break
            //     } else if (this.time[i].stime && this.time[i].stime.indexOf(':') > -1 &&
            //                this.time[i].etime && this.time[i].etime.indexOf(':') > -1) {
            //         let stime = this.time[i].stime.split(':')
            //         let etime = this.time[i].etime.split(':')
            //         let sHour = Number(stime[0]) || 0
            //         let sMin = Number(stime[1]) || 0
            //         let eHour = Number(etime[0]) || 0
            //         let eMin = Number(etime[1]) || 0

            //         if (sMin == eMin) {
            //             if (eHour <= sHour) {
            //                 validateTimeResult = `${week[i]}的结束时间应大于起始时间`
            //                 break
            //             }
            //         } else if (sMin > eMin) {
            //             // sMin: 30，eMin: 0；
            //             if (eHour < sHour + 1) {
            //                 validateTimeResult = `${week[i]}的结束时间应大于起始时间`
            //                 break
            //             }
            //         } else {
            //             // sMin: 0，eMin: 30；
            //             if (eHour < sHour) {
            //                 validateTimeResult = `${week[i]}的结束时间应大于起始时间`
            //                 break
            //             }
            //         }
            //     }
            // }

            // if (validateTimeResult != '') {
            //     this.$message.error(validateTimeResult)
            //     return false
            // }
            // if (emptyCount == 7) {
            //     this.$message.error('请至少选择一天开放时间')
            //     return false
            // }

            if (!this.imageList.length) {
                this.$message.error('请上传话题介绍图')
                return false
            }

            return true
        },
        /** 技能描述内容改变时 */
        handleChange (val) {
            this.content = val
        },
        /** 技能描述内容改变时，获取输入的 text */
        handleChangeText (val) {
            this.contentText = val
        },
        /** 点击提交审核时 */
        handleCreate () {
            if (this._validateConsultData()) {
                this._publishConsultData(this.sale_id ? 'update' : 'create')
            }
        },
        /** 点击存草稿时 */
        handlePcreate () {
            if (this._validateConsultData()) {
                this._publishConsultData('pcreate')
            }
        },
        /** 点击保存时间时 */
        handleSaveTime (index) {
            this.time[index].sError = false
            this.time[index].eError = false
            this.time[index].error = ''
            if (!this.time[index].stime && !this.time[index].etime) {
                // 均为空
                this.time[index].sError = true
                this.time[index].eError = true
                this.time[index].error = '请设置开放时间'
                return
            }
            if (!this.time[index].stime) {
                // 起始时间为空
                this.time[index].sError = true
                this.time[index].error = '请设置起始时间'
                return
            }
            if (!this.time[index].etime) {
                // 结束时间为空
                this.time[index].eError = true
                this.time[index].error = '请设置结束时间'
                return
            }
            let week = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            let weekEn = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']
            let stime = this.time[index].stime.split(':')
            let etime = this.time[index].etime.split(':')
            let sHour = Number(stime[0]) || 0
            let sMin = Number(stime[1]) || 0
            let eHour = Number(etime[0]) || 0
            let eMin = Number(etime[1]) || 0
            if (sMin == eMin) {
                if (eHour <= sHour) {
                    this.time[index].eError = true
                    this.time[index].error = '结束时间应大于起始时间'
                    return
                }
            } else if (sMin > eMin) {
                // sMin: 30，eMin: 0；
                if (eHour < sHour + 1) {
                    this.time[index].eError = true
                    this.time[index].error = '结束时间应大于起始时间'
                    return
                }
            } else {
                // sMin: 0，eMin: 30；
                if (eHour < sHour) {
                    this.time[index].eError = true
                    this.time[index].error = '结束时间应大于起始时间'
                    return
                }
            }
            // 校验成功，保存数据
            let savedTimeItem = {
                key: weekEn[index],
                stime: this.time[index].stime,
                etime: this.time[index].etime,
                week: week[index],
                showTime: `${this.time[index].stime}~${this.time[index].etime}`
            }
            let timeItemIndex = -1
            this.savedTime.forEach((item, itemIndex) => {
                if (item.key == savedTimeItem.key) {
                    timeItemIndex = itemIndex
                }
            })

            if (timeItemIndex > -1) {
                this.savedTime.splice(timeItemIndex, 1, savedTimeItem)
            } else {
                this.savedTime.push(savedTimeItem)
            }
            // if (index === 0) {
            //     this.savedTime.monday.splice(0, 1, savedTimeItem)
            // } else if (index === 1) {
            //     this.savedTime.tuesday.splice(0, 1, savedTimeItem)
            // } else if (index === 2) {
            //     this.savedTime.wednesday.splice(0, 1, savedTimeItem)
            // } else if (index === 3) {
            //     this.savedTime.thursday.splice(0, 1, savedTimeItem)
            // } else if (index === 4) {
            //     this.savedTime.friday.splice(0, 1, savedTimeItem)
            // } else if (index === 5) {
            //     this.savedTime.saturday.splice(0, 1, savedTimeItem)
            // } else if (index === 6) {
            //     this.savedTime.sunday.splice(0, 1, savedTimeItem)
            // }
        },
        /** 删除时间卡片 */
        handleDeleteSavedTime (index) {
            this.savedTime.splice(index, 1)
            this.time.splice(index, 1, { stime: '', etime: '', sError: false, eError: false, error: '' })
        }
    }
}
</script>

<style scope lang="scss">
@import "@/assets/css/consult/create.scss";
</style>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
input[type="number"]{
  -moz-appearance: textfield !important;
}
</style>
<style lang="scss">
// 编辑器样式
.content-editor {
    .my-editor {
        .ql-snow {
            border: 1px solid #d7dfe8 !important;
            border-radius: 3px 3px 0 0 !important;
        }
        .quill-editor {
            border-width: 1px !important;
            border-top: 0 !important;
            border-color: #d7dfe8 !important;
            border-radius: 0 0 3px 3px !important;
        }
    }
}
// 图片上传器样式
.consult-image-uploader {
    .el-upload-list__item {
        width: 300px !important;
        height: 168.75px !important;
        line-height: 168.75px !important;
    }
    .el-upload--picture-card {
        width: 300px !important;
        height: 168.75px !important;
        line-height: 168.75px !important;
        .el-upload-list__item-thumbnail {
            object-fit: scale-down !important;
        }
    }
    .el-upload-list--picture-card {
        .el-upload-list__item-thumbnail {
            object-fit: scale-down !important;
        }
    }
}
</style>