YNUtdPlatform/pages/YNEduApp/index/index.vue

333 lines
8.4 KiB
Vue

<template>
<view class="page">
<u-navbar leftIcon="" title="首页" placeholder />
<view class="search">
<uni-icons type="scan" size="24" style="margin-right: 2vw; color: #bababa" @click="toggleScan"></uni-icons>
<uni-easyinput
suffixIcon="search"
v-model="keyword"
placeholder="请输入搜索关键词"
@iconClick="toggleSearch"
></uni-easyinput>
</view>
<view class="opt-grids">
<view v-for="(part, index) in opts" :key="index" @click="jumpUrl(part.url)">
<image :src="part.src" mode=""></image>
<span>{{ part.name }}</span>
</view>
</view>
<view class="swipe-area">
<swiper class="swiper-box" autoplay interval="3000" indicator-dots="true">
<swiper-item v-for="(item, index) in imgList" :key="index">
<img :src="item.image" alt="" style="width: 100%; height: 100%" />
</swiper-item>
</swiper>
</view>
<uni-notice-bar
show-icon
scrollable
color="#808080"
background-color="transparent"
:text="msgList.length > 0 ? msgList[0].noticeName : '暂无消息'"
@click="handleMsg"
/>
<view class="my-task">
<h3 style="margin-bottom: 1vh">我的任务</h3>
<div class="task-list">
<div class="list-item" v-for="(item, index) in taskList" :key="index" @click="toggleDetail(item.id)">
<div class="item-title">{{ item.name }}</div>
<div>{{ item.userName }}</div>
<div>{{ item.validityDate }}</div>
<div class="item-progress">
<u-line-progress
:percentage="Number(item.trainPercentage)"
:showText="false"
height="8"
activeColor="#579AF8"
/>
<div>{{ item.trainPercentage }}%</div>
</div>
</div>
<view class="no-task" v-show="taskList.length === 0">
<view class="no-task-img">
<image src="/static/eduImg/no-task.png"></image>
<span>可联系管理员发布</span>
</view>
</view>
</div>
</view>
<m-tabbar fixed fill :current="0" :tabbar="tabbar"></m-tabbar>
</view>
</template>
<script>
import TabbarConfig from '@/tabbar.js'
// import face from '../../../uni_modules/mcc-face/index'
import { getNoticeAnnoByUserId, getStudentStudyWorkList } from '@/api/eduApp'
import config from '@/config'
export default {
data() {
return {
userId: uni.getStorageSync('userId'),
tabbar: TabbarConfig,
keyword: '',
opts: [
{ name: '学习项目', src: '/static/eduImg/learnProj.png', url: 'learnProj' },
// { name: '学习', src: '/static/eduImg/learn.png', url: 'learn' },
{ name: '考试', src: '/static/eduImg/exam.png', url: 'exam' },
{ name: '练习', src: '/static/eduImg/prac.png', url: 'prac' }
],
imgList: [
{
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
title: '昨夜星辰昨夜风,画楼西畔桂堂东'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
title: '身无彩凤双飞翼,心有灵犀一点通'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
title: '谁念西风独自凉,萧萧黄叶闭疏窗,沉思往事立残阳'
}
],
taskList: [],
msgList: []
}
},
onLoad() {
console.log('🚀 ~ mounted ~ mounted-index:')
this.getList()
this.getMsgList()
},
methods: {
async getList() {
this.taskList = []
let params = {
userId: this.userId,
status: '0'
}
// const res = await getStudentStudyWorkList(params)
// console.log('🚀 ~ getList ~ res:', res)
// this.taskList = res.data
console.log('🚀 ~ toggleSearch ~ params:', params)
uni.request({
url: config.baseUrl + '/exam-student/personalCenter/getStudentStudyWorkList',
method: 'post',
header: {
'Content-Type': 'application/x-www-form-urlencoded',
Authorization: uni.getStorageSync('access_token')
},
data: params,
success: res => {
console.log('🚀 ~ getList ~ res:', res)
res = res.data
this.taskList = res.data
}
})
},
// 搜索
async toggleSearch() {
this.taskList = []
console.log('开始搜索', this.keyword)
let params = {
userId: this.userId,
status: '0',
name: this.keyword
}
// const res = await getStudentStudyWorkList(params)
// this.taskList = res.data
uni.request({
url: config.baseUrl + '/exam-student/personalCenter/getStudentStudyWorkList',
method: 'post',
header: {
'Content-Type': 'application/x-www-form-urlencoded',
Authorization: uni.getStorageSync('access_token')
},
data: params,
success: res => {
console.log('🚀 ~ getList ~ res:', res)
res = res.data
this.taskList = res.data
}
})
},
// 获取消息列表
async getMsgList() {
uni.request({
url: config.bmwUrl + '/studentUsers/getNoticeList',
method: 'post',
data: {},
header: {
Authorization: uni.getStorageSync('access_token')
},
success: res => {
console.log('🚀 ~ getMsgList ~ res:', res)
this.msgList = res.data
console.log('🚀 ~ getMsgList ~ this.msgList:', this.msgList)
}
})
},
// 点击消息
handleMsg() {
uni.navigateTo({
url: '/pages/YNEduApp/user/myMsg'
})
},
toggleScan() {
uni.scanCode({
success: res => {
console.log(res.result)
}
})
},
jumpUrl(path) {
uni.navigateTo({
url: `/pages/YNEduApp/${path}/${path}`
})
},
openFaceScan() {
face.open(['a', 'c'], function (e) {
face.close()
})
},
toggleDetail(id) {
uni.navigateTo({
url: `/pages/YNEduApp/learnProj/learnProjDetail?id=${id}`
})
},
},
onShow() {
/* getNoticeAnnoByUserId({
status: 0
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
}) */
/*uni.showModal({
title: '人脸识别',
content: '开启人脸识别?',
success:(res) => {
if(res.confirm) this.openFaceScan()
}
})*/
}
}
</script>
<style lang="scss">
.page {
width: 100vw;
height: 100vh;
background-color: #f8f8f8;
box-sizing: border-box;
padding: 0 20px;
.search {
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
}
.opt-grids {
width: 100%;
display: flex;
flex-wrap: wrap;
margin: 3vh auto;
view {
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
//margin-bottom: 2vh;
image {
width: 60%;
height: 7vh;
margin-bottom: 10px;
}
span {
font-size: 26rpx;
font-weight: bold;
}
}
}
.swipe-area {
width: 100%;
height: 20vh;
border-radius: 15rpx;
overflow: hidden;
margin-bottom: 10rpx;
}
.my-task {
width: 100%;
height: 40vh;
background-color: #fff;
border-radius: 15rpx;
box-shadow: 3px 3px 3px #f4f4f4;
box-sizing: border-box;
padding: 15rpx;
display: flex;
flex-direction: column;
.task-list {
flex: 1;
overflow-y: auto;
.list-item {
margin: 10px 0;
background-color: #f8f8f8;
border-radius: 5px;
padding: 5px;
font-size: 13px;
.item-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
}
.item-progress {
display: flex;
align-items: center;
.u-line-progress {
width: 80%;
margin-right: 10px;
}
}
}
.no-task {
width: 100%;
height: 100%;
display: flex;
.no-task-img {
width: 80%;
height: 80%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
image {
width: 100%;
height: 90%;
}
span {
font-size: 14px;
color: #c2c2c2;
}
}
}
}
}
}
</style>