|
@@ -1,33 +1,36 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <view class="code-container">
|
|
|
|
|
- <view class="title center">{{isPayment? "向商家付款":"扫一扫,向我付款"}}</view>
|
|
|
|
|
- <view class="main-content">
|
|
|
|
|
- <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="code-container " style="margin: 60rpx 35rpx;">
|
|
|
|
|
+ <view class="title center">{{isPayment? "向商家付款":"扫一扫,向我付款"}}</view>
|
|
|
|
|
+ <view class="main-content">
|
|
|
|
|
+ <view v-if="isPayment">
|
|
|
|
|
+ <!-- 占位 -->
|
|
|
|
|
+ <view style="height: 50rpx;"></view>
|
|
|
|
|
+ <!-- 条形码 -->
|
|
|
|
|
+ <view class="bar-code center" style="overflow-x: hidden;margin: 0 30rpx;">
|
|
|
|
|
+ <tki-barcode ref="barcode" :val="content" onval=true :opations="barOption" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- 付款码 -->
|
|
|
|
|
+ <view class="qr-code center">
|
|
|
|
|
+ <tki-qrcode cid="2" ref="qrcode" :icon="avatar" :val="content" size="350" :onval="true" :loadMake="true"
|
|
|
|
|
+ :usingComponents="true" />
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
- <!-- 付款码 -->
|
|
|
|
|
- <view class="qr-code center">
|
|
|
|
|
- <tki-qrcode cid="2" ref="qrcode" :icon="avatar" :val="content" size="350" :onval="true" :loadMake="true"
|
|
|
|
|
- :usingComponents="true" />
|
|
|
|
|
|
|
+ <!-- 收款码 -->
|
|
|
|
|
+ <view v-else class="charge-code center">
|
|
|
|
|
+ <tki-qrcode cid="1" ref="qrcode-charge" :val="id" :icon="avatar" size="500" :onval="true"
|
|
|
|
|
+ :loadMake="true" :usingComponents="true" />
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <!-- 收款码 -->
|
|
|
|
|
- <view v-else class="charge-code center">
|
|
|
|
|
- <tki-qrcode cid="1" ref="qrcode-charge" :val="id" :icon="avatar" size="500" :onval="true"
|
|
|
|
|
- :loadMake="true" :usingComponents="true" />
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="footer center flex-direction" :style="$isNotEmpty(vuex_channel)?'padding: 30rpx 0rpx;':''">
|
|
|
|
|
- <text class="text-xl text-bold">{{nickName}}</text>
|
|
|
|
|
- <!-- #ifdef MP-WEIXIN-->
|
|
|
|
|
- <view style="width: 100%;padding: 0;">
|
|
|
|
|
- <channel-list></channel-list>
|
|
|
|
|
|
|
+ <view class="footer center flex-direction" :style="$isNotEmpty(vuex_channel)?'padding: 30rpx 0rpx;':''">
|
|
|
|
|
+ <text class="text-xl text-bold">{{nickName}}</text>
|
|
|
|
|
+ <!-- #ifdef MP-WEIXIN-->
|
|
|
|
|
+ <view style="width: 100%;padding: 0;">
|
|
|
|
|
+ <channel-list></channel-list>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- #endif -->
|
|
|
</view>
|
|
</view>
|
|
|
- <!-- #endif -->
|
|
|
|
|
|
|
+
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
@@ -38,6 +41,7 @@
|
|
|
import tkiBarcode from "../../comps/tki-barcode/tki-barcode.vue"
|
|
import tkiBarcode from "../../comps/tki-barcode/tki-barcode.vue"
|
|
|
import totp from "../../utils/totp.js"
|
|
import totp from "../../utils/totp.js"
|
|
|
import socket from "../../utils/socket.js"
|
|
import socket from "../../utils/socket.js"
|
|
|
|
|
+ import crypto from "@/utils/crypto.js"
|
|
|
export default {
|
|
export default {
|
|
|
components: {
|
|
components: {
|
|
|
channelList,
|
|
channelList,
|
|
@@ -47,7 +51,8 @@
|
|
|
computed: {
|
|
computed: {
|
|
|
content() {
|
|
content() {
|
|
|
let transformStr = this.id
|
|
let transformStr = this.id
|
|
|
- return transformStr + this.secret + ";" + (this.vuex_channel ? this.vuex_channel.id : 0)
|
|
|
|
|
|
|
+ let qrcodeText=transformStr + this.secret + ";" + (this.vuex_channel ? this.vuex_channel.id : 0)
|
|
|
|
|
+ return crypto.encrypt(qrcodeText)
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
data() {
|
|
data() {
|
|
@@ -59,8 +64,8 @@
|
|
|
isPayment: true,
|
|
isPayment: true,
|
|
|
timer: '',
|
|
timer: '',
|
|
|
barOption: {
|
|
barOption: {
|
|
|
- width: 3,
|
|
|
|
|
- height: 130,
|
|
|
|
|
|
|
+ width: 1,
|
|
|
|
|
+ height: 120,
|
|
|
displayValue: false
|
|
displayValue: false
|
|
|
},
|
|
},
|
|
|
//webSocket
|
|
//webSocket
|
|
@@ -148,6 +153,9 @@
|
|
|
console.log(this.secret);
|
|
console.log(this.secret);
|
|
|
}, 1000)
|
|
}, 1000)
|
|
|
},
|
|
},
|
|
|
|
|
+ getSecret(){
|
|
|
|
|
+ this.secret = totp.getSecret(this.id);
|
|
|
|
|
+ },
|
|
|
async initAvatat(url) {
|
|
async initAvatat(url) {
|
|
|
return new Promise((reslove, reject) => {
|
|
return new Promise((reslove, reject) => {
|
|
|
uni.downloadFile({
|
|
uni.downloadFile({
|
|
@@ -206,10 +214,11 @@
|
|
|
|
|
|
|
|
<style>
|
|
<style>
|
|
|
page {
|
|
page {
|
|
|
- background-color: #18b566;
|
|
|
|
|
|
|
+ background-color: #0aa98b;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
|
|
+ $color:#0aa98b;
|
|
|
.popup-content {
|
|
.popup-content {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
@@ -218,7 +227,7 @@
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
|
|
|
|
|
.channelbtn {
|
|
.channelbtn {
|
|
|
- background-color: #18b566;
|
|
|
|
|
|
|
+ background-color: $color;
|
|
|
color: #FFFFFF;
|
|
color: #FFFFFF;
|
|
|
padding: 36rpx 150rpx;
|
|
padding: 36rpx 150rpx;
|
|
|
}
|
|
}
|
|
@@ -236,7 +245,7 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.checked {
|
|
.checked {
|
|
|
- color: #18b566;
|
|
|
|
|
|
|
+ color: $color;
|
|
|
font-size: 34rpx;
|
|
font-size: 34rpx;
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
font-weight: 800;
|
|
font-weight: 800;
|
|
@@ -296,14 +305,13 @@
|
|
|
.code-container {
|
|
.code-container {
|
|
|
background-color: #FFFFFF;
|
|
background-color: #FFFFFF;
|
|
|
border-radius: 16rpx;
|
|
border-radius: 16rpx;
|
|
|
- margin: 80rpx 20rpx;
|
|
|
|
|
|
|
|
|
|
.title {
|
|
.title {
|
|
|
border-radius: 25rpx 25rpx 0 0;
|
|
border-radius: 25rpx 25rpx 0 0;
|
|
|
height: 100rpx;
|
|
height: 100rpx;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
font-size: 35rpx;
|
|
font-size: 35rpx;
|
|
|
- color: #18b566;
|
|
|
|
|
|
|
+ color: $color;
|
|
|
background-color: #F7F7F7;
|
|
background-color: #F7F7F7;
|
|
|
font-weight: 600;
|
|
font-weight: 600;
|
|
|
letter-spacing: 3rpx;
|
|
letter-spacing: 3rpx;
|