<template>
|
<view class="content">
|
<u-sticky>
|
<view class="ptb10 search" >
|
<view class="plr20">
|
<u-search placeholder="搜索企业名称" bgColor="#fff" :showAction="false" v-model="searchForm.keyword"></u-search>
|
</view>
|
<u-tabs :list="status" :is-scroll="false" :activeStyle="{ transform: 'scale(1.05)', color: '#222'}"
|
itemStyle="width: 208rpx; line-height:40rpx; font-size: 20rpx; height: 88rpx"
|
lineColor="#216EEE">
|
</u-tabs>
|
</view>
|
</u-sticky>
|
<!-- :height="statusbarHeight + navHeight + 60 + 'px'" -->
|
<u-list @scrolltolower="scrolltolower" :height="windowHeight - 110 + 'px'">
|
<u-list-item v-for="(item, index) in commpanyList" :key="index">
|
<view class="plr30 mb20">
|
<view class="project-item bg_w bbox p30 rd8 ">
|
<view class="project-title beyondO">{{ item.name }}</view>
|
<view class="project-time">所在区域：{{ item.address }}</view>
|
<view class="project-time">服务机构：{{ item.service }}</view>
|
<view class="project-time">服务次数：{{ item.serviceTime }}次</view>
|
<view class="project-time">诊断得分：{{ item.socre }}</view>
|
<view class="fixedTR project-status plr15" :style="{
|
backgroundColor: item.status===1 ? '#E8F0FE' : '#CCCCCC',
|
color: item.status===1 ? '#216EEE' : '#fff',
|
}">
|
{{
|
item.status===0 ? '未开始'
|
: item.status===1 ? '进行中'
|
: item.status===2 ? '已结束' : '-'
|
}}
|
</view>
|
<view class="rX">
|
<view class="btn-width">
|
<u-button text="上传诊断数据" color="#216EEE" type="primary"></u-button>
|
</view>
|
<view class="btn-width mr20">
|
<u-button text="查看服务数据"></u-button>
|
</view>
|
</view>
|
</view>
|
|
</view>
|
</u-list-item>
|
</u-list>
|
</view>
|
</template>
|
|
<script>
|
import { projectPage } from '@/util/api/index.js'
|
import {
|
mapState
|
} from 'vuex'
|
export default {
|
data() {
|
return {
|
windowHeight: '',
|
searchForm: {
|
keyWard: ''
|
},
|
status: [{ name: '全部' }, { name: '已分配服务机构' }, { name: '诊断中' }
|
],
|
commpanyList: [
|
{
|
name: '中国移动通信集团安徽有限公司中国移动通信集团安徽有限公司…',
|
address: '肥西县',
|
service: '如果科技有限公司',
|
serviceTime: '2',
|
socre: 90,
|
status: 0
|
},
|
{
|
name: '中国移动通信集团安徽有限公司',
|
address: '肥西县',
|
service: '如果科技有限公司',
|
serviceTime: '2',
|
socre: 90,
|
status: 0
|
},
|
]
|
};
|
},
|
computed: {
|
...mapState(['statusbarHeight', 'navHeight']),
|
},
|
onLoad(option) {
|
console.log(option);
|
uni.getSystemInfo({
|
success: res => {
|
console.log(res);
|
this.windowHeight = res.windowHeight
|
}
|
})
|
},
|
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 => {
|
console.log(res.page);
|
this.page.pageIndex = res.page
|
this.page.total = res.total
|
if (this.page.pageIndex===1) {
|
this.projectList = []
|
}
|
console.log(res.records);
|
this.projectList.push(...res.records)
|
console.log(this.projectList);
|
})
|
.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'
|
})
|
}
|
}
|
}
|
|
</script>
|
|
<style lang="scss">
|
.content {
|
height: 100vh;
|
background-color: #F3F6F9;
|
|
.project-item {
|
position: relative;
|
.project-title {
|
height: 44rpx;
|
max-width: 480rpx;
|
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: 12rpx;
|
}
|
.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;
|
height: 46rpx;
|
line-height: 46rpx;
|
text-align: center;
|
font-weight: 400;
|
font-size: 24rpx;
|
background-color: #E8F0FE;
|
color: #216EEE;
|
}
|
.btn-width {
|
width: 190rpx;
|
}
|
.btn-height {
|
height: 56rpx;
|
}
|
}
|
|
}
|
</style>
|
