Skip to content

M
marketing
Commit 2699c024 by 黑潮
Options

update: 游戏链接

parent 4bdae360
Showing with 537 additions and 22 deletions
src/service/api/gameApi.js
......@@ -156,3 +156,5 @@ export const getCouponStock = params => requests(PREFIX + 'get-coupon-stock', pa
// 游戏营销-- 获取游戏更新时间
export const getGameDataUpdatetime = params => requests(PREFIX + 'get-game-data-updatetime', params);
// 生成小程序游戏链接
export const generateMiniProgramLink = params => requests('api-admin/get-page-link-game', params);
src/views/game/common/links.vue
<template>
<el-dialog title="游戏链接下载" :visible.sync="show" width="40%" :before-close="close" v-loading="loading">
<div class="links__body">
<div class="links__body--url">{{ obj.gameUrl }}</div>
<div class="links__body--btn">
<el-button v-clipboard:text="obj.gameUrl" type="text" icon="iconfont icon-lianjie fz14"> 复制链接</el-button>
<el-dialog title="游戏链接下载" :visible.sync="show" width="600px" :before-close="close">
<div class="link-tip">
<i class="el-icon-info"></i>
建议都用小程序链接做活动，会员认证后可直接跳转回游戏页面
</div>
<div class="link-title">
<i class="icon iconfont icon-xiaochengxu4" style="color:#6457AD"></i>
小程序链接
</div>
<div v-loading="loading" class="links-block">
<div class="links__body">
<div class="links__body--url">{{ miniprogram.link }}</div>
<div class="links__body--btn">
<el-button v-clipboard:text="miniprogram.link" type="text" icon="iconfont icon-lianjie fz14"> 复制链接</el-button>
</div>
</div>
<div class="link__divider"></div>
<div class="links__qr">
<!-- <vue-qr id="qrWrap" :text="qcText" :size="102" :margin="0" :logoMargin="10"></vue-qr> -->
<div style="text-align:center">
<el-image style="width:102px;height:102px" lazy :src="miniprogram.url">
<!-- <img slot="placeholder" style="width:102px;height:102px" src="@/assets/img/loaderror.png" /> -->
<div slot="placeholder" style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;">
<i class="el-icon-picture-outline" style="font-size:30px"></i>
</div>
</el-image>
</div>
<el-button class="links__qr--btn" type="text" icon="iconfont icon-icon_yunxiazai fz14 mr4" @click="downloadMiniporgramImg">小程序二维码下载</el-button>
</div>
</div>
<div class="links__qr">
<vue-qr id="qrWrap" :text="qcText" :size="200" :margin="0" :logoMargin="10"></vue-qr>
<el-button class="links__qr--btn" type="text" icon="iconfont icon-icon_yunxiazai fz14" @click="downloadImg">二维码下载</el-button>
<div class="link-title">
<i class="icon iconfont icon-fuwuhao2" style="color:#2CBB64"></i>
服务号链接
</div>
<div class="links-block" style="margin-bottom:25px">
<div class="links__body">
<div class="links__body--url">{{ obj.gameUrl }}</div>
<div class="links__body--btn">
<el-button v-clipboard:text="obj.gameUrl" type="text" icon="iconfont icon-lianjie fz14"> 复制链接</el-button>
</div>
</div>
<div class="link__divider"></div>
<div class="links__qr">
<vue-qr id="qrWrap" :text="qcText" :size="102" :margin="0" :logoMargin="10"></vue-qr>
<el-button class="links__qr--btn" type="text" icon="iconfont icon-icon_yunxiazai fz14 mr4" @click="downloadImg">服务号二维码下载</el-button>
</div>
</div>
</el-dialog>
</template>
<script>
import VueQr from 'vue-qr';
import { formatDateTimeByType, downloadFile } from '@/utils/index.js';
import { generateMiniProgramLink } from '@/service/api/gameApi.js';
export default {
name: 'links',
components: {
......@@ -39,13 +76,22 @@ export default {
data() {
return {
loading: false,
qcText: ''
qcText: '',
miniprogram: {
link: '',
url: ''
}
};
},
watch: {
show(val) {
if (val) {
this.miniprogram = {
link: '',
url: ''
};
this.createQrImg();
this.generateMiniProgramLink();
}
}
},
......@@ -53,37 +99,130 @@ export default {
createQrImg() {
this.qcText = this.obj.gameUrl || '';
},
generateMiniProgramLink() {
this.loading = true;
let gameType = '';
switch (this.gameTypeName) {
case '大转盘':
gameType = 'GAME_LINK_DZP';
break;
case '刮刮卡':
gameType = 'GAME_LINK_GGK';
break;
case '拼图游戏':
gameType = 'GAME_LINK_PTYX';
break;
case '找你马':
gameType = 'GAME_LINK_ZNM';
break;
case '口令福利':
gameType = 'GAME_LINK_KLFL';
break;
}
generateMiniProgramLink({
id: this.obj.gameId || this.obj.gameActivityId,
linkId: gameType
}).then(res => {
this.miniprogram = res.result;
this.loading = false;
});
},
close() {
this.$emit('update:show', false);
},
downloadImg() {
const qrWrap = document.getElementById('qrWrap');
const qrImg = qrWrap && qrWrap.childNodes[0].src;
downloadFile(this.gameTypeName + '-' + this.obj.gameName + formatDateTimeByType(this.obj.gameStartTime, 'yyyy-MM-dd-HH-mm-ss') || '游戏链接', qrImg);
downloadFile(this.gameTypeName + '-' + this.obj.gameName + '-服务号-' + formatDateTimeByType(this.obj.gameStartTime, 'yyyy-MM-dd-HH-mm-ss') || '游戏链接', qrImg);
},
downloadMiniporgramImg() {
const downloadFile = (fileName, content) => {
const url = content;
const x = new XMLHttpRequest();
x.open('GET', url, true);
x.responseType = 'blob';
x.onload = function(e) {
const blob = new Blob([x.response], { type: 'image/png' });
let url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
a.download = fileName;
a.click();
};
x.send();
};
downloadFile(this.gameTypeName + '-' + this.obj.gameName + '-小程序-' + formatDateTimeByType(this.obj.gameStartTime, 'yyyy-MM-dd-HH-mm-ss') || '游戏链接', this.miniprogram.url);
}
}
};
</script>
<style lang="scss" scoped>
.links__body {
border: 1px solid #ddd;
// border: 1px solid #ddd;
flex: 1;
&--url {
height: 80px;
height: 130px;
overflow-x: hidden;
overflow-y: auto;
word-break: break-all;
padding: 10px;
padding: 13px 22px 0 16px;
line-height: 17px;
font-size: 12px;
}
&--btn {
text-align: center;
line-height: 2;
line-height: 1;
}
}
.links__qr {
padding: 20px 0;
padding: 22px 30px 10px 24px;
text-align: center;
&--btn {
margin: 20px 0;
margin: 18px 0 0;
}
}
.link__divider {
margin-top: 19px;
height: 130px;
width: 1px;
background-color: #ebecf0;
}
.links-block {
display: flex;
background: #f5f7fa;
margin: 10px 0 10px;
}
.link-title {
display: flex;
align-items: center;
font-weight: 500;
color: #303133;
line-height: 20px;
i {
font-size: 20px;
margin-right: 8px;
}
}
.link-tip {
width: 544px;
background: #e6f7ff;
border-radius: 4px;
border: 1px solid #91d5ff;
color: #606266;
height: 38px;
line-height: 38px;
margin-bottom: 10px;
.el-icon-info {
margin-left: 16px;
margin-right: 4px;
color: #1890ff;
font-size: 12px;
}
}
</style>
<style lang="scss">
.mr4 {
margin-right: 4px;
}
</style>
static/fonts/iconfont.css
@font-face {
font-family: "iconfont"; /* Project id 688955 */
src: url('iconfont.woff2?t=1623822833759') format('woff2'),
url('iconfont.woff?t=1623822833759') format('woff'),
url('iconfont.ttf?t=1623822833759') format('truetype');
src: url('iconfont.woff2?t=1629873400222') format('woff2'),
url('iconfont.woff?t=1629873400222') format('woff'),
url('iconfont.ttf?t=1629873400222') format('truetype');
}
.iconfont {
......@@ -13,6 +13,50 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-umidd17:before {
content: "\e66d";
}
.icon-xuanzhong11-copy:before {
content: "\eb59";
}
.icon-xuanzhong11:before {
content: "\e690";
}
.icon-huiyuanqia:before {
content: "\e668";
}
.icon-zhifubaoxiaochengxu:before {
content: "\e669";
}
.icon-shouye:before {
content: "\e66c";
}
.icon-fuwuhao2:before {
content: "\e665";
}
.icon-xiaochengxu4:before {
content: "\e666";
}
.icon-xiaochengxu12:before {
content: "\e662";
}
.icon-zhuangtailan:before {
content: "\e663";
}
.icon-jiantou:before {
content: "\e8a3";
}
.icon-Icon-yishanchu:before {
content: "\e65a";
}
......
static/fonts/iconfont.js
This source diff could not be displayed because it is too large. You can view the blob instead.
static/fonts/iconfont.json
......@@ -6,6 +6,83 @@
"description": "",
"glyphs": [
{
"icon_id": "18516314",
"name": "支付宝",
"font_class": "umidd17",
"unicode": "e66d",
"unicode_decimal": 58989
},
{
"icon_id": "23794372",
"name": "选中",
"font_class": "xuanzhong11-copy",
"unicode": "eb59",
"unicode_decimal": 60249
},
{
"icon_id": "18683817",
"name": "选中",
"font_class": "xuanzhong11",
"unicode": "e690",
"unicode_decimal": 59024
},
{
"icon_id": "3796375",
"name": "会员卡",
"font_class": "huiyuanqia",
"unicode": "e668",
"unicode_decimal": 58984
},
{
"icon_id": "6180166",
"name": "支付宝小程序",
"font_class": "zhifubaoxiaochengxu",
"unicode": "e669",
"unicode_decimal": 58985
},
{
"icon_id": "21471056",
"name": "首 页",
"font_class": "shouye",
"unicode": "e66c",
"unicode_decimal": 58988
},
{
"icon_id": "16840237",
"name": "服务号",
"font_class": "fuwuhao2",
"unicode": "e665",
"unicode_decimal": 58981
},
{
"icon_id": "19703591",
"name": "小程序",
"font_class": "xiaochengxu4",
"unicode": "e666",
"unicode_decimal": 58982
},
{
"icon_id": "8444051",
"name": "小程序",
"font_class": "xiaochengxu12",
"unicode": "e662",
"unicode_decimal": 58978
},
{
"icon_id": "22292746",
"name": "状态栏",
"font_class": "zhuangtailan",
"unicode": "e663",
"unicode_decimal": 58979
},
{
"icon_id": "9724564",
"name": "右箭头",
"font_class": "jiantou",
"unicode": "e8a3",
"unicode_decimal": 59555
},
{
"icon_id": "22270569",
"name": "Icon-yishanchu",
"font_class": "Icon-yishanchu",
......
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