|
|
|
|
@ -1,142 +1,279 @@ |
|
|
|
|
<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}" :show-location='true' :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 marker" :key="index" @click="changeType(item)">全部全部{{index}}</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
<!-- 二级分类 --> |
|
|
|
|
<view class="width100 mart15 backcorfff cover-viewchage alijus fotct" style="border-radius: 22px;"> |
|
|
|
|
<view class="font14 width30w" :class="[selectFirst == 1? 'onchange' : '']" |
|
|
|
|
@click="changeChilerType()">全部 |
|
|
|
|
<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="font14 width30w" :class="[selectFirst == 1? 'onchange' : '']">全部 |
|
|
|
|
<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"> |
|
|
|
|
<view class="width90w" :class="[selectFirst == 1? 'onchange' : '']">发生地方是发生地方</view> |
|
|
|
|
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></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 class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"> |
|
|
|
|
<view class="width90w">发生地方是发生地方</view> |
|
|
|
|
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"> |
|
|
|
|
<view class="width90w">发生地方是发生地方</view> |
|
|
|
|
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></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="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"> |
|
|
|
|
<view class="width90w">发生地方是发生地方</view> |
|
|
|
|
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"> |
|
|
|
|
<view class="width90w">发生地方是发生地方</view> |
|
|
|
|
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"> |
|
|
|
|
<view class="width90w">发生地方是发生地方</view> |
|
|
|
|
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"> |
|
|
|
|
<view class="width90w">发生地方是发生地方</view> |
|
|
|
|
<image class="icon12" src="../../../static/img/jt.png" mode="widthFix"></image> |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<!-- 未打开筛选前 --> |
|
|
|
|
<view class="cover-view-foot" @click="updateSelected(2)" v-if="isSelected == 1"> |
|
|
|
|
<view class="line-view"></view> |
|
|
|
|
<view class="mart10 fcor666 font13 width100">发现更多商户</view> |
|
|
|
|
<view class="input-box"> |
|
|
|
|
<input placeholder="搜索商品" v-model="couponName" placeholder-style="color:#c0c0c0;" |
|
|
|
|
@input="toSearch()" /> |
|
|
|
|
</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 class="cover-view-foot-behind" @click="updateSelected(1)" v-if="isSelected == 2"> |
|
|
|
|
<view class="line-view"></view> |
|
|
|
|
<view class="mart10 fcor666 font13 width100">发现更多商户</view> |
|
|
|
|
<view class="input-box"> |
|
|
|
|
<input placeholder="搜索商品" v-model="couponName" placeholder-style="color:#c0c0c0;" |
|
|
|
|
@input="toSearch()" /> |
|
|
|
|
</view> |
|
|
|
|
<scroll-view class="scoroll-cont width94 mart10" scroll-y="true"> |
|
|
|
|
<view class="width94 alijusstart" @click.stop="updateSelected(1)"> |
|
|
|
|
<view class="width30"> |
|
|
|
|
<image src="../../../static/img/jfx.png" class="icon45" mode="widthFix"> |
|
|
|
|
</image> |
|
|
|
|
</view> |
|
|
|
|
<view class="width70"></view> |
|
|
|
|
</view> |
|
|
|
|
</scroll-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'; |
|
|
|
|
let app = getApp(); |
|
|
|
|
export default { |
|
|
|
|
components: { |
|
|
|
|
wybPopup |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
showCategoryIndex: '', |
|
|
|
|
showCategoryIndexId: '', |
|
|
|
|
headerPosition: "fixed", |
|
|
|
|
latitude: 23.106574, //纬度 |
|
|
|
|
longitude: 113.324587, //经度 |
|
|
|
|
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: '点击加载更多' |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onPageScroll(e) { |
|
|
|
|
//兼容iOS端下拉时顶部漂移 |
|
|
|
|
if (e.scrollTop >= 0) { |
|
|
|
|
this.headerPosition = "fixed"; |
|
|
|
|
} else { |
|
|
|
|
this.headerPosition = "absolute"; |
|
|
|
|
marker: [{ |
|
|
|
|
id: 0, |
|
|
|
|
latitude: 23.13065, //纬度 |
|
|
|
|
longitude: 113.3274, //经度 |
|
|
|
|
iconPath: '../../../static/img/user/user5.png', //显示的图标 |
|
|
|
|
rotate: 0, // 旋转度数 |
|
|
|
|
width: 20, //宽 |
|
|
|
|
height: 30, //高 |
|
|
|
|
// title:'我在这里',//标注点名 |
|
|
|
|
alpha: 0.5, //透明度 |
|
|
|
|
callout: { //自定义标记点上方的气泡窗口 点击有效 |
|
|
|
|
content: '天宝大厦', //文本 |
|
|
|
|
color: '#ffffff', //文字颜色 |
|
|
|
|
fontSize: 14, //文本大小 |
|
|
|
|
borderRadius: 15, //边框圆角 |
|
|
|
|
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: 30, //高 |
|
|
|
|
// title:'我在这里',//标注点名 |
|
|
|
|
alpha: 0.5, //透明度 |
|
|
|
|
// label:{//为标记点旁边增加标签 //因背景颜色H5不支持 |
|
|
|
|
// color:'red',//文本颜色 |
|
|
|
|
// }, |
|
|
|
|
callout: { //自定义标记点上方的气泡窗口 点击有效 |
|
|
|
|
content: '广州塔', //文本 |
|
|
|
|
color: '#ffffff', //文字颜色 |
|
|
|
|
fontSize: 14, //文本大小 |
|
|
|
|
borderRadius: 15, //边框圆角 |
|
|
|
|
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: 30, //高 |
|
|
|
|
alpha: 0.5, //透明度 |
|
|
|
|
callout: { //自定义标记点上方的气泡窗口 点击有效 |
|
|
|
|
content: '德隆大厦', //文本 |
|
|
|
|
color: '#ffffff', //文字颜色 |
|
|
|
|
fontSize: 14, //文本大小 |
|
|
|
|
borderRadius: 15, //边框圆角 |
|
|
|
|
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: 30, //高 |
|
|
|
|
alpha: 0.5, //透明度 |
|
|
|
|
callout: { //自定义标记点上方的气泡窗口 点击有效 |
|
|
|
|
content: '羊城国际商贸中心', //文本 |
|
|
|
|
color: '#ffffff', //文字颜色 |
|
|
|
|
fontSize: 14, //文本大小 |
|
|
|
|
borderRadius: 15, //边框圆角 |
|
|
|
|
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: 30, //高 |
|
|
|
|
alpha: 0.5, //透明度 |
|
|
|
|
callout: { //自定义标记点上方的气泡窗口 点击有效 |
|
|
|
|
content: '天瑞广场A座', //文本 |
|
|
|
|
color: '#ffffff', //文字颜色 |
|
|
|
|
fontSize: 16, //文本大小 |
|
|
|
|
borderRadius: 15, //边框圆角 |
|
|
|
|
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: 30, //高 |
|
|
|
|
alpha: 0.5, //透明度 |
|
|
|
|
callout: { //自定义标记点上方的气泡窗口 点击有效 |
|
|
|
|
content: '大米和小米儿童康复(广州盈丰)中心', //文本 |
|
|
|
|
color: '#ffffff', //文字颜色 |
|
|
|
|
fontSize: 14, //文本大小 |
|
|
|
|
borderRadius: 15, //边框圆角 |
|
|
|
|
borderWidth: '8', |
|
|
|
|
bgColor: '#e51860', //背景颜色 |
|
|
|
|
display: 'ALWAYS', //常显 |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
typeid: 0, //选择分类 |
|
|
|
|
isSelected: 1, //是否选择下拉 |
|
|
|
|
selectFirst: 1, //筛选是否有值 |
|
|
|
|
selectChiler: 1, // 子菜单筛选 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onLoad() {}, |
|
|
|
|
onShow() { |
|
|
|
|
this.pageNum = 1; |
|
|
|
|
this.categoryList = []; |
|
|
|
|
this.MerchantList = []; |
|
|
|
|
if (app.globalData.cityName != '') { |
|
|
|
|
this.city = app.globalData.qianzhuCityName; |
|
|
|
|
this.getMerchantList(); |
|
|
|
|
} else { |
|
|
|
|
this.postionIng(); |
|
|
|
|
} |
|
|
|
|
onLoad() { |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance" |
|
|
|
|
onReachBottom() { |
|
|
|
|
this.getStoreListByMerchant(); |
|
|
|
|
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 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
methods: { |
|
|
|
|
//显示弹出 |
|
|
|
|
showPopup() { |
|
|
|
|
this.$refs.popup.show(); |
|
|
|
|
//地图点击事件 |
|
|
|
|
markertap(e) {}, |
|
|
|
|
//地图点击事件 |
|
|
|
|
callouttap(e) { |
|
|
|
|
console.log('地图点击事件', e) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
postionIng() { |
|
|
|
|
let that = this; |
|
|
|
|
uni.getLocation({ |
|
|
|
|
@ -244,361 +381,174 @@ |
|
|
|
|
this.categoryList = []; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 定位点击事件 |
|
|
|
|
onControltap() { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
//分类切换显示 |
|
|
|
|
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(); |
|
|
|
|
//选择类型 |
|
|
|
|
changeType(item) { |
|
|
|
|
this.typeid = item.id; |
|
|
|
|
}, |
|
|
|
|
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: "建议跳转到新页面做搜索功能"}); |
|
|
|
|
//子菜单显示 |
|
|
|
|
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); |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
// 是否选择下拉 |
|
|
|
|
updateSelected(item) { |
|
|
|
|
this.isSelected = item; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</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); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
|
margin-top: 5upx; |
|
|
|
|
width: 80%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
font-size: 26upx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.onclick { |
|
|
|
|
background-color: #089bf5; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
</style> |
