mirror of
http://36.133.248.69:3088/admin/RentWeAppFront.git
synced 2026-03-09 10:22:25 +08:00
调整ui
This commit is contained in:
@@ -1,264 +1,336 @@
|
||||
<template>
|
||||
<view class="contract-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<customNavbar title="我的合同"/>
|
||||
<!-- 顶部筛选栏 -->
|
||||
<u-tabs
|
||||
:list="tabList"
|
||||
:current="currentTab"
|
||||
@change="onTabChange"
|
||||
lineColor="#2979ff"
|
||||
activeColor="#2979ff"
|
||||
></u-tabs>
|
||||
|
||||
<view class="contract-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<customNavbar title="我的合同" />
|
||||
|
||||
<!-- 合同列表 -->
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="scroll-content"
|
||||
@scrolltolower="loadMore"
|
||||
:refresher-enabled="true"
|
||||
:refresher-triggered="isRefreshing"
|
||||
@refresherrefresh="refresh"
|
||||
>
|
||||
<view v-if="contracts.length > 0" class="contract-list">
|
||||
<view
|
||||
class="contract-card"
|
||||
v-for="item in contracts"
|
||||
:key="item.id"
|
||||
@click="goDetail(item)"
|
||||
>
|
||||
<!-- 左侧封面图 -->
|
||||
<image
|
||||
class="contract-cover"
|
||||
:src="item.coverUrl || defaultCover"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<!-- Tabs -->
|
||||
<view class="tab-wrapper">
|
||||
<u-tabs :list="tabList" :current="currentTab" @change="onTabChange" lineColor="#2979ff"
|
||||
activeColor="#2979ff" itemStyle="padding: 0 30rpx;"></u-tabs>
|
||||
</view>
|
||||
|
||||
<!-- 右侧信息 -->
|
||||
<view class="contract-info">
|
||||
<view class="top-row">
|
||||
<text class="asset-name">{{ item.assetName }}</text>
|
||||
<u-icon name="arrow-right" size="28" color="#ccc" />
|
||||
</view>
|
||||
<view class="asset-room">{{ item.assetRoom || '—' }}</view>
|
||||
<view class="date-range">{{ item.startDate }} ~ {{ item.endDate }}</view>
|
||||
|
||||
<DateFilter
|
||||
:start="startDate"
|
||||
:end="endDate"
|
||||
@update:start="startDate = $event"
|
||||
@update:end="endDate = $event"
|
||||
@change="onDateFilterChange"
|
||||
/>
|
||||
|
||||
<view :class="['status-tag', item.status]">
|
||||
{{ getStatusText(item.status) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 合同列表 -->
|
||||
<scroll-view scroll-y class="scroll-content" @scrolltolower="loadMore" :refresher-enabled="true"
|
||||
:refresher-triggered="isRefreshing" @refresherrefresh="refresh">
|
||||
<view v-if="contracts.length > 0" class="contract-list">
|
||||
<view class="contract-card" v-for="item in contracts" :key="item.id" @click="goDetail(item)">
|
||||
<image class="contract-cover" :src="item.coverUrl || defaultCover" mode="aspectFill" />
|
||||
|
||||
<view class="contract-info">
|
||||
<view class="top-row">
|
||||
<text class="asset-name">{{ item.assetName }}</text>
|
||||
<u-icon name="arrow-right" size="28" color="#ccc" />
|
||||
</view>
|
||||
<view class="asset-room">{{ item.assetRoom || "—" }}</view>
|
||||
<view class="date-range">{{ item.startDate }} ~ {{ item.endDate }}</view>
|
||||
|
||||
<view :class="['status-tag', item.status]">
|
||||
{{ getStatusText(item.status) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-loadmore :status="loadStatus" />
|
||||
</view>
|
||||
|
||||
<view v-else class="empty">
|
||||
<u-empty mode="list" text="暂无合同记录" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<u-loadmore :status="loadStatus" />
|
||||
</view>
|
||||
|
||||
<view v-else class="empty">
|
||||
<u-empty mode="list" text="暂无合同记录" />
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabList: [
|
||||
{ name: '全部', value: 'all' },
|
||||
{ name: '待签署', value: 'pending' },
|
||||
{ name: '已签署', value: 'signed' },
|
||||
{ name: '已过期', value: 'expired' }
|
||||
],
|
||||
currentTab: 0,
|
||||
statusFilter: 'all',
|
||||
import DateFilter from '../../components/DatePicker/DateFilter.vue';
|
||||
export default {
|
||||
components: { DateFilter },
|
||||
data() {
|
||||
return {
|
||||
tabList: [{
|
||||
name: "全部",
|
||||
value: "all"
|
||||
},
|
||||
{
|
||||
name: "待签署",
|
||||
value: "pending"
|
||||
},
|
||||
{
|
||||
name: "已签署",
|
||||
value: "signed"
|
||||
},
|
||||
{
|
||||
name: "已过期",
|
||||
value: "expired"
|
||||
},
|
||||
],
|
||||
|
||||
contracts: [],
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
loadStatus: 'loadmore',
|
||||
isRefreshing: false,
|
||||
defaultCover: '/static/img/index/swiper/swiper3.jpg' // 可换成你的默认封面
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.loadContracts();
|
||||
},
|
||||
methods: {
|
||||
onTabChange(index) {
|
||||
this.currentTab = index;
|
||||
this.statusFilter = this.tabList[index].value;
|
||||
this.pageNo = 1;
|
||||
this.contracts = [];
|
||||
this.loadContracts();
|
||||
},
|
||||
currentTab: 0,
|
||||
statusFilter: "all",
|
||||
|
||||
loadContracts() {
|
||||
this.loadStatus = 'loading';
|
||||
setTimeout(() => {
|
||||
const allData = [
|
||||
{
|
||||
id: 1,
|
||||
assetName: '金辉大厦',
|
||||
assetRoom: '502',
|
||||
coverUrl: '/static/img/index/swiper/swiper3.jpg',
|
||||
status: 'pending',
|
||||
startDate: '2025-01-01',
|
||||
endDate: '2025-12-31'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
assetName: '东方广场',
|
||||
assetRoom: '',
|
||||
coverUrl: '/static/img/index/swiper/swiper3.jpg',
|
||||
status: 'signed',
|
||||
startDate: '2024-03-01',
|
||||
endDate: '2025-03-01'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
assetName: '海景公寓',
|
||||
assetRoom: 'A-1201',
|
||||
coverUrl: '/static/img/index/swiper/swiper3.jpg',
|
||||
status: 'expired',
|
||||
startDate: '2023-01-01',
|
||||
endDate: '2024-01-01'
|
||||
}
|
||||
];
|
||||
// --- 时间筛选 ---
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
// 可选：限制日期范围
|
||||
minDate: "2000-01-01",
|
||||
maxDate: "2099-12-31",
|
||||
contracts: [],
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
loadStatus: "loadmore",
|
||||
isRefreshing: false,
|
||||
defaultCover: "/static/img/index/swiper/swiper3.jpg",
|
||||
};
|
||||
},
|
||||
|
||||
const filtered =
|
||||
this.statusFilter === 'all'
|
||||
? allData
|
||||
: allData.filter(i => i.status === this.statusFilter);
|
||||
onLoad() {
|
||||
this.loadContracts(true);
|
||||
},
|
||||
|
||||
this.contracts = filtered;
|
||||
this.loadStatus = 'nomore';
|
||||
this.isRefreshing = false;
|
||||
}, 400);
|
||||
},
|
||||
methods: {
|
||||
onTabChange(index) {
|
||||
this.currentTab = index;
|
||||
this.statusFilter = this.tabList[index].value;
|
||||
this.resetAndLoad();
|
||||
},
|
||||
onDateFilterChange({ start, end }) {
|
||||
this.resetAndLoad();
|
||||
},
|
||||
|
||||
formatDate(time) {
|
||||
const d = new Date(time);
|
||||
const m = String(d.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(d.getDate()).padStart(2, "0");
|
||||
return `${d.getFullYear()}-${m}-${day}`;
|
||||
},
|
||||
|
||||
refresh() {
|
||||
this.isRefreshing = true;
|
||||
this.pageNo = 1;
|
||||
this.loadContracts();
|
||||
},
|
||||
resetAndLoad() {
|
||||
this.pageNo = 1;
|
||||
this.contracts = [];
|
||||
this.loadStatus = "loading";
|
||||
this.loadContracts(true);
|
||||
},
|
||||
|
||||
loadMore() {
|
||||
if (this.loadStatus === 'nomore') return;
|
||||
this.pageNo++;
|
||||
this.loadContracts();
|
||||
},
|
||||
/** 你的 loadContracts() 保持不变，只需加：按时间筛选 */
|
||||
loadContracts(isInit = false) {
|
||||
this.loadStatus = "loading";
|
||||
|
||||
goDetail(item) {
|
||||
console.log('跳转合同详情页')
|
||||
uni.navigateTo({
|
||||
url: `/pages/detail/contractDetail?id=${item.id}`
|
||||
});
|
||||
},
|
||||
setTimeout(() => {
|
||||
let mockAll = [{
|
||||
id: 1,
|
||||
assetName: '金辉大厦',
|
||||
assetRoom: '502',
|
||||
coverUrl: '',
|
||||
status: 'pending',
|
||||
startDate: '2025-01-01',
|
||||
endDate: '2025-12-31'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
assetName: '东方广场',
|
||||
assetRoom: '',
|
||||
status: 'signed',
|
||||
startDate: '2024-03-01',
|
||||
endDate: '2025-03-01'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
assetName: '海景公寓',
|
||||
assetRoom: 'A-1201',
|
||||
status: 'expired',
|
||||
startDate: '2023-01-01',
|
||||
endDate: '2024-01-01'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
assetName: '富力中心',
|
||||
assetRoom: '1699',
|
||||
status: 'pending',
|
||||
startDate: '2024-10-01',
|
||||
endDate: '2025-10-01'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
assetName: '财富大厦',
|
||||
assetRoom: '2308',
|
||||
status: 'signed',
|
||||
startDate: '2023-06-01',
|
||||
endDate: '2024-06-01'
|
||||
}
|
||||
];
|
||||
|
||||
getStatusText(status) {
|
||||
switch (status) {
|
||||
case 'pending':
|
||||
return '待签署';
|
||||
case 'signed':
|
||||
return '已签署';
|
||||
case 'expired':
|
||||
return '已过期';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// 状态过滤
|
||||
if (this.statusFilter !== "all") {
|
||||
mockAll = mockAll.filter(i => i.status === this.statusFilter);
|
||||
}
|
||||
|
||||
// 时间过滤
|
||||
if (this.startDate) mockAll = mockAll.filter(i => i.startDate >= this.startDate);
|
||||
if (this.endDate) mockAll = mockAll.filter(i => i.endDate <= this.endDate);
|
||||
|
||||
// 分页
|
||||
this.total = mockAll.length;
|
||||
const start = (this.pageNo - 1) * this.pageSize;
|
||||
const pageList = mockAll.slice(start, start + this.pageSize);
|
||||
|
||||
if (this.pageNo === 1) {
|
||||
this.contracts = pageList;
|
||||
} else {
|
||||
this.contracts = [...this.contracts, ...pageList];
|
||||
}
|
||||
|
||||
this.loadStatus = this.contracts.length >= this.total ? "nomore" : "loadmore";
|
||||
this.isRefreshing = false;
|
||||
}, 400);
|
||||
},
|
||||
|
||||
refresh() {
|
||||
this.isRefreshing = true;
|
||||
this.resetAndLoad();
|
||||
},
|
||||
|
||||
loadMore() {
|
||||
if (this.loadStatus !== "loadmore") return;
|
||||
this.pageNo++;
|
||||
this.loadContracts();
|
||||
},
|
||||
|
||||
goDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/detail/contractDetail?id=${item.id}`,
|
||||
});
|
||||
},
|
||||
|
||||
getStatusText(status) {
|
||||
switch (status) {
|
||||
case "pending":
|
||||
return "待签署";
|
||||
case "signed":
|
||||
return "已签署";
|
||||
case "expired":
|
||||
return "已过期";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contract-page {
|
||||
background-color: #f8f8f8;
|
||||
padding-top: 175rpx; /* 给导航栏留空间 */
|
||||
min-height: 100vh;
|
||||
}
|
||||
.contract-page {
|
||||
background-color: #f8f8f8;
|
||||
padding-top: 175rpx;
|
||||
/* 给导航栏留空间 */
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.scroll-content {
|
||||
height: calc(100vh - 100rpx);
|
||||
}
|
||||
.scroll-content {
|
||||
height: calc(100vh - 100rpx);
|
||||
}
|
||||
|
||||
.contract-list {
|
||||
padding: 20rpx;
|
||||
}
|
||||
.contract-list {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.contract-card {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
}
|
||||
.contract-card {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.contract-cover {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.contract-cover {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.contract-info {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
.contract-info {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.asset-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.top-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.asset-room {
|
||||
font-size: 26rpx;
|
||||
color: #555;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.asset-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.date-range {
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.asset-room {
|
||||
font-size: 26rpx;
|
||||
color: #555;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
right: 0rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 24rpx;
|
||||
font-size: 24rpx;
|
||||
.date-range {
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
&.pending {
|
||||
background: #fff8e1;
|
||||
color: #ff9800;
|
||||
}
|
||||
&.signed {
|
||||
background: #e8f5e9;
|
||||
color: #4caf50;
|
||||
}
|
||||
&.expired {
|
||||
background: #fbe9e7;
|
||||
color: #e53935;
|
||||
}
|
||||
}
|
||||
.status-tag {
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
right: 0rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 24rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
.empty {
|
||||
margin-top: 200rpx;
|
||||
}
|
||||
</style>
|
||||
&.pending {
|
||||
background: #fff8e1;
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
&.signed {
|
||||
background: #e8f5e9;
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
&.expired {
|
||||
background: #fbe9e7;
|
||||
color: #e53935;
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
margin-top: 200rpx;
|
||||
}
|
||||
|
||||
.tab-wrapper {
|
||||
background-color: #ffffff;
|
||||
padding: 10rpx 0;
|
||||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.06);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user