初始化商家端
This commit is contained in:
wangxiaowei
278
pages/md/paymentCode/paymentCode.vue
Normal file
278
pages/md/paymentCode/paymentCode.vue
Normal file
@ -0,0 +1,278 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user