parent
3b284be832
commit
68565b60b2
7 changed files with 313 additions and 17 deletions
@ -0,0 +1,9 @@ |
|||||||
|
const baseURL = 'https://www.51xingka.net/LSMOIL/' |
||||||
|
const token = '123456' |
||||||
|
const userSite = '林花落了春红,太匆匆' |
||||||
|
|
||||||
|
export default { |
||||||
|
baseURL, |
||||||
|
token, |
||||||
|
userSite |
||||||
|
} |
@ -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> |
@ -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> |
Loading…
Reference in new issue