334 lines
7.5 KiB
Vue
334 lines
7.5 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="container">
|
||
<view class="my-header">
|
||
<view class="my-icons" @click="goback"> <uni-icons type="left" color="#ffffff" size="16"></uni-icons>
|
||
</view>
|
||
<view class="my-text">二维码</view>
|
||
<view class="my-icons"></view>
|
||
</view>
|
||
<!-- 顶部区域 -->
|
||
<view class="cen-box">
|
||
<view class="box-top">
|
||
请出示此码给加油员
|
||
</view>
|
||
<view class="code-top">
|
||
<w-barcode :options="option"></w-barcode>
|
||
</view>
|
||
<view class="hui-size">
|
||
<!-- <text>2023 **** **** 5523</text> -->
|
||
<text>{{barCode}}</text>
|
||
<text @click="lookNumber">查看数字</text>
|
||
</view>
|
||
<view class="code-box">
|
||
<w-qrcode :options="options"></w-qrcode>
|
||
</view>
|
||
<view class="dis-size">
|
||
<u-icon name="reload" @click="refresh" color="#2979ff" size="18"></u-icon>
|
||
<!-- <u-count-down :timestamp="timestamp"></u-count-down> -->
|
||
<text style="margin-left: 10px;">
|
||
{{timestamp}}秒后自动刷新
|
||
</text>
|
||
</view>
|
||
<view class="bottom-box" @click="bottomShow()">
|
||
<view style="display: flex;align-items: center;">
|
||
<uni-icons type="wallet-filled" color="#2979ff" size="30"></uni-icons>
|
||
<view style="margin-left: 10px;">
|
||
<view class="">{{value}}</view>
|
||
<view style="font-size: 14px; color: #666666;">优先使用此付款方式</view>
|
||
<!-- <view style="font-size: 14px; color: #666666;">根据账户自动识别的付款方式</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="">
|
||
<u-icon name="arrow-right"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="v-bottom-box">
|
||
<u-icon name="warning-fill" size="20px"></u-icon>
|
||
<view style="width: 80%;margin-left: 10px;">付款码有效时长180秒，切勿截屏使用</view>
|
||
</view>
|
||
</view>
|
||
<u-popup :show="show" :round="10" @close="close" @open="open">
|
||
<view class="box-popup">
|
||
<view class="popup-top">
|
||
<view class="title">请选择用户类型</view>
|
||
<view class="hui-size">如果付款失败尝试使用其他方式完成付款</view>
|
||
</view>
|
||
<view class="bottom-box" v-for="(item,index) in deduction" :key="index" @click="choosePayMethod(item.value)">
|
||
<view style="display: flex;align-items: center;">
|
||
<uni-icons type="wallet-filled" color="#2979ff" size="30"></uni-icons>
|
||
<view style="margin-left: 10px;">
|
||
<view class="">{{item.value}}</view>
|
||
<!-- <view style="font-size: 14px; color: #666666;">根据账户自动识别的付款方式</view> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="">
|
||
<u-icon name="arrow-right"></u-icon>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="bottom-box">
|
||
<view style="display: flex;align-items: center;">
|
||
<uni-icons type="wallet-filled" color="#2979ff" size="30"></uni-icons>
|
||
<view style="margin-left: 10px;">
|
||
<view class="">囤油卡</view>
|
||
<view style="font-size: 14px; color: #666666;">根据账户自动识别的付款方式</view>
|
||
</view>
|
||
</view>
|
||
<view class="">
|
||
<u-icon name="arrow-right"></u-icon>
|
||
</view>
|
||
</view> -->
|
||
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '../../utils/request'
|
||
export default {
|
||
data() {
|
||
return {
|
||
timestamp: 60,
|
||
title: '',
|
||
show: false,
|
||
option: {
|
||
width: 670, // 宽度 单位rpx
|
||
height: 150, // 高度 单位rpx
|
||
code: 'E57890543271985', // 生成条形码的值
|
||
},
|
||
options: {
|
||
code: 'https://qm.qq.com/cgi-bin/qm/qr?k=LKqML292dD2WvwQfAJXBUmvgbiB_TZWF&noverify=0', // 生成二维码的值
|
||
size: 460, // 460代表生成的二维码的宽高均为460rpx
|
||
},
|
||
deduction:[
|
||
{key:"balance",value:"储值卡扣款"},
|
||
{key:"oilStorageCard",value:"囤油卡扣款"},
|
||
],
|
||
value:"储值卡扣款",
|
||
barCode:"",
|
||
isLook:false,
|
||
timer:{},
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getBarCode()
|
||
this.getQrCode()
|
||
this.countdown()
|
||
},
|
||
components: {
|
||
|
||
},
|
||
methods: {
|
||
// 是否查看数字
|
||
lookNumber(){
|
||
if (this.isLook){
|
||
this.barCode = this.option.code.slice(0,4) + " **** **** " + this.option.code.slice(this.option.code.length-5,this.option.code.length-1)
|
||
this.isLook = false
|
||
}else{
|
||
this.barCode = this.option.code.replace(/(.{4})/g, '$1 ')
|
||
this.isLook = true
|
||
}
|
||
},
|
||
// 倒计时刷新
|
||
countdown(){
|
||
let _this = this
|
||
_this.timer = setInterval(() => {
|
||
// countdown减1
|
||
_this.timestamp--;
|
||
// 如果倒计时为0，清除定时器
|
||
if(_this.timestamp === 0) {
|
||
_this.getBarCode()
|
||
_this.getQrCode()
|
||
_this.timestamp = 60
|
||
}
|
||
}, 1000);
|
||
},
|
||
// 刷新二维码信息
|
||
refresh(){
|
||
this.getBarCode()
|
||
this.getQrCode()
|
||
this.timestamp = 60
|
||
},
|
||
// 选择扣款方式
|
||
choosePayMethod(val){
|
||
this.value = val
|
||
this.show = false
|
||
},
|
||
// 获取条码信息
|
||
getBarCode(){
|
||
request({
|
||
url: 'business/qrCode/createBarCode',
|
||
method: 'get',
|
||
}).then(res => {
|
||
this.option.code = res.data
|
||
this.barCode = res.data.slice(0,4) + " **** **** " + res.data.slice(res.data.length-5,res.data.length-1)
|
||
})
|
||
},
|
||
// 获取二维码信息
|
||
getQrCode(){
|
||
request({
|
||
url: 'business/qrCode/createQrCode',
|
||
method: 'get',
|
||
}).then(res => {
|
||
this.options.code = res.data
|
||
})
|
||
},
|
||
close() {
|
||
console.log('弹出层收起');
|
||
this.show = false
|
||
},
|
||
open() {
|
||
console.log('弹出层打开');
|
||
},
|
||
bottomShow() {
|
||
this.show = true
|
||
|
||
},
|
||
goback() {
|
||
clearInterval(this.timer)
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content {
|
||
background: #f4f5f6;
|
||
}
|
||
|
||
.container {
|
||
width: 100%;
|
||
height: 100vh;
|
||
box-sizing: border-box;
|
||
padding-top: 88px;
|
||
background-color: #1678ff;
|
||
}
|
||
|
||
.my-header {
|
||
width: 100%;
|
||
height: 88px;
|
||
background: #1678ff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: #ffffff;
|
||
box-sizing: border-box;
|
||
padding: 0px 15px;
|
||
padding-top: 40px;
|
||
|
||
.my-icons {
|
||
width: 20px;
|
||
|
||
}
|
||
|
||
position: fixed;
|
||
top: 0px;
|
||
}
|
||
|
||
.cen-box {
|
||
width: 95%;
|
||
background: #ffffff;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
border-radius: 8px;
|
||
margin: 10px auto;
|
||
}
|
||
|
||
.box-top {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
// padding: 10px 0px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #f4f5f6;
|
||
text-align: center;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.code-box {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.code-top {
|
||
margin: 10px auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.hui-size {
|
||
font-size: 14px;
|
||
width: 100%;
|
||
text-align: center;
|
||
color: #666666;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.dis-size {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #666666;
|
||
font-size: 14px;
|
||
margin: 20px 0px;
|
||
}
|
||
|
||
.bottom-box {
|
||
width: 100%;
|
||
border-top: 1px solid #f4f5f6;
|
||
box-sizing: border-box;
|
||
padding-top: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.v-bottom-box {
|
||
width: 95%;
|
||
border-radius: 8px;
|
||
box-sizing: border-box;
|
||
padding: 15px 10px;
|
||
background: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
color: #666666;
|
||
margin: 10px auto;
|
||
}
|
||
|
||
.box-popup {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
background-color: #ffffff;
|
||
|
||
}
|
||
|
||
.popup-top {
|
||
box-sizing: border-box;
|
||
|
||
}
|
||
|
||
.title {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #000000;
|
||
}
|
||
|
||
.hui-size {
|
||
color: #666666;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|