102 lines
2.2 KiB
Vue
102 lines
2.2 KiB
Vue
<template>
|
|
<view class="tabbar_pages p30">
|
|
<view class="tabbar_pages_view" v-for="(item, index) in list" :key="index" @click="toLink(item.pagePath)">
|
|
<view v-if="item.type == 1">
|
|
<view style="height: 70rpx">
|
|
<image mode="widthFix" style="width: 132rpx; height: 64rpx" :src="item.icon"></image>
|
|
</view>
|
|
<view :style="{ color: path == item.pagePath ? '#4879e6' : '' }">{{ item.text }}</view>
|
|
</view>
|
|
<view v-else>
|
|
<view style="height: 70rpx">
|
|
<image mode="widthFix" :src="path == item.pagePath ? item.icon : item.icon_select"></image>
|
|
</view>
|
|
<view :style="{ color: path == item.pagePath ? '#4879e6' : '' }">{{ item.text }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const data = defineProps({
|
|
path: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
});
|
|
|
|
let list = ref([
|
|
{
|
|
pagePath: '/pages/home/home',
|
|
text: '首页',
|
|
icon_select: '/static/tabbar/select_home.png',
|
|
icon: '/static/tabbar/home.png',
|
|
type: 0
|
|
},
|
|
{
|
|
pagePath: '/pages/index/index',
|
|
text: '地图',
|
|
icon_select: '/static/tabbar/select_sq.png',
|
|
icon: '/static/tabbar/sq.png',
|
|
type: 0
|
|
},
|
|
{
|
|
pagePath: '/pages/sweep/sweep',
|
|
text: '扫码充电',
|
|
icon_select: '/static/tabbar/find.png',
|
|
icon: '/static/tabbar/find.png',
|
|
type: 1
|
|
},
|
|
{
|
|
pagePath: '/pages/order/order',
|
|
text: '订单',
|
|
icon_select: '/static/tabbar/select_order.png',
|
|
icon: '/static/tabbar/order.png',
|
|
type: 0
|
|
},
|
|
{
|
|
pagePath: '/pages/mine/mine',
|
|
text: '我的',
|
|
icon_select: '/static/tabbar/select_my.png',
|
|
icon: '/static/tabbar/my.png',
|
|
type: 0
|
|
}
|
|
]);
|
|
|
|
const toLink = (e) => {
|
|
uni.vibrateShort();
|
|
if (data.path == e) return true;
|
|
uni.switchTab({
|
|
url: e
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.tabbar_pages {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 750rpx;
|
|
height: 140rpx;
|
|
@include flex($space: space-between);
|
|
background-color: #fff;
|
|
box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(88, 140, 255, 0.1);
|
|
border-radius: 15rpx 15rpx 0rpx 0rpx;
|
|
z-index: 99;
|
|
&_view {
|
|
view {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
@include flex($direction: column, $space: space-between);
|
|
image {
|
|
width: 65rpx;
|
|
height: 65rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|