Huanyuyuehui/pages/shop/index.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>