Skip to content

M
mocp-uniapp
Commit 56994ef9 by pangchong
Options

feat: 菜单开发

parent 1cf7fc9f
Showing with 152 additions and 73 deletions
src/components/custom-button/custom-button.vue
......@@ -49,6 +49,9 @@ const getSize = computed(() => {
if (ps.size == 'small') {
return 56 + 'rpx'
}
if (ps.size == 'medium') {
return 72 + 'rpx'
}
if (ps.size == 'large') {
return 88 + 'rpx'
}
......@@ -56,11 +59,12 @@ const getSize = computed(() => {
</script>
<style lang="scss" scoped>
.global-button {
padding: 0 32rpx;
padding: 0 16rpx;
margin: 0;
height: v-bind(getSize);
line-height: v-bind(getSize);
font-size: 28rpx;
border-radius: 52rpx;
&.primary {
background-color: $uni-color-primary;
color: #fff;
......
src/components/custom-navbar/custom-navbar.vue → src/components/custom-page/custom-page.vue
<template>
<view :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
<uni-nav-bar :title="title" :border="false" :backgroundColor="backgroundColor" :color="color" left-icon="left">
<template #left>
<slot name="left"></slot>
</template>
<template #right>
<slot name="right"></slot>
</template>
</uni-nav-bar>
<view class="page-wrap">
<view :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
<uni-nav-bar :title="title" :border="false" :backgroundColor="backgroundColor" :color="color" left-icon="left" :leftWidth="leftWidth" :rightWidth="rightWidth">
<template #default>
<slot name="default"></slot>
</template>
<template #left>
<slot name="left"></slot>
</template>
<template #right>
<slot name="right"></slot>
</template>
</uni-nav-bar>
</view>
<view class="page-content" :style="{ height: `calc(100% - 44px - ${safeAreaInsets?.top + 'px'})` }">
<slot name="content"></slot>
</view>
</view>
</template>
......@@ -24,10 +32,30 @@ const ps = defineProps({
backgroundColor: {
type: String,
default: '#f7f8fa'
},
leftWidth: {
type: Number,
default: 120
},
rightWidth: {
type: Number,
default: 120
}
})
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.page-wrap {
display: flex;
flex-direction: column;
height: 100%;
:deep(.uni-navbar__header-btns) {
width: auto;
}
.page-content {
flex: auto;
overflow-y: auto;
}
}
</style>
src/pages/login/index.vue
......@@ -25,9 +25,9 @@ import { loginApi } from '@/api/user'
import { debounce } from 'lodash'
import message from '@/utils/message'
import { loginCode, loginForm, rules } from './index.compositions'
import { loginCode, loginForm, rules } from './constants/index.compositions'
//获取验证码
import { getGifCaptcha } from './index.functionals'
import { getGifCaptcha } from './constants/index.functionals'
watch(
() => loginForm.username,
......@@ -52,5 +52,5 @@ const handleLogin = async () => {
</script>
<style lang="scss">
@import "index.scss";
@import './constants/index.scss';
</style>
src/pages/panel/app-center/index.vue
<template>
<custom-navbar title="应用中心">
<custom-page title="应用中心">
<template #left>
<uni-icons type="left" size="16"></uni-icons>
<view v-if="isEdit" @tap="isEdit = false">取消</view>
<uni-icons type="left" size="16" @tap="goBack" v-else></uni-icons>
</template>
<template #right>
<custom-button type="primary" size="small">保存</custom-button>
<custom-button type="primary" size="small" v-if="isEdit">保存</custom-button>
</template>
</custom-navbar>
<view class="content">
<view class="card">
<view class="card-title">
<view class="card-title-txt">首页应用</view>
<custom-button type="primary" size="small" class="card-title-button">编辑</custom-button>
<template #content>
<view class="content">
<view class="card">
<view class="card-title">
<view class="card-title-txt">首页应用</view>
<custom-button type="primary" size="small" @tap="isEdit = true">编辑</custom-button>
</view>
<view class="menu-list">
<menu-item class="menu-item" v-for="item in menuList" :data="item" :key="item.id" :type="isEdit ? 'minus' : 'default'"></menu-item>
</view>
</view>
<view class="card">
<view class="card-title">
<view class="card-title-txt">全部应用</view>
</view>
<view class="menu-list">
<menu-item class="menu-item" v-for="item in menuList" :data="item" :key="item.id" :type="isEdit ? 'plus' : 'default'"></menu-item>
</view>
</view>
</view>
<view class="menu-list">
<menu-item class="menu-item" v-for="item in menuList" :data="item" :key="item.id"></menu-item>
</view>
</view>
<view class="card">
<view class="card-title">
<view class="card-title-txt">全部应用</view>
</view>
<view class="menu-list">
<menu-item class="menu-item" v-for="item in menuList" :data="item" :key="item.id"></menu-item>
</view>
</view>
</view>
</template>
</custom-page>
</template>
<script setup>
import { ref } from 'vue'
import MenuItem from '../components/menu-item.vue'
import { menuList } from '../constants/data.config'
const isEdit = ref(false)
//返回
const goBack = () => {
uni.navigateBack()
}
</script>
<style lang="scss" scoped>
.content {
......@@ -49,9 +60,6 @@ import { menuList } from '../constants/data.config'
font-size: 34rpx;
color: #1d2129;
}
.card-title-button {
border-radius: 52rpx;
}
}
.menu-list {
display: flex;
......
src/pages/panel/components/menu-item.vue
<template>
<view class="menu-item">
<uni-badge class="uni-badge-left-margin" :text="data.count" absolute="rightTop" size="small" :offset="[3, 3]">
<view class="menu-item" v-if="type == 'default'">
<uni-badge :text="getText" absolute="rightTop" size="small" :offset="[3, 3]" :customStyle="customStyle">
<image :src="getUrl" />
</uni-badge>
<text>{{ data.name }}</text>
</view>
<template v-else>
<uni-badge :text="getText" absolute="rightTop" size="small" :offset="[15, 15]" :customStyle="customStyle">
<view class="menu-item">
<image :src="getUrl" />
<text>{{ data.name }}</text>
</view>
</uni-badge>
</template>
</template>
<script setup>
......@@ -16,11 +24,36 @@ const ps = defineProps({
default: function () {
return {}
}
},
type: {
type: String,
default: 'default'
}
})
const getUrl = computed(() => {
return '/static/panel/' + ps.data.icon + '.png'
})
const getText = computed(() => {
if (ps.type == 'default') {
return ps.data.count
}
if (ps.type == 'minus') {
return '-'
}
if (ps.type == 'plus') {
return '+'
}
return ps.data.count
})
const customStyle = computed(() => {
if (ps.type == 'minus') {
return { background: '#C8C8C8' }
}
if (ps.type == 'plus') {
return { background: '#165DFF' }
}
return {}
})
</script>
<style lang="scss" scoped>
.menu-item {
......
src/pages/panel/constants/data.config.js
import { ref } from 'vue'
import { computed, ref } from 'vue'
export const menuList = ref([
{ id: 1, name: '信息通报', icon: 'xxtb', group: '技术支援', count: 0, sort: 0 },
{ id: 2, name: '机队状态', icon: 'jdzt', group: '技术支援', count: 0, sort: 0 },
{ id: 3, name: '支援申请', icon: 'zysq', group: '技术支援', count: 0, sort: 0 },
{ id: 4, name: '工作指令', icon: 'gzzl', group: '技术支援', count: 0, sort: 0 },
{ id: 5, name: '技术评估', icon: 'jspg', group: '技术支援', count: 0, sort: 0 },
{ id: 6, name: '运行调查', icon: 'yxdc', group: '运行管理', count: 0, sort: 0 },
{ id: 7, name: '运行决策', icon: 'yxjc', group: '运行管理', count: 0, sort: 0 },
{ id: 8, name: '布置工作', icon: 'bzgz', group: '运行管理', count: 0, sort: 0 },
{ id: 9, name: '航站管理', icon: 'hzgl', group: '航站管理', count: 0, sort: 0 },
{ id: 10, name: '协议单位', icon: 'xydw', group: '航站管理', count: 0, sort: 0 },
{ id: 11, name: '不正常事件', icon: 'bzcsj', group: '运行品质', count: 0, sort: 0 },
{ id: 12, name: '考核记录', icon: 'khjl', group: '运行品质', count: 0, sort: 0 }
])
//全部菜单
export const menuList = [
{ id: 1, name: '信息通报', icon: 'xxtb', group: '技术支援', count: 12, home: true },
{ id: 2, name: '机队状态', icon: 'jdzt', group: '技术支援', count: 0, home: true },
{ id: 3, name: '支援申请', icon: 'zysq', group: '技术支援', count: 0, home: true },
{ id: 4, name: '工作指令', icon: 'gzzl', group: '技术支援', count: 0, home: true },
{ id: 5, name: '技术评估', icon: 'jspg', group: '技术支援', count: 0, home: true },
{ id: 6, name: '运行调查', icon: 'yxdc', group: '运行管理', count: 0, home: true },
{ id: 7, name: '运行决策', icon: 'yxjc', group: '运行管理', count: 0, home: true },
{ id: 8, name: '布置工作', icon: 'bzgz', group: '运行管理', count: 0, home: true },
{ id: 9, name: '航站管理', icon: 'hzgl', group: '航站管理', count: 0, home: true },
{ id: 10, name: '协议单位', icon: 'xydw', group: '航站管理', count: 0, home: true },
{ id: 11, name: '不正常事件', icon: 'bzcsj', group: '运行品质', count: 0, home: true },
{ id: 12, name: '考核记录', icon: 'khjl', group: '运行品质', count: 0, home: true }
]
//获取首页菜单
export const menuListHome = computed(() => {
return menuList.filter((item) => item.home)
})
//获取分组菜单
export const menuListGroup = computed(() => {
return menuList.reduce((groups, item) => {
// 如果该组不存在，则创建一个新组
if (!groups[item.group]) {
groups[item.group] = []
}
// 将当前项添加到对应的组中
groups[item.group].push(item)
return groups
}, {})
})
src/pages/panel/index.vue
......@@ -62,7 +62,7 @@
<scroll-view class="tab-content" scroll-y="true">
<view class="tab-content-item" v-if="activeIndex == 0">
<view class="menu-list">
<menu-item class="menu-item" v-for="item in menuList" :data="item" :key="item.id" @tap="goAppCenter"></menu-item>
<menu-item class="menu-item" v-for="item in menuListHome" :data="item" :key="item.id" @tap="goAppCenter"></menu-item>
</view>
</view>
<view class="tab-content-item" v-if="activeIndex == 1">
......@@ -81,27 +81,16 @@
</template>
<script setup>
import { computed, ref } from 'vue'
import { ref } from 'vue'
import MenuItem from './components/menu-item.vue'
import { menuList } from './constants/data.config'
import { menuListHome, menuListGroup } from './constants/data.config'
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
//分类
const tabNav = ref(['常用', '分组'])
const activeIndex = ref(0)
//获取分组数据
const menuListGroup = computed(() => {
return menuList.value.reduce((groups, item) => {
// 如果该组不存在，则创建一个新组
if (!groups[item.group]) {
groups[item.group] = []
}
// 将当前项添加到对应的组中
groups[item.group].push(item)
return groups
}, {})
})
//跳转应用中心
const goAppCenter = () => {
uni.navigateTo({ url: '/pages/panel/app-center/index' })
......@@ -189,7 +178,7 @@ const goAppCenter = () => {
}
}
.content {
border-radius: 38rpx;
border-radius: 38rpx 38rpx 0 0;
background: #fff;
padding-top: 32rpx;
display: flex;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment