260 lines
7.2 KiB
Vue
260 lines
7.2 KiB
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> |