Huanyuyuehui/pages/shop/index.vue

<template>
	<view class="content" :style="viewColor">
		<view class="top-tab" :style="`padding-top:`+navtop">
			<view class="tab-location" @click="getLocation">
				<view class="" style="max-width: 200px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
					{{city}}
				</view>
				
				<view class="iconfont icon-dingwei" style="margin-left: 8rpx;"></view>
				<view style="font-size: 14px;margin-left: 10px;font-weight: 500;" @click.stop="selectLocation">切换</view>
			</view>
			<view class="tab-sao iconfont icon-saoma" @tap='handleBorcode'></view>
		</view>
		<view class="content-map" >
			<map class="map" :latitude="latitude" :longitude="longitude" :markers="[{'id':1,'latitude':latitude,'longitude':longitude,'iconPath':'/static/images/location.png',width:24,height:24 }]" :show-location="true"></map>
		</view>
		<view class="content-type">
			<!-- <cover-image src="../annex/static/vipBg.png" style="position: absolute;
			top: -20px;"></cover-image> -->
			<view class="type-item" v-for="(item,index) in tabList" :key="index" @click="goShopSearch(item)">
				<image class="type-item-img" :src="item.category_icon" mode=""></image>
				<text class="type-item-text">{{item.category_name}}</text>
			</view>
		</view>
		<view class="content-list">
			<view class="list-tab">
				<view :class="current==0?'action':''" @click="selectCurrent(0)">全部商家</view>
				<view :class="current==1?'action':''" @click="selectCurrent(1,true)">附近商家</view>
			</view>
			<view class="list-container" v-if="shopList.length">
				<view class="list-item" v-for="(item,index) in shopList" :key='index'>
					<view class="list-item-left">
						<image :src="item.mer_avatar" mode=""></image>
					</view>
					<view class="list-item-right" @click="navtoDetail(item)">
						<view class="item-title">
							{{item.mer_name}}
						</view>
						<view class="item-content">
							<view class="right-center-left">
								<view class="center-left-score">
									<!-- <text class="iconfont icon-shitixing"></text>/ -->
									<image src="@/static/images/xingxing.png" mode="" style="width: 12px;height: 12px;"></image>
									<text>{{item.service_score}}分</text>
								</view>
								<view class="center-left-time" v-if="item.config&&item.config.mer_take_time">营业时间:{{item.config.mer_take_time.join('-')}}</view>
							</view>
							<view class="right-center-right">
								去选购
							</view>
						</view>
						<view class="item-address">
							<view class="address" v-if="item.mer_address">{{item.mer_address}}</view>
							<view class="distance" v-if="item.distance">{{item.distance}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list-container" v-else>
				<view class="list-fail">
					<image :src="`${domain}/static/images/noCart.png`"></image>
					<view>暂无商家，去看看其他的吧</view>
				</view>
			</view>
		</view>
		<!--自定义底部tab栏-->
		<customTab :newData="newData" :activeRouter="activeRouter"></customTab>
	</view>
</template>
<script>
	import { HTTP_REQUEST_URL } from '@/config/app';
	import { getGeocoder } from '@/api/store.js';
	import { getNavigation } from '@/api/public.js';
	import customTab from '@/components/customTab';
	import { mapGetters } from "vuex";
	import {shopInit,shopNearby} from '@/api/shop.js'
	import {getOrderOfflinePay} from '@/api/admin.js'
	import prompt from '@/utils/prompt.js'
	export default {
		components:{
			customTab,
		},
		data(){
			return{
				 domain: HTTP_REQUEST_URL,
				 newData: {},
				 activeRouter: '',
				 tabList:[],
				 shopList:[],
				 current:0,
				 navtop:0,
				 addressInfo:[],
				 latitude: '',
				 longitude: '',
				 city:'请点击获取定位',
			}
		},
		onLoad(){
			
			// this.selfLocation();
		},
		onShow(){
			uni.showTabBar({animation: false});
			let location=uni.getStorageSync('locationCity');
			if(location){
				this.latitude=location.lat;
				this.longitude=location.lon;
				this.city=location.city;
			}
			this.init();
			this.selfLocation();
			this.getNav();
		},
		computed:{
			...mapGetters(['viewColor'])
		},
		created(options) {
			let statusBarHeight= uni.getSystemInfoSync().statusBarHeight+"px";
			this.navtop=statusBarHeight;
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route //获取当前页面路由
			this.activeRouter = '/' + curRoute
		},
		methods:{
			async getLocation(){
				let self=this;
				// #ifdef APP-PLUS
				
				let res = await prompt.requestPermissions(['ACCESS_FINE_LOCATION'])
				if(res!==1)return 
				else {
					console.log('999: ',999);
				}
				// #endif
				uni.getLocation({
					type: 'gcj02',
					geocode:true,
					success: (res) => {
						let latitude, longitude;
						latitude = res.latitude.toString();
						longitude = res.longitude.toString();
						console.log('res: ',res);
						let parems={
							city:res.address.poiName,
							lat:latitude,
							lon:longitude
						}
						
						uni.setStorageSync('locationCity',parems);
						self.latitude = res.latitude;
						self.longitude = res.longitude;
						self.city=res.address.poiName;
							uni.hideLoading();
							let data1={
								mini:1,
								type_id:4,
								location:res.latitude+','+res.longitude
							}
							shopNearby(data1).then((r)=>{
								if(r.data.list){
									this.shopList=r.data.list;
								}
							})
					},
					fail: (res) => {
						uni.hideLoading();
						uni.showToast({
							title: res.errMsg,
							icon: 'none',
							duration: 1000
						});
					}
				});
			},
			selectLocation(){
				uni.navigateTo({
					url:'/pages/shop/location/index'
				})
			},
			init(){
				shopInit().then((res)=>{
					if(res.data.lst){
						this.tabList=res.data.lst;
					}
					if(res.data.list){
						this.shopList=res.data.list;
					}
					console.log('res: ',res);
				})
			},
			selfLocation() {
				uni.hideLoading();
				let data1={
					mini:1,
					type_id:4,
					location:this.latitude+','+this.longitude
				}
				shopNearby(data1).then((r)=>{
					if(r.data.list){
						this.shopList=r.data.list;
					}
				})
			},
			goShopSearch(item){
				uni.navigateTo({
					url:'./search/index?id='+item.merchant_category_id
				})
			},
			getNav(){
				getNavigation().then(res => {
					this.newData = res.data
					if (this.newData.status && this.newData.status.status) {
						uni.hideTabBar()
					} else {
						uni.showTabBar()
					}
				})
			},
			handleBorcode() {
				// 从相机和相册扫码
				// #ifdef APP-PLUS
				uni.scanCode({
					scanType:['qrCode'],
					success: async (res)=> {
						let result = JSON.parse(res.result)
						let val = await getOrderOfflinePay(result.sn)
						if(val.status == 200){
							this.$util.Tips({
								title: '支付成功',
								icon: 'success'
							});
							setTimeout(()=>{
								uni.navigateTo({
									url:'/pages/users/order_list/index?status=-1'
								})
							},1000)
						}
					}
				});
				// #endif
			},
			selectCurrent(val,b){
				if(b){
					this.getLocation();
				}
				this.selfLocation();
				this.current=val;
			},
			navtoDetail(item){
				uni.navigateTo({
					url:'/pages/shop_details/index?id='+item.mer_id
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	@import url("css/shop.css");
</style>