You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
3.5 KiB
138 lines
3.5 KiB
<template> |
|
<view class="page-content bg-main-oil"> |
|
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil"> |
|
<block slot="backText">返回</block> |
|
<block slot="content">油站二维码</block> |
|
</cu-custom> |
|
<view class="margin-xl padding radius bg-white"> |
|
<view class="text-center padding"> |
|
<text class="text-lg text-black">{{oilSiteName}}</text> |
|
</view> |
|
<view class="qr-container padding-top text-center "> |
|
<view class="qrimg"> |
|
<tki-qrcode ref="qrcode" :val="val" :size="400" unit="upx" background="#fff" foreground="#000" pdground="#000" |
|
:icon="iconUrl" iconSize="40" :onval="true" :loadMake="true" :usingComponents="usingComponents" :showLoading="true" |
|
@result="qrR" /> |
|
</view> |
|
</view> |
|
<view class="text-center padding-bottom-xs padding-bottom-xs"> |
|
<text class="color-999 font-12"> |
|
<text class="cuIcon-refresh padding-right-xs"></text> |
|
付款码自动 （25s） |
|
<text class="oil-main-color"> |
|
刷新 |
|
</text> |
|
</text> |
|
</view> |
|
<view class="text-center color-000 font-10 margin-bottom-sm"> |
|
提示：司机扫描二维码支付油费 |
|
</view> |
|
<view class="padding font-12 solid-top"> |
|
<view class="flex padding-bottom-sm padding-left padding-right"> |
|
<view class="flex-sub"> |
|
<text class="cuIcon-moneybagfill oil-main-color font-16 padding-right-xs"> |
|
|
|
</text> |
|
<text> |
|
加油金额 |
|
</text> |
|
</view> |
|
|
|
<view class="text-right flex-sub oil-main-color"> |
|
￥1.20 |
|
</view> |
|
</view> |
|
<view class="flex padding-left padding-right"> |
|
<view class="flex-sub"> |
|
<text class="cuIcon-infofill color-wjy font-16 padding-right-xs"> |
|
|
|
</text> |
|
<text> |
|
加油升数 |
|
</text> |
|
</view> |
|
|
|
|
|
<text class="text-right flex-sub"> |
|
约56.00L |
|
</text> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="margin-xl padding-top"> |
|
<button class="bg-white oil-main-color" @tap="modalName='show'">设置油品加油升数</button> |
|
</view> |
|
<view class="cu-modal" :class="modalName"> |
|
<view class="cu-dialog"> |
|
<view class="cu-bar bg-white justify-end"> |
|
<view class="content "> |
|
{{oilSiteName}} |
|
</view> |
|
<view class="action" @tap="hideModal"> |
|
<text class="cuIcon-close text-red"></text> |
|
</view> |
|
</view> |
|
<view class="text-left padding-bottom padding-top-0 bg-white"> |
|
<OrderOilForm /> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import OrderOilForm from '@/components/OrderOil.vue' |
|
// 引入二维码库 |
|
import QR from "@/utils/wxqrcode.js" // 二维码生成器 |
|
|
|
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue" |
|
|
|
export default { |
|
components: { |
|
OrderOilForm, |
|
tkiQrcode |
|
}, |
|
data() { |
|
return { |
|
modalName: 'mod', |
|
oilSiteName: '', |
|
qrImg: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1102530589,2787379918&fm=11&gp=0.jpg", |
|
val: '羊的屎是猪', |
|
iconUrl: '../../static/img/qr-icon.png' |
|
|
|
} |
|
}, |
|
onLoad() { |
|
this.oilSiteName = uni.getStorageSync('oilSiteName') |
|
}, |
|
methods: { |
|
hideModal() { |
|
this.modalName = '' |
|
}, |
|
qrR() { |
|
console.log('5555') |
|
}, |
|
qrInit() { |
|
this.qrImg = QR.createQrCodeImg('我是您粑粑', { |
|
size: parseInt(300) //二维码大小 |
|
}) |
|
console.log('this.qrImg', this.qrImg) |
|
this.modalName = '' |
|
} |
|
|
|
} |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
.page-content { |
|
min-height: 100%; |
|
} |
|
|
|
.qr-img { |
|
width: 400upx; |
|
height: 400rpx; |
|
margin: auto; |
|
} |
|
</style>
|
|
|