250 lines
7.6 KiB
Vue
250 lines
7.6 KiB
Vue
<template>
|
|
<view>
|
|
<view class="qrCodeInfoWrapper">
|
|
<view class="currencyAmountLabel">{{ $t('deposit.remittanceAmount') }}</view>
|
|
<view class="currencyAmount">{{ depositData.currency_amount }}</view>
|
|
<view class="qrCodeImgWrapper" @longpress="showDetailDialog">
|
|
<div class="qrCodeImgBg"></div>
|
|
<image crossOrigin="" v-if="qrCodeImg" :src="qrCodeImg" mode="aspectFill" class="qrCodeImg"></image>
|
|
</view>
|
|
<view class="paymentIcons">
|
|
<!-- <image src="/static/capital/weChatPay.svg" mode="aspectFit" class="paymentIcon"></image> -->
|
|
<image src="/static/capital/alipay.svg" mode="aspectFit" class="paymentIcon"></image>
|
|
<!-- <image src="/static/capital/unionPay.svg" mode="aspectFit" class="paymentIcon"></image> -->
|
|
<!-- <image src="/static/capital/huabei.svg" mode="aspectFit" class="paymentIcon"></image> -->
|
|
</view>
|
|
<view style="margin-top: 24px; padding: 0px 62px; text-align: center; font-size: 12px; line-height: 17px">
|
|
<text style="color: #29bbe4">{{ $t('deposit.longPressCode1') }}</text>
|
|
<text style="color: #aaaaaa">{{ $t('deposit.longPressCode2') }}\n{{ $t('deposit.longPressCode3') }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="countdown">
|
|
<image src="/static/smallWarning.png" mode="aspectFit" style="width: 13px; height: 13px; margin-right: 4px"></image>
|
|
<text>{{ $t('deposit.please') }}</text>
|
|
<uni-countdown :show-day="false" :hour="hour" :minute="minute" :second="second" color="#FF5733" />
|
|
<text>{{ $t('deposit.completeRemittance') }}</text>
|
|
</view>
|
|
<view>
|
|
<button class="primaryButton" @click="next">{{ $t('deposit.uploadCredentials') }}</button>
|
|
</view>
|
|
<view style="margin-top: 12px; text-align: center; font-size: 14px; color: #29bbe4">{{ $t('deposit.uploadCredentialsTip') }}</view>
|
|
<uni-popup ref="alertDialog">
|
|
<view class="qrCodeImageWrapper">
|
|
<canvas id="myCanvas" :canvas-id="canvasId" style="width: 243px; height: 328px"></canvas>
|
|
<button class="primaryButton saveImageBtn" @click="saveImage">{{ $t('common.saveToAlbum') }}</button>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { imgUpload, getImgPath } from '@/services/common.ts';
|
|
import { getBankImg } from '@/services/capital/deposit.ts';
|
|
export default {
|
|
name: 'QrCodeInfo',
|
|
props: {
|
|
imgUrl: {
|
|
type: String,
|
|
required: true,
|
|
default: ''
|
|
},
|
|
depositData: {
|
|
type: Object,
|
|
required: true,
|
|
default: () => ({})
|
|
},
|
|
next: {
|
|
type: Function,
|
|
default: () => {}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
canvasId: 'myCanvas',
|
|
qrCodeImg: '',
|
|
gradientBg: '/static/capital/gradientBg.svg',
|
|
htfxLogo: '/static/logo.svg',
|
|
weChatPayIcon: '/static/capital/weChatPay.svg',
|
|
aliPayIcon: '/static/capital/aliPay2.svg',
|
|
unionPayIcon: '/static/capital/unionPay.svg',
|
|
huabeiIcon: '/static/capital/huabei.svg',
|
|
imgBaseUrl: '',
|
|
qrCodeImgUrl: '',
|
|
hour: 0,
|
|
minute: 0,
|
|
second: 0
|
|
};
|
|
},
|
|
methods: {
|
|
async getImgPathData() {
|
|
if (this.imgBaseUrl) {
|
|
this.qrCodeImg = this.imgBaseUrl + this.imgUrl;
|
|
return;
|
|
}
|
|
const res = await getImgPath();
|
|
if (res && res.code === 0) {
|
|
this.imgBaseUrl = res.data;
|
|
this.qrCodeImg = this.imgBaseUrl + this.imgUrl;
|
|
}
|
|
},
|
|
async getBankImgData(id) {
|
|
const res = await getBankImg(id);
|
|
console.log('res=>', res);
|
|
const temp = 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((res, byte) => res + String.fromCharCode(byte), ''));
|
|
console.log('temp==>', temp);
|
|
this.qrCodeImgUrl = temp;
|
|
},
|
|
showDetailDialog() {
|
|
this.$refs.alertDialog.open();
|
|
this.$nextTick(() => {
|
|
this.drawCanvas();
|
|
});
|
|
},
|
|
closeDetailDialog() {
|
|
this.$refs.alertDialog.close();
|
|
},
|
|
drawCanvas() {
|
|
const ctx = uni.createCanvasContext(this.canvasId, this);
|
|
// 绘制白色背景
|
|
ctx.setFillStyle('#fff');
|
|
ctx.fillRect(0, 0, 243, 328);
|
|
|
|
// 绘制渐变色背景
|
|
ctx.drawImage(this.gradientBg, 0, 0, 243, 328);
|
|
|
|
// 绘制logo
|
|
ctx.drawImage(this.htfxLogo, 72, 29, 100, 36);
|
|
|
|
// 绘制圆角矩形
|
|
this.roundedRectangleDrawer(ctx);
|
|
|
|
// 绘制渐变色边框
|
|
this.gradientBorderDrawer(ctx);
|
|
|
|
// 绘制支付图标
|
|
// ctx.drawImage(this.weChatPayIcon, 26, 269, 29, 29);
|
|
// ctx.drawImage(this.aliPayIcon, 80, 269, 29, 29);
|
|
// ctx.drawImage(this.unionPayIcon, 134, 269, 29, 29);
|
|
// ctx.drawImage(this.huabeiIcon, 188, 269, 29, 29);
|
|
ctx.drawImage(this.aliPayIcon, 108, 269, 29, 29);
|
|
// 绘制自定义图片
|
|
ctx.drawImage(this.qrCodeImg, 75, 108, 93, 93);
|
|
|
|
ctx.draw(); // 绘制到 canvas 上
|
|
},
|
|
roundedRectangleDrawer(ctx) {
|
|
// 设置矩形参数
|
|
const x = 60; // x 坐标
|
|
const y = 92; // y 坐标
|
|
const width = 124; // 矩形宽度
|
|
const height = 124; // 矩形高度
|
|
const radius = 7; // 圆角半径
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(x + radius, y); // 起始点
|
|
ctx.lineTo(x + width - radius, y); // 上边
|
|
ctx.quadraticCurveTo(x + width, y, x + width, y + radius); // 右上角
|
|
ctx.lineTo(x + width, y + height - radius); // 右边
|
|
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); // 右下角
|
|
ctx.lineTo(x + radius, y + height); // 下边
|
|
ctx.quadraticCurveTo(x, y + height, x, y + height - radius); // 左下角
|
|
ctx.lineTo(x, y + radius); // 左边
|
|
ctx.quadraticCurveTo(x, y, x + radius, y); // 左上角
|
|
ctx.closePath();
|
|
|
|
// 填充颜色
|
|
ctx.setFillStyle('#fff');
|
|
ctx.fill();
|
|
},
|
|
gradientBorderDrawer(ctx) {
|
|
// 矩形参数
|
|
const x = 73.5;
|
|
const y = 106.5;
|
|
const width = 96;
|
|
const height = 96;
|
|
const borderWidth = 3; // 边框宽度
|
|
|
|
// 创建渐变
|
|
const gradient = ctx.createLinearGradient(x, y, x + width, y); // 从左到右渐变
|
|
gradient.addColorStop(0, '#4068A8'); // 开始颜色
|
|
gradient.addColorStop(1, '#29BBE4'); // 结束颜色
|
|
|
|
// 填充矩形
|
|
ctx.fillStyle = '#ffffff'; // 矩形填充颜色
|
|
ctx.fillRect(x, y, width, height);
|
|
|
|
// 绘制渐变边框
|
|
ctx.lineWidth = borderWidth;
|
|
ctx.strokeStyle = gradient;
|
|
ctx.strokeRect(x, y, width, height);
|
|
},
|
|
saveImage() {
|
|
// #ifdef H5
|
|
this.saveToAlbum(this.qrCodeImgUrl);
|
|
this.closeDetailDialog();
|
|
this.$cusModal.showModal({ type: 'message', status: 'success', contentText: this.$t('common.success.qrCodeSave') });
|
|
// #endif
|
|
|
|
// #ifndef H5
|
|
const canvasId = this.canvasId;
|
|
uni.canvasToTempFilePath({
|
|
canvasId: canvasId,
|
|
success: (res) => {
|
|
this.saveToAlbum(res.tempFilePath);
|
|
this.closeDetailDialog();
|
|
this.$cusModal.showModal({ type: 'message', status: 'success', contentText: this.$t('common.success.qrCodeSave') });
|
|
},
|
|
fail: (err) => {
|
|
console.error(err);
|
|
}
|
|
});
|
|
// #endif
|
|
},
|
|
saveToAlbum(tempFilePath) {
|
|
// #ifdef H5
|
|
var oA = document.createElement('a');
|
|
oA.download = 'HTFX';
|
|
oA.href = tempFilePath;
|
|
document.body.appendChild(oA);
|
|
oA.click();
|
|
oA.remove();
|
|
// #endif
|
|
// #ifndef H5
|
|
uni.saveImageToPhotosAlbum({
|
|
filePath: tempFilePath,
|
|
success: () => {
|
|
uni.showToast({
|
|
title: this.$t('common.success.saveDone'),
|
|
icon: 'success'
|
|
});
|
|
},
|
|
fail: (err) => {
|
|
console.error(err);
|
|
uni.showToast({
|
|
title: this.$t('common.success.saveFail'),
|
|
icon: 'none'
|
|
});
|
|
}
|
|
});
|
|
// #endif
|
|
}
|
|
},
|
|
created() {
|
|
this.hour = Math.floor(this.depositData.pay_time / 3600000);
|
|
this.minute = Math.floor((this.depositData.pay_time % 3600000) / 60000);
|
|
this.second = (this.depositData.pay_time % 60000) / 1000;
|
|
},
|
|
async mounted() {
|
|
await this.getImgPathData();
|
|
if (this.depositData?.obj?.goldInId) {
|
|
await this.getBankImgData(this.depositData.obj.goldInId);
|
|
}
|
|
this.drawCanvas();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './index.scss';
|
|
</style>
|