1.对接团油

yj-dev
杨杰 3 years ago
parent b4b58e69b1
commit 93098c18dd
  1. 12
      components/sl-filter/filter-view.vue
  2. 174
      pages/goods/refuel-details/refuel-details.vue
  3. 165
      pages/goods/refuel/refuel.vue
  4. 2
      pages/tabBar/home/home.vue
  5. 6
      uni.scss

@ -12,9 +12,9 @@
</view> </view>
</view> </view>
<view v-else> <view v-else>
<!-- <view class="filter-content-title" v-if="item.detailTitle && item.detailTitle.length"> <view class="filter-content-title" v-if="item.detailTitle && item.detailTitle.length">
<text>{{item.detailTitle}}</text> <text>{{item.detailTitle}}</text>
</view> --> </view>
<view class="filter-content-detail"> <view class="filter-content-detail">
<text v-for="(detailItem,idx) in selectDetailList" :key="idx" class='filter-content-detail-item-default' :style="{'background-color':detailItem.isSelected?themeColor:'#f6f6f6','color':detailItem.isSelected?'#FFFFFF':'#999999'}" <text v-for="(detailItem,idx) in selectDetailList" :key="idx" class='filter-content-detail-item-default' :style="{'background-color':detailItem.isSelected?themeColor:'#f6f6f6','color':detailItem.isSelected?'#FFFFFF':'#999999'}"
@tap="itemTap(idx,selectDetailList,item.isMutiple,item.key)"> @tap="itemTap(idx,selectDetailList,item.isMutiple,item.key)">
@ -407,10 +407,10 @@
color: #FFFFFF; color: #FFFFFF;
padding: 5px 15px; padding: 5px 15px;
border-radius: 20px; border-radius: 20px;
margin-right: 10px; margin-right: 8px;
margin-top: 10px; margin-top: 10px;
display: inline-block; display: inline-block;
font-size: 14px; font-size: 13px;
} }
.filter-content-detail-item-default { .filter-content-detail-item-default {
@ -418,10 +418,10 @@
color: #666666; color: #666666;
padding: 5px 15px; padding: 5px 15px;
border-radius: 5px; border-radius: 5px;
margin-right: 10px; margin-right: 8px;
margin-top: 10px; margin-top: 10px;
display: inline-block; display: inline-block;
font-size: 14px; font-size: 13px;
} }
.filter-content-footer { .filter-content-footer {

@ -1,15 +1,15 @@
<template> <template>
<view> <view>
<image mode="widthFix" class="width100" src="../../../static/img/banner3.png" @click="showPopup"></image> <image mode="widthFix" class="width100" :src="storeList.gasLogoSmall"></image>
<view class="height100p titlecon backcorfff"> <view class="height100p titlecon backcorfff">
<view class="height60 paddtop25 width90"> <view class="height60 paddtop25 width90">
<view class="flleft width85"> <view class="flleft width80p">
<view class="width100 text1 font18 fontwig6 fcor333">乌江能源加油站(大一型国企)</view> <view class="width100 text1 font18 fontwig6 fcor333">{{storeList.gasName}}</view>
<view class="width100 font14 fcor666 mart5">贵州省贵阳市什么什么大道65号</view> <view class="width100 font14 fcor666 mart5">{{storeList.gasAddress}}</view>
</view> </view>
<view class="flright reimg fotct width15"> <view class="flright reimg fotct width20">
<image mode="widthFix" src="../../../static/img/dhl.png"></image> <image mode="widthFix" src="../../../static/img/dhl.png"></image>
<view class="fcor089">1.9km</view> <view class="fcor089">{{storeList.distance}}km</view>
</view> </view>
</view> </view>
<view class="fcor999 font14 width90"> <view class="fcor999 font14 width90">
@ -19,20 +19,21 @@
<!-- 标价 --> <!-- 标价 -->
<view class="width90 relbj"> <view class="width90 relbj">
<view class="height60"> <view class="height60">
<view class="flleft mart10 bjcss font16 fontwig6"> <view class="flleft mart10 bjcss font16 fontwig6" @click="showPopup(1)">
92# <image mode="widthFix" src="../../../static/img/xiala.png"></image> {{oilNo}}
<image mode="widthFix" src="../../../static/img/xiala.png"></image>
</view> </view>
<view class="margle20 font15 fcoreb5 flleft mart20 borRit"> <view class="margle20 font15 fcoreb5 flleft mart20 borRit">
<view class="fontspec fotct ">团购价</view> <view class="fontspec fotct ">团购价</view>
<view class="fontwig6 font20"><text class="font14"></text>6.38</view> <view class="fontwig6 font20"><text class="font14"></text>{{priceVip}}</view>
</view> </view>
<view class="margle20 font15 fcor666 flleft mart20 borRit"> <view class="margle20 font15 fcor666 flleft mart20 borRit">
<view class="fontspec fotct ">油站价</view> <view class="fontspec fotct ">油站价</view>
<view class="fontwig6 font20"><text class="font14"></text>6.88</view> <view class="fontwig6 font20"><text class="font14"></text>{{priceGun}}</view>
</view> </view>
<view class="margle20 font15 fcor666 flleft mart20 "> <view class="margle20 font15 fcor666 flleft mart20 ">
<view class="fontspec fotct ">国标价</view> <view class="fontspec fotct ">国标价</view>
<view class="fontwig6 font20"><text class="font14"></text>6.88</view> <view class="fontwig6 font20"><text class="font14"></text>{{priceOfficial}}</view>
</view> </view>
</view> </view>
</view> </view>
@ -40,20 +41,20 @@
<!-- 我要加油 --> <!-- 我要加油 -->
<view class="width90 mart15 font16 fcor666">我要加油</view> <view class="width90 mart15 font16 fcor666">我要加油</view>
<view class="width90 relbj mart15"> <view class="width90 relbj mart15">
<view class="width50 flleft fotct"> <view class="width50 flleft fotct" @click="showPopup(1)">
<view class="width100 fcor999 font14 mart10">选择油号</view> <view class="width100 fcor999 font14 mart10">选择油号</view>
<view class="width100 mart10"> <view class="width100 mart10">
<image mode="widthFix" style="width: 20px;" src="../../../static/img/yhl.png"></image> <image mode="widthFix" style="width: 20px;" src="../../../static/img/yhl.png"></image>
<text class="font20 fcor333 fontwig6 margle">92#</text> <text class="font20 fcor333 fontwig6 margle">{{oilNo}}</text>
<image mode="widthFix" class="margle" style="width: 10px; " src="../../../static/img/xiala.png"> <image mode="widthFix" class="margle" style="width: 10px; " src="../../../static/img/xiala.png">
</image> </image>
</view> </view>
</view> </view>
<view class="width50 flright fotct"> <view class="width50 flright fotct" @click="showPopup(2)">
<view class="width100 fcor999 font14 mart10">选择油枪</view> <view class="width100 fcor999 font14 mart10">选择油枪</view>
<view class="width100 mart10 "> <view class="width100 mart10 ">
<image mode="widthFix" style="width: 20px;" src="../../../static/img/yql.png"></image> <image mode="widthFix" style="width: 20px;" src="../../../static/img/yql.png"></image>
<text class="font20 fcor333 fontwig6 margle">2</text> <text class="font20 fcor333 fontwig6 margle">{{gunNo}}</text>
<image mode="widthFix" class="margle" style="width: 10px; " src="../../../static/img/xiala.png"> <image mode="widthFix" class="margle" style="width: 10px; " src="../../../static/img/xiala.png">
</image> </image>
</view> </view>
@ -74,8 +75,6 @@
<view class="box" v-for="(amount,index) in amountList" :key="index" @click="select(amount)" <view class="box" v-for="(amount,index) in amountList" :key="index" @click="select(amount)"
:class="{'on':amount.id == inputAmount}"> :class="{'on':amount.id == inputAmount}">
<view class="heTitle fcor333" :class="{'fcor089':amount.id == inputAmount}">{{amount.price}}</view> <view class="heTitle fcor333" :class="{'fcor089':amount.id == inputAmount}">{{amount.price}}</view>
<view class="mitext fcor999" :class="{'fcor089':amount.id == inputAmount}">最高优惠{{amount.realPrice}}
</view>
</view> </view>
</view> </view>
<view class="height60 width100"></view> <view class="height60 width100"></view>
@ -88,93 +87,122 @@
</view> </view>
<!-- 底部弹窗 --> <!-- 底部弹窗 -->
<wybPopup ref="popup" type="bottom" height="600" width="500" radius="6" :showCloseIcon="true"> <wybPopup ref="popup" type="bottom" height="600" width="500" radius="6" :showCloseIcon="true">
<view class="fotct font18 fontwig6 fcor333 mart10 height30">选择油号</view> <view class="fotct font18 fontwig6 fcor333 mart10 height30" v-if="typeId == 1">选择油号</view>
<view class="font15 fcor666 width90 mart10 height22">汽油油号</view> <view class="fotct font18 fontwig6 fcor333 mart10 height30" v-if="typeId == 2">选择油枪</view>
<view :class="swiper.value == detailsId?'activeRefuel':'refuel'" v-for="(swiper,index) in detailList" <view class="font15 fcor666 width90 mart10 height22" v-if="typeId == 1">汽油油号</view>
:key="index" @click="changeValue(swiper)"> <view class="font15 fcor666 width90 mart10 height22" v-if="typeId == 2">汽油油枪</view>
{{swiper.value}} <view v-if="typeId == 1">
<view :class="swiper.oilNoName == oilNo?'activeRefuel':'refuel'" v-for="(swiper,index) in detailList"
:key="index" @click="changeValue(swiper)">
{{swiper.oilNoName}}
</view>
</view>
<view v-if="typeId == 2">
<view :class="item.gunNo == gunNo?'activeRefuel':'refuel'" v-for="(item,index) in gunnumber"
:key="index" @click="changeValue2(item)">
{{item.gunNo}}
</view>
</view> </view>
</wybPopup> </wybPopup>
</view> </view>
</template> </template>
<script> <script>
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue' import {
getGasDetailByStoreKey
} from '../../../Utils/Api.js';
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue';
let app = getApp();
export default { export default {
components: { components: {
wybPopup wybPopup
}, },
data() { data() {
return { return {
detailList: [{ detailList: [],
'title': '不限', gunnumber: [],
'value': '不限'
}, {
'title': '89#',
'value': '89#'
}, {
'title': '92#',
'value': '92#'
}, {
'title': '95#',
'value': '95#'
}, {
'title': '98#',
'value': '98#'
}],
gunnumber: [{
'title': '1号',
'value': '1号'
}, {
'title': '2号',
'value': '2号'
}, {
'title': '3号',
'value': '3号'
}, {
'title': '4号',
'value': '4号'
}, {
'title': '5号',
'value': '5号'
}],
amountList: [{ amountList: [{
id: '1', id: '1',
price: '200', price: '200'
realPrice: '13.08'
}, },
{ {
id: '2', id: '2',
price: '300', price: '300'
realPrice: '23.08'
}, },
{ {
id: '3', id: '3',
price: '400', price: '400'
realPrice: '33.08'
}, },
{ {
id: '4', id: '4',
price: '500', price: '500'
realPrice: '43.08'
} }
], ],
detailsId: '', inputAmount: '',
inputAmount: '' store_key: '',
storeList: '',
oilNo: '',
priceVip: '',
priceOfficial: '',
priceGun: '',
gunNo: '',
typeId: ''
} }
}, },
onLoad(options) {
this.store_key = options.id;
this.getGasDetailByStoreKey();
},
methods: { methods: {
// //
showPopup() { showPopup(item) {
this.$refs.popup.show(); this.$refs.popup.show();
this.typeId = item;
}, },
//
getGasDetailByStoreKey() {
uni.showLoading({
title: '加载中...'
})
let params = {
storeKey: this.store_key,
latitude: app.globalData.latitude,
longitude: app.globalData.longitude
}
getGasDetailByStoreKey(params).then(res => {
uni.hideLoading();
if (res.return_code == '000000') {
this.storeList = res.return_data;
this.oilNo = res.return_data.oilPriceList[0].oilNoName;
this.priceVip = res.return_data.oilPriceList[0].priceVip;
this.priceGun = res.return_data.oilPriceList[0].priceGun;
this.priceOfficial = res.return_data.oilPriceList[0].priceOfficial;
this.detailList = res.return_data.oilPriceList;
this.gunnumber = res.return_data.gasGunList;
for (var i = 0; i < res.return_data.gasGunList.length; i++) {
if (this.oilNo == res.return_data.gasGunList[i].oilNoName) {
this.gunNo = res.return_data.gasGunList[i].gunNo
}
}
// }
})
},
//
changeValue(item) { changeValue(item) {
this.detailsId = item.value; this.oilNo = item.oilNoName;
this.priceVip = item.priceVip;
this.priceOfficial = item.priceOfficial;
this.priceGun = item.priceGun;
this.$refs.popup.hide();
},
//
changeValue2(item) {
this.gunNo = item.gunNo;
this.$refs.popup.hide(); this.$refs.popup.hide();
}, },
select(amount) { select(amount) {
this.inputAmount = amount.id; this.inputAmount = amount.id;
}, },
@ -264,6 +292,7 @@
margin-top: 20upx; margin-top: 20upx;
float: left; float: left;
height: 120upx; height: 120upx;
line-height: 120upx;
// display: flex; // display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -281,9 +310,8 @@
} }
.heTitle { .heTitle {
margin-top: 15upx;
width: 100%; width: 100%;
font-size: 15px; font-size: 16px;
} }
.mitext { .mitext {
@ -305,7 +333,8 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.reBtn{
.reBtn {
width: 110px; width: 110px;
background-color: #089bf5; background-color: #089bf5;
color: #FFFFFF; color: #FFFFFF;
@ -317,5 +346,4 @@
line-height: 40px; line-height: 40px;
} }
} }
</style> </style>

@ -2,12 +2,13 @@
<view> <view>
<view class="width100 backcorfff"> <view class="width100 backcorfff">
<image mode="widthFix" class=" flleft sear mart15" src="../../../static/img/btjy.png"></image> <image mode="widthFix" class=" flleft sear mart15" src="../../../static/img/btjy.png"></image>
<uSearchBar @confirm="search" @input="input"></uSearchBar> <uSearchBar @confirm="getGasStoreList" v-model="searname" @input="getGasStoreList"></uSearchBar>
</view> </view>
<slFilter :independence="true" :color="titleColor" :themeColor="themeColor" :menuList.sync="menuList" <slFilter :independence="true" :color="titleColor" :themeColor="themeColor" :menuList.sync="menuList"
@result="result"></slFilter> @result="result"></slFilter>
<view class="width90 height100p backcorfff border-r mart10" v-for="(item,index) in refuelList" :key="index" @click="goDetails"> <view class="width90 height100p backcorfff border-r mart10" v-for="(item,index) in refuelList" :key="index"
<image mode="widthFix" :src="item.store_logo" class="recontleft flleft mart10 border-r"> @click="goDetails(item.store_key)">
<image mode="widthFix" :src="item.store_logo" class="recontleft flleft mart10 border-r" style="max-height: 80px;">
</image> </image>
<view class="recontright"> <view class="recontright">
<view class="text1 width100 font15 fontwig6 paddtop10">{{item.store_name}}</view> <view class="text1 width100 font15 fontwig6 paddtop10">{{item.store_name}}</view>
@ -20,7 +21,7 @@
</view> </view>
</view> </view>
<view class="font14 width100 fcoreb5 mart5 height22"> <view class="font14 width100 fcoreb5 mart5 height22">
<text class="font18 fontwig6">6.40</text><text class="fcor999 margle">油站价6.88</text> <text class="font18 fontwig6">{{item.price_vip}}</text><text class="fcor999 margle">油站价{{item.price_gun}}</text>
</view> </view>
</view> </view>
</view> </view>
@ -29,9 +30,12 @@
</template> </template>
<script> <script>
import {getGasStoreList} from '../../../Utils/Api.js'; import {
getGasStoreList
} from '../../../Utils/Api.js';
import slFilter from '@/components/sl-filter/sl-filter.vue'; import slFilter from '@/components/sl-filter/sl-filter.vue';
import uSearchBar from '../../../components/uni-search-bar/components/uni-search-bar/uni-search-bar.vue'; import uSearchBar from '../../../components/uni-search-bar/components/uni-search-bar/uni-search-bar.vue';
let app = getApp();
export default { export default {
components: { components: {
slFilter, slFilter,
@ -42,105 +46,111 @@
themeColor: '#089bf5', themeColor: '#089bf5',
titleColor: '#666666', titleColor: '#666666',
filterResult: '', filterResult: '',
menuList: [{ menuList: [
'title': '品牌', // {
'key': 'single', // 'title': '',
'isMutiple': false, // 'key': 'single',
'detailTitle': '请选择(单选)', // 'isMutiple': false,
'reflexTitle': true, // 'detailTitle': '',
'defaultSelectedIndex': 0, // 'reflexTitle': true,
'detailList': [{ // 'defaultSelectedIndex': 0,
'title': '全部品牌', // 'detailList': [{
'value': '' // 'title': '',
}, { // 'value': ''
'title': '中石化', // }, {
'value': '中石化' // 'title': '',
}, { // 'value': ''
'title': '中石油', // }, {
'value': '中石油' // 'title': '',
}, { // 'value': ''
'title': '亮牌', // }, {
'value': '亮牌' // 'title': '',
}, { // 'value': ''
'title': '其他', // }, {
'value': '其他' // 'title': '',
}, // 'value': ''
// },
] // ]
}, // },
{
'title': '距离',
'key': 'single1',
'isMutiple': false,
'detailTitle': '请选择(单选)',
'reflexTitle': true,
'defaultSelectedIndex': 0,
'detailList': [{
'title': '距离最近',
'value': ''
},
{
'title': '距离最远',
'value': '距离最远'
}
]
},
{ {
'title': '油号', 'title': '油号',
'key': 'single2', 'key': 'single2',
'isMutiple': false, 'isMutiple': false,
'detailTitle': '请选择(单选)', 'detailTitle': '',
'reflexTitle': true, 'reflexTitle': true,
'defaultSelectedIndex': 0, 'defaultSelectedIndex': 0,
'detailList': [{ 'detailList': [
'title': '不限', {
'value': '' 'detatitle': '汽油',
}, { 'dataList': [{
'title': '89#', 'title': '90#',
'value': '89#' 'value': ''
}, { }, {
'title': '92#', 'title': '92#',
'value': '92#' 'value': '92#'
}, { }, {
'title': '95#', 'title': '95#',
'value': '92#' 'value': '95#'
}, { }, {
'title': '98#', 'title': '98#',
'value': '98#' 'value': '98#'
}, ] }, {
'title': '101#',
'value': '101#'
}]
},
]
}, },
{ {
'title': '距离', 'title': '距离',
'key': 'single3', 'key': 'single3',
'isMutiple': false, 'isMutiple': false,
'detailTitle': '请选择(单选)', 'detailTitle': '',
'reflexTitle': true, 'reflexTitle': true,
'defaultSelectedIndex': 0, 'defaultSelectedIndex': 0,
'detailList': [{ 'detailList': [{
'title': '默认排序', 'title': '6km内',
'value': '' 'value': ''
}, },
{ {
'title': '发布时间', 'title': '10km内',
'value': '发布时间' 'value': '10km内'
}, },
{ {
'title': '薪资最高', 'title': '15km内',
'value': '薪资最高' 'value': '15km内'
}, },
{ {
'title': '离我最近', 'title': '20km内',
'value': '离我最近' 'value': '20km内'
},
{
'title': '50km内',
'value': '50km内'
} }
] ]
}, {
'title': '距离',
'key': 'single1',
'isMutiple': false,
'detailTitle': '',
'reflexTitle': true,
'defaultSelectedIndex': 0,
'detailList': [{
'title': '距离最近',
'value': ''
}]
} }
], ],
refuelList: [], refuelList: [],
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
isNoMoreData: false, isNoMoreData: false,
searname:''
} }
}, },
onLoad() { onLoad() {
@ -158,11 +168,12 @@
} }
let pagenum = this.pageNum; let pagenum = this.pageNum;
let params = { let params = {
distance: '25', storeName : this.searname,
distance: '999',
regionId: '110000', regionId: '110000',
oilNoName: '92#', oilNoName: '92#',
longitude: "116.881602", latitude: app.globalData.latitude,
latitude: '39.912496', longitude: app.globalData.longitude,
pageNum: pagenum, pageNum: pagenum,
pageSize: this.pageSize pageSize: this.pageSize
} }
@ -182,9 +193,9 @@
}) })
}, },
// //
goDetails() { goDetails(items) {
uni.navigateTo({ uni.navigateTo({
url: '../refuel-details/refuel-details' url: '../refuel-details/refuel-details?id='+items
}) })
}, },
result(val) { result(val) {

@ -956,7 +956,7 @@
width: 90%; width: 90%;
margin-left: 5%; margin-left: 5%;
border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;
margin-top: -3px; margin-top: -5px;
background-color: white; background-color: white;
} }

@ -263,6 +263,12 @@ $uni-font-size-paragraph:30upx;
margin-left: 10%; margin-left: 10%;
} }
.width80p {
width: 80%;
}
.width70 { .width70 {
width: 70%; width: 70%;
} }

Loading…
Cancel
Save