首次提交
This commit is contained in:
xk_guohonglei
80
pages/stationList/components/PriceList.vue
Normal file
80
pages/stationList/components/PriceList.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<view class="flex" >
|
||||
<view class="flex-sub">
|
||||
|
||||
</view>
|
||||
<view class="flex-treble text-center">
|
||||
<view class="strong font-16 oil-main-color">
|
||||
￥5.81
|
||||
</view>
|
||||
<view class="radius text-center oil-card-price main-color-border">
|
||||
<text class="oil-free">
|
||||
省
|
||||
</text>
|
||||
<text class="free-money">
|
||||
七毛
|
||||
</text>
|
||||
</view>
|
||||
<view class="">
|
||||
星油油价
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-treble text-center">
|
||||
<view class="strong font-16 oil-main-color">
|
||||
￥5.81
|
||||
</view>
|
||||
<view class="radius text-center oil-card-price main-color-border">
|
||||
<text class="oil-free">
|
||||
省
|
||||
</text>
|
||||
<text class="free-money">
|
||||
七毛
|
||||
</text>
|
||||
</view>
|
||||
<view class="">
|
||||
万金油价
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-treble text-center">
|
||||
<view class="strong font-16 oil-main-color">
|
||||
￥5.81
|
||||
</view>
|
||||
<view class="radius oil-card-price main-color-border">
|
||||
<text class="oil-free">
|
||||
省
|
||||
</text>
|
||||
<text class="free-money">
|
||||
七毛
|
||||
</text>
|
||||
</view>
|
||||
<view class="">
|
||||
老吕油价
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
name:'PriceList'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.oil-card-price {
|
||||
max-width: 4rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.free-money {
|
||||
color: #FE0505;
|
||||
max-width: 3rem;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
}
|
||||
</style>
|
||||
138
pages/stationList/components/StationItem.vue
Normal file
138
pages/stationList/components/StationItem.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<view class="my-card my-cell radius">
|
||||
<view class="flex ">
|
||||
<view class="icon-self flex-sub margin-xs">
|
||||
<image src="https://www.51xingka.net/LSMOIL/static/img/oil.png" height="100px" width="100px" mode="widthFix"></image>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="flex-quadruple">
|
||||
<view class="navigation" @tap="openMap">
|
||||
10.2km|
|
||||
<image class="icon-self" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=907966196,3433585328&fm=11&gp=0.jpg"
|
||||
mode=""></image>
|
||||
导航
|
||||
</view>
|
||||
<view class="text-cut" style="width: 400upx;">
|
||||
<text class="strong">
|
||||
中国石化(紫云路)
|
||||
</text>
|
||||
</view>
|
||||
<view class="">
|
||||
<text class="">
|
||||
营业时间：00:00-23:59(紫云路)
|
||||
</text>
|
||||
</view>
|
||||
<view class="text-cut" style="width: 400upx;">
|
||||
<text class="">
|
||||
经开区紫云路与金寨南路交口向西经开区紫云路与金寨南路交口向西经开区紫云路与金寨南路交口向西经开区紫云路与金寨南路交口向西经开区紫云路与金寨南路交口向西经开区紫云路与金寨南路交口向西200米.....
|
||||
</text>
|
||||
</view>
|
||||
<view class="padding-top-xs">
|
||||
<text class="strong padding-right font-16">
|
||||
0#柴油
|
||||
</text>
|
||||
<text>市场价 </text>
|
||||
<text class="s-rich">￥6.5</text>
|
||||
</view>
|
||||
<view class="padding-bottom-xs">
|
||||
<text class="color-999 font-12">更新时间；2020-05-07,具体油价与工作人员确定</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<PriceList />
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PriceList from './PriceList'
|
||||
export default {
|
||||
components: {
|
||||
PriceList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
nodes: [{
|
||||
name: 'div',
|
||||
attrs: {
|
||||
class: 'div-class',
|
||||
style: 'line-height: 60px; color: red; text-align:center;'
|
||||
},
|
||||
children: [{
|
||||
type: 'text',
|
||||
text: 'Hello uni-app!'
|
||||
}]
|
||||
}],
|
||||
strings: '<div style="text-align:center;"><img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"/></div>'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 打开map地图
|
||||
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>
|
||||
.bottom-part {
|
||||
width: 750upx;
|
||||
position: absolute;
|
||||
bottom: 60rpx;
|
||||
}
|
||||
|
||||
.icon-self {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.my-card,
|
||||
.my-cell {
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.oil-card-price {
|
||||
max-width: 4rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.free-money {
|
||||
color: #FE0505;
|
||||
max-width: 3rem;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
}
|
||||
</style>
|
||||
61
pages/stationList/components/price-list.vue
Normal file
61
pages/stationList/components/price-list.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<view class="flex">
|
||||
<view class="flex-sub">
|
||||
|
||||
</view>
|
||||
<view class="flex-treble text-center">
|
||||
<view class="strong font-16 oil-main-color">
|
||||
￥5.81
|
||||
</view>
|
||||
<view class="radius text-center oil-card-price main-color-border">
|
||||
<text class="oil-free">
|
||||
省
|
||||
</text>
|
||||
<text class="free-money">
|
||||
七毛
|
||||
</text>
|
||||
</view>
|
||||
<view class="">
|
||||
星油油价
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-treble text-center">
|
||||
<view class="strong font-16 oil-main-color">
|
||||
￥5.81
|
||||
</view>
|
||||
<view class="radius text-center oil-card-price main-color-border">
|
||||
<text class="oil-free">
|
||||
省
|
||||
</text>
|
||||
<text class="free-money">
|
||||
七毛
|
||||
</text>
|
||||
</view>
|
||||
<view class="">
|
||||
万金油价
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-treble text-center">
|
||||
<view class="strong font-16 oil-main-color">
|
||||
￥5.81
|
||||
</view>
|
||||
<view class="radius oil-card-price main-color-border">
|
||||
<text class="oil-free">
|
||||
省
|
||||
</text>
|
||||
<text class="free-money">
|
||||
七毛
|
||||
</text>
|
||||
</view>
|
||||
<view class="">
|
||||
老吕油价
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
205
pages/stationList/stationDetail/stationDetail.vue
Normal file
205
pages/stationList/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>
|
||||
128
pages/stationList/stationList.vue
Normal file
128
pages/stationList/stationList.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<view class="my-bg">
|
||||
<cu-custom class="main-topbar bg-main-oil" isBack bgColor="bg-main-oil">
|
||||
<block slot="content">附近加油站</block>
|
||||
<block slot="backText">返回</block>
|
||||
</cu-custom>
|
||||
<view class="cu-bar search bg-white">
|
||||
<view class="search-form round">
|
||||
<text class="cuIcon-search"></text>
|
||||
<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="加油站名称" confirm-type="search"></input>
|
||||
</view>
|
||||
<view class="action" @tap="toMap">
|
||||
<image class="icon shadow-blur round icon-gasstation" src="https://www.51xingka.net/LSMOIL/static/img/gas-station.png"
|
||||
mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class=" solids-bottom shadow ">
|
||||
<dropdownMenu>
|
||||
<dropdownItem :title="title1" v-model="val1" :list="typeList" @input="typeSelect" @close="show = false" />
|
||||
<dropdownItem :title="title2" v-model="val2" :list="nameLsit" @input="nameSelect" @close="show = false" />
|
||||
<dropdownItem :title="title3" :list="option3" v-model="val3" @input="optionSelect" @close="show = false" />
|
||||
</dropdownMenu>
|
||||
</view>
|
||||
<view class="" @tap="toDetail">
|
||||
<StationItem />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StationItem from './components/StationItem.vue'
|
||||
import dropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
|
||||
import dropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
StationItem,
|
||||
dropdownItem,
|
||||
dropdownMenu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
val3: 'distance',
|
||||
val1: 'distance',
|
||||
val2: 'distance',
|
||||
title1: "0#",
|
||||
title2: "距离最近",
|
||||
title3: "综合排序",
|
||||
typeList: [{
|
||||
text: '距离最近',
|
||||
value: 'distance'
|
||||
},
|
||||
{
|
||||
text: '价格最低',
|
||||
value: 'price'
|
||||
}
|
||||
],
|
||||
nameLsit: [{
|
||||
text: '全部品牌',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
text: '距离最近',
|
||||
value: 'distance'
|
||||
},
|
||||
{
|
||||
text: '价格最低',
|
||||
value: 'price'
|
||||
}
|
||||
],
|
||||
option3: [{
|
||||
text: '距离最近',
|
||||
value: 'distance'
|
||||
},
|
||||
{
|
||||
text: '价格最低',
|
||||
value: 'price'
|
||||
}
|
||||
],
|
||||
InputBottom: 0,
|
||||
chooseList: ['1', '2'],
|
||||
arr: ['出', '入'],
|
||||
show: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toDetail(){
|
||||
uni.navigateTo({
|
||||
url: './stationDetail/stationDetail',
|
||||
})
|
||||
},
|
||||
nameSelect(value, item) {
|
||||
this.title2 = item.text
|
||||
console.log(item)
|
||||
},
|
||||
typeSelect(value, item) {
|
||||
console.log(item)
|
||||
this.title1 = item.text
|
||||
},
|
||||
optionSelect(value, item) {
|
||||
console.log(item)
|
||||
this.title3 = item.text
|
||||
},
|
||||
toMap() {
|
||||
uni.navigateTo({
|
||||
url: '../index/index',
|
||||
})
|
||||
},
|
||||
InputFocus(e) {
|
||||
this.InputBottom = e.detail.height
|
||||
console.log(e.detail)
|
||||
console.log(this.InputBottom)
|
||||
},
|
||||
InputBlur(e) {
|
||||
this.InputBottom = 0
|
||||
console.log(this.InputBottom)
|
||||
console.log(e.detail)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon-gasstation {
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user