update: 链接小工具

src/components/linktools-fulls/game-list.vue

+<template>
+  <div>
+    <el-input style="width:180px;" v-model="query.searchParam" prefix-icon="el-icon-search" placeholder="请输入游戏名称" @change="onSearch" clearable></el-input>
+    <el-table style="margin-top:20px" :data="list" @row-click="onRowClick">
+      <el-table-column width="50px">
+        <template slot-scope="scope">
+          <el-radio :value="seletedId" :label="scope.row.gameId">&nbsp;</el-radio>
+        </template>
+      </el-table-column>
+      <el-table-column show-overflow-tooltip label="游戏名称" prop="gameName"></el-table-column>
+      <el-table-column show-overflow-tooltip label="游戏ID" prop="gameId"></el-table-column>
+      <el-table-column label="游戏状态">
+        <template slot-scope="scope">
+          <template v-if="'gameStatusName' in scope.row">
+            <div v-if="scope.row.gameStatusName === '进行中'"><span class="dm-status--primary--flash"></span>{{scope.row.gameStatusName}}</div>
+            <div v-else :class="scope.row.gameStatusName === '未开始' ? 'dm-status--warning' : 'dm-status--info'">{{scope.row.gameStatusName}}</div>
+          </template>
+          <template v-else-if="'activityStatus' in scope.row">
+            <div v-if="scope.row.activityStatus === 1"><span class="dm-status--primary--flash"></span>进行中</div>
+            <div v-else :class="scope.row.activityStatus === 0 ? 'dm-status--warning' : 'dm-status--info'">
+              {{scope.row.activityStatus === 0 ? '未开始' : '已结束'}}
+            </div>
+          </template>
+        </template>
+      </el-table-column>
+      <el-table-column label="开始时间">
+        <div slot-scope="scope" style="line-height: normal">
+          <p>{{ formatDateTimeByType(scope.row.gameStartTime, 'yyyy-MM-dd-HH-mm-ss', true).y }}</p>
+          <p>{{ formatDateTimeByType(scope.row.gameStartTime, 'yyyy-MM-dd-HH-mm-ss', true).h }}</p>
+        </div>
+      </el-table-column>
+      <el-table-column label="结束时间">
+        <div slot-scope="scope" style="line-height: normal">
+          <p>{{ formatDateTimeByType(scope.row.gameEndTime, 'yyyy-MM-dd-HH-mm-ss', true).y }}</p>
+          <p>{{ formatDateTimeByType(scope.row.gameEndTime, 'yyyy-MM-dd-HH-mm-ss', true).h }}</p>
+        </div>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      style="margin-top:10px;text-align:right"
+      small
+      layout="prev, pager, next"
+      :current-page="query.currentPage"
+      :page-size="query.pageSize"
+      :total="total"
+      @current-change="onPageChange">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+  import qs from 'qs';
+  import { formatDateTimeByType } from '@/utils/index.js';
+
+  export default {
+    name: 'GamelinkList',
+    props: {
+      gameType: {
+        required: true,
+        type: String
+      },
+      gameId: {
+        type: String
+      }
+    },
+    data() {
+      return {
+        list: [],
+        query: {
+          requestProject: 'gic-web',
+          searchParam: '',
+          currentPage: 1,
+          pageSize: 6,
+          gameStatus: 4
+        },
+        seletedItem: null,
+        seletedId: '',
+        total: 0
+      }
+    },
+    created() {
+      this.seletedId = this.gameId || '';
+    },
+    methods: {
+      formatDateTimeByType,
+      onPageChange(val) {
+        this.query.currentPage = val;
+        this.getList(this.gameType);
+        this.seletedItem = null;
+        this.seletedId = '';
+      },
+      onRowClick(row) {
+        this.seletedItem = row;
+        this.seletedId = row.gameId;
+      },
+      onSearch() {
+        this.query.currentPage = 1;
+        this.seletedItem = null;
+        this.seletedId = '';
+        this.getList(this.gameType);
+      },
+      getList(gameType) {
+        const setResponse = (res, type) => {
+          //type 0 大转盘/刮刮卡 ----- 1 其他游戏
+          const { errorCode, message, result } = res.data || {}
+          if (errorCode != 0) {
+            return this.$message.error(message)
+          } else {
+            if (type === 0) {
+              this.list = result.page.result || [];
+              this.total = result.page.totalCount || 0;
+            } else {
+              this.list = (result.result || []).map(item => ({...item, gameId: item.gameActivityId}));
+              this.total = result.totalCount || 0;
+            }
+          }
+        }
+        switch(gameType) {
+          case 'GAME_LINK_DZP':
+            this.axios.post(`/api-marketing/page-lottery-game`, qs.stringify({ ...this.query, gameType: 1})).then(res => {
+              setResponse(res, 0);
+            })
+            break;
+          case 'GAME_LINK_GGK':
+            this.axios.post(`/api-marketing/page-lottery-game`, qs.stringify({ ...this.query, gameType: 2})).then(res => {
+              setResponse(res, 0);
+            })
+            break;
+          case 'GAME_LINK_PTYX':
+            this.axios.post(`/api-marketing/page-puzzle-game`, qs.stringify({ ...this.query })).then(res => {
+              setResponse(res, 1);
+            })
+            break;
+          case 'GAME_LINK_ZNM':
+            this.axios.post(`/api-marketing/page-znm-game`, qs.stringify({ ...this.query })).then(res => {
+              setResponse(res, 1);
+            })
+            break;
+          case 'GAME_LINK_KLFL':
+            this.axios.post(`/api-marketing/page-klfl-game`, qs.stringify({ ...this.query })).then(res => {
+              setResponse(res, 1);
+            })
+            break;
+        }
+      }
+    },
+    watch: {
+      gameType: {
+        handler() {
+          this.query.currentPage = 1;;
+          this.query.searchParam = '';
+          this.getList(this.gameType);
+        },
+        immediate: true
+      },
+      gameId() {
+        this.seletedId = this.gameId || '';
+      }
+    }
+  }
+</script>

src/components/linktools-fulls/index.vue

@@ -407,6 +407,8 @@ components: {linkId
           <gift-list :pname="pname" :gift-id="cardUrl" @pass-gift="handlePaddGift"></gift-list>
         </div>
       </div>
+      <div style="height:1px;background:#e7e7eb;left:0;right:0;margin:20px -20px"></div>
+      <game-list ref="gameList" v-if="gameLinkVisible" :game-id="gameProps.gameId" :game-type="gameProps.gameType"></game-list>
 
       <!-- 回跳页面 -->
       <div class="links-types" style="margin:20px 0" v-if="linksType != 50 && twoLevelValue == 13">
@@ -433,6 +435,7 @@ components: {linkId
 // 使用树形插件
 // import the component
 import Treeselect from '@riophae/vue-treeselect';
+import GameList from './game-list.vue';
 import CardList from './card-list';
 import GiftList from './gift-list';
 import GoodsTree from './goods-tree';
@@ -454,6 +457,10 @@ export default {
       rewriteData: {},
       treeData: [],
       goodsTreeVisible: false,
+      gameProps: {
+        gameId: '',
+        gameType: ''
+      },
       cardUrl: '',
       // 项目名
       cardLimit: 1,
@@ -949,6 +956,10 @@ export default {
         this.threeLeveloneVisible = true;
         this.goodsTreeVisible = false;
       }
+      if(e !== 'GAME_LINK') {
+        this.gameProps.gameType = '';
+        this.gameProps.gameId = '';
+      }
 
       var that = this
       this.goodsLinksVisible = false;
@@ -1285,6 +1296,14 @@ export default {
 
     // threeSingleValueChange
     threeSingleValueChange(e) {
+      if(e.startsWith('GAME_LINK')) {
+        this.$nextTick(() => {
+          this.gameProps.gameType = e;
+        })
+        this.gameProps.gameId = ''
+        this.selectLinkObj.id = e;
+        return
+      }
       // 是那个类型的
       if (this.linkId == 16) {
         this.pageId = e;
@@ -1851,6 +1870,30 @@ export default {
             this.transData();
             return;
           }
+          if (this.twoLevelValue == 'GAME_LINK') {
+            if (this.$refs.gameList && this.$refs.gameList.seletedItem) {
+              const selectedGame = this.$refs.gameList.seletedItem
+              this.selectLinkObj.gameId =  selectedGame.gameId;
+              this.selectLinkObj.name =  selectedGame.gameName;
+              let url = selectedGame.gameUrl
+              // const reg = /(?<=(redirect_uri=)).+(?=(&response_type=))/
+              const index1 = url.indexOf('redirect_uri=')
+              const index2 = url.indexOf('&response_type=')
+              this.selectLinkObj.url = decodeURIComponent(url.slice(index1 + ('redirect_uri=').length, index2))
+              this.transData()
+            } else if(this.gameProps.gameId) {
+              this.selectLinkObj.gameId =  this.linkData.gameId;
+              this.selectLinkObj.name =  this.linkData.name;
+              this.selectLinkObj.url = this.linkData.url
+              this.transData()
+            } else {
+              this.$message.warning({
+                duration: 1000,
+                message: "请选择游戏"
+              });
+            }
+            return
+          }
         }
 
         if (this.linkId == 16) {
@@ -1970,6 +2013,10 @@ export default {
       that.twoLevelValue = ''; // 清空所有选择的
       that.twoLevelSelectValue = '';
       that.threeLevelValue = ''; // 清空所有选择的
+      that.gameProps = {
+        gameType: '',
+        gameId: ''
+      }
 
       // h5新增部分
       that.dynamicRow = {
@@ -2124,6 +2171,9 @@ export default {
             this.rewriteData.threeLevelValue = '';
             this.threeSingleValueChange(this.threeLevelValue);
           }
+          if(this.linkData.gameId) {
+            this.gameProps.gameId = this.linkData.gameId;
+          }
         }
 
         return;
@@ -2353,6 +2403,12 @@ export default {
       }
   },
 
+  computed: {
+    gameLinkVisible() {
+      return this.threeLevelValue.startsWith('GAME_LINK')
+    }
+  },
+
   mounted(){
     this.repProjectName = this.projectName || 'gic-web';
     // 获取 showType
@@ -2363,6 +2419,7 @@ export default {
 
   components: {
     Treeselect,
+    GameList,
     CardList,
     GiftList,
     GoodsTree,