Skip to content

M
mocp-uniapp
Commit 06340042 by pangchong
Options

feat: 首页样式调整

parent a75b6822
Showing with 105 additions and 40 deletions
components.d.ts
......@@ -25,5 +25,6 @@ declare module 'vue' {
GlobalUpload: typeof import('./src/mocp/components/global-upload/global-upload.vue')['default']
// 自定义组件
CustomScore: typeof import('./src/mocp/components/widget/custom-score.vue')['default']
CustomTabbar: typeof import('./src/mocp/components/widget/custom-tabbar.vue')['default']
}
}
src/mocp/components/global-page/global-page.vue
......@@ -22,7 +22,7 @@
<view :style="{ height: safeAreaInsets?.top + 'px' }" v-if="custom"></view>
<!-- 自定义导航栏 -->
<global-navbar :title="title" v-if="showNavbar">
<template #left v-if="pages.length > 1">
<template #left v-if="pages.length > 1 && showNavLeft">
<up-icon v-if="navLeftType == 'icon'" :name="navLeftIcon" size="16" @tap="handleLeftClick"></up-icon>
<view v-if="navLeftType == 'text'" class="cancel" @tap="handleLeftClick">{{ navLeftText }}</view>
</template>
......@@ -49,6 +49,7 @@
<global-button type="primary" size="large" @tap="handleFooterClick">{{ footerBtnText }}</global-button>
</view>
<slot name="bottom"></slot>
<custom-tabbar :tabbarValue="tabbarValue"></custom-tabbar>
</template>
</z-paging>
</template>
......@@ -71,6 +72,16 @@ const ps = defineProps({
type: [String, Number],
default: 0
},
//是否显示底部导航
showTabbar: {
type: Boolean,
default: false
},
//底部导航选中的下标
tabbarValue: {
type: [Number, String],
default: 1
},
//是否自动加载
auto: {
type: Boolean,
......@@ -81,6 +92,11 @@ const ps = defineProps({
type: Boolean,
default: true
},
//是否显示nav左边插槽
showNavLeft: {
type: Boolean,
default: true
},
//nav左边插槽类型:icon,text
navLeftType: {
type: String,
......
src/mocp/components/widget/custom-tabbar.vue 0 → 100644
<template>
<up-tabbar :value="tabbarValue" :fixed="false" :placeholder="false" :safeAreaInsetBottom="true" activeColor="#165dff" inactiveColor="#4e5969">
<template v-for="item in list" :key="item.name">
<up-tabbar-item :text="item.text" @click="handleClickTabbar">
<template #active-icon>
<image class="u-page__item__slot-icon" :src="item.selectedIconPath" mode="widthFix"></image>
</template>
<template #inactive-icon>
<image class="u-page__item__slot-icon" :src="item.iconPath" mode="widthFix"></image>
</template>
</up-tabbar-item>
</template>
</up-tabbar>
</template>
<script setup>
import { ref } from 'vue'
const ps = defineProps({
tabbarValue: {
type: [Number, String],
default: 1
}
})
const list = ref([
{
pagePath: '/home/index',
text: '首页',
iconPath: '/static/mocp/image/menu/home.png',
selectedIconPath: '/static/mocp/image/menu/home-select.png'
},
{
pagePath: '/panel/index',
text: '工作台',
iconPath: '/static/mocp/image/menu/panel.png',
selectedIconPath: '/static/mocp/image/menu/panel-select.png'
},
{
pagePath: '/chat/index',
text: '沟通',
iconPath: '/static/mocp/image/menu/chat.png',
selectedIconPath: '/static/mocp/image/menu/chat-select.png'
}
])
const handleClickTabbar = (index) => {
if (ps.tabbarValue != index) {
uni.$mocpJump.reLaunch(list.value[index].pagePath)
}
}
</script>
<style lang="scss" scoped>
.u-page__item__slot-icon {
width: 48rpx;
height: 48rpx;
}
</style>
src/mocp/store/base.js
......@@ -4,6 +4,7 @@ import { defineStore } from 'pinia'
const useBaseStore = defineStore('base', {
state: () => {
return {
isloading: false, //是否加载
selectList: {
deviceNumSelect: [] //机号
},
......@@ -13,6 +14,7 @@ const useBaseStore = defineStore('base', {
getters: {},
actions: {
async initSysData() {
if (this.isloading) return
uni.showLoading({
title: '正在加载系统所有基本参数中，请稍后！',
mask: true
......@@ -21,6 +23,7 @@ const useBaseStore = defineStore('base', {
await this.getAircraftNumbers()
await this.getBasicParamsList()
uni.hideLoading()
this.isloading = true
} catch (error) {
uni.hideLoading()
}
......
src/mocp/store/user.js
......@@ -69,7 +69,7 @@ const useUserStore = defineStore('user', {
})
}
//跳转工作台
uni.$mocpJump.navigateTo('/panel/index')
uni.$mocpJump.redirectTo('/panel/index')
},
//退出登录
handleLogOut() {
......
src/pages.json
......@@ -42,15 +42,9 @@
}
},
{
"path": "pages/modules/mocp/mine/index",
"path": "pages/modules/mocp/home/index",
"style": {
"navigationBarTitleText": "个人中心"
}
},
{
"path": "pages/modules/mocp/experience/index",
"style": {
"navigationBarTitleText": "经验库"
"navigationBarTitleText": "首页"
}
},
{
......
src/pages/modules/mocp/chat/index.vue
<template>
<global-page title="沟通"></global-page>
<global-page title="沟通" :showNavLeft="false" showTabbar :tabbarValue="2"></global-page>
</template>
<script setup></script>
......
src/pages/modules/mocp/experience/index.vue deleted 100644 → 0
<template>经验库</template>
<script setup></script>
<style lang="scss"></style>
src/pages/modules/mocp/mine/index.vue → src/pages/modules/mocp/home/index.vue
<template>
<global-page title="个人中心">
<global-page title="首页" :showNavLeft="false" showTabbar :tabbarValue="0">
<template #bottom>
<global-button size="large" type="primary" @tap="handleLogOut">退出登录</global-button>
</template>
......
src/pages/modules/mocp/panel/components/panel-menu.vue
<template>
<view class="content" :style="{ height: `calc(100vh - 386rpx - ${safeAreaInsets?.top + 'px'})` }">
<view class="content" :style="{ height: `calc(100vh - 344rpx - ${safeAreaInsets?.top + 'px'} - ${safeAreaInsets?.bottom + 'px'} - 50px)` }">
<view class="tab-nav">
<global-tabs :list="tabNav" @handleClick="handleClick"></global-tabs>
</view>
......
src/pages/modules/mocp/panel/components/panel-navbar.vue
......@@ -14,22 +14,20 @@
</view>
<view class="navbar-bottom-list">
<view class="list-item">
<image class="list-item-image" src="/static/mocp/image/panel/wdrw.png" />
<view class="list-item-title">我的任务</view>
<image class="list-item-image" src="/static/mocp/image/panel/wdxx.png" />
<view class="list-item-msg">
<view class="list-item-title">我的待办</view>
<view class="list-item-txt">24</view>
</view>
</view>
<view class="list-item-line"></view>
<view class="list-item">
<image class="list-item-image" src="/static/mocp/image/panel/gjrw.png" />
<view class="list-item-title">跟机任务</view>
<image class="list-item-image" src="/static/mocp/image/panel/wdxx.png" />
<view class="list-item-msg">
<view class="list-item-title">我的消息</view>
<view class="list-item-txt">24</view>
</view>
<!-- <view class="list-item-line"></view>
<view class="list-item">
<image class="list-item-image" src="static/mocp/image/mocp/panel/AOGrw.png" />
<view class="list-item-title">AOG任务</view>
<view class="list-item-txt">24</view>
</view> -->
</view>
</view>
</view>
</template>
......
src/pages/modules/mocp/panel/constants/panel-navbar.scss
......@@ -24,6 +24,7 @@
height: 80rpx;
}
.info {
color: #fff;
.place {
font-size: 28rpx;
}
......@@ -42,27 +43,26 @@
align-items: center;
margin: 0 32rpx;
border-radius: 16rpx;
padding: 12rpx 128rpx 12rpx 128rpx;
padding: 24rpx 44rpx 40rpx 28rpx;
.list-item {
text-align: center;
display: flex;
&-image {
width: 84rpx;
height: 84rpx;
width: 132rpx;
height: 132rpx;
}
&-title {
font-size: 24rpx;
color: $mocp-text-4;
&-msg {
text-align: center;
font-size: 28rpx;
color: $mocp-text-5;
margin-top: 36rpx;
}
&-txt {
font-weight: bold;
font-size: 40rpx;
color: $mocp-text-5;
line-height: 56rpx;
}
&-line {
width: 2rpx;
height: 58rpx;
background: #e4f1ff;
background: #e6f0fe;
}
}
}
......
src/pages/modules/mocp/panel/index.vue
<template>
<global-page :showNavbar="false">
<global-page :showNavbar="false" showTabbar :tabbarValue="1">
<!-- 导航栏 -->
<template #top>
<image class="page-bg" src="/static/mocp/image/panel/page-bg.png" />
......
src/static/mocp/image/panel/logo.png
src/static/mocp/image/panel/logo.png

18.5 KB | W: | H:

src/static/mocp/image/panel/logo.png

7.44 KB | W: | H:

src/static/mocp/image/panel/logo.png
src/static/mocp/image/panel/logo.png
src/static/mocp/image/panel/logo.png
src/static/mocp/image/panel/logo.png
  • 2-up
  • Swipe
  • Onion skin
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