feat(活动规则配置): 活动规则类型新增“游戏王徽章奖励”、“游戏王荣誉奖励”

src/constant/type.js

@@ -93,7 +93,10 @@ const propActivityTypes = [
   { value: "ACTIVITY_COUNTRY_PK", name: "区域国旗PK活动" },
   { value: "USER_RECHARGE_DRAW", name: "充值活动抽奖" },
   { value: "USER_RECHARGE_DRAW_REWARD", name: "用户充值抽奖活动奖励" },
-  { value: "NEWCOMER_GIFT_PACKAGE", name: "新人大礼包" }
+  { value: "NEWCOMER_GIFT_PACKAGE", name: "新人大礼包" },
+
+  { value: "GAME_KING_BADGE", name: "游戏王徽章奖励" },
+  { value: "GAME_KING_HONOR", name: "游戏王荣誉奖励" }
 ];
 
 /**

src/views/props/props-activity-rule-config/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="app-container">
+    <!-- 搜索栏 -->
     <div class="filter-container">
+      <!-- 系统 选择器 -->
       <el-select
         v-model="listQuery.sysOrigin"
         placeholder="系统"
@@ -14,10 +16,14 @@
           :label="item.label"
           :value="item.value"
         >
-          <span style="float: left;"> <sys-origin-icon :icon="item.value" :desc="item.value" /></span>
+          <span style="float: left;">
+            <sys-origin-icon :icon="item.value" :desc="item.value"
+          /></span>
           <span style="float: left;margin-left:10px">{{ item.label }}</span>
         </el-option>
       </el-select>
+
+      <!-- 活动类型 选择器 -->
       <el-select
         v-model="listQuery.activityType"
         placeholder="活动类型"
@@ -33,6 +39,8 @@
           :value="item.value"
         />
       </el-select>
+
+      <!-- ID -->
       <el-input
         v-model.trim="listQuery.id"
         placeholder="ID"
@@ -40,12 +48,16 @@
         style="width: 200px;"
         class="filter-item"
       />
+
+      <!-- 规则描述 -->
       <el-input
         v-model.trim="listQuery.ruleDescription"
         placeholder="规则描述"
         style="width: 200px;"
         class="filter-item"
       />
+
+      <!-- 活动组ID -->
       <el-input
         v-model.trim="listQuery.resourceGroupId"
         v-number
@@ -53,6 +65,8 @@
         style="width: 200px;"
         class="filter-item"
       />
+
+      <!-- 搜索按钮 -->
       <el-button
         class="filter-item"
         type="primary"
@@ -61,6 +75,8 @@
       >
         搜索
       </el-button>
+
+      <!-- 新增按钮 -->
       <el-button
         class="filter-item"
         type="primary"
@@ -70,9 +86,18 @@
         新增
       </el-button>
     </div>
+
+    <!-- 记录网格 -->
     <el-row v-loading="listLoading" :gutter="10">
-      <el-col v-for="(item, index) in list" :key="index" :xs="24" :md="12" :lg="8">
+      <el-col
+        v-for="(item, index) in list"
+        :key="index"
+        :xs="24"
+        :md="12"
+        :lg="8"
+      >
         <el-card class="box-card">
+          <!-- 头部操作栏 -->
           <div slot="header" class="clearfix">
             <sys-origin-icon :icon="item.sysOrigin" size="20" />
             {{ item.activityTypeName }}
@@ -82,20 +107,27 @@
                   操作选项<i class="el-icon-arrow-down el-icon--right" />
                 </span>
                 <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item @click.native="clickEditRule(item)">编辑规则</el-dropdown-item>
+                  <el-dropdown-item @click.native="clickEditRule(item)"
-                  <el-dropdown-item @click.native="clickAssociatedResources(item)">关联资源</el-dropdown-item>
+                    >编辑规则</el-dropdown-item
-                  <el-dropdown-item @click.native="handlDel(item.id)">删除</el-dropdown-item>
+                  >
+                  <el-dropdown-item
+                    @click.native="clickAssociatedResources(item)"
+                    >关联资源</el-dropdown-item
+                  >
+                  <el-dropdown-item @click.native="handlDel(item.id)"
+                    >删除</el-dropdown-item
+                  >
                 </el-dropdown-menu>
               </el-dropdown>
             </div>
           </div>
+
+          <!-- 详细信息 -->
           <div class="card-content">
             <div class="title">规则信息</div>
             <div class="contetn">
               <el-row>
-                <el-col :span="12">
+                <el-col :span="12"> ID：{{ item.id }} </el-col>
-                  ID：{{ item.id }}
-                </el-col>
                 <el-col :span="12">
                   <div class="flex-l">
                     <div>排序：</div>
@@ -112,11 +144,18 @@
                   <el-tooltip class="item" effect="light">
                     <div slot="content">
                       <div v-if="item.jsonData">
-                        <json-viewer :value="JSON.parse(item.jsonData)" :expand-depth="4" sort />
+                        <json-viewer
+                          :value="JSON.parse(item.jsonData)"
+                          :expand-depth="4"
+                          sort
+                        />
                       </div>
                       <div v-else>请选择类型</div>
                     </div>
-                    <i class="el-icon-question" style="font-size:20px;cursor:pointer;" />
+                    <i
+                      class="el-icon-question"
+                      style="font-size:20px;cursor:pointer;"
+                    />
                   </el-tooltip>
                 </el-col>
               </el-row>
@@ -129,6 +168,8 @@
         </el-card>
       </el-col>
     </el-row>
+
+    <!-- 分页 -->
     <pagination
       v-show="total > 0"
       :total="total"
@@ -137,33 +178,41 @@
       @pagination="renderData"
     />
 
+    <!-- 关联资源组弹窗 -->
     <associated-resources
       v-if="associatedResourcesVisable"
       :sys-origin="clickRow.sysOrigin"
       @select="selectSource"
-      @close="associatedResourcesVisable=false;"
+      @close="associatedResourcesVisable = false"
     />
 
+    <!-- 新增、修改弹窗 -->
     <edit-rule-drawer
       v-if="editRuleDrawerVisible"
       :row="clickRow"
       @success="editRuleSuccess"
-      @close="editRuleDrawerVisible=false;"
+      @close="editRuleDrawerVisible = false"
     />
   </div>
 </template>
 
 <script>
-import { pagePropsActivityRuleConfig, savePropsActivityRuleConfig, delPropsActivityRuleConfig } from '@/api/props'
+import { mapGetters } from "vuex";
-import Pagination from '@/components/Pagination'
+import { propActivityTypes } from "@/constant/type";
-import AssociatedResources from '@/components/data/AssociatedResources'
+
-import { mapGetters } from 'vuex'
+import {
-import EditRuleDrawer from './edit-rule-drawer'
+  pagePropsActivityRuleConfig,
-import { propActivityTypes } from '@/constant/type'
+  savePropsActivityRuleConfig,
-import PropsRow from '@/components/data/PropsRow'
+  delPropsActivityRuleConfig
+} from "@/api/props";
+
+import PropsRow from "@/components/data/PropsRow";
+import Pagination from "@/components/Pagination";
+import AssociatedResources from "@/components/data/AssociatedResources";
+import EditRuleDrawer from "./edit-rule-drawer";
 
 export default {
-  name: 'PropsActivityRuleConfig',
+  name: "PropsActivityRuleConfig",
   components: { Pagination, AssociatedResources, EditRuleDrawer, PropsRow },
   data() {
     return {
@@ -176,103 +225,107 @@ export default {
       listQuery: {
         cursor: 1,
         limit: 20,
-        id: '',
+        id: "",
-        sysOrigin: 'HALAR',
+        sysOrigin: "HALAR",
-        activityType: 'STAR',
+        activityType: "STAR",
-        resourceGroupId: ''
+        resourceGroupId: ""
       },
       formVisible: false,
       listLoading: true
-    }
+    };
   },
   computed: {
-    ...mapGetters(['permissionsSysOriginPlatforms'])
+    ...mapGetters(["permissionsSysOriginPlatforms"])
   },
   created() {
-    const that = this
+    const that = this;
-    const querySystem = this.permissionsSysOriginPlatforms[0]
+    const querySystem = this.permissionsSysOriginPlatforms[0];
     if (!querySystem) {
-      return
+      return;
     }
-    that.listQuery.sysOrigin = querySystem.value
+    that.listQuery.sysOrigin = querySystem.value;
-    that.renderData()
+    that.renderData();
   },
   methods: {
     renderData(isClean) {
-      const that = this
+      const that = this;
       if (isClean === true) {
-        this.listQuery.cursor = 1
+        this.listQuery.cursor = 1;
-        this.list = []
+        this.list = [];
       }
-      that.listLoading = true
+      that.listLoading = true;
       pagePropsActivityRuleConfig(that.listQuery).then(res => {
-        const { body } = res
+        const { body } = res;
-        that.total = body.total || 0
+        that.total = body.total || 0;
-        const list = body.records || []
+        const list = body.records || [];
-        list.sort(function(a, b) { return a.sort - b.sort })
+        list.sort(function(a, b) {
-        that.list = list
+          return a.sort - b.sort;
-        that.listLoading = false
+        });
-      })
+        that.list = list;
+        that.listLoading = false;
+      });
     },
     handleSearch() {
-      this.renderData(true)
+      this.renderData(true);
     },
     selectSource(source) {
-      const that = this
+      const that = this;
-      that.associatedResourcesVisable = false
+      that.associatedResourcesVisable = false;
-      that.clickRow.resourceGroupId = source.id
+      that.clickRow.resourceGroupId = source.id;
-      that.submit(that.clickRow)
+      that.submit(that.clickRow);
     },
     submit(from) {
-      const that = this
+      const that = this;
-      savePropsActivityRuleConfig(from).then(res => {
+      savePropsActivityRuleConfig(from)
-        this.$message({
+        .then(res => {
-          message: 'Successful',
+          this.$message({
-          type: 'success'
+            message: "Successful",
+            type: "success"
+          });
+          that.fileList = [];
+          that.renderData();
         })
-        that.fileList = []
+        .catch(er => {
-        that.renderData()
+          that.$emit("fial", er);
-      }).catch(er => {
+        });
-        that.$emit('fial', er)
-      })
     },
     clickAssociatedResources(item) {
-      this.associatedResourcesVisable = true
+      this.associatedResourcesVisable = true;
-      this.clickRow = item
+      this.clickRow = item;
     },
     // 删除
     handlDel(id) {
-      this.$confirm('确认删除吗？', '提示', {
+      this.$confirm("确认删除吗？", "提示", {
-        type: 'warning'
+        type: "warning"
-      }).then(() => {
-        this.listLoading = true
-        delPropsActivityRuleConfig(id).then((res) => {
-          this.listLoading = false
-          this.$message({
-            message: '删除成功',
-            type: 'success'
-          })
-          this.renderData()
-        })
-      }).catch(() => {
-
       })
+        .then(() => {
+          this.listLoading = true;
+          delPropsActivityRuleConfig(id).then(res => {
+            this.listLoading = false;
+            this.$message({
+              message: "删除成功",
+              type: "success"
+            });
+            this.renderData();
+          });
+        })
+        .catch(() => {});
     },
     handleCreate() {
-      this.clickRow = {}
+      this.clickRow = {};
-      this.editRuleDrawerVisible = true
+      this.editRuleDrawerVisible = true;
     },
     clickEditRule(row) {
-      this.clickRow = row
+      this.clickRow = row;
-      this.editRuleDrawerVisible = true
+      this.editRuleDrawerVisible = true;
     },
     editRuleSuccess() {
-      this.editRuleDrawerVisible = false
+      this.editRuleDrawerVisible = false;
-      this.$opsMessage.success()
+      this.$opsMessage.success();
-      this.renderData()
+      this.renderData();
     }
   }
-}
+};
 </script>
 <style scoped lang="scss">
 .rule-form {
@@ -290,7 +343,7 @@ export default {
     }
     .content {
       overflow: auto;
-      white-space:nowrap;
+      white-space: nowrap;
       .origin-source {
         padding: 5px;
         text-align: center;
@@ -302,7 +355,6 @@ export default {
           cursor: pointer;
         }
       }
-
     }
     .sort {
       background: #efe3e9;