zhgdyunapp/pages/contractors/qualification.vue

199 lines
4.2 KiB
Vue

<template>
<view>
<view class="barBox">
<headers class="fixedheader" :themeType="'white'" :showBack="true">
<view class="headerName">
资质文件
</view>
</headers>
</view>
<view class="searchBox" v-if="listData.length > 0">
<form>
<view class="uni-form-item">
<input class="uni-input" name="searchName" v-model="searchForm.fileName" placeholder="请搜索文件名称"
@input="handleInput" />
</view>
</form>
</view>
<scroll-view :scroll-y="true" class="scrollBox" :style="{height: screenHeight + 'px'}" v-if="listData.length > 0">
<view v-for="(item,index) in listData" :key="index">
<view class="itemBox">
<view class="file-info">
<image src="/static/documentIcon/JPG.png" class="icon-image"></image>
<view class="info">
<view class="info-inner">{{item.fileName}}</view>
<view class="info-inner">{{item.createTime}}</view>
</view>
</view>
<view class="optration" @click="previewImage(item)">· · ·</view>
</view>
</view>
<view class="" style="height: 10px;"></view>
</scroll-view>
<view class="noData" :style="{height: screenHeight + 'px'}" v-if="listData.length == 0">
暂无数据
</view>
</view>
</template>
<script>
export default {
data() {
return {
id: '',
projectId: '',
searchForm: {
enterpriseId: '',
fileName: ''
},
listData: [],
};
},
onLoad(option) {
this.id = option.id
this.projectId = option.projectId
this.getHeight()
this.getListData()
},
methods: {
getHeight() {
this.screenHeight = uni.getSystemInfoSync().screenHeight - 100
console.log(this.screenHeight);
},
getListData(){
this.searchForm.enterpriseId = this.id
// let data = {
// enterpriseId: '1802547943107092481',
// }
this.sendRequest({
url: 'xmgl/enterpriseQualification/list',
method: 'post',
data: this.searchForm,
success: res => {
console.log("enterpriseQualification", res);
this.listData = res.result
}
})
},
previewImage(item){
let url = this.url_config+'image/'+ JSON.parse(item.fileUrl)[0].url
console.log(url);
uni.previewImage({
urls: [url]
})
},
//搜索
handleInput(e) {
setTimeout(() => {
this.getListData()
}, 300)
},
}
}
</script>
<style lang="scss" scoped>
.barBox {
// background-color: #5181F6;
background-color: #fff;
min-height: 100%;
height: 100px;
.fixedheader {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
.headerName {
z-index: 1;
}
}
}
.searchBox {
background-color: white;
position: fixed;
top: 44px;
left: 0;
width: 100%;
z-index: 999;
box-shadow: 0px 8rpx 15rpx 0px rgba(219,229,255,0.6);
.uni-form-item {
position: relative;
display: flex;
font-size: 14px;
}
.uni-input {
border-radius: 20px;
margin: 10px 10px;
background-color: #f7f8fa;
height: 35px;
line-height: 30px;
padding: 0 20px;
font-size: 14px;
width: calc(100% - 40px);
}
}
.scrollBox {
height: 100%;
width: 100%;
background-color: #f4f5fd;
// margin: 0 10px;
word-break: break-all;
.itemBox {
width: 100%;
min-height: 60px;
margin-top: 2px;
// border: 1px solid rgba(219, 229, 255, 0.6);
border-radius: 2px;
padding: 5px 10px;
box-shadow: 0px 8rpx 15rpx 0px rgba(219,229,255,0.6);
background-color: #fff;
font-size: 12px;
display: flex;
justify-content: space-between;
align-items: center;
.file-info{
width: 85%;
display: flex;
justify-content: flex-start;
align-items: center;
.icon-image{
width: 45px;
height: 45px;
}
.info{
width: calc(100% - 100px);
margin-left: 10px;
display: flex;
flex-direction: column;
justify-content: center;
.info-inner{
white-space: nowrap;
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 使用省略号显示超出部分 */
line-height: 23px;
}
}
}
.optration{
width: 45px;
font-weight: bolder;
color: #2b8df3;
}
}
}
.noData{
display: flex;
justify-content: center;
align-items: center;
font-size: 34px;
color: darkgray;
transform: translateY(-60px);
}
</style>