Skip to content

M
mocp-uniapp
Commit 2bbea434 by pangchong
Options

feat: 代码提交

parent d719f549
Showing with 600 additions and 94 deletions
.hbuilderx/launch.json 0 → 100644
{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
// launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
"version": "0.0",
"configurations": [{
"app-plus" :
{
"launchtype" : "local"
},
"default" :
{
"launchtype" : "local"
},
"type" : "uniCloud"
}
]
}
src/App.vue
......@@ -14,4 +14,9 @@ export default {
<style>
/*每个页面公共css */
page {
font-size: 28rpx;
height: 100vh;
background: #f7f8fa;
}
</style>
src/components/custom-button/custom-button.vue 0 → 100644
<template>
<button :class="getClass" :style="getStyle" :loading="loading" :disabled="disabled">
<slot></slot>
</button>
</template>
<script setup>
import { computed } from 'vue'
const ps = defineProps({
class: {
type: String,
default: ''
},
style: {
type: Object,
default: () => {}
},
type: {
type: String,
default: 'default'
},
size: {
type: String,
default: 'default'
},
loading: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
}
})
const getClass = computed(() => {
const _class = ['global-button']
if (ps.class) {
_class.push(ps.class)
}
if (ps.type) {
_class.push(ps.type)
}
return _class
})
const getSize = computed(() => {
if (ps.size == 'default') {
return 64 + 'rpx'
}
if (ps.size == 'small') {
return 56 + 'rpx'
}
if (ps.size == 'large') {
return 88 + 'rpx'
}
})
</script>
<style lang="scss" scoped>
.global-button {
padding: 0 32rpx;
height: v-bind(getSize);
line-height: v-bind(getSize);
font-size: 28rpx;
&.primary {
background-color: $uni-color-primary;
color: #fff;
}
&.success {
background-color: $uni-color-success;
color: #fff;
}
&.warning {
background-color: $uni-color-warning;
color: #fff;
}
&.danger {
background-color: $uni-color-error;
color: #fff;
}
}
</style>
src/components/custom-navbar/custom-navbar.vue 0 → 100644
<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>
</template>
<script setup>
const ps = defineProps({
title: {
type: String,
default: ''
},
color: {
type: String,
default: '#1D2129'
},
backgroundColor: {
type: String,
default: '#f7f8fa'
}
})
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>
<style lang="scss" scoped></style>
src/pages.json
{
// 组件自动导入
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
"pages": [
//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/login/index",
"style": {
"navigationBarTitleText": "登录"
}
},
{
"path": "pages/chat/index",
"style": {
"navigationBarTitleText": "沟通"
}
},
{
"path": "pages/panel/index",
"style": {
"navigationBarTitleText": "工作台"
}
},
{
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "个人中心"
}
},
{
"path": "pages/experience/index",
"style": {
"navigationBarTitleText": "经验库"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#1D2129",
"selectedColor": "#0E42D2",
"borderStyle": "black",
"iconWidth": "24px",
"backgroundColor": "#fff",
"list": [
{
"pagePath": "pages/chat/index",
"text": "沟通",
"iconPath": "static/menu/chat.png",
"selectedIconPath": "static/menu/chat-select.png"
},
{
"pagePath": "pages/panel/index",
"text": "工作台",
"iconPath": "static/menu/panel.png",
"selectedIconPath": "static/menu/panel-select.png"
},
{
"pagePath": "pages/experience/index",
"text": "经验库",
"iconPath": "static/menu/experience.png",
"selectedIconPath": "static/menu/experience-select.png"
},
{
"pagePath": "pages/mine/index",
"text": "个人中心",
"iconPath": "static/menu/mine.png",
"selectedIconPath": "static/menu/mine-select.png"
}
]
}
}
// 组件自动导入
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
"pages": [
//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/panel/index",
"style": {
"navigationBarTitleText": "工作台",
"navigationStyle": "custom"
}
},
{
"path": "pages/panel/app-center/index",
"style": {
"navigationBarTitleText": "应用中心",
"navigationStyle": "custom"
}
},
{
"path": "pages/login/index",
"style": {
"navigationBarTitleText": "登录"
}
},
{
"path": "pages/chat/index",
"style": {
"navigationBarTitleText": "沟通"
}
},
{
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "个人中心"
}
},
{
"path": "pages/experience/index",
"style": {
"navigationBarTitleText": "经验库"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#1D2129",
"selectedColor": "#0E42D2",
"borderStyle": "black",
"iconWidth": "24px",
"backgroundColor": "#fff",
"list": [
{
"pagePath": "pages/chat/index",
"text": "沟通",
"iconPath": "static/menu/chat.png",
"selectedIconPath": "static/menu/chat-select.png"
},
{
"pagePath": "pages/panel/index",
"text": "工作台",
"iconPath": "static/menu/panel.png",
"selectedIconPath": "static/menu/panel-select.png"
},
{
"pagePath": "pages/experience/index",
"text": "经验库",
"iconPath": "static/menu/experience.png",
"selectedIconPath": "static/menu/experience-select.png"
},
{
"pagePath": "pages/mine/index",
"text": "个人中心",
"iconPath": "static/menu/mine.png",
"selectedIconPath": "static/menu/mine-select.png"
}
]
}
}
\ No newline at end of file
src/pages/login/index.vue
......@@ -15,7 +15,7 @@
</view>
</uni-forms-item>
</uni-forms>
<button type="primary" size="mini" @click="handleLogin" class="login-btn">登录</button>
<button type="primary" size="mini" @tap="handleLogin" class="login-btn">登录</button>
</view>
</template>
......@@ -84,9 +84,7 @@ const handleLogin = async () => {
const res = await loginApi(toRaw(loginForm), { loading: '登陆中...' })
if (res.code == 200) {
//跳转工作台
uni.switchTab({
url: '/pages/panel/index'
})
uni.switchTab({ url: '/pages/panel/index' })
} else {
message.error(res.message)
}
......@@ -94,6 +92,9 @@ const handleLogin = async () => {
</script>
<style lang="scss">
page {
background: #fff;
}
.login-wrap {
padding: 50rpx;
.login-title {
......
src/pages/panel/app-center/index.vue 0 → 100644
<template>
<custom-navbar title="应用中心">
<template #left>
<uni-icons type="left" size="16"></uni-icons>
</template>
<template #right>
<custom-button type="primary">保存</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" class="card-title-button">编辑</custom-button>
</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>
<script setup>
import MenuItem from '../components/menu-item.vue'
import { menuList } from '../constants/data.config'
</script>
<style lang="scss" scoped>
.content {
padding: 16rpx;
.card {
border-radius: 12rpx;
background: #fff;
.card-title {
display: flex;
justify-content: space-between;
.card-title-txt {
font-size: 34rpx;
color: #1d2129;
}
.card-title-button {
border-radius: 52rpx;
}
}
.menu-list {
display: flex;
flex-wrap: wrap;
.menu-item {
width: 25%;
margin-bottom: 48rpx;
box-sizing: border-box;
}
}
}
}
</style>
src/pages/panel/components/menu-item.vue 0 → 100644
<template>
<view class="menu-item">
<uni-badge class="uni-badge-left-margin" :text="data.count" absolute="rightTop" size="small" :offset="[3, 3]">
<image :src="getUrl" />
</uni-badge>
<text>{{ data.name }}</text>
</view>
</template>
<script setup>
import { computed } from 'vue'
const ps = defineProps({
data: {
type: Object,
default: function () {
return {}
}
}
})
const getUrl = computed(() => {
return '/static/panel/' + ps.data.icon + '.png'
})
</script>
<style lang="scss" scoped>
.menu-item {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 10rpx;
image {
width: 64rpx;
height: 64rpx;
}
text {
margin-top: 16rpx;
color: #1d2129;
font-size: 30rpx;
}
}
</style>
src/pages/panel/constants/data.config.js 0 → 100644
import { 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 }
])
src/pages/panel/index.vue
<template>工作台</template>
<template>
<!-- 导航栏 -->
<view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
<image class="navbar-bg" src="/static/panel/navbar-bg.png" />
<view class="navbar-box">
<view class="navbar-weather">
<view class="weather-place">武汉</view>
<text class="weather-state">晴 22°</text>
</view>
<view class="navbar-input">
<uni-easyinput type="text" disabled>
<template #right>
<view class="navbar-input-right">
<text class="line"></text>
<text>搜索</text>
</view>
</template>
</uni-easyinput>
</view>
<view class="navbar-icon">
<image src="/static/panel/vector.png" />
</view>
</view>
<view class="navbar-bottom-list">
<view class="list-item">
<view class="list-item-title" style="text-align: left">我的任务</view>
<view class="list-item-descs">
<view class="list-item-desc">
<view class="txt">24</view>
<view class="p">待办任务</view>
</view>
<view class="list-item-line"></view>
<view class="list-item-desc">
<view class="txt">1</view>
<view class="p">已接受任务</view>
</view>
</view>
</view>
<view class="list-item">
<view class="list-item-title">跟机任务</view>
<view class="list-item-desc">
<view class="txt">24</view>
<view class="p">待办任务</view>
</view>
</view>
<view class="list-item">
<view class="list-item-title">AOG任务</view>
<view class="list-item-desc">
<view class="txt">24</view>
<view class="p">待办任务</view>
</view>
</view>
</view>
</view>
<!-- 图标list -->
<view class="content" :style="{ height: `calc(100% - 345rpx - ${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>
</template>
</view>
<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>
</view>
</view>
<view class="tab-content-item" v-if="activeIndex == 1">
<view class="menu-content">
<view class="menu-content-item" v-for="(value, key) in menuListGroup" :key="key">
<view class="menu-title">{{ key }}</view>
<view class="menu-list">
<menu-item class="menu-item" v-for="item in value" :data="item" :key="item.id"></menu-item>
</view>
<view class="menu-line"></view>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script setup></script>
<script setup>
import { computed, ref } from 'vue'
import MenuItem from './components/menu-item.vue'
import { menuList } from './constants/data.config'
<style scoped></style>
// 获取屏幕边界到安全区域距离
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' })
}
</script>
<style lang="scss" scoped>
.navbar {
padding-bottom: 32rpx;
position: relative;
color: #fff;
&-bg {
position: absolute;
width: 100%;
z-index: -1;
}
&-box {
display: flex;
align-items: center;
padding: 20rpx 32rpx 32rpx 32rpx;
}
&-weather {
margin-right: 16rpx;
.weather-state {
font-size: 24rpx;
}
}
&-input {
width: 500rpx;
:deep(.is-input-border) {
border-radius: 12rpx !important;
}
&-right {
color: #165dff;
margin-right: 32rpx;
display: flex;
align-items: center;
font-weight: 900;
.line {
background: rgba(104, 161, 254, 0.4);
margin-right: 32rpx;
width: 1rpx;
height: 32rpx;
}
}
}
&-icon {
width: 60rpx;
height: 60rpx;
margin-left: 26rpx;
image {
width: 100%;
height: 100%;
}
}
&-bottom-list {
display: flex;
justify-content: space-between;
padding: 0 32rpx;
.list-item {
&-title {
font-size: 32rpx;
text-align: center;
margin-bottom: 26rpx;
}
&-descs {
display: flex;
align-items: center;
}
&-desc {
display: flex;
flex-direction: column;
align-items: center;
.txt {
font-weight: 700;
}
}
&-line {
margin: 0 24rpx;
height: 60rpx;
width: 1rpx;
background: rgba(255, 255, 255, 0.1);
}
}
}
}
.content {
border-radius: 38rpx;
background: #fff;
padding-top: 32rpx;
display: flex;
flex-direction: column;
.tab-nav {
display: flex;
padding: 0 32rpx;
&-item {
color: rgba(0, 0, 0, 0.6);
position: relative;
margin-right: 56rpx;
padding-bottom: 12rpx;
border-bottom: 4rpx solid #fff;
&.active {
color: #165dff;
border-bottom: 4rpx solid #165dff;
}
}
}
.tab-content {
margin-top: 36rpx;
flex: auto;
overflow-y: auto;
&-item {
.menu-content-item {
margin-bottom: 32rpx;
.menu-line {
margin: 0 32rpx;
height: 1rpx;
background: rgba(0, 0, 0, 0.05);
}
.menu-item {
margin-bottom: 32rpx !important;
}
.menu-title {
color: #1d2129;
margin-bottom: 32rpx;
padding: 0 32rpx;
font-size: 34rpx;
}
}
.menu-list {
display: flex;
flex-wrap: wrap;
.menu-item {
width: 25%;
margin-bottom: 48rpx;
box-sizing: border-box;
}
}
}
}
}
</style>
src/static/menu/chat-select.png
src/static/menu/chat-select.png

200 Bytes | W: | H:

src/static/menu/chat-select.png

345 Bytes | W: | H:

src/static/menu/chat-select.png
src/static/menu/chat-select.png
src/static/menu/chat-select.png
src/static/menu/chat-select.png
  • 2-up
  • Swipe
  • Onion skin
src/static/menu/chat.png
src/static/menu/chat.png

199 Bytes | W: | H:

src/static/menu/chat.png

363 Bytes | W: | H:

src/static/menu/chat.png
src/static/menu/chat.png
src/static/menu/chat.png
src/static/menu/chat.png
  • 2-up
  • Swipe
  • Onion skin
src/static/menu/experience-select.png
src/static/menu/experience-select.png

208 Bytes | W: | H:

src/static/menu/experience-select.png

363 Bytes | W: | H:

src/static/menu/experience-select.png
src/static/menu/experience-select.png
src/static/menu/experience-select.png
src/static/menu/experience-select.png
  • 2-up
  • Swipe
  • Onion skin
src/static/menu/experience.png
src/static/menu/experience.png

303 Bytes | W: | H:

src/static/menu/experience.png

555 Bytes | W: | H:

src/static/menu/experience.png
src/static/menu/experience.png
src/static/menu/experience.png
src/static/menu/experience.png
  • 2-up
  • Swipe
  • Onion skin
src/static/menu/mine-select.png
src/static/menu/mine-select.png

630 Bytes | W: | H:

src/static/menu/mine-select.png

2.02 KB | W: | H:

src/static/menu/mine-select.png
src/static/menu/mine-select.png
src/static/menu/mine-select.png
src/static/menu/mine-select.png
  • 2-up
  • Swipe
  • Onion skin
src/static/menu/mine.png
src/static/menu/mine.png

591 Bytes | W: | H:

src/static/menu/mine.png

2.05 KB | W: | H:

src/static/menu/mine.png
src/static/menu/mine.png
src/static/menu/mine.png
src/static/menu/mine.png
  • 2-up
  • Swipe
  • Onion skin
src/static/menu/panel-select.png
src/static/menu/panel-select.png

328 Bytes | W: | H:

src/static/menu/panel-select.png

845 Bytes | W: | H:

src/static/menu/panel-select.png
src/static/menu/panel-select.png
src/static/menu/panel-select.png
src/static/menu/panel-select.png
  • 2-up
  • Swipe
  • Onion skin
src/static/menu/panel.png
src/static/menu/panel.png

284 Bytes | W: | H:

src/static/menu/panel.png

772 Bytes | W: | H:

src/static/menu/panel.png
src/static/menu/panel.png
src/static/menu/panel.png
src/static/menu/panel.png
  • 2-up
  • Swipe
  • Onion skin
src/uni.scss
......@@ -15,11 +15,11 @@
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
$uni-color-primary: #165DFF;
$uni-color-success: #00B42A;
$uni-color-warning: #FF7D00;
$uni-color-error: #F53F3F;
/* 文字基本颜色 */
$uni-text-color: #333; // 基本色
$uni-text-color-inverse: #fff; // 反色
......
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