411 lines
10 KiB
Vue
411 lines
10 KiB
Vue
<template>
|
|
<view class="page">
|
|
<u-navbar title="学习项目" @leftClick="leftClick" placeholder />
|
|
<div class="wrapper">
|
|
<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>
|
|
<uni-easyinput
|
|
suffixIcon="search"
|
|
v-model="totalStatus.keyword"
|
|
placeholder="请输入项目名称"
|
|
@blur="toggleSearch"
|
|
style="margin-bottom: 10px"
|
|
></uni-easyinput>
|
|
|
|
<!-- 查询 -->
|
|
<div class="status-secs">
|
|
<div class="item" @click="openPicker(1)">
|
|
<span>学习类型</span>
|
|
<u-icon name="arrow-down-fill" color="#D8D8D8" size="9"></u-icon>
|
|
</div>
|
|
<div class="item" @click="openPicker(2)">
|
|
<span>逾期状态</span>
|
|
<u-icon name="arrow-down-fill" color="#D8D8D8" size="9"></u-icon>
|
|
</div>
|
|
<div class="item" @click="openPicker(3)">
|
|
<span>合格状态</span>
|
|
<u-icon name="arrow-down-fill" color="#D8D8D8" size="9"></u-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<!-- 选择器 -->
|
|
<u-picker
|
|
v-if="showPicker"
|
|
:show="showPicker"
|
|
:columns="[columns]"
|
|
keyName="label"
|
|
@cancel="showPicker = false"
|
|
@confirm="confirmPicker"
|
|
></u-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getStudentStudyWorkList } from '@/api/eduApp'
|
|
import config from '@/config'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
showPicker: false,
|
|
columns: [],
|
|
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: [
|
|
{ label: '不学', value: 1 },
|
|
{ label: '要学', value: 2 }
|
|
],
|
|
// 逾期状态
|
|
outDateStatusRange: [
|
|
{ label: '临期', value: 1 },
|
|
{ label: '过期', value: 2 }
|
|
],
|
|
// 合格状态
|
|
qualStatusRange: [
|
|
{ label: '合格', value: 1 },
|
|
{ label: '不及格', value: 2 }
|
|
],
|
|
// 项目列表
|
|
projList: []
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
openPicker(type) {
|
|
console.log('🚀 ~ openPicker ~ type:', type)
|
|
this.columns = []
|
|
if (type === 1) {
|
|
this.columns = this.learnTypeRange
|
|
} else if (type === 2) {
|
|
this.columns = this.outDateStatusRange
|
|
} else if (type === 3) {
|
|
this.columns = this.qualStatusRange
|
|
} else if (type === 4) {
|
|
this.columns = this.signupStatusRange
|
|
}
|
|
this.showPicker = true
|
|
},
|
|
confirmPicker(e) {
|
|
console.log('🚀 ~ confirmPicker ~ e:', e)
|
|
this.showPicker = false
|
|
},
|
|
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">
|
|
.wrapper {
|
|
padding: 0 10px;
|
|
background-color: #fff;
|
|
}
|
|
.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;
|
|
|
|
.status-secs {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
margin-bottom: 10px;
|
|
padding-bottom: 10px;
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
span {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.drops {
|
|
width: 100%;
|
|
margin-top: 1vh;
|
|
display: flex;
|
|
}
|
|
|
|
.project-cont {
|
|
padding: 0 10px;
|
|
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>
|