279 lines
8.7 KiB
Vue
279 lines
8.7 KiB
Vue
<template>
|
||
<view class="page" :style="themeColor">
|
||
<view class="flex benben-position-layout flex flex-wrap align-center paymentCode_flex_0"
|
||
:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
|
||
<view class='flex flex-wrap align-center justify-between flex-sub paymentCode_fd0_0'>
|
||
<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
|
||
<text class='fu-iconfont2 paymentCode_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
|
||
data-url="1"></text>
|
||
</view>
|
||
<view class='flex flex-wrap align-stretch justify-center flex-sub'>
|
||
<text class='paymentCode_fd0_0_c1_c0'>商家收款码</text>
|
||
</view>
|
||
<view class='flex flex-wrap align-center paymentCode_fd0_0_c2'>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
|
||
<!---flex布局flex布局开始-->
|
||
<view class="flex benben-flex-layout flex-wrap align-center paymentCode_flex_1">
|
||
<view class='flex flex-direction flex-wrap align-stretch flex-sub paymentCode_fd1_0'>
|
||
<view class='flex flex-wrap align-center'>
|
||
<image class='paymentCode_fd1_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"25.png"'></image>
|
||
<text class='paymentCode_fd1_0_c0_c1'>商家收款码</text>
|
||
</view>
|
||
<view class='flex flex-wrap align-center paymentCode_fd1_0_c1'>
|
||
<image class='paymentCode_fd1_0_c1_c0' mode="aspectFill" :src='payment_code'></image>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="margin-top text-center text-lg save" v-if="canvasImg" @click="savaImg">保存收款码</view>
|
||
</view>
|
||
<!-- <image class="canvas-img" :src="canvasImg" mode="widthFix"></image> -->
|
||
<!---flex布局flex布局结束-->
|
||
|
||
<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 {
|
||
components: {},
|
||
|
||
|
||
data() {
|
||
return {
|
||
payment_code:"",
|
||
canvasImg: '',
|
||
store_name: ''
|
||
};
|
||
},
|
||
computed: {
|
||
themeColor() {
|
||
return this.$store.getters.themeColor
|
||
},
|
||
|
||
},
|
||
watch: {},
|
||
onLoad(options) {
|
||
this.authInfoCheck()
|
||
},
|
||
|
||
methods: {
|
||
savaImg() {
|
||
let that = this;
|
||
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['已保存到相册'])
|
||
// }
|
||
// });
|
||
// }
|
||
// });
|
||
},
|
||
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 createPoster() {
|
||
const that = this;
|
||
let logo = '/static/logo.png'
|
||
let payImg = '/static/images/25.png'
|
||
let bg = '/static/images/24.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
|
||
|
||
// context.setFillStyle('#FF9300')
|
||
// context.fillRect(0, 0, 328, 328)
|
||
// 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.drawImage(bg, 32, 32, 440, 500);
|
||
// 绘制圆角矩形
|
||
// 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.drawImage(payImg, 88, 64, 36, 36); // 图片路径为/static/image.jpg，绘制在(0, 0)位置，尺寸为200x200
|
||
context.setFillStyle('#FF9300') //文字颜色：默认黑色
|
||
context.textAlign = 'left'
|
||
context.textBaseline = "middle";
|
||
context.font = 'normal 28px 微软雅黑'; // 字体样式
|
||
// context.fillText('邀请人' + ':' + this.userInfo.nickname, 252, 405)
|
||
context.fillText('商家付款码', 130, 84)
|
||
context.setFillStyle('#ffffff')
|
||
context.fillRect(88, 130, 328, 328)
|
||
context.setFillStyle('#333') //文字颜色：默认黑色
|
||
context.textAlign = 'center'
|
||
context.textBaseline = "middle";
|
||
context.font = 'normal 28px 微软雅黑'; // 字体样式
|
||
context.fillText('邀请码' + ':', 252, 344)
|
||
let imageResult1 = await this.getPictureInformation(this.payment_code)
|
||
context.drawImage(imageResult1.path, 112, 154, 280, 280); // 图片路径为/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(this.store_name, 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);
|
||
},
|
||
//获取商家信息
|
||
authInfoCheck() {
|
||
this.$api.post(global.apiUrls.postGetShopInfo, ).then(res => {
|
||
console.log(res);
|
||
res = res.data;
|
||
if (res.code == 1) {
|
||
this.payment_code = res.data.payment_code
|
||
this.store_name = res.data.store_name
|
||
this.createPoster()
|
||
}
|
||
});
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
width: 100vw;
|
||
overflow-x: hidden;
|
||
min-height: calc(100vh - var(--window-bottom));
|
||
background: rgba(255, 147, 0, 1);
|
||
background-size: 100% auto !important;
|
||
}
|
||
.save {
|
||
width: 280rpx;
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
background-color: #fff;
|
||
border-radius: 36rpx;
|
||
color: rgba(255, 147, 0, 1);
|
||
margin: 32rpx auto;
|
||
}
|
||
.paymentCode_flex_0 {
|
||
background: rgba(255, 147, 0, 1);
|
||
width: 750rpx;
|
||
height: 88rpx;
|
||
overflow: hidden;
|
||
z-index: 10;
|
||
top: 0rpx;
|
||
background-size: 100% auto !important;
|
||
}
|
||
|
||
.paymentCode_fd0_0_c2 {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
.canvas-img {
|
||
margin: 100rpx auto;
|
||
display: block;
|
||
width: 504rpx;
|
||
height: 818rpx;
|
||
}
|
||
.paymentCode_fd0_0_c1_c0 {
|
||
font-size: 36rpx;
|
||
font-weight: 500;
|
||
color: rgba(255, 255, 255, 1);
|
||
line-height: 88rpx;
|
||
}
|
||
|
||
.paymentCode_fd0_0_c0_c0 {
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: rgba(255, 255, 255, 1);
|
||
line-height: 88rpx;
|
||
}
|
||
|
||
.paymentCode_fd0_0 {
|
||
margin: 0rpx 32rpx 0rpx 32rpx;
|
||
}
|
||
|
||
.paymentCode_flex_1 {
|
||
padding: 153rpx 28rpx 0rpx 28rpx;
|
||
}
|
||
|
||
.paymentCode_fd1_0_c1_c0 {
|
||
width: 406rpx;
|
||
height: 406rpx;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.paymentCode_fd1_0_c1 {
|
||
background: rgba(255, 255, 255, 1);
|
||
margin: 40rpx 0rpx 0rpx 0rpx;
|
||
padding: 60rpx 68rpx 65rpx 74rpx;
|
||
background-size: 100% auto !important;
|
||
}
|
||
|
||
.paymentCode_fd1_0_c0_c1 {
|
||
color: #FF9300;
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.paymentCode_fd1_0_c0_c0 {
|
||
width: 36rpx;
|
||
height: 32rpx;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
margin: 0rpx 8rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.paymentCode_fd1_0 {
|
||
background: url(/static/images/24.png) no-repeat, rgba(255, 147, 0, 1);
|
||
background-size: 100% auto !important;
|
||
padding: 46rpx 70rpx 92rpx 70rpx;
|
||
}
|
||
</style>
|