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 @@ ...@@ -7,5 +7,5 @@
"trailingComma": "none", "trailingComma": "none",
"arrowParens": "always", "arrowParens": "always",
"tabWidth": 4, "tabWidth": 4,
"printWidth": 180 "printWidth": 150
} }
src/components/custom-page/custom-page.vue → src/components/global-navbar/global-navbar.vue
<template> <template>
<view class="page-wrap"> <uni-nav-bar
<view class="page-top" :style="{ paddingTop: safeAreaInsets?.top + 'px' }"> :title="title"
<template v-if="showNavbar"> :border="false"
<uni-nav-bar :title="title" :border="false" :backgroundColor="backgroundColor" :color="color" left-icon="left" :leftWidth="leftWidth" :rightWidth="rightWidth"> :backgroundColor="backgroundColor"
<template #default> :color="color"
<slot name="default"></slot> left-icon="left"
</template> :leftWidth="leftWidth"
<template #left> :rightWidth="rightWidth"
<slot name="left"></slot> >
</template> <template #left>
<template #right> <slot name="left"></slot>
<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>
</template> </template>
<slot name="bg"></slot> <template #right>
</view> <slot name="right"></slot>
</template>
</uni-nav-bar>
</template> </template>
<script setup> <script setup>
const ps = defineProps({ const ps = defineProps({
showNavbar: {
type: Boolean,
default: false
},
title: { title: {
type: String, type: String,
default: '' default: ''
...@@ -41,7 +27,7 @@ const ps = defineProps({ ...@@ -41,7 +27,7 @@ const ps = defineProps({
type: String, type: String,
default: '#1D2129' default: '#1D2129'
}, },
navbarBackground: { backgroundColor: {
type: String, type: String,
default: '#f7f8fa' default: '#f7f8fa'
}, },
...@@ -54,26 +40,5 @@ const ps = defineProps({ ...@@ -54,26 +40,5 @@ const ps = defineProps({
default: 120 default: 120
} }
}) })
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
.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>
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> <template>
<custom-page> <global-page>
<view class="login-wrap"> <view class="login-wrap">
<view class="login-header"> <view class="login-header">
<image src="/static/image/login/Vector.png" /> <image src="/static/image/login/Vector.png" />
...@@ -19,14 +19,20 @@ ...@@ -19,14 +19,20 @@
<uni-forms-item label="验证码" name="verifyCode"> <uni-forms-item label="验证码" name="verifyCode">
<view class="verify-code"> <view class="verify-code">
<uni-easyinput v-model="loginForm.verifyCode" placeholder="请输入验证码" type="text" style="flex: auto" /> <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 class="verify-code-image" v-else></view>
</view> </view>
</uni-forms-item> </uni-forms-item>
</uni-forms> </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> </view>
</custom-page> </global-page>
</template> </template>
<script setup> <script setup>
......
src/pages/panel/app-center/index.vue
<template> <template>
<custom-page title="应用中心" showNavbar> <global-page custom>
<template #left> <template #top>
<view v-if="isEdit" @tap="isEdit = false" class="cancel">取消</view> <global-navbar title="应用中心">
<uni-icons type="left" size="16" @tap="goBack" v-else></uni-icons> <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>
<template #right> <view class="content">
<custom-button type="primary" size="small" v-if="isEdit" style="padding: 0 32rpx">保存</custom-button> <view class="card">
</template> <view class="card-title">
<template #content> <view class="card-title-txt">首页应用</view>
<view class="content"> <global-button type="primary" size="small" @tap="isEdit = true">编辑</global-button>
<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> </view>
<view class="card"> <view class="menu-list">
<view class="card-title"> <menu-item
<view class="card-title-txt">全部应用</view> class="menu-item"
</view> v-for="item in menuListHome"
<view class="menu-list" v-if="menuListNoHome.length > 0"> :data="item"
<menu-item :key="item.id"
class="menu-item" :showCount="false"
v-for="item in menuListNoHome" :type="isEdit ? 'minus' : 'default'"
:data="item" @tap="goTo"
:key="item.id" ></menu-item>
:showCount="false"
:type="isEdit ? 'plus' : 'default'"
@tap="goTo"
></menu-item>
</view>
<global-empty class="menu-empty" v-else></global-empty>
</view> </view>
</view> </view>
</template> <view class="card">
</custom-page> <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> </template>
<script setup> <script setup>
......
src/pages/panel/assessment-records/index.vue
<template> <template>
<z-paging ref="paging" v-model="dataList"> <global-page :custom="false">
<template #top> <template #top>
<z-tabs :list="tabList" @change="tabsChange" bar-width="80rpx" bg-color="#f7f8fa" /> <z-tabs :list="tabList" @change="tabsChange" bar-width="80rpx" bg-color="#f7f8fa" />
</template> </template>
...@@ -13,9 +13,11 @@ ...@@ -13,9 +13,11 @@
</view> </view>
<score-details></score-details> <score-details></score-details>
</view> </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>
<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="item-title">
<view class="desc"> <view class="desc">
<view class="type">OPEN</view> <view class="type">OPEN</view>
...@@ -24,24 +26,23 @@ ...@@ -24,24 +26,23 @@
</view> </view>
<score-details type="warning"></score-details> <score-details type="warning"></score-details>
</view> </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>
</view> </view>
</z-paging> </global-page>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
import ScoreDetails from '../components/score-details.vue' import ScoreDetails from '../components/score-details.vue'
const paging = ref()
const tabIndex = ref(0) const tabIndex = ref(0)
const tabList = ref(['OPEN', 'CLOSE', '全部']) const tabList = ref(['OPEN', 'CLOSE', '全部'])
const dataList = ref([])
//导航切换 //导航切换
const tabsChange = (index) => { const tabsChange = (index) => {
tabIndex.value = index tabIndex.value = index
paging.value.reload()
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/pages/panel/constants/panel-menu.scss
.content { .content {
height: calc(100% - 386rpx);
border-radius: 16rpx 16rpx 0 0; border-radius: 16rpx 16rpx 0 0;
background: #fff; background: #fff;
padding-top: 32rpx; padding-top: 32rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 32rpx; margin: 0 32rpx;
flex: auto;
.tab-nav { .tab-nav {
display: flex; display: flex;
padding: 0 32rpx; padding: 0 32rpx;
......
src/pages/panel/index.vue
<template> <template>
<custom-page> <image class="page-bg" src="/static/image/panel/page-bg.png" />
<template #bg> <global-page custom>
<image class="page-bg" src="/static/image/panel/page-bg.png" />
</template>
<!-- 导航栏 --> <!-- 导航栏 -->
<panel-navbar></panel-navbar> <template #top>
<panel-navbar></panel-navbar>
</template>
<!-- 菜单图标 --> <!-- 菜单图标 -->
<panel-menu style="flex: auto"></panel-menu> <panel-menu style="flex: auto"></panel-menu>
</custom-page> </global-page>
</template> </template>
<script setup> <script setup>
import PanelNavbar from './panel-navbar.vue' import PanelNavbar from './panel-navbar.vue'
import PanelMenu from './panel-menu.vue' import PanelMenu from './panel-menu.vue'
</script> </script>
<style>
page {
overflow: hidden;
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-bg { .page-bg {
position: absolute; position: absolute;
......
src/pages/panel/panel-menu.vue
<template> <template>
<view class="content"> <view class="content" :style="{ height: `calc(100vh - 386rpx - ${safeAreaInsets?.top + 'px'})` }">
<view class="tab-nav"> <view class="tab-nav">
<template v-for="(item, index) in tabNav" :key="index"> <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> <view class="tab-nav-item" :class="{ active: activeIndex == index ? true : false }" @tap="activeIndex = index">{{ item }}</view>
...@@ -32,6 +32,8 @@ import { ref } from 'vue' ...@@ -32,6 +32,8 @@ import { ref } from 'vue'
import MenuItem from './components/menu-item.vue' import MenuItem from './components/menu-item.vue'
import { menuListHome, menuListGroup, allMenuItem } from './constants/index.compositions' import { menuListHome, menuListGroup, allMenuItem } from './constants/index.compositions'
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
//分类 //分类
const tabNav = ref(['常用', '分组']) const tabNav = ref(['常用', '分组'])
const activeIndex = ref(0) 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