From 68565b60b23e522985350ca56c25afa3cc4e64eb Mon Sep 17 00:00:00 2001
From: xk_guohonglei <2057494155@qq.com>
Date: Tue, 18 Aug 2020 18:17:09 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9F=A9=E9=A3=9E=E7=BB=99=E7=9A=84=E5=85=A8?=
 =?UTF-8?q?=E9=83=A8=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/global.js                         |   9 ++
 main.js                               |   1 +
 manifest.json                         |   2 +-
 pages.json                            |  26 ++--
 pages/index/index.vue                 |  10 +-
 pages/qrcode/QrCode_xy.vue            |  77 ++++++++++
 pages/stationDetail/stationDetail.vue | 205 ++++++++++++++++++++++++++
 7 files changed, 313 insertions(+), 17 deletions(-)
 create mode 100644 api/global.js
 create mode 100644 pages/qrcode/QrCode_xy.vue
 create mode 100644 pages/stationDetail/stationDetail.vue

diff --git a/api/global.js b/api/global.js
new file mode 100644
index 0000000..02d7320
--- /dev/null
+++ b/api/global.js
@@ -0,0 +1,9 @@
+const baseURL = 'https://www.51xingka.net/LSMOIL/'
+const token = '123456'
+const userSite = '林花落了春红，太匆匆'
+
+export default {
+  baseURL,
+  token,
+  userSite
+}
\ No newline at end of file
diff --git a/main.js b/main.js
index 4f5401a..562cbfe 100644
--- a/main.js
+++ b/main.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import App from './App'
 import cuCustom from './colorui/components/cu-custom.vue'
 import encode from '@/utils/encode'
+import global from '@/api/global.js'
 
 Vue.component('cu-custom',cuCustom)
 Vue.config.productionTip = false
diff --git a/manifest.json b/manifest.json
index 3eb93ef..40d0255 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,5 +1,5 @@
 {
-    "name" : "wechat-oil",
+    "name" : "星油云站",
     "appid" : "__UNI__EA8D131",
     "description" : "",
     "versionName" : "1.0.0",
diff --git a/pages.json b/pages.json
index e70046f..442c546 100644
--- a/pages.json
+++ b/pages.json
@@ -1,35 +1,33 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-		{
-		    "path" : "pages/login/login",
-		    "style" : {}
-		},
 		{
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarTitleText": "星油"
 			}
 		}, {
-			"path": "pages/station-info/station-info",
+			"path": "pages/login/login",
 			"style": {}
-		}, {
-			"path": "pages/qrcode/qrcodeList/qrcodeList",
+		},
+		{
+			"path": "pages/station-info/station-info",
 			"style": {}
 		}, {
-			"path": "pages/qrcode/QrCode_xy/QrCode_xy",
-			"style": {}
-		}
-
-		, {
-			"path": "pages/qrcode/QrCode-wjy/QrCode-wjy",
+			"path": "pages/qrcode/QrCode_xy",
 			"style": {}
 		},
+
+
 		{
 			"path": "pages/orderList/orderList",
 			"style": {}
 		}
 
-	],
+	    ,{
+            "path" : "pages/stationDetail/stationDetail",
+            "style" : {}
+        }
+    ],
 	"globalStyle": {
 		"mp-alipay": {
 			/* 支付宝小程序特有相关 */
diff --git a/pages/index/index.vue b/pages/index/index.vue
index a7593df..73b06d8 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -41,7 +41,7 @@
 		</view>
 
 		<view class="cu-list grid col-3 no-border  margin  radius ">
-			<view class="cu-item">
+			<view class="cu-item"  @tap="routerTo('/pages/station-info/station-info')">
 				<view :class="['cuIcon-' + cuIconList[0].cuIcon, 'text-' + cuIconList[0].color]" class="text-sl">
 					<view class="cu-tag badge" v-if="cuIconList[0].badge != 0">
 						<block v-if="cuIconList[0].badge != 1">{{ cuIconList[0].badge > 99 ? '99+' : cuIconList[0].badge }}</block>
@@ -49,7 +49,7 @@
 				</view>
 				<text>{{ cuIconList[0].name }}</text>
 			</view>
-			<view class="cu-item">
+			<view class="cu-item" @tap="routerTo('/pages/orderList/orderList')">
 				<view :class="['cuIcon-' + cuIconList[1].cuIcon, 'text-' + cuIconList[1].color]" class="text-sl">
 					<view class="cu-tag badge" v-if="cuIconList[1].badge != 0">
 						<block v-if="cuIconList[1].badge != 1">{{ cuIconList[1].badge > 99 ? '99+' : cuIconList[1].badge }}</block>
@@ -152,10 +152,16 @@
 						uni.vibrate({
 							success: function() {
 								console.log('success');
+								this.routerTo('/pages/stationDetail/stationDetail')
 							}
 						})
 					}
 				})
+			},
+			routerTo(url){
+				uni.navigateTo({
+					url:url
+				})
 			}
 		}
 	};
diff --git a/pages/qrcode/QrCode_xy.vue b/pages/qrcode/QrCode_xy.vue
new file mode 100644
index 0000000..c76ea8b
--- /dev/null
+++ b/pages/qrcode/QrCode_xy.vue
@@ -0,0 +1,77 @@
+<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 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>
+			<view class="text-center padding-bottom-sm">
+				<text class="color-999 font-12">付款码自动 （25s）
+					<block class="oil-main-color">
+						刷新
+					</block>
+				</text>
+			</view>
+			<view class="text-center color-000 font-10 margin-bottom">
+				提示：将二维码想油站工作人员展示即可加油
+			</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">
+						星油/老吕油站
+					</text>
+				</view>
+			</view>
+		</view>
+		<view class="margin-top-xl padding">
+			<button class="bg-white oil-main-color">转入</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style scoped>
+	.page-content {
+		min-height: 100%;
+	}
+</style>
diff --git a/pages/stationDetail/stationDetail.vue b/pages/stationDetail/stationDetail.vue
new file mode 100644
index 0000000..11c2b48
--- /dev/null
+++ b/pages/stationDetail/stationDetail.vue
@@ -0,0 +1,205 @@
+<template>
+	<view class="content">
+		<cu-custom class="main-topbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
+			<block slot="backText">返回</block>
+			<block slot="content">中石化紫云路</block>
+		</cu-custom>
+		
+		<!--  -->
+		<view class="my-cell padding-top padding-bottom radius">
+			<view class="strong padding-bottom-xs">
+				中国石化(紫云路)
+			</view>
+			<view class="font-12 color-999">
+				<text class="padding-right">1.32km</text> | <text class="padding-left text-cut">紫云路与金寨南路交口向西200...</text>
+			</view>
+			<view class="navigation" @tap="openMap">
+				<image class="icon-self" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=907966196,3433585328&fm=11&gp=0.jpg"
+				 mode=""></image>
+				导航
+			</view>
+		</view>
+		<!--  -->
+		<view class="padding-top-xs padding-bottom my-bg">
+			<view class="bg-white padding">
+
+				<view class="padding-bottom-sm">
+					油号选择：
+				</view>
+				<view class="grid col-5 justify-start">
+
+					<view class="padding-xs" v-for="(item,index) in ColorList" :key="index">
+						<button class="cu-btn" :class="[active===index?'bg-red':'line-gray']">0#</button>
+					</view>
+
+				</view>
+				<view class="padding-top-xs">
+					<text class="strong padding-right font-16">
+						0#柴油
+					</text>
+					<text class="s-rich">市场价￥6.5</text>
+				</view>
+				<view class="flex margin-top">
+					<view class="flex-treble text-center oil-price" @tap="selectRadio">
+						<view class="strong font-16 oil-main-color">
+							￥5.81
+						</view>
+						<radio class="red" :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false" value="A"></radio>
+						<view class="">
+							星油油价
+						</view>
+					</view>
+					<view class="flex-treble text-center  oil-price" @tap="selectRadio">
+						<view class="strong font-16  oil-main-color">
+							￥5.81
+						</view>
+						<radio class="red" :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false" value="A"></radio>
+						<view class="">
+							万金油价
+						</view>
+					</view>
+					<view class="flex-treble  oil-price text-center" @tap="selectRadio">
+						<view class="strong font-16  oil-main-color">
+							￥5.81
+						</view>
+						<radio class="red" :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false" value="A"></radio>
+						<view class="">
+							老吕油价
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="padding margin-top-xs margin-bottom-xs bg-white">
+				<view class="padding-bottom-sm">
+					油枪选择：
+				</view>
+				<view class="grid col-5 justify-start">
+
+					<view class="padding-xs" v-for="(item,index) in ColorList" :key="index">
+						<button class="cu-btn" :class="[active===index?'bg-red':'line-gray']">{{index}}</button>
+					</view>
+				</view>
+			</view>
+			<view class="margin-top-xs padding margin-bottom-xs bg-white">
+				<view class=" shadow-warp ">
+					<view class="cu-form-group">
+						<view class="title">加油升数</view>
+						<input placeholder="请输入加油升数" name="input"></input>
+						<text>约￥0.00</text>
+					</view>
+					<view class="my-cell">
+						<text class="font-12">星卡优惠金额</text><text class="fr">-￥0.00</text>
+					</view>
+					<view class="my-cell">
+						<text class="font-12">实际支付金额</text><text class="oil-main-color fr">￥0.00</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 底部去支付 -->
+		<view class="bottom-pay my-bg shadow padding-top">
+
+			<view class="flex bg-white padding pay-bar">
+				<text class="lg cuIcon-qr_code oil-main-color qr-icon padding-right"></text>
+				<view class="flex-twice pay-desc">
+					<text>付款码支付</text>
+					<text class="oil-main-color fr">￥0.00</text>
+				</view>
+				<view class="flex-sub text-right">
+					<button size="mini" class="bg-red">去支付</button>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				radio: 'B',
+				active: 0,
+				ColorList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+			}
+		},
+		methods: {
+			selectRadio() {
+				this.radio === 'A' ? this.radio = '' : this.radio = 'A'
+			},
+			openMap() {
+				let that = this
+				uni.openLocation({
+					latitude: 117,
+					longitude: 21,
+					name: '江西景德镇',
+					address: '九龙路1188号',
+					scale: 12,
+					success: function() {
+						console.log('success')
+					},
+					fail: (error) => {
+						console.log('error')
+						console.log(error)
+					},
+					complete: () => {
+
+						console.log('made')
+					},
+
+				})
+
+				var map = uni.createMapContext('map')
+				map.moveToLocation()
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.content {
+		background-color: #F1F2F7;
+		min-height: 100%;
+		position: relative;
+	}
+
+	.navigation {
+		position: absolute;
+		right: 16px;
+		top: 10px;
+	}
+
+	.icon-self {
+		width: 1rem;
+		height: 1rem;
+	}
+
+	.oil-price {
+		position: relative;
+	}
+
+	.oil-price radio {
+		position: absolute;
+		left: 0rem;
+		top: 10px;
+	}
+
+	.qr-icon {
+		font-size: 2rem;
+	}
+
+	.pay-desc {
+		line-height: 2rem;
+	}
+
+	.bottom-pay {
+		min-height: 100rpx;
+		width: 750upx;
+	}
+
+	.pay-bar {
+		width: 750upx;
+		position: absolute;
+		bottom: 0;
+	}
+</style>