359 lines
8.0 KiB
Vue
359 lines
8.0 KiB
Vue
<template>
|
|
<view>
|
|
<view class="page-top" style="background-color: aqua">
|
|
<u-navbar title="个人中心" placeholder bgColor="transparent" :leftIcon="null" titleStyle="color:white">
|
|
</u-navbar>
|
|
<view class="search-bar">
|
|
<u--input placeholder="请输入项目名称" prefixIcon="search" prefixIconStyle="font-size: 32px;color: #909399">
|
|
</u--input>
|
|
</view>
|
|
|
|
<u-tabs :list="tabList" itemStyle="width:18%;height:80rpx" activeStyle="color:white"
|
|
inactiveStyle="color:white"></u-tabs>
|
|
|
|
|
|
</view>
|
|
<view class="filter-bar">
|
|
<view class="filter-item">
|
|
<text>时间</text>
|
|
<u-icon name="arrow-down-fill" color="#8F959E" size="14"></u-icon>
|
|
</view>
|
|
<view class="filter-item">
|
|
<text>金额</text>
|
|
<u-icon name="arrow-down-fill" color="#8F959E" size="14"></u-icon>
|
|
</view>
|
|
<view class="filter-item">
|
|
<text>级别</text>
|
|
<u-icon name="arrow-down-fill" color="#8F959E" size="14"></u-icon>
|
|
</view>
|
|
<view class="filter-item">
|
|
<text>筛选</text>
|
|
<u-icon name="arrow-down-fill" color="#8F959E" size="14"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="scroll-y">
|
|
<u-swipe-action class="swiper-item" v-for="item in projectList" :key="item.id">
|
|
<u-swipe-action-item :options="options">
|
|
<view class="project-item" @tap="goDetail">
|
|
<view class="project-status"
|
|
:style="`background-image: linear-gradient(219deg, ${statusDict[item.status].color1} 0%, ${statusDict[item.status].color2} 99%)`">
|
|
<text>{{statusDict[item.status].name}}</text>
|
|
</view>
|
|
<text>{{item.name}}</text>
|
|
<view class="project-desc">
|
|
|
|
<view class="project-desc-item">
|
|
<text class="project-desc-key">
|
|
建设性质
|
|
</text>
|
|
<text class="project-desc-value">
|
|
{{item.type}}
|
|
</text>
|
|
</view>
|
|
<view class="project-desc-item" style="text-align: end;">
|
|
<text class="project-desc-key">
|
|
施工单位
|
|
</text>
|
|
<text class="project-desc-value">
|
|
{{item.unit}}
|
|
</text>
|
|
</view>
|
|
<view class="project-desc-item">
|
|
<text class="project-desc-key">
|
|
监理单位
|
|
</text>
|
|
<text class="project-desc-value">
|
|
{{item.supervisorUnit}}
|
|
</text>
|
|
</view>
|
|
<view class="project-desc-item" style="text-align: end;">
|
|
<text class="project-desc-key">
|
|
总面积
|
|
</text>
|
|
<text class="project-desc-value">
|
|
{{item.area}}平方
|
|
</text>
|
|
</view>
|
|
<view class="project-desc-item">
|
|
<text class="project-desc-key">
|
|
总投资
|
|
</text>
|
|
<text class="project-desc-value">
|
|
{{item.invest}}万元
|
|
</text>
|
|
</view>
|
|
<view class="project-desc-item" style="text-align: end;">
|
|
<text class="project-desc-key">
|
|
建设性质
|
|
</text>
|
|
<text class="project-desc-value">
|
|
{{item.responsible}}
|
|
</text>
|
|
</view>
|
|
<view class="divider"></view>
|
|
<!-- <divider></divider> -->
|
|
<view class="project-desc-item">
|
|
<text class="project-desc-key">
|
|
项目编号
|
|
</text>
|
|
<text class="project-desc-value">
|
|
{{item.id}}
|
|
</text>
|
|
</view>
|
|
<view class="project-desc-item" style="text-align: end;">
|
|
<text class="project-desc-key">
|
|
立项时间
|
|
</text>
|
|
<text class="project-desc-value">
|
|
{{item.createTime}}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- </navigator> -->
|
|
</u-swipe-action-item>
|
|
</u-swipe-action>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
statusDict: {
|
|
0: {
|
|
name: '已立项',
|
|
color1: '#39DAAA',
|
|
color2: '#02C489'
|
|
},
|
|
1: {
|
|
name: '进行中',
|
|
color1: '#FD934E',
|
|
color2: '#FF7442'
|
|
},
|
|
2: {
|
|
name: '已完成',
|
|
color1: '#39DAAA',
|
|
color2: '#02C489'
|
|
}
|
|
},
|
|
options: [{
|
|
text: '编辑',
|
|
style: {
|
|
backgroundColor: '#e99d42'
|
|
}
|
|
},
|
|
{
|
|
text: '删除',
|
|
style: {
|
|
backgroundColor: '#f56c6c'
|
|
}
|
|
}
|
|
],
|
|
tabList: [{
|
|
name: '全部'
|
|
},
|
|
{
|
|
name: '已立项'
|
|
},
|
|
{
|
|
name: '进行中'
|
|
},
|
|
{
|
|
name: '已验收'
|
|
},
|
|
],
|
|
projectList: [{
|
|
name: '六院信息化项目',
|
|
type: '商用',
|
|
unit: '内蒙航天建工集团',
|
|
supervisorUnit: '建华监理单位',
|
|
area: 1500,
|
|
invest: 200,
|
|
status: 0, //0:已立项, 1:进行中, 2:已完成
|
|
responsible: '郝昊',
|
|
id: "0e13werwr313",
|
|
createTime: '2022-02-32'
|
|
},
|
|
{
|
|
name: '工棚改造项目',
|
|
type: '商用',
|
|
unit: '内蒙航天建工集团',
|
|
supervisorUnit: '建华监理单位',
|
|
area: 1500,
|
|
invest: 200,
|
|
status: 0, //0:已立项, 1:进行中, 2:已完成
|
|
responsible: '郝昊',
|
|
id: "0e1rwerw748313",
|
|
createTime: '2022-02-32'
|
|
},
|
|
{
|
|
name: '工棚改造项目',
|
|
type: '商用',
|
|
unit: '内蒙航天建工集团',
|
|
supervisorUnit: '建华监理单位',
|
|
area: 1500,
|
|
invest: 200,
|
|
status: 0, //0:已立项, 1:进行中, 2:已完成
|
|
responsible: '郝昊',
|
|
id: "0e13wrw77587err",
|
|
createTime: '2022-02-32'
|
|
},
|
|
{
|
|
name: '工棚改造项目',
|
|
type: '商用',
|
|
unit: '内蒙航天建工集团',
|
|
supervisorUnit: '建华监理单位',
|
|
area: 1500,
|
|
invest: 200,
|
|
status: 0, //0:已立项, 1:进行中, 2:已完成
|
|
responsible: '郝昊',
|
|
id: "0e13wrw643542err",
|
|
createTime: '2022-02-32'
|
|
},
|
|
{
|
|
name: '工棚改造项目',
|
|
type: '商用',
|
|
unit: '内蒙航天建工集团',
|
|
supervisorUnit: '建华监理单位',
|
|
area: 1500,
|
|
invest: 200,
|
|
status: 0, //0:已立项, 1:进行中, 2:已完成
|
|
responsible: '郝昊',
|
|
id: "0e1335626wrwerr",
|
|
createTime: '2022-02-32'
|
|
},
|
|
{
|
|
name: '工棚改造项目',
|
|
type: '商用',
|
|
unit: '内蒙航天建工集团',
|
|
supervisorUnit: '建华监理单位',
|
|
area: 1500,
|
|
invest: 200,
|
|
status: 0, //0:已立项, 1:进行中, 2:已完成
|
|
responsible: '郝昊',
|
|
id: "0e312313wrwerr",
|
|
createTime: '2022-02-32'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
goDetail() {
|
|
console.log('跳转')
|
|
uni.navigateTo({
|
|
url: '/pages/project_supervision/project_detail/project_detail',
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #f6f6f6;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.page-top {
|
|
background: linear-gradient(to top right, #496df6, #2e9ee8);
|
|
}
|
|
|
|
.search-bar {
|
|
margin: 0 32rpx 0;
|
|
|
|
.u-input {
|
|
height: 48rpx;
|
|
background-color: white;
|
|
}
|
|
}
|
|
|
|
.filter-bar {
|
|
height: 80rpx;
|
|
padding: 0 40rpx 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.filter-item {
|
|
display: flex;
|
|
|
|
text {
|
|
color: #8F959E;
|
|
// margin-right: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.scroll-y {
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.swiper-item {
|
|
margin: 0rpx 16rpx 0rpx;
|
|
}
|
|
|
|
.swiper-item:not(:last-child) {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.project-item {
|
|
position: relative;
|
|
background-color: white;
|
|
|
|
padding: 28rpx 20rpx 28rpx;
|
|
border-radius: 8rpx;
|
|
|
|
.project-status {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 112rpx;
|
|
height: 48rpx;
|
|
background-image: linear-gradient(219deg, #FD934E 0%, #FF7442 99%);
|
|
border-radius: 0 8rpx 0 32rpx;
|
|
|
|
text {
|
|
font-size: 12rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.project-desc {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.project-desc-item {
|
|
width: 50%;
|
|
|
|
.project-desc-key {
|
|
color: #8F959E;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.project-desc-value {
|
|
margin-left: 8rpx;
|
|
color: #333;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.divider {
|
|
margin: 15rpx 0 15rpx;
|
|
width: 100%;
|
|
height: 3rpx;
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
</style>
|