Merge branch 'gaohao' of https://e.coding.net/g-cphe0354/duanju/video_app into test
This commit is contained in:
GaoHao
commit
72347c4c7b
|
|
@ -163,7 +163,7 @@
|
||||||
q[0] = C_Q;
|
q[0] = C_Q;
|
||||||
}
|
}
|
||||||
_this.canvasW = C_W;
|
_this.canvasW = C_W;
|
||||||
_this.canvasH = r[1] + q[1] + 25;
|
_this.canvasH = r[1];
|
||||||
_this.ctx.setFillStyle(_this.CanvasBg); //canvas背景颜色
|
_this.ctx.setFillStyle(_this.CanvasBg); //canvas背景颜色
|
||||||
_this.ctx.fillRect(0, 0, C_W, _this.canvasH); //canvas画布大小
|
_this.ctx.fillRect(0, 0, C_W, _this.canvasH); //canvas画布大小
|
||||||
|
|
||||||
|
|
@ -182,7 +182,7 @@
|
||||||
_this.ctx.setFontSize(uni.upx2px(36)); //设置标题字体大小
|
_this.ctx.setFontSize(uni.upx2px(36)); //设置标题字体大小
|
||||||
_this.Title = _this.Title.substring(0, 20)
|
_this.Title = _this.Title.substring(0, 20)
|
||||||
//#endif
|
//#endif
|
||||||
_this.ctx.setFillStyle(_this.TitleColor); //设置标题文本颜色
|
// _this.ctx.setFillStyle(_this.TitleColor); //设置标题文本颜色
|
||||||
let _strLastIndex = 0; //每次开始截取的字符串的索引
|
let _strLastIndex = 0; //每次开始截取的字符串的索引
|
||||||
let _strHeight = r[1] + C_P * 2 + 10; //绘制字体距离canvas顶部的初始高度
|
let _strHeight = r[1] + C_P * 2 + 10; //绘制字体距离canvas顶部的初始高度
|
||||||
let _num = 1;
|
let _num = 1;
|
||||||
|
|
@ -239,22 +239,17 @@
|
||||||
|
|
||||||
//添加二维码
|
//添加二维码
|
||||||
_strHeight += uni.upx2px(20);
|
_strHeight += uni.upx2px(20);
|
||||||
let toTop = uni.upx2px(20);
|
let toTop = uni.upx2px(103);
|
||||||
// _this.ctx.drawImage(_QrCode.path, r[0] - q[0] + C_P, _strHeight, q[0], q[1]);
|
_this.ctx.drawImage(_QrCode.path, r[0] - q[0] + C_P - uni.upx2px(201), _this.canvasH - q[1] - toTop, 71, 71);
|
||||||
_this.ctx.drawImage(_QrCode.path, r[0] - q[0] + C_P - uni.upx2px(20), _this.canvasH - q[1] - toTop, q[
|
|
||||||
0], q[1]);
|
|
||||||
//添加二维码 end
|
//添加二维码 end
|
||||||
|
|
||||||
//添加推荐人与描述
|
//添加推荐人与描述
|
||||||
_this.ctx.setFillStyle(_this.TitleColor);
|
// _this.ctx.setFillStyle(_this.TitleColor);
|
||||||
_this.ctx.setFontSize(uni.upx2px(30));
|
// _this.ctx.setFontSize(uni.upx2px(30));
|
||||||
// _this.ctx.fillText(_this.Referrer, C_P, _strHeight + q[1] / 2);
|
// _this.ctx.fillText(_this.Referrer, C_P + uni.upx2px(20), _this.canvasH - q[1] - toTop + q[1] / 2);
|
||||||
_this.ctx.fillText(_this.Referrer, C_P + uni.upx2px(20), _this.canvasH - q[1] - toTop + q[1] / 2);
|
// _this.ctx.setFillStyle(_this.OriginalColor);
|
||||||
_this.ctx.setFillStyle(_this.OriginalColor);
|
// _this.ctx.setFontSize(uni.upx2px(24));
|
||||||
_this.ctx.setFontSize(uni.upx2px(24));
|
// _this.ctx.fillText(_this.ViewDetails, C_P + uni.upx2px(20), _this.canvasH - q[1] - toTop + q[1] / 2 + 20);
|
||||||
// _this.ctx.fillText(_this.ViewDetails, C_P, _strHeight + q[1] / 2 + 20);
|
|
||||||
_this.ctx.fillText(_this.ViewDetails, C_P + uni.upx2px(20), _this.canvasH - q[1] - toTop + q[1] / 2 +
|
|
||||||
20);
|
|
||||||
//添加推荐人与描述 end
|
//添加推荐人与描述 end
|
||||||
//延迟后渲染至canvas上
|
//延迟后渲染至canvas上
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,768 @@
|
||||||
|
<!-- 我的邀请 -->
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<u-image src="/me/static/invite/juxing.png" alt="" width="100%" mode="widthFix"></u-image>
|
||||||
|
<view class="padding" style="position: relative;height: 360rpx;">
|
||||||
|
<u-image src="@/me/static/invite/fenxiang.png" alt="" width="100%" height="100%"></u-image>
|
||||||
|
<view class="text-center padding-top yaoqing">
|
||||||
|
<view class="margin-top-xl margin-bottom-sm padding-top-sm text-xxl text-red text-bold">
|
||||||
|
{{invitationCode}}
|
||||||
|
</view>
|
||||||
|
<!-- #ifdef H5 -->
|
||||||
|
<u-button @tap="sharurl" :custom-style="customStyle" :hair-line="false" shape="circle" size="mini"
|
||||||
|
:ripple="true">一键分享</u-button>
|
||||||
|
<!-- #endif -->
|
||||||
|
|
||||||
|
<!-- #ifdef APP -->
|
||||||
|
<u-button @tap="sharurl" :custom-style="customStyle" :hair-line="false" shape="circle" size="mini"
|
||||||
|
:ripple="true">一键分享</u-button>
|
||||||
|
<!-- #endif -->
|
||||||
|
|
||||||
|
<!-- #ifdef MP-TOUTIAO || MP-KUAISHOU -->
|
||||||
|
<u-button open-type="share" :custom-style="customStyle" :hair-line="false" shape="circle" size="mini"
|
||||||
|
:ripple="true">一键分享</u-button>
|
||||||
|
<!-- #endif -->
|
||||||
|
|
||||||
|
<!-- #ifdef MP-WEIXIN -->
|
||||||
|
<u-button open-type="share" :custom-style="customStyle" :hair-line="false" shape="circle" size="mini"
|
||||||
|
:ripple="true">一键分享</u-button>
|
||||||
|
<!-- #endif -->
|
||||||
|
<!-- #ifndef MP-KUAISHOU -->
|
||||||
|
<u-button style="margin-left: 50rpx;" @click.stop="onSaveImg()" :custom-style="customStyle"
|
||||||
|
:hair-line="false" shape="circle" size="mini" :ripple="true">保存海报</u-button>
|
||||||
|
<!-- #endif -->
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="margin padding bg-white radius" v-if="inviterList.length">
|
||||||
|
<view class="flex justify-between" style="line-height: 80rpx;" v-for="(item, index) in inviterList"
|
||||||
|
:key='index'>
|
||||||
|
<view class="flex">
|
||||||
|
<!-- <u-image :src="item.avatar == null?avatar:item.avatar" width="40px" mode="widthFix"></u-image> -->
|
||||||
|
<image src="../static/invite/5.png" style="width: 80rpx;" mode="widthFix"></image>
|
||||||
|
<text class="margin-left-sm">{{item.userName}}</text>
|
||||||
|
</view>
|
||||||
|
<view style="width: 160rpx;">
|
||||||
|
<text>获得</text>
|
||||||
|
<text class="margin-left-xs text-red">{{item.money}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="padding" style="position: relative;height: 160px;">
|
||||||
|
<u-image src="@/me/static/invite/yaoqing.png" alt="" width="100%" height="100%"></u-image>
|
||||||
|
<view class="text-center padding-top flex justify-center flex-direction zhanji">
|
||||||
|
<view class="flex justify-around margin-top-sm">
|
||||||
|
<view>
|
||||||
|
<view class="margin-bottom-sm">已邀请</view>
|
||||||
|
<view class="text-red"><text class="text-bold u-font-18">{{inviterNumber}}</text>人</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view class="margin-bottom-sm">累计收益</view>
|
||||||
|
<view class="text-red"><text class="text-bold u-font-18">{{cumulativeRevenue}}</text>元</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view class="margin-bottom-sm">已提现</view>
|
||||||
|
<view class="text-red">¥<text class="text-bold u-font-18">{{withdrawn}}</text></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="padding" style="position: relative;height: 250rpx;">
|
||||||
|
<u-image src="@/me/static/invite/jiqiao.png" alt="" width="100%" height="100%"></u-image>
|
||||||
|
<view class="padding-top jiqiao" style="">
|
||||||
|
<view class="padding-top-xl padding-lr padding-bottom" style="line-height: 48rpx;">
|
||||||
|
<block v-if="price2==0">
|
||||||
|
<view class="flex padding-sm" style="background-color: #ffffff;">
|
||||||
|
<text class="cuIcon-title text-yellow"></text>
|
||||||
|
<view>邀请好友可得开通会员及消费金额 {{price}}%的佣金奖励</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
<block v-else>
|
||||||
|
<view class="flex padding-sm" style="background-color: #ffffff;">
|
||||||
|
<text class="cuIcon-title text-yellow"></text>
|
||||||
|
<view>可得一级好友开通会员及消费金额 {{price}}%的佣金奖励</view>
|
||||||
|
</view>
|
||||||
|
<view class="flex padding-sm" style="background-color: #ffffff;">
|
||||||
|
<text class="cuIcon-title text-yellow"></text>
|
||||||
|
<view>可得二级好友开通会员及消费金额 {{price2}}%的佣金奖励</view>
|
||||||
|
</view>
|
||||||
|
</block>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<tki-qrcode ref="qrcode" :val="erweima" :size="200" background="#fff" foreground="#000" pdground="#000"
|
||||||
|
:onval="true" :loadMake="true" @result="qrR" :show="false"></tki-qrcode>
|
||||||
|
<view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''" @tap="hideModal">
|
||||||
|
<view class="cu-dialog" v-if="bgImg && erweimapath && haibaoShow" @tap="hideModal">
|
||||||
|
<view class="bg-img">
|
||||||
|
<wm-poster @success="posterSuccess" @successH5="successH5" :imgSrc="bgImg"
|
||||||
|
:Referrer="'我的邀请码:'+invitationCode" :QrSrc="erweimapath" :LineType="false"></wm-poster>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let settingWritePhotosAlbum = false;
|
||||||
|
import tkiQrcode from '../../components/tki-qrcode/tki-qrcode.vue';
|
||||||
|
import wmPoster from '../components/wm-poster/wm-posterorders.vue';
|
||||||
|
import config from '../../common/config.js'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
tkiQrcode,
|
||||||
|
wmPoster
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
erweimapath: '',
|
||||||
|
poster: {},
|
||||||
|
qrShow: false,
|
||||||
|
haibaoImg: null,
|
||||||
|
haibaoShow: false,
|
||||||
|
modalName: '',
|
||||||
|
canvasId: 'default_PosterCanvasId',
|
||||||
|
avatar: '../../static/images/logo.png',
|
||||||
|
customStyle: {
|
||||||
|
background: '#FFE0E0',
|
||||||
|
border: '0',
|
||||||
|
color: 'rgb(254,30,35)',
|
||||||
|
fontSize: '12px',
|
||||||
|
fontWeight: '500',
|
||||||
|
padding: '15px 20px',
|
||||||
|
},
|
||||||
|
page: 1,
|
||||||
|
limit: 10,
|
||||||
|
inviterName: '', //邀请码
|
||||||
|
cumulativeRevenue: '', //累计收益
|
||||||
|
inviterNumber: '', //邀请人数
|
||||||
|
withdrawn: '', //已提现
|
||||||
|
inviterList: [],
|
||||||
|
erweima: '',
|
||||||
|
bgImg: '',
|
||||||
|
tuiguang: '',
|
||||||
|
invitationCode: 0,
|
||||||
|
price: 0,
|
||||||
|
price2: 0,
|
||||||
|
h5SaveImg: '',
|
||||||
|
modalName: '',
|
||||||
|
haibaoImgH5: '',
|
||||||
|
qdCode: '', //渠道码
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShareAppMessage(res) {
|
||||||
|
return {
|
||||||
|
path: '/pages/index/index?invitation=' + this.invitationCode + '&qdCode=' + this
|
||||||
|
.qdCode, //这是为了传参 onload(data){let id=data.id;}
|
||||||
|
title: this.tuiguang,
|
||||||
|
imageUrl: this.bgImg
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShareTimeline(res) {
|
||||||
|
return {
|
||||||
|
path: '/pages/index/index?invitation=' + this.invitationCode + '&qdCode=' + this
|
||||||
|
.qdCode, //这是为了传参 onload(data){let id=data.id;}
|
||||||
|
title: this.tuiguang,
|
||||||
|
imageUrl: this.bgImg
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.getInviter()
|
||||||
|
this.queryInviter()
|
||||||
|
|
||||||
|
this.invitationCode = uni.getStorageSync('invitationCode')
|
||||||
|
this.getUserInfoBl()
|
||||||
|
this.getBgImg()
|
||||||
|
if (uni.getStorageSync('qdCode')) {
|
||||||
|
this.qdCode = uni.getStorageSync('qdCode')
|
||||||
|
}
|
||||||
|
// h5携带邀请码去首页
|
||||||
|
// #ifdef H5
|
||||||
|
this.erweima = config.APIHOST2 + '/?invitation=' + this
|
||||||
|
.invitationCode + '&qdCode=' + this.qdCode
|
||||||
|
// #endif
|
||||||
|
// app直接去app注册页面
|
||||||
|
// #ifdef APP
|
||||||
|
this.erweima = config.APIHOST2 + '/pages/login/registerApp/?invitation=' + this
|
||||||
|
.invitationCode + '&qdCode=' + this.qdCode
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
this.getWxEq()
|
||||||
|
// #endif
|
||||||
|
// #ifdef MP-TOUTIAO
|
||||||
|
this.getTouTiao()
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//获取用户分销比例
|
||||||
|
getUserInfoBl() {
|
||||||
|
this.$Request.getT('/app/user/selectUserById').then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
//一级分销
|
||||||
|
if (res.data.rate) {
|
||||||
|
this.price = (Number(res.data.rate) * 100).toFixed(0)
|
||||||
|
} else {
|
||||||
|
this.price = 0
|
||||||
|
}
|
||||||
|
//二级分销
|
||||||
|
if (res.data.twoRate) {
|
||||||
|
this.price2 = (Number(res.data.twoRate) * 100).toFixed(0)
|
||||||
|
} else {
|
||||||
|
this.price2 = 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//获取头条二维码
|
||||||
|
getTouTiao() {
|
||||||
|
let that = this
|
||||||
|
uni.downloadFile({
|
||||||
|
url: config.APIHOST +
|
||||||
|
'/app/invite/dyCreateQr?invitationCode=' + that
|
||||||
|
.invitationCode + ',' + that.qdCode + '&page=/pages/index/index',
|
||||||
|
success: (res) => {
|
||||||
|
console.log(res)
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
that.erweimapath = res.tempFilePath
|
||||||
|
} else {
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: '海报制作失败，图片下载失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
console.log(err)
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: '海报制作失败，图片下载失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//获取微信二维码
|
||||||
|
getWxEq() {
|
||||||
|
let that = this
|
||||||
|
uni.downloadFile({
|
||||||
|
url: config.APIHOST +
|
||||||
|
'/app/invite/mpCreateQr?invitationCode=' + that
|
||||||
|
.invitationCode + ',' + that.qdCode,
|
||||||
|
success: (res) => {
|
||||||
|
console.log(res)
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
that.erweimapath = res.tempFilePath
|
||||||
|
} else {
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: '海报制作失败，图片下载失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
console.log(err)
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: '海报制作失败，图片下载失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
sharurl() {
|
||||||
|
let that = this;
|
||||||
|
uni.showModal({
|
||||||
|
title: '链接推广',
|
||||||
|
content: this.tuiguang + this.erweima,
|
||||||
|
showCancel: true,
|
||||||
|
cancelText: '关闭',
|
||||||
|
confirmText: '一键复制',
|
||||||
|
success: res => {
|
||||||
|
if (res.confirm) {
|
||||||
|
uni.setClipboardData({
|
||||||
|
data: this.tuiguang + this.erweima,
|
||||||
|
success: function() {
|
||||||
|
console.log('success');
|
||||||
|
uni.showToast({
|
||||||
|
title: '复制成功',
|
||||||
|
duration: 1000,
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
posterSuccess(haibaoImg) {
|
||||||
|
this.haibaoImg = haibaoImg;
|
||||||
|
this.modalName = 'Image';
|
||||||
|
uni.hideLoading();
|
||||||
|
},
|
||||||
|
successH5(haibaoImg) {
|
||||||
|
this.haibaoImgH5 = haibaoImg
|
||||||
|
uni.previewImage({
|
||||||
|
urls: [haibaoImg],
|
||||||
|
current: 1,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
showModal() {
|
||||||
|
// #ifndef H5
|
||||||
|
if (!this.haibaoImg) {
|
||||||
|
this.haibaoShow = true;
|
||||||
|
uni.showLoading({
|
||||||
|
title: '海报生成中'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.modalName = 'Image';
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
// #ifdef H5
|
||||||
|
let ua = navigator.userAgent.toLowerCase();
|
||||||
|
if (ua.indexOf('micromessenger') !== -1) {
|
||||||
|
//微信浏览器
|
||||||
|
if (!this.haibaoImg) {
|
||||||
|
this.haibaoShow = true;
|
||||||
|
uni.showLoading({
|
||||||
|
title: '海报生成中'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.modalName = 'Image';
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (!this.haibaoImgH5) {
|
||||||
|
this.haibaoShow = true;
|
||||||
|
uni.showLoading({
|
||||||
|
title: '海报生成中'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uni.previewImage({
|
||||||
|
urls: [this.haibaoImgH5],
|
||||||
|
current: 1,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
hideModal() {
|
||||||
|
this.modalName = null;
|
||||||
|
},
|
||||||
|
qrR(path) {
|
||||||
|
this.erweimapath = path;
|
||||||
|
},
|
||||||
|
getInviter() {
|
||||||
|
let data = {
|
||||||
|
page: this.page,
|
||||||
|
limit: this.limit
|
||||||
|
}
|
||||||
|
this.$u.api.inviter(data).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.inviterList = res.data.list
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: res.msg,
|
||||||
|
duration: 1000,
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
queryInviter() {
|
||||||
|
this.$u.api.queryInviter().then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.cumulativeRevenue = res.data.inviteMoney.moneySum //累计收益
|
||||||
|
this.inviterNumber = res.data.inviteCount //邀请人数
|
||||||
|
this.withdrawn = res.data.inviteMoney.cashOut //已提现
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: res.msg,
|
||||||
|
duration: 1000,
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
goNav(e) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: e
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
//获取背景图
|
||||||
|
getBgImg() {
|
||||||
|
this.$u.get('app/banner/selectBannerList?classify=5').then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.bgImg = res.data[0].imageUrl
|
||||||
|
this.tuiguang = res.data[0].describes
|
||||||
|
console.log(this.bgImg)
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: res.msg,
|
||||||
|
duration: 1000,
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
//生成h5海报
|
||||||
|
createH5Poster() {
|
||||||
|
let that = this;
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '海报生成中'
|
||||||
|
});
|
||||||
|
const ctx = uni.createCanvasContext('poster');
|
||||||
|
ctx.fillRect(0, 0, 375, 673);
|
||||||
|
ctx.setFillStyle("#FFF");
|
||||||
|
ctx.fillRect(0, 0, 375, 673);
|
||||||
|
let imgUrl = that.bgImg;
|
||||||
|
uni.downloadFile({
|
||||||
|
url: imgUrl,
|
||||||
|
success: (res) => {
|
||||||
|
console.log(res, '***************')
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
uni.downloadFile({
|
||||||
|
url: that.erweima,
|
||||||
|
success: (res2) => {
|
||||||
|
console.log(res2)
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
ctx.drawImage(res.tempFilePath, 0, 0, 375,
|
||||||
|
500);
|
||||||
|
// 长按识别二维码访问
|
||||||
|
let textTop = 0;
|
||||||
|
ctx.setFontSize(19);
|
||||||
|
ctx.setFillStyle('#333');
|
||||||
|
ctx.fillText("长按识别图中二维码", 17, textTop + 590);
|
||||||
|
// 二维码
|
||||||
|
ctx.drawImage(res2.tempFilePath, 238, textTop +
|
||||||
|
526, 120, 120);
|
||||||
|
ctx.draw(true, () => {
|
||||||
|
// canvas画布转成图片并返回图片地址
|
||||||
|
uni.canvasToTempFilePath({
|
||||||
|
canvasId: 'poster',
|
||||||
|
width: 375,
|
||||||
|
height: 673,
|
||||||
|
success: (res) => {
|
||||||
|
console.log(
|
||||||
|
"海报制作成功！"
|
||||||
|
);
|
||||||
|
resolve(res
|
||||||
|
.tempFilePath
|
||||||
|
);
|
||||||
|
},
|
||||||
|
fail: () => {
|
||||||
|
uni
|
||||||
|
.hideLoading();
|
||||||
|
reject();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: '海报制作失败，图片下载失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
console.log(err)
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: '海报制作失败，图片下载失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
complete: com => {
|
||||||
|
console.log(com)
|
||||||
|
uni.showToast({
|
||||||
|
title: com,
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: '海报制作失败，图片下载失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
// that.yu.toast(err)
|
||||||
|
console.log(err)
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: '海报制作失败，图片下载失败',
|
||||||
|
icon: 'none',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
//生成海报
|
||||||
|
createPoster() {
|
||||||
|
let that = this;
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '海报生成中'
|
||||||
|
});
|
||||||
|
const ctx = uni.createCanvasContext('poster');
|
||||||
|
ctx.fillRect(0, 0, 375, 673);
|
||||||
|
ctx.setFillStyle("#FFF");
|
||||||
|
ctx.fillRect(0, 0, 375, 673);
|
||||||
|
let imgUrl = that.bgImg;
|
||||||
|
uni.downloadFile({
|
||||||
|
url: imgUrl,
|
||||||
|
success: (res) => {
|
||||||
|
console.log(res, '***************')
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
uni.downloadFile({
|
||||||
|
url: config.APIHOST +
|
||||||
|
'/app/invite/mpCreateQr?invitationCode=' + that
|
||||||
|
.invitationCode,
|
||||||
|
// url: 'https://jiaoyu.xianmxkj.com/sqx_fast/app/invite/mpCreateQr?invitationCode=' +
|
||||||
|
// that.invitationCode,
|
||||||
|
success: (res2) => {
|
||||||
|
console.log(res2)
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
ctx.drawImage(res.tempFilePath, 0, 0, 375,
|
||||||
|
500);
|
||||||
|
// 长按识别二维码访问
|
||||||
|
let textTop = 0;
|
||||||
|
ctx.setFontSize(19);
|
||||||
|
ctx.setFillStyle('#333');
|
||||||
|
ctx.fillText("长按识别图中二维码", 17, textTop + 590);
|
||||||
|
// 二维码
|
||||||
|
ctx.drawImage(res2.tempFilePath, 238, textTop +
|
||||||
|
526, 120, 120);
|
||||||
|
ctx.draw(true, () => {
|
||||||
|
// canvas画布转成图片并返回图片地址
|
||||||
|
uni.canvasToTempFilePath({
|
||||||
|
canvasId: 'poster',
|
||||||
|
width: 375,
|
||||||
|
height: 673,
|
||||||
|
success: (res) => {
|
||||||
|
console.log(
|
||||||
|
"海报制作成功！"
|
||||||
|
);
|
||||||
|
resolve(res
|
||||||
|
.tempFilePath
|
||||||
|
);
|
||||||
|
},
|
||||||
|
fail: () => {
|
||||||
|
uni
|
||||||
|
.hideLoading();
|
||||||
|
reject();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: '海报制作失败，图片下载失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
console.log(err)
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: '海报制作失败，图片下载失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
complete: com => {
|
||||||
|
console.log(com)
|
||||||
|
uni.showToast({
|
||||||
|
title: com,
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: '海报制作失败，图片下载失败',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
// that.yu.toast(err)
|
||||||
|
console.log(err)
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: '海报制作失败，图片下载失败',
|
||||||
|
icon: 'none',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 保存图片
|
||||||
|
async onSaveImg() {
|
||||||
|
this.showModal();
|
||||||
|
return
|
||||||
|
// #ifndef MP-WEIXIN
|
||||||
|
this.showModal();
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
let imgUrl = await this.createPoster();
|
||||||
|
uni.showLoading({
|
||||||
|
title: '海报下载中'
|
||||||
|
});
|
||||||
|
if (settingWritePhotosAlbum) {
|
||||||
|
uni.getSetting({
|
||||||
|
success: res => {
|
||||||
|
if (res.authSetting['scope.writePhotosAlbum']) {
|
||||||
|
uni.saveImageToPhotosAlbum({
|
||||||
|
filePath: imgUrl,
|
||||||
|
success: () => {
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: '保存成功'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uni.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: '请先在设置页面打开“保存相册”使用权限',
|
||||||
|
confirmText: '去设置',
|
||||||
|
cancelText: '算了',
|
||||||
|
success: data => {
|
||||||
|
if (data.confirm) {
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.openSetting();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
uni.hideLoading();
|
||||||
|
settingWritePhotosAlbum = true;
|
||||||
|
uni.authorize({
|
||||||
|
scope: 'scope.writePhotosAlbum',
|
||||||
|
success: () => {
|
||||||
|
uni.saveImageToPhotosAlbum({
|
||||||
|
filePath: imgUrl,
|
||||||
|
success: () => {
|
||||||
|
uni.hideLoading();
|
||||||
|
uni.showToast({
|
||||||
|
title: '保存成功'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1110;
|
||||||
|
opacity: 0;
|
||||||
|
outline: 0;
|
||||||
|
text-align: center;
|
||||||
|
-ms-transform: scale(1.185);
|
||||||
|
transform: scale(1.185);
|
||||||
|
backface-visibility: hidden;
|
||||||
|
perspective: 2000upx;
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
|
transition: all 0.3s ease-in-out 0s;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.show {
|
||||||
|
opacity: 1;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
-ms-transform: scale(1);
|
||||||
|
transform: scale(1);
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
page {
|
||||||
|
background: #E0EFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poster_canvas {
|
||||||
|
width: 750upx;
|
||||||
|
height: 1334upx;
|
||||||
|
position: fixed;
|
||||||
|
top: -10000upx;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yaoqing {
|
||||||
|
width: 100%;
|
||||||
|
height: 136px;
|
||||||
|
position: absolute;
|
||||||
|
margin: auto;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
/* background-image: url('@/me/static/invite/fenxiang.png'); */
|
||||||
|
/* background-size: 100%; */
|
||||||
|
/* background-repeat: no-repeat; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.zhanji {
|
||||||
|
width: 100%;
|
||||||
|
height: 119px;
|
||||||
|
position: absolute;
|
||||||
|
margin: auto;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
/* background-image: url('@/me/static/invite/yaoqing.png'); */
|
||||||
|
/* background-size: 100%; */
|
||||||
|
/* background-repeat: no-repeat; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.jiqiao {
|
||||||
|
width: 100%;
|
||||||
|
height: 160rpx;
|
||||||
|
position: absolute;
|
||||||
|
margin: auto;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
/* background-image: url('@/me/static/invite/jiqiao.png');
|
||||||
|
background-size: 100%;
|
||||||
|
background-repeat: no-repeat; */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -543,10 +543,9 @@
|
||||||
let textTop = 0;
|
let textTop = 0;
|
||||||
ctx.setFontSize(19);
|
ctx.setFontSize(19);
|
||||||
ctx.setFillStyle('#333');
|
ctx.setFillStyle('#333');
|
||||||
ctx.fillText("长按识别图中二维码", 17, textTop + 590);
|
// ctx.fillText("长按识别图中二维码", 17, textTop + 590);
|
||||||
// 二维码
|
// 二维码
|
||||||
ctx.drawImage(res2.tempFilePath, 238, textTop +
|
// ctx.drawImage(res2.tempFilePath, 238, textTop + 526, 120, 120);
|
||||||
526, 120, 120);
|
|
||||||
ctx.draw(true, () => {
|
ctx.draw(true, () => {
|
||||||
// canvas画布转成图片并返回图片地址
|
// canvas画布转成图片并返回图片地址
|
||||||
uni.canvasToTempFilePath({
|
uni.canvasToTempFilePath({
|
||||||
|
|
|
||||||
|
|
@ -420,7 +420,10 @@
|
||||||
}
|
}
|
||||||
.input{
|
.input{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 84rpx;
|
||||||
|
line-height: 84rpx;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
align-items: center;
|
||||||
padding: 22rpx 32rpx 22rpx 24rpx;
|
padding: 22rpx 32rpx 22rpx 24rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -416,7 +416,10 @@
|
||||||
}
|
}
|
||||||
.input{
|
.input{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 84rpx;
|
||||||
|
line-height: 84rpx;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
align-items: center;
|
||||||
padding: 22rpx 32rpx 22rpx 24rpx;
|
padding: 22rpx 32rpx 22rpx 24rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Loading…
Reference in New Issue