H5_module/merchant/nearby/nearby.vue

<template>
<view>
	<block v-if="config.Many_Store == 1">
		<view class="ssbox">
			<view class="search ddflex">
				<view class="search-text ddflex fflex" v-if="!isShowIpt" @click="showIpt">
					<image src="/static/pages/images/ssico.png"></image>
					<view>搜索您想要找的网点</view>
				</view>
				<block v-if="isShowIpt">
				<input placeholder="搜索您想要找的网点" placeholder-class="placeholder" class="fflex" v-model="searchTitle" @input="search" @confirm="confirm" confirm-type="search" :focus="isShowIpt"></input>
				<image src="/static/pages/images/clear.png" @tap="clearInput" v-if="searchTitle!=''"></image>
				</block>
			</view>
			<!-- <view class="sousuo" @tap="confirmSearch">搜索</view> -->
		</view>
	</block>
	<block v-if="commonPageList&&commonPageList.length>0">
	<view class="tits">常用门店</view>
	<view class="list pdlr30">
		<block v-for="(item, index) in commonPageList" :key="index">
			<view :class="'li ddflex' + (merchant.id == item.id?' active' : '')">
				<view class="d-type">
					{{merchant.id == item.id ? '当前门店' : '最近下单'}}
					<!-- {{item.type == 2 ? '上次购买' : item.type == 3 ? '总店' : item.type == 5 ? '小店' : ''}} -->
				</view>
				<view class="li-l fflex" @tap="chooseMerchant(item)" :data-index="index">
					<view class="ddflex name" :style="'color:' + (item.isChoose ? '#999' : '#333')">
						<image :src="item.logo" mode="aspectFill" v-if="item.logo"></image>
						{{item.title}}
					</view>
					<view class="dizhi">{{item.address}}</view>
					<view class="dizhi">营业时间 {{item.businessTime}}</view>
					<view class="sta ddflex">
						<text :class="item.isOpen?'':'rest'">{{item.isOpen ? '营业中':'休息中'}}</text>
						<!-- <text>可挂号</text> -->
					</view>
					<!-- <view class="d-type" v-if="item.type != 4">
						{{item.type == 1 ? '归属门店' : item.type == 2 ? '上次下单' : item.type == 3 ? '总店' : item.type == 5 ? '小店' : ''}}
					</view> -->
				</view>
				<view class="li-r">
					<view class="yue" v-if="item.range > 0">
						距离<text v-if="item.range!=50000">{{item.range > 1 ? item.range +'km' : item.mDistance+'m'}}</text>
					</view>
					<view class="btn ddflex">
						<image :src="picUrlss+'blue/m_call.png'" @tap="makePhoneCall(1,index)" :data-index="index"></image>
						<image :src="picUrlss+'blue/m_map.png'" @tap="goNavigation(1,index)" :data-index="index"></image>
					</view>
				</view>
				<!-- <view class="dflex bottom_right" @tap="tonearbyDet" :data-index="index">查看详情<image
						src="/static/pages/images/nearby_icon_left.png"></image>
				</view> -->
			</view>
		</block>
	</view>
	</block>
	<block v-if="pageList&&pageList.length>0">
	<view class="tits">附近门店</view>
	<view class="list pdlr30">
		<block v-for="(item, index) in pageList" :key="index">
			<view :class="'li ddflex' + (merchant.id == item.id?' active' : '')">
				<view class="d-type" v-if="item.isUser == 1 || item.isDefault == 1">
					<block v-if="item.isUser == 1 && item.isDefault != 1">归属门店</block>
					<block v-else-if="item.isUser == 1 && item.isDefault == 1">归属门店</block>
					<block v-else-if="item.isDefault == 1">总店</block>
				</view>
				<view class="li-l fflex" @tap="chooseMerchant(item)">
					<view class="ddflex name" :style="'color:' + (item.isChoose ? '#999' : '#333')">
						<image :src="item.logo" mode="aspectFill" v-if="item.logo"></image>
						{{item.title}}
					</view>
					<view class="dizhi">{{item.address}}</view>
					<view class="dizhi">营业时间 {{item.businessTime}}</view>
					<view class="sta ddflex">
						<text :class="item.isOpen?'':'rest'">{{item.isOpen ? '营业中':'休息中'}}</text>
						<!-- <text>可挂号</text> -->
					</view>
					<!-- <view class="d-type" v-if="item.type != 4">
						{{item.type == 1 ? '归属门店' : item.type == 2 ? '上次下单' : item.type == 3 ? '总店' : item.type == 5 ? '小店' : ''}}
					</view> -->
				</view>
				<view class="li-r">
					<view class="yue" v-if="item.range > 0">
						距离<text v-if="item.range!=50000">{{item.range > 1 ? item.range +'km' : item.mDistance+'m'}}</text>
					</view>
					<view class="btn ddflex">
						<image :src="picUrlss+'blue/m_call.png'" @tap="makePhoneCall(2,index)"></image>
						<image :src="picUrlss+'blue/m_map.png'" @tap="goNavigation(2,index)"></image>
					</view>
				</view>
				<!-- <view class="dflex bottom_right" @tap="tonearbyDet" :data-index="index">查看详情<image
						src="/static/pages/images/nearby_icon_left.png"></image>
				</view> -->
			</view>
		</block>
	</view>
	</block>
	<view class="nodata" v-if="isShowNodata">
		<image :src="picUrlss+'empty_dd.png'"></image>
		<text>暂无其他门店</text>
	</view>
	<view class="mask" @tap="closeLayer" :hidden="isShow" v-if="!isChoose"></view>
	<view class="kjpop" :hidden="isShow" v-if="!isChoose">
		<view class="top">
			<image src="/static/pages/images/mengdianxuanze.png"></image>
		</view>
		<view class="cont">
			<text>已切换至：</text>
			<view class="title">{{title}}</view>
			<view class="btn" @tap="closeLayer">我知道了</view>
		</view>
	</view>
</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	var QQMapWX = require("../../utils/qqmap.js");
	const api = require("../../utils/api.js");
	// import uniDataPicker from "../../uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker";
	export default {
		data() {
			return {
				picUrlss: req.public.picUrls,
				form: {
					page: 1,
					limit: 10,
					province: '',
					city: '',
					country: '',
				},
				pageList: [],
				isLoad: true,
				address: '',
				point: {},
				region: [],
				regions: '',
				searchTitle: '',
				history: [],
				isShow: true,
				addressIshow: false,
				isChoose: false,
				type: "",
				layerModel: "",
				location: "",
				merchant: "",
				merchantId: "",
				freshen: false,
				title: "",
				customItem: '全部',
				config: {},
				isShowIpt: false,
				commonPageList: [],
				isShowNodata: false
			};
		},

		components: {
			// uniDataPicker
		},
		props: {},
		onLoad: function(options) {
			// 实例化API核心类
			QQMapWX.initMap(req.public.mapLBSKEY);
			// console.log(options);
			let _ts = this;
			this.query = options;
			if (options.isChoose) {
				this.setData({
					isChoose: true
				});
			}
			if (options.type) {
				this.setData({
					type: options.type
				});
			}
			this.getstore();
		},
		onReachBottom() {
			this.form.page++;
			this.getList();
		},
		onShow: function() {
			let _ts = this;
			let config = JSON.parse(req.getStorage('configRes'))
			this.config = config
			if (config.Many_Store == 1) {
				this.initLocation(() => {
					if (_ts.point) {
						_ts.form.lat = _ts.point.latitude;
						_ts.form.lng = _ts.point.longitude;
						// _ts.form.regionCode = _ts.point.regionCode;

						// console.log(_ts.point, _ts.point.latitude, _ts.point.regionCode);
						_ts.getList();
					} else {
						_ts.getList();
					}
				}); // this.showMap()
			} else {
				_ts.getList();
			}
			let history = req.getStorage('HISTORYS');
			this.setData({
				history: history
			});
		},
		methods: {
			showIpt(){
				this.isShowIpt = true
			},
			async initLocation(success) {
				let _ts = this;
				await req.getLocation(res => {
					if (res == 1) {
						_ts.setData({
							layerModel: res
						});
						uni.showModal({
							title: '温馨提示',
							content: '获取定位失败，请前往设置打开定位权限',
							showCancel: false,
							success(res) {
								if (res.confirm) {
									uni.openSetting({
										success(res) {
										}
									});
								}
							}

						});
					} else {
						_ts.setData({
							layerModel: 0
						});
					}
					QQMapWX.reverseGeocoder(res, data => {
						console.log('QQMapWX==' + JSON.stringify(data));
						if (data) {
							res.regionCode = data.ad_info.adcode;
							_ts.setData({
								address: data.address,
								'region[0]': data.address_component.province,
								'region[1]': data.address_component.city,
								'region[2]': data.address_component.district,
								regions: data.address_component.district,
								location: data.location
							});
							_ts.setData({
								point: res
							});
							if (success && typeof success === 'function') {
								success.call(this);
							}
						} else {
							_ts.setData({
								layerModel: 1
							});
							_ts.confirmSearch();
						}
					});
				});
			},
			timeRange(beginTime, endTime) {
				let strb = beginTime.split(":");
				if (strb.length != 2) {
					return false;
				}
				let stre = endTime.split(":");
				if (stre.length != 2) {
					return false;
				}
				let b = new Date();
				let e = new Date();
				let n = new Date();
				b.setHours(strb[0]);
				b.setMinutes(strb[1]);
				e.setHours(stre[0]);
				e.setMinutes(stre[1]);
				if (n.getTime() - b.getTime() >= 0 && n.getTime() - e.getTime() < 0) {
					return true;
				} else {
					return false;
				}
			},
			/**
			 * @param {Object} regionCode
			 */
			getList() {
				if (!this.isLoad) return false;
				this.isLoad = false;
				let that = this;
				if (!that.form.province) {
					delete that.form.province
				}
				if (!that.form.city) {
					delete that.form.city
				}
				if (!that.form.country) {
					delete that.form.country
				}
				this.form.isBusiness = 1; 
				req.getRequest('/api/merchant/page', this.form, data => {
					if (data && data.length >= 10) this.isLoad = true;
					let res;
					console.log('门店列表==', data)
					let arr = []
					res = data.map(it => {
						it.isChoose = false;
						if(it.businessTime){
							let businessTime = it.businessTime.split('-')
							it.isOpen = that.timeRange(businessTime[0],businessTime[1])
						}
						if (it.range > 0) it.range = parseFloat(it.range).toFixed(2), it.mDistance =
							parseFloat(it.mDistance).toFixed(0);
						if (this.isChoose && it.isGoods == 0 && JSON.parse(req.getStorage('configRes'))
							.Is_Store_Price_Stock == 0) it.isChoose = true;
						return it;
					});
					res = res.filter(it => it.isGoods != 0);
					res.map(it=>{
						if(it.isPervOrder === 1 && it.id != this.merchant.id){
							arr.push(it)
						}
						if(it.id === this.merchant.id){
							arr.unshift(it)
						}
					})
					that.commonPageList = arr;
					console.log('门店列表1==', res)
					if (that.form.page > 1) {
						res = that.pageList.concat(res);
					}
					res = res.filter(it => it.id != this.merchant.id && it.isPervOrder != 1);
					if (!req.getStorage('defaultMerchant')) {
						api.defaultMerchant(req, "", data => {
						});
					}

					that.setData({
						pageList: res
					});
					if(that.form.page == 1 && res.length == 0) that.isShowNodata = true

					if (res.length <= 0) {
						this.setData({
							addressIshow: true
						});
					} else {
						this.setData({
							addressIshow: false
						});
					}
				});
			},

			chooseMerchant(item) {
				if (this.isChoose) {
					// if (page.isGoods == 0) return req.msg('该门店不能自提');
					let pages = getCurrentPages();
					var prevPage = pages[pages.length - 2];
					if (item.type == 5) {
						prevPage.$vm.setData({
							merchant: item,
							merchantId: item.merchantDTO.id,
							['query.merchantId']: item.merchantDTO.id,
							['query.shopId']: item.id,
							freshen: true
						});
					} else {
						prevPage.$vm.setData({
							merchant: item,
							merchantId: item.id,
							['query.merchantId']: item.id,
							['query.shopId']: '',
							freshen: true
						});
					}
					// 海报分享切换
					if (prevPage.$vm.scene) {
						prevPage.$vm.setData({
							switch: false
						});
					}
					// 切换门店
					if (this.type == 1) {
						prevPage.setData({
							['query.merchantId']: item.id
						});
					}
					// console.log(prevPage.$vm)

					uni.navigateBack();
				}
				var timestamp = Date.parse(new Date());
				if (item.type == 5) {
					item.time = timestamp + 1 * 60 * 1000
					item.merchantDTO.time = timestamp + 1 * 60 * 1000
					req.setStorage('smallShop', item);
					req.setStorage('MERCHANT', item.merchantDTO);
				} else {
					item.time = timestamp + 1 * 60 * 1000
					req.setStorage('MERCHANT', item);
					req.removeStorage('smallShop');
				}

				this.setData({
					title: item.title,
					isShow: false
				});
				this.getstore(); // wx.navigateBack();
			},

			// showMap() {
			//   req.getRequest('/api/merchant/list', { page: 1, limit: 100 }, data => {
			//     // console.log(data)
			//     data.forEach(res => {
			//       this.setData({
			//         'markers[0].latitude': res.lat,
			//         'markers[0].longitude': res.lng,
			//         'markers[0].iconPath': '/pages/images/location.png'
			//       })
			//     })
			//   })
			// },
			bindRegionChange: function(e) {
				let that = this;
				console.log('picker发送选择改变，携带值为', e.detail);
				let code = e.detail.code;
				that.isLoad = true;
				that.form.page = 1;
				// that.getList(e.detail.code[2]);
				if (code.length == 1) {
					that.form.province = code[0];
					that.form.city = '';
					that.form.country = '';
					that.region = e.detail.value[0];
					that.regions = that.region.toString('');
				} else if (code.length == 2) {
					that.form.province = code[0];
					that.form.city = code[1];
					that.form.country = '';
					that.region = [e.detail.value[0], e.detail.value[1]];
					that.regions = that.region[1].toString('');
				} else {
					that.form.province = code[0];
					that.form.city = code[1];
					that.form.country = code[2];
					that.region = [e.detail.value[0], e.detail.value[1], e.detail.value[2]];
					that.regions = that.region[2].toString('');
				}
				that.getList();
				// this.setData({
				// 	region: e.detail.value
				// 	'form.regionCode': e.detail.code[2]
				// });
			},

			getstore() {
				if (this.isChoose) return false;
				let merchant;

				if (req.getStorage('smallShop')) {
					merchant = req.getStorage('smallShop');
				} else {
					merchant = req.getStorage('MERCHANT');
				}
				this.merchant = merchant
				let pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				prevPage.$vm.setData({
					freshen: true
				});
			},

			// 查看详情
			tonearbyDet(type,index) {
				// let index = event.currentTarget.dataset.index;
				let page ={};
				if(type==1){
					page=this.commonPageList[index];
				}else{
					page= this.pageList[index];
				}
				uni.navigateTo({
					url: '/pages/nearbyDetails/nearbyDetails?id=' + page.id
				});
			},

			//拨打电话
			makePhoneCall(type,index) {
				// let index = event.currentTarget.dataset.index;
				let page ={};
				if(type==1){
					page=this.commonPageList[index];
				}else{
					page= this.pageList[index];
				}
				uni.makePhoneCall({
					phoneNumber: page.phone
				});
			},

			//搜索
			search(e) {
				// console.log(e.detail.value);
				this.searchTitle = e.detail.value;
				this.setData({
					searchTitle: e.detail.value
				}); // return e.detail.value.replace(/\s+/g, '').replace(/[^\u4e00-\u9fa5a-zA-Z0-9\w]/g, '');
			},

			//清除输入框
			clearInput() {
				this.setData({
					searchTitle: ''
				});
			},

			confirmSearch() {
				let value = this.searchTitle;
				this.toSearch(value, true);
			},

			confirm() {
				let value = this.searchTitle;
				this.toSearch(value, true);
			},

			toSearch(value, isSave) {
				this.isLoad = isSave;
				let form = this.form;
				form.page = 1;
				form.title = value;
				form.isBusiness = 1; // form.regionCode=''

				req.getRequest('/api/merchant/page', form, res => {
					// console.log("1")
					let data;
					data = res.map(it => {
						it.isChoose = false;
						if (it.range > 0) it.range = parseFloat(it.range).toFixed(1);
						if (this.isChoose && it.isGoods == 0) it.isChoose = true;
						return it;
					});
					data = data.filter(it => it.isGoods != 0);

					if (!req.getStorage('defaultMerchant')) {
						api.defaultMerchant(req, "", data => {
							// console.log(data);
						});
					} // req.setStorage('defaultMerchant',data.filter(it=>it.isDefault==1))
					// if(JSON.parse(req.getStorage('configRes')).Is_Store_Price_Stock==1&&data){
					//   data=data.filter(it=>it.isDefault!=1)
					// }


					this.setData({
						pageList: data
					});

					if (data.length <= 0) {
						this.setData({
							addressIshow: true
						});
					} else {
						this.setData({
							addressIshow: false
						});
					}
				});
			},

			closeLayer() {
				this.setData({
					isShow: true
				});
				uni.navigateBack();
			},

   /**
	* @param {Object} type 1常用 2门店列表
	* @param {Object} index
	*/
			goNavigation(type,index) {
				let page ={};
				if(type==1){
					page=this.commonPageList[index];
				}else{
					page= this.pageList[index];
				}
				console.log('pageItem===',page);
				let plugin = requirePlugin('routePlan');
				let key = req.public.mapLBSKEY; //使用在腾讯位置服务申请的key
				let referer = this.config.CONFIG_PROJECT_TITLE; //调用插件的app的名称
				// console.log("名称====" + referer);
				let endPoint = JSON.stringify({
					//终点
					'name': page.title,
					'latitude': page.lat,
					'longitude': page.lng
				});
				var url='plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint;
				console.log('地址=====',url);
				uni.navigateTo({
					url: url
				});
			}

		}
	};
</script>
<style>
	@import "./nearby.css";
</style>