|
|
@@ -1,108 +1,29 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <!-- 标题区域 -->
|
|
|
- <view class="title">
|
|
|
- <view class="">新生报到安全须知</view>
|
|
|
- <view class="">请仔细阅读以下内容,确保平安顺利报到</view>
|
|
|
- </view>
|
|
|
+ <view class="container" v-if="info">
|
|
|
+ <view class="img_bg"></view>
|
|
|
|
|
|
- <!-- 内容区域 -->
|
|
|
- <view class="body">
|
|
|
- <view class="body_title">
|
|
|
- <view class="title_dot"></view>
|
|
|
- <view class="title_text">来校前准备</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="prepare_box">
|
|
|
- <view class="box_title">形成规划</view>
|
|
|
- <view class="box_text">选择正规交通工具,避开深夜抵达车次,严禁乘坐"黑车"或私下拼车</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="prepare_box">
|
|
|
- <view class="box_title">报到准备</view>
|
|
|
- <view class="box_text">提前完成线上流程:信息填报 → 缴费认证 → 宿舍选择 → 车牌预约</view>
|
|
|
- </view>
|
|
|
+ <image class="img_logo" src="/static/13.png" mode="aspectFill"></image>
|
|
|
|
|
|
- <view class="prepare_box">
|
|
|
- <view class="box_title">物品保管</view>
|
|
|
- <view class="box_text">重要证件单独存放,行李标注姓名电话,随身现金不超过500元</view>
|
|
|
- </view>
|
|
|
+ <image class="img_right" src="/static/14.png" mode="aspectFill"></image>
|
|
|
|
|
|
- <view class="body_title">
|
|
|
- <view class="title_dot"></view>
|
|
|
- <view class="title_text">到校途中安全</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="safe_box">
|
|
|
- <view class="box_top">
|
|
|
- <image class="top_img" src="/static/1.png" mode="aspectFill"></image>
|
|
|
- <view class="top_text">交通风险</view>
|
|
|
- </view>
|
|
|
- <view class="box_bottom">遵守交规,避开车辆盲区,不追逐打闹</view>
|
|
|
- </view>
|
|
|
+ <view class="name">{{ info.name }}同学</view>
|
|
|
|
|
|
- <view class="safe_box">
|
|
|
- <view class="box_top">
|
|
|
- <image class="top_img" src="/static/1.png" mode="aspectFill"></image>
|
|
|
- <view class="top_text">诈骗风险</view>
|
|
|
- </view>
|
|
|
- <view class="box_bottom">警惕"代缴学费"电话,不扫陌生二维码</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="safe_box">
|
|
|
- <view class="box_top">
|
|
|
- <image class="top_img" src="/static/1.png" mode="aspectFill"></image>
|
|
|
- <view class="top_text">盗窃风险</view>
|
|
|
- </view>
|
|
|
- <view class="box_bottom">背包前置,手机握持,休息时固定行李</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="body_title">
|
|
|
- <view class="title_dot"></view>
|
|
|
- <view class="title_text">紧急情况处理</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="instancy_box">
|
|
|
- <view class="box_item">
|
|
|
- <view class="item_title">物品遗失</view>
|
|
|
- <view class="item_text">联系车站广播/警方(110)</view>
|
|
|
- </view>
|
|
|
- <view class="box_item">
|
|
|
- <view class="item_title">遭遇诈骗</view>
|
|
|
- <view class="item_text">校保卫处: 020-12345678</view>
|
|
|
- </view>
|
|
|
- <view class="box_item">
|
|
|
- <view class="item_title">身体不适</view>
|
|
|
- <view class="item_text">途中: 求助乘务员/拨打120</view>
|
|
|
- </view>
|
|
|
- <view class="box_item">
|
|
|
- <view class="item_title">校内急诊</view>
|
|
|
- <view class="item_text">校医院: 第一教学楼东侧</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="body_title">
|
|
|
- <view class="title_dot"></view>
|
|
|
- <view class="title_text">重要安全提醒</view>
|
|
|
- </view>
|
|
|
+ <view class="welcome">南昌交通学院欢迎您!</view>
|
|
|
|
|
|
- <view class="import_box">
|
|
|
- <view class="">1. 所有缴费仅通过学校官方平台操作</view>
|
|
|
- <view class="">2. 宿舍分配以"我的报到单"为准</view>
|
|
|
- <image class="box_img" src="/static/2.png" mode="aspectFill"></image>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- <uv-parse :content="safetyNotice"></uv-parse> -->
|
|
|
+ <!-- 内容区域 -->
|
|
|
+ <scroll-view class="body" scroll-y>
|
|
|
+ <uv-parse :content="safetyNotice"></uv-parse>
|
|
|
|
|
|
- <!-- 安全须知勾选区域 -->
|
|
|
<view class="check">
|
|
|
<checkbox :checked="isCheck" @click="handleCheck" />
|
|
|
我已阅读并理解以上安全须知
|
|
|
</view>
|
|
|
+ </scroll-view>
|
|
|
|
|
|
- <!-- 下一步按钮区域 -->
|
|
|
- <view class="btn" :class="{ active: isCheck }" @click="handleNext">下一步</view>
|
|
|
- </view>
|
|
|
+ <!-- 下一步按钮区域 -->
|
|
|
+ <view class="btn" :class="{ active: isCheck }" @click="handleNext">下一步</view>
|
|
|
+
|
|
|
+ <view class="btn margin" @click="logout">退出登录</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -117,6 +38,9 @@ const isCheck = ref(false)
|
|
|
// 安全须知内容
|
|
|
const safetyNotice = ref()
|
|
|
|
|
|
+// 学生信息
|
|
|
+const info = ref()
|
|
|
+
|
|
|
onLoad(() => {
|
|
|
// 获取用户信息
|
|
|
getInfoByToken()
|
|
|
@@ -131,7 +55,7 @@ const getInfoByToken = async () => {
|
|
|
// console.log(res)
|
|
|
if (res.code == 200) {
|
|
|
uni.setStorageSync('studentInfo', res.data)
|
|
|
- // uni.setStorageSync('TOKEN', res.data.token)
|
|
|
+ info.value = res.data
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -157,167 +81,115 @@ const handleNext = () => {
|
|
|
})
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
- title: '请先勾选安全须知',
|
|
|
+ title: '请先阅读并勾选安全须知',
|
|
|
icon: 'none',
|
|
|
mask: true
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+// 退出登录回调
|
|
|
+const logout = () => {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定退出登录吗?',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ let urlstr = uni.getStorageSync('urlstr')
|
|
|
+ uni.clearStorageSync()
|
|
|
+ window.location.href = `https://chtech.ncjti.edu.cn/welcome/welcomeH5/#/?urlstr=${urlstr}`
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.container {
|
|
|
- min-height: 100vh;
|
|
|
- background-color: #f5f9ff;
|
|
|
-
|
|
|
- .title {
|
|
|
- padding: 20rpx 30rpx 20rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- text-align: center;
|
|
|
- line-height: 46rpx;
|
|
|
- background-color: #fff;
|
|
|
+ padding-bottom: 50rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .img_bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 1110rpx;
|
|
|
+ background-image: url(@/static/12.png);
|
|
|
+ background-size: cover;
|
|
|
}
|
|
|
|
|
|
- .body {
|
|
|
- padding: 30rpx;
|
|
|
- margin-top: 10rpx;
|
|
|
- background-color: #fff;
|
|
|
-
|
|
|
- .body_title {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 30rpx;
|
|
|
-
|
|
|
- .title_dot {
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: #0061ff;
|
|
|
- }
|
|
|
-
|
|
|
- .title_text {
|
|
|
- margin-left: 15rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .prepare_box {
|
|
|
- margin-bottom: 16rpx;
|
|
|
- padding-left: 55rpx;
|
|
|
-
|
|
|
- .box_title {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .box_text {
|
|
|
- margin-top: 8rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #333333;
|
|
|
- line-height: 38rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .safe_box {
|
|
|
- margin-bottom: 24rpx;
|
|
|
-
|
|
|
- .box_top {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .top_img {
|
|
|
- width: 47rpx;
|
|
|
- height: 47rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .top_text {
|
|
|
- margin-left: 14rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .box_bottom {
|
|
|
- padding-left: 55rpx;
|
|
|
- margin-top: 8rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #333333;
|
|
|
- line-height: 38rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .instancy_box {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- grid-template-rows: repeat(2, 1fr);
|
|
|
- gap: 20rpx 40rpx;
|
|
|
- margin-bottom: 32rpx;
|
|
|
-
|
|
|
- .box_item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 325rpx;
|
|
|
- height: 170rpx;
|
|
|
- border-radius: 4rpx;
|
|
|
- background-color: #f5f9ff;
|
|
|
+ .img_logo {
|
|
|
+ position: absolute;
|
|
|
+ top: 29rpx;
|
|
|
+ left: 35rpx;
|
|
|
+ width: 309rpx;
|
|
|
+ height: 84rpx;
|
|
|
+ }
|
|
|
|
|
|
- .item_title {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
+ .img_right {
|
|
|
+ position: absolute;
|
|
|
+ top: -90rpx;
|
|
|
+ right: -120rpx;
|
|
|
+ width: 408rpx;
|
|
|
+ height: 408rpx;
|
|
|
+ }
|
|
|
|
|
|
- .item_text {
|
|
|
- margin-top: 15rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .name {
|
|
|
+ position: absolute;
|
|
|
+ top: 180rpx;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 70rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #0061ff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
|
|
|
- .import_box {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- padding-left: 32rpx;
|
|
|
- height: 152rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- line-height: 48rpx;
|
|
|
- background-color: #fff2f2;
|
|
|
+ .welcome {
|
|
|
+ position: absolute;
|
|
|
+ top: 289rpx;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 70rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #0061ff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
|
|
|
- .box_img {
|
|
|
- position: absolute;
|
|
|
- top: 35rpx;
|
|
|
- right: -7rpx;
|
|
|
- width: 156rpx;
|
|
|
- height: 156rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ .body {
|
|
|
+ position: absolute;
|
|
|
+ top: 829rpx;
|
|
|
+ left: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20rpx;
|
|
|
+ width: 711rpx;
|
|
|
+ height: 356rpx;
|
|
|
+ border: 2rpx solid #808080;
|
|
|
+ overflow-y: auto;
|
|
|
|
|
|
.check {
|
|
|
- margin-top: 32rpx;
|
|
|
+ margin: 32rpx auto 0;
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .btn {
|
|
|
- margin-top: 55rpx;
|
|
|
- margin-bottom: 70rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- height: 100rpx;
|
|
|
- color: #fff;
|
|
|
- border-radius: 8rpx;
|
|
|
- background-color: #ccc;
|
|
|
- }
|
|
|
+ .btn {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin: 125rpx auto 0;
|
|
|
+ width: 711rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background-color: #ccc;
|
|
|
+ }
|
|
|
|
|
|
- .active {
|
|
|
- background-color: #0061ff;
|
|
|
- }
|
|
|
+ .active {
|
|
|
+ background-color: #0061ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .margin {
|
|
|
+ margin-top: 35rpx;
|
|
|
+ background-color: #0061ff;
|
|
|
}
|
|
|
}
|
|
|
</style>
|