439 lines
13 KiB
Vue
439 lines
13 KiB
Vue
<template>
|
||
<view class="container-wrap">
|
||
<view class="flex justify-start align-center text-333" style="width: 100%;"
|
||
:style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
|
||
<view class="header-title">
|
||
<view class="cuIcon-back header-left" @click="handleJump" data-type="BACK"></view>
|
||
<view class="header-center text-333">海报</view>
|
||
</view>
|
||
</view>
|
||
<image class="canvas-img" :src="canvasImg" mode="widthFix"></image>
|
||
<!-- <view class="content-wrap flex flex-direction align-center justify-center">
|
||
<image class="logo" src="/static/logo.png" mode="widthFix"></image>
|
||
<image class="avatar" :src="userInfo.head_img" mode="widthFix"></image>
|
||
<view class="name text-lg text-333 margin-top-sm">{{userInfo.user_nickname}}</view>
|
||
<view class="code text-df text-333 margin-top-sm">{{ i18n['邀请码'] }}：{{userInfo.invite_code}}</view>
|
||
<image class="code-img" :src="userInfo.qrcode" mode="widthFix"></image>
|
||
<view class="desc text-df text-333 margin-top-sm">{{ i18n['扫码下载，即享新世界'] }}</view>
|
||
<view class="app-name text-sm text-999 margin-top-sm">{{ i18n['来啰外卖'] }}</view>
|
||
</view> -->
|
||
<view class="share-wrap flex align-center justify-center">
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<!-- <view @click="share(1)" class="item flex-sub flex flex-direction justify-center align-center ">
|
||
<image src="../static/1.png" mode="widthFix"></image>
|
||
<text class="text-sm text-333">{{ i18n['微信'] }}</text>
|
||
</view>
|
||
<view @click="share(2)" class="item flex-sub flex flex-direction justify-center align-center">
|
||
<image src="../static/2.png" mode="widthFix"></image>
|
||
<text class="text-sm text-333">{{ i18n['朋友圈'] }}</text>
|
||
</view> -->
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<!-- <button open-type="share" class="item flex-sub flex flex-direction justify-center align-center ">
|
||
<image src="../static/1.png" mode="widthFix"></image>
|
||
<text class="text-sm text-333">{{ i18n['微信'] }}</text>
|
||
</button> -->
|
||
<!-- #endif -->
|
||
<view @click="savaImg" class="item flex-sub flex flex-direction justify-center align-center">
|
||
<image src="../static/3.png" mode="widthFix"></image>
|
||
<text class="text-sm text-333">保存图片</text>
|
||
</view>
|
||
</view>
|
||
<canvas
|
||
style="width: 504px; height: 700px; background-color: #fff; position: fixed; top: -10000px; left: -10000px;"
|
||
canvas-id="canvas" id="canvas"></canvas>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
userInfo: null,
|
||
canvasImg: null
|
||
};
|
||
},
|
||
/**
|
||
* @param {Object} options 入参
|
||
*/
|
||
onLoad(options) {
|
||
this.getMyInviteData();
|
||
|
||
|
||
},
|
||
methods: {
|
||
async getPictureInformation(url) {
|
||
// let downLoadImgInfo = await uni.downloadFile({
|
||
// url: url
|
||
// });
|
||
// console.log(downLoadImgInfo[1].tempFilePath);
|
||
let imgInfo = await uni.getImageInfo({
|
||
src: url
|
||
})
|
||
console.log(imgInfo[1]);
|
||
return imgInfo[1]
|
||
},
|
||
async createPoster1() {
|
||
const that = this;
|
||
let logo = '/static/logo.png'
|
||
var context = uni.createCanvasContext('canvas', this)
|
||
context.setFillStyle('white')
|
||
context.fillRect(0, 0, 504, 818)
|
||
// 绘制圆角矩形
|
||
context.save();
|
||
context.beginPath();
|
||
context.arc(66, 66, 34, 0, 2 * Math.PI); // 圆心坐标(100, 100)，半径为100
|
||
context.closePath();
|
||
context.clip();
|
||
|
||
|
||
// 绘制图片
|
||
context.drawImage(logo, 32, 32, 68, 68);
|
||
|
||
context.restore(); // 恢复之前保存的绘图上下文状态
|
||
// 绘制圆角矩形
|
||
context.save();
|
||
context.beginPath();
|
||
context.arc(252, 130, 48, 0, 2 * Math.PI); // 圆心坐标(100, 100)，半径为100
|
||
// context.setStrokeStyle('#333333')
|
||
// context.stroke()
|
||
context.closePath();
|
||
context.clip();
|
||
console.log(369);
|
||
let imageResult = await this.getPictureInformation(this.userInfo.avatar)
|
||
console.log(369);
|
||
// uni.getImageInfo({
|
||
// src: this.storeLogo,
|
||
// success: function (image) {
|
||
// console.log(image);
|
||
|
||
// }
|
||
// });
|
||
console.log(imageResult.path);
|
||
context.drawImage(imageResult.path, 204, 82, 96, 96); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
|
||
console.log(368);
|
||
// context.drawImage(this.userInfo.head_img, 204, 82, 96, 96); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
|
||
|
||
context.restore(); // 恢复之前保存的绘图上下文状态
|
||
|
||
context.setFillStyle('#333') //文字颜色：默认黑色
|
||
context.textAlign = 'center'
|
||
context.textBaseline = "middle";
|
||
context.font = 'normal 32px 微软雅黑'; // 字体样式
|
||
context.fillText(this.userInfo.nickname, 252, 225)
|
||
|
||
context.setFillStyle('#333') //文字颜色：默认黑色
|
||
context.textAlign = 'center'
|
||
context.textBaseline = "middle";
|
||
context.font = 'normal 28px 微软雅黑'; // 字体样式
|
||
context.fillText('邀请码' + ':' + this.userInfo.invite_code, 252, 286)
|
||
console.log(369);
|
||
let imageResult1 = await this.getPictureInformation(this.userInfo.invite_url)
|
||
console.log(123);
|
||
// uni.getImageInfo({
|
||
// src: this.storeLogo,
|
||
// success: function (image) {
|
||
// console.log(image);
|
||
|
||
// }
|
||
// });
|
||
context.drawImage(imageResult1.path, 92, 330, 320,
|
||
320); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
|
||
|
||
// #ifndef MP-WEIXIN
|
||
// context.drawImage(this.userInfo.invite_url, 92, 330, 320, 320); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
|
||
// #endif
|
||
|
||
context.setFillStyle('#333') //文字颜色：默认黑色
|
||
context.textAlign = 'center'
|
||
context.textBaseline = "middle";
|
||
context.font = 'normal 28px 微软雅黑'; // 字体样式
|
||
context.fillText('扫码下载，即享新世界', 252, 703)
|
||
|
||
context.setFillStyle('#999') //文字颜色：默认黑色
|
||
context.textAlign = 'center'
|
||
context.textBaseline = "middle";
|
||
context.font = 'normal 24px 微软雅黑'; // 字体样式
|
||
context.fillText('萬家商超', 252, 760)
|
||
context.draw()
|
||
setTimeout(() => {
|
||
uni.canvasToTempFilePath({
|
||
canvasId: 'canvas',
|
||
success: res => {
|
||
console.log(res.tempFilePath);
|
||
that.canvasImg = res.tempFilePath
|
||
},
|
||
fail: err => {
|
||
console.log(err);
|
||
}
|
||
});
|
||
}, 300);
|
||
},
|
||
async createPoster() {
|
||
const that = this;
|
||
let logo = '/static/logo.png'
|
||
var context = uni.createCanvasContext('canvas', this)
|
||
let imageResult11 = await this.getPictureInformation(
|
||
'https://lvtai-files.oss-cn-beijing.aliyuncs.com/mini/invite_bg.png')
|
||
context.drawImage(imageResult11.path, 0, 0, 504, 700); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
|
||
|
||
let imageResult111 = await this.getPictureInformation(
|
||
'https://lvtai-files.oss-cn-beijing.aliyuncs.com/mini/153.png')
|
||
context.drawImage(imageResult111.path, 32, 32, 440,
|
||
500); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
|
||
|
||
// 绘制圆角矩形
|
||
// context.save();
|
||
// context.beginPath();
|
||
// context.arc(252, 90, 48, 0, 2 * Math.PI); // 圆心坐标(100, 100)，半径为100
|
||
// context.closePath();
|
||
// context.clip();
|
||
// let imageResult = await this.getPictureInformation(this.userInfo.avatar)
|
||
// console.log(imageResult.path);
|
||
// context.drawImage(imageResult.path, 204, 42, 96, 96); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
|
||
// context.restore(); // 恢复之前保存的绘图上下文状态
|
||
|
||
context.setFillStyle('#fff') //文字颜色：默认黑色
|
||
context.textAlign = 'center'
|
||
context.textBaseline = "middle";
|
||
context.font = 'normal 28px 微软雅黑'; // 字体样式
|
||
// context.fillText('邀请人' + ':' + this.userInfo.nickname, 252, 405)
|
||
context.fillText(this.userInfo.nickname, 252, 445)
|
||
|
||
context.setFillStyle('#333') //文字颜色：默认黑色
|
||
context.textAlign = 'center'
|
||
context.textBaseline = "middle";
|
||
context.font = 'normal 28px 微软雅黑'; // 字体样式
|
||
context.fillText('邀请码' + ':' + this.userInfo.invite_code, 252, 344)
|
||
let imageResult1 = await this.getPictureInformation(this.userInfo.invite_url)
|
||
context.drawImage(imageResult1.path, 132, 64, 240,
|
||
240); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
|
||
|
||
// #ifndef MP-WEIXIN
|
||
// context.drawImage(this.userInfo.invite_url, 92, 330, 320, 320); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
|
||
// #endif
|
||
|
||
context.setFillStyle('#fff') //文字颜色：默认黑色
|
||
context.textAlign = 'center'
|
||
context.textBaseline = "middle";
|
||
context.font = 'normal 28px 微软雅黑'; // 字体样式
|
||
context.fillText('扫码下载，即享新世界', 252, 583)
|
||
|
||
context.setFillStyle('#fff') //文字颜色：默认黑色
|
||
context.textAlign = 'center'
|
||
context.textBaseline = "middle";
|
||
context.font = 'normal 24px 微软雅黑'; // 字体样式
|
||
context.fillText('萬家商超', 252, 640)
|
||
context.draw()
|
||
setTimeout(() => {
|
||
uni.canvasToTempFilePath({
|
||
canvasId: 'canvas',
|
||
success: res => {
|
||
console.log(res.tempFilePath);
|
||
that.canvasImg = res.tempFilePath
|
||
},
|
||
fail: err => {
|
||
console.log(err);
|
||
}
|
||
});
|
||
}, 300);
|
||
},
|
||
getMyInviteData() {
|
||
console.log(123)
|
||
this.$api.post(global.apiUrls.post5c78c4772da97).then(res => {
|
||
console.log(123)
|
||
console.log('res=', res.data.data)
|
||
if (res.data.code == 1) {
|
||
this.userInfo = res.data.data
|
||
this.createPoster()
|
||
}
|
||
})
|
||
},
|
||
savaImg() {
|
||
let that = this;
|
||
let url = this.userInfo.invite_url;
|
||
console.log('长按了', url);
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: this.canvasImg,
|
||
success: res => {
|
||
console.log(res);
|
||
this.$message.info('已保存到相册')
|
||
},
|
||
fail: err => {
|
||
console.log(err);
|
||
}
|
||
});
|
||
// uni.getImageInfo({
|
||
// src: url,
|
||
// success: function(image) {
|
||
// console.log('图片信息：', JSON.stringify(image));
|
||
// uni.saveImageToPhotosAlbum({
|
||
// filePath: image.path,
|
||
// success: function() {
|
||
// console.log('save success');
|
||
// that.$message.info(that.i18n['已保存到相册'])
|
||
// }
|
||
// });
|
||
// }
|
||
// });
|
||
},
|
||
share(type) {
|
||
if (type == 1) {
|
||
uni.share({
|
||
provider: "weixin",
|
||
scene: "WXSceneSession",
|
||
type: 2,
|
||
imageUrl: this.canvasImg,
|
||
success: function(res) {
|
||
console.log("success:" + JSON.stringify(res));
|
||
},
|
||
fail: function(err) {
|
||
console.log("fail:" + JSON.stringify(err));
|
||
}
|
||
});
|
||
} else {
|
||
uni.share({
|
||
provider: "weixin",
|
||
scene: "WXSceneTimeline",
|
||
type: 2,
|
||
imageUrl: this.canvasImg,
|
||
success: function(res) {
|
||
console.log("success:" + JSON.stringify(res));
|
||
},
|
||
fail: function(err) {
|
||
console.log("fail:" + JSON.stringify(err));
|
||
}
|
||
});
|
||
}
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.container-wrap {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
background-image: url(https://lvtai-files.oss-cn-beijing.aliyuncs.com/mini/code_bg.png);
|
||
// background-color: #fff;
|
||
background-size: 100% 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.content-wrap {
|
||
margin: 40rpx auto;
|
||
width: 504rpx;
|
||
height: 818rpx;
|
||
background-color: #fff;
|
||
border-radius: 24rpx;
|
||
position: relative;
|
||
|
||
.logo {
|
||
position: absolute;
|
||
left: 32rpx;
|
||
top: 32rpx;
|
||
border-radius: 16rpx;
|
||
width: 68rpx;
|
||
height: 68rpx;
|
||
z-index: 100;
|
||
}
|
||
|
||
.avatar {
|
||
margin-top: 76rpx;
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 48rpx;
|
||
}
|
||
|
||
.code-img {
|
||
margin-top: 24rpx;
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
}
|
||
}
|
||
|
||
//头部 start
|
||
.header-title {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 32rpx;
|
||
|
||
.header-left {
|
||
font-size: 42rpx;
|
||
}
|
||
|
||
.header-center {
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
font-family: 'msgothic' !important;
|
||
font-weight: 500;
|
||
letter-spacing: 1rpx;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
// view {
|
||
// width: 33.3%;
|
||
// }
|
||
}
|
||
|
||
.header-right {
|
||
font-size: 28rpx;
|
||
font-family: 'msgothic' !important;
|
||
color: #ffffff;
|
||
letter-spacing: 1rpx;
|
||
text-align: right;
|
||
|
||
&.mp-wx {
|
||
position: absolute;
|
||
right: 32rpx;
|
||
top: 10rpx;
|
||
}
|
||
}
|
||
|
||
// .canvas-img {
|
||
// margin: 120rpx auto;
|
||
// display: block;
|
||
// width: 580rpx;
|
||
// height: 920rpx;
|
||
// }
|
||
|
||
.share-wrap {
|
||
position: fixed;
|
||
bottom: 0;
|
||
// margin-bottom: 60rpx;
|
||
height: 260rpx;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
}
|
||
|
||
.share-wrap image {
|
||
margin-bottom: 16rpx;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.canvas-img {
|
||
margin: 100rpx auto;
|
||
display: block;
|
||
width: 504rpx;
|
||
height: 818rpx;
|
||
}
|
||
|
||
button::after {
|
||
border: none;
|
||
}
|
||
|
||
button {
|
||
background-color: #fff;
|
||
}
|
||
|
||
button:hover {
|
||
background-color: #fff;
|
||
}
|
||
</style> |