|
|
|
|
@ -1,142 +1,236 @@ |
|
|
|
|
<template> |
|
|
|
|
<view> |
|
|
|
|
<!-- 状态栏 --> |
|
|
|
|
<view class="status" :style="{position:headerPosition}"></view> |
|
|
|
|
<view class="header" :style="{position:headerPosition}"> |
|
|
|
|
<view class="addr" @click="goPostion"> |
|
|
|
|
<!-- <view class="icon location"></view> --> |
|
|
|
|
{{city}} |
|
|
|
|
<image mode="widthFix" style="width: 15px;" :src="imagewxUrl+imgadres"></image> |
|
|
|
|
<view class="map-container"> |
|
|
|
|
<map style="width: 100%; height: 10vh;" :style="{height:mapheight}" :latitude="latitude" :longitude="longitude" |
|
|
|
|
:markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'> |
|
|
|
|
<!-- <cover-view class="cover-view-loca" :style='{bottom:coverbottom}' @click="onControltap"> |
|
|
|
|
<cover-image class="cover-image" @click="play" src="../../../static/img/adresw.png"></cover-image> |
|
|
|
|
<cover-view> |
|
|
|
|
定位 |
|
|
|
|
</cover-view> |
|
|
|
|
</cover-view> --> |
|
|
|
|
<!-- 一级分类 --> |
|
|
|
|
<view class="width100 cover-views mart15"> |
|
|
|
|
<scroll-view class="width90 cover-view-cont" scroll-x="true"> |
|
|
|
|
<view class="cover-view-head font14" :class="[typeid == item.id ? 'onclick' : '']" |
|
|
|
|
v-for="(item,index) in goodsFirstClassList" :key="index" @click="changeType(item)">{{item.name}} |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
<!-- 二级分类 --> |
|
|
|
|
<view class="width100 mart15 backcorfff cover-viewchage alijus fotct" style="border-radius: 22px;"> |
|
|
|
|
<!-- :class="[selectFirst == 1? 'onchange' : '']" --> |
|
|
|
|
<view class="font14 width30w onchange text1" @click="changeChilerType()">{{selectFirstName}} |
|
|
|
|
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="font14 width30w onchange" @click="changeChilerdistance()">{{distanceName}} |
|
|
|
|
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="font14 width30w"> |
|
|
|
|
<!-- 全部 |
|
|
|
|
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> --> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="input-box"> |
|
|
|
|
<input placeholder="搜索门店" placeholder-style="color:#c0c0c0;" @tap="toSearch()" /> |
|
|
|
|
<view class="icon search"></view> |
|
|
|
|
<!-- //模态框 --> |
|
|
|
|
<view class="change-cont" v-if="selectChiler == 1"> |
|
|
|
|
<view class="width100 backcorfff"></view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<!-- 占位 --> |
|
|
|
|
<view class="place"></view> |
|
|
|
|
<!-- <view class="category-list"> --> |
|
|
|
|
<view class="width100 height45l backcorfff" v-if="MerchantList != ''"> |
|
|
|
|
<view class="width90"> |
|
|
|
|
<!-- <view class="stuMenu flleft fotct" @click="showPopup() ">{{showCategoryIndex}} |
|
|
|
|
<image mode="widthFix" class="stuimg margle" :src="imagewxUrl+imgadres2"></image> |
|
|
|
|
</view> --> |
|
|
|
|
<picker mode="selector" :range="MerchantList" range-key="merchantName" @change="showCategory"> |
|
|
|
|
<view class="font14">{{showCategoryIndex}} |
|
|
|
|
<image mode="widthFix" class="stuimg margle" :src="imagewxUrl+imgadres2"></image> |
|
|
|
|
<!-- //显示内容 --> |
|
|
|
|
<view class="change-optiac paddbotm20" v-if="selectChiler == 1"> |
|
|
|
|
<scroll-view scroll-y="true" class="width100 height260"> |
|
|
|
|
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart" |
|
|
|
|
v-for="(item,index) in goodsSendotClassList" :key="item.id" @click="changeFirstcont(item)"> |
|
|
|
|
<view class="width90w" :class="[selectFirst == item.id? 'onchange' : '']">{{item.name}}</view> |
|
|
|
|
<image class="icon20" src="../../../static/img/changed.png" mode="widthFix" |
|
|
|
|
v-if="selectFirst == item.id"></image> |
|
|
|
|
</view> |
|
|
|
|
</picker> |
|
|
|
|
</scroll-view> |
|
|
|
|
</view> |
|
|
|
|
<!-- 二级距离 --> |
|
|
|
|
<view class="change-optiac paddbotm20" v-if="selectChilerdistance == 1"> |
|
|
|
|
<scroll-view scroll-y="true" class="width100 height260"> |
|
|
|
|
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart" |
|
|
|
|
v-for="(item,index) in distanceList" :key="index" @click="changeDistance(item)"> |
|
|
|
|
<view class="width90w" :class="[ distance== item.id? 'onchange' : '']">{{item.title}}</view> |
|
|
|
|
<image class="icon20" src="../../../static/img/changed.png" mode="widthFix" |
|
|
|
|
v-if="distance == item"></image> |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view v-if="categoryList == '' " class="mart60 fotct font14 fcor666 fotct width100"> |
|
|
|
|
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres3"></image> |
|
|
|
|
</view> |
|
|
|
|
<!-- 未打开筛选前 --> |
|
|
|
|
<view class="cover-view-foot" v-if="isSelected == 1"> |
|
|
|
|
<view class="line-view" @click="updateSelected(2)"></view> |
|
|
|
|
<view class="mart10 fcor666 font13 width100" @click="updateSelected(2)">发现更多商户</view> |
|
|
|
|
<view class="input-box"> |
|
|
|
|
<input placeholder="搜索商品" v-model="searchName" placeholder-style="color:#c0c0c0;" |
|
|
|
|
@click="updateSelected(2)" /> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="width96 height100p backcorfff border-r mart10" v-for="(box,i) in categoryList" :key="i"> |
|
|
|
|
<image mode="widthFix" :src="imageUrl+box.ext1" class="recontleft flleft mart10 border-r" |
|
|
|
|
style="max-height: 80px;" @click="toCategory(box)"> |
|
|
|
|
</image> |
|
|
|
|
<view class="recontright"> |
|
|
|
|
<view class="text2 width100 font18 fontwig6 paddtop15" @click="toCategory(box)"> |
|
|
|
|
{{box.storeName}} |
|
|
|
|
<!-- 打开筛选后 --> |
|
|
|
|
<view class="cover-view-foot-behind" v-if="isSelected == 2"> |
|
|
|
|
<view class="line-view" @click="updateSelected(1)"></view> |
|
|
|
|
<view class="mart10 fcor666 font13 width100" @click="updateSelected(1)">发现更多商户</view> |
|
|
|
|
<view class="input-box"> |
|
|
|
|
<input placeholder="搜索商品" v-model="searchName" placeholder-style="color:#c0c0c0;" |
|
|
|
|
@input="getMapStore()" /> |
|
|
|
|
</view> |
|
|
|
|
<view class="width100 mart10 height22"> |
|
|
|
|
<view class="width70 flleft text1 font13 fcor999" @click="toCategory(box)"> |
|
|
|
|
{{box.address}} |
|
|
|
|
<scroll-view class="scoroll-cont width94 mart10" scroll-y="true"> |
|
|
|
|
<view v-if="marker == '' " class="mart30 fotct font14 fcor666 fotct width100"> |
|
|
|
|
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres3"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="width30 flright font13 fcor666 fotct" @click="seeloaction(item)"> |
|
|
|
|
<image mode="widthFix" :src="imagewxUrl+imgadres4" style="width: 10px;"></image> |
|
|
|
|
{{box.distance}}km |
|
|
|
|
<view class="width96 height80 bor-botm1 alijusstart" v-for="(box,i) in marker" :key="i" |
|
|
|
|
@click="seeloaction(box)"> |
|
|
|
|
<image mode="widthFix" :src="box.logo" class="recontleft flleft border-r" |
|
|
|
|
style="max-height: 60px;"> |
|
|
|
|
</image> |
|
|
|
|
<view class="fotlt paddleft5"> |
|
|
|
|
<view class="text2 width100 font18 fontwig6"> |
|
|
|
|
{{box.callout.content}} |
|
|
|
|
</view> |
|
|
|
|
<view class="height22"> |
|
|
|
|
<view class="width70 flleft text1 font13 fcor999"> |
|
|
|
|
{{box.callout.address}} |
|
|
|
|
</view> |
|
|
|
|
<view class="width30 flright font13 fcor666 fotct"> |
|
|
|
|
<image mode="widthFix" :src="imagewxUrl+imgadres4" style="width: 10px;"></image> |
|
|
|
|
{{box.distance}}km |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<!-- <wybPopup ref="popup" type="top" height="800" width="500" radius="6" :showCloseIcon="false"> |
|
|
|
|
<view class="fotct font18 fontwig6 fcor333 mart10 height30">筛选门店</view> |
|
|
|
|
<view class="mart15"> |
|
|
|
|
<view :class="item.merchantName == showCategoryIndex?'activeRefuel':'refuel'" |
|
|
|
|
v-for="(item,index) in MerchantList" :key="index" @click="showCategory(item.merchantName,item.id)"> |
|
|
|
|
{{item.merchantName}} |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</wybPopup> --> |
|
|
|
|
<!-- #ifdef MP--> |
|
|
|
|
<button open-type="contact"> |
|
|
|
|
<image :src="imagewxUrl+imgadres5" mode="widthFix" class="xfimg"></image> |
|
|
|
|
</button> |
|
|
|
|
<!-- #endif --> |
|
|
|
|
<!-- #ifdef H5--> |
|
|
|
|
<image :src="imagewxUrl+imgadres5" mode="widthFix" class="h5xfimg" @click="playPhone"></image> |
|
|
|
|
<!-- #endif --> |
|
|
|
|
|
|
|
|
|
</map> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
<script> |
|
|
|
|
import { |
|
|
|
|
getCouponList, |
|
|
|
|
getStoreListByMerchant, |
|
|
|
|
getMerchantList, |
|
|
|
|
findByLatAndLng |
|
|
|
|
} from "../../../Utils/Api.js"; |
|
|
|
|
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue'; |
|
|
|
|
getIndustry, |
|
|
|
|
getMapStore |
|
|
|
|
} from '../../../Utils/Api.js'; |
|
|
|
|
let app = getApp(); |
|
|
|
|
export default { |
|
|
|
|
components: { |
|
|
|
|
wybPopup |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
showCategoryIndex: '', |
|
|
|
|
showCategoryIndexId: '', |
|
|
|
|
headerPosition: "fixed", |
|
|
|
|
latitude: '', //纬度 |
|
|
|
|
longitude: '', //经度 |
|
|
|
|
scale: 13, //缩放级别 |
|
|
|
|
bottomData: false, |
|
|
|
|
imagewxUrl: app.globalData.imageWxImg, |
|
|
|
|
imgadres: 'jt.png', |
|
|
|
|
imgadres2: 'xiala.png', |
|
|
|
|
imgadres1: 'noorder.png', |
|
|
|
|
imgadres4: 'dh.png', |
|
|
|
|
imgadres3: 'noorder.png', |
|
|
|
|
imgadres5: 'cusservice.png', |
|
|
|
|
city: "", |
|
|
|
|
imageUrl: app.globalData.imgUrl, |
|
|
|
|
//分类列表 |
|
|
|
|
categoryList: [], |
|
|
|
|
MerchantList: [], |
|
|
|
|
pageNum: 1, |
|
|
|
|
pageSize: 10, |
|
|
|
|
isNoMoreData: false |
|
|
|
|
// loadingText: '点击加载更多' |
|
|
|
|
imgadres4: 'dh.png', |
|
|
|
|
marker: '', //商户 |
|
|
|
|
typeid: 0, //选择分类 |
|
|
|
|
isSelected: 1, //是否选择下拉 |
|
|
|
|
selectFirst: '', //筛选是否有值 |
|
|
|
|
selectFirstName: '', //筛选值名字 |
|
|
|
|
selectChiler: 2, // 一级子菜单筛选 |
|
|
|
|
selectChilerdistance: 2, // 二级子菜单筛选 |
|
|
|
|
goodsFirstClassList: '', //商品一级分类 |
|
|
|
|
goodsSendotClassList: '', //商品一级分类 |
|
|
|
|
distanceList: [{ |
|
|
|
|
id: 1, |
|
|
|
|
title: '1km' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 3, |
|
|
|
|
title: '3km' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 5, |
|
|
|
|
title: '5km' |
|
|
|
|
}, |
|
|
|
|
], //距离 |
|
|
|
|
distance: '1', |
|
|
|
|
distanceName: '1km', |
|
|
|
|
searchName: '' //搜索名称 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onPageScroll(e) { |
|
|
|
|
//兼容iOS端下拉时顶部漂移 |
|
|
|
|
if (e.scrollTop >= 0) { |
|
|
|
|
this.headerPosition = "fixed"; |
|
|
|
|
} else { |
|
|
|
|
this.headerPosition = "absolute"; |
|
|
|
|
} |
|
|
|
|
onLoad() { |
|
|
|
|
this.getIndustry(); |
|
|
|
|
this.latitude = app.globalData.latitude; |
|
|
|
|
this.longitude = app.globalData.longitude; |
|
|
|
|
}, |
|
|
|
|
onLoad() {}, |
|
|
|
|
onShow() { |
|
|
|
|
this.pageNum = 1; |
|
|
|
|
this.categoryList = []; |
|
|
|
|
this.MerchantList = []; |
|
|
|
|
if (app.globalData.cityName != '') { |
|
|
|
|
this.city = app.globalData.qianzhuCityName; |
|
|
|
|
this.getMerchantList(); |
|
|
|
|
} else { |
|
|
|
|
this.postionIng(); |
|
|
|
|
computed: { |
|
|
|
|
mapheight() { |
|
|
|
|
let data = '' |
|
|
|
|
if (this.bottomData) { |
|
|
|
|
if (this.upTop) { |
|
|
|
|
data = '50px' |
|
|
|
|
} else { |
|
|
|
|
data = '200px' |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
data = '100vh' |
|
|
|
|
} |
|
|
|
|
return data |
|
|
|
|
}, |
|
|
|
|
coverbottom() { |
|
|
|
|
let data = '' |
|
|
|
|
if (this.bottomData) { |
|
|
|
|
data = '20rpx' |
|
|
|
|
} else { |
|
|
|
|
data = '200rpx' |
|
|
|
|
} |
|
|
|
|
return data |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance" |
|
|
|
|
onReachBottom() { |
|
|
|
|
this.getStoreListByMerchant(); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
methods: { |
|
|
|
|
//显示弹出 |
|
|
|
|
showPopup() { |
|
|
|
|
this.$refs.popup.show(); |
|
|
|
|
//查询商户列表 |
|
|
|
|
getIndustry() { |
|
|
|
|
getIndustry().then(res => { |
|
|
|
|
if (res.return_code == '000000') { |
|
|
|
|
this.goodsFirstClassList = res.return_data; |
|
|
|
|
this.typeid = res.return_data[0].id; |
|
|
|
|
this.goodsSendotClassList = res.return_data[0].childIndustry; |
|
|
|
|
this.selectFirst = res.return_data[0].childIndustry[0].id; |
|
|
|
|
this.selectFirstName = res.return_data[0].childIndustry[0].name; |
|
|
|
|
this.getMapStore(); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
//查询商户 |
|
|
|
|
getMapStore() { |
|
|
|
|
let datas = { |
|
|
|
|
distance: this.distance, |
|
|
|
|
name: this.searchName, |
|
|
|
|
childId: this.selectFirst, |
|
|
|
|
longitude: app.globalData.longitude, |
|
|
|
|
latitude: app.globalData.latitude |
|
|
|
|
} |
|
|
|
|
getMapStore(datas).then(res => { |
|
|
|
|
if (res.return_code == '000000') { |
|
|
|
|
this.marker = res.return_data |
|
|
|
|
} else { |
|
|
|
|
this.marker = []; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
//选择二级分类数据 |
|
|
|
|
changeFirstcont(item) { |
|
|
|
|
this.selectFirst = item.id; |
|
|
|
|
this.selectFirstName = item.name; |
|
|
|
|
this.selectChiler = 2; |
|
|
|
|
this.getMapStore(); |
|
|
|
|
}, |
|
|
|
|
//选择距离 |
|
|
|
|
changeDistance(item) { |
|
|
|
|
this.distance = item.id; |
|
|
|
|
this.distanceName = item.title; |
|
|
|
|
this.selectChilerdistance = 2; |
|
|
|
|
this.getMapStore(); |
|
|
|
|
}, |
|
|
|
|
//地图点击事件 |
|
|
|
|
markertap(e) {}, |
|
|
|
|
//地图点击事件 |
|
|
|
|
callouttap(e) { |
|
|
|
|
console.log('地图点击事件', e) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
postionIng() { |
|
|
|
|
let that = this; |
|
|
|
|
uni.getLocation({ |
|
|
|
|
@ -168,9 +262,9 @@ |
|
|
|
|
} |
|
|
|
|
findByLatAndLng(datas).then(res => { |
|
|
|
|
if (res.return_code == '000000') { |
|
|
|
|
this.city = res.return_data.provinceName; |
|
|
|
|
app.globalData.cityName = res.return_data.provinceName; |
|
|
|
|
app.globalData.qianzhuCityName = res.return_data.cityName; |
|
|
|
|
this.city = res.return_data.provinceName; |
|
|
|
|
app.globalData.cityName = res.return_data.provinceName; |
|
|
|
|
app.globalData.qianzhuCityName = res.return_data.cityName; |
|
|
|
|
app.globalData.cityId = res.return_data.regionId; |
|
|
|
|
// app.globalData.cityId = '500100'; |
|
|
|
|
if (res.return_data.result.addressComponent.adcode) { |
|
|
|
|
@ -244,361 +338,206 @@ |
|
|
|
|
this.categoryList = []; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
//分类切换显示 |
|
|
|
|
showCategory(e) { |
|
|
|
|
this.showCategoryIndex = this.MerchantList[e.target.value].merchantName; |
|
|
|
|
this.showCategoryIndexId = this.MerchantList[e.target.value].id; |
|
|
|
|
this.pageNum = 1; |
|
|
|
|
this.pageSize = 10; |
|
|
|
|
this.isNoMoreData = false; |
|
|
|
|
this.categoryList = []; |
|
|
|
|
this.getStoreListByMerchant(); |
|
|
|
|
// 定位点击事件 |
|
|
|
|
onControltap() { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
toCategory(e) { |
|
|
|
|
uni.navigateTo({ |
|
|
|
|
url: '../../goods/store-list/store-details?id=' + e.id + '&juli=' + e.distance |
|
|
|
|
}) |
|
|
|
|
// uni.navigateTo({ |
|
|
|
|
// url: '../../goods/goods?id=' + e |
|
|
|
|
// }); |
|
|
|
|
uni.setStorage({ |
|
|
|
|
key: "store_id", |
|
|
|
|
data: e.id |
|
|
|
|
}) |
|
|
|
|
uni.setStorage({ |
|
|
|
|
key: "store_juli", |
|
|
|
|
data: e.distance |
|
|
|
|
}) |
|
|
|
|
//选择类型 |
|
|
|
|
changeType(item) { |
|
|
|
|
this.typeid = item.id; |
|
|
|
|
this.goodsSendotClassList = item.childIndustry; |
|
|
|
|
this.selectFirst = item.childIndustry[0].id; |
|
|
|
|
this.selectFirstName = item.childIndustry[0].name; |
|
|
|
|
this.getMapStore(); |
|
|
|
|
}, |
|
|
|
|
//搜索跳转 |
|
|
|
|
toSearch() { |
|
|
|
|
uni.navigateTo({ |
|
|
|
|
url: '../../goods/HM-search/HM-search' |
|
|
|
|
}) |
|
|
|
|
// uni.showToast({title: "建议跳转到新页面做搜索功能"}); |
|
|
|
|
//子菜单显示 |
|
|
|
|
changeChilerType() { |
|
|
|
|
if (this.selectChiler == 1) { |
|
|
|
|
this.selectChiler = 2; |
|
|
|
|
} else { |
|
|
|
|
this.selectChiler = 1; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
//拨打客服电话 |
|
|
|
|
playPhone() { |
|
|
|
|
let cont = "本服务由惠兑礼品提供\n400-678-0738"; |
|
|
|
|
let content = cont.replace(/<br>/g,"\n"); |
|
|
|
|
uni.showModal({ |
|
|
|
|
title: '客服', |
|
|
|
|
content: content, |
|
|
|
|
success: function(res) { |
|
|
|
|
if (res.confirm) { |
|
|
|
|
uni.makePhoneCall({ |
|
|
|
|
phoneNumber: '4006780738', //电话号码 |
|
|
|
|
success: function(e) { |
|
|
|
|
console.log(e); |
|
|
|
|
}, |
|
|
|
|
fail: function(e) { |
|
|
|
|
console.log(e); |
|
|
|
|
//距离显示 |
|
|
|
|
changeChilerdistance() { |
|
|
|
|
if (this.selectChilerdistance == 1) { |
|
|
|
|
this.selectChilerdistance = 2; |
|
|
|
|
} else { |
|
|
|
|
this.selectChilerdistance = 1; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 是否选择下拉 |
|
|
|
|
updateSelected(item) { |
|
|
|
|
this.isSelected = item; |
|
|
|
|
}, |
|
|
|
|
seeloaction(item) { |
|
|
|
|
// #ifdef H5 |
|
|
|
|
window.location.href = |
|
|
|
|
`http://apis.map.qq.com/uri/v1/marker?marker=coord:(${item.latitude},${item.longitude})&addr:${item.address}`; |
|
|
|
|
// #endif |
|
|
|
|
// #ifdef MP |
|
|
|
|
uni.openLocation({ |
|
|
|
|
latitude: Number(item.latitude), //目的地的定位 |
|
|
|
|
longitude: Number(item.longitude), //目的地的定位 |
|
|
|
|
name: item.store_name, |
|
|
|
|
address: item.address |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
// #endif |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
<style lang="scss"> |
|
|
|
|
page { |
|
|
|
|
background-color: #f1f3f5; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.h5xfimg { |
|
|
|
|
width: 80rpx; |
|
|
|
|
bottom: 140rpx; |
|
|
|
|
position: fixed; |
|
|
|
|
right: 40rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.xfimg { |
|
|
|
|
width: 80rpx; |
|
|
|
|
bottom: 60rpx; |
|
|
|
|
position: fixed; |
|
|
|
|
right: 40rpx; |
|
|
|
|
} |
|
|
|
|
<style lang='less' scoped> |
|
|
|
|
.map-container { |
|
|
|
|
position: relative; |
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
.status { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 0; |
|
|
|
|
position: fixed; |
|
|
|
|
z-index: 10; |
|
|
|
|
background-color: #fff; |
|
|
|
|
top: 0; |
|
|
|
|
/* #ifdef APP-PLUS */ |
|
|
|
|
height: var(--status-bar-height); //覆盖样式 |
|
|
|
|
/* #endif */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
button::after { |
|
|
|
|
border: none |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.recontleft { |
|
|
|
|
width: 80px; |
|
|
|
|
margin-left: 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.recontright { |
|
|
|
|
margin-left: 100px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.refuel { |
|
|
|
|
padding: 6px 5px; |
|
|
|
|
border-radius: 5px; |
|
|
|
|
background-color: #f6f6f6; |
|
|
|
|
color: #666666; |
|
|
|
|
margin-left: 10px; |
|
|
|
|
margin-top: 15px; |
|
|
|
|
display: inline-block; |
|
|
|
|
font-size: 13px; |
|
|
|
|
width: 18%; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
.cover-views { |
|
|
|
|
position: absolute; |
|
|
|
|
z-index: 99999; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.activeRefuel { |
|
|
|
|
padding: 6px 5px; |
|
|
|
|
border-radius: 5px; |
|
|
|
|
border: 1px solid #089bf5; |
|
|
|
|
color: #089bf5; |
|
|
|
|
margin-left: 10px; |
|
|
|
|
margin-top: 15px; |
|
|
|
|
display: inline-block; |
|
|
|
|
font-size: 13px; |
|
|
|
|
width: 18%; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
.cover-view-cont { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: row; |
|
|
|
|
flex-wrap: nowrap; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.stuMenu { |
|
|
|
|
width: 33.3%; |
|
|
|
|
height: 30px; |
|
|
|
|
line-height: 30px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
margin-top: 10px; |
|
|
|
|
color: #333333; |
|
|
|
|
} |
|
|
|
|
.cover-view-head { |
|
|
|
|
height: 35px; |
|
|
|
|
line-height: 35px; |
|
|
|
|
background-color: #fff; |
|
|
|
|
display: inline-table; |
|
|
|
|
flex-direction: column; |
|
|
|
|
text-align: center; |
|
|
|
|
position: relative; |
|
|
|
|
margin-right: 15px; |
|
|
|
|
border-radius: 22px; |
|
|
|
|
padding: 0 10px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.stuimg { |
|
|
|
|
width: 10px; |
|
|
|
|
vertical-align: middle; |
|
|
|
|
} |
|
|
|
|
.cover-viewchage { |
|
|
|
|
height: 35px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.loading-text { |
|
|
|
|
width: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
height: 60upx; |
|
|
|
|
color: #979797; |
|
|
|
|
font-size: 24upx; |
|
|
|
|
} |
|
|
|
|
.onchange { |
|
|
|
|
color: #089bf5; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.header { |
|
|
|
|
width: 92%; |
|
|
|
|
padding: 0 4%; |
|
|
|
|
height: 100upx; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
position: fixed; |
|
|
|
|
top: 0; |
|
|
|
|
z-index: 10; |
|
|
|
|
background-color: #0083f5; |
|
|
|
|
/* #ifdef APP-PLUS */ |
|
|
|
|
top: var(--status-bar-height); |
|
|
|
|
/* #endif */ |
|
|
|
|
.onclick { |
|
|
|
|
background-color: #089bf5; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.addr { |
|
|
|
|
width: 120upx; |
|
|
|
|
height: 60upx; |
|
|
|
|
flex-shrink: 0; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
.cover-view-loca { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
align-items: center; |
|
|
|
|
font-size: 28upx; |
|
|
|
|
justify-content: center; |
|
|
|
|
width: 40px; |
|
|
|
|
height: 40px; |
|
|
|
|
color: #484848; |
|
|
|
|
background-color: #fff; |
|
|
|
|
background-size: 60px 60px; |
|
|
|
|
background-position: center center; |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 100px; |
|
|
|
|
right: 16px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.icon { |
|
|
|
|
height: 60upx; |
|
|
|
|
margin-right: 5upx; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
font-size: 42upx; |
|
|
|
|
color: #ffc50a; |
|
|
|
|
} |
|
|
|
|
.cover-image { |
|
|
|
|
display: inline-block; |
|
|
|
|
width: 15px; |
|
|
|
|
height: 15px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.input-box { |
|
|
|
|
.cover-view-foot { |
|
|
|
|
text-align: center; |
|
|
|
|
height: 200rpx; |
|
|
|
|
background-color: #fff; |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 0px; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 70rpx; |
|
|
|
|
background-color: #f5f5f5; |
|
|
|
|
border-radius: 10rpx; |
|
|
|
|
position: relative; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.icon { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 0; |
|
|
|
|
right: 0; |
|
|
|
|
width: 60upx; |
|
|
|
|
height: 60upx; |
|
|
|
|
font-size: 34upx; |
|
|
|
|
color: #c0c0c0; |
|
|
|
|
} |
|
|
|
|
border-radius: 18px 18px 0 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
input { |
|
|
|
|
padding-left: 28upx; |
|
|
|
|
height: 28upx; |
|
|
|
|
font-size: 28upx; |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
.change-cont { |
|
|
|
|
position: absolute; |
|
|
|
|
z-index: 99999999; |
|
|
|
|
top: 100px; |
|
|
|
|
background-color: #333; |
|
|
|
|
width: 100%; |
|
|
|
|
opacity: 0.8; |
|
|
|
|
height: calc(100% - 100px); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.icon-btn { |
|
|
|
|
width: 60upx; |
|
|
|
|
height: 60upx; |
|
|
|
|
flex-shrink: 0; |
|
|
|
|
display: flex; |
|
|
|
|
.change-optiac { |
|
|
|
|
position: absolute; |
|
|
|
|
z-index: 99999999; |
|
|
|
|
top: 100px; |
|
|
|
|
width: 100%; |
|
|
|
|
background-color: #fff; |
|
|
|
|
height: 260px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.icon { |
|
|
|
|
width: 60upx; |
|
|
|
|
height: 60upx; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
font-size: 42upx; |
|
|
|
|
background-color: transparent; |
|
|
|
|
} |
|
|
|
|
.cover-view-foot-behind { |
|
|
|
|
text-align: center; |
|
|
|
|
height: calc(100% - 110px); |
|
|
|
|
background-color: #fff; |
|
|
|
|
position: absolute; |
|
|
|
|
z-index: 999999; |
|
|
|
|
bottom: 0px; |
|
|
|
|
width: 100%; |
|
|
|
|
border-radius: 18px 18px 0 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.place { |
|
|
|
|
.scoroll-cont { |
|
|
|
|
height: calc(100% - 80px); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
background-color: #ffffff; |
|
|
|
|
height: 100upx; |
|
|
|
|
/* #ifdef APP-PLUS */ |
|
|
|
|
margin-top: var(--status-bar-height); |
|
|
|
|
/* #endif */ |
|
|
|
|
.line-view { |
|
|
|
|
width: 10%; |
|
|
|
|
margin-left: 45%; |
|
|
|
|
height: 5px; |
|
|
|
|
border-radius: 12px; |
|
|
|
|
margin-top: 10px; |
|
|
|
|
background-color: #f0f0f0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.category-list { |
|
|
|
|
width: 100%; |
|
|
|
|
.input-box { |
|
|
|
|
width: 90%; |
|
|
|
|
margin-left: 5%; |
|
|
|
|
margin-top: 5px; |
|
|
|
|
text-align: left; |
|
|
|
|
height: 70rpx; |
|
|
|
|
background-color: #f0f0f0; |
|
|
|
|
border-radius: 22px; |
|
|
|
|
position: relative; |
|
|
|
|
align-items: center; |
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
|
|
.left, |
|
|
|
|
.right { |
|
|
|
|
position: absolute; |
|
|
|
|
|
|
|
|
|
top: 100upx; |
|
|
|
|
/* #ifdef APP-PLUS */ |
|
|
|
|
top: calc(100upx + var(--status-bar-height)); |
|
|
|
|
/* #endif */ |
|
|
|
|
bottom: 0upx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.left { |
|
|
|
|
width: 24%; |
|
|
|
|
left: 0upx; |
|
|
|
|
background-color: #f2f2f2; |
|
|
|
|
|
|
|
|
|
.row { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 90upx; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
|
width: 100%; |
|
|
|
|
position: relative; |
|
|
|
|
font-size: 28upx; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
color: #3c3c3c; |
|
|
|
|
|
|
|
|
|
.block { |
|
|
|
|
position: absolute; |
|
|
|
|
width: 0upx; |
|
|
|
|
left: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.on { |
|
|
|
|
height: 100upx; |
|
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
|
font-size: 30upx; |
|
|
|
|
font-weight: 600; |
|
|
|
|
color: #2d2d2d; |
|
|
|
|
|
|
|
|
|
.block { |
|
|
|
|
width: 10upx; |
|
|
|
|
height: 80%; |
|
|
|
|
top: 10%; |
|
|
|
|
background-color: #0083f5; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
input { |
|
|
|
|
padding-left: 12px; |
|
|
|
|
padding-right: 12px; |
|
|
|
|
height: 30px; |
|
|
|
|
color: #666; |
|
|
|
|
font-size: 14px; |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right { |
|
|
|
|
width: 76%; |
|
|
|
|
left: 24%; |
|
|
|
|
|
|
|
|
|
.category { |
|
|
|
|
width: 94%; |
|
|
|
|
padding: 20upx 3%; |
|
|
|
|
|
|
|
|
|
.banner { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 24.262vw; |
|
|
|
|
border-radius: 10upx; |
|
|
|
|
overflow: hidden; |
|
|
|
|
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.3); |
|
|
|
|
|
|
|
|
|
image { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 24.262vw; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.list { |
|
|
|
|
margin-top: 40upx; |
|
|
|
|
width: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
|
|
.box { |
|
|
|
|
width: calc(70vw / 2); |
|
|
|
|
margin-bottom: 30upx; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
|
|
image { |
|
|
|
|
width: 60%; |
|
|
|
|
height: calc(70vw / 2 * 0.6); |
|
|
|
|
} |
|
|
|
|
.onclick { |
|
|
|
|
background-color: #089bf5; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
|
margin-top: 5upx; |
|
|
|
|
width: 80%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
font-size: 26upx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.recontleft { |
|
|
|
|
width: 60px; |
|
|
|
|
margin-left: 10px; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
</style> |
杨杰
游梦婷
