Skip to content

M
mocp-uniapp
Commit cd290bec by pangchong
Options

feat: 整理

parent cf6f8aab
Showing with 135 additions and 122 deletions
.prettierrc.json
......@@ -7,5 +7,5 @@
"trailingComma": "none",
"arrowParens": "always",
"tabWidth": 4,
"printWidth": 180
"printWidth": 150
}
src/components/custom-page/custom-page.vue → src/components/global-navbar/global-navbar.vue
<template>
<view class="page-wrap">
<view class="page-top" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
<template v-if="showNavbar">
<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>
</template>
<template v-else>
<slot></slot>
</template>
</view>
<template v-if="showNavbar">
<view class="page-content" :style="{ height: `calc(100% - 44px - ${safeAreaInsets?.top + 'px'})` }">
<slot name="content"></slot>
</view>
<uni-nav-bar
:title="title"
:border="false"
:backgroundColor="backgroundColor"
:color="color"
left-icon="left"
:leftWidth="leftWidth"
:rightWidth="rightWidth"
>
<template #left>
<slot name="left"></slot>
</template>
<slot name="bg"></slot>
</view>
<template #right>
<slot name="right"></slot>
</template>
</uni-nav-bar>
</template>
<script setup>
const ps = defineProps({
showNavbar: {
type: Boolean,
default: false
},
title: {
type: String,
default: ''
......@@ -41,7 +27,7 @@ const ps = defineProps({
type: String,
default: '#1D2129'
},
navbarBackground: {
backgroundColor: {
type: String,
default: '#f7f8fa'
},
......@@ -54,26 +40,5 @@ const ps = defineProps({
default: 120
}
})
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>
<style lang="scss" scoped>
.page-wrap {
display: flex;
flex-direction: column;
height: 100%;
.page-top {
flex: auto;
display: flex;
flex-direction: column;
overflow: hidden;
}
:deep(.uni-navbar__header-btns) {
width: auto;
}
.page-content {
flex: auto;
overflow-y: auto;
}
}
</style>
<style lang="scss" scoped></style>
src/components/global-page/global-page.vue 0 → 100644
<template>
<z-paging ref="paging" :refresher-enabled="refresherEnabled" :refresher-only="true" :refresher-threshold="refresherThreshold" @query="queryList">
<template #top>
<view :style="{ height: safeAreaInsets?.top + 'px' }" v-if="custom"></view>
<slot name="top"></slot>
</template>
<slot></slot>
<template #bottom>
<slot name="bottom"></slot>
</template>
</z-paging>
</template>
<script setup>
import { ref } from 'vue'
const ps = defineProps({
custom: {
type: Boolean,
default: false
},
// 是否开启下拉刷新 Boolean true
refresherEnabled: {
type: Boolean,
default: false
},
refresherThreshold: {
type: [String, Boolean],
default: '150rpx'
},
// 是否启用加载更多数据
loadingMoreEnabled: {
type: Boolean,
default: false
}
})
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
//列表加载
const paging = ref()
const queryList = () => {
paging.value?.complete()
}
</script>
<style scoped></style>
src/pages/login/index.vue
<template>
<custom-page>
<global-page>
<view class="login-wrap">
<view class="login-header">
<image src="/static/image/login/Vector.png" />
......@@ -19,14 +19,20 @@
<uni-forms-item label="验证码" name="verifyCode">
<view class="verify-code">
<uni-easyinput v-model="loginForm.verifyCode" placeholder="请输入验证码" type="text" style="flex: auto" />
<image class="verify-code-image" v-if="loginCode && loginForm.username" :src="loginCode" mode="scaleToFill" @tap="getGifCaptcha" />
<image
class="verify-code-image"
v-if="loginCode && loginForm.username"
:src="loginCode"
mode="scaleToFill"
@tap="getGifCaptcha"
/>
<view class="verify-code-image" v-else></view>
</view>
</uni-forms-item>
</uni-forms>
<custom-button class="login-btn" size="large" type="primary" @tap="handleLogin">登录</custom-button>
<global-button class="login-btn" size="large" type="primary" @tap="handleLogin">登录</global-button>
</view>
</custom-page>
</global-page>
</template>
<script setup>
......
src/pages/panel/app-center/index.vue
<template>
<custom-page title="应用中心" showNavbar>
<template #left>
<view v-if="isEdit" @tap="isEdit = false" class="cancel">取消</view>
<uni-icons type="left" size="16" @tap="goBack" v-else></uni-icons>
<global-page custom>
<template #top>
<global-navbar title="应用中心">
<template #left>
<view v-if="isEdit" @tap="isEdit = false" class="cancel">取消</view>
<uni-icons type="left" size="16" @tap="goBack" v-else></uni-icons>
</template>
<template #right>
<global-button type="primary" size="small" v-if="isEdit" style="padding: 0 32rpx">保存</global-button>
</template>
</global-navbar>
</template>
<template #right>
<custom-button type="primary" size="small" v-if="isEdit" style="padding: 0 32rpx">保存</custom-button>
</template>
<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 menuListHome"
:data="item"
:key="item.id"
:showCount="false"
:type="isEdit ? 'minus' : 'default'"
@tap="goTo"
></menu-item>
</view>
<view class="content">
<view class="card">
<view class="card-title">
<view class="card-title-txt">首页应用</view>
<global-button type="primary" size="small" @tap="isEdit = true">编辑</global-button>
</view>
<view class="card">
<view class="card-title">
<view class="card-title-txt">全部应用</view>
</view>
<view class="menu-list" v-if="menuListNoHome.length > 0">
<menu-item
class="menu-item"
v-for="item in menuListNoHome"
:data="item"
:key="item.id"
:showCount="false"
:type="isEdit ? 'plus' : 'default'"
@tap="goTo"
></menu-item>
</view>
<global-empty class="menu-empty" v-else></global-empty>
<view class="menu-list">
<menu-item
class="menu-item"
v-for="item in menuListHome"
:data="item"
:key="item.id"
:showCount="false"
:type="isEdit ? 'minus' : 'default'"
@tap="goTo"
></menu-item>
</view>
</view>
</template>
</custom-page>
<view class="card">
<view class="card-title">
<view class="card-title-txt">全部应用</view>
</view>
<view class="menu-list" v-if="menuListNoHome.length > 0">
<menu-item
class="menu-item"
v-for="item in menuListNoHome"
:data="item"
:key="item.id"
:showCount="false"
:type="isEdit ? 'plus' : 'default'"
@tap="goTo"
></menu-item>
</view>
<global-empty class="menu-empty" v-else></global-empty>
</view>
</view>
</global-page>
</template>
<script setup>
......
src/pages/panel/assessment-records/index.vue
<template>
<z-paging ref="paging" v-model="dataList">
<global-page :custom="false">
<template #top>
<z-tabs :list="tabList" @change="tabsChange" bar-width="80rpx" bg-color="#f7f8fa" />
</template>
......@@ -13,9 +13,11 @@
</view>
<score-details></score-details>
</view>
<view class="item-content">3月31日,天津航空6837/A320飞机执行天津=长春、天津=昆明航班，23:00落地，航后执行52A检工作，利用夜间8小时左右执行飞机检查和维修工</view>
<view class="item-content">
3月31日,天津航空6837/A320飞机执行天津=长春、天津=昆明航班，23:00落地，航后执行52A检工作，利用夜间8小时左右执行飞机检查和维修工
</view>
</view>
<view class="item" v-for="item in 2" :key="item">
<view class="item" v-for="item in 4" :key="item">
<view class="item-title">
<view class="desc">
<view class="type">OPEN</view>
......@@ -24,24 +26,23 @@
</view>
<score-details type="warning"></score-details>
</view>
<view class="item-content">3月31日,天津航空6837/A320飞机执行天津=长春、天津=昆明航班，23:00落地，航后执行52A检工作，利用夜间8小时左右执行飞机检查和维修工</view>
<view class="item-content">
3月31日,天津航空6837/A320飞机执行天津=长春、天津=昆明航班，23:00落地，航后执行52A检工作，利用夜间8小时左右执行飞机检查和维修工
</view>
</view>
</view>
</z-paging>
</global-page>
</template>
<script setup>
import { ref } from 'vue'
import ScoreDetails from '../components/score-details.vue'
const paging = ref()
const tabIndex = ref(0)
const tabList = ref(['OPEN', 'CLOSE', '全部'])
const dataList = ref([])
//导航切换
const tabsChange = (index) => {
tabIndex.value = index
paging.value.reload()
}
</script>
<style lang="scss" scoped>
......
src/pages/panel/constants/panel-menu.scss
.content {
height: calc(100% - 386rpx);
border-radius: 16rpx 16rpx 0 0;
background: #fff;
padding-top: 32rpx;
display: flex;
flex-direction: column;
margin: 0 32rpx;
flex: auto;
.tab-nav {
display: flex;
padding: 0 32rpx;
......
src/pages/panel/index.vue
<template>
<custom-page>
<template #bg>
<image class="page-bg" src="/static/image/panel/page-bg.png" />
</template>
<image class="page-bg" src="/static/image/panel/page-bg.png" />
<global-page custom>
<!-- 导航栏 -->
<panel-navbar></panel-navbar>
<template #top>
<panel-navbar></panel-navbar>
</template>
<!-- 菜单图标 -->
<panel-menu style="flex: auto"></panel-menu>
</custom-page>
</global-page>
</template>
<script setup>
import PanelNavbar from './panel-navbar.vue'
import PanelMenu from './panel-menu.vue'
</script>
<style>
page {
overflow: hidden;
}
</style>
<style lang="scss" scoped>
.page-bg {
position: absolute;
......
src/pages/panel/panel-menu.vue
<template>
<view class="content">
<view class="content" :style="{ height: `calc(100vh - 386rpx - ${safeAreaInsets?.top + 'px'})` }">
<view class="tab-nav">
<template v-for="(item, index) in tabNav" :key="index">
<view class="tab-nav-item" :class="{ active: activeIndex == index ? true : false }" @tap="activeIndex = index">{{ item }}</view>
......@@ -32,6 +32,8 @@ import { ref } from 'vue'
import MenuItem from './components/menu-item.vue'
import { menuListHome, menuListGroup, allMenuItem } from './constants/index.compositions'
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
//分类
const tabNav = ref(['常用', '分组'])
const activeIndex = ref(0)
......
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