已对接6个接口

准备回复订单详情页面

pages/qrcode/QrCode_xy.vue

@@ -2,22 +2,30 @@
 	<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>
+			<block slot="content">油站二维码</block>
 		</cu-custom>
-		<view class="margin radius bg-white">
-			<view class="qr-container margin padding-xl padding-bottom-xs padding-top">
-				<image class="padding-xl padding-bottom-sm" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597122816612&di=796a08dc7fbedf19a48c3f9d04089455&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F37%2F28%2F39573c44ad6d806.jpg"
-				 mode=""></image>
+		<view class="margin-xl padding radius bg-white">
+			<view class="text-center padding">
+				<text class="text-lg text-black">{{oilSiteName}}</text>
 			</view>
-			<view class="text-center padding-bottom-sm">
-				<text class="color-999 font-12">付款码自动 （25s）
-					<block class="oil-main-color">
+			<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">
 						刷新
-					</block>
+					</text>
 				</text>
 			</view>
-			<view class="text-center color-000 font-10 margin-bottom">
-				提示：将二维码想油站工作人员展示即可加油
+			<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">
@@ -26,7 +34,7 @@
 
 						</text>
 						<text>
-							星油余额
+							加油金额
 						</text>
 					</view>
 
@@ -37,34 +45,81 @@
 				<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-top-xl padding">
-			<button class="bg-white oil-main-color">转入</button>
+
+		<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 = ''
+			}
 
 		}
 	}
@@ -74,4 +129,10 @@
 	.page-content {
 		min-height: 100%;
 	}
+
+	.qr-img {
+		width: 400upx;
+		height: 400rpx;
+		margin: auto;
+	}
 </style>