OfficeApp/subpkg/contract/contract.vue

262 lines
6.7 KiB
Vue
Raw Normal View History

2023-07-20 13:48:26 +08:00
<template>
<view class="">
2023-07-22 15:37:07 +08:00
<!-- <view class="tabs">
2023-07-20 13:48:26 +08:00
<view class="left">
<view class="item" :class="changeType==0?'active':''" @click="changeType=0">合同列表</view>
<view class="item" :class="changeType==1?'active':''" @click="changeType=1">已签订合同</view>
2023-07-20 13:48:26 +08:00
</view>
<view class="right">
<text>新增</text>
</view>
2023-07-22 15:37:07 +08:00
</view> -->
2023-07-20 13:48:26 +08:00
<view class="contract_list">
<view class="item" v-for="(item,index) in list" :key="item.id">
2023-07-20 13:48:26 +08:00
<view class="top">
2023-07-23 23:18:26 +08:00
<image src="../../static/img/contract/pdf.png" style="height: 140rpx; width: 140rpx;"></image>
2023-07-20 13:48:26 +08:00
<view class="text">
<view class="name">
2023-07-22 15:50:54 +08:00
<view class="title">
<text v-if="item.company">{{item.company.company_name}}</text>
</view>
2023-07-20 13:48:26 +08:00
</view>
<view class="date">
<!-- <text class="time">2023-04-27 2024-04-28 </text> -->
<view class="number">
<view class="num_left">合同编号:</view>
<text>{{item.contract_no}}</text>
</view>
<view class="number">
<view class="num_left">合同类型:</view>
<view>{{item.company.contract_type_name}}</view>
</view>
<view class="time">
<view class="num_left">修改时间:</view>
<view>{{item.update_time}}</view>
</view>
2023-07-20 13:48:26 +08:00
</view>
</view>
</view>
<u-line color="#999999FF"></u-line>
<view class="bottom">
<view class="left">已签订</view>
<!-- <view class="left red">已到期</view> -->
<button class="right" @click="naviTo('/subpkg/contractDetail/contractDetail?id='+item.id)">详情</button>
2023-07-20 13:48:26 +08:00
</view>
</view>
</view>
<u-empty v-if="loadConfig.status=='nomore'&& list.length==0" text="暂无合同"
icon="/static/img/empty/data.png"></u-empty>
<u-loadmore v-else :status="loadConfig.status" :loading-text="loadConfig.loadingText"
:loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />
2023-07-20 13:48:26 +08:00
</view>
</template>
<script>
import { contractList } from "@/api/contract.js"
export default {
data() {
return {
changeType: 0,
2023-07-22 15:37:07 +08:00
list: [],
loadConfig: {
2023-07-22 15:37:07 +08:00
page: 1,
limit: 15,
loadingText: '努力加载中',
loadmoreText: '轻轻上拉',
nomoreText: '我也是有底线的~~',
status: 'loadmore'
},
}
},
onLoad() {},
onShow() {
this.initLoadConfig();
},
onReady() {
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#3175f9'
})
},
methods: {
naviTo(url) {
url ?
uni.navigateTo({
url: url
}) : Toast('暂未开放')
},
initLoadConfig() {
2023-08-01 16:43:13 +08:00
this.loadConfig.page = 1;
this.loadConfig.status = "loadmore";
this.list = [];
this.initContractList();
uni.stopPullDownRefresh();
2023-08-01 16:43:13 +08:00
},
async initContractList() {
try {
if (this.loadConfig.status == "nomore") return;
this.loadConfig.status = "loading"
2023-08-01 16:43:13 +08:00
let res = await contractList({
page: this.loadConfig.page,
limit: this.loadConfig.limit
})
this.loadConfig.status = "loadmore"
if (res.data.data.length < this.loadConfig.limit) {
this.loadConfig.status = "nomore"
} else {
2023-08-01 16:43:13 +08:00
this.loadConfig.page++;
}
this.list = [...this.list, ...res.data?.data]
} catch (e) {
2023-08-01 16:43:13 +08:00
this.initLoadConfig();
this.loadConfig.status = "nomore"
}
}
2023-07-20 13:48:26 +08:00
},
onPullDownRefresh() {
this.initLoadConfig();
2023-07-20 13:48:26 +08:00
}
}
</script>
<style lang="scss">
.tabs {
height: 112rpx;
background-color: #fff;
2023-07-20 13:48:26 +08:00
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 28rpx;
.left {
display: flex;
.item {
margin-right: 52.5rpx;
width: 175rpx;
height: 53rpx;
line-height: 53rpx;
text-align: center;
background-color: #F3F4F8FF;
border-radius: 35rpx 35rpx 35rpx 35rpx;
font-size: 28rpx;
font-weight: 400;
color: #999999;
}
.active {
background-color: #3274F9FF;
color: #FFFFFFFF;
}
}
.right {
2023-07-20 13:48:26 +08:00
font-size: 28rpx;
font-weight: 400;
color: #999999;
line-height: 0rpx;
2023-07-20 13:48:26 +08:00
}
}
.contract_list {
2023-07-20 13:48:26 +08:00
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 28rpx;
.item {
width: 694rpx;
min-height: 263rpx;
padding: 28rpx;
margin-bottom: 28rpx;
background: #FFFFFF;
border-radius: 14rpx 14rpx 14rpx 14rpx;
2023-07-20 13:48:26 +08:00
display: flex;
flex-direction: column;
justify-content: space-between;
.top {
2023-07-20 13:48:26 +08:00
display: flex;
margin-bottom: 28rpx;
image {
width: 87.6rpx;
height: 87.6rpx;
margin-right: 28rpx;
flex-shrink: 0;
}
.text {
display: flex;
flex-direction: column;
justify-content: space-between;
.name {
.title {
font-size: 32rpx;
font-weight: 400;
color: #333333;
margin-right: 17.5rpx;
}
2023-07-20 13:48:26 +08:00
}
.date {
2023-07-20 13:48:26 +08:00
font-size: 25rpx;
font-weight: 400;
color: #F9AA32;
line-height: 36rpx;
.number, .time{
display: flex;
justify-content: left;
flex-wrap: wrap;
.num_left{
margin-right: 18rpx;
}
}
.time {
color: #CCCCCCFF;
margin-right: 10rpx;
}
2023-07-20 13:48:26 +08:00
}
}
2023-07-20 13:48:26 +08:00
}
.bottom {
2023-07-20 13:48:26 +08:00
display: flex;
justify-content: space-between;
margin-top: 28rpx;
.left {
font-size: 28rpx;
font-weight: 400;
color: #34A853;
}
.red {
color: #F02828FF;
}
.right {
width: 158rpx;
// height: 53rpx;
// border-radius: 26rpx 26rpx 26rpx 26rpx;
// border: 2rpx solid #3274F9;
// display: flex;
// justify-content: center;
// align-items: center;
text-align: right;
background: #FFFFFF;
opacity: 1;
font-size: 28rpx;
font-weight: 400;
color: #3274F9;
}
2023-07-20 13:48:26 +08:00
}
}
2023-07-20 13:48:26 +08:00
}
</style>