336 lines
9.1 KiB
Vue
336 lines
9.1 KiB
Vue
<template>
|
||
<view>
|
||
<nav-bar title="Invite" bgColor="#fff"></nav-bar>
|
||
<canvas canvas-id="poster" class="poster_canvas"></canvas>
|
||
<view class="minebg">
|
||
<view class="v1">
|
||
CODE: {{invite_code}}
|
||
<image src="/static/images/copy1.png" class="i" @click="copy(invite_code)" mode="cover"></image>
|
||
</view>
|
||
<view style="text-align: center; width: 260rpx; margin: 20rpx auto;">
|
||
<tki-qrcode
|
||
ref="qrcode"
|
||
:val="qrcode"
|
||
:size="size"
|
||
:unit="unit"
|
||
:onval="onval"
|
||
:load-make="load_make"
|
||
:show-loading="show_loading"
|
||
:lv="lv"
|
||
:background="background"
|
||
:foreground="foreground"
|
||
:pdground="pdground"
|
||
:icon='icon'
|
||
@result="qrResult"
|
||
style="margin: 10rpx auto; text-align: center;"/>
|
||
</view>
|
||
<view style="padding: 0px 10%;">
|
||
<button type="primary" class="b1" @click="onSaveImg">
|
||
<uni-icons type="download" size="20" color="#fff"></uni-icons>
|
||
<text style="margin-left: 10rpx;">Save</text>
|
||
</button>
|
||
<button type="primary" class="b2" @click="copy()">
|
||
<uni-icons type="undo" size="20" color="#000"></uni-icons>
|
||
<text style="margin-left: 10rpx;">Share</text>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
<!-- #ifdef H5 -->
|
||
<view class="h5_press_save" v-if="h5SaveImg" @click="h5SaveImg = ''">
|
||
<image :src="h5SaveImg" mode="widthFix"></image>
|
||
<button class="download"><uni-icons type="download" size="20" color="#fff"></uni-icons>
|
||
长按图片保存图片</button>
|
||
</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import tkiQrcode from "tki-qrcode"
|
||
import {
|
||
mapState,
|
||
mapMutations
|
||
} from 'vuex';
|
||
let settingWritePhotosAlbum = false;
|
||
export default {
|
||
components: {
|
||
tkiQrcode
|
||
},
|
||
data() {
|
||
return {
|
||
invite_code: '',
|
||
init: {},
|
||
nickName: '',
|
||
promoteBgImgs: ["/static/images/12.png"],
|
||
promoteCodeImg: "https://qn.kemean.cn/upload/202007/03/1593744239803mgajzyjk.png",
|
||
swiperIndex: 0,
|
||
posterImgs: [],
|
||
shareInfo: {
|
||
shareContent: "商家云系统,点击了解",
|
||
shareImg: "http://qn.kemean.cn/upload/202004/08/15863540965488mlv1qgj.png",
|
||
shareTitle: "商家云",
|
||
shareUrl: "http://kemean.com/download/3jiayunbz/index.html"
|
||
},
|
||
h5SaveImg: "",
|
||
|
||
qrcode: '', //二维码的内容链接
|
||
size: 260, //二维码的大小
|
||
unit: 'upx', //大小单位 !!! rpx单位有误
|
||
load_make: true, //组件加载完成后自动生成二维码
|
||
show_loading: false, //是否添加loading
|
||
onval: true, //val值变化时自动重新生成二维码
|
||
background: '#ffffff', //背景色
|
||
foreground: '#000',//点色
|
||
pdground: '#000', //角标色
|
||
icon: '', //二维码图标
|
||
iconsize: 30, //二维码图标大小
|
||
lv: 3, //二维码容错级别
|
||
loadingText: '加载中', //loading内容,
|
||
result: ''
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(['userInfo'])
|
||
},
|
||
onLoad(e){
|
||
this.$http.get('/api/common/init?lang='+this.$i18n.locale).then(res => {
|
||
this.qrcode = res.data.client_download_url;
|
||
});
|
||
},
|
||
//第一次加载
|
||
onShow(e) {
|
||
this.$http.get('/api/team/index?lang='+this.$i18n.locale).then(res => {
|
||
if(res.code == 0){
|
||
this.invite_code = res.data.user.invite_code;
|
||
}
|
||
});
|
||
},
|
||
methods: {
|
||
copy() {
|
||
this.$copyText(this.qrcode).then(res => {
|
||
uni.showToast({title: '复制成功', icon: 'none'});
|
||
});
|
||
},
|
||
qrResult(e) {
|
||
this.result = e;
|
||
},
|
||
// 创建海报
|
||
createPoster() {
|
||
return new Promise((resolve, reject) => {
|
||
if (this.posterImgs[this.swiperIndex]) {
|
||
resolve(this.posterImgs[this.swiperIndex]);
|
||
} else {
|
||
uni.showLoading({
|
||
title: 'Poster generation in progress'
|
||
});
|
||
const ctx = uni.createCanvasContext('poster');
|
||
ctx.setFillStyle('#2651ef');
|
||
ctx.fillRect(0, 0, 375, 667);
|
||
ctx.drawImage(this.promoteBgImgs[this.swiperIndex], 0, 0, 375, 360);
|
||
ctx.drawImage(this.result, 108, 440, 160, 160);
|
||
// 绘制圆角矩形的参数
|
||
var x = 80; // 矩形左上角的x坐标
|
||
var y = 370; // 矩形左上角的y坐标
|
||
var width = 220; // 矩形的宽度
|
||
var height = 50; // 矩形的高度
|
||
var radius = 25; // 圆角半径
|
||
var fillColor = '#000'; // 填充颜色
|
||
var strokeColor = '#000'; // 边框颜色
|
||
// 开始绘制路径
|
||
ctx.beginPath();
|
||
ctx.moveTo(x + radius, y); // 起始点
|
||
ctx.arcTo(x + width, y, x + width, y + height, radius); // 右上圆角
|
||
ctx.lineTo(x + width, y + height - radius);
|
||
ctx.arcTo(x + width, y + height, x, y + height, radius); // 右下圆角
|
||
ctx.lineTo(x + radius, y + height);
|
||
ctx.arcTo(x, y + height, x, y, radius); // 左下圆角
|
||
ctx.lineTo(x, y + radius);
|
||
ctx.arcTo(x, y, x + width, y, radius); // 左上圆角
|
||
ctx.closePath();
|
||
// 设置填充颜色并填充
|
||
ctx.setFillStyle(fillColor);
|
||
ctx.fill();
|
||
// 设置边框颜色并描边
|
||
ctx.setStrokeStyle(strokeColor);
|
||
ctx.stroke();
|
||
ctx.setFontSize(18);
|
||
ctx.setFillStyle('#fff');
|
||
ctx.fillText("CODE：" + this.invite_code, 100, 402);
|
||
ctx.draw(true, () => {
|
||
uni.canvasToTempFilePath({
|
||
canvasId: 'poster',
|
||
width: 375,
|
||
height: 667,
|
||
success: res => {
|
||
if(this.posterImgs[this.swiperIndex]){
|
||
this.posterImgs[this.swiperIndex].temporary = res.tempFilePath;
|
||
}else{
|
||
this.posterImgs[this.swiperIndex] = {};
|
||
this.posterImgs[this.swiperIndex].temporary = res.tempFilePath;
|
||
}
|
||
resolve(res.tempFilePath);
|
||
},
|
||
fail: () => {
|
||
uni.hideLoading();
|
||
reject();
|
||
}
|
||
});
|
||
});
|
||
}
|
||
});
|
||
},
|
||
// 保存图片
|
||
async onSaveImg() {
|
||
let imgUrl = "";
|
||
if(this.posterImgs[this.swiperIndex] && this.posterImgs[this.swiperIndex].temporary){
|
||
imgUrl = await this.posterImgs[this.swiperIndex].temporary;
|
||
}else{
|
||
imgUrl = await this.createPoster();
|
||
}
|
||
// #ifdef H5
|
||
this.h5SaveImg = imgUrl;
|
||
uni.hideLoading();
|
||
// #endif
|
||
// #ifdef MP-WEIXIN
|
||
uni.showLoading({
|
||
title: 'Poster download in progress'
|
||
});
|
||
if (settingWritePhotosAlbum) {
|
||
uni.getSetting({
|
||
success: res => {
|
||
if (res.authSetting['scope.writePhotosAlbum']) {
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: imgUrl,
|
||
success: () => {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: 'Successfully saved'
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
uni.showModal({
|
||
title: 'prompt',
|
||
content: 'Please first open the “Save Album” permission on the settings page',
|
||
confirmText: 'Go set it up',
|
||
cancelText: 'cancel',
|
||
success: data => {
|
||
if (data.confirm) {
|
||
uni.hideLoading();
|
||
uni.openSetting();
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
settingWritePhotosAlbum = true;
|
||
uni.authorize({
|
||
scope: 'scope.writePhotosAlbum',
|
||
success: () => {
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: imgUrl,
|
||
success: () => {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '保存成功'
|
||
});
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
uni.showLoading({
|
||
title: 'Poster download in progress'
|
||
});
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: imgUrl,
|
||
success: () => {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: 'Successfully saved'
|
||
});
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.poster_canvas {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
top: -100vh;
|
||
left: 0rpx;
|
||
}
|
||
.page{min-height: 100vh;position: relative; background-color: #2A54FF;}
|
||
.minebg{
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
background: url('/static/images/12.png') #2651ef;
|
||
background-size: 100%;
|
||
background-repeat: repeat-x;
|
||
font-family: Poppins, Poppins;
|
||
padding: 94% 0px 0px 0px;
|
||
}
|
||
.minebg .v1{
|
||
margin: auto; width: 60%; border-radius: 20px;
|
||
background-color: #000; font-size: 36rpx;
|
||
height: 50px; color: #fff;
|
||
text-align: center; line-height: 50px;
|
||
}
|
||
.minebg .v1 .i{
|
||
width: 40rpx; height: 40rpx; margin-right: 30rpx; float: right; margin-top: 30rpx;
|
||
}
|
||
.minebg .b1{
|
||
background-color: #000; color: #fff; float: left; border-radius: 20px;
|
||
width: 47%;
|
||
}
|
||
.minebg .b2{
|
||
background-color: #fff; color: #000; float: left;
|
||
border-radius: 20px; margin-left: 6%; width: 47%;
|
||
}
|
||
.h5_press_save {
|
||
background-color: #000;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
z-index: 100;
|
||
image {
|
||
width: 100%;
|
||
}
|
||
.download {
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
background-color: rgba(0,0,0,0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
position: absolute;
|
||
padding: 0rpx 30rpx;
|
||
border-radius: 40rpx;
|
||
bottom: 20rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
&:before {
|
||
content: '';
|
||
@include bis('@/static/demo/icon_download.png');
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|