增加基本的活动编辑页面

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,

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) =>

src/views/activity/edit.vue

@@ -36,17 +36,161 @@
         />
       </el-form-item>
       <el-form-item
-          style="margin-bottom: 40px;"
+          label="激活:"
-          label="活动简介:"
+          prop="active"
-          prop="desc"
       >
-        <el-input
+        <el-switch
-            v-model="postForm.desc"
+            v-model="postForm.active"
-            placeholder="输入活动简介"
+            name="active"
-            name="desc"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
             required
         />
       </el-form-item>
+      <el-form-item
+          prop="desc"
+          label="活动简介:"
+          style="margin-bottom: 30px;"
+      >
+        <tinymce
+            ref="editor"
+            v-model="postForm.desc"
+            :height="600"
+        />
+      </el-form-item>
+      <el-form-item label="重复类型" prop="repeatType">
+        <el-select
+            v-model="postForm.repeatType"
+            placeholder="选择"
+            name="repeatType"
+            required
+            class="w100"
+        >
+          <el-option
+              v-for="item in repeatTypes"
+              :key="item.id"
+              :label="item.label"
+              :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+          label="活动时间"
+          v-if="postForm.repeatType !== 9"
+          prop="beginTime">
+        <el-select
+            v-model="selectTime"
+            placeholder="选择或输入时间, 格式 09:15"
+            name="beginTime"
+            required
+            multiple
+            clearable
+            filterable
+            allow-create
+            style="width: 60%"
+            default-first-option
+            @change="timeChange"
+        >
+          <el-option
+              v-for="item in times"
+              :key="item"
+              :label="item"
+              :value="item"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+          label="周几"
+          v-if="postForm.repeatType === 2"
+          prop="weekDays">
+        <el-select
+            v-model="postForm.weekDays"
+            placeholder="选择周几"
+            name="weekDays"
+            required
+            multiple
+            clearable
+            style="width: 60%"
+            default-first-option
+        >
+          <el-option
+              v-for="item in weekDays"
+              :key="item.id"
+              :label="item.label"
+              :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+          label="选择天"
+          v-if="postForm.repeatType === 3"
+          prop="monthDays">
+        <el-select
+            v-model="postForm.monthDays"
+            placeholder="选择每月中需要运行的日子"
+            name="monthDays"
+            required
+            multiple
+            clearable
+            style="width: 60%"
+            @change="monthDaysChange"
+            default-first-option
+        >
+          <el-option
+              v-for="item in monthDays"
+              :key="item.id"
+              :label="item.label"
+              :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+          label="指定日期"
+          prop="selectDate"
+          v-if="postForm.repeatType === 0"
+      >
+        <el-date-picker
+            v-model="selectDate"
+            type="dates"
+            align="right"
+            @change="dataChange"
+            style="width: 60%"
+            placeholder="选择一个或多个日期"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item
+          label="开始/结束日期"
+          prop="dataRange"
+          v-if="postForm.repeatType !== 0 && postForm.repeatType !== 9"
+      >
+        <el-date-picker
+            v-model="dataRange"
+            type="daterange"
+            align="right"
+            style="width: 40%"
+            unlink-panels
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item
+          label="准备时间(分):"
+          prop="prepareTime"
+          v-if="postForm.repeatType !== 9"
+      >
+        <el-input
+            v-model="postForm.prepareTime"
+            placeholder="提前多少时间可进游戏房间(分钟)"
+            name="prepareTime"
+            required
+        />
+      </el-form-item>
+
       <el-form-item>
         <el-button
             type="primary"
@@ -65,15 +209,16 @@
 <script lang="ts">
 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 Tinymce from '@/components/Tinymce/index.vue'
-import { addressToLoc, IAreaData, queryArea } from '@/api/map'
+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 = <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)
+      }
+    }
+  }
 
 }
 </script>