diff --git a/src/api/activity.ts b/src/api/activity.ts index c1559e6..1dc5fbb 100644 --- a/src/api/activity.ts +++ b/src/api/activity.ts @@ -9,16 +9,21 @@ export interface IActivityData { qtypes: string[] qcount: number repeatType: number - eventDays: number[] + monthDays: number[] + weekDays: number[] beginTime: number[] prepareTime: number - active: number + active: number, + beginDays?: number[], + beginDay?: number, + endDay?: number } export const defaultActivityData: IActivityData = { active: 0, beginTime: [], - eventDays: [], + monthDays: [], + weekDays: [], name: '', prepareTime: 0, qcount: 0, diff --git a/src/utils/index.ts b/src/utils/index.ts index 760855d..840c5df 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -45,6 +45,33 @@ export const parseTime = ( }) return timeStr } +/** + * 将秒数格式化成 小时:分钟:秒 + * @param {number} sec + * @param showSeconds 是否显示秒 + */ +export const sec2TimeStr= (sec: number, showSeconds: boolean = true) => { + showSeconds = typeof showSeconds !== 'undefined' ? showSeconds : true; + let t = sec % 60 + let i = (sec % 3600 - t) / 60 + let n = Math.floor(sec / 3600) + if (showSeconds) { + return (n > 9 ? '' + n : '0' + n) + ':' + (i > 9 ? i : '0' + i) + ':' + (t > 9 ? t : '0' + t) + } else { + return (n > 9 ? '' + n : '0' + n) + ':' + (i > 9 ? i : '0' + i) + } +} +/** + * 将 小时:分钟:秒 格式的字符串转换为秒数 + * @param {string} str + */ +export const timeStr2Sec = (str: string) => { + const vals = str.split(':') + const h = vals.length > 0 ? +vals[0] : 0 + const m = vals.length > 1 ? +vals[1] : 0 + const s = vals.length > 2 ? +vals[2] : 0 + return h * 3600 + m * 60 + s +} // Format and filter json data using filterKeys array export const formatJson = (filterKeys: any, jsonData: any) => diff --git a/src/views/activity/edit.vue b/src/views/activity/edit.vue index ee2a5de..b10353b 100644 --- a/src/views/activity/edit.vue +++ b/src/views/activity/edit.vue @@ -36,17 +36,161 @@ /> - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + import { Component, Vue } from 'vue-property-decorator' import { AppModule } from '@/store/modules/app' -import { TagsViewModule, ITagView } from '@/store/modules/tags-view' +import { ITagView, TagsViewModule } from '@/store/modules/tags-view' import MaterialInput from '@/components/MaterialInput/index.vue' import Sticky from '@/components/Sticky/index.vue' import UploadImage from '@/components/UploadImage/index.vue' import RegionPicker from '@/components/RegionPicker/index.vue' import { Form } from 'element-ui' -import { defaultShopData, getShop, getShops, saveShop } from '@/api/shop' -import { addressToLoc, IAreaData, queryArea } from '@/api/map' +import Tinymce from '@/components/Tinymce/index.vue' +import { getShops } from '@/api/shop' import { defaultActivityData, getActivity, saveActivity } from '@/api/activity' +import { sec2TimeStr, timeStr2Sec } from '@/utils' @Component({ name: 'ActivityEditor', @@ -81,7 +226,8 @@ import { defaultActivityData, getActivity, saveActivity } from '@/api/activity' MaterialInput, Sticky, UploadImage, - RegionPicker + RegionPicker, + Tinymce } }) export default class extends Vue { @@ -104,12 +250,34 @@ export default class extends Vue { callback() } } - + private monthDays = [] + private repeatTypes = [ + {id: 0, label: '指定日期'}, + {id: 1, label: '每日'}, + {id: 2, label: '每周'}, + {id: 3, label: '每月'}, + {id: 9, label: '随时(一般测试用)'}, + ] + private weekDays = [ + {id: 0, label: '周日'}, + {id: 1, label: '周一'}, + {id: 2, label: '周二'}, + {id: 3, label: '周三'}, + {id: 4, label: '周四'}, + {id: 5, label: '周五'}, + {id: 6, label: '周六'}, + ] + private dataRange: Date[] = [] + private selectDate: Date[] = [] + private times = [] + private selectTime: string[] = [] private postForm = Object.assign({}, defaultActivityData) private loading = false private querying = false private allDepts = [] + + private rules = { name: [{ validator: this.validateRequire }], } @@ -123,6 +291,7 @@ export default class extends Vue { created() { + this.initTimes() const id = this.$route.params?.id if (id) { this.fetchData(id) @@ -142,6 +311,22 @@ export default class extends Vue { const { data } = await getActivity(id, { /* Your params here */ }) console.log(data) this.postForm = data + this.selectTime = [] + if (data.beginTime) { + for (let str of data.beginTime) { + this.selectTime.push(sec2TimeStr(str, false)) + } + } + this.selectDate = [] + if (data.beginDays) { + for (let sub of data.beginDays) { + this.selectDate.push(new Date(sub)) + } + } + if (data.beginDay && data.endDay) { + this.dataRange.push(new Date(data.beginDay)) + this.dataRange.push(new Date(data.endDay)) + } // Just for test const title = this.lang === 'zh' ? '编辑活动' : 'Edit Activity' // Set tagsview title @@ -169,6 +354,19 @@ export default class extends Vue { const form =
this.$refs.postForm try { await form.validate() + let times = [] + for (let str of this.selectTime) { + times.push(timeStr2Sec(str)) + } + this.postForm.beginTime = times + this.postForm.beginDays.length = 0 + for (let d of this.selectDate) { + this.postForm.beginDays.push(d.getTime()) + } + if (this.dataRange.length > 1) { + this.postForm.beginDay = this.dataRange[0].getTime() + this.postForm.endDay = this.dataRange[1].getTime() + } this.loading = true const { data } = await saveActivity(this.postForm) this.postForm = data @@ -203,7 +401,43 @@ export default class extends Vue { if (!data.records) return this.allDepts = data.records } + private dataChange(val: any) { + console.log(this.selectDate) + } + private initTimes() { + for (let i = 0; i < 24; i++) { + for (let j = 0; j < 4; j ++) { + let secs = i * 3600 + j * 15 * 60 + let label = sec2TimeStr(secs, false) + this.times.push(label) + } + } + this.monthDays.push({id: 0, label: '全选'}) + for (let i = 1; i < 32; i++) { + this.monthDays.push({id: i, label: i}) + } + } + private timeChange(vals: string[]) { + if (vals.length > 0) { + let lastVal = this.selectTime[this.selectTime.length - 1] + if (!/^\d{1,2}:\d{1,2}$/.test(lastVal)) { + this.selectTime.pop() + } + lastVal = sec2TimeStr(timeStr2Sec(lastVal), false) + this.selectTime.splice(this.selectTime.length - 1,1, lastVal) + console.log(this.selectTime) + } + + } + private monthDaysChange(days: number[]) { + if (days.indexOf(0) >= 0) { + this.postForm.monthDays.length = 0 + for (let i = 1; i < 32; i++) { + this.postForm.monthDays.push(i) + } + } + } }