zhxg_v1.0/zhxg_xsbdV1.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新生报到移动端V1.0

Browse Source
This commit is contained in:
18154758993
2025-07-16 17:44:45 +08:00
commit 50d2d6a12d
1058 changed files with 146425 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

595
pages/index/index.vue Normal file
View File

@@ -0,0 +1,595 @@
<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>