2023-11-30 15:02:21 +08:00
|
|
|
|
<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">
|
2023-12-26 18:44:50 +08:00
|
|
|
|
<!-- <text>2023 **** **** 5523</text> -->
|
|
|
|
|
<text>{{barCode}}</text>
|
|
|
|
|
<text @click="lookNumber">查看数字</text>
|
2023-11-30 15:02:21 +08:00
|
|
|
|
</view>
|
|
|
|
|
<view class="code-box">
|
|
|
|
|
<w-qrcode :options="options"></w-qrcode>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="dis-size">
|
2023-12-25 18:10:00 +08:00
|
|
|
|
<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>
|
2023-11-30 15:02:21 +08:00
|
|
|
|
</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;">
|
2023-12-25 18:10:00 +08:00
|
|
|
|
<view class="">{{value}}</view>
|
|
|
|
|
<view style="font-size: 14px; color: #666666;">优先使用此付款方式</view>
|
|
|
|
|
<!-- <view style="font-size: 14px; color: #666666;">根据账户自动识别的付款方式</view> -->
|
2023-11-30 15:02:21 +08:00
|
|
|
|
</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>
|
2023-12-25 18:10:00 +08:00
|
|
|
|
<view class="bottom-box" v-for="(item,index) in deduction" :key="index" @click="choosePayMethod(item.value)">
|
2023-11-30 15:02:21 +08:00
|
|
|
|
<view style="display: flex;align-items: center;">
|
|
|
|
|
<uni-icons type="wallet-filled" color="#2979ff" size="30"></uni-icons>
|
|
|
|
|
<view style="margin-left: 10px;">
|
2023-12-25 18:10:00 +08:00
|
|
|
|
<view class="">{{item.value}}</view>
|
|
|
|
|
<!-- <view style="font-size: 14px; color: #666666;">根据账户自动识别的付款方式</view> -->
|
2023-11-30 15:02:21 +08:00
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="">
|
|
|
|
|
<u-icon name="arrow-right"></u-icon>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
2023-12-25 18:10:00 +08:00
|
|
|
|
<!-- <view class="bottom-box">
|
2023-11-30 15:02:21 +08:00
|
|
|
|
<view style="display: flex;align-items: center;">
|
|
|
|
|
<uni-icons type="wallet-filled" color="#2979ff" size="30"></uni-icons>
|
|
|
|
|
<view style="margin-left: 10px;">
|
2023-12-25 18:10:00 +08:00
|
|
|
|
<view class="">囤油卡</view>
|
2023-11-30 15:02:21 +08:00
|
|
|
|
<view style="font-size: 14px; color: #666666;">根据账户自动识别的付款方式</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="">
|
|
|
|
|
<u-icon name="arrow-right"></u-icon>
|
|
|
|
|
</view>
|
2023-12-25 18:10:00 +08:00
|
|
|
|
</view> -->
|
2023-11-30 15:02:21 +08:00
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
</u-popup>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
2023-12-23 18:17:19 +08:00
|
|
|
|
import request from '../../utils/request'
|
2023-11-30 15:02:21 +08:00
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
2023-12-25 18:10:00 +08:00
|
|
|
|
timestamp: 60,
|
2023-11-30 15:02:21 +08:00
|
|
|
|
title: '',
|
|
|
|
|
show: false,
|
|
|
|
|
option: {
|
|
|
|
|
width: 670, // 宽度 单位rpx
|
2023-12-23 18:17:19 +08:00
|
|
|
|
height: 150, // 高度 单位rpx
|
2023-11-30 15:02:21 +08:00
|
|
|
|
code: 'E57890543271985', // 生成条形码的值
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
code: 'https://qm.qq.com/cgi-bin/qm/qr?k=LKqML292dD2WvwQfAJXBUmvgbiB_TZWF&noverify=0', // 生成二维码的值
|
|
|
|
|
size: 460, // 460代表生成的二维码的宽高均为460rpx
|
|
|
|
|
},
|
2023-12-25 18:10:00 +08:00
|
|
|
|
deduction:[
|
|
|
|
|
{key:"balance",value:"储值卡扣款"},
|
|
|
|
|
{key:"oilStorageCard",value:"囤油卡扣款"},
|
|
|
|
|
],
|
|
|
|
|
value:"储值卡扣款",
|
2023-12-26 18:44:50 +08:00
|
|
|
|
barCode:"",
|
|
|
|
|
isLook:false,
|
2024-01-15 14:41:36 +08:00
|
|
|
|
timer:{},
|
2023-11-30 15:02:21 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
2023-12-23 18:17:19 +08:00
|
|
|
|
onLoad() {
|
|
|
|
|
this.getBarCode()
|
|
|
|
|
this.getQrCode()
|
2023-12-25 18:10:00 +08:00
|
|
|
|
this.countdown()
|
2023-12-23 18:17:19 +08:00
|
|
|
|
},
|
2023-11-30 15:02:21 +08:00
|
|
|
|
components: {
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
2023-12-26 18:44:50 +08:00
|
|
|
|
// 是否查看数字
|
|
|
|
|
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
|
|
|
|
|
}
|
|
|
|
|
// console.log(this.barCode)
|
|
|
|
|
},
|
2023-12-25 18:10:00 +08:00
|
|
|
|
// 倒计时刷新
|
|
|
|
|
countdown(){
|
|
|
|
|
let _this = this
|
2024-01-15 14:41:36 +08:00
|
|
|
|
_this.timer = setInterval(() => {
|
2023-12-25 18:10:00 +08:00
|
|
|
|
// 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
|
|
|
|
|
},
|
2023-12-23 18:17:19 +08:00
|
|
|
|
// 获取条码信息
|
|
|
|
|
getBarCode(){
|
|
|
|
|
request({
|
|
|
|
|
url: 'business/qrCode/createBarCode',
|
|
|
|
|
method: 'get',
|
|
|
|
|
}).then(res => {
|
2023-12-26 18:44:50 +08:00
|
|
|
|
// console.log(res,111)
|
2023-12-23 18:17:19 +08:00
|
|
|
|
this.option.code = res.data
|
2023-12-26 18:44:50 +08:00
|
|
|
|
this.barCode = res.data.slice(0,4) + " **** **** " + res.data.slice(res.data.length-5,res.data.length-1)
|
2023-12-23 18:17:19 +08:00
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
// 获取二维码信息
|
|
|
|
|
getQrCode(){
|
|
|
|
|
request({
|
|
|
|
|
url: 'business/qrCode/createQrCode',
|
|
|
|
|
method: 'get',
|
|
|
|
|
}).then(res => {
|
2023-12-26 18:44:50 +08:00
|
|
|
|
// console.log(2222,res)
|
2023-12-23 18:17:19 +08:00
|
|
|
|
this.options.code = res.data
|
|
|
|
|
})
|
|
|
|
|
},
|
2023-11-30 15:02:21 +08:00
|
|
|
|
close() {
|
|
|
|
|
console.log('弹出层收起');
|
|
|
|
|
this.show = false
|
|
|
|
|
},
|
|
|
|
|
open() {
|
|
|
|
|
console.log('弹出层打开');
|
|
|
|
|
},
|
|
|
|
|
bottomShow() {
|
|
|
|
|
this.show = true
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
goback() {
|
2024-01-15 14:41:36 +08:00
|
|
|
|
clearInterval(this.timer)
|
2023-11-30 15:02:21 +08:00
|
|
|
|
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;
|
|
|
|
|
}
|
2023-12-05 11:16:58 +08:00
|
|
|
|
</style>
|