<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> <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> </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", 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"; } }, 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" onReachBottom() { this.getStoreListByMerchant(); }, methods: { //显示弹出 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 { this.MerchantList = []; uni.showToast({ title: '暂无数据', icon: 'none', duration: 2000 }) } }) }, //跳转位置 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 => { 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: "建议跳转到新页面做搜索功能"}); }, //拨打客服电话 playPhone() { let cont = "本服务由惠兑礼品提供\n400-678-738"; 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); } }) } } }) } } } </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; } } } } } .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; } } } } } } </style>