You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
2.9 KiB
123 lines
2.9 KiB
<template>
|
|
<view class="contract-container">
|
|
<view class="contract-list">
|
|
<view class="contract-item" v-for="(item, index) in contractList" :key="index" @click="viewContract(item)">
|
|
<view class="contract-header">
|
|
<image src="/static/images/微信图片_20250806143327_217.png" class="contract-icon"></image>
|
|
<text class="contract-title">{{ item.title }}</text>
|
|
</view>
|
|
<view class="contract-info">
|
|
<view class="info-item">
|
|
<text class="label">合同编号：</text>
|
|
<text class="value">{{ item.contractNo }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="label">签订日期：</text>
|
|
<text class="value">{{ item.signDate }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="label">合同状态：</text>
|
|
<text class="value">{{ item.status }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="contract-footer">
|
|
<u-button type="primary" size="mini" @click.stop="downloadContract(item)">下载合同</u-button>
|
|
</view>
|
|
</view>
|
|
<u-empty v-if="contractList.length === 0" text="暂无合同数据"></u-empty>
|
|
</view>
|
|
<view class="footer">
|
|
<view class="p-30">
|
|
<u-button type="success" shape="circle">上传合同</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
contractList: [
|
|
{
|
|
title: '售电服务合同',
|
|
contractNo: 'SD2025080601',
|
|
signDate: '2025-08-06',
|
|
status: '已生效',
|
|
url: ''
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
viewContract(contract) {
|
|
// 查看合同详情
|
|
console.log('查看合同:', contract)
|
|
},
|
|
downloadContract(contract) {
|
|
// 下载合同
|
|
uni.showToast({
|
|
title: '开始下载合同',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.contract-container {
|
|
padding: 20px;
|
|
|
|
.contract-list {
|
|
.contract-item {
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
margin-bottom: 15px;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
|
|
|
.contract-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
|
|
.contract-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.contract-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.contract-info {
|
|
.info-item {
|
|
display: flex;
|
|
margin-bottom: 8px;
|
|
|
|
.label {
|
|
color: #666;
|
|
width: 80px;
|
|
}
|
|
|
|
.value {
|
|
color: #333;
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.contract-footer {
|
|
margin-top: 15px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|