595 lines
13 KiB
Vue
595 lines
13 KiB
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> |