parent
67e8b1bf33
commit
b6b881de22
@ -1,603 +1,177 @@ |
|||||||
<template> |
<template> |
||||||
<view> |
<view class="content"> |
||||||
<!-- 状态栏 --> |
<map style="width: 100%; height: 90vh;" :style="{height:mapheight}" :show-location='true' :latitude="latitude" |
||||||
<view class="status" :style="{position:headerPosition}"></view> |
:longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'> |
||||||
<view class="header" :style="{position:headerPosition}"> |
</map> |
||||||
<view class="addr" @click="goPostion"> |
|
||||||
<!-- <view class="icon location"></view> --> |
|
||||||
{{city}} |
|
||||||
<image mode="widthFix" style="width: 15px;" :src="imagewxUrl+imgadres"></image> |
|
||||||
</view> |
|
||||||
<view class="input-box"> |
|
||||||
<input placeholder="搜索门店" placeholder-style="color:#c0c0c0;" @tap="toSearch()" /> |
|
||||||
<view class="icon search"></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> |
|
||||||
</picker> |
|
||||||
</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="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> |
|
||||||
<view class="width100 mart10 height22"> |
|
||||||
<view class="width70 flleft text1 font13 fcor999" @click="toCategory(box)"> |
|
||||||
{{box.address}} |
|
||||||
</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> |
|
||||||
</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 --> |
|
||||||
</view> |
</view> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
import { |
|
||||||
getCouponList, |
|
||||||
getStoreListByMerchant, |
|
||||||
getMerchantList, |
|
||||||
findByLatAndLng |
|
||||||
} from "../../../Utils/Api.js"; |
|
||||||
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue'; |
|
||||||
let app = getApp(); |
|
||||||
export default { |
export default { |
||||||
components: { |
|
||||||
wybPopup |
|
||||||
}, |
|
||||||
data() { |
data() { |
||||||
return { |
return { |
||||||
showCategoryIndex: '', |
latitude: 23.106574, //纬度 |
||||||
showCategoryIndexId: '', |
longitude: 113.324587, //经度 |
||||||
headerPosition: "fixed", |
scale: 13, //缩放级别 |
||||||
imagewxUrl: app.globalData.imageWxImg, |
bottomData: false, |
||||||
imgadres: 'jt.png', |
marker: [{ |
||||||
imgadres2: 'xiala.png', |
id: 0, |
||||||
imgadres1: 'noorder.png', |
latitude: 23.13065, //纬度 |
||||||
imgadres4: 'dh.png', |
longitude: 113.3274, //经度 |
||||||
imgadres3: 'noorder.png', |
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
||||||
imgadres5: 'cusservice.png', |
rotate: 0, // 旋转度数 |
||||||
city: "", |
width: 20, //宽 |
||||||
imageUrl: app.globalData.imgUrl, |
height: 20, //高 |
||||||
//分类列表 |
// title:'我在这里',//标注点名 |
||||||
categoryList: [], |
alpha: 0.9, //透明度 |
||||||
MerchantList: [], |
callout: { //自定义标记点上方的气泡窗口 点击有效 |
||||||
pageNum: 1, |
content: '天宝大厦', //文本 |
||||||
pageSize: 10, |
color: '#ffffff', //文字颜色 |
||||||
isNoMoreData: false |
fontSize: 14, //文本大小 |
||||||
// loadingText: '点击加载更多' |
borderRadius: 22, //边框圆角 |
||||||
|
borderWidth: '10', |
||||||
|
bgColor: '#e51860', //背景颜色 |
||||||
|
display: 'ALWAYS', //常显 |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1234597, |
||||||
|
latitude: 23.106574, //纬度 |
||||||
|
longitude: 113.324587, //经度 |
||||||
|
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
||||||
|
rotate: 0, // 旋转度数 |
||||||
|
width: 20, //宽 |
||||||
|
height: 20, //高 |
||||||
|
// title:'我在这里',//标注点名 |
||||||
|
alpha: 0.9, //透明度 |
||||||
|
// label:{//为标记点旁边增加标签 //因背景颜色H5不支持 |
||||||
|
// color:'red',//文本颜色 |
||||||
|
// }, |
||||||
|
callout: { //自定义标记点上方的气泡窗口 点击有效 |
||||||
|
content: '广州塔', //文本 |
||||||
|
color: '#ffffff', //文字颜色 |
||||||
|
fontSize: 14, //文本大小 |
||||||
|
borderRadius: 22, //边框圆角 |
||||||
|
borderWidth: '10', |
||||||
|
bgColor: '#e51860', //背景颜色 |
||||||
|
display: 'ALWAYS', //常显 |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
latitude: 23.1338, //纬度 |
||||||
|
longitude: 113.33052, //经度 |
||||||
|
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
||||||
|
rotate: 0, // 旋转度数 |
||||||
|
width: 20, //宽 |
||||||
|
height: 20, //高 |
||||||
|
alpha: 0.9, //透明度 |
||||||
|
callout: { //自定义标记点上方的气泡窗口 点击有效 |
||||||
|
content: '德隆大厦', //文本 |
||||||
|
color: '#ffffff', //文字颜色 |
||||||
|
fontSize: 14, //文本大小 |
||||||
|
borderRadius: 22, //边框圆角 |
||||||
|
borderWidth: '10', |
||||||
|
bgColor: '#e51860', //背景颜色 |
||||||
|
display: 'ALWAYS', //常显 |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
latitude: 23.136455, //纬度 |
||||||
|
longitude: 113.329002, //经度 |
||||||
|
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
||||||
|
rotate: 0, // 旋转度数 |
||||||
|
width: 20, //宽 |
||||||
|
height: 20, //高 |
||||||
|
alpha: 0.9, //透明度 |
||||||
|
callout: { //自定义标记点上方的气泡窗口 点击有效 |
||||||
|
content: '羊城国际商贸中心', //文本 |
||||||
|
color: '#ffffff', //文字颜色 |
||||||
|
fontSize: 14, //文本大小 |
||||||
|
borderRadius: 22, //边框圆角 |
||||||
|
borderWidth: '10', |
||||||
|
bgColor: '#e51860', //背景颜色 |
||||||
|
display: 'ALWAYS', //常显 |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 4, |
||||||
|
latitude: 23.224781, //纬度 |
||||||
|
longitude: 113.293911, //经度 |
||||||
|
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
||||||
|
rotate: 0, // 旋转度数 |
||||||
|
width: 20, //宽 |
||||||
|
height: 20, //高 |
||||||
|
alpha: 0.9, //透明度 |
||||||
|
callout: { //自定义标记点上方的气泡窗口 点击有效 |
||||||
|
content: '天瑞广场A座', //文本 |
||||||
|
color: '#ffffff', //文字颜色 |
||||||
|
fontSize: 16, //文本大小 |
||||||
|
borderRadius: 22, //边框圆角 |
||||||
|
borderWidth: '12', |
||||||
|
bgColor: '#e51860', //背景颜色 |
||||||
|
display: 'ALWAYS', //常显 |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 5, |
||||||
|
latitude: 23.072726, //纬度 |
||||||
|
longitude: 113.277921, //经度 |
||||||
|
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
||||||
|
rotate: 0, // 旋转度数 |
||||||
|
width: 20, //宽 |
||||||
|
height: 20, //高 |
||||||
|
alpha: 0.9, //透明度 |
||||||
|
callout: { //自定义标记点上方的气泡窗口 点击有效 |
||||||
|
content: '大米和小米儿童康复(广州盈丰)中心', //文本 |
||||||
|
color: '#ffffff', //文字颜色 |
||||||
|
fontSize: 14, //文本大小 |
||||||
|
borderRadius: 22, //边框圆角 |
||||||
|
borderWidth: '8', |
||||||
|
bgColor: '#e51860', //背景颜色 |
||||||
|
display: 'ALWAYS', //常显 |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
} |
} |
||||||
}, |
}, |
||||||
onPageScroll(e) { |
onLoad() { |
||||||
//兼容iOS端下拉时顶部漂移 |
|
||||||
if (e.scrollTop >= 0) { |
|
||||||
this.headerPosition = "fixed"; |
|
||||||
} else { |
|
||||||
this.headerPosition = "absolute"; |
|
||||||
} |
|
||||||
}, |
|
||||||
onLoad() {}, |
|
||||||
onShow() { |
|
||||||
this.pageNum = 1; |
|
||||||
this.categoryList = []; |
|
||||||
this.MerchantList = []; |
|
||||||
if (app.globalData.cityName != '') { |
|
||||||
this.city = app.globalData.qianzhuCityName; |
|
||||||
this.getMerchantList(); |
|
||||||
} else { |
|
||||||
this.postionIng(); |
|
||||||
} |
|
||||||
|
|
||||||
}, |
}, |
||||||
//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance" |
computed: { |
||||||
onReachBottom() { |
mapheight() { |
||||||
this.getStoreListByMerchant(); |
let data = '' |
||||||
}, |
if (this.bottomData) { |
||||||
methods: { |
if (this.upTop) { |
||||||
//显示弹出 |
data = '50px' |
||||||
showPopup() { |
|
||||||
this.$refs.popup.show(); |
|
||||||
}, |
|
||||||
postionIng() { |
|
||||||
let that = this; |
|
||||||
uni.getLocation({ |
|
||||||
type: 'wgs84', |
|
||||||
success: function(res) { |
|
||||||
app.globalData.latitude = res.latitude; |
|
||||||
app.globalData.longitude = res.longitude; |
|
||||||
that.findByLatAndLng(res.longitude, res.latitude); |
|
||||||
// uni.request({ |
|
||||||
// url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + res.latitude + |
|
||||||
// ',' + res.longitude + '&key=7UMBZ-HFEHX-HSD4Q-Z3QY6-OQKN7-2QBDB', |
|
||||||
// data: {}, |
|
||||||
// success: function(res) { |
|
||||||
// that.city = res.data.result.address_component.city.replace(/市/g, |
|
||||||
// ''); |
|
||||||
// app.globalData.cityId = res.data.result.ad_info.adcode; |
|
||||||
// // app.globalData.cityId = '500100'; |
|
||||||
// that.getMerchantList(); |
|
||||||
// } |
|
||||||
// }) |
|
||||||
} |
|
||||||
}) |
|
||||||
}, |
|
||||||
//金纬度转 |
|
||||||
findByLatAndLng(item, item1) { |
|
||||||
let datas = { |
|
||||||
lng: item, |
|
||||||
lat: item1 |
|
||||||
} |
|
||||||
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; |
|
||||||
app.globalData.cityId = res.return_data.regionId; |
|
||||||
// app.globalData.cityId = '500100'; |
|
||||||
if (res.return_data.result.addressComponent.adcode) { |
|
||||||
this.getMerchantList(); |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
}, |
|
||||||
// 商户列表 |
|
||||||
getMerchantList() { |
|
||||||
let params = { |
|
||||||
regionId: app.globalData.cityId |
|
||||||
} |
|
||||||
getMerchantList(params).then(res => { |
|
||||||
if (res.return_code == '000000' && res.return_data != '') { |
|
||||||
this.MerchantList = res.return_data; |
|
||||||
this.showCategoryIndex = res.return_data[0].merchantName; |
|
||||||
this.showCategoryIndexId = res.return_data[0].id; |
|
||||||
this.pageNum = 1; |
|
||||||
this.pageSize = 10; |
|
||||||
this.isNoMoreData = false; |
|
||||||
this.categoryList = []; |
|
||||||
this.getStoreListByMerchant(); |
|
||||||
|
|
||||||
} else { |
} else { |
||||||
this.MerchantList = []; |
data = '200px' |
||||||
uni.showToast({ |
|
||||||
title: '暂无数据', |
|
||||||
icon: 'none', |
|
||||||
duration: 2000 |
|
||||||
}) |
|
||||||
} |
} |
||||||
}) |
} else { |
||||||
}, |
data = '90vh' |
||||||
//跳转位置 |
|
||||||
goPostion() { |
|
||||||
uni.navigateTo({ |
|
||||||
url: '/pages/user/positioning/positioning' |
|
||||||
}) |
|
||||||
}, |
|
||||||
//门店列表 |
|
||||||
getStoreListByMerchant() { |
|
||||||
uni.showLoading({ |
|
||||||
title: '加载中...' |
|
||||||
}) |
|
||||||
if (this.isNoMoreData) { |
|
||||||
uni.hideLoading() |
|
||||||
return false; |
|
||||||
} |
|
||||||
let pagenum = this.pageNum; |
|
||||||
let params = { |
|
||||||
merchantId: this.showCategoryIndexId, |
|
||||||
longitude: app.globalData.longitude, |
|
||||||
latitude: app.globalData.latitude, |
|
||||||
pageNum: pagenum, |
|
||||||
pageSize: this.pageSize |
|
||||||
|
|
||||||
} |
} |
||||||
getStoreListByMerchant(params).then(res => { |
return data |
||||||
uni.hideLoading(); |
|
||||||
if (res.return_code == '000000') { |
|
||||||
uni.hideLoading(); |
|
||||||
this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true; |
|
||||||
this.categoryList = this.categoryList.concat(res.return_data.list); |
|
||||||
if (res.return_data.total == (this.pageNum * this.pageSize)) { |
|
||||||
this.isNoMoreData = true; |
|
||||||
} |
|
||||||
this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum; |
|
||||||
} else { |
|
||||||
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(); |
|
||||||
}, |
|
||||||
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 |
|
||||||
}) |
|
||||||
}, |
|
||||||
//搜索跳转 |
|
||||||
toSearch() { |
|
||||||
uni.navigateTo({ |
|
||||||
url: '../../goods/HM-search/HM-search' |
|
||||||
}) |
|
||||||
// uni.showToast({title: "建议跳转到新页面做搜索功能"}); |
|
||||||
}, |
}, |
||||||
//拨打客服电话 |
coverbottom() { |
||||||
playPhone() { |
let data = '' |
||||||
let cont = "本服务由惠兑礼品提供\n400-678-0738"; |
if (this.bottomData) { |
||||||
let content = cont.replace(/<br>/g,"\n"); |
data = '20rpx' |
||||||
uni.showModal({ |
} else { |
||||||
title: '客服', |
data = '100rpx' |
||||||
content: content, |
|
||||||
success: function(res) { |
|
||||||
if (res.confirm) { |
|
||||||
uni.makePhoneCall({ |
|
||||||
phoneNumber: '4006780738', //电话号码 |
|
||||||
success: function(e) { |
|
||||||
console.log(e); |
|
||||||
}, |
|
||||||
fail: function(e) { |
|
||||||
console.log(e); |
|
||||||
|
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</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; |
|
||||||
} |
|
||||||
|
|
||||||
.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; |
|
||||||
} |
|
||||||
|
|
||||||
.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; |
|
||||||
} |
|
||||||
|
|
||||||
.stuMenu { |
|
||||||
width: 33.3%; |
|
||||||
height: 30px; |
|
||||||
line-height: 30px; |
|
||||||
font-size: 14px; |
|
||||||
margin-top: 10px; |
|
||||||
color: #333333; |
|
||||||
} |
|
||||||
|
|
||||||
.stuimg { |
|
||||||
width: 10px; |
|
||||||
vertical-align: middle; |
|
||||||
} |
|
||||||
|
|
||||||
.loading-text { |
|
||||||
width: 100%; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
height: 60upx; |
|
||||||
color: #979797; |
|
||||||
font-size: 24upx; |
|
||||||
} |
|
||||||
|
|
||||||
.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 */ |
|
||||||
|
|
||||||
.addr { |
|
||||||
width: 120upx; |
|
||||||
height: 60upx; |
|
||||||
flex-shrink: 0; |
|
||||||
color: #FFFFFF; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
font-size: 28upx; |
|
||||||
|
|
||||||
.icon { |
|
||||||
height: 60upx; |
|
||||||
margin-right: 5upx; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
font-size: 42upx; |
|
||||||
color: #ffc50a; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.input-box { |
|
||||||
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; |
|
||||||
} |
|
||||||
|
|
||||||
input { |
|
||||||
padding-left: 28upx; |
|
||||||
height: 28upx; |
|
||||||
font-size: 28upx; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.icon-btn { |
|
||||||
width: 60upx; |
|
||||||
height: 60upx; |
|
||||||
flex-shrink: 0; |
|
||||||
display: flex; |
|
||||||
|
|
||||||
.icon { |
|
||||||
width: 60upx; |
|
||||||
height: 60upx; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
font-size: 42upx; |
|
||||||
background-color: transparent; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.place { |
|
||||||
|
|
||||||
background-color: #ffffff; |
|
||||||
height: 100upx; |
|
||||||
/* #ifdef APP-PLUS */ |
|
||||||
margin-top: var(--status-bar-height); |
|
||||||
/* #endif */ |
|
||||||
} |
|
||||||
|
|
||||||
.category-list { |
|
||||||
width: 100%; |
|
||||||
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; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
} |
||||||
|
return data |
||||||
} |
} |
||||||
} |
}, |
||||||
|
methods: { |
||||||
.right { |
//地图点击事件 |
||||||
width: 76%; |
markertap(e) { |
||||||
left: 24%; |
console.log("===你点击了标记点===", e) |
||||||
|
}, |
||||||
.category { |
//地图点击事件 |
||||||
width: 94%; |
callouttap(e) { |
||||||
padding: 20upx 3%; |
console.log('地图点击事件', e) |
||||||
|
|
||||||
.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); |
|
||||||
} |
|
||||||
|
|
||||||
.text { |
|
||||||
margin-top: 5upx; |
|
||||||
width: 80%; |
|
||||||
display: flex; |
|
||||||
justify-content: center; |
|
||||||
font-size: 26upx; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
</style> |
</script> |
||||||
|
|||||||
Loading…
Reference in new issue