2024-08-16 18:26:19 +08:00
|
|
|
|
<template>
|
2024-09-21 11:33:14 +08:00
|
|
|
|
<view class="content">
|
|
|
|
|
|
<view class="container">
|
|
|
|
|
|
<!-- <view class="my-header">
|
2024-09-20 17:52:19 +08:00
|
|
|
|
<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> -->
|
2024-09-21 11:33:14 +08:00
|
|
|
|
<!-- 顶部区域 -->
|
|
|
|
|
|
<view class="title_"><!-- 付款码 --></view>
|
|
|
|
|
|
<!-- <view class="size_">结账时请出示</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="#E02020" 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="show = !show">
|
|
|
|
|
|
<image src="@/static/icon/card.png" style="width: 30px;height: 25px;">
|
|
|
|
|
|
<view style="margin-left: 15px;" v-if="value=='oilStorageCard'">
|
|
|
|
|
|
<view>{{deduction[0].value}}</view>
|
|
|
|
|
|
<view class="h_siz">{{deduction[0].desc}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view style="margin-left: 15px;" v-if="value=='balance'">
|
|
|
|
|
|
<view>{{deduction[1].value}}</view>
|
|
|
|
|
|
<view class="h_siz">{{deduction[1].desc}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<view class="v-bottom-box">
|
|
|
|
|
|
<u-icon name="warning-fill" size="25px" color="#FF9655"></u-icon>
|
|
|
|
|
|
<view style="width: 80%;margin-left: 10px;">付款码有效时长60秒，切勿截屏使用</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" style="justify-content: space-between;" v-for="(item,index) in deduction" :key="index"
|
|
|
|
|
|
@click="choosePayMethod(item.key)">
|
|
|
|
|
|
<view style="display: flex;align-items: center;">
|
|
|
|
|
|
<image src="@/static/icon/card.png" style="width: 30px;height: 25px;">
|
|
|
|
|
|
<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>
|
2024-08-16 18:26:19 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
2024-09-21 11:33:14 +08:00
|
|
|
|
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: "oilStorageCard",
|
|
|
|
|
|
value: "优先使用囤油卡付款",
|
2024-10-14 14:11:37 +08:00
|
|
|
|
desc: "若囤油卡升数不足时，则无法使用囤油卡支付"
|
2024-09-21 11:33:14 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
key: "balance",
|
|
|
|
|
|
value: "储值卡扣款",
|
|
|
|
|
|
desc: ""
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
value: "oilStorageCard",
|
|
|
|
|
|
barCode: "",
|
|
|
|
|
|
isLook: false,
|
|
|
|
|
|
timer: {},
|
|
|
|
|
|
cardBalance: {},
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
onLoad() {
|
|
|
|
|
|
this.getBarCode()
|
|
|
|
|
|
this.getQrCode()
|
|
|
|
|
|
this.countdown()
|
|
|
|
|
|
// this.getUserInfo()
|
|
|
|
|
|
},
|
|
|
|
|
|
components: {
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
// 跳转会员充值
|
|
|
|
|
|
goMemberRecharge() {
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
url: '/pagesHome/memberRecharge/index'
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
// 查询用户储值卡余额信息
|
|
|
|
|
|
getUserInfo() {
|
|
|
|
|
|
request({
|
|
|
|
|
|
url: '/business/userManager/user/getUserBalanceApplet',
|
|
|
|
|
|
method: 'get',
|
|
|
|
|
|
params: this.query
|
|
|
|
|
|
}).then(res => {
|
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
|
this.cardBalance = res.data
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
// 是否查看数字
|
|
|
|
|
|
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()
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2024-08-16 18:26:19 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
2024-09-21 11:33:14 +08:00
|
|
|
|
.button_c {
|
|
|
|
|
|
width: 60px;
|
|
|
|
|
|
height: 30px;
|
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
background-color: #FF9655;
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.content {
|
|
|
|
|
|
background: #f4f5f6;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.container {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
// padding-top: 88px;
|
|
|
|
|
|
background-color: #ff9655;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.my-header {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 88px;
|
|
|
|
|
|
background: #ff9655;
|
|
|
|
|
|
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;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.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 8px;
|
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
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;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.title_ {
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
height: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.size_ {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.h_siz {
|
|
|
|
|
|
color: #666666;
|
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.x_sz {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
