mirror of
http://36.133.248.69:3088/admin/RentWeAppFront.git
synced 2026-03-07 17:32:25 +08:00
通知公告/看房预约/合同签约/退租申请页面样式改版
This commit is contained in:
@@ -204,7 +204,7 @@ export default {
|
||||
font-size: 16px;
|
||||
}
|
||||
.cancel { color: #999; }
|
||||
.confirm { color:#007aff; }
|
||||
.confirm { color:#EA4D3E; }
|
||||
.title { font-weight:bold; }
|
||||
|
||||
.picker-columns {
|
||||
@@ -225,7 +225,7 @@ export default {
|
||||
}
|
||||
|
||||
.item.active {
|
||||
color:#007aff;
|
||||
color:#EA4D3E;
|
||||
font-weight:bold;
|
||||
font-size:18px;
|
||||
}
|
||||
|
||||
@@ -1,23 +1,17 @@
|
||||
<template>
|
||||
|
||||
|
||||
<view class="contract-page">
|
||||
<!-- 顶部导航栏 -->
|
||||
<customNavbar title="我的合同" />
|
||||
|
||||
<!-- Tabs -->
|
||||
<view class="tab-wrapper">
|
||||
<u-tabs :list="tabList" :current="currentTab" @change="onTabChange" lineColor="#2979ff"
|
||||
activeColor="#2979ff" itemStyle="padding: 0 30rpx;"></u-tabs>
|
||||
<u-tabs :list="tabList" :current="currentTab" @change="onTabChange" lineColor="#EA4D3E" activeColor="#EA4D3E"
|
||||
itemStyle="padding: 0 30rpx;"></u-tabs>
|
||||
</view>
|
||||
|
||||
|
||||
<DateFilter
|
||||
:start="startDate"
|
||||
:end="endDate"
|
||||
@update:start="startDate = $event"
|
||||
@update:end="endDate = $event"
|
||||
@change="onDateFilterChange"
|
||||
/>
|
||||
<DateFilter :start="startDate" :end="endDate" @update:start="startDate = $event" @update:end="endDate = $event"
|
||||
@change="onDateFilterChange" />
|
||||
|
||||
<!-- 合同列表 -->
|
||||
<scroll-view scroll-y class="scroll-content" @scrolltolower="loadMore" :refresher-enabled="true"
|
||||
@@ -25,7 +19,7 @@
|
||||
<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>
|
||||
@@ -33,16 +27,16 @@
|
||||
</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>
|
||||
@@ -55,282 +49,281 @@
|
||||
|
||||
|
||||
<script>
|
||||
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"
|
||||
},
|
||||
],
|
||||
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"
|
||||
},
|
||||
],
|
||||
|
||||
currentTab: 0,
|
||||
statusFilter: "all",
|
||||
currentTab: 0,
|
||||
statusFilter: "all",
|
||||
|
||||
// --- 时间筛选 ---
|
||||
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",
|
||||
};
|
||||
// --- 时间筛选 ---
|
||||
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",
|
||||
};
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadContracts(true);
|
||||
},
|
||||
|
||||
methods: {
|
||||
onTabChange(index) {
|
||||
this.currentTab = index;
|
||||
this.statusFilter = this.tabList[index].value;
|
||||
this.resetAndLoad();
|
||||
},
|
||||
onDateFilterChange({ start, end }) {
|
||||
this.resetAndLoad();
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
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}`;
|
||||
},
|
||||
|
||||
resetAndLoad() {
|
||||
this.pageNo = 1;
|
||||
this.contracts = [];
|
||||
this.loadStatus = "loading";
|
||||
this.loadContracts(true);
|
||||
},
|
||||
|
||||
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}`;
|
||||
},
|
||||
/** 你的 loadContracts() 保持不变，只需加：按时间筛选 */
|
||||
loadContracts(isInit = false) {
|
||||
this.loadStatus = "loading";
|
||||
|
||||
resetAndLoad() {
|
||||
this.pageNo = 1;
|
||||
this.contracts = [];
|
||||
this.loadStatus = "loading";
|
||||
this.loadContracts(true);
|
||||
},
|
||||
|
||||
/** 你的 loadContracts() 保持不变，只需加：按时间筛选 */
|
||||
loadContracts(isInit = false) {
|
||||
this.loadStatus = "loading";
|
||||
|
||||
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'
|
||||
}
|
||||
];
|
||||
|
||||
// 状态过滤
|
||||
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 "已过期";
|
||||
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'
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
// 状态过滤
|
||||
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: 120rpx;
|
||||
/* 给导航栏留空间 */
|
||||
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: 24rpx;
|
||||
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: 193rpx;
|
||||
height: 145rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: #FCE5E0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.contract-info {
|
||||
.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;
|
||||
margin-left: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.asset-room {
|
||||
font-size: 26rpx;
|
||||
color: #555;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.date-range {
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
right: 0rpx;
|
||||
padding: 12rpx 15rpx;
|
||||
border-radius: 6rpx;
|
||||
font-size: 26rpx;
|
||||
|
||||
&.pending {
|
||||
background: #FEEDDD;
|
||||
color: #EFA049;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.asset-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
&.signed {
|
||||
background: #FCE5E0;
|
||||
color: #ED7748;
|
||||
}
|
||||
|
||||
.asset-room {
|
||||
font-size: 26rpx;
|
||||
color: #555;
|
||||
margin-top: 10rpx;
|
||||
&.expired {
|
||||
background: #CDCDCD;
|
||||
color: #969696;
|
||||
}
|
||||
}
|
||||
|
||||
.date-range {
|
||||
font-size: 24rpx;
|
||||
color: #888;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
right: 0rpx;
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 24rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
&.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;
|
||||
}
|
||||
.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>
|
||||
@@ -45,14 +45,9 @@
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<view v-if="contract.status === '待签署'" class="bottom-bar">
|
||||
<u-button
|
||||
type="primary"
|
||||
shape="circle"
|
||||
class="sign-btn"
|
||||
@click="goSign"
|
||||
>
|
||||
去签署
|
||||
</u-button>
|
||||
<u-button class="sign-btn" @click="goSign">
|
||||
去签署
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -141,8 +136,10 @@ export default {
|
||||
.contract-detail-page {
|
||||
background: #f7f8fa;
|
||||
min-height: 100vh;
|
||||
padding-top: 175rpx; /* 给导航栏留空间 */
|
||||
padding-bottom: 120rpx; /* 预留底部操作栏空间 */
|
||||
/* 给导航栏留空间 */
|
||||
padding-top: 120rpx;
|
||||
/* 预留底部操作栏空间 */
|
||||
padding-bottom: 150rpx;
|
||||
}
|
||||
|
||||
/* 顶部封面信息 */
|
||||
@@ -154,9 +151,9 @@ export default {
|
||||
margin: 20rpx;
|
||||
|
||||
.cover {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 12rpx;
|
||||
width: 194rpx;
|
||||
height: 156rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
@@ -164,12 +161,12 @@ export default {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.name {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
@@ -188,17 +185,17 @@ export default {
|
||||
padding: 20rpx 24rpx;
|
||||
|
||||
.section-title {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 12rpx;
|
||||
color: #333;
|
||||
color: #212121;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 0;
|
||||
padding: 40rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
&:last-child {
|
||||
@@ -206,8 +203,8 @@ export default {
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
font-size: 30rpx;
|
||||
color: #86868C;
|
||||
}
|
||||
|
||||
.value-box {
|
||||
@@ -215,8 +212,8 @@ export default {
|
||||
align-items: center;
|
||||
|
||||
.value {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-size: 30rpx;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
u-icon {
|
||||
@@ -241,5 +238,13 @@ export default {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
}
|
||||
|
||||
/* 使用样式穿透让u-btn样式生效 */
|
||||
&::v-deep .u-btn {
|
||||
font-size: 30rpx;
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, #FF6F63 0%, #FB392A 100%);
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -135,7 +135,7 @@ export default {
|
||||
background-color: #f6f8fa;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 175rpx;
|
||||
padding-top: 120rpx;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
@@ -159,7 +159,7 @@ export default {
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #007aff;
|
||||
color: #EA4D3E;
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
@@ -191,6 +191,7 @@ export default {
|
||||
font-size: 28rpx;
|
||||
min-height: 140rpx;
|
||||
color: #333;
|
||||
width: 94%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -202,12 +203,13 @@ export default {
|
||||
background-color: #fff;
|
||||
padding: 20rpx 40rpx;
|
||||
box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.08);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: linear-gradient(90deg, #007aff, #00aaff);
|
||||
background: linear-gradient(90deg, #FF6F63 0%, #FB392A 100%);
|
||||
border-radius: 44rpx;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
|
||||
@@ -5,19 +5,17 @@
|
||||
<scroll-view scroll-y style="height: 100%;width: 100%;">
|
||||
<view class="page-box">
|
||||
<view class="tabSwiper" v-for="(item, index) in dataList" :key="item.id" @click="clickContent(item)">
|
||||
<view class="top">
|
||||
<view class="left">
|
||||
<u-icon name="bell" :size="35" color="#2979ff"></u-icon>
|
||||
<u-icon name="bell" :size="35" color="#2979ff" class="bell-icon"></u-icon>
|
||||
<view class="content-wrapper">
|
||||
<view class="top">
|
||||
<view class="title">{{ item.title }}</view>
|
||||
<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
|
||||
<view class="date">{{ item.date }}</view>
|
||||
</view>
|
||||
<view class="right">{{ item.date }}</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="content">
|
||||
<view class="title u-line-2">{{ item.content }}</view>
|
||||
<view class="item">
|
||||
<view class="content u-line-2">{{ item.content }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26" class="arrow-icon"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@@ -28,106 +26,145 @@
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
// 静态公告数据
|
||||
const staticNoticeList = [
|
||||
{
|
||||
id: 1,
|
||||
title: '关于开展2025年度招商工作的通知',
|
||||
date: '2025-01-15',
|
||||
content: '为进一步推进我市招商引资工作，优化营商环境，现就开展2025年度招商工作有关事项通知如下：一、工作目标；二、重点领域；三、保障措施...'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '2024年度招商成果通报',
|
||||
date: '2025-01-10',
|
||||
content: '2024年，我市招商引资工作取得显著成效，共引进各类项目120个，总投资达500亿元，现将具体成果通报如下：一、总体情况；二、主要特点；三、下一步计划...'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '关于举办2025年春季招商推介会的通知',
|
||||
date: '2025-01-05',
|
||||
content: '为搭建投资合作平台，展示我市投资环境和发展机遇，定于2025年3月15日举办春季招商推介会，诚邀各界企业家参会...'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '关于印发《市招商引资优惠政策实施细则》的通知',
|
||||
date: '2024-12-28',
|
||||
content: '为进一步规范招商引资优惠政策的实施，经市政府同意，现将《市招商引资优惠政策实施细则》印发给你们，请认真贯彻执行...'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '关于认定2024年度市重点招商引资项目的通知',
|
||||
date: '2024-12-20',
|
||||
content: '根据《市重点招商引资项目认定管理办法》，经评审，认定以下30个项目为2024年度市重点招商引资项目，现予以公布...'
|
||||
}
|
||||
];
|
||||
return {
|
||||
pageNum:1,
|
||||
pageSize:50,
|
||||
dataList: [],
|
||||
pageNum: 1,
|
||||
pageSize: 50,
|
||||
dataList: staticNoticeList,
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getNoticecList();
|
||||
// 静态数据已在data中初始化，无需调用接口
|
||||
// this.getNoticecList();
|
||||
},
|
||||
methods: {
|
||||
clickContent(item){
|
||||
if(item.id){
|
||||
clickContent(item) {
|
||||
if (item.id) {
|
||||
this.$u.route('/pages/notice/noticeDetail', {
|
||||
id: item.id
|
||||
});
|
||||
}
|
||||
},
|
||||
getNoticecList(){
|
||||
let url = "/notice/findNoticeList";
|
||||
this.$u.get(url,{
|
||||
pageNum:this.pageNum,
|
||||
pageSize:this.pageSize,
|
||||
orderByColumn:'create_time',
|
||||
isAsc:'desc'
|
||||
}).then(obj => {
|
||||
let data = obj.data.result
|
||||
data.filter(item=>{
|
||||
this.dataList.push(
|
||||
{
|
||||
id:item.noticeId,
|
||||
title: item.noticeTitle,
|
||||
date:item.createTime,
|
||||
content: item.reMark,
|
||||
}
|
||||
)
|
||||
})
|
||||
});
|
||||
getNoticecList() {
|
||||
// 静态数据已在data中初始化，无需调用接口
|
||||
// 保留此方法以保持兼容性
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.tabSwiper {
|
||||
width: 710rpx;
|
||||
width: 95%;
|
||||
background-color: #ffffff;
|
||||
margin: 20rpx auto;
|
||||
border-radius: 20rpx;
|
||||
margin: 16rpx auto;
|
||||
border-radius: 12rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx;
|
||||
font-size: 28rpx;
|
||||
padding: 32rpx;
|
||||
box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
transition: all 0.2s ease;
|
||||
border: 1rpx solid #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.bell-icon {
|
||||
margin-right: 32rpx;
|
||||
flex-shrink: 0;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
margin-left: 24rpx;
|
||||
flex-shrink: 0;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.title {
|
||||
margin: 0 10rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
align-items: flex-start;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
line-height: 38rpx;
|
||||
flex: 1;
|
||||
}
|
||||
.right {
|
||||
color: $u-tips-color;
|
||||
|
||||
.date {
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
flex-shrink: 0;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
top: 15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
margin: 20rpx 0 0;
|
||||
.left {
|
||||
margin-right: 20rpx;
|
||||
image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
margin-left: 10rpx;
|
||||
padding-top: 20rpx;
|
||||
text-align: right;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: #666666;
|
||||
letter-spacing: 0.5rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - var(--window-top));
|
||||
width: 100%;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
.swiper-box {
|
||||
flex: 1;
|
||||
}
|
||||
.swiper-item {
|
||||
height: 100%;
|
||||
|
||||
.page-box {
|
||||
padding: 16rpx 0 40rpx 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -18,12 +18,9 @@
|
||||
:key="item.id"
|
||||
class="record-card"
|
||||
>
|
||||
<!-- 顶部时间 + 状态 -->
|
||||
<view class="record-header">
|
||||
<view class="time-box">
|
||||
<u-icon name="clock" size="32" color="#999" />
|
||||
<text class="record-time">{{ item.date }}</text>
|
||||
</view>
|
||||
<!-- 资产名称和状态 -->
|
||||
<view class="card-header">
|
||||
<text class="asset-name">{{ item.assetName }}</text>
|
||||
<text
|
||||
:class="['record-status', item.status]"
|
||||
>
|
||||
@@ -32,42 +29,41 @@
|
||||
</view>
|
||||
|
||||
<!-- 内容部分 -->
|
||||
<view class="record-body">
|
||||
<!-- 资产名称 -->
|
||||
<view class="info-line">
|
||||
<text class="info-text">资产名称：{{ item.assetName }}</text>
|
||||
<view class="card-content">
|
||||
<!-- 预约时间 -->
|
||||
<view class="info-item">
|
||||
<text class="info-label">预约时间：</text>
|
||||
<text class="info-value">{{ formatDate(item.date) }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 资产地址 + 查看位置按钮 -->
|
||||
<view class="info-line">
|
||||
<text class="info-text">地址：{{ item.assetAddress }}</text>
|
||||
<u-button
|
||||
class="map-btn"
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="viewLocation(item)"
|
||||
icon="map"
|
||||
>
|
||||
查看位置
|
||||
</u-button>
|
||||
<!-- 地址 -->
|
||||
<view class="info-item">
|
||||
<text class="info-label">地址：</text>
|
||||
<text class="info-value">{{ item.assetAddress }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 管家信息 + 拨号按钮 -->
|
||||
<view class="info-line">
|
||||
<text class="info-text">
|
||||
管家：{{ item.managerName }}（{{ item.managerPhone }}）
|
||||
</text>
|
||||
<u-button
|
||||
class="call-btn"
|
||||
size="mini"
|
||||
type="success"
|
||||
icon="phone"
|
||||
@click="callManager(item.managerPhone)"
|
||||
>
|
||||
拨打电话
|
||||
</u-button>
|
||||
<!-- 管家 -->
|
||||
<view class="info-item">
|
||||
<text class="info-label">管家：</text>
|
||||
<text class="info-value">{{ item.managerName }}（{{ item.managerPhone }}）</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<button
|
||||
class="location-btn"
|
||||
@click="viewLocation(item)"
|
||||
>
|
||||
查看位置
|
||||
</button>
|
||||
<button
|
||||
class="call-btn"
|
||||
@click="callManager(item.managerPhone)"
|
||||
>
|
||||
拨打电话
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-loadmore :status="loadStatus" />
|
||||
@@ -123,6 +119,19 @@ export default {
|
||||
return '未知';
|
||||
}
|
||||
},
|
||||
formatDate(dateStr) {
|
||||
// 格式化日期，例如：2025-11-10 周五 09:00
|
||||
const date = new Date(dateStr);
|
||||
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const weekday = weekdays[date.getDay()];
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
|
||||
return `${year}-${month}-${day} ${weekday} ${hours}:${minutes}`;
|
||||
},
|
||||
viewLocation(item) {
|
||||
uni.openLocation({
|
||||
latitude: item.lat,
|
||||
@@ -153,9 +162,9 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.reserve-records {
|
||||
background: #f8f8f8;
|
||||
background: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-top: 175rpx; /* 给导航栏留空间 */
|
||||
padding-top: 120rpx; /* 给导航栏留空间 */
|
||||
}
|
||||
|
||||
.scroll-content {
|
||||
@@ -163,76 +172,107 @@ export default {
|
||||
}
|
||||
|
||||
.record-list {
|
||||
padding: 20rpx;
|
||||
padding: 30rpx 40rpx;
|
||||
}
|
||||
|
||||
.record-card {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
border-radius: 12rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 30rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.record-header {
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.time-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
.asset-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #2D2B2C;
|
||||
}
|
||||
|
||||
.record-status {
|
||||
font-size: 26rpx;
|
||||
padding: 10rpx 15rpx;
|
||||
border-radius: 4rpx;
|
||||
&.done {
|
||||
background: #FCE5E0;
|
||||
color: #ED7748;
|
||||
}
|
||||
|
||||
.record-time {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.record-status {
|
||||
font-size: 26rpx;
|
||||
padding: 4rpx 14rpx;
|
||||
border-radius: 24rpx;
|
||||
&.done {
|
||||
background: #e8f5e9;
|
||||
color: #4caf50;
|
||||
}
|
||||
&.pending {
|
||||
background: #fffbe6;
|
||||
color: #ff9800;
|
||||
}
|
||||
&.pending {
|
||||
background: #F2F3F7;
|
||||
color: #86868C;
|
||||
}
|
||||
}
|
||||
|
||||
.record-body {
|
||||
.card-content {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.info-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
.info-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
flex: 1;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.info-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
width: 120rpx;
|
||||
flex-shrink: 0;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
u-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.info-value {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
|
||||
u-button {
|
||||
flex-shrink: 0;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 20rpx;
|
||||
margin-top: 32rpx;
|
||||
padding-top: 32rpx;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.location-btn {
|
||||
width: 220rpx;
|
||||
height: 72rpx;
|
||||
background: #fff;
|
||||
color: #2D2B2C;
|
||||
font-size: 28rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #222222;
|
||||
}
|
||||
|
||||
.call-btn {
|
||||
width: 220rpx;
|
||||
height: 72rpx;
|
||||
background: #ff3b30;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.empty {
|
||||
|
||||
Reference in New Issue
Block a user