Browse Source

创建、编辑咨询的开放时间重构;

huan-jie 4 years ago
parent
commit
57688f73f9
3 changed files with 392 additions and 149 deletions
  1. 74 5
      assets/css/consult/create.scss
  2. BIN
      assets/img/consult/close-icon@2x.png
  3. 318 144
      pages/frontend/consult/create.vue

+ 74 - 5
assets/css/consult/create.scss

@@ -115,19 +115,88 @@
                 font-family: PingFangSC, PingFangSC-Medium;
                 font-weight: 500;
                 color: #19222e;
+                margin-right: 10px;
                 .required {
                     color: #ff0000;
                 }
             }
         }
         .time-field {
-            margin-top: 20px;
-            .time-item {
-                margin-top: 5px;
+            margin-top: 32px;
+            display: flex;
+            .time-field-name {
+                flex-shrink: 0;
+                font-size: 14px;
+                line-height: 40px;
+                font-family: PingFangSC, PingFangSC-Medium;
+                font-weight: 500;
+                color: #19222e;
+                margin-right: 10px;
+                .required {
+                    color: #ff0000;
+                }
             }
-            .time-picker {
-                margin-top: 5px;
+            .time-field-content {
+                .time-field-cards {
+                    display: flex;
+                    .time-card {
+                        width: 100px;
+                        height: 56px;
+                        margin: 0 8px 12px 0;
+                        padding: 10px;
+                        background: #f4f5f9;
+                        border-radius: 5px;
+                        .time-card-title {
+                            width: 100%;
+                            height: 21px;
+                            line-height: 21px;
+                            font-size: 15px;
+                            font-family: PingFangSC, PingFangSC-Semibold;
+                            font-weight: 600;
+                            color: #222222;
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            .close-icon {
+                                width: 15px;
+                                height: 15px;
+                                opacity: 0.7;
+                                cursor: pointer;
+                            }
+                        }
+                        .time-card-time {
+                            height: 17px;
+                            line-height: 17px;
+                            font-size: 12px;
+                            font-family: PingFangSC, PingFangSC-Regular;
+                            font-weight: 400;
+                            color: #222222;
+                            margin-top: 2px;
+                        }
+                    }
+                }
+                .time-item {
+                    .time-save-btn {
+                        margin-left: 12px;
+                    }
+                    .is-error {
+                        input {
+                            border-color: #f56c6c;
+                        }
+                    }
+                }
+                .time-error {
+                    margin-top: 8px;
+                    font-size: 12px;
+                    color: #ff0000;
+                }
             }
+            // .time-item {
+            //     margin-top: 5px;
+            // }
+            // .time-picker {
+            //     margin-top: 5px;
+            // }
         }
         .image-field {
             position: relative;

BIN
assets/img/consult/close-icon@2x.png


+ 318 - 144
pages/frontend/consult/create.vue

@@ -60,51 +60,69 @@
             </div>
             <!-- 开放时间 -->
             <div class="time-field">
-                <div class="field-name"><span class="required">*</span> 开放时间</div>
-                <div
-                    class="time-item"
-                    v-for="(item, index) in time"
-                    :key="index"
-                    v-show="week == index">
-                    <el-time-select
-                        placeholder="起始时间"
-                        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="结束时间"
-                        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>
+                <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>
-                <!-- <el-time-picker
-                    class="time-picker"
-                    is-range
-                    :editable="false"
-                    value-format="HH:mm"
-                    v-model="time"
-                    range-separator="至"
-                    start-placeholder="开始时间"
-                    end-placeholder="结束时间"
-                    placeholder="选择时间范围"
-                    :picker-options="{
-                        selectableRange: '18:30:00 - 20:30:00',
-                        format: 'HH:mm'
-                    }">
-                </el-time-picker> -->
             </div>
             <!-- 图片 -->
             <div class="image-field">
@@ -160,14 +178,24 @@ export default {
             price: '', // 价格
             week: '0', // 当前接受咨询的星期几
             time: [ // 接受咨询的时间范围
-                { stime: '', etime: '' },
-                { stime: '', etime: '' },
-                { stime: '', etime: '' },
-                { stime: '', etime: '' },
-                { stime: '', etime: '' },
-                { stime: '', etime: '' },
-                { stime: '', etime: '' }
+                { 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
@@ -243,7 +271,7 @@ export default {
         _getConsultDetail () {
             const self = this
 
-            this.$axios.$post('/api/sale/saleInfo', { sale_id: this.sale_id }).then(res => {
+            this.$axios.$post('https://dev.test.proginn.com/api/sale/saleInfo', { sale_id: this.sale_id }).then(res => {
                 if (res.status === 1) {
                     console.log('获取技能详情成功', res.data)
                     self.title = res.data.title || ""
@@ -256,31 +284,63 @@ export default {
                         self._setConsultImages(res.data)
                     }
                     let time = [
-                        { stime: '', etime: '' },
-                        { stime: '', etime: '' },
-                        { stime: '', etime: '' },
-                        { stime: '', etime: '' },
-                        { stime: '', etime: '' },
-                        { stime: '', etime: '' },
-                        { stime: '', etime: '' }
+                        { 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]
-                        if (key == 'monday') {
-                            time[0] = { stime: times.stime, etime: times.etime }
-                        } else if (key == 'tuesday') {
-                            time[1] = { stime: times.stime, etime: times.etime }
-                        } else if (key == 'wednesday') {
-                            time[2] = { stime: times.stime, etime: times.etime }
-                        } else if (key == 'thursday') {
-                            time[3] = { stime: times.stime, etime: times.etime }
-                        } else if (key == 'friday') {
-                            time[4] = { stime: times.stime, etime: times.etime }
-                        } else if (key == 'saturday') {
-                            time[5] = { stime: times.stime, etime: times.etime }
-                        } else if (key == 'sunday') {
-                            time[6] = { stime: times.stime, etime: times.etime }
+                        // 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
@@ -323,27 +383,42 @@ export default {
                 saturday: [{ stime: '00:00', etime: '00:00' }],
                 sunday: [{ stime: '00:00', etime: '00:00' }]
             }
-            this.time.forEach((item, index) => {
-                if (item.stime && item.etime) {
-                    // if (item.stime != '00:00' && item.etime != '00:00') {
-                    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 }]
-                    }
-                    // }
+            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,
@@ -423,61 +498,66 @@ export default {
                 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
+            // 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 (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 (validateTimeResult != '') {
+            //     this.$message.error(validateTimeResult)
+            //     return false
+            // }
+            // if (emptyCount == 7) {
+            //     this.$message.error('请至少选择一天开放时间')
+            //     return false
+            // }
 
             if (!this.imageList.length) {
                 this.$message.error('请上传话题介绍图')
@@ -506,6 +586,100 @@ export default {
                 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>