jiuyiUniapp/jiuyi2/components/footerMenu/footerMenu.vue

348 lines
6.4 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.id) {
result.push({
name: '发布视频',
img: '/static/footerMenu1.png',
url: '/pages/release/video',
})
}
// 1是商家
if(userinfo.value.isShop == 1) {
result.push({
name: '发布商品',
img: '/static/footerMenu1.png',
url: '/pages/release/commodity',
})
}
// 追加
// 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>