|
|
@@ -1,60 +1,117 @@
|
|
|
<template>
|
|
|
<view class="code-container">
|
|
|
- <view class="title center">向商家付款</view>
|
|
|
- <!-- <image class="bar-code" :src="barCode"></image> -->
|
|
|
+ <view class="title center">{{isPayment? "向商家付款":"扫一扫，向我付款"}}</view>
|
|
|
<view class="main-content">
|
|
|
- <view class="bar-code center">
|
|
|
- <tki-barcode
|
|
|
- ref="barcode"
|
|
|
- :val="barContent"
|
|
|
- onval=true
|
|
|
- :opations="barOption"
|
|
|
- /></view>
|
|
|
- <view class="qr-code center">
|
|
|
- <ayQrcode ref="qrcode" :modal="true" :url="url" :height="150" :width="150" />
|
|
|
+ <view v-if="isPayment">
|
|
|
+ <!-- 占位 -->
|
|
|
+ <view style="height: 50rpx;"></view>
|
|
|
+ <!-- 条形码 -->
|
|
|
+ <view class="bar-code center">
|
|
|
+ <tki-barcode
|
|
|
+ ref="barcode"
|
|
|
+ :val="content"
|
|
|
+ onval=true
|
|
|
+ :opations="barOption"
|
|
|
+ /></view>
|
|
|
+ <!-- 付款码 -->
|
|
|
+ <view class="qr-code center">
|
|
|
+ <tki-qrcode
|
|
|
+ cid="2"
|
|
|
+ ref="qrcode"
|
|
|
+ :val="content"
|
|
|
+ size="300"
|
|
|
+ :onval="true"
|
|
|
+ :loadMake="true"
|
|
|
+ :usingComponents="true"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 收款码 -->
|
|
|
+ <view v-else class="charge-code center">
|
|
|
+ <tki-qrcode
|
|
|
+ cid="1"
|
|
|
+ ref="qrcode-charge"
|
|
|
+ :val="id"
|
|
|
+ :icon="avatar"
|
|
|
+ size="420"
|
|
|
+ :onval="true"
|
|
|
+ :loadMake="true"
|
|
|
+ :usingComponents="true"
|
|
|
+ />
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="footer center">
|
|
|
- <view @click="isPayment=!isPayment" class="cu-btn round cuIcon-qrcode text-orange" style="font-size: 50rpx;height: 100rpx;">
|
|
|
+ <view @click="isPayment=!isPayment" class="cu-btn round cuIcon-qrcode" style="font-size: 50rpx;height: 100rpx;" :style="{color: isPayment? 'orange':'green' }">
|
|
|
<view class="text-black text-xl margin-left-30">{{ isPayment? " 切换收款码":"切换付款码"}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
|
|
|
+ import tkiQrcode from "tki-qrcode"
|
|
|
import tkiBarcode from "@/components/tki-barcode/tki-barcode.vue"
|
|
|
-
|
|
|
+ import totp from "@/utils/totp.js"
|
|
|
+ // import global from "@/utils/global.js"
|
|
|
+ // const { transformKey } = global;
|
|
|
export default {
|
|
|
- components: { ayQrcode ,tkiBarcode},
|
|
|
- mounted(option){
|
|
|
- //生成动态密码
|
|
|
-
|
|
|
- this.$refs.qrcode.crtQrCode()
|
|
|
- const totp = require("totp-generator");
|
|
|
- totp("JBSWY3DPEHPK3PXP");
|
|
|
- },
|
|
|
- watch:{
|
|
|
-
|
|
|
- },
|
|
|
+ components: { tkiBarcode,tkiQrcode},
|
|
|
computed:{
|
|
|
+ content(){
|
|
|
+ let transformStr = (this.id*95256)*2
|
|
|
+ return transformStr+this.secret
|
|
|
+ }
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- id: '',
|
|
|
+ id: "",
|
|
|
+ avatar: "",
|
|
|
+ secret: '000000',
|
|
|
isPayment: true,
|
|
|
- barContent: '321968494981965849',
|
|
|
- url: 'https://pixabay.com/images/search/?order=ec',
|
|
|
+ timer: '',
|
|
|
barOption: {
|
|
|
width: 4,
|
|
|
- fontColor: "#caad20"
|
|
|
+ height: 130,
|
|
|
+ displayValue: false
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
-
|
|
|
+ refreshCode(){
|
|
|
+ this.timer = setInterval(()=>{
|
|
|
+ this.secret = totp.getSecret(this.id);
|
|
|
+ },1000)
|
|
|
+ },
|
|
|
+ async initAvatat(url){
|
|
|
+ return new Promise((reslove,reject)=>{
|
|
|
+ uni.downloadFile({
|
|
|
+ url,
|
|
|
+ success: (res)=> {
|
|
|
+ reslove(res);
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ reject(err)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async created(option) {
|
|
|
+ //获取用户头像
|
|
|
+ let avatar = "https://gxsz-bucket-01.obs.cn-south-1.myhuaweicloud.com/7123b4d61ba04f1ea2fb0335e36b9477.jpg";
|
|
|
+
|
|
|
+ this. avatar =(await this.initAvatat(avatar)).tempFilePath;
|
|
|
+ },
|
|
|
+ mounted(option){
|
|
|
+ //获取用户ID
|
|
|
+ this.id = "13126058204"
|
|
|
+ //生成动态密码
|
|
|
+ this.refreshCode();
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ clearInterval(this.timer);
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -91,16 +148,22 @@
|
|
|
}
|
|
|
.main-content{
|
|
|
width: 100%;
|
|
|
- height: 550rpx;
|
|
|
+ height: 600rpx;
|
|
|
+ scroll-margin-top: 600rpx;
|
|
|
+ // overflow: hidden;
|
|
|
.bar-code{
|
|
|
- width: 90%;
|
|
|
margin-left: 5%;
|
|
|
+ width: 90%;
|
|
|
height: 150rpx;
|
|
|
- margin-top: 50rpx;
|
|
|
}
|
|
|
.qr-code{
|
|
|
width: 100%;
|
|
|
- height: 400rpx;
|
|
|
+ height: 450rpx;
|
|
|
+ }
|
|
|
+ .charge-code{
|
|
|
+ width: 100%;
|
|
|
+ height: 600rpx;
|
|
|
+ transition: transform 1s ease-in-out;
|
|
|
}
|
|
|
}
|
|
|
}
|
