445 lines
11 KiB
Vue
445 lines
11 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar title="学习项目" @leftClick="leftClick" placeholder />
|
|
<div class="tab-wrapper">
|
|
<div v-for="(item, index) in statusList" :key="index" class="tab-item" @click="chooseStatus(item, index)">
|
|
<div :style="{ color: activeIndex === index ? '#409eff' : '#333' }">
|
|
{{ item.text }}
|
|
</div>
|
|
<div :class="{ 'tab-line': activeIndex === index }"></div>
|
|
</div>
|
|
</div>
|
|
<!-- <view class="status-secs">
|
|
<view
|
|
v-for="(item, index) in statusList"
|
|
:key="item.id"
|
|
:class="[{ active: totalStatus.statusCount === item.id }]"
|
|
@click="chooseStatus(item.id)"
|
|
>
|
|
{{ item.text }}
|
|
</view>
|
|
</view> -->
|
|
<uni-easyinput
|
|
suffixIcon="search"
|
|
v-model="totalStatus.keyword"
|
|
placeholder="请输入项目名称"
|
|
@iconClick="toggleSearch"
|
|
style="margin-bottom: 10px"
|
|
></uni-easyinput>
|
|
|
|
<view class="project-cont">
|
|
<view v-for="(item, index) in projList" :key="item.id" class="single-proj" @click="toggleDetail(item.id)">
|
|
<h4 class="img">
|
|
<image src="/static/images/studyPro.png"></image>
|
|
</h4>
|
|
<view class="proj-detail">
|
|
<view class="detail-upper">
|
|
<h5 style="font-size: 16px">{{ item.name }}</h5>
|
|
<!-- <l-starRate v-model="item.star" :disabled="true"></l-starRate> -->
|
|
</view>
|
|
<view class="detail-lower">
|
|
<!-- <view class="avatar">
|
|
<image :src="item.avatar"></image>
|
|
</view> -->
|
|
<view class="progress">
|
|
<span>{{ item.userName }}</span>
|
|
<view class="bar">
|
|
<liu-progressbar
|
|
:progress="Number(item.trainPercentage) || 0"
|
|
color="#000"
|
|
:height="'10rpx'"
|
|
bgColor="#1989FA"
|
|
:textInside="false"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<div class="no-data" v-if="projList.length == 0">
|
|
<image src="/static/images/zanwuneirong.png" mode="aspectFit" />
|
|
<view class="no-data-text">暂无内容</view>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getStudentStudyWorkList } from '@/api/eduApp'
|
|
import config from '@/config'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
activeIndex: 0,
|
|
statusList: [
|
|
// status -1: 全部 1: 已完成 0: 未完成
|
|
{ text: '全部', id: 0 },
|
|
{ text: '已完成', id: 1 },
|
|
{ text: '未完成', id: 2 }
|
|
],
|
|
// 参数状态
|
|
totalStatus: {
|
|
statusCount: 0,
|
|
keyword: '',
|
|
learnType: '',
|
|
outDateStatus: '',
|
|
qualStatus: '',
|
|
signupStatus: ''
|
|
},
|
|
// 状态选项
|
|
learnTypeRange: [
|
|
{ text: '学习类型', value: '' },
|
|
{ text: '不学', value: 1 },
|
|
{ text: '要学', value: 2 }
|
|
],
|
|
outDateStatusRange: [
|
|
{ text: '逾期状态', value: '' },
|
|
{ text: '临期', value: 1 },
|
|
{ text: '过期', value: 2 }
|
|
],
|
|
qualStatusRange: [
|
|
{ text: '合格状态', value: '' },
|
|
{ text: '合格', value: 1 },
|
|
{ text: '不及格', value: 2 }
|
|
],
|
|
signupStatusRange: [
|
|
{ text: '报名状态', value: '' },
|
|
{ text: '报了', value: 1 },
|
|
{ text: '没报', value: 2 }
|
|
],
|
|
// 项目列表
|
|
projList: []
|
|
// projList: [
|
|
// {
|
|
// id: 1,
|
|
// img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
|
// title: '应急抢险',
|
|
// star: 5,
|
|
// avatar: '/static/eduImg/avatar.jpg',
|
|
// user: '管理员',
|
|
// percent: 71
|
|
// },
|
|
// {
|
|
// id: 2,
|
|
// img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
|
// title: '应急抢险',
|
|
// star: 3,
|
|
// avatar: '/static/eduImg/avatar.jpg',
|
|
// user: '管理员',
|
|
// percent: 33
|
|
// },
|
|
// {
|
|
// id: 3,
|
|
// img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
|
// title: '应急抢险',
|
|
// star: 2,
|
|
// avatar: '/static/eduImg/avatar.jpg',
|
|
// user: '管理员',
|
|
// percent: 94
|
|
// },
|
|
// {
|
|
// id: 4,
|
|
// img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
|
// title: '应急抢险',
|
|
// star: 4,
|
|
// avatar: '/static/eduImg/avatar.jpg',
|
|
// user: '管理员',
|
|
// percent: 76
|
|
// },
|
|
// {
|
|
// id: 5,
|
|
// img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
|
// title: '应急抢险',
|
|
// star: 1,
|
|
// avatar: '/static/eduImg/avatar.jpg',
|
|
// user: '管理员',
|
|
// percent: 63
|
|
// },
|
|
// {
|
|
// id: 6,
|
|
// img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
|
// title: '应急抢险',
|
|
// star: 5,
|
|
// avatar: '/static/eduImg/avatar.jpg',
|
|
// user: '管理员',
|
|
// percent: 52
|
|
// },
|
|
// {
|
|
// id: 7,
|
|
// img: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
|
// title: '应急抢险',
|
|
// star: 4,
|
|
// avatar: '/static/eduImg/avatar.jpg',
|
|
// user: '管理员',
|
|
// percent: 18
|
|
// }
|
|
// ]
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
async getList() {
|
|
const params = {
|
|
userId: uni.getStorageSync('userId'),
|
|
status: '-1'
|
|
}
|
|
// const res = await getStudentStudyWorkList(params)
|
|
// this.projList = res.data
|
|
this.getStudentStudyWorkList(params)
|
|
},
|
|
async chooseStatus(count, index) {
|
|
this.activeIndex = index
|
|
this.projList = []
|
|
// 清空搜索框
|
|
this.totalStatus.keyword = ''
|
|
let params = {
|
|
userId: uni.getStorageSync('userId'),
|
|
status: '-1'
|
|
}
|
|
this.totalStatus.statusCount = count.id
|
|
if (count.id === 0) {
|
|
params.status = '-1'
|
|
} else if (count.id === 1) {
|
|
params.status = '1'
|
|
} else if (count.id === 2) {
|
|
params.status = '0'
|
|
}
|
|
// const res = await getStudentStudyWorkList(params)
|
|
// this.projList = res.data
|
|
this.getStudentStudyWorkList(params)
|
|
},
|
|
async toggleSearch() {
|
|
this.projList = []
|
|
console.log('开始搜索', this.totalStatus.keyword)
|
|
let params = {
|
|
userId: uni.getStorageSync('userId'),
|
|
status: '-1',
|
|
name: this.totalStatus.keyword
|
|
}
|
|
if (this.totalStatus.statusCount === 0) {
|
|
params.status = '-1'
|
|
} else if (this.totalStatus.statusCount === 1) {
|
|
params.status = '1'
|
|
} else if (this.totalStatus.statusCount === 2) {
|
|
params.status = '0'
|
|
}
|
|
// const res = await getStudentStudyWorkList(params)
|
|
// this.projList = res.data
|
|
this.getStudentStudyWorkList(params)
|
|
},
|
|
statusChange(item) {
|
|
console.log(this.totalStatus)
|
|
},
|
|
toggleDetail(id) {
|
|
uni.navigateTo({
|
|
url: `/pages/YNEduApp/learnProj/learnProjDetail?id=${id}`
|
|
})
|
|
},
|
|
leftClick() {
|
|
uni.navigateTo({
|
|
url: '/pages/YNEduApp/index/index'
|
|
})
|
|
},
|
|
getStudentStudyWorkList(params) {
|
|
this.$verificationToken()
|
|
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.projList = res.data
|
|
},
|
|
fail: err => {
|
|
console.log(err)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
onBackPress(options) {
|
|
console.log(options)
|
|
if (options.from == 'backbutton') {
|
|
// 来自手势返回
|
|
console.log('手势返回')
|
|
// 返回为 true 时，不会执行返回操作，可以自定义返回逻辑
|
|
// 返回为 false 或者不返回时，则执行默认返回操作
|
|
return true
|
|
}
|
|
// 返回为 false 或者不返回时，则执行默认返回操作
|
|
return false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.tab-wrapper {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
/* background: #fff; */
|
|
margin-bottom: 10px;
|
|
|
|
.tab-item {
|
|
width: 25%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
.tab-line {
|
|
margin-top: 5px;
|
|
width: 30%;
|
|
height: 2px;
|
|
background-color: #409eff;
|
|
transition: width 0.3s;
|
|
}
|
|
}
|
|
}
|
|
.no-data {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 100px;
|
|
.no-data-text {
|
|
margin-top: 10px;
|
|
color: #999;
|
|
}
|
|
}
|
|
.page {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: #f8f8f8;
|
|
box-sizing: border-box;
|
|
padding: 0 10px;
|
|
|
|
.status-secs {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1vh;
|
|
|
|
view {
|
|
box-sizing: border-box;
|
|
padding: 0 15rpx;
|
|
font-size: 18px;
|
|
color: #9ea2ac;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.active {
|
|
font-size: 28px;
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
.drops {
|
|
width: 100%;
|
|
margin-top: 1vh;
|
|
display: flex;
|
|
}
|
|
|
|
.project-cont {
|
|
width: 100%;
|
|
height: 10rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
|
|
.single-proj {
|
|
width: 49%;
|
|
height: 22vh;
|
|
margin-bottom: 1vh;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #fff;
|
|
|
|
.img {
|
|
width: 100%;
|
|
height: 45%;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.proj-detail {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.detail-upper {
|
|
width: 100%;
|
|
height: 50%;
|
|
border-bottom: 1px solid #dfdfdf;
|
|
box-sizing: border-box;
|
|
padding: 5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
h5 {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.icons {
|
|
font-size: 12px;
|
|
color: #c0c0c0;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
span {
|
|
padding-left: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.detail-lower {
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
padding: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
/* .avatar {
|
|
width: 5vh;
|
|
height: 5vh;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
margin-right: 10rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
} */
|
|
|
|
.progress {
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
font-size: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
|
|
.bar {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|