Commit 5ff3e03e by 黑潮

update: 模板消息

parent 51c97aa7
<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="开始时间">
<template slot-scope="scope">
<p style="line-height: 18px;">{{ formatDateTimeByType(scope.row.gameStartTime, 'yyyy-MM-dd') }}</p>
<p style="line-height: 18px;">{{ formatDateTimeByType(scope.row.gameStartTime, 'HH:mm:ss') }}</p>
</template>
</el-table-column>
<el-table-column label="结束时间">
<template slot-scope="scope">
<p style="line-height: 18px;">{{ formatDateTimeByType(scope.row.gameEndTime, 'yyyy-MM-dd') }}</p>
<p style="line-height: 18px;">{{ formatDateTimeByType(scope.row.gameEndTime, 'HH:mm:ss') }}</p>
</template>
</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 {
formatDateTimeByType,
list: [],
query: {
requestProject: 'gic-web',
searchParam: '',
currentPage: 1,
pageSize: 8,
gameStatus: 4
},
seletedItem: null,
seletedId: '',
total: 0
};
},
created() {
this.seletedId = this.gameId || '';
},
methods: {
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 || '';
},
seletedItem(val) {
this.$emit('select', val);
}
}
};
</script>
......@@ -2,8 +2,8 @@
<!-- 链接小工具 -->
<div class="link-tools-contain">
<div :class="activeName ? 'min-780' : 'min-1028'">
<div class="el-dialog">
<div class="el-dialog__body">
<div class="dm-dialog">
<div class="dm-dialog__body">
<!-- 链接类型 -->
<div class="links-types">
<label class="types-title">链接类型</label>
......@@ -28,6 +28,31 @@
</el-select>
</div>
</div>
<div style="margin: 20px 0 0 10px;" v-if="twoLevelValue == 'GAME_LINK' && threeLevelValue">
<div class="game-wrapper">
<div v-if="gameProps.showGameInfo" class="game-info">
<div class="game-info__title">
{{ gameInfo.title }}
<div style="float:right;color:#2B2B2B;font-size:14px">
<div v-if="gameInfo.gameStatus === '进行中'"><span class="dm-status--primary--flash"></span>{{ gameInfo.gameStatus }}</div>
<div v-else-if="gameInfo.gameStatus === '已删除'"><span class="dm-status--error"></span>{{ gameInfo.gameStatus }}</div>
<div v-else :class="gameInfo.gameStatus === '未开始' ? 'dm-status--warning' : 'dm-status--info'">{{ gameInfo.gameStatus }}</div>
</div>
</div>
<div class="game-info__other">
{{ gameInfo.id }}
</div>
<div v-if="gameInfo.gameStartTime || gameInfo.gameEndTime" class="game-info__other">{{ formatDateTimeByType(gameInfo.gameStartTime, 'yyyy-MM-dd HH:mm:ss') }}{{ formatDateTimeByType(gameInfo.gameEndTime, 'yyyy-MM-dd HH:mm:ss') }}</div>
</div>
<div v-else class="button-add-game" @click="gameProps.gameListVisible = true">
<i class="el-icon-plus"></i>
选择游戏-{{ threeLevelOptions.find(el => el.id == threeLevelValue).label }}
</div>
</div>
<el-tooltip v-if="gameProps.showGameInfo" effect="dark" content="删除" placement="top-start">
<i class="iconfont icon-shanchu" style="vertical-align:middle;font-size:24px;color:#909399;cursor:pointer" @click="(gameInfo = null), (gameProps.showGameInfo = false)"></i>
</el-tooltip>
</div>
<!-- h5 -->
<div class="h5link-contain" v-if="h5linkVisible">
......@@ -101,6 +126,12 @@
</div>
</div>
</div>
<el-dialog title="游戏列表" :close-on-click-modal="false" :visible.sync="gameProps.gameListVisible">
<game-list v-if="gameProps.gameListVisible" ref="gameList" :game-type="gameProps.gameType"></game-list>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="onSelectGame">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
......@@ -112,6 +143,29 @@ import Treeselect from '@riophae/vue-treeselect';
// import axios from 'axios'
import qs from 'qs';
import { formatDateTimeByType } from '@/utils/index.js';
import GameList from '../game-list.vue';
import { generateMiniProgramLink } from '@/service/api/gameApi.js';
const getgameStatus = val => {
console.log(val);
let text = '已结束';
switch (val) {
case 1:
text = '进行中';
break;
case 0:
text = '未开始';
break;
default:
text = '已结束';
break;
}
return text;
};
export default {
name: 'links',
props: ['linkToolsVisible', 'showType', 'projectName', 'activeName'],
......@@ -317,7 +371,14 @@ export default {
timeSwitch: 0
},
// 获取 location origin
baseUrl: ''
baseUrl: '',
gameProps: {
gameListVisible: false,
gameType: '',
showGameInfo: false
},
gameInfo: null,
formatDateTimeByType
};
},
beforeMount() {
......@@ -331,6 +392,36 @@ export default {
}
},
methods: {
changeGame(val) {
this.gameInfo = null;
this.gameProps.showGameInfo = false;
this.gameProps.gameType = val;
},
onSelectGame() {
if (this.$refs.gameList && this.$refs.gameList.seletedItem) {
const gameItem = this.$refs.gameList.seletedItem;
generateMiniProgramLink({ id: gameItem.gameId || gameItem.gameActivityId, linkId: this.gameProps.gameType }).then(res => {
this.gameProps.showGameInfo = true;
this.gameProps.gameListVisible = false;
this.gameInfo = {
title: gameItem.gameName,
id: gameItem.gameId || gameItem.gameActivityId,
gameStartTime: gameItem.gameStartTime,
gameEndTime: gameItem.gameEndTime,
gameStatus: 'gameStatusName' in gameItem ? gameItem.gameStatusName : getgameStatus(gameItem.activityStatus)
};
this.selectLinkObj.url = res.result.link;
this.selectLinkObj.name = gameItem.gameName;
console.log(this.selectLinkObj);
this.$emit('linkSelect', this.selectLinkObj);
});
} else {
this.$message.warning('请添加游戏');
}
},
// --------------------------------------------------
// 选择类型改变 (一级选择,保存选择类型)
linksTypeChange: function(e) {
......@@ -426,6 +517,7 @@ export default {
return;
}
let selectTwoItem = '';
console.log(this.twoLevelOptions);
that.twoLevelOptions.forEach(function(ele, index) {
if (e == ele.linkId) {
selectTwoItem = ele;
......@@ -439,6 +531,7 @@ export default {
console.log('二级选择的 obj: ', that.selectLinkObj.id);
// 判断是否结束, 1:结束;
console.log(selectTwoItem);
if (selectTwoItem.type == 1 || selectTwoItem.type == 4 || selectTwoItem.type == 6) {
that.threeLevelVisible = false; // 三级部分隐藏
that.threeLevelValue = ''; // 清空三级数据
......@@ -490,7 +583,7 @@ export default {
return false;
}
// 获取三级列表数据
that.getLinksList(selectTwoItem.linkId, 3, twoType);
that.getLinksList(selectTwoItem.linkId, 3, twoType, selectTwoItem.childList);
}
},
......@@ -504,6 +597,11 @@ export default {
that.threeLevelTreeVisible = false; // 三级中第二个下拉树形结构
that.threeLevelSearchVisible = false; // 三级中第三个搜索下拉
break;
case 5: // 单选
that.threeLeveloneVisible = true; // 三级中第一个下拉单选
that.threeLevelTreeVisible = false; // 三级中第二个下拉树形结构
that.threeLevelSearchVisible = false; // 三级中第三个搜索下拉
break;
case 2: // 搜索下拉
that.threeLeveloneVisible = false; // 三级中第一个下拉单选
that.threeLevelTreeVisible = false; // 三级中第二个下拉树形结构
......@@ -658,6 +756,12 @@ export default {
// threeSingleValueChange
threeSingleValueChange(e) {
if (this.twoLevelValue == 'GAME_LINK') {
this.gameInfo = null;
this.gameProps.gameType = e;
this.gameProps.showGameInfo = false;
return;
}
let that = this;
console.log(e, that.threeLevelValue);
let selThreeItem = '';
......@@ -1120,7 +1224,16 @@ export default {
},
// 获取一级列表/二级列表
getLinksList(parentId, num, twoType) {
getLinksList(parentId, num, twoType, childList) {
if (childList && childList.length > 0) {
childList.forEach(function(ele, index) {
ele.id = ele.tagid;
ele.label = ele.tagname;
ele.value = ele.tagid;
});
this.threeLevelOptions = childList;
return;
}
let that = this;
// 如果不传传的显示类型,设置
twoType = twoType ? twoType : '';
......@@ -1297,7 +1410,8 @@ export default {
},
components: {
Treeselect
Treeselect,
GameList
}
};
</script>
......@@ -2218,7 +2332,7 @@ export default {
overflow: auto;
}
.el-dialog__body {
.dm-dialog__body {
/*border-bottom: 1px solid #e7e7eb;*/
padding: 0px 20px 0 20px;
-webkit-box-sizing: border-box;
......@@ -2226,7 +2340,7 @@ export default {
box-sizing: border-box;
}
.el-dialog__footer {
.dm-dialog__footer {
padding: 10px 20px;
}
......@@ -2246,7 +2360,7 @@ export default {
}
}
.el-dialog {
.dm-dialog {
/*min-width: 1051px;*/
margin: 0;
// border: 1px solid #e8e8e8;
......@@ -2255,19 +2369,19 @@ export default {
-moz-box-sizing: border-box;
box-sizing: border-box;
.el-dialog__header {
.dm-dialog__header {
border-bottom: 1px solid #e7e7eb;
}
}
.min-780 {
.el-dialog {
.dm-dialog {
min-width: 780px;
}
}
.min-1028 {
.el-dialog {
.dm-dialog {
min-width: 1028px;
}
}
......@@ -2397,4 +2511,42 @@ export default {
margin-bottom: 0;
}
}
.game-wrapper {
display: inline-block;
vertical-align: middle;
background-color: #f7f9fb;
overflow: hidden;
width: 680px;
}
.button-add-game {
cursor: pointer;
height: 32px;
line-height: 32px;
text-align: center;
margin: 20px 50px;
border: 1px dashed #dcdfe6;
border-radius: 4px;
font-size: 14px;
color: #606266;
&:hover {
border-color: #1890ff;
color: #1890ff;
}
}
.game-info {
margin: 14px 28px 16px 20px;
line-height: 1.4;
&__title {
color: #303133;
font-size: 16px;
}
&__other {
margin-top: 5px;
color: #909399;
font-size: 12px;
}
}
.icon-shanchu:hover {
color: #1890ff !important;
}
</style>
......@@ -79,7 +79,7 @@
<span v-html="filterCardStatus(scope.row)"></span>
</template>
</el-table-column>
<el-table-column min-width="80" align="left" prop="receiveName" label="投放来源"></el-table-column>
<el-table-column min-width="80" align="left" prop="receiveName" label="投放渠道"></el-table-column>
<el-table-column width="100" align="left" prop="receiveName" label="来源明细">
<template slot-scope="scope">
{{ scope.row.receiveCode == 'RECEIVE_003' || scope.row.receiveCode == 'RECEIVE_005' || scope.row.receiveCode == 'RECEIVE_007' || scope.row.receiveCode == 'RECEIVE_004' || scope.row.receiveCode == 'RECEIVE_010' ? scope.row.receiveTypeExcel : '--' }}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment