admin/RentWeAppFront
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
RuicyWu
2025-11-14 11:39:33 +08:00
parent 6e5d892992
commit 1ba633ba45
7143 changed files with 922330 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
pages/detail/contractDetail.vue Normal file
View File

@@ -0,0 +1,245 @@
<template>
<view class="contract-detail-page">
<customNavbar title="我的合同"></customNavbar>
<!-- 顶部信息 -->
<view class="header">
<image class="cover" :src="contract.coverUrl" mode="aspectFill" />
<view class="info">
<text class="name">{{ contract.assetName }}</text>
<text class="room">{{ contract.assetRoom || '—' }}</text>
</view>
</view>
<!-- 合同基本信息 -->
<view class="section">
<view class="section-title">合同基本信息</view>
<view class="info-item" v-for="(item, index) in baseInfo" :key="index" @click="handleClick(item)">
<text class="label">{{ item.label }}</text>
<view class="value-box">
<text class="value">{{ item.value }}</text>
<u-icon v-if="item.hasArrow" name="arrow-right" size="30" color="#ccc" />
</view>
</view>
</view>
<!-- 费用信息 -->
<view class="section">
<view class="section-title">费用信息</view>
<view class="info-item" v-for="(item, index) in feeInfo" :key="index" @click="handleClick(item)">
<text class="label">{{ item.label }}</text>
<view class="value-box">
<text class="value">{{ item.value }}</text>
<u-icon v-if="item.hasArrow" name="arrow-right" size="30" color="#ccc" />
</view>
</view>
</view>
<!-- 签约主体信息 -->
<view class="section">
<view class="section-title">签约主体信息</view>
<view class="info-item" v-for="(item, index) in signerInfo" :key="index">
<text class="label">{{ item.label }}</text>
<text class="value">{{ item.value }}</text>
</view>
</view>
<!-- 底部操作栏 -->
<view v-if="contract.status === '待签署'" class="bottom-bar">
<u-button
type="primary"
shape="circle"
class="sign-btn"
@click="goSign"
>
去签署
</u-button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
contract: {
id: 'c123',
coverUrl: '/static/img/index/swiper/swiper3.jpg',
assetName: '深圳南山中心写字楼租赁合同',
assetRoom: 'B栋1203',
status: '待签署', // 可选：待签署 / 已签署 / 已过期
signStatus: '未签署',
startDate: '2025-01-01',
endDate: '2026-01-01',
payMethod: '按月支付',
payTime: '每月5日',
electronicId: 'e1001',
deposit: '￥5000',
rent: '￥8500/月',
electricity: '￥1.2/度',
water: '￥5/吨',
property: '￥300/月',
userId: 'u777',
signer: '张三',
idCard: '440301199001011234',
phone: '13800138000',
idValidDate: '2035-01-01',
},
};
},
computed: {
baseInfo() {
return [
{ label: '合同状态', value: this.contract.status },
{ label: '签约状态', value: this.contract.signStatus },
{ label: '合同生效期', value: `${this.contract.startDate} 至 ${this.contract.endDate}` },
{ label: '付款方式', value: this.contract.payMethod },
{ label: '付款时间', value: this.contract.payTime },
{ label: '电子合同', value: '', hasArrow: true, id: this.contract.electronicId },
];
},
feeInfo() {
return [
{ label: '押金/保证金', value: this.contract.deposit },
{ label: '租金', value: this.contract.rent },
{ label: '电费', value: this.contract.electricity },
{ label: '水费', value: this.contract.water },
{ label: '物业/增值服务', value: this.contract.property },
{ label: '我的账单', value: '', hasArrow: true, id: this.contract.id },
];
},
signerInfo() {
return [
{ label: '签约人', value: this.contract.signer },
{ label: '身份证号', value: this.contract.idCard },
{ label: '手机号', value: this.contract.phone },
{ label: '证件有效期', value: this.contract.idValidDate },
];
},
},
methods: {
handleClick(item) {
if (item.label === '电子合同') {
uni.navigateTo({
url: `/pages/contract/contractFile?id=${item.id}`,
});
} else if (item.label === '我的账单') {
uni.navigateTo({
url: `/pages/bill/billList?userId=${this.contract.userId}&contractId=${item.id}`,
});
}
},
goSign() {
uni.navigateTo({
url: `/pages/contract/signContract?id=${this.contract.id}`,
});
},
},
};
</script>
<style lang="scss" scoped>
.contract-detail-page {
background: #f7f8fa;
min-height: 100vh;
padding-top: 175rpx; /* 给导航栏留空间 */
padding-bottom: 120rpx; /* 预留底部操作栏空间 */
}
/* 顶部封面信息 */
.header {
display: flex;
background: #fff;
padding: 24rpx;
border-radius: 12rpx;
margin: 20rpx;
.cover {
width: 180rpx;
height: 180rpx;
border-radius: 12rpx;
margin-right: 20rpx;
}
.info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
.name {
font-size: 30rpx;
font-weight: bold;
color: #333;
margin-bottom: 12rpx;
}
.room {
font-size: 26rpx;
color: #666;
}
}
}
/* 信息区域 */
.section {
background: #fff;
border-radius: 12rpx;
margin: 20rpx;
padding: 20rpx 24rpx;
.section-title {
font-weight: bold;
font-size: 28rpx;
margin-bottom: 12rpx;
color: #333;
}
.info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 0;
border-bottom: 1rpx solid #f0f0f0;
&:last-child {
border-bottom: none;
}
.label {
font-size: 26rpx;
color: #666;
}
.value-box {
display: flex;
align-items: center;
.value {
font-size: 26rpx;
color: #333;
}
u-icon {
margin-left: 10rpx;
}
}
}
}
/* 底部固定操作栏 */
.bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
padding: 35rpx;
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.06);
z-index: 99;
.sign-btn {
width: 100%;
height: 88rpx;
}
}
</style>