348 lines
8.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="page_wrap fullHeight">
<headers class="blue_header fixedheader" :showBack="true">
<view class="headerName">
浇筑令台账
</view>
</headers>
<view class="smallHeight" :style="{ 'padding-top': statusBarHeight + 56 + 'px' }">
<view class="content">
<view class="nav_list" :style="{'border-radius': activeIndex == 2 ? '24rpx 0 0 0':activeIndex == 3 ? '0 24rpx 0 0':'0'}">
<view class="nav_item" :class="{'active_item': activeIndex == 2}" @click="changeTab(2)">
<view class="text">已通过</view>
<view class="bottom_box"></view>
</view>
<view class="nav_item" :class="{'active_item': activeIndex == 1}" @click="changeTab(1)">
<view class="text">审核中</view>
<view class="bottom_box"></view>
</view>
<view class="nav_item" :class="{'active_item': activeIndex == 3}" @click="changeTab(3)">
<view class="text">已驳回</view>
<view class="bottom_box"></view>
</view>
</view>
<scroll-view class="smallHeight content_list" v-if="listData && listData.length>0" scroll-y>
<view style="padding-top: 36rpx;" :style="{'padding-bottom': activeIndex == 1 ? '100px':'40px'}">
<view class="list_item" @click="goDetail(item)" v-for="(item,index) in listData" :key="index">
<view class="status" :class="{'status1': activeIndex == 2,'status2': activeIndex == 1,'status3': activeIndex == 3}">
{{activeIndex == 2 ? '已通过':activeIndex == 1 ? '审核中':activeIndex == 3 ? '已驳回':''}}
</view>
<view class="flex">
<view class="left">
<view class="info_item"><text style="color: #948EAD">楼栋</text>{{item.buildName}}</view>
<view><text style="color: #948EAD">施工段</text>{{item.constructionSection}}</view>
</view>
<view class="right">
<view class="info_item"><text style="color: #948EAD">楼层</text>{{item.floorName}}</view>
<view><text style="color: #948EAD">浇筑日期</text>{{item.pourTime}}</view>
</view>
</view>
<!-- <view class="label_list">
<view class="label_item">已入库</view>
<view class="label_item">已送检</view>
<view class="label_item">已测量</view>
<view class="label_item">已结束</view>
</view> -->
</view>
</view>
</scroll-view>
<view class="no_data" v-else><image src="../../../static/noData.png"></image><view>暂无数据</view></view>
<view class="addForm_btn" v-if="activeIndex == 2" @click="goAdd">浇筑令申请</view>
</view>
</view>
<!-- <view class="bottom_nav">
<view class="nav_item">
<image src="../../../static/betonManage/nav-icon3.png"></image>
<image src="../../../static/betonManage/nav-icon2.png"></image>
<text>混凝土施工管控</text>
</view>
<view class="nav_item active_item">
<image src="../../../static/betonManage/nav-icon4.png"></image>
<image src="../../../static/betonManage/nav-icon1.png"></image>
<text>浇筑令台账</text>
</view>
</view> -->
</view>
</template>
<script>
export default{
data(){
return{
statusBarHeight: 0,
activeIndex: 2,
projectSn: '',
listData: []
}
},
onShow(){
this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
this.projectSn = JSON.parse(uni.getStorageSync('userInfo')).sn
this.loadData()
},
onLoad(){
},
methods:{
loadData(){
let params = {
auditState: this.activeIndex,
pageNo: 1,
pageSize: 500,
projectSn: this.projectSn
}
let that = this
this.sendRequest({
url: 'xmgl/massReboundPouringOrder/list',
data: params,
method: "POST",
success(res) {
console.log(res)
that.listData = res.result.records
}
})
},
changeTab(val){
this.activeIndex = val
this.loadData()
},
goAdd(){
uni.navigateTo({
url: './addPouringOrder'
})
},
goDetail(val){
uni.navigateTo({
url: './detail?type='+this.activeIndex + '&id=' + val.id
})
}
}
}
</script>
<style lang="scss" scoped>
.blue_header{
:deep(.headerBox){
background: #5181F6;
color: #fff;
border-bottom: 0;
.uni-icons{
color: #fff !important;
}
}
}
.fixedheader{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 2;
}
.smallHeight{
height: 100%;
background: #5181F6;
box-sizing: border-box;
}
.content{
height: 100%;
// background: #fff;
.nav_list{
display: flex;
height: 68rpx;
background: #7097F7;
.nav_item{
flex: 1;
// padding-left: 24rpx;
// margin-left: -24rpx;
z-index: 1;
height: 68rpx;
text-align: center;
position: relative;
line-height: 68rpx;
color: rgba(255,255,255,0.68);
.bottom_box{
display: none;
}
}
.active_item{
background: #fff;
color: rgba(81, 129, 246,1);
// margin-left: 0;
border-radius: 24rpx;
z-index: 2;
.text{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 3;
}
.bottom_box{
display: block;
height: 20rpx;
position: absolute;
left: -20rpx;
bottom: 0;
z-index: 2;
width: calc(100% + 40rpx);
background: #fff;
}
.bottom_box::after{
content: "";
position: absolute;
width: 48rpx;
height: 68rpx;
right: -29rpx;
bottom: 0;
border-radius: 24rpx;
background: #7097F7;
}
.bottom_box::before{
content: "";
position: absolute;
width: 48rpx;
height: 48rpx;
left: -29rpx;
bottom: 0;
border-radius: 50%;
background: #7097F7;
}
}
}
}
.content_list{
background: #fff;
height: calc(100% - 68rpx);
.list_item{
// height: 150rpx;
padding: 36rpx 28rpx;
box-sizing: border-box;
width: 90%;
margin: 0 auto;
margin-bottom: 20rpx;
border-radius: 10rpx;
box-shadow: 0px 4rpx 11px 0px rgba(212, 220, 236, 0.65);
position: relative;
.status{
position: absolute;
top: 0;
right: 24rpx;
font-size: 20rpx;
height: 32rpx;
line-height: 32rpx;
padding: 0 10rpx;
color: #fff;
border-radius: 0 0 12rpx 12rpx;
}
.status1{
background: rgba(#44D7B5, 1);
}
.status2{
background: rgba(#F68053, 1);
}
.status3{
background: rgba(#F65352, 1);
}
.left{
flex: 1;
font-size: 28rpx;
}
.right{
flex: 1;
font-size: 28rpx;
}
.info_item{
margin-bottom: 4rpx;
}
.label_list{
display: flex;
font-size: 24rpx;
margin-top: 20rpx;
.label_item{
background: rgba(#5181F6, 0.1);
color: #5181F6;
padding: 0 14rpx;
height: 36rpx;
line-height: 36rpx;
border-radius: 16rpx;
margin-right: 18rpx;
}
}
}
.flex{
display: flex;
}
}
.addForm_btn{
width: 100rpx;
height: 100rpx;
// line-height: 100rpx;
font-size: 24rpx;
border-radius: 50%;
background: #4181FE;
display: flex;
align-items: center;
padding: 0 12rpx;
box-sizing: border-box;
color: #fff;
border-radius: 50rpx;
text-align: center;
position: fixed;
bottom: 180rpx;
right: 60rpx;
box-shadow: 0 4rpx 8rpx 0 rgba(65, 129, 254, 1);
}
.addForm_btn::before{
content: "";
width: 120rpx;
height: 120rpx;
position: absolute;
left: -10rpx;
top: -10rpx;
background: rgba(65, 129, 254, 0.1);
border-radius: 50%;
}
.bottom_nav{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 136rpx;
background: #fff;
border-top: 1px solid rgba(245, 245, 245, 1);
display: flex;
font-size: 24rpx;
.nav_item{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: rgba(#2A2B5B,0.3);
}
.active_item{
color: #5181F6;
}
uni-image{
width: 60rpx;
height: 60rpx;
}
}
.no_data{
background: #fff;
height: calc(100% - 68rpx);
padding-top: 80rpx;
box-sizing: border-box;
text-align: center;
color: rgba(0,0,0,0.3);
uni-image{
width: 246rpx;
height: 195rpx;
display: block;
margin: 0 auto;
margin-bottom: 60rpx;
}
}
</style>