OfficeApp/pages/oaHome/oaHome.vue

<template>



	<view class="box">

		<view class="" style="background-color: #2B63E3;height: var(--status-bar-height);" />
		<view class="head">


			<view class="head-content ">
				<view class="">
					工作证：{{ myOaInfo.nickname }}
				</view>
				<view class="avatar">
					<u--image :showLoading="true" width="134rpx" height="134rpx"
						:src="myOaInfo.avatar || '../../static/img/public/avatar.png'" shape="circle"></u--image>
				</view>
				<view class="">
					身份：{{ myOaInfo.user_role_name}}
				</view>

			</view>



		</view>

		<view class="deposit">


			<view class="deposit-l">

				<u--image :showLoading="true" width="81rpx" height="78rpx" :src="'../../static/newWork/index/YJ.png'"
					shape="circle"></u--image>
				<view class="">
					<view class="">
						押金
					</view>
					<view class="deposit-value">
						1000
					</view>
				</view>

			</view>


			<view class="deposit-l">

				<u--image :showLoading="true" width="81rpx" height="78rpx" :src="'../../static/newWork/index/GLHS.png'"
					shape="circle"></u--image>
				<view class="">
					<view class="">
						押金
					</view>
					<view class="deposit-value">
						1000
					</view>
				</view>
			</view>


		</view>
		<!--追加功能 -->
		<view class="">
			<u-empty icon="/static/newWork/index/empty.png" iconSize='200' width='300' height="300" marginTop='150'
				text="等待任务下发"></u-empty>

		</view>


		<!-- 旧版供销 -->
		<view class="oa_home" style="oaColor" v-if="false">

			<view class="home_header" :class="!ApproveList.length > 0 ? 'home_header_no_data' : ''">
				<view style="
		         position: absolute;
		         bottom: 0;
		         left: 0;
		         overflow: hidden;
		         border-radius: 0 0 30rpx 30rpx;
		       ">
					<hx-lottie :options="options" ref="lottie" style="
		           width: 100vw;
		           height: 440rpx;
		           transform: scale(1.2);
		           background-color: #0122c7;
		         " />
				</view>
				<!-- #ifdef APP-PLUS||H5 -->
				<view style="height: var(--status-bar-height)"></view>

				<view style="height: 30rpx"></view>
				<!-- <view v-if="uniMP" style="height: 44px;"></view> -->
				<!-- #endif -->
				<view class="my_info">

					<view class="head_img">
						<view class="img_box">
							<u--image :showLoading="true" width="131.43rpx" height="131.43rpx" class="img_box_img"
								:src="myOaInfo.avatar || '../../static/img/public/avatar.png'"
								shape="circle"></u--image>
						</view>

						<text class="head_text">工作证: {{ myOaInfo.nickname }}</text>
						<text class="head_text" style="flex-shrink: 0">身份: {{ myOaInfo.user_role_name}}</text>
					</view>
				</view>

				<!-- 占位 -->
				<view style="height: 50rpx"></view>

				<view class="" style="background-color: white;position: relative;padding: 20rpx;border-radius: 20rpx;">

					<view class="" style="display: flex;justify-content: space-around;">
						<view class="" style="display: flex;flex-direction: column;align-items: center;">
							<view style="color: #FF7C32;">押金</view>
							<view style="margin-top: 30rpx;font-size: 40rpx;">{{myOaInfo.deposit}} </view>
						</view>
						<view class="" style="display: flex;flex-direction: column;align-items: center;">
							<view style="color: #FF7C32;">管理户数</view>
							<view style="margin-top: 30rpx;font-size: 40rpx;">{{myOaInfo.user_information_count}} <text
									style="font-size: 30rpx;margin-left: 5rpx;">户</text> </view>
						</view>
					</view>

				</view>

			</view>
			<u-empty text="等待任务下发">
			</u-empty>

			<!-- 	<view class="fast_track">
					<block v-for="(item, index) in oaHomeData" :key="item.id">
						<view class="track_item" @click="navTwo(item.paths, index)">
							<image :src="item.icon" mode="aspectFit" style="width: 77rpx;height: 77rpx;">
							</image>
							<view class="title">{{ item.name }}</view>
						</view>
					</block>
				</view>
		-->



		</view>



	</view>






</template>

<script>
	import {
		getList
	} from "@/api/logistics.js";
	import {
		Toast
	} from "@/libs/uniApi.js";
	import {
		oaHomeData
	} from "@/static/server/server.js";
	import {
		noticeList
	} from "@/api/notice.js";
	import {
		getAreaManagerApi
	} from "@/api/bussness.js"
	// import tabbar from '../components/tabbar'
	import {
		getIndexListAPI,
		getTaskListAPI,
		getMyTaskListAPI,
		getApproveListAPI,
		getUserIndexAPI,
	} from "@/api/oaApi.js";
	import {
		mapState
	} from 'vuex';
	import bj from "@/static/animation/home.json"
	import {
		userInfo
	} from "@/api/oaUser.js"
	//#ifdef APP-PLUS
	var jpushModule = uni.requireNativePlugin("JG-JPush");
	// #endif
	export default {

		data() {
			return {

				brange: 0,
				options: {
					data: '',
				},
				status: "loadmore",
				page_num: 1,
				flag: false,
				uniMP: false,
				managerInfo: {},
				id: "",
				is_captain: 0,
				notArr: [],
				orderList: [],
				oaHomeData: [],
				src: "https://cdn.uviewui.com/uview/album/1.jpg",
				assessData: [{
						num: "0",
						name: "任务",
					},
					{
						num: "0",
						name: "已完成",
					},
					{
						num: "0",
						name: "未完成",
					},
					{
						num: "0%",
						name: "完成率",
					},
				],
				project: {},
				task: {},
				page: 1,
				myTaskList: [],
				flowState: "#47B347", // 任务状态
				priority: "", // 任务紧急度
				myOaInfo: {
					avatar: "",
					nickname: "",
					mobile: "",
					did_name: "",
					label_name: "",
				},
				ApproveList: [],
				showOaHomeData: false, //更新首页计算的值
			};
		},
		async onLoad() {
			// console.log('asdashg')
			if (uni.getStorageSync('USER_INFO')) {
				let userData = JSON.parse(uni.getStorageSync('USER_INFO'))

				this.initUserInfo(userData);
				// console.log(545)
			}
			await this.$onLaunched;
			this.is_captain = JSON.parse(uni.getStorageSync("USER_INFO") || '{}')?.is_captain
			this.options.data = bj;






		},




		async onShow() {





			await this.$onLaunched;
			if (uni.getStorageSync('uniMP')) this.uniMP = true;
			userInfo().then(({
				data
			}) => {
				this.$store.commit('setUserInfo', data);
				this.initUserInfo(data);
				this.$store.dispatch('initConfig');
				// console.log('更新信息', data);
			});
			this.initUserInfo();


			// console.log(this.oaHomeData, this.oaHomeData.length==0);
			if (this.oaHomeData.length == 0) {
				this.$nextTick(() => {
					this.$store.dispatch('initConfig');
				})
			}
		},
		computed: {
			// oaHomeData() {
			//   const route = '/pages/oaHome/oaHome';
			//   let arr = [];
			//   this.$store.state.config?.config?.menu?.forEach((item) => {
			//     if (item.paths.includes(route)) {
			//       arr = item.children;
			//     }
			//   })
			//   if (arr.length >= 8) {
			//     arr = arr.slice(0, 7);
			//     let obj = this.$store.state.config?.config?.menu?.find(item => item.paths.includes(
			//       '/pages/moreFun/moreFun'));
			//     arr.push(obj);
			//   }
			//   return arr;
			// },
		},
		watch: {
			'$store.state.app.token': {
				handler: function(n, o) {
					userInfo().then(({
						data
					}) => {
						// console.log(data);
						this.$store.commit('setUserInfo', data);
						this.initUserInfo(data);
						this.$store.dispatch('initConfig');
					});
				}
			},
			'$store.state.config.config.menu': {
				immediate: true,
				deep: true,
				handler: function(n, o) {
					const route = '/pages/oaHome/oaHome';
					let arr = [];
					n.forEach((item) => {

						if (item.paths.includes(route)) {
							arr = item.children;
						}
					})
					if (arr.length >= 8) {
						arr = arr.slice(0, 7);
						let obj = n.find(item => item.paths.includes(
							'/pages/moreFun/moreFun'));
						arr.push(obj);
					}
					this.oaHomeData = arr;
				}
			}
		},
		methods: {



			leftClick(e) {
				console.log("发送给宿主")
				uni.sendHostEvent('closeApp', e, (ret) => {
					//发送消息成功回调
					console.log('关闭应用' + JSON.stringify(ret));
				});
			},



			initUserInfo(data = null) {
				if (data) return this.myOaInfo = data;
				this.$store.state.app.userInfo ?
					(this.myOaInfo = this.$store.state.app.userInfo) :
					(this.myOaInfo.avatar = "");
			},






			navTo(url) {
				if (url) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					uni.navigateTo({
						url: url,
						success() {
							uni.hideLoading()
						},
						fail() {
							uni.switchTab({
								url: url,
								success() {
									uni.hideLoading()
								},
								fail() {
									uni.hideLoading()
								}
							});
						},
					})
				} else Toast('暂未开放')
			},
			navTwo(url, key) {
				// let role_id = this.$store.state.app?.userInfo?.admin?.role_id || null;
				// var arr = [3, 6];

				// if (role_id && role_id[0] == 9) {
				//   if (arr.indexOf(key) == -1) {
				//     Toast("请先成立公司后开放");
				//     return false;
				//   }
				// }
				this.navTo(url);
			},
			// 点击公告
			clickNotice(e) {
				uni.navigateTo({
					url: `/pages/oaNews/oaNews?id=${e}`,
				});
			},



			async getUserIndex() {
				const res = await getUserIndexAPI();
				this.myOaInfo = res;
			},
		},
		async onPullDownRefresh() {


			await this.$store.dispatch('initConfig');

			uni.stopPullDownRefresh();
		},
	};
</script>

<style lang="scss">
	.box {
		min-height: 100vh;
		background-color: #F9FBFF;
	}

	.head {
		width: 750rpx;
		background-image: url('/static/newWork/index/SYBG.png');
		background-size: 100% 100%;
		height: 309.78rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #2B63E2;
		position: relative;

		.head-content {
			// box-shadow: 0.5rpx 0.5rpx 100rpx 0.5rpx rgba(0, 0, 0, 0.1);
			width: 690rpx;
			margin: 0 auto;
			position: absolute;
			bottom: -10rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			box-sizing: border-box;
			align-items: center;
			height: 137rpx;
			background-image: linear-gradient(to bottom, #D8EAFF 30%, #FFFFFF 100%);
			border-radius: 64rpx 64rpx 64rpx 64rpx;

			.avatar {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: -50rpx;
			}
		}


	}

	.deposit {
		margin-top: 30rpx;
		display: flex;
		width: 750rpx;
		justify-content: space-between;

		box-sizing: border-box;
		padding: 0 20rpx;

		.deposit-l {
			width: 300rpx;
			height: 120rpx;
			background-color: white;
			margin: 0 20rpx;
			border-radius: 10rpx;
			display: flex;
			font-size: 30rpx;
			box-shadow: 0.5rpx 0.5rpx 200rpx 0.5rpx rgba(0, 0, 0, 0.1);

			.deposit-value {
				color: #336AE7;
			}
		}

	}

	// .oa_home {
	// 	padding-bottom: 100rpx;
	// }

	// .header_bg {
	// 	position: absolute;
	// 	width: 100%;
	// }

	// .home_header {
	// 	position: relative;
	// 	padding: 28rpx;
	// 	width: 100%;
	// 	margin-bottom: 110rpx;
	// 	background-color: $theme-oa-color;
	// 	border-radius: 0 0 30rpx 30rpx;

	// 	.head_img {
	// 		position: relative;
	// 		background-color: #ff7c32;
	// 		width: 100%;
	// 		height: 105.14rpx;
	// 		line-height: 105.14rpx;
	// 		border-radius: 35.05rpx 35.05rpx 35.05rpx 35.05rpx;
	// 		display: flex;
	// 		justify-content: space-between;
	// 		padding-right: 28rpx;
	// 		color: white;
	// 		font-size: 34rpx;
	// 		padding-left: 150rpx;
	// 		box-sizing: border-box;

	// 		.img_box {
	// 			position: absolute;

	// 			left: -10rpx;
	// 			top: -15rpx;
	// 			width: 140rpx;
	// 			height: 140rpx;
	// 			background-color: white;
	// 			border-radius: 140rpx;

	// 			.img_box_img {
	// 				position: absolute;
	// 				top: 50%;
	// 				left: 50%;
	// 				transform: translate(-50%, -50%);
	// 			}
	// 		}

	// 		.head_text {
	// 			font-size: 33rpx;
	// 			text-overflow: ellipsis;
	// 			white-space: nowrap;
	// 			overflow: hidden;
	// 		}

	// 		// font-we
	// 	}

	// 	.my_info {
	// 		.mesg_box {
	// 			color: #fff;
	// 			margin-left: 31.58rpx;

	// 			.nickname {
	// 				font-size: 32rpx;
	// 				font-weight: 500;
	// 				margin-right: 30rpx;
	// 			}

	// 			.duty {
	// 				margin-top: 10.53rpx;
	// 			}
	// 		}
	// 	}

	// 	.task_panel {
	// 		color: #fff;
	// 		display: flex;
	// 		justify-content: space-between;
	// 		flex-wrap: wrap;
	// 		align-content: space-between;
	// 		text-align: center;
	// 		padding-bottom: 110rpx;

	// 		.task_item {
	// 			margin-top: 42.11rpx;

	// 			.plan {
	// 				width: 173.68rpx;
	// 				font-size: 38.6rpx;
	// 				margin-bottom: 21.05rpx;
	// 			}
	// 		}
	// 	}

	// 	.backlog {
	// 		position: absolute;
	// 		left: 50%;
	// 		bottom: -101.75rpx;
	// 		transform: translate(-50%);
	// 		width: 694.74rpx;
	// 		background: #ffffff;
	// 		border-radius: 12px;
	// 		padding: 28.07rpx;
	// 		display: flex;
	// 		flex-direction: column;
	// 		justify-content: space-between;
	// 		font-size: 25rpx;
	// 		font-weight: 400;

	// 		.title {
	// 			font-size: 32rpx;
	// 			font-weight: 500;
	// 		}

	// 		&_item {
	// 			margin-top: 19.3rpx;
	// 			color: #666666;

	// 			.text {
	// 				font-size: 28.04rpx;
	// 				white-space: nowrap;
	// 				/* 禁止换行 */
	// 				overflow: hidden;
	// 				/* 溢出隐藏 */
	// 				text-overflow: ellipsis;
	// 				/* 使用省略号代表被截断的文本 */
	// 				width: 580rpx;

	// 				/* 设置元素宽度，根据需要进行调整 */
	// 				.text_time {
	// 					display: inline-block;
	// 					background-color: #ff7c32;
	// 					color: white;
	// 					padding: 5rpx 10rpx;
	// 					margin-right: 10rpx;
	// 					border-radius: 15rpx;
	// 				}

	// 				// &::before {
	// 				// 	content: "公告";
	// 				// 	display: inline-block;
	// 				// 	color: #ff8c1a;
	// 				// 	padding: 2px 8px;
	// 				// 	border-radius: 4px;
	// 				// 	border: 1px solid #ff8c1a;
	// 				// 	margin-right: 14.04rpx;
	// 				// }
	// 			}
	// 		}

	// 		&_no {
	// 			margin-top: 19.3rpx;
	// 			color: #666666;

	// 			.text {
	// 				font-size: 28.04rpx;
	// 				white-space: nowrap;
	// 				/* 禁止换行 */
	// 				overflow: hidden;
	// 				/* 溢出隐藏 */
	// 				text-overflow: ellipsis;
	// 				/* 使用省略号代表被截断的文本 */
	// 				width: 580rpx;
	// 				/* 设置元素宽度，根据需要进行调整 */

	// 				&::before {
	// 					content: none;
	// 				}
	// 			}
	// 		}
	// 	}


	// }

	// .home_header_no_data {
	// 	margin-bottom: 93.33rpx;
	// }

	// .fast_track {
	// 	width: 694rpx;
	// 	// height: 331rpx;
	// 	display: flex;
	// 	flex-wrap: wrap;
	// 	justify-content: left;
	// 	align-content: space-between;
	// 	margin: 0 auto;
	// 	padding: 15rpx 38.6rpx;
	// 	background-color: #fff;
	// 	border-radius: 12px;

	// 	.track_item {
	// 		width: 154.39rpx;
	// 		font-size: 24.56rpx;
	// 		margin: 25rpx 0;
	// 		display: flex;
	// 		flex-direction: column;
	// 		align-items: center;

	// 		.title {
	// 			margin-top: 14.04rpx;
	// 		}
	// 	}
	// }

	// .my_task {
	// 	width: 694.74rpx;
	// 	margin: 0 auto;
	// 	// margin-top: 31.58rpx;
	// 	// background-color: #fff;
	// 	border-radius: 12px;
	// 	// padding: 28.07rpx;

	// 	.no_task {
	// 		width: 694rpx;
	// 		height: 140rpx;
	// 		padding: 28rpx;
	// 		background: #ffffff;
	// 		border-radius: 21rpx 21rpx 21rpx 21rpx;
	// 		display: flex;
	// 		flex-direction: column;
	// 		justify-content: space-evenly;

	// 		.title {
	// 			font-size: 28rpx;
	// 			font-weight: 500;
	// 			color: #000000cc;
	// 			line-height: 35rpx;
	// 		}

	// 		.tips {
	// 			font-size: 25rpx;
	// 			font-weight: 400;
	// 			color: #333333ff;
	// 			line-height: 35rpx;
	// 		}
	// 	}

	// 	.task_title {
	// 		font-size: 25rpx;
	// 		font-weight: 400;
	// 		padding: 28rpx;

	// 		.title {
	// 			font-size: 32rpx;
	// 			font-weight: 500;
	// 		}
	// 	}

	// 	.task_list {
	// 		height: 196.49rpx;
	// 		border-bottom: 1px solid #cccccc;
	// 		padding: 21.05rpx 0;
	// 		display: flex;
	// 		flex-direction: column;
	// 		justify-content: space-between;

	// 		.title {
	// 			.tag {
	// 				color: #f24848;
	// 				font-size: 24.56rpx;
	// 				padding: 0 7.02rpx;
	// 				margin-right: 14.04rpx;
	// 				background: #ffe4e4;
	// 				border-radius: 4px;
	// 			}

	// 			.tag1 {
	// 				color: #3274f9;
	// 				font-size: 24.56rpx;
	// 				padding: 0 7.02rpx;
	// 				margin-right: 14.04rpx;
	// 				background: #e4edff;
	// 				border-radius: 4px;
	// 			}

	// 			.text {
	// 				font-size: 28.07rpx;
	// 				width: 403.51rpx;
	// 				white-space: nowrap;
	// 				overflow: hidden;
	// 				text-overflow: ellipsis;
	// 			}

	// 			.if_take {
	// 				font-size: 28.07rpx;
	// 				text-align: center;
	// 				line-height: 49.12rpx;
	// 				width: 115.79rpx;
	// 				height: 49.12rpx;
	// 				border-radius: 100px;
	// 			}

	// 			.take1 {
	// 				color: #47b347;
	// 				background: #dffcdf;
	// 			}

	// 			.take2 {
	// 				color: #3274f9;
	// 				background: #e4edff;
	// 			}

	// 			.take3 {
	// 				color: #999999;
	// 				background: #f5f5f5;
	// 			}
	// 		}

	// 		.describe {
	// 			font-size: 24.56rpx;
	// 		}

	// 		.task_deta {
	// 			color: #999;
	// 			font-size: 24.56rpx;
	// 		}
	// 	}
	// }

	// .no_login {
	// 	position: fixed;
	// 	left: 0;
	// 	bottom: 0;
	// 	width: 100vw;
	// 	height: 112rpx;
	// 	/* #ifdef H5 */
	// 	height: 212rpx;
	// 	/* #endif */
	// 	background: rgba(#333333, 0.4);
	// 	border-radius: 14rpx 14rpx 0rpx 0rpx;
	// 	padding: 28rpx 28rpx;

	// 	.view {
	// 		width: 100%;
	// 		display: flex;
	// 		justify-content: space-between;
	// 		align-items: center;

	// 		.text {
	// 			font-size: 28rpx;
	// 			font-weight: 500;
	// 			color: #ffffff;
	// 		}

	// 		.btn {
	// 			width: 158rpx;
	// 			height: 60rpx;
	// 			background: #3274f9;
	// 			border-radius: 30rpx 30rpx 30rpx 30rpx;
	// 			font-size: 28rpx;
	// 			font-weight: 500;
	// 			color: #ffffff;
	// 			display: flex;
	// 			justify-content: center;
	// 			align-items: center;
	// 		}
	// 	}
	// }

	// .chat {
	// 	margin-top: 1000px;
	// 	// margin-top: 2000rpx;
	// 	width: 694.74rpx;
	// 	margin: 0 auto;
	// 	background-color: white;
	// 	border-radius: 12px;
	// 	padding: 20rpx;
	// 	// padding-top: 10rpx;
	// 	padding-right: 24rpx;
	// 	display: flex;
	// 	justify-content: space-between;
	// 	align-items: center;

	// 	.chat-l {
	// 		display: flex;
	// 		align-items: center;
	// 	}
	// }

	// .brange {
	// 	color: white;
	// 	background-color: red;
	// 	width: 40rpx;
	// 	height: 40rpx;
	// 	border-radius: 40rpx;
	// 	font-size: 12px;
	// 	text-align: center;
	// 	lighting-color: 40rpx;
	// }
</style>