zhxg_xsbdV1.0/pages/index/index.vue

<template>
	<view class="index">

		<view v-show="hasNoFloat" class="continueFloat">
			<view class="jiantou" @click="toFloat">→</view>
			<text style="font-size: 0.8rem;color: darkslategrey;text-align: center;">继续流程</text>
		</view>

		<view class="bg"></view>
		<view class="content">
			<!-- 头部信息，头像及用户名等 -->
			<view class="head">
				<view class="avatar">
					<u-avatar :text="stu_name.substring(0,1)" fontSize="18" randomBgColor></u-avatar>
					<view class="msg">
						<text>你好，{{stu_name}}</text>
						<text>{{now_time}}</text>
					</view>
					<text class="state">{{reg_status}}</text>
				</view>
				<image src="../../static/icon/bell.png" mode="aspectFill"></image>
			</view>
			<!-- 公告通知 -->
			<view class="announcement">
				<view class="title">
					<text>报到</text>
					<text>流程</text>
				</view>
				<text class="notify">操作说明</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<!-- 信息填写 -->
			<view class="msg-fill">
				<image src="https://wap.wzzyhp.com/profile/uniapp/static/msg.png" mode="scaleToFill"></image>
				<!-- <button @click="toFilling">快速填写</button> -->
			</view>


			<!-- 金刚区 功能-->
			<view class="fn" @click="toStep">
				<view class="fn-item" v-for="(i,index) in fnList" :key="index">
					<view class="fnBOX">
						<image :src="i.icon" mode="widthFix"></image>
						<!-- <text>{{i.name}}</text> -->

					</view>
				</view>
			</view>
			<view class="step">
				<u-steps dot :current="nowStep">
					<u-steps-item v-for="(v,i) in task_list" :key="i" :title="v.taskName"
						:desc="v.status == '0' ? '未完成' : '已完成'">
					</u-steps-item>
				</u-steps>
			</view>
			<!-- 公告列表 -->
			<view class="announcement-list">
				<view class="tab">
					<i></i>
					<!-- 		<text style="color: #409EFF;">新闻</text> -->
					<text>新闻公告</text>
				</view>
				<view class="announcement-item" v-for="(v,i) in notify_list" :key="i" @click="toNotify(v)">
					<image :src="getImgSrc(v.front)" mode="aspectFit"></image>
					<view class="texts">
						<text class="i-title">{{v.title}}</text>
						<text class="i-content three-lines" v-html="getHtmlStr(v.content)"></text>
						<text class="date">{{v.createTime}}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import $ from "@/static/js/jquery-3.6.4.min.js";
	import {getUserInfo} from "@/api/validApi.js";
	import {listNotify} from "@/api/notifyApi.js";
	import {getImgSrc} from "@/api/helpFunc.js";
	import {BASE_URL} from "@/config/baseUrl.js";
	import {isEmpty,getRegStatus} from "@/api/helpFunc.js";
	import {listOwnTodo} from "@/api/toApi.js";
	import moment from "moment";
	export default {
		data() {
			return {
				hasNoFloat: false,
				task_list: [],
				nowStep:0,

				stu_name: "新同学",
				notify_list: [],
				getImgSrc: getImgSrc,
				now_time: "",
				basrUrl: BASE_URL,
				reg_status: "未激活",
				// 金刚区图标
				fnList: [{
						name: "个人资料",
						icon: "https://wap.wzzyhp.com/profile/uniapp/static/fn-icon/presonalInfo.png",
						// navigator: "/pages/Userinformation/Userinformation"
					},
					{
						name: "信息采集",
						icon: "https://wap.wzzyhp.com/profile/uniapp/static/fn-icon/msg.png",
						// navigator: "/pages/gather/gather"
					},
					// {
					// 	name: "宿舍选择",
					// 	icon: "https://wap.wzzyhp.com/profile/uniapp/static/fn-icon/dormitoryOptions.png",
					// 	navigator: "/pages/dormitoryOptions/dormitoryOptions"
					// },
					{
						name: "宿舍缴费",
						icon: "https://wap.wzzyhp.com/profile/uniapp/static/fn-icon/payTheFees.png",
						// navigator: "/pages/pay/index"
					},
					// {
					// 	name: "报到信息",
					// 	icon: "https://wap.wzzyhp.com/profile/uniapp/static/fn-icon/checkInfo.png",
					// 	// navigator: "/pages/filling/filling"
					// },


				],
				// 公告列表图片
				announcementList: [
					"https://wap.wzzyhp.com/profile/uniapp/static/announcement/Rectangle 25.png",
					"https://wap.wzzyhp.com/profile/uniapp/static/announcement/Rectangle 25-1.png",
					"https://wap.wzzyhp.com/profile/uniapp/static/announcement/Rectangle 25-2.png"
				]
			}
		},
		onShow() {
			this.getOwnInfo();
			this.getNotify();
			this.getDate();
			this.boolHasFloat();
		},
		mounted() {
			var idom = document.getElementsByClassName("continueFloat");
			var contW = $(idom).width();
			var contH = $(idom).height();
			var startX, startY, sX, sY, moveX, moveY,leftX,rightX,topY,bottomY;
			var winW = $(window).width();
			var winH = $(window).height();
			$(idom).on({ //绑定事件
				touchstart: function(e) {
					startX = e.originalEvent.targetTouches[0].pageX; //获取点击点的X坐标    
					startY = e.originalEvent.targetTouches[0].pageY; //获取点击点的Y坐标
					sX = $(idom).offset().left; //相对于当前窗口X轴的偏移量
					sY = $(idom).offset().top; //相对于当前窗口Y轴的偏移量
					leftX = startX - sX; //鼠标所能移动的最左端是当前鼠标距div左边距的位置
					rightX = winW - contW + leftX; //鼠标所能移动的最右端是当前窗口距离减去鼠标距div最右端位置
					topY = startY - sY; //鼠标所能移动最上端是当前鼠标距div上边距的位置
					bottomY = winH - contH + topY; //鼠标所能移动最下端是当前窗口距离减去鼠标距div最下端位置      
				},
				touchmove: function(e) {
					e.preventDefault();
					//移动过程中XY轴的坐标要减去margin的距离
					moveX = e.originalEvent.targetTouches[0].pageX; //移动过程中X轴的坐标
					moveY = e.originalEvent.targetTouches[0].pageY; //移动过程中Y轴的坐标
					//判断的时候要计算加上padding的距离
					if (moveX < leftX) {
						moveX = leftX;
					}
					if (moveX > rightX) {
						moveX = rightX;
					}
					if (moveY < topY) {
						moveY = topY + 150; //顶部可留空间
					}
					if (moveY > bottomY) {
						moveY = bottomY - 80; //底部可留空间
					}
					if (startY < winH) {
						$(this).css({
							"top": moveY + sY - startY,
						})
					}
					   $(this).css({
					"left": moveX + sX - startX,//去掉之后仅沿y轴移动
					"top": moveY + sY - startY,
					   })
				}
			})
		},
		methods: {
			toStep(){
				uni.redirectTo({
					url:"/pages/step/index"
				})
			},
			async boolHasFloat() {
				this.nowStep = null;
				let res = await listOwnTodo();
				let isFirst = true;
				if (res.code == 200) {
					let data = res.rows;
					this.task_list = [...data];
					data.map((v,i) => {
						if (v.status == '0') {
							this.hasNoFloat = true;
						}
						if(v.status == "1" ){
							this.nowStep = i;
						}
					})

				}

			},
			toFloat() {
				uni.redirectTo({
					url: "/pages/step/index"
				})
			},
			toNotify(v) {
				uni.navigateTo({
					url: "/pages/notify/detail?id=" + v.id
				})
			},
			getHtmlStr(content) {
				return content
					.replace(/<\/?(img|table)[^>]*>/g, "") // 去除图片和表格
					.replace(/<\/?(a)[^>]*>/g, "") //  去除a标签
			},
			getDate() {
				// 创建Data对象
				let date = new Date();
				// 获取年份
				let year = date.getFullYear();
				// 获取月份（0-11）
				let month = date.getMonth() + 1;
				// 获取日期（1-31）
				let day31 = date.getDate();
				// 获取星期几（0-6）
				let day7 = date.getDay();
				let weekStr = "";
				switch (day7) {
					case 0:
						weekStr = "星期日";
						break;
					case 1:
						weekStr = "星期一";
						break;
					case 2:
						weekStr = "星期二";
						break;
					case 3:
						weekStr = "星期三";
						break;
					case 4:
						weekStr = "星期四";
						break;
					case 5:
						weekStr = "星期五";
						break;
					case 6:
						weekStr = "星期六";
						break;
				}
				this.now_time = month + "月" + day31 + "日 " + weekStr
			},
			async getOwnInfo() {
				let res = await getUserInfo();
				if (res.code == 200) {
					let data = {
						...res.data
					};
					if (!isEmpty(data.xsxm)) {
						this.stu_name = data.xsxm;
						this.stu_no = data.xh;
						this.reg_status = getRegStatus(data.regStatus);
					}
				}

			},
			async getNotify() {
				let res = await listNotify();

				if (res.code == 200) {
					this.notify_list = [...res.rows];
				}
			},


			// 跳转信息填报

			toFilling() {
				uni.navigateTo({
					url: "/pages/filling/filling",
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			// 金刚区跳转
			toPage(url) {
				uni.navigateTo({
					url,
					fail: () => {
						uni.switchTab({
							url
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.continueFloat {
		position: fixed;
		z-index: 999;
		right: 30rpx;
		top: 2%;

		.jiantou {
			background-color: rgba(60, 158, 255, 0.8);
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
			color: white;
			text-align: center;
			line-height: 100rpx;
			border: 1px solid white;
		}
	}


	.three-lines {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 3;
	}


	.index {

		// 渐变背景
		.bg {
			background-image: linear-gradient(180deg, rgba(60, 158, 255, 0.1), rgba(144, 199, 255, 0.1), #ffffff);
			height: 500rpx;
			position: absolute;
			width: 750rpx;
			z-index: -1;
		}

		// 内容
		.content {
			// #ifdef MP-WEIXIN
			padding: 180rpx 30rpx 0 30rpx;
			// #endif
			// #ifdef H5
			padding: 80rpx 30rpx 20rpx 30rpx;
			// #endif

			// 头像begin
			.head {
				display: flex;
				justify-content: space-between;

				image {
					width: 20px;
					height: 20px;
				}

				.avatar {
					display: flex;

					.msg {
						margin-left: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						text:nth-child(1) {
							font-weight: bolder;
							font-size: 28rpx;
						}

						text:nth-child(2) {
							font-size: 20rpx;
							color: #828282;
						}
					}

					.state {
						margin: 6rpx 0 0 12rpx;
						display: block;
						// width: 90rpx;
						height: 40rpx;
						font-size: 20rpx;
						background-color: rgb(232, 244, 255);
						text-align: center;
						line-height: 40rpx;
						color: rgb(24, 144, 255);
						border: 1px solid rgb(209, 233, 255);
						border-radius: 40rpx;
					}
				}
			}

			// 头像 end

			// 公告通知 begin
			.announcement {
				height: 35px;
				background-color: #ffffff;
				margin: 25rpx 0;
				border-radius: 10rpx;
				display: flex;
				justify-content: space-between;
				padding: 0 25rpx;
				position: relative;
				overflow: hidden;

				// 通知的消息
				.title {
					display: flex;
					flex-direction: column;
					font-size: 20rpx;
					font-weight: bold;
					padding: 0 30rpx 0 0;
					justify-content: center;

					text:nth-child(2) {
						color: #FD5430;
					}
				}

				.notify {
					font-size: 24rpx;
					line-height: 35px;
					color: #828282;
					flex: 1;
					position: absolute;
					left: 15%;
				}
			}

			//公告通知 end

			// 信息填写 begin
			.msg-fill {
				position: relative;
				height: 143px;
				margin-bottom: 25rpx;

				image {
					width: 100%;
					height: 143px;
				}

				button {
					position: absolute;
					bottom: 0;
					background-color: #FFFFFF;
					color: #7299FF;
					width: 160rpx;
					height: 54rpx;
					line-height: 54rpx;
					font-size: 24rpx;
					left: 60rpx;
					bottom: 25rpx;
					border-radius: 4rpx;
					font-weight: 900;
				}

				button::after {
					border: none;
				}
			}

			// 信息填写 end

			// 金刚区 begin
			.fn {
				display: flex;

				justify-content: space-between;
				align-items: center;
				text-align: center;
				margin-bottom: 25rpx;
				padding: 0 15px;

				.fn-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 80rpx;
						height: 80rpx;

					}

					text {
						font-size: 26rpx;
						margin-top: 20rpx;
						color: #3A3A3A;
					}
				}

				.fnBOX {
					display: flex;
					flex-direction: column;
					align-items: center;
				}
			}

			// 金刚区 end

			// 进度条
			.step {
				margin-top: -5px;


			}

			// 公告列表 begin
			.announcement-list {
				.tab {
					display: flex;
					align-items: center;

					i {
						background-color: #409EFF;
						width: 8rpx;
						height: 36rpx;
						border-radius: 4rpx;
					}

					text {
						font-size: 32rpx;
						margin-left: 5rpx;
						font-weight: bold;
					}
				}

				// 列表的项
				.announcement-item {
					margin: 30rpx 0;
					display: flex;
					justify-content: space-between;
					position: relative;

					image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 2px;
					}

					.texts {
						flex: 1;
						display: flex;
						flex-direction: column;
						// padding-left: 20rpx;
						position: relative;
						padding: 5rpx 20rpx;
						height: 200rpx;

						.i-title {
							font-size: 28rpx;
							font-weight: bold;
							color: #131313;
						}

						.i-content,
						.date {
							color: #6A6A6A;
							font-size: 24rpx;

						}

						.i-content {
							margin-top: 10rpx;
						}

						.date {
							font-size: 22rpx;
							position: absolute;
							bottom: 5rpx;
						}
					}
				}
			}
		}
	}
</style>