mirror of
http://36.133.248.69:3088/admin/RentWeAppFront.git
synced 2026-03-07 17:32:25 +08:00
342 lines
7.6 KiB
Vue
342 lines
7.6 KiB
Vue
<template>
|
||
<view class="contract-detail-page">
|
||
<customNavbar title="我的合同"></customNavbar>
|
||
|
||
<!-- 合同基本信息 -->
|
||
<view class="section">
|
||
<view class="section-title">合同基本信息</view>
|
||
<view
|
||
class="info-item"
|
||
v-for="(item, index) in baseInfo"
|
||
:key="index"
|
||
@click="item.hasArrow && 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
|
||
v-for="(asset, index) in assetList"
|
||
:key="index"
|
||
class="asset-block"
|
||
>
|
||
<view class="asset-header" @click="toggleAsset(index)">
|
||
<view class="left">
|
||
<image
|
||
class="cover"
|
||
:src="asset.coverUrl || '/static/default-cover.png'"
|
||
mode="aspectFill"
|
||
/>
|
||
<view class="info">
|
||
<text class="name">{{ asset.assetName }}</text>
|
||
<text class="room">{{ asset.assetRoom || '—' }}</text>
|
||
</view>
|
||
</view>
|
||
<u-icon
|
||
:name="asset.expanded ? 'arrow-up' : 'arrow-down'"
|
||
size="28"
|
||
color="#999"
|
||
/>
|
||
</view>
|
||
|
||
<view v-show="asset.expanded">
|
||
<view class="section">
|
||
<view class="section-title">费用信息</view>
|
||
<view
|
||
class="info-item"
|
||
v-for="(item, i) in feeItems(asset)"
|
||
:key="i"
|
||
>
|
||
<text class="label">{{ item.label }}</text>
|
||
<text class="value">{{ item.value }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- <view
|
||
v-if="hasMoreAssets"
|
||
class="load-more"
|
||
@click="loadMoreAssets"
|
||
> -->
|
||
<!-- <text v-if="!loadingAsset">加载更多资产</text>
|
||
<text v-else>加载中...</text>
|
||
</view> -->
|
||
|
||
<!-- 底部操作栏（完全保留原逻辑和样式） -->
|
||
<view v-if="contract.signStatus === '待签署'" class="bottom-bar">
|
||
<u-button class="sign-btn" @click="goSign">
|
||
去签署
|
||
</u-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
contractNo: null,
|
||
contract: {},
|
||
assetList: [],
|
||
assetPageNo: 1,
|
||
assetPageSize: 1,
|
||
hasMoreAssets: true,
|
||
loadingAsset: false
|
||
}
|
||
},
|
||
|
||
onShow() {
|
||
this.$checkToken(this.$getToken())
|
||
this.getContractDetail()
|
||
},
|
||
|
||
onLoad(options) {
|
||
this.contractNo = options.contractNo
|
||
},
|
||
|
||
onReachBottom() {
|
||
this.loadMoreAssets()
|
||
},
|
||
|
||
computed: {
|
||
baseInfo() {
|
||
return [
|
||
{ label: '合同名称', value: this.contract.contractName || '—' },
|
||
{ label: '签约状态', value: this.contract.signStatus || '—' },
|
||
{
|
||
label: '合同生效期',
|
||
value: this.contract.startDate
|
||
? `${this.contract.startDate} 至 ${this.contract.endDate}`
|
||
: '—'
|
||
},
|
||
{
|
||
label: '电子合同',
|
||
value: '查看',
|
||
hasArrow: true
|
||
}
|
||
]
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
/** 合同详情 + 第一条资产 */
|
||
getContractDetail() {
|
||
this.$u.get(`/contract/detail?contractNo=${this.contractNo}`, {},{
|
||
WT: this.$getToken()
|
||
}).then(res => {
|
||
console.log(res)
|
||
this.contract = res.data || {}
|
||
|
||
// this.assetList = (res.assetsInfos.assets || []).map((item, index) => ({
|
||
// ...item,
|
||
// expanded: index === 0
|
||
// }))
|
||
|
||
// this.hasMoreAssets =
|
||
// this.assetList.length < (res.totalAssets || 0)
|
||
})
|
||
},
|
||
|
||
/** 加载更多资产 */
|
||
loadMoreAssets() {
|
||
if (this.loadingAsset || !this.hasMoreAssets) return
|
||
|
||
this.loadingAsset = true
|
||
this.assetPageNo += 1
|
||
|
||
this.$u.get('/contract/assets', {
|
||
contractNo: this.contractNo,
|
||
pageNo: this.assetPageNo,
|
||
pageSize: this.assetPageSize,
|
||
WT: this.$getToken()
|
||
}).then(res => {
|
||
const list = (res.assets || []).map(item => ({
|
||
...item,
|
||
expanded: false
|
||
}))
|
||
|
||
this.assetList = this.assetList.concat(list)
|
||
this.hasMoreAssets = list.length === this.assetPageSize
|
||
}).finally(() => {
|
||
this.loadingAsset = false
|
||
})
|
||
},
|
||
|
||
/** 折叠 / 展开（手风琴效果） */
|
||
toggleAsset(index) {
|
||
this.assetList.forEach((item, i) => {
|
||
item.expanded = i === index ? !item.expanded : false
|
||
})
|
||
},
|
||
|
||
feeItems(asset) {
|
||
return [
|
||
{ label: '押金/保证金', value: asset.fee?.deposit || '—' },
|
||
{ label: '租金', value: asset.fee?.rent || '—' },
|
||
{ label: '电费', value: asset.fee?.electricity || '—' },
|
||
{ label: '水费', value: asset.fee?.water || '—' },
|
||
{ label: '物业/增值服务', value: asset.fee?.property || '—' }
|
||
]
|
||
},
|
||
|
||
handleClick(item) {
|
||
if (item.label === '电子合同') {
|
||
uni.downloadFile({
|
||
url: this.$config.staticUrl + this.contract.eContractUrl,
|
||
header: {
|
||
'X-Token': this.$getToken(),
|
||
'USERTYPE': this.$getUserType()
|
||
},
|
||
success: res => {
|
||
uni.openDocument({
|
||
filePath: res.tempFilePath,
|
||
fileType: 'pdf'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
|
||
goSign() {
|
||
let url = `/contract/getSignLink?eFlowId=${this.contract.eContractFlowId}`
|
||
let signLink
|
||
this.$u.get(url,{},{
|
||
WT: this.$getToken()
|
||
}).then(res=>{
|
||
if(res.flag) {
|
||
signLink = res.data
|
||
// 开发者微信小程序内通过WebView打开e签宝的认证授权/签署页面
|
||
// 场景二：当前小程序内打开H5页面操作认证授权/签署
|
||
wx.navigateTo({
|
||
url: '/pages-biz/webview/webview?url=' + encodeURIComponent(signLink),
|
||
})
|
||
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.contract-detail-page {
|
||
background: #f7f8fa;
|
||
min-height: 100vh;
|
||
padding-top: 175rpx;
|
||
padding-bottom: 150rpx;
|
||
}
|
||
|
||
.asset-block {
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
margin: 20rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.asset-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 24rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.cover {
|
||
width: 120rpx;
|
||
height: 96rpx;
|
||
border-radius: 8rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.name {
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
|
||
.room {
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
|
||
.section {
|
||
background: #fff;
|
||
border-radius: 12rpx;
|
||
margin: 20rpx;
|
||
padding: 20rpx 24rpx;
|
||
|
||
.section-title {
|
||
font-weight: 500;
|
||
font-size: 40rpx;
|
||
margin-bottom: 12rpx;
|
||
color: #212121;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 40rpx 0;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.label {
|
||
font-size: 30rpx;
|
||
color: #86868c;
|
||
}
|
||
|
||
.value {
|
||
font-size: 30rpx;
|
||
color: #222;
|
||
}
|
||
}
|
||
}
|
||
|
||
.load-more {
|
||
text-align: center;
|
||
padding: 30rpx;
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
|
||
/* 底部按钮样式保持不变 */
|
||
.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;
|
||
}
|
||
|
||
&::v-deep .u-btn {
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
background: linear-gradient(90deg, #ff6f63 0%, #fb392a 100%);
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
|
||
</style>
|