372 lines
8.4 KiB
Vue
372 lines
8.4 KiB
Vue
<template>
|
|
<view class="page">
|
|
<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
|
|
prefixIcon="search"
|
|
v-model="totalStatus.keyword"
|
|
placeholder="请输入项目名称"
|
|
@iconClick="toggleSearch"
|
|
></uni-easyinput>
|
|
<zb-dropdown-menu style="width: 100%">
|
|
<zb-dropdown-item
|
|
name="first"
|
|
:options="learnTypeRange"
|
|
v-model="totalStatus.learnType"
|
|
@change="statusChange"
|
|
></zb-dropdown-item>
|
|
<zb-dropdown-item
|
|
name="two"
|
|
:options="outDateStatusRange"
|
|
v-model="totalStatus.outDateStatus"
|
|
@change="statusChange"
|
|
></zb-dropdown-item>
|
|
<zb-dropdown-item
|
|
name="three"
|
|
:options="qualStatusRange"
|
|
v-model="totalStatus.qualStatus"
|
|
@change="statusChange"
|
|
></zb-dropdown-item>
|
|
<zb-dropdown-item
|
|
name="four"
|
|
:options="signupStatusRange"
|
|
v-model="totalStatus.signupStatus"
|
|
@change="statusChange"
|
|
></zb-dropdown-item>
|
|
</zb-dropdown-menu>
|
|
<view class="project-cont">
|
|
<view
|
|
v-for="(item, index) in projList"
|
|
:key="item.id"
|
|
class="single-proj"
|
|
>
|
|
<h4 class="img">
|
|
<image :src="item.img"></image>
|
|
</h4>
|
|
<view class="proj-detail">
|
|
<view class="detail-upper">
|
|
<h5 style="font-size: 16px">{{ item.title }}</h5>
|
|
<l-starRate v-model="item.star" :disabled="true"></l-starRate>
|
|
<view class="icons">
|
|
<uni-icons color="#c0c0c0" type="eye-filled"></uni-icons><span>3</span>
|
|
<uni-icons color="#c0c0c0" type="chat-filled" style="margin-left: 5rpx"></uni-icons><span>3</span>
|
|
<uni-icons color="#c0c0c0" type="hand-up-filled" style="margin-left: 5rpx"></uni-icons><span>3</span>
|
|
</view>
|
|
</view>
|
|
<view class="detail-lower">
|
|
<view class="avatar">
|
|
<image :src="item.avatar"></image>
|
|
</view>
|
|
<view class="progress">
|
|
<span>{{ item.user }}</span>
|
|
<view class="bar">
|
|
<liu-progressbar
|
|
:progress="item.percent"
|
|
color="#000"
|
|
:height="'10rpx'"
|
|
bgColor="#1989FA"
|
|
:textInside="false"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
statusList: [
|
|
{ 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: [
|
|
{
|
|
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
|
|
},
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
chooseStatus(count) {
|
|
this.totalStatus.statusCount = count
|
|
console.log(this.totalStatus)
|
|
},
|
|
toggleSearch() {
|
|
console.log(this.totalStatus)
|
|
},
|
|
statusChange(item) {
|
|
console.log(this.totalStatus)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
.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: 30vh;
|
|
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: 65%;
|
|
border-bottom: 1px solid #DFDFDF;
|
|
box-sizing: border-box;
|
|
padding: 5px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
|
|
.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;
|
|
|
|
.avatar{
|
|
|
|
width: 20%;
|
|
height: 100%;
|
|
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>
|