增加活动奖励的配置

src/api/activity.ts

@@ -1,6 +1,14 @@
 
 import request from '@/utils/request'
 
+export interface IRewardData {
+  id?: number,
+  rank?: number,
+  rankEnd?: number,
+  coupon?: string,
+  count: number
+}
+
 export interface IActivityData {
   _id?: string
   shop: string
@@ -16,7 +24,12 @@ export interface IActivityData {
   active: number,
   beginDays?: number[],
   beginDay?: number,
-  endDay?: number
+  endDay?: number,
+  rewardInfo: IRewardData[]
+}
+
+export const defaultRewardData: IRewardData = {
+  count: 0
 }
 
 export const defaultActivityData: IActivityData = {
@@ -29,7 +42,8 @@ export const defaultActivityData: IActivityData = {
   qcount: 0,
   qtypes: [],
   repeatType: 0,
-  shop: ''
+  shop: '',
+  rewardInfo: []
 
 }
 

src/views/activity/edit.vue

@@ -225,6 +225,57 @@
           </el-form-item>
         </el-tab-pane>
         <el-tab-pane label="奖励设置" name="third">
+          <el-button
+              type="primary"
+              icon="el-icon-edit"
+              @click="handleCreateReward"
+          >
+            添加
+          </el-button>
+          <el-table
+              :data="postForm.rewardInfo"
+              border
+              fit
+              highlight-current-row
+          >
+            <el-table-column
+                label="排名"
+                prop="rank"
+                :formatter="formatRank"
+            >
+            </el-table-column>
+            <el-table-column
+                label="奖励"
+                prop="coupon"
+                :formatter = "formatCoupon"
+            >
+            </el-table-column>
+            <el-table-column
+                align="center"
+                width="180"
+                label="操作"
+                fixed="right"
+            >
+              <template slot-scope="scope">
+                  <el-button
+                      type="primary"
+                      size="small"
+                      icon="el-icon-edit"
+                      @click="handleEdit(scope)"
+                  >
+                    编辑
+                  </el-button>
+                <el-button
+                    type="danger"
+                    size="small"
+                    style="margin-left: 10px"
+                    @click="deleteRank(scope)"
+                >
+                  {{ $t('permission.delete') }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
         </el-tab-pane>
       </el-tabs>
       <el-form-item>
@@ -240,7 +291,71 @@
       </el-form-item>
     </el-form>
 
+    <el-dialog
+        :visible.sync="dialogVisible"
+        title="编辑奖励"
+    >
+      <el-form
+          :model="record"
+          ref="modalForm"
+          :rules="modalRules"
+          label-width="80px"
+          label-position="left"
+      >
+        <el-form-item label="排名" prop="rank">
+          第
+          <el-input
+              v-model="record.rank"
+              placeholder="排名"
+              type="number"
+              style="width: 30%"
+          />
+          名至
+          <el-input
+              v-model="record.rankEnd"
+              placeholder="可不填"
+              type="number"
+              style="width: 30%"
+          />
+          名
+        </el-form-item>
 
+        <el-form-item label="奖励" prop="coupon">
+          <el-select
+              v-model="record.coupon"
+              placeholder="选择奖励"
+              name="coupon"
+              required
+              class="w100"
+          >
+            <el-option
+                v-for="item in coupons"
+                :key="item._id"
+                :label="item.name"
+                :value="item._id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数量" prop="count">
+          <el-input
+              v-model="record.count"
+              placeholder="数量"
+              type="number"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+              type="primary"
+              @click="saveReward"
+          >
+            保存
+          </el-button>
+          <el-button @click="closeModal">
+            取消
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
@@ -255,9 +370,17 @@ import RegionPicker from '@/components/RegionPicker/index.vue'
 import { Form } from 'element-ui'
 import Tinymce from '@/components/Tinymce/index.vue'
 import { getShops } from '@/api/shop'
-import { defaultActivityData, getActivity, saveActivity } from '@/api/activity'
+import {
+  defaultActivityData, defaultRewardData,
+  getActivity,
+  IRewardData,
+  saveActivity
+} from '@/api/activity'
 import { sec2TimeStr, timeStr2Sec } from '@/utils'
 import { getAllCategory } from '@/api/question'
+import { cloneDeep } from 'lodash'
+import { getCoupons } from '@/api/coupon'
+import { deleteAdmin } from '@/api/admins'
 
 @Component({
   name: 'ActivityEditor',
@@ -329,6 +452,16 @@ export default class extends Vue {
   private tempTagView?: ITagView
 
 
+  private dialogType = 'new'
+  private record: IRewardData = {}
+  private dialogVisible = false
+  private modalRules = {
+    rank: [{ required: true, message: '请输入排名', trigger: 'blur' },
+      ],
+  }
+  private coupons = []
+
+
   get lang() {
     return AppModule.language
   }
@@ -493,6 +626,10 @@ export default class extends Vue {
 
   @Watch('postForm.shop')
   private onShopChange() {
+    if (this.postForm.shop) {
+      this.getCouponList(this.postForm.shop)
+    }
+
     if (this.postForm.qtypes?.length > 0) {
       this.typeSelected = this.postForm.qtypes
       return
@@ -532,7 +669,93 @@ export default class extends Vue {
       })
     }
   }
+  // begin of award list
+  private async getCouponList(shop: string) {
+    const { data } = await getCoupons({shop})
+    this.coupons = data.records
+  }
+  private formatCoupon(row: number, column: number, cellValue: string, index: number) {
+    let result = `未知(${cellValue})`
+    let data = this.postForm.rewardInfo[index]
+    for (const dep of this.coupons) {
+      if (dep._id == cellValue) {
+        result = dep.name
+        break
+      }
+    }
+    return `${result} x ${data.count}`
+  }
+  private formatRank(row: number, column: number, cellValue: string, index: number) {
+    let data = this.postForm.rewardInfo[index]
+    let result = `第 ${data.rank} 名`
+    if (data.rankEnd) {
+      result = `第 ${data.rank} 至 ${data.rankEnd} 名`
+    }
+    return result
+  }
+  private async deleteRank(scope: any) {
+    const { $index, row } = scope
+    try {
+      await this.$confirm('Confirm to remove the record?', 'Warning', {
+        confirmButtonText: 'Confirm',
+        cancelButtonText: 'Cancel',
+        type: 'warning'
+      })
+      this.postForm.rewardInfo.splice($index, 1)
+      this.$message({
+        type: 'success',
+        message: '删除成功, 请点击保存'
+      })
+    } catch (err) {
 
+    }
+
+  }
+  private handleCreateReward() {
+    this.record = Object.assign({}, defaultRewardData)
+    this.record.id = this.postForm.rewardInfo.length
+    this.dialogType = 'new'
+    this.dialogVisible = true
+  }
+
+  private handleEdit(scope: any) {
+    this.dialogType = 'edit'
+    this.dialogVisible = true
+    this.checkStrictly = true
+    this.record = cloneDeep(scope.row)
+  }
+  private closeModal() {
+    this.dialogVisible = false
+    this.$refs.modalForm.clearValidate()
+  }
+  private saveReward() {
+    const isEdit = this.dialogType === 'edit'
+    this.$refs.modalForm.validate(async(valid: boolean) => {
+      if (!valid) {
+        this.$message.error('请按要求填写表单')
+        return false
+      }
+      if (isEdit) {
+        for (let index = 0; index < this.postForm.rewardInfo.length; index++) {
+          if (this.postForm.rewardInfo[index].id === this.record.id) {
+            this.postForm.rewardInfo.splice(index, 1, Object.assign({}, this.record))
+            break
+          }
+        }
+      } else {
+        this.postForm.rewardInfo.push(this.record)
+      }
+      this.dialogVisible = false
+      this.$notify({
+        title: 'Success',
+        dangerouslyUseHTMLString: true,
+        message: `
+          奖励成功保存, 请点击保存
+        `,
+        type: 'success'
+      })
+    })
+  }
 }
 </script>
 

src/views/marketing/coupon.vue

@@ -158,10 +158,12 @@ export default class extends Vue {
   private listQuery = {
     page: 1,
     limit: 20,
-    key: ''
+    key: '',
+    shop: ''
   }
   private filterForm = {
-    key: ''
+    key: '',
+    department: ''
   }
 
   created() {
@@ -172,6 +174,7 @@ export default class extends Vue {
 
   private async getList() {
     this.listLoading = true
+    console.log(this.listQuery)
     const { data } = await getCoupons(this.listQuery)
     this.listLoading = false
     this.list = data.records
@@ -198,6 +201,7 @@ export default class extends Vue {
 
   private filterData() {
     this.listQuery.key = this.filterForm.key
+    this.listQuery.shop = this.filterForm.department
     this.listQuery.page = 1
     this.getList()
   }