18 changed files with 364 additions and 230 deletions
@ -0,0 +1,8 @@ |
|||
// 默认主题文件 |
|||
.theme-default { |
|||
background-color: #333; |
|||
.u-card { |
|||
font-size: 24px !important; |
|||
color: #0f0; |
|||
} |
|||
} |
@ -0,0 +1,5 @@ |
|||
// 整合所有主题 |
|||
|
|||
// 默认主题 |
|||
@import './default.scss'; |
|||
@import './test.scss'; |
@ -0,0 +1,8 @@ |
|||
// TODO: 测试用的scss主题样式 |
|||
.theme-test { |
|||
background-color: #fff; |
|||
.u-card { |
|||
font-size: 24px !important; |
|||
background-color: #ff0 !important; |
|||
} |
|||
} |
@ -0,0 +1,13 @@ |
|||
<template> |
|||
<view :class="[theme]"> |
|||
<slot></slot> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { computed } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
|
|||
const store = useStore(); |
|||
const theme = computed(() => store.state.theme); |
|||
</script> |
@ -1,7 +0,0 @@ |
|||
<!-- |
|||
* @Author: aBin |
|||
* @email: binbin0314@126.com |
|||
* @Date: 2021-07-19 15:40:02 |
|||
* @LastEditors: aBin |
|||
* @LastEditTime: 2021-07-19 15:40:03 |
|||
--> |
@ -0,0 +1,7 @@ |
|||
import { computed } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
export default function useTheme() { |
|||
const store = useStore(); |
|||
const theme = computed(() => store.state.theme); |
|||
return theme; |
|||
} |
@ -1,135 +1,135 @@ |
|||
<template> |
|||
<!-- <view class="flex flex-col h-full bg-gray-50" @click="openAuth"> --> |
|||
<view class="flex flex-col h-full bg-gray-50"> |
|||
<view class="relative" @touchmove="onMove"> |
|||
<!-- 日历 --> |
|||
<Calendar @selected-change="onDateChange" :show-back="true" ref="calendar" @handleFindPoint="handleFindPoint" /> |
|||
<!-- 上传 导入wbs --> |
|||
<Upload @success="onUploadSuccess" @error="onUploadError" /> |
|||
</view> |
|||
|
|||
<!-- 项目列表 --> |
|||
<Projects @getProjects="getProjects" class="flex-1 overflow-y-auto" /> |
|||
|
|||
<!-- 全局提示框 --> |
|||
<u-top-tips ref="uTips"></u-top-tips> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { reactive, computed, watchEffect, ref } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
import dayjs from 'dayjs'; |
|||
|
|||
const store = useStore(); |
|||
<template> |
|||
<!-- <view class="flex flex-col h-full bg-gray-50" @click="openAuth"> --> |
|||
<view class="flex flex-col h-full bg-gray-50"> |
|||
<view class="relative" @touchmove="onMove"> |
|||
<!-- 日历 --> |
|||
<Calendar @selected-change="onDateChange" :show-back="true" ref="calendar" @handleFindPoint="handleFindPoint" /> |
|||
<!-- 上传 导入wbs --> |
|||
<Upload @success="onUploadSuccess" @error="onUploadError" /> |
|||
</view> |
|||
|
|||
<!-- 项目列表 --> |
|||
<Projects @getProjects="getProjects" class="flex-1 overflow-y-auto" /> |
|||
|
|||
<!-- 全局提示框 --> |
|||
<u-top-tips ref="uTips"></u-top-tips> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { reactive, computed, watchEffect, ref } from 'vue'; |
|||
import { useStore } from 'vuex'; |
|||
import dayjs from 'dayjs'; |
|||
|
|||
const store = useStore(); |
|||
const token = computed(() => store.state.user.token); |
|||
const uTips = ref(null); |
|||
|
|||
const data = reactive({ |
|||
calendar: null, |
|||
days: [], |
|||
}); |
|||
|
|||
// 监听token |
|||
watchEffect(() => { |
|||
if (!token.value) return; |
|||
if (token.value) { |
|||
getProjects(); |
|||
handleFindPoint(); |
|||
} |
|||
}); |
|||
|
|||
// 获取项目列表 |
|||
function getProjects(start = dayjs().startOf('day').valueOf(), end = dayjs().endOf('day').valueOf()) { |
|||
// const data = await this.$u.api.getProjects(start, end); |
|||
uni.$catchReq.getProjects(start, end, (err, data) => { |
|||
if (err) { |
|||
console.error('err: ', err); |
|||
} else { |
|||
data.forEach(item => { |
|||
item.show = false; |
|||
}); |
|||
store.commit('project/setProjects', data); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
async function handleFindPoint(start, end) { |
|||
try { |
|||
const startTime = start || dayjs().startOf('month').valueOf(); |
|||
const endTime = end || dayjs().endOf('month').valueOf(); |
|||
const res = await uni.$u.api.findRedPoint(startTime, endTime); |
|||
store.commit('project/setDotList', res); |
|||
} catch (error) { |
|||
console.log('error: ', error); |
|||
} |
|||
} |
|||
|
|||
// 点击了某个日期 |
|||
const onDateChange = event => { |
|||
const day = dayjs(event.fullDate); |
|||
const start = day.startOf('date').valueOf(); |
|||
const end = day.endOf('date').valueOf(); |
|||
getProjects(start, end); |
|||
}; |
|||
|
|||
// 导入成功 |
|||
const onUploadSuccess = () => { |
|||
uTips.show({ |
|||
title: '导入成功,即将打开新项目', |
|||
type: 'success', |
|||
duration: '3000', |
|||
}); |
|||
}; |
|||
|
|||
// 导入失败 |
|||
const onUploadError = error => { |
|||
uTips.show({ |
|||
title: error || '导入失败', |
|||
type: 'error', |
|||
duration: '6000', |
|||
}); |
|||
}; |
|||
|
|||
// 监听触摸滑动 切换日历的模式 月/周 |
|||
function onMove(event) { |
|||
const y = event.changedTouches[0].pageY; |
|||
if (y - prevY > 0) { |
|||
// 向下滑动 如果是周视图weekMode=true 就 变成 月视图weekMode=false |
|||
data.value.calendar.weekMode && (data.value.calendar.weekMode = false); |
|||
} else if (y - prevY < 0) { |
|||
// 向上滑动 如果是月视图weekMode=false 就变成 周视图weekMode=true |
|||
!data.value.calendar.weekMode && (data.value.calendar.weekMode = true); |
|||
} |
|||
prevY = y; |
|||
data.value.calendar.initDate(); |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.logo { |
|||
height: 200rpx; |
|||
width: 200rpx; |
|||
margin-top: 200rpx; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
margin-bottom: 50rpx; |
|||
} |
|||
|
|||
.text-area { |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 36rpx; |
|||
color: #8f8f94; |
|||
} |
|||
const uTips = ref(null); |
|||
|
|||
const data = reactive({ |
|||
calendar: null, |
|||
days: [], |
|||
}); |
|||
|
|||
// 监听token |
|||
watchEffect(() => { |
|||
if (!token.value) return; |
|||
if (token.value) { |
|||
getProjects(); |
|||
handleFindPoint(); |
|||
} |
|||
}); |
|||
|
|||
// 获取项目列表 |
|||
function getProjects(start = dayjs().startOf('day').valueOf(), end = dayjs().endOf('day').valueOf()) { |
|||
// const data = await this.$u.api.getProjects(start, end); |
|||
uni.$catchReq.getProjects(start, end, (err, data) => { |
|||
if (err) { |
|||
console.error('err: ', err); |
|||
} else { |
|||
data.forEach(item => { |
|||
item.show = false; |
|||
}); |
|||
store.commit('project/setProjects', data); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
async function handleFindPoint(start, end) { |
|||
try { |
|||
const startTime = start || dayjs().startOf('month').valueOf(); |
|||
const endTime = end || dayjs().endOf('month').valueOf(); |
|||
const res = await uni.$u.api.findRedPoint(startTime, endTime); |
|||
store.commit('project/setDotList', res); |
|||
} catch (error) { |
|||
console.log('error: ', error); |
|||
} |
|||
} |
|||
|
|||
// 点击了某个日期 |
|||
const onDateChange = event => { |
|||
const day = dayjs(event.fullDate); |
|||
const start = day.startOf('date').valueOf(); |
|||
const end = day.endOf('date').valueOf(); |
|||
getProjects(start, end); |
|||
}; |
|||
|
|||
// 导入成功 |
|||
const onUploadSuccess = () => { |
|||
uTips.show({ |
|||
title: '导入成功,即将打开新项目', |
|||
type: 'success', |
|||
duration: '3000', |
|||
}); |
|||
}; |
|||
|
|||
// 导入失败 |
|||
const onUploadError = error => { |
|||
uTips.show({ |
|||
title: error || '导入失败', |
|||
type: 'error', |
|||
duration: '6000', |
|||
}); |
|||
}; |
|||
|
|||
// 监听触摸滑动 切换日历的模式 月/周 |
|||
function onMove(event) { |
|||
const y = event.changedTouches[0].pageY; |
|||
if (y - prevY > 0) { |
|||
// 向下滑动 如果是周视图weekMode=true 就 变成 月视图weekMode=false |
|||
data.value.calendar.weekMode && (data.value.calendar.weekMode = false); |
|||
} else if (y - prevY < 0) { |
|||
// 向上滑动 如果是月视图weekMode=false 就变成 周视图weekMode=true |
|||
!data.value.calendar.weekMode && (data.value.calendar.weekMode = true); |
|||
} |
|||
prevY = y; |
|||
data.value.calendar.initDate(); |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.logo { |
|||
height: 200rpx; |
|||
width: 200rpx; |
|||
margin-top: 200rpx; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
margin-bottom: 50rpx; |
|||
} |
|||
|
|||
.text-area { |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 36rpx; |
|||
color: #8f8f94; |
|||
} |
|||
</style> |
|||
|
@ -0,0 +1,9 @@ |
|||
<template> |
|||
<view class="deliver-container">p-deliver</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
|
|||
</script> |
|||
|
|||
<style lang="scss"></style> |
@ -0,0 +1,10 @@ |
|||
<template> |
|||
<!-- 任务名插件 --> |
|||
<theme> |
|||
<view>{{ task.name }}</view> |
|||
</theme> |
|||
</template> |
|||
|
|||
<script setup> |
|||
defineProps({ task: { type: Object, default: () => {} } }); |
|||
</script> |
@ -1,48 +1,58 @@ |
|||
import { createStore } from 'vuex'; |
|||
import user from './user/index.js'; |
|||
import socket from './socket/index.js'; |
|||
import project from './project/index.js'; |
|||
import role from './role/index.js'; |
|||
import socket from './socket/index.js'; |
|||
import task from './task/index.js'; |
|||
import user from './user/index.js'; |
|||
|
|||
// 不属于具体模块的 应用级的 store内容
|
|||
const state = { |
|||
networkConnected: true, // 网络是否连接
|
|||
forceUseStorage: true, // 强制启用storage
|
|||
systemInfo: null, // 系统设备信息
|
|||
theme: 'theme-default', |
|||
networkConnected: true, // 网络是否连接
|
|||
forceUseStorage: true, // 强制启用storage
|
|||
systemInfo: null, // 系统设备信息
|
|||
}; |
|||
|
|||
const getters = { |
|||
// 是否启用本地存储
|
|||
// 设置了强制启用本地存储 或者 没有网络连接的时候
|
|||
useStorage({ networkConnected, forceUseStorage }) { |
|||
return forceUseStorage || !networkConnected; |
|||
}, |
|||
// 是否启用本地存储
|
|||
// 设置了强制启用本地存储 或者 没有网络连接的时候
|
|||
useStorage({ networkConnected, forceUseStorage }) { |
|||
return forceUseStorage || !networkConnected; |
|||
}, |
|||
}; |
|||
|
|||
const mutations = { |
|||
/** |
|||
* 设置网络是否连接的变量 |
|||
* @param {*} state |
|||
* @param {boolean} networkConnected |
|||
*/ |
|||
setNetworkConnected(state, networkConnected) { |
|||
state.networkConnected = networkConnected; |
|||
}, |
|||
/** |
|||
* 设置网络是否连接的变量 |
|||
* @param {*} state |
|||
* @param {boolean} networkConnected |
|||
*/ |
|||
setNetworkConnected(state, networkConnected) { |
|||
state.networkConnected = networkConnected; |
|||
}, |
|||
|
|||
/** |
|||
* 设置系统信息的数据 |
|||
* @param {object} state |
|||
* @param {object | null} data 获取到的数据 |
|||
*/ |
|||
setSystemInfo(state, data) { |
|||
state.systemInfo = data; |
|||
}, |
|||
|
|||
/** |
|||
* 设置系统信息的数据 |
|||
* @param {object} state |
|||
* @param {object | null} data 获取到的数据 |
|||
*/ |
|||
setSystemInfo(state, data) { |
|||
state.systemInfo = data; |
|||
}, |
|||
/** |
|||
* 设置主题 |
|||
* @param {object} state |
|||
* @param {string} theme 主题名称 默认theme-default |
|||
*/ |
|||
setTheme(state, theme) { |
|||
state.theme = theme || 'theme-default'; |
|||
}, |
|||
}; |
|||
|
|||
export default createStore({ |
|||
state, |
|||
getters, |
|||
mutations, |
|||
modules: {user, socket, project, role, task} |
|||
state, |
|||
getters, |
|||
mutations, |
|||
modules: { user, socket, project, role, task }, |
|||
}); |
|||
|
Loading…
Reference in new issue