韩飞给的全部页面
This commit is contained in:
xk_guohonglei
9
api/global.js
Normal file
9
api/global.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
const baseURL = 'https://www.51xingka.net/LSMOIL/'
|
||||||
|
const token = '123456'
|
||||||
|
const userSite = '林花落了春红，太匆匆'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
baseURL,
|
||||||
|
token,
|
||||||
|
userSite
|
||||||
|
}
|
||||||
1
main.js
1
main.js
@@ -2,6 +2,7 @@ import Vue from 'vue'
|
|||||||
import App from './App'
|
import App from './App'
|
||||||
import cuCustom from './colorui/components/cu-custom.vue'
|
import cuCustom from './colorui/components/cu-custom.vue'
|
||||||
import encode from '@/utils/encode'
|
import encode from '@/utils/encode'
|
||||||
|
import global from '@/api/global.js'
|
||||||
|
|
||||||
Vue.component('cu-custom',cuCustom)
|
Vue.component('cu-custom',cuCustom)
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name" : "wechat-oil",
|
"name" : "星油云站",
|
||||||
"appid" : "__UNI__EA8D131",
|
"appid" : "__UNI__EA8D131",
|
||||||
"description" : "",
|
"description" : "",
|
||||||
"versionName" : "1.0.0",
|
"versionName" : "1.0.0",
|
||||||
|
|||||||
26
pages.json
26
pages.json
@@ -1,35 +1,33 @@
|
|||||||
{
|
{
|
||||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||||
{
|
|
||||||
"path" : "pages/login/login",
|
|
||||||
"style" : {}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"path": "pages/index/index",
|
"path": "pages/index/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "星油"
|
"navigationBarTitleText": "星油"
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
|
"path": "pages/login/login",
|
||||||
|
"style": {}
|
||||||
|
},
|
||||||
|
{
|
||||||
"path": "pages/station-info/station-info",
|
"path": "pages/station-info/station-info",
|
||||||
"style": {}
|
"style": {}
|
||||||
}, {
|
}, {
|
||||||
"path": "pages/qrcode/qrcodeList/qrcodeList",
|
"path": "pages/qrcode/QrCode_xy",
|
||||||
"style": {}
|
|
||||||
}, {
|
|
||||||
"path": "pages/qrcode/QrCode_xy/QrCode_xy",
|
|
||||||
"style": {}
|
|
||||||
}
|
|
||||||
|
|
||||||
, {
|
|
||||||
"path": "pages/qrcode/QrCode-wjy/QrCode-wjy",
|
|
||||||
"style": {}
|
"style": {}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
{
|
{
|
||||||
"path": "pages/orderList/orderList",
|
"path": "pages/orderList/orderList",
|
||||||
"style": {}
|
"style": {}
|
||||||
}
|
}
|
||||||
|
|
||||||
],
|
,{
|
||||||
|
"path" : "pages/stationDetail/stationDetail",
|
||||||
|
"style" : {}
|
||||||
|
}
|
||||||
|
],
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
"mp-alipay": {
|
"mp-alipay": {
|
||||||
/* 支付宝小程序特有相关 */
|
/* 支付宝小程序特有相关 */
|
||||||
|
|||||||
@@ -41,7 +41,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="cu-list grid col-3 no-border margin radius ">
|
<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="['cuIcon-' + cuIconList[0].cuIcon, 'text-' + cuIconList[0].color]" class="text-sl">
|
||||||
<view class="cu-tag badge" v-if="cuIconList[0].badge != 0">
|
<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>
|
<block v-if="cuIconList[0].badge != 1">{{ cuIconList[0].badge > 99 ? '99+' : cuIconList[0].badge }}</block>
|
||||||
@@ -49,7 +49,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<text>{{ cuIconList[0].name }}</text>
|
<text>{{ cuIconList[0].name }}</text>
|
||||||
</view>
|
</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="['cuIcon-' + cuIconList[1].cuIcon, 'text-' + cuIconList[1].color]" class="text-sl">
|
||||||
<view class="cu-tag badge" v-if="cuIconList[1].badge != 0">
|
<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>
|
<block v-if="cuIconList[1].badge != 1">{{ cuIconList[1].badge > 99 ? '99+' : cuIconList[1].badge }}</block>
|
||||||
@@ -152,10 +152,16 @@
|
|||||||
uni.vibrate({
|
uni.vibrate({
|
||||||
success: function() {
|
success: function() {
|
||||||
console.log('success');
|
console.log('success');
|
||||||
|
this.routerTo('/pages/stationDetail/stationDetail')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
routerTo(url){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:url
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
77
pages/qrcode/QrCode_xy.vue
Normal file
77
pages/qrcode/QrCode_xy.vue
Normal file
@@ -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>
|
||||||
205
pages/stationDetail/stationDetail.vue
Normal file
205
pages/stationDetail/stationDetail.vue
Normal file
@@ -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>
|
||||||
Reference in New Issue
Block a user