通知公告/看房预约/合同签约/退租申请页面样式改版

This commit is contained in:
2025-12-26 17:39:00 +08:00
parent dac2ae956d
commit fb8a6cc27e
6 changed files with 534 additions and 457 deletions

View File

@@ -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;
}

View File

@@ -6,18 +6,12 @@
<!-- 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"
@@ -232,7 +226,7 @@
<style lang="scss" scoped>
.contract-page {
background-color: #f8f8f8;
padding-top: 175rpx;
padding-top: 120rpx;
/* 给导航栏留空间 */
min-height: 100vh;
}
@@ -249,17 +243,17 @@
display: flex;
background: #fff;
border-radius: 16rpx;
margin-bottom: 20rpx;
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;
width: 193rpx;
height: 145rpx;
border-radius: 10rpx;
background-color: #FCE5E0;
flex-shrink: 0;
}
@@ -287,36 +281,36 @@
.asset-room {
font-size: 26rpx;
color: #555;
margin-top: 10rpx;
margin-top: 18rpx;
}
.date-range {
font-size: 24rpx;
color: #888;
margin-top: 8rpx;
margin-top: 20rpx;
}
.status-tag {
position: absolute;
bottom: 10rpx;
bottom: 20rpx;
right: 0rpx;
padding: 6rpx 16rpx;
border-radius: 24rpx;
font-size: 24rpx;
padding: 12rpx 15rpx;
border-radius: 6rpx;
font-size: 26rpx;
&.pending {
background: #fff8e1;
color: #ff9800;
background: #FEEDDD;
color: #EFA049;
}
&.signed {
background: #e8f5e9;
color: #4caf50;
background: #FCE5E0;
color: #ED7748;
}
&.expired {
background: #fbe9e7;
color: #e53935;
background: #CDCDCD;
color: #969696;
}
}
@@ -332,5 +326,4 @@
top: 0;
z-index: 10;
}
</style>

View File

@@ -45,12 +45,7 @@
<!-- 底部操作栏 -->
<view v-if="contract.status === '待签署'" class="bottom-bar">
<u-button
type="primary"
shape="circle"
class="sign-btn"
@click="goSign"
>
<u-button class="sign-btn" @click="goSign">
去签署
</u-button>
</view>
@@ -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>

View File

@@ -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;

View File

@@ -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)">
<u-icon name="bell" :size="35" color="#2979ff" class="bell-icon"></u-icon>
<view class="content-wrapper">
<view class="top">
<view class="left">
<u-icon name="bell" :size="35" color="#2979ff"></u-icon>
<view class="title">{{ item.title }}</view>
<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
</view>
<view class="right">{{ item.date }}</view>
<view class="date">{{ item.date }}</view>
</view>
<view class="item">
<view class="content">
<view class="title u-line-2">{{ item.content }}</view>
<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,14 +26,48 @@
<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: [],
dataList: staticNoticeList,
};
},
onLoad() {
this.getNoticecList();
// 静态数据已在data中初始化无需调用接口
// this.getNoticecList();
},
methods: {
clickContent(item) {
@@ -46,88 +78,93 @@ export default {
}
},
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,
}
)
})
});
// 静态数据已在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;
}
}
.right {
color: $u-tips-color;
}
}
.item {
display: flex;
margin: 20rpx 0 0;
.left {
margin-right: 20rpx;
image {
width: 200rpx;
height: 200rpx;
border-radius: 10rpx;
}
}
.content {
align-items: flex-start;
margin-top: 20rpx;
.title {
font-size: 28rpx;
line-height: 50rpx;
font-weight: 600;
color: #1a1a1a;
line-height: 38rpx;
flex: 1;
}
.date {
color: #999999;
font-size: 26rpx;
flex-shrink: 0;
position: absolute;
right: 30rpx;
top: 15rpx;
}
}
.right {
margin-left: 10rpx;
padding-top: 20rpx;
text-align: right;
.item {
.content {
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>

View File

@@ -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,41 +29,40 @@
</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"
<!-- 地址 -->
<view class="info-item">
<text class="info-label">地址</text>
<text class="info-value">{{ item.assetAddress }}</text>
</view>
<!-- 管家 -->
<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)"
icon="map"
>
查看位置
</u-button>
</view>
<!-- 管家信息 + 拨号按钮 -->
<view class="info-line">
<text class="info-text">
管家{{ item.managerName }}{{ item.managerPhone }}
</text>
<u-button
</button>
<button
class="call-btn"
size="mini"
type="success"
icon="phone"
@click="callManager(item.managerPhone)"
>
拨打电话
</u-button>
</view>
</button>
</view>
</view>
@@ -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;
.time-box {
display: flex;
align-items: center;
gap: 8rpx;
margin-bottom: 24rpx;
}
.record-time {
font-size: 28rpx;
color: #666;
.asset-name {
font-size: 32rpx;
font-weight: 500;
color: #2D2B2C;
}
.record-status {
font-size: 26rpx;
padding: 4rpx 14rpx;
border-radius: 24rpx;
padding: 10rpx 15rpx;
border-radius: 4rpx;
&.done {
background: #e8f5e9;
color: #4caf50;
background: #FCE5E0;
color: #ED7748;
}
&.pending {
background: #fffbe6;
color: #ff9800;
}
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 {
.info-item:last-child {
margin-bottom: 0;
}
.info-label {
font-size: 24rpx;
color: #666;
width: 120rpx;
flex-shrink: 0;
line-height: 44rpx;
}
.info-value {
font-size: 24rpx;
color: #333;
flex: 1;
line-height: 44rpx;
}
.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: space-between;
gap: 10rpx;
justify-content: center;
box-sizing: border-box;
border: 1px solid #222222;
}
.call-btn {
width: 220rpx;
height: 72rpx;
background: #ff3b30;
color: #fff;
font-size: 28rpx;
color: #333;
.info-text {
flex: 1;
line-height: 1.6;
}
u-icon {
flex-shrink: 0;
}
u-button {
flex-shrink: 0;
margin-left: 10rpx;
}
}
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border: none;
}
.empty {