183 lines
5.8 KiB
Vue
183 lines
5.8 KiB
Vue
|
||
<template>
|
||
<view class="content" :style="viewColor">
|
||
<view class="top-tab" :style="`padding-top:`+navtop">
|
||
<view class="tab-location">
|
||
深圳
|
||
<view class="iconfont icon-dingwei"></view>
|
||
</view>
|
||
商家联盟
|
||
<view class="tab-sao iconfont icon-saoma" @tap='handleBorcode'></view>
|
||
</view>
|
||
<view class="content-map" >
|
||
<map class="map" :latitude="22.547" :longitude="114.085947"></map>
|
||
|
||
</view>
|
||
<view class="content-type">
|
||
<!-- <cover-image src="../annex/static/vipBg.png" style="position: absolute;
|
||
top: -20px;"></cover-image> -->
|
||
<view class="type-item">
|
||
<image class="type-item-img" src="@/static/images/shop/tab1.png" mode=""></image>
|
||
<text class="type-item-text">餐饮美食</text>
|
||
</view>
|
||
<view class="type-item">
|
||
<image class="type-item-img" src="@/static/images/shop/tab2.png" mode=""></image>
|
||
<text class="type-item-text">丽人美妆</text>
|
||
</view>
|
||
<view class="type-item">
|
||
<image class="type-item-img" src="@/static/images/shop/tab3.png" mode=""></image>
|
||
<text class="type-item-text">休闲娱乐</text>
|
||
</view>
|
||
<view class="type-item">
|
||
<image class="type-item-img" src="@/static/images/shop/tab4.png" mode=""></image>
|
||
<text class="type-item-text">运动健身</text>
|
||
</view>
|
||
<view class="type-item">
|
||
<image class="type-item-img" src="@/static/images/shop/tab5.png" mode=""></image>
|
||
<text class="type-item-text">婚庆服务</text>
|
||
</view>
|
||
<view class="type-item">
|
||
<image class="type-item-img" src="@/static/images/shop/tab6.png" mode=""></image>
|
||
<text class="type-item-text">亲子</text>
|
||
</view>
|
||
<view class="type-item">
|
||
<image class="type-item-img" src="@/static/images/shop/tab7.png" mode=""></image>
|
||
<text class="type-item-text">教育培训</text>
|
||
</view>
|
||
<view class="type-item">
|
||
<image class="type-item-img" src="@/static/images/shop/tab8.png" mode=""></image>
|
||
<text class="type-item-text">汽车服务</text>
|
||
</view>
|
||
<view class="type-item">
|
||
<image class="type-item-img" src="@/static/images/shop/tab9.png" mode=""></image>
|
||
<text class="type-item-text">家装</text>
|
||
</view>
|
||
<view class="type-item">
|
||
<image class="type-item-img" src="@/static/images/shop/tab10.png" mode=""></image>
|
||
<text class="type-item-text">生活服务</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)">附近商家</view>
|
||
</view>
|
||
<view class="list-container" v-if="true">
|
||
<view class="list-item" v-for="(item,index) in 20" :key='index'>
|
||
<view class="list-item-left" v-if="index==1">
|
||
<image src="@/static/images/shop/1.jpg" mode=""></image>
|
||
</view>
|
||
<view class="list-item-left" v-else-if="index==2">
|
||
<image src="@/static/images/shop/2.jpg" mode=""></image>
|
||
</view>
|
||
<view class="list-item-left" v-else-if="index==3">
|
||
<image src="@/static/images/shop/3.png" mode=""></image>
|
||
</view>
|
||
<view class="list-item-left" v-else>
|
||
<image src="@/static/images/shop/4.jpg" mode=""></image>
|
||
</view>
|
||
<view class="list-item-right" @click="navtoDetail()">
|
||
<view class="item-title">
|
||
特色餐厅（福田店）
|
||
</view>
|
||
<view class="item-content">
|
||
<view class="right-center-left">
|
||
<view class="center-left-score">
|
||
<text class="iconfont icon-kongxinxing"></text>
|
||
<!-- <text class="iconfont icon-kongxinxing">★</text> -->
|
||
<text>4.7分</text>
|
||
</view>
|
||
<view class="center-left-time">营业时间：12:00-24:00</view>
|
||
</view>
|
||
<view class="right-center-right">
|
||
去选购
|
||
</view>
|
||
</view>
|
||
<view class="item-address">
|
||
<view class="address">深圳市福田区购物公园cocopark购物中心</view>
|
||
<view class="distance">100.23km</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 { getNavigation } from '@/api/public.js';
|
||
import customTab from '@/components/customTab';
|
||
import { mapGetters } from "vuex";
|
||
export default {
|
||
components:{
|
||
customTab,
|
||
},
|
||
data(){
|
||
return{
|
||
domain: HTTP_REQUEST_URL,
|
||
newData: {},
|
||
activeRouter: '',
|
||
tabList:[],
|
||
current:0,
|
||
navtop:0,
|
||
}
|
||
},
|
||
onLoad(){
|
||
},
|
||
onShow(){
|
||
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:{
|
||
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: function (res) {
|
||
console.log('二维码信息：' + res);
|
||
}
|
||
});
|
||
// #endif
|
||
},
|
||
selectCurrent(val){
|
||
this.current=val;
|
||
},
|
||
navtoDetail(){
|
||
uni.navigateTo({
|
||
url:'/pages/shop_details/index'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
@import url("css/shop.css");
|
||
</style> |