GSExamProj/pages/index/index.vue

501 lines
11 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="hole-page">
<view class="nav-bar"></view>
<!-- <view class="upper-bgd">
<image src="/static/banner.png" mode=""></image>
</view> -->
<view class="user-area">
<view class="user-lef" @click="jumpUser">
<image :src="avatarUrl" mode=""></image>
</view>
<view class="user-rig">
<h2>Hello{{ username }}</h2>
<h5 style="font-weight: normal;">甘肃送变电工程有限公司安全教育培训系统</h5>
</view>
</view>
<view class="select-area">
<!-- <view>
<view
@click="jumpEdu"
>
<image src="/static/edu.png" mode=""></image>
</view>
<span>培训</span>
</view> -->
<view>
<h4
@click="jumpExam"
>
<image src="/static/exam.png" mode=""></image>
</h4>
<span>考试</span>
</view>
<view>
<h4
@click="jumpPrac('')"
>
<image src="/static/prac.png" mode=""></image>
</h4>
<span>练习</span>
</view>
<view>
<h4
@click="jumpMeeting"
>
<image src="/static/meeting.png" mode=""></image>
</h4>
<span>例会</span>
</view>
<view>
<h4
@click="jumpAwardPunish"
>
<image src="/static/awardPunish.png" mode=""></image>
</h4>
<span>奖惩</span>
</view>
<view>
<h4
@click="jumpPrac(1)"
>
<image src="/static/quesAnswer.png" mode=""></image>
</h4>
<span>背题</span>
</view>
<view>
<h4
@click="jumpMall"
>
<image src="/static/mall.png" mode=""></image>
</h4>
<span>积分商城</span>
</view>
<!-- <view>
<h4
@click="jumpScore"
>
<image src="/static/mall.png" mode=""></image>
</h4>
<span>成绩</span>
</view> -->
</view>
<view class="tit">
<span>通知公告</span>
<text @click="moreDetail" style="font-size: 16px; font-weight: normal; color: #a5a5a5;">查看全部 ></text>
</view>
<!-- <view class="kwd-ipt">
<uni-easyinput
placeholder="请输入关键字"
v-model="iptVal"
suffixIcon="search"
@iconClick="clickSearch()"
>
</uni-easyinput>
</view> -->
<view class="lower-cont">
<view class="single-notice"
v-for="(notice, index) in noticeArr"
:key="index"
@click="toggleNotice(notice.id, notice.ifReceive, notice.ifSign, notice.noticeTheme, notice.noticeContent, notice.startTime, notice.endTime, notice.noticeType, notice.workTime)"
>
<view class="single-exam" v-show="notice.noticeType == 1">
<!-- <view class="lef">
<image src="../../static/examNotice.png" mode=""></image>
</view> -->
<view class="rig">
<view style="font-size: 16px; font-weight: bold;">{{ notice.noticeTheme }}</view>
<view style="color: #868686;">{{ notice.startTime + ' ~ ' + notice.endTime }}</view>
</view>
<!-- <view class="top-rig">
<view class="greenDot" v-show="notice.ifReceive != 0"></view>
<view class="redDot" v-show="notice.ifReceive == 0"></view>
</view> -->
</view>
<view class="single-edu" v-show="notice.noticeType == 2">
<!-- <view class="lef">
<image src="../../static/eduNotice.png" mode=""></image>
</view> -->
<view class="rig">
<view style="font-size: 16px; font-weight: bold;">{{ notice.noticeTheme }}</view>
<view style="color: #868686;">{{ notice.startTime + ' ~ ' + notice.endTime }}</view>
</view>
<!-- <view class="top-rig">
<view class="greenDot" v-show="notice.ifReceive != 0"></view>
<view class="redDot" v-show="notice.ifReceive == 0"></view>
</view> -->
</view>
</view>
<view class="no-notice" v-show="showNoNotice">
<view class="img">
<image src="/static/noMeeting.png" mode=""></image>
<span>暂无公告</span>
</view>
</view>
</view>
</view>
</template>
<script>
import { publicPath } from '../../public';
export default {
data() {
return {
username: uni.getStorageSync('name'),
iptVal: '',
noticeArr: [],
picUrl: '',
avatarUrl: 'https://img.51miz.com/Element/00/38/03/97/917488dc_E380397_8f92a53e.png',
showNoNotice: false
}
},
onLoad() {
},
methods: {
clickSearch () {
console.log(this.iptVal);
this.fetchHomeNotice(this.iptVal)
},
jumpEdu () {
uni.navigateTo({
url: '/pages/eduPage/eduPage'
})
},
jumpExam () {
uni.navigateTo({
url: '/pages/exam/exam'
})
},
jumpPrac (param) {
uni.navigateTo({
url: `/pages/practice/practice?param=${param}`
})
},
jumpMeeting () {
uni.navigateTo({
url: '/pages/meeting/meeting'
})
},
jumpAwardPunish () {
uni.navigateTo({
url: '/pages/awardPunish/awardPunish'
})
},
jumpUser () {
uni.navigateTo({
url: '/pages/user/user'
})
},
jumpMall () {
uni.navigateTo({
url: '/pages/pointsMall/pointsMall'
})
},
jumpScore () {
uni.navigateTo({
url: '/pages/pracResult/pracResult'
})
},
// 获取首页通知公告 1考试 2培训
fetchHomeNotice (keyWord) {
let that = this
// that.noticeArr = []
uni.request({
url: publicPath + '/backstage/app/getAppNoticeList',
method: 'POST',
header: {
'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
},
data: {
userId: uni.getStorageSync('id'),
keyWord
},
success: (res) => {
console.log(res);
if (res.data.code == 200) {
that.showNoNotice = false
that.noticeArr = res.data.data.slice(0, 5)
console.log(that.noticeArr);
} else {
that.showNoNotice = true
}
},
fail: (err) => {
console.log(err);
}
})
/* that.$api.index.getHomeNotice({
userId: uni.getStorageSync('id'),
keyWord
}).then(res => {
if (res.data.code == 200) {
that.showNoNotice = false
that.noticeArr = res.data.data.slice(0, 5)
console.log(that.noticeArr);
} else {
that.showNoNotice = true
}
}).catch(err => {
console.log(err);
}) */
},
toggleNotice (id, ifReceive, ifSign, theme, cont, sTime, eTime, type, workTime) {
console.log(ifReceive);
if (ifReceive == 0) {
uni.request({
url: publicPath + '/backstage/app/receiveNoticeById',
method: 'POST',
header: {
'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
},
data: {
userId: uni.getStorageSync('id'),
id: id
},
success: (res) => {
console.log(res);
if (res.data.code == 200) {
uni.navigateTo({
url: `/pages/noticePage/noticePage?id=${id}&ifReceive=${ifReceive}&ifSign=${ifSign}&theme=${theme}&cont=${cont}&sTime=${sTime}&eTime=${eTime}&type=${type}&workTime=${workTime}`
})
}
}
})
} else {
uni.navigateTo({
url: `/pages/noticePage/noticePage?id=${id}&ifReceive=${ifReceive}&ifSign=${ifSign}&theme=${theme}&cont=${cont}&sTime=${sTime}&eTime=${eTime}&type=${type}&workTime=${workTime}`
})
}
},
moreDetail () {
uni.navigateTo({
url: '/pages/moreDetail/moreDetail'
})
}
},
onShow() {
let that = this
// console.log(uni.getStorageSync('id'));
if (!uni.getStorageSync('id')) {
uni.showToast({
icon: 'none',
title: '请重新登录!',
success: () => {
uni.reLaunch({
url: '/pages/login/login'
})
}
})
} else {
this.fetchHomeNotice('')
this.iptVal = ''
}
// 查询当前用户剩余积分
uni.request({
url: publicPath + '/backstage/appshoping/getAllpoint',
method: 'POST',
header: {
'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
},
data: {
userId: uni.getStorageSync('id')
},
success: (res) => {
console.log(res);
if (res.data.code == 200) {
uni.setStorageSync('point', res.data.data)
}
}
})
/* that.$api.index.getNowPoints({
userId: uni.getStorageSync('id')
}).then(res => {
console.log(res);
if (res.data.code == 200) {
uni.setStorageSync('point', res.data.data)
}
}).catch(err => {
console.log(err);
}) */
}
}
</script>
<style lang="scss">
.hole-page{
width: 100%;
// background: linear-gradient(#9CD2FF, #F9FCFF, #FFFFFF);
background-color: #f7fbfe;
}
.nav-bar{
width: 100%;
height: var(--status-bar-height);
padding-top: var(--status-bar-height);
}
.user-area{
width: 90%;
margin: 20rpx auto;
margin-bottom: 50rpx;
box-sizing: border-box;
padding: 15rpx;
display: flex;
.user-lef{
width: 20%;
height: 120rpx;
border-radius: 50%;
overflow: hidden;
image{
width: 100%;
height: 100%;
}
}
.user-rig{
flex: 1;
box-sizing: border-box;
padding-left: 15rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
}
}
.upper-bgd{
width: 95%;
height: 300rpx;
margin: 20rpx auto;
image{
width: 100%;
height: 100%;
}
}
.select-area{
width: 90%;
margin: 20rpx auto;
box-sizing: border-box;
padding: 20rpx 0 0 20rpx;
display: flex;
background-color: #fff;
border-radius: 20rpx;
flex-wrap: wrap;
align-items: center;
view{
width: 21%;
height: 160rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
margin-right: 4%;
margin-bottom: 45rpx;
h4{
width: 65%;
height: 55%;
border-radius: 50%;
image{
width: 100%;
height: 100%;
overflow: hidden;
}
}
span{
font-size: 16px;
}
}
}
.tit{
width: 90%;
margin: 20rpx auto;
margin-top: 40rpx;
font-size: 24px;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}
.kwd-ipt{
width: 95%;
margin: 20rpx auto;
.is-input-border[data-v-abe12412]{
border-radius: 30rpx;
}
}
.lower-cont{
width: 90%;
margin: 20rpx auto;
overflow-y: auto;
font-size: 12px;
.single-notice{
width: 100%;
box-sizing: border-box;
padding: 12rpx;
background-color: #fff;
margin-bottom: 20rpx;
.single-exam, .single-edu{
width: 100%;
height: 100rpx;
box-sizing: border-box;
padding: 8rpx;
display: flex;
/* .lef{
width: 12%;
height: 100%;
image{
width: 100%;
height: 100%;
overflow: hidden;
}
} */
.rig{
width: 100%;
height: 100%;
box-sizing: border-box;
padding-left: 20rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.top-rig{
flex: 1;
display: flex;
.greenDot{
width: 40%;
height: 40%;
border-radius: 50%;
margin: auto;
background-color: green;
}
.redDot{
width: 40%;
height: 40%;
border-radius: 50%;
margin: auto;
background-color: red;
}
}
}
}
.no-notice{
width: 100%;
height: 40vh;
background-color: #fff;
display: flex;
.img{
margin: auto;
width: 25%;
height: 12vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
image{
width: 100%;
height: 80%;
}
span{
font-size: 14px;
}
}
}
}
</style>