340 lines
6.3 KiB
Vue
340 lines
6.3 KiB
Vue
<script setup>
|
|
/** 底部菜单导航
|
|
* 底部导航的规则
|
|
* 视频端显示：
|
|
* 视频 商城 消息 我的(视频我的)
|
|
* 商城端显示：
|
|
* 视频 商城 消息 个人中心(商城我的)
|
|
*/
|
|
import {
|
|
ref,
|
|
computed,
|
|
onMounted,
|
|
onUnmounted,
|
|
getCurrentInstance,
|
|
reactive,
|
|
watch,
|
|
} from 'vue'
|
|
// 工具库
|
|
import util from '@/common/js/util';
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance()
|
|
// 接收参数
|
|
const props = defineProps({
|
|
page: {
|
|
type: String,
|
|
},
|
|
// 主题 dark黑色 light白色的
|
|
subject: {
|
|
type: String,
|
|
default: 'light',
|
|
},
|
|
})
|
|
// 用户信息
|
|
const userinfo = computed(() => {
|
|
let resuilt = uni.$store.state.userinfo
|
|
return resuilt
|
|
})
|
|
// 展示模式 商城shop 默认default
|
|
const mode = computed(() => uni.$store.state.tabbarMode)
|
|
// 底部菜单
|
|
const menu = computed(() => {
|
|
let arr = [{
|
|
page: 'index',
|
|
type: 'option',
|
|
name: '视频',
|
|
labelType: 'default',
|
|
pagePath: 'pages/index/index',
|
|
},
|
|
// {
|
|
// page: '',
|
|
// type: 'option',
|
|
// name: '榴莲果',
|
|
// pagePath: 'pages/index/durian',
|
|
// },
|
|
{
|
|
page: 'shop',
|
|
type: 'option',
|
|
name: '商城',
|
|
labelType: 'shop',
|
|
pagePath: 'pages/shop/shop'
|
|
},
|
|
{
|
|
type: 'middle',
|
|
name: '',
|
|
},
|
|
{
|
|
page: 'news',
|
|
type: 'option',
|
|
name: '消息',
|
|
pagePath: 'pages/news/news',
|
|
}
|
|
]
|
|
|
|
switch (mode.value) {
|
|
case 'default':
|
|
arr.push({
|
|
page: 'homepage',
|
|
type: 'option',
|
|
name: '我的',
|
|
labelType: 'default',
|
|
pagePath: 'pages/mine/homepage',
|
|
})
|
|
break;
|
|
case 'shop':
|
|
arr.push({
|
|
page: 'mine',
|
|
type: 'option',
|
|
name: '个人中心',
|
|
labelType: 'shop',
|
|
pagePath: 'pages/mine/mine',
|
|
})
|
|
break;
|
|
}
|
|
return arr
|
|
})
|
|
// 安全区高度
|
|
let safeHeight = ref(0)
|
|
|
|
// 弹窗菜单
|
|
const showMenu = computed(() => {
|
|
let result = []
|
|
|
|
// 验证登录
|
|
if (userinfo.value.userId) {
|
|
result.push({
|
|
name: '发布视频',
|
|
img: '/static/footerMenu1.png',
|
|
url: '/pages/release/video',
|
|
})
|
|
}
|
|
// 追加
|
|
// result.push({
|
|
// name: '打车',
|
|
// }, {
|
|
// name: '充电',
|
|
// }, {
|
|
// name: '到店美食',
|
|
// }, {
|
|
// name: '出行',
|
|
// }, {
|
|
// name: '家政',
|
|
// })
|
|
return result
|
|
})
|
|
|
|
// 加载完成之后
|
|
onMounted(() => {
|
|
// 开启监听
|
|
addListener()
|
|
// 隐藏tabbar
|
|
uni.hideTabBar()
|
|
// 系统信息
|
|
uni.getSystemInfo().then(rs => {
|
|
safeHeight.value = rs.safeArea + 'px'
|
|
})
|
|
|
|
//
|
|
// proxy.$refs.alert.open()
|
|
})
|
|
|
|
// 卸载
|
|
onUnmounted(() => {
|
|
uni.$off('changeMine')
|
|
})
|
|
|
|
// 开启监听
|
|
function addListener() {
|
|
// 修改个人中心的状态
|
|
uni.$on('changeMine', (value) => {
|
|
uni.$store.commit('setState', {
|
|
key: 'tabbarMode',
|
|
value,
|
|
})
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 点击菜单
|
|
* @param {Object} item 当前点击的菜单项
|
|
*/
|
|
function handleMenu(item) {
|
|
if (item.type != 'middle') {
|
|
// 判断是否配置页
|
|
if (item.page) uni.switchTab({
|
|
url: `/${item.pagePath}`,
|
|
})
|
|
else uni.navigateTo({
|
|
url: `/${item.pagePath}`,
|
|
})
|
|
return
|
|
}
|
|
//
|
|
proxy.$refs.alert.open()
|
|
}
|
|
|
|
/**
|
|
* 内容
|
|
* @param {Object} ev
|
|
*/
|
|
function handleAlert(ev) {
|
|
const index = ev.detail.index
|
|
const item = showMenu.value[index]
|
|
// 验证
|
|
util.isAuth({
|
|
success: rs => {
|
|
//
|
|
if (item.url) {
|
|
uni.navigateTo({
|
|
url: item.url,
|
|
})
|
|
} else util.alert('敬请期待')
|
|
}
|
|
})
|
|
//
|
|
proxy.$refs.alert.close()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 幽灵盒子 -->
|
|
<view class="ghost" :style="{paddingBottom: safeHeight}"></view>
|
|
<!-- 底部导航 -->
|
|
<view class="menuBox" :class="subject">
|
|
<view class="menu">
|
|
<view class="item" v-for="(item,index) in menu" :key="index" @click="handleMenu(item)">
|
|
|
|
<view class="option" :class="{active: item.page === page}" v-if="item.type == 'option'">
|
|
<text class="text">{{item.name}}</text>
|
|
</view>
|
|
|
|
<view class="middle" v-else-if="item.type === 'middle'">
|
|
<image class="img" src="/static/footerMenuPlus.png" mode="aspectFit" v-if="subject == 'dark'" />
|
|
<image class="img" src="/static/footerMenuPlus1.png" mode="aspectFit"
|
|
v-else-if="subject == 'light'" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="safeArea" :style="{height: safeHeight}"></view>
|
|
</view>
|
|
|
|
<!-- 底部菜单 -->
|
|
<uni-popup ref="alert" type="bottom">
|
|
<view class="alert mlr50 pt50 plr10 pb10">
|
|
<scroll-view scroll-y="true" class="scroll">
|
|
<uni-grid :column="4" :highlight="true" :showBorder="false" @change="handleAlert">
|
|
<uni-grid-item v-for="(item, index) in showMenu" :index="index" :key="index">
|
|
<view class="itemBox ptb30 df fdc jcc aic tac">
|
|
<!-- <uni-icons type="image" :size="30" color="#777" /> -->
|
|
<image class="wh80" :src="item.img" mode="aspectFill" />
|
|
<view class="mt5">
|
|
<text class="text f28 c333">{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
</uni-grid-item>
|
|
</uni-grid>
|
|
</scroll-view>
|
|
|
|
<view class="tac mt30">
|
|
<uni-icons type="bottom" size="50rpx" color="#999" @click="$refs.alert.close()" />
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
$boderSize: 2rpx;
|
|
|
|
// 幽灵盒子
|
|
.ghost {
|
|
height: 120rpx;
|
|
}
|
|
|
|
// 菜单
|
|
.menuBox {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
/* #ifndef APP-NVUE */
|
|
box-sizing: border-box;
|
|
/* #endif */
|
|
|
|
.menu {
|
|
justify-content: space-between;
|
|
padding: 20rpx 0;
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
/* #ifdef APP-NVUE */
|
|
flex-direction: row;
|
|
/* #endif */
|
|
}
|
|
|
|
.item {
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
}
|
|
|
|
// 黑色的
|
|
&.dark {
|
|
border-top: 1rpx solid #999;
|
|
background-color: #161616;
|
|
|
|
.active {
|
|
.text {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
// 浅色的
|
|
&.light {
|
|
box-shadow: 0px 8px 20px rgba(0, 0, 0, .3);
|
|
background-color: #fff;
|
|
|
|
.active {
|
|
.text {
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.middle {
|
|
.img {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 弹窗
|
|
.alert {
|
|
margin-bottom: 120rpx;
|
|
background-color: #f8f8f8;
|
|
border-radius: 30rpx;
|
|
|
|
// 滚动块
|
|
.scroll {
|
|
height: 350rpx;
|
|
}
|
|
|
|
//
|
|
.itemBox {
|
|
// padding: 30rpx;
|
|
}
|
|
}
|
|
</style> |