<template>
|
<view class="content">
|
<u-sticky>
|
<view class="nav">
|
<u-navbar title="项目列表" bgColor="#ffffff00" @leftClick="show=true">
|
<view class="" slot="left">
|
<image src="../../static/ic_logout@2x.png" mode="" class="img44"></image>
|
</view>
|
<view class="c1 b f32" slot="center">项目列表</view>
|
</u-navbar>
|
<view class="search" :style="{
|
paddingTop: statusbarHeight + navHeight + 20 + 'px',
|
paddingLeft: '20px',
|
paddingRight: '20px'
|
}">
|
<u-search placeholder="搜索" bgColor="#fff" :showAction="false" @search="scrolltoupper" v-model="searchForm.name">
|
</u-search>
|
<u-tabs :list="status" :is-scroll="false" :activeStyle="{ transform: 'scale(1.05)', color: '#222'}"
|
itemStyle="width: 180rpx; line-height:40rpx; font-size: 20rpx; height: 88rpx"
|
lineColor="#216EEE" @change="changeStatus">
|
</u-tabs>
|
</view>
|
</view>
|
</u-sticky>
|
<!-- :height="statusbarHeight + navHeight + 60 + 'px'" -->
|
<u-list
|
:showScrollbar="false"
|
@scrolltolower="scrolltolower"
|
@scrolltoupper="scrolltoupper"
|
:height="windowHeight - (statusbarHeight + navHeight + 120) + 'px'"
|
>
|
<u-list-item v-for="(item, index) in projectList" :key="index">
|
<view class="plr30 mb20" @click="selectProject(item)">
|
<view class="project-item bg_w bbox p30 rd8 ">
|
<view class="project-title beyondO">{{ item.name }}</view>
|
<view class="project-time">报名开始时间：{{ item.startDate }}</view>
|
<view class="project-time">报名结束时间：{{ item.endDate }}</view>
|
<view class="apply-count" :style="{color: item.status===1 ? '#216EEE' : '#CCCCCC',}">企业报名数量：{{ item.serverCompanyNum }}</view>
|
<view class="fixedTR project-status" :style="{
|
backgroundColor: item.status===1 ? '#E8F0FE' : '#CCCCCC',
|
color: item.status===1 ? '#216EEE' : '#fff',
|
}">
|
{{
|
item.status===0 ? '未开始'
|
: item.status===1 ? '进行中'
|
: item.status===2 ? '已结束' : '-'
|
}}
|
</view>
|
</view>
|
|
</view>
|
</u-list-item>
|
</u-list>
|
<u-modal :show="show" title="确定退出" content='退出后需要重新登录' showCancelButton confirmColor="#f00" @cancel="show=false" @confirm="logoutAction"></u-modal>
|
</view>
|
</template>
|
|
<script>
|
import { projectPage, logout } from '@/util/api/index.js'
|
import {
|
mapState
|
} from 'vuex'
|
export default {
|
data() {
|
return {
|
windowHeight: '',
|
searchForm: {
|
name: ''
|
},
|
status: [{ name: '全部' }, { name: '进行中' }, { name: '已结束' }],
|
projectList: [],
|
page: {
|
pageIndex: 1,
|
pageSize: 10,
|
total: 0
|
},
|
show: false
|
};
|
},
|
computed: {
|
...mapState(['statusbarHeight', 'navHeight']),
|
},
|
|
onLoad() {
|
if (!this.$store.state.token) {
|
uni.reLaunch({
|
url: '/pages/index/index'
|
})
|
return
|
}
|
uni.getSystemInfo({
|
success: res => {
|
this.windowHeight = res.windowHeight
|
}
|
})
|
this.getDataList()
|
},
|
methods: {
|
dateToStr(timestamp) {
|
return uni.$u.timeFrom(timestamp, 'yyyy-mm-dd hh:MM:ss')
|
},
|
scrolltoupper() {
|
this.page.pageIndex = 1
|
this.getDataList()
|
},
|
scrolltolower() {
|
if (this.page.total <= this.projectList.length) {
|
return
|
}
|
this.loadmore()
|
},
|
loadmore() {
|
this.page.pageIndex += 1
|
this.getDataList()
|
},
|
|
getDataList() {
|
projectPage({
|
capacity: this.page.pageSize,
|
model: this.searchForm,
|
page: this.page.pageIndex
|
})
|
.then(res => {
|
this.page.pageIndex = res.page
|
this.page.total = res.total
|
if (this.page.pageIndex===1) {
|
this.projectList = []
|
}
|
this.projectList.push(...res.records)
|
})
|
.catch(err => {
|
|
})
|
},
|
|
changeStatus({index}) {
|
this.searchForm.status = index
|
if (!index) {
|
this.searchForm.status = ''
|
}
|
this.page.pageIndex = 1
|
this.getDataList()
|
},
|
|
|
// 页面跳转
|
selectProject(item) {
|
uni.navigateTo({
|
url: `/pages/applyList/applyList?projectId=${item.id}`
|
})
|
},
|
logoutAction() {
|
this.show = false
|
logout()
|
.then(() => {
|
this.$store.commit('SETTOKEN', '')
|
this.$store.commit('SETUSERINFO', {})
|
uni.reLaunch({
|
url: '/pages/index/index'
|
})
|
})
|
.catch(err => {
|
uni.$u.tosat(err)
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.content {
|
height: 100vh;
|
background-color: #F3F6F9;
|
|
.nav {
|
width: 750rpx;
|
height: 400rpx;
|
background: linear-gradient(180deg, #C7EBFF 0%, #F3F6F9 100%);
|
color: #293C5B;
|
|
.search {
|
// margin-top: ;
|
}
|
}
|
.project-item {
|
position: relative;
|
height: 272rpx;
|
.project-title {
|
height: 44rpx;
|
font-size: 32rpx;
|
font-weight: 500;
|
color: #222222;
|
line-height: 44rpx;
|
margin-bottom: 20rpx;
|
}
|
.project-time {
|
height: 36rpx;
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #666666;
|
line-height: 36rpx;
|
margin-bottom: 20rpx;
|
}
|
.apply-count {
|
height: 36rpx;
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #216EEE;
|
line-height: 36rpx;
|
}
|
.project-status {
|
border-top-right-radius: 8rpx;
|
border-bottom-left-radius: 24rpx;
|
width: 104rpx;
|
height: 46rpx;
|
line-height: 46rpx;
|
text-align: center;
|
font-weight: 400;
|
font-size: 24rpx;
|
background-color: #E8F0FE;
|
color: #216EEE;
|
}
|
}
|
}
|
</style>
|
