feat: 项目列表

App.vue

@@ -68,13 +68,13 @@
 					if (data && data.token) {
 						store.commit('user/setUser', data);
 						store.commit('user/setToken', data.token);
-						this.noPhone(data.phone);
+						noPhone(data.phone);
 					} else {
-						this.$ui.showToast('返回数据异常');
+						uni.$ui.showToast('返回数据异常');
 					}
 				} catch (error) {
 					console.error('error: ', error);
-					this.$ui.showToast(error || '登录失败');
+					uni.$ui.showToast(error || '登录失败');
 				}
 			},
 
@@ -84,7 +84,9 @@
 			 */
 			async noPhone(phone) {
 				if (!phone) {
-					this.$u.route('/pages/phone-bind/phone-bind');
+					uni.navigateTo({
+						title: '/pages/phone-bind/phone-bind'
+					});
 				}
 			},
 		}
@@ -96,4 +98,5 @@
 	@import "@/uni_modules/vk-uview-ui/index.scss";
 	@import '@/common/styles/iconfont.scss';
 	@import '@/common/styles/app.scss';
+	@import '@/common/styles/tailwind.scss';
 </style>

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### 🌟 新功能
 范围|描述|commitId
 --|--|--
+ - | 日历页首页 | [561c8e6](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/561c8e6)
  - | 使用uview完成api请求 | [1b3efd8](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/1b3efd8)
  - | app.vue | [970cf9a](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/970cf9a)
  - | first commit | [8dc26de](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/8dc26de)

components/PrettyExchange/PrettyExchange.vue

@@ -0,0 +1,463 @@
+<template>
+	<view>
+		<scroll-view scroll-y="true">
+			<view v-if="!data.changeEvent">
+				<view :id="'cu-' + index" :key="item.id" class="cu-item flex-col" v-for="(item, index) in data.itemList">
+					<ProjectItem class="w-full" :index="index" :item="item" :menuList="menuList" @setData="setData"
+						@openSubProject="openSubProject" />
+				</view>
+			</view>
+
+			<view v-else>
+				<view :id="'cu-' + index" :key="index" :style="{ 'background-color': item.color }"
+					@touchend="stops($event, index)" @touchmove.stop.prevent="move" @touchstart="start($event, index)"
+					class="cu-item flex-col" v-for="(item, index) in itemList">
+					<view class="border-100 bg-blue-500" v-if="item.showTopBorder"></view>
+
+					<!-- 内容区 -->
+					<!-- 父项目 -->
+					<view class="w-full">
+						<view class="flex items-center justify-between p-3">
+							<u-icon class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon>
+
+							<view class="flex-1 px-3">
+								<view class="flex items-center mb-1">
+									<view class="mr-2">{{ item.name }}</view>
+									<!-- 状态 TODO:-->
+									<view class="px-2 text-xs text-green-400 bg-green-100 rounded-full flex-shrink-0">
+										进行中</view>
+								</view>
+
+								<view class="flex items-center text-xs text-gray-400">
+									<view class="pr-2">{{ $moment(+item.startTime).format('MM-DD HH:mm') }}</view>
+									至
+									<view class="pl-2">{{ $moment(+item.endTime).format('MM-DD HH:mm') }}</view>
+								</view>
+							</view>
+
+							<!-- 箭头 -->
+							<view v-if="item.sonProjectList && item.sonProjectList.length">
+								<u-icon @click="openSubProject(item.sonProjectList.length, index)" class="text-gray-400"
+									name="arrow-up" size="14px" v-if="item.show"></u-icon>
+								<u-icon @click="openSubProject(item.sonProjectList.length, index)" class="text-gray-400"
+									name="arrow-down" size="14px" v-else></u-icon>
+							</view>
+							<u-icon class="text-gray-400" name="arrow-right" size="14px" v-else></u-icon>
+						</view>
+						<!-- 父项目 end -->
+
+						<!-- 子项目 -->
+						<view class="ml-8" v-if="item.show">
+							<view :id="'cu-' + index + '-' + subIndex" :key="subIndex"
+								@touchend.stop.prevent="stops($event, index + '-' + subIndex, item.sonProjectList.length)"
+								@touchmove.stop.prevent="move($event, item.sonProjectList.length)"
+								@touchstart.stop.prevent="start($event, index + '-' + subIndex)"
+								class="cu-item flex-col" v-for="(subItem, subIndex) in item.sonProjectList">
+								<view class="flex items-center justify-between p-3 w-full">
+									<u-icon class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48">
+									</u-icon>
+
+									<view class="flex-1 px-3">
+										<view class="flex items-center">
+											<view class="mr-2">{{ subItem.name }}</view>
+											<!-- 状态 -->
+											<view
+												:class="subItem.status === 0 ? 'text-blue-400 bg-blue-100' : subItem.status === 1 ? 'text-green-400 bg-green-100' : subItem.status === 2 ? 'text-red-400 bg-red-100' : 'text-gray-400 bg-gray-100'"
+												class="px-2 text-xs text-gray-400 bg-gray-100 rounded-full flex-shrink-0">
+												{{ subItem.status === 0 ? '未开始' : subItem.status === 1 ? '进行中' : subItem.status === 2 ? '暂停' : '已完成' }}
+											</view>
+										</view>
+									</view>
+
+									<!-- 箭头 -->
+									<u-icon class="text-gray-400" name="arrow-right" size="14px"></u-icon>
+								</view>
+							</view>
+						</view>
+					</view>
+					<!-- 内容区 end -->
+
+					<view class="border-100 bg-blue-500" v-if="item.showBorder"></view>
+					<view class="border-80 bg-blue-500" v-if="item.showSubBorder"></view>
+				</view>
+			</view>
+		</scroll-view>
+
+		<!-- 移动悬浮 begin -->
+		<view v-if="showMoveImage">
+			<view :style="{ left: moveLeft + 'px', top: moveTop + 'px' }" class="cu-item absolute">
+				<ProjectItem class="w-full" :item="moveItem" />
+			</view>
+		</view>
+		<!-- 移动悬浮 end -->
+
+		<!-- 项目操作面板 -->
+		<u-action-sheet :list="menuList" :tips="tips" @click="chooseAction" v-model="showMenu"></u-action-sheet>
+	</view>
+</template>
+
+<script setup>
+	import { ref, onMounted, watch, computed } from 'vue';
+	import ProjectItem from '@/components/Projects/ProjectItem.vue';
+	import store from '@/store/index.js'
+	
+	const projects = computed(() => store.state.project.projects);
+	const data = ref({
+		itemTop: 0,
+		itemLeft: 0,
+		itemHeight: 0, // 移动元素的高度
+		subItemHeight: 0, // 移动子元素的高度
+		itemWidth: 0, // 移动元素的宽度
+		showMoveImage: false,
+		moveItem: '',
+		moveLeft: 0,
+		moveTop: 0,
+		deltaLeft: 0,
+		deltaTop: 0,
+		beginleft: 0,
+		begintop: 0,
+		itemList: [],
+		setSubItem: false,
+		changeEvent: false,
+		
+		showMenu: false,
+		tips: {
+			text: '',
+			color: '#909399',
+			fontSize: 28,
+		},
+		projectId: 0,
+		menuList: [{ text: '复制' }, { text: '编辑' }, { text: '删除' }, { text: '置顶' }, { text: '排序' }],
+		// show: false,
+		border: 'border border-blue-500 shadow rounded-md',
+		showBorder: false,
+		showItemIndex: undefined,
+	});
+	
+	watch(projects, (val) => {
+		data.value.itemList = val;
+		data.value.itemList.forEach(item => {
+			item.showBorder = false;
+			item.showSubBorder = false;
+			item.showTopBorder = false;
+		});
+		
+		console.log('watch', data.value.itemList)
+	})
+	
+	onMounted(() => {
+		data.value.itemList = projects.value;
+		data.value.itemList.forEach(item => {
+			item.showBorder = false;
+			item.showSubBorder = false;
+			item.showTopBorder = false;
+		});
+		
+		console.log('onMounted', data.value.itemList)
+	});
+	
+	// 展开子项目
+	function openSubProject(length, index) {
+		setProjectItemShow({ index, show: data.value.itemList[index].show ? false : true });
+		if (length && index) {
+			this.$emit('changeHeight', length, index);
+		}
+		data.value.showItemIndex = index;
+	}
+	
+	// 获取项目列表距离顶部的距离
+	function getDate() {
+		const query = uni.createSelectorQuery().in(this);
+		query.select(`#cu-0`).boundingClientRect(res => {
+			console.log('data: ', res);
+			data.value.begintop = res.top;
+			data.value.beginleft = res.left;
+	    }).exec();
+	}
+	
+	function setData(flag, projectId, tips) {
+		data.value.showMenu = flag;
+		data.value.projectId = projectId;
+		data.value.tips = tips;
+	}
+	
+	function chooseAction(e) {
+		let data = { index: e, projectId: data.value.projectId };
+		// this.$emit('chooseAction', data);
+		actionFun(data);
+    }
+	
+	// 操作
+    function actionFun(obj) {
+		let action = data.value.menuList[obj.index].text;
+		if (action === '排序') {
+			data.value.changeEvent = true;
+			this.$ui.showToast('请移动进行排序');
+		}
+
+		if (action === '删除') {
+			data.value.changeEvent = false;
+			delProject(obj.projectId);
+		}
+
+		if (data.value.showItemIndex !== undefined) {
+			setProjectItemShow({ index: data.value.showItemIndex, show: true });
+		}
+    }
+	
+	function isNumber(val) {
+		return val === +val;
+	}
+	
+	function start(e, index) {
+		console.log('开始', e);
+		setTimeout(() => {
+			getDate();
+		}, 300);
+	
+		if (isNumber(index)) {
+			data.value.setSubItem = false;
+			const query = uni.createSelectorQuery().in(this);
+			query.select(`#cu-${index}`).boundingClientRect(res => {
+				data.value.moveTop = res.top;
+				data.value.moveLeft = res.left;
+				data.value.moveItem = data.value.itemList[index];
+				data.value.itemWidth = res.width;
+				data.value.itemHeight = res.height;
+			}).exec();
+		} else {
+			let arr = index.split('-');
+			data.value.setSubItem = true;
+			const query = uni.createSelectorQuery().in(this);
+			query.select(`#cu-${arr[0] - 0}`).boundingClientRect(res => {
+				data.value.itemHeight = res.height;
+			}).exec();
+	
+			query.select(`#cu-${index}`).boundingClientRect(res => {
+				data.value.moveTop = res.top;
+				data.value.moveLeft = res.left;
+				data.value.moveItem = data.value.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
+				data.value.itemWidth = res.width;
+				data.value.subItemHeight = res.height;
+			}).exec();
+		}
+	}
+	
+	function move(e, length) {
+		console.log('移动');
+		data.value.showMoveImage = true; //悬浮开始
+		const touch = e.touches[0];
+		if (data.value.deltaLeft == 0) {
+			// 获得本身的移动
+			data.value.deltaLeft = touch.pageX - data.value.moveLeft;
+			data.value.deltaTop = touch.pageY - data.value.moveTop;
+		}
+		data.value.moveLeft = touch.pageX - data.value.deltaLeft;
+		data.value.moveTop = touch.pageY - data.value.deltaTop;
+
+		let lastIndex = (lastIndex = findOverIndex(touch.pageY, length));
+		// 显示下划线
+		for (let i = 0; i < data.value.itemList.length; i++) {
+			if (data.value.moveLeft > 35) {
+				data.value.itemList[i].showBorder = false;
+				data.value.itemList[i].showTopBorder = false;
+				if (i === lastIndex) {
+					data.value.itemList[i].showSubBorder = true;
+				} else {
+					data.value.itemList[i].showSubBorder = false;
+				}
+			} else {
+				if (lastIndex === -1) {
+					data.value.itemList[0].showTopBorder = true;
+					data.value.itemList[i].showSubBorder = false;
+					data.value.itemList[i].showBorder = false;
+				} else {
+					data.value.itemList[i].showSubBorder = false;
+					data.value.itemList[i].showTopBorder = false;
+					if (i === lastIndex) {
+						data.value.itemList[i].showBorder = true;
+					} else {
+						data.value.itemList[i].showBorder = false;
+					}
+				}
+			}
+		}
+    }
+	
+	function stops(e, index, length) {
+		console.log('结束');
+		const touch = e.mp.changedTouches[0];
+		let lastIndex = (lastIndex = findOverIndex(touch.pageY, length));
+
+		// 交换两个值
+		for (let i = 0; i < data.value.itemList.length; i++) {
+			// 插入顶部
+			if (data.value.itemList[i].showTopBorder) {
+				if (isNumber(index)) {
+					let Value = data.value.itemList[index];
+					data.value.itemList.unshift(Value);
+					data.value.itemList.splice(index + 1, 1);
+				} else {
+					let arr = index.split('-');
+					let Value = data.value.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
+					data.value.itemList.unshift(Value);
+					data.value.itemList[arr[0] - 0].sonProjectList.splice([arr[1] - 0], 1);
+					const options = {
+						id: Value.id,
+						parentId: 0,
+					};
+					this.$emit('change', options);
+				}
+				// 清空
+				clearSet(i);
+				this.$emit('change', data.value.itemList);
+				return;
+			}
+			// 插入一级项目
+			if (data.value.itemList[i].showBorder) {
+				if (isNumber(index)) {
+					let Value = data.value.itemList[index];
+					data.value.itemList.splice(i + 1, 0, Value);
+					if (i < index) {
+						data.value.itemList.splice(index + 1, 1);
+					} else {
+						data.value.itemList.splice(index, 1);
+					}
+				} else {
+					let arr = index.split('-');
+					let Value = data.value.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
+					data.value.itemList.splice(i + 1, 0, Value);
+					data.value.itemList[arr[0] - 0].sonProjectList.splice([arr[1] - 0], 1);
+					const options = {
+						id: Value.id,
+						parentId: 0,
+					};
+					this.$emit('change', options);
+				}
+				// 清空
+				clearSet(i);
+				this.$emit('change', data.value.itemList);
+				return;
+			}
+			// 插入二级项目
+			if (data.value.itemList[i].showSubBorder) {
+				if (isNumber(index)) {
+					let Value = data.value.itemList[index];
+					if (data.value.itemList[lastIndex - 1].sonProjectList && data.value.itemList[lastIndex - 1].sonProjectList.length) {
+						data.value.itemList[lastIndex - 1].sonProjectList.push(Value);
+					} else {
+						data.value.itemList[lastIndex].sonProjectList = [Value];
+					}
+					data.value.itemList.splice(index, 1);
+					// 清空
+					clearSet(i);
+					const options = {
+						id: Value.id,
+						parentId: data.value.itemList[lastIndex - 1].id,
+					};
+					this.$emit('change', options);
+				} else {
+					let arr = index.split('-');
+					let Value = data.value.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
+					if (data.value.itemList[lastIndex].sonProjectList && data.value.itemList[lastIndex].sonProjectList.length) {
+						data.value.itemList[lastIndex].sonProjectList.push(Value);
+					} else {
+						data.value.itemList[lastIndex].sonProjectList = [Value];
+					}
+					data.value.itemList[arr[0] - 0].sonProjectList.splice([arr[1] - 0], 1);
+					// 清空
+					clearSet(i);
+					const options = {
+						id: Value.id,
+						parentId: data.value.itemList[lastIndex].id,
+					};
+					this.$emit('change', options);
+
+					const options1 = {
+						id: Value.id,
+						parentId: 0,
+					};
+					this.$emit('change', options1);
+				}
+				return;
+			}
+		}
+    }
+	
+	// 还原初始数据
+	function clearSet(i) {
+		data.value.itemList[i].showBorder = false;
+		data.value.itemList[i].showSubBorder = false;
+		data.value.itemList[i].showTopBorder = false;
+		data.value.deltaLeft == 0;
+		data.value.showMoveImage = false;
+		data.value.setSubItem = false;
+		data.value.changeEvent = false;
+		data.value.showItemIndex = undefined;
+	}
+	
+	// 找到停下的元素的下标
+	function findOverIndex(posY) {
+		// 如果有子项目展开着
+		let leng = data.value.itemList.length * data.value.itemHeight; // 最后一个元素距离顶部的距离
+		if (posY < data.value.begintop) {
+			return -1;
+		}
+		for (var i = 0; i < data.value.itemList.length; i++) {
+			let begin = data.value.itemHeight * i + data.value.begintop;
+			let end = data.value.itemHeight * i + data.value.begintop + data.value.itemHeight;
+			if (begin <= posY && end >= posY) {
+				return i;
+			}
+		}
+		if (posY > leng) {
+			// 交换最后一个
+			return data.value.itemList.length - 1;
+		} else if (posY < data.value.begintop) {
+			return 0;
+		}
+	}
+	
+	// 删除项目
+	function delProject(id) {
+		uni.showModal({
+			title: '',
+			content: '是否删除项目？',
+			showCancel: true,
+			success: async ({ confirm }) => {
+				if (confirm) {
+					await this.$u.api.delProject(id);
+					let flag_index = 0;
+					data.value.itemList.forEach((item, index) => {
+						if (item.id == id) {
+							flag_index = index;
+						}
+					});
+			
+					data.value.itemList.splice(flag_index, 1);
+					setProjects(data.value.itemList);
+				}
+			},
+		});
+	}
+</script>
+
+<style lang="scss" scoped>
+	.cu-item {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		font-size: 14px;
+	}
+
+	.border-100 {
+		width: 92%;
+		height: 4rpx;
+	}
+
+	.border-80 {
+		width: 84%;
+		height: 2px;
+		margin-left: 30px;
+	}
+</style>

components/Projects/ProjectItem.vue

@@ -0,0 +1,115 @@
+<template>
+	<view class="w-full">
+		<!-- 有子项目 -->
+		<view class="flex items-center justify-between p-3">
+			<u-icon @click="openMenu(item)" class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon>
+
+			<view @click="openProject(item)" class="flex-1 px-3">
+				<view class="flex items-center mb-1">
+					<view class="mr-2">{{ item.name }}</view>
+					<!-- 状态 TODO:-->
+					<view class="px-2 text-xs text-green-400 bg-green-100 rounded-full flex-shrink-0">进行中</view>
+				</view>
+
+				<view class="flex items-center text-xs text-gray-400">
+					<view class="pr-2">{{ dayjs(item.startTime).format('MM-DD HH:mm') }}</view>
+					至
+					<view class="pl-2">{{ dayjs(item.endTime).format('MM-DD HH:mm') }}</view>
+				</view>
+			</view>
+
+			<!-- 箭头 -->
+			<view v-if="item.sonProjectList && item.sonProjectList.length">
+				<u-icon 
+					@click="$emit('openSubProject', item.sonProjectList.length, index)" 
+					class="text-gray-400"
+					name="arrow-up" 
+					size="14px" 
+					v-if="item.show"
+				></u-icon>
+				<u-icon 
+					@click="$emit('openSubProject', item.sonProjectList.length, index)" 
+					class="text-gray-400"
+					name="arrow-down" 
+					size="14px" 
+					v-else
+				></u-icon>
+			</view>
+			<u-icon @click="openProject(item)" class="text-gray-400" name="arrow-right" size="14px" v-else></u-icon>
+		</view>
+		
+		<!-- 有子项目 -->
+		<view class="ml-8" v-if="item.show">
+			<view 
+				:id="'cu-' + index + '-' + subIndex" 
+				:key="subIndex" 
+				class="cu-item flex-col"
+				v-for="(subItem, subIndex) in item.sonProjectList"
+			>
+				<!-- <view :key="subItem.id" v-for="subItem in item.sonProjectList"> -->
+				<view class="flex items-center justify-between p-3">
+					<u-icon @click="openMenu(subItem)" class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon>
+
+					<view @click="openProject(subItem)" class="flex-1 px-3">
+						<view class="flex items-center">
+							<view class="mr-2">{{ subItem.name }}</view>
+							<!-- 状态 -->
+							<view 
+								:class="
+									subItem.status === 0
+									? 'text-blue-400 bg-blue-100'
+									: subItem.status === 1
+									? 'text-green-400 bg-green-100'
+									: subItem.status === 2
+									? 'text-red-400 bg-red-100'
+									: 'text-gray-400 bg-gray-100'
+								" 
+								class="px-2 text-xs text-gray-400 bg-gray-100 rounded-full flex-shrink-0"
+							>
+								{{ subItem.status === 0 ? '未开始' : subItem.status === 1 ? '进行中' : subItem.status === 2 ? '暂停' : '已完成' }}
+							</view>
+						</view>
+					</view>
+
+					<!-- 箭头 -->
+					<u-icon @click="openProject(subItem)" class="text-gray-400" name="arrow-right" size="14px"></u-icon>
+				</view>
+			</view>
+		</view>
+		
+		<!-- 项目操作面板 -->
+		<!-- <u-action-sheet :list="menuList" :tips="tips" @click="$emit('chooseAction', $event)" v-model="showMenu"></u-action-sheet> -->
+		<!-- <u-action-sheet :list="menuList" :tips="tips" @click="chooseAction" v-model="showMenu"></u-action-sheet> -->
+	</view>
+</template>
+
+<script setup>
+	import { ref } from 'vue';
+	import dayjs from 'dayjs';
+	
+	defineProps({
+		item: {
+			type: Object,
+			default: () => {},
+		},
+		index: {
+			type: Number,
+			default: 0,
+		},
+		menuList: {
+			type: Array,
+			default: () => [],
+		},
+	});
+</script>
+
+<style lang="scss" scoped>
+.border-100 {
+  height: 4rpx;
+  margin: 0 20rpx;
+}
+.border-80 {
+  height: 4rpx;
+  margin: 0 20rpx 0 90rpx;
+}
+</style>

components/Projects/Projects.vue

@@ -1,8 +1,59 @@
-<template>
+<template>
-</template>
+	<view class="py-3 mt-4 bg-white u-font-15">
-
+		<PrettyExchange @change="change" />
-<script>
+	</view>
-</script>
+</template>
-
+
-<style>
+<script setup>
+	import PrettyExchange from '@/components/PrettyExchange/PrettyExchange.vue';
+	
+	function change(options) {
+		if (options instanceof Array) {
+			let projectIdList = [];
+			let arr = [];
+			options.forEach(item => {
+				projectIdList.push(item.id);
+				arr.push(item.name);
+			});
+			setProjectSort(projectIdList);
+		} else {
+			setProjectRelation(options);
+		}
+	}
+
+	/**
+	 * 设置项目顺序
+	 * @param { Array } projectIdList 项目id
+	 */
+	async function setProjectSort(projectIdList) {
+		try {
+			const params = { projectIdList };
+			await uni.$u.api.setProjectSort(params);
+			uni.$ui.showToast('排序修改成功');
+		} catch (error) {
+			console.log('error: ', error);
+			uni.$ui.showToast(error.msg || '排序修改失败');
+		}
+		this.$emit('getProjects');
+	}
+
+	/**
+	 * 设置项目父子结构
+	 * @param { string } id 当前移动的项目的id
+	 * @param { string } parentId 父项目的id
+	 */
+	async function setProjectRelation(options) {
+		try {
+			const params = options;
+			await uni.$u.api.setProjectRelation(params);
+			uni.$ui.showToast('排序修改成功');
+		} catch (error) {
+			console.error('error: ', error);
+			uni.$ui.showToast(error.msg || '排序修改失败');
+		}
+		this.$emit('getProjects');
+	}
+</script>
+
+<style lang="scss" scoped>
 </style>

main.js

@@ -32,6 +32,13 @@ export function createApp() {
 	app.config.globalProperties.$time = time;
 	app.config.globalProperties.$ui = ui;
 	app.config.globalProperties.$upload = upload;
+	
+	uni.$cache = cache;
+	uni.$catchReq = cacheAndRequest;
+	uni.$storage = storage;
+	uni.$time = time;
+	uni.$ui = ui;
+	uni.$upload = upload;
 
 	return {
 		app

pages/index/index - 副本.vue

@@ -0,0 +1,75 @@
+<template>
+	<view class="flex flex-col h-full bg-gray-50" @click="openAuth">
+		<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 { ref, computed, watch } from 'vue';
+	import store from '@/store/index.js';
+	import dayjs from 'dayjs';
+	import Calendar from '@/components/Calendar/Calendar.vue';
+	import Upload from '@/components/Upload/Upload.vue';
+	import Projects from '@/components/Projects/Projects.vue';
+
+	const token = computed(() => store.state.user.token);
+	
+	watch(token, (value) => {
+		if (!value) return;
+		getProjects();
+	})
+	
+	// 获取项目列表
+	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);
+			}
+		});
+	}
+</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>

pages/index/index.vue

@@ -16,20 +16,33 @@
 </template>
 
 <script setup>
-	import { ref, onMounted } from 'vue';
+	import { ref, computed, watch } from 'vue';
+	import store from '@/store/index.js';
+	import dayjs from 'dayjs';
 	import Calendar from '@/components/Calendar/Calendar.vue';
 	import Upload from '@/components/Upload/Upload.vue';
 	import Projects from '@/components/Projects/Projects.vue';
 
-	let height = ref(null);
+	const token = computed(() => store.state.user.token);
-
+	
-	onMounted(() => {
+	watch(token, (value) => {
-		const system = uni.getSystemInfoSync();
+		if (!value) return;
-		height.value = system.windowHeight + 'px';
+		getProjects();
-	});
+	})
-
+	
-	function getTasks() {
+	// 获取项目列表
-
+	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);
+			}
+		});
 	}
 </script>
 

store/index.js

@@ -1,6 +1,7 @@
 import { createStore } from 'vuex';
 import user from './user/index.js';
 import socket from './socket/index.js';
+import project from './project/index.js';
 
 // 不属于具体模块的 应用级的 store内容
 const state = {
@@ -41,5 +42,5 @@ export default createStore({
 	state,
 	getters,
 	mutations,
-	modules: {user, socket}
+	modules: {user, socket, project}
 });

store/project/actions.js

@@ -0,0 +1,3 @@
+const actions = {};
+
+export default actions;

store/project/getters.js

@@ -0,0 +1,11 @@
+const getters = {
+  /**
+   * 当前项目的id
+   * @param {object} project
+   */
+  projectId({ project }) {
+    return project.id;
+  },
+};
+
+export default getters;

store/project/index.js

@@ -0,0 +1,12 @@
+import state from './state';
+import getters from './getters';
+import mutations from './mutations';
+import actions from './actions';
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions,
+};

store/project/mutations.js

@@ -0,0 +1,62 @@
+const mutations = {
+  /**
+   * 设置state projects书籍
+   * @param {object} state
+   * @param {array} projects 项目列表
+   */
+  setProjects(state, projects) {
+    if (!projects || !projects.length) {
+      state.projects = [];
+    } else {
+      state.projects = [...projects];
+    }
+  },
+
+  /**
+   * 设置子项目收缩展开
+   * @param { object } state
+   * @param { object } options options:{ index,show }
+   */
+  setProjectItemShow(state, options) {
+    if (options.show) {
+      for (var i = 0; i < state.projects.length; i++) {
+        if (i === options.index) {
+          state.projects[i].show = true;
+        } else {
+          state.projects[i].show = false;
+        }
+      }
+    } else {
+      state.projects[options.index].show = false;
+    }
+  },
+
+  /**
+   * 设置当前项目信息
+   * @param { object } state
+   * @param { object } data
+   */
+  setProject(state, data) {
+    state.project = data || { name: '加载中...' };
+  },
+
+  /**
+   * 设置当前项目名称
+   * @param { object } state
+   * @param { string } data
+   */
+  setProjectName(state, data) {
+    state.project.name = data;
+  },
+
+  /**
+   * 设置小红点
+   * @param { object } state
+   * @param { string } data
+   */
+  setDotList(state, data) {
+    state.dotList = data;
+  },
+};
+
+export default mutations;

store/project/state.js

@@ -0,0 +1,8 @@
+/* eslint-disable */
+const state = {
+  project: { name: '加载中...' }, // 当前项目信息
+  projects: [], // 项目列表
+  dotList: [], // 小红点
+};
+
+export default state;

utils/cache.js

@@ -21,7 +21,7 @@ export default {
 	 */
 	async getProjectsByDay(startTime, endTime) {
 		try {
-			const data = await uni.$t.storage.getStorage('projects');
+			const data = await uni.$storage.getStorage('projects');
 			return filter.projects(JSON.parse(data), startTime, endTime);
 		} catch (error) {
 			return [];
@@ -35,7 +35,7 @@ export default {
 	putProjects(data) {
 		try {
 			if (!data || !data.length) return; // 服务端没数据不做操作
-			let value = uni.$t.storage.getStorageSync('projects');
+			let value = uni.$storage.getStorageSync('projects');
 			let locals = value ? JSON.parse(value) : [];
 			if (!locals || !locals.length) {
 				// 本地没数据
@@ -53,10 +53,10 @@ export default {
 					}
 				});
 			}
-			uni.$t.storage.setStorage('projects', locals);
+			uni.$storage.setStorage('projects', locals);
 		} catch (error) {
 			console.error('error: ', error);
-			uni.$t.storage.setStorage('projects', []);
+			uni.$storage.setStorage('projects', []);
 		}
 	},
 };

utils/cacheAndRequest.js

@@ -7,7 +7,7 @@ import store from '@/store/index';
  */
 export const waitTokenRequest = requestFn => {
 	if (!requestFn || typeof requestFn !== 'function') throw new Error(`requestFn must be a function`);
-	if (uni.$t.storage.getStorageSync(uni.$t.app.tokenKey)) {
+	if (uni.$storage.getStorageSync('anyringToken')) {
 		requestFn();
 	} else {
 		setTimeout(() => waitTokenRequest(requestFn), 10);
@@ -24,7 +24,7 @@ export default {
 		let remote = false;
 		if (store.getters.useStorage) {
 			// 有缓存 且 服务端数据未返回 就先返回缓存
-			uni.$t.cache.getProjectsByDay(startTime, endTime)
+			uni.$cache.getProjectsByDay(startTime, endTime)
 				.then(data => {
 					!remote && fn(null, data);
 				})
@@ -37,7 +37,7 @@ export default {
 					remote = true;
 					fn(null, data);
 					// 存api到cache里
-					uni.$t.cache.putProjects(data);
+					uni.$cache.putProjects(data);
 				})
 				.catch(err => fn(err));
 		});
@@ -50,7 +50,7 @@ export default {
 	findShowRole(params, fn) {
 		let remote = false;
 		// 有缓存 且 服务端数据未返回 就先返回缓存
-		uni.$t.cache.getShowRole(params.projectId)
+		uni.$cache.getShowRole(params.projectId)
 			.then(data => {
 				!remote && fn(null, data);
 			})
@@ -63,7 +63,7 @@ export default {
 					remote = true;
 					fn(null, data);
 					// 存api到cache里
-					uni.$t.cache.putShowRole(params.projectId, data);
+					uni.$cache.putShowRole(params.projectId, data);
 				})
 				.catch(err => fn(err));
 		});
@@ -76,7 +76,7 @@ export default {
 	getRegularTask(params, fn) {
 		let remote = false;
 		// 有缓存 且 服务端数据未返回 就先返回缓存
-		uni.$t.cache.getStorageRegularTask(params)
+		uni.$cache.getStorageRegularTask(params)
 			.then(data => {
 				console.log('cache data: ', data);
 				!remote && fn(null, data);
@@ -92,7 +92,7 @@ export default {
 
 					fn(null, uni.$u.deepClone(data));
 					// 存api到cache里
-					uni.$t.cache.putStorageRegularTask(params, data);
+					uni.$cache.putStorageRegularTask(params, data);
 				})
 				.catch(err => fn(err));
 		});
@@ -105,7 +105,7 @@ export default {
 	getPermanent(params, fn) {
 		let remote = false;
 		// 有缓存 且 服务端数据未返回 就先返回缓存
-		uni.$t.cache.getStoragePermanent(params)
+		uni.$cache.getStoragePermanent(params)
 			.then(data => {
 				!remote && fn(null, data);
 			})
@@ -118,7 +118,7 @@ export default {
 					remote = true;
 					fn(null, data);
 					// 存api到cache里
-					uni.$t.cache.putStoragePermanent(params, data);
+					uni.$cache.putStoragePermanent(params, data);
 				})
 				.catch(err => fn(err));
 		});
@@ -131,7 +131,7 @@ export default {
 	getGlobal(params, fn) {
 		let remote = false;
 		// 有缓存 且 服务端数据未返回 就先返回缓存
-		uni.$t.cache.getDailyTask(params)
+		uni.$cache.getDailyTask(params)
 			.then(data => {
 				!remote && fn(null, data);
 			})
@@ -144,7 +144,7 @@ export default {
 					remote = true;
 					fn(null, data);
 					// 存api到cache里
-					uni.$t.cache.putDailyTask(params, data);
+					uni.$cache.putDailyTask(params, data);
 				})
 				.catch(err => fn(err));
 		});
@@ -157,7 +157,7 @@ export default {
 	getOtherPlugin(params, fn) {
 		let remote = false;
 		// 有缓存 且 服务端数据未返回 就先返回缓存
-		uni.$t.cache.getPlugin(params.pluginId)
+		uni.$cache.getPlugin(params.pluginId)
 			.then(data => {
 				!remote && fn(null, data);
 			})
@@ -170,7 +170,7 @@ export default {
 					remote = true;
 					fn(null, data);
 					// 存api到cache里
-					uni.$t.cache.putPlugin(params.pluginId, data);
+					uni.$cache.putPlugin(params.pluginId, data);
 				})
 				.catch(err => fn(err));
 		});

utils/storage.js

@@ -39,7 +39,7 @@ export default {
 	 * @param {*} data
 	 */
 	setStorage(key, data) {
-		uni.$t.storage.checkCapacity();
+		uni.$storage.checkCapacity();
 		return new Promise((resolve, reject) => {
 			const value = typeof data === 'string' ? data : JSON.stringify(data);
 			uni.setStorage({
@@ -105,7 +105,7 @@ export default {
 		const capacity = JSON.stringify(localStorage).length;
 		let max = 1024 * 1024 * 4;
 		if (capacity >= max) {
-			uni.$t.storage.clearStorage();
+			uni.$storage.clearStorage();
 		}
 		/* #endif */
 	},

utils/upload.js

@@ -58,7 +58,7 @@ export default {
 		clearTimeout(timer);
 		let timer = null;
 		return new Promise((resolve, reject) => {
-			const token = uni.$t.storage.getStorageSync(uni.$t.app.tokenKey);
+			const token = uni.$storage.getStorageSync('anyringToken');
 			if (!token) {
 				return reject('用户未登录，请登录后重试');
 			}
@@ -67,7 +67,7 @@ export default {
 					console.log('filePath: ', filePath);
 					if (!timer) {
 						timer = setTimeout(() => {
-							uni.$t.ui.showLoading('正在上传...');
+							uni.$ui.showLoading('正在上传...');
 							timer = null;
 						}, 800);
 					}