You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
363 lines
9.3 KiB
363 lines
9.3 KiB
<template>
|
|
<view class="pages">
|
|
<!-- :style="'background-image: url('+img_url+'promotion/bg.png)'" -->
|
|
<!-- 自定义导航栏 -->
|
|
<cover-view class="barHeight" :style="[navigatorStyles]">
|
|
<view class="left_back" @click="toback">
|
|
<u-icon name="arrow-left" color="#fff" size="45"></u-icon>
|
|
</view>
|
|
<text class="title">我的推广</text>
|
|
</cover-view>
|
|
<!-- 邀请列表 -->
|
|
<cover-view class="invite_list" @click="toInviteList" :style="[inviteListStyle]">邀请列表</cover-view>
|
|
|
|
|
|
|
|
<!-- <text class="main_title">推荐好友 </text>
|
|
<text class="alt">注册即得消费金</text>
|
|
<view class="card">
|
|
<text class="card_title">您的邀请二维码</text>
|
|
<view class="card_num">
|
|
<text v-for="(item,index) in userInfo.invitationCode2" :key="index">{{item}}</text>
|
|
</view>
|
|
<image class="card_img" :src="img_erweima+erweima" mode=""></image>
|
|
</view> -->
|
|
|
|
<view class="">
|
|
<canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="myCanvas" id="myCanvas"></canvas>
|
|
</view>
|
|
<cover-view class="btn_box align-center justify-center">
|
|
<button class="save_btn" @click="save">保存海报</button>
|
|
<button class="share_btn" data-name="shareBtn" open-type="share" >立即邀请</button>
|
|
</cover-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import config from "@/utils/js/config.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
img_url: config.img_url,
|
|
img_erweima: 'https://medicine.xzaiyp.top/',
|
|
sumHeight: null,
|
|
erweima: '',
|
|
userInfo: {},
|
|
menuButtonRect: {},
|
|
canvasW:0, // 画布宽
|
|
canvasH:0, // 画布高
|
|
SystemInfo:null, // 设备信息
|
|
goodsImg: {}, // 商品主图
|
|
ewmImg:{} // 二维码图片
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.menuButtonRect = wx.getMenuButtonBoundingClientRect()
|
|
this.userInfo = uni.getStorageSync("__user_info");
|
|
if(this.userInfo) {
|
|
this.userInfo.invitationCode2 = this.userInfo.invitationCode.split('');
|
|
}
|
|
this.getExtension();
|
|
},
|
|
computed: {
|
|
navigatorStyles () {
|
|
return {
|
|
top: this.menuButtonRect.top + 'px',
|
|
height: this.menuButtonRect.height + 'px'
|
|
}
|
|
},
|
|
inviteListStyle () {
|
|
return {
|
|
top: this.menuButtonRect.top + this.menuButtonRect.height + 10 + 'px',
|
|
}
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '邀请好友',
|
|
path: '/pages/login/login?shareId='+this.userInfo.invitationCode,
|
|
imageUrl: this.img_erweima+ this.erweima,
|
|
success: function (res) {
|
|
console.log(res)
|
|
},
|
|
fail: function (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 返回
|
|
toback() {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
},
|
|
getImageInfo(image) {
|
|
return new Promise((req, rej) => {
|
|
uni.getImageInfo({
|
|
src: image,
|
|
success: function(res) {
|
|
req(res)
|
|
},
|
|
});
|
|
})
|
|
},
|
|
// 获取二维码
|
|
getExtension() {
|
|
uni.showLoading()
|
|
this.$api('getExtension').then(res => {
|
|
let { code, result, message} = res;
|
|
if(code == 200) {
|
|
console.log(result);
|
|
this.erweima = result.url;
|
|
this.test()
|
|
}else {
|
|
this.$Toast(message);
|
|
}
|
|
}).catch(err => {
|
|
uni.hideLoading()
|
|
this.$Toast(err.message)
|
|
})
|
|
},
|
|
async test () {
|
|
this.SystemInfo = uni.getSystemInfoSync()
|
|
this.goodsImg = await this.getImageInfo(this.img_url+'promotion/bg.png');
|
|
this.ewmImg = await this.getImageInfo(this.img_erweima+this.erweima);
|
|
this.canvasW = this.SystemInfo.windowWidth; // 画布宽度
|
|
this.canvasH = this.SystemInfo.windowHeight // 画布高度
|
|
// 如果主图，二维码图片，设备信息都获取成功，开始绘制海报，这里需要用setTimeout延时绘制，否则可能会出现图片不显示。
|
|
if(this.goodsImg.errMsg == 'getImageInfo:ok' && this.ewmImg.errMsg == 'getImageInfo:ok' && this.SystemInfo){
|
|
setTimeout(()=>{
|
|
var ctx = uni.createCanvasContext('myCanvas', this);
|
|
|
|
// 绘制商品主图，二维码
|
|
ctx.drawImage(this.goodsImg.path, 0, 0, this.canvasW, this.canvasH) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
|
|
ctx.drawImage(this.ewmImg.path, this.canvasW / 2 - uni.upx2px(430 / 2), this.canvasH * .55, uni.upx2px(430), uni.upx2px(430)) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度,二维码的宽,高)
|
|
|
|
ctx.setTextAlign('center')
|
|
ctx.setFillStyle('#fff') // 颜色
|
|
ctx.font = 'normal bold 40px Arial'
|
|
ctx.fillText('推荐好友', this.canvasW / 2, this.canvasH * .18)
|
|
|
|
|
|
ctx.setTextAlign('center')
|
|
ctx.setFillStyle('#fff') // 颜色
|
|
ctx.font = 'normal bold 30px Arial'
|
|
ctx.fillText('注册即得消费金', this.canvasW / 2, this.canvasH * .29)
|
|
|
|
for (let i = 0; i < this.userInfo.invitationCode2.length; i++) {
|
|
ctx.setFillStyle('#f5f5f5')
|
|
ctx.fillRect(this.canvasW / 2 - uni.upx2px(430 / 2) - uni.upx2px(70) + this.canvasW * .1 * i, this.canvasH * .48, uni.upx2px(56), uni.upx2px(74))
|
|
|
|
ctx.setTextAlign('center')
|
|
// ctx.setFontSize(16) // 字号
|
|
ctx.setFillStyle('#01AEEA') // 颜色
|
|
ctx.font = 'normal bold 16px Arial'
|
|
ctx.fillText(this.userInfo.invitationCode2[i], this.canvasW / 2 - uni.upx2px(430 / 2) + uni.upx2px(56 / 2) - uni.upx2px(70) + this.canvasW * .1 * i, this.canvasH * .48 + uni.upx2px(50)); // （文字，x，y）
|
|
}
|
|
|
|
ctx.setTextAlign('center')
|
|
// ctx.setFontSize(16) // 字号
|
|
ctx.setFillStyle('#000') // 颜色
|
|
ctx.font = 'normal bold 16px Arial'
|
|
ctx.fillText('您的邀请二维码', this.canvasW / 2, this.canvasH * .42)
|
|
|
|
|
|
ctx.draw(true,(ret)=>{ // draw方法 把以上内容画到 canvas 中。
|
|
console.log(ret)
|
|
uni.hideLoading()
|
|
});
|
|
},1500)
|
|
}else{
|
|
console.log('err')
|
|
}
|
|
},
|
|
// 保存
|
|
save(){
|
|
uni.showLoading({title: '保存中...'});
|
|
uni.canvasToTempFilePath({ // 保存canvas为图片
|
|
canvasId: 'myCanvas',
|
|
quality: 1,
|
|
success: (res) => {
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: res.tempFilePath,
|
|
success: () => {
|
|
uni.hideLoading()
|
|
this.$Toast('海报已保存到相册')
|
|
},
|
|
fail: () => {
|
|
uni.hideLoading()
|
|
this.$Toast('保存失败')
|
|
}
|
|
})
|
|
},
|
|
fail: () => {
|
|
uni.hideLoading()
|
|
this.$Toast('保存失败')
|
|
}
|
|
})
|
|
},
|
|
share(){
|
|
// const that = this
|
|
console.log(this.userInfo.invitationCode,this.img_erweima + this.erweima)
|
|
uni.share({
|
|
provider:"weixin",
|
|
scene: "WXSceneSession",
|
|
type:0,
|
|
href: '/pages/login/login?shareId='+this.userInfo.invitationCode,
|
|
title:"分享",
|
|
imageUrl: this.img_erweima + this.erweima,
|
|
success(res) {
|
|
console.log(res)
|
|
},
|
|
fail(err) {
|
|
console.log(err)
|
|
},
|
|
})
|
|
},
|
|
toInviteList() {
|
|
this.$tools.navigateTo({
|
|
url: '/pagesA/my_other_list/promotion/invitelist/invitelist'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.pages {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 110%;
|
|
background-size: 100% 95%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.invite_list{
|
|
z-index: 1;
|
|
position: fixed;
|
|
top: 130rpx;
|
|
right: 0;
|
|
width: 168rpx;
|
|
height: 61rpx;
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
line-height: 61rpx;
|
|
text-align: center;
|
|
background-color: rgba(255, 56, 56, 1);
|
|
border-top-left-radius: 24rpx;
|
|
border-top-right-radius: 0rpx;
|
|
border-bottom-right-radius: 0rpx;
|
|
border-bottom-left-radius: 24rpx;
|
|
box-shadow: 13rpx 13rpx 6rpx 0 rgba(0,0,0,0.16);
|
|
|
|
text{
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.barHeight {
|
|
z-index: 1;
|
|
position: fixed;
|
|
left: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: start;
|
|
.left_back {
|
|
padding-left: 32rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.title {
|
|
margin-left: 255rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
|
|
.main_title {
|
|
margin-top: 86rpx;
|
|
font-size: 81rpx;
|
|
letter-spacing: 10rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.alt {
|
|
margin-top: 30rpx;
|
|
color: #fff;
|
|
font-size: 60rpx;
|
|
letter-spacing: 7rpx;
|
|
}
|
|
|
|
.card {
|
|
margin-top: 138rpx;
|
|
width: 619rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.card_title {
|
|
margin: 30rpx auto 0;
|
|
font-size: 33rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.card_num {
|
|
height: 74rpx;
|
|
margin: 60rpx auto 25rpx;
|
|
text {
|
|
display: inline-block;
|
|
width: 56rpx;
|
|
height: 74rpx;
|
|
line-height: 74rpx;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
margin-right: 24rpx;
|
|
background-color: #F5F5F5;
|
|
font-size: 33rpx;
|
|
font-weight: bold;
|
|
color: #01AEEA;
|
|
|
|
&:last-child {
|
|
margin-right: 0rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card_img {
|
|
margin: 0 auto;
|
|
width: 400rpx;
|
|
height: 400rpx;
|
|
}
|
|
|
|
}
|
|
.btn_box {
|
|
z-index: 1;
|
|
position: fixed;
|
|
display: flex;
|
|
top: 89%;
|
|
width: 100%;
|
|
button {
|
|
width: 256rpx;
|
|
height: 74rpx;
|
|
line-height: 74rpx;
|
|
text-align: center;
|
|
border-radius: 37rpx;
|
|
color: #fff;
|
|
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
|
|
margin-left: unset;
|
|
margin-right: unset;
|
|
}
|
|
|
|
.save_btn {
|
|
background-color: #EA9501;
|
|
}
|
|
|
|
.share_btn {
|
|
margin-left: 22rpx!important;
|
|
background-color: #01AEEA;
|
|
}
|
|
}
|
|
}
|
|
</style>
|