zhouyanli/property-resident-side
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改引导页、活动列表自适应样式

Browse Source
This commit is contained in:
zhouyanli
2026-05-18 17:48:43 +08:00
parent 8ee170f78b
commit aa5453c0be
6 changed files with 285 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
property-uniapp-project/pageSubPack/activity-list/activityList.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<view class="container"> <view class="container">
<view class="status_bar"></view> <view class="status-bar"></view>
<!-- 顶部标题栏 固定 --> <!-- 顶部标题栏 固定 -->
<view class="top-bar"> <view class="top-bar">
<uni-nav-bar left-icon="left" title="活动列表" backgroundColor="none" :border="false" <uni-nav-bar left-icon="left" title="活动列表" backgroundColor="none" :border="false" :statusBar="false"
@clickLeft="narBack" /> @clickLeft="narBack" />
</view> </view>
@@ -11,9 +11,8 @@
<scroll-view class="scroll-container" scroll-y="true" @scrolltolower="loadMoreData" <scroll-view class="scroll-container" scroll-y="true" @scrolltolower="loadMoreData"
:lower-threshold="100"> :lower-threshold="100">
<!-- 顶部图片 --> <!-- 顶部图片 -->
<view class="topImg"> <view class="top-img">
<image src="http://47.104.199.163:9090/images/home/banner.png" <image class="banner-img" src="http://47.104.199.163:9090/images/home/banner.png" mode="aspectFill"></image>
style="width: 100%;height:100%;"></image>
</view> </view>
<!-- 选项卡 --> <!-- 选项卡 -->
@@ -62,12 +61,11 @@
</view> </view>
<view class="activity-info"> <view class="activity-info">
<view class="u-demo-block__content "> <view class="u-demo-block__content">
<up-row justify="space-between" customStyle="margin-bottom: 10px"> <up-row justify="space-between" customStyle="margin-bottom: 10px">
<up-col span="4"> <up-col span="4">
<view class="info-image-left"> <view class="info-image-left">
<image :src="activity.coverImage" <image :src="activity.coverImage" style="width: 100%;height: 100%;"></image>
style="width: 100%;height: 100%;"></image>
</view> </view>
</up-col> </up-col>
<up-col span="8"> <up-col span="8">
@@ -218,7 +216,7 @@ const getActivityListData = async (pageNum = 1) => {
if (res.code === 200) { if (res.code === 200) {
const list = res.rows || [] const list = res.rows || []
total.value = res.total || 0 total.value = res.total || 0
// 第一页覆盖数据，下一页追加数据 // 第一页覆盖数据，下一页追加数据
if (pageNum === 1) { if (pageNum === 1) {
displayedActivities.value = list displayedActivities.value = list
@@ -336,9 +334,12 @@ watch(() => myFilter.value, () => {
padding: 0; padding: 0;
} }
.status_bar { /* 状态栏 - 自适应设备状态栏高度 */
.status-bar {
/* height: var(--status-bar-height); */
height: 46px; height: 46px;
width: 100%; width: 100%;
flex-shrink: 0;
} }
/* 顶部标题 固定 */ /* 顶部标题 固定 */
@@ -353,35 +354,42 @@ watch(() => myFilter.value, () => {
flex: 1; flex: 1;
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
padding: 0 40rpx; padding: 0 30rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.topImg { /* 顶部图片 */
.top-img {
width: 100%; width: 100%;
height: 280rpx; height: 280rpx;
margin: 20rpx 0; margin: 20rpx 0;
} }
.banner-img {
width: 100%;
height: 100%;
border-radius: 16rpx;
}
/* 顶部选项卡 */ /* 顶部选项卡 */
.tabs-container { .tabs-container {
display: flex; display: flex;
top: 0; top: 0;
z-index: 10; z-index: 10;
margin-bottom: 20rpx margin-bottom: 20rpx;
} }
.tab-item { .tab-item {
flex: 1; display: flex;
text-align: center; text-align: center;
padding: 20rpx 0; padding: 20rpx 32rpx;
font-size: 32rpx; font-size: 32rpx;
color: #666; color: #666;
position: relative; position: relative;
} }
.tab-item.active { .tab-item.active {
color: #007AFF; color: #2F77FD;
font-weight: 500; font-weight: 500;
} }
@@ -391,8 +399,9 @@ watch(() => myFilter.value, () => {
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 120rpx; width: 120rpx;
height: 6rpx; height: 8rpx;
background-color: #007AFF; background: linear-gradient(to bottom, #2F77FD, #CEDFFF);
/* background-color: #2F77FD; */
border-radius: 4rpx; border-radius: 4rpx;
} }
@@ -400,7 +409,7 @@ watch(() => myFilter.value, () => {
.filter-container { .filter-container {
background-color: #fff; background-color: #fff;
padding: 20rpx 0; padding: 20rpx 0;
border-bottom: 1px solid #eee; border-bottom: 1rpx solid #eee;
} }
.filter-scroll { .filter-scroll {
@@ -410,7 +419,7 @@ watch(() => myFilter.value, () => {
.filter-buttons { .filter-buttons {
display: inline-flex; display: inline-flex;
padding: 0 30rpx; padding: 0 10rpx;
} }
.filter-btn { .filter-btn {
@@ -421,7 +430,9 @@ watch(() => myFilter.value, () => {
color: #666; color: #666;
background-color: #f8f8f8; background-color: #f8f8f8;
border-radius: 25rpx; border-radius: 25rpx;
border: 1px solid #eee; border: 1rpx solid #eee;
white-space: nowrap;
flex-shrink: 0;
} }
.filter-btn.active { .filter-btn.active {
@@ -441,9 +452,9 @@ watch(() => myFilter.value, () => {
border-radius: 16rpx; border-radius: 16rpx;
padding: 30rpx; padding: 30rpx;
margin-bottom: 30rpx; margin-bottom: 30rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); /* box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); */
position: relative; position: relative;
border: 1px solid #e1e1e1; border: 1rpx solid #e1e1e1;
} }
/* 活动状态标签 */ /* 活动状态标签 */
@@ -471,6 +482,7 @@ watch(() => myFilter.value, () => {
font-size: 22rpx; font-size: 22rpx;
border-radius: 20rpx; border-radius: 20rpx;
z-index: 1; z-index: 1;
background-color: rgba(0, 122, 255, 0.08);
} }
.signed-badge text { .signed-badge text {
@@ -479,9 +491,10 @@ watch(() => myFilter.value, () => {
/* 活动信息 */ /* 活动信息 */
.activity-info { .activity-info {
margin-top: 10rpx; padding-top: 50rpx;
} }
/* 活动信息 */
.info-image-left { .info-image-left {
width: 170rpx; width: 170rpx;
height: 220rpx; height: 220rpx;
@@ -491,15 +504,19 @@ watch(() => myFilter.value, () => {
font-size: 30rpx; font-size: 30rpx;
font-weight: 500; font-weight: 500;
color: #222; color: #222;
margin-bottom: 30rpx; margin-bottom: 20rpx;
line-height: 1.4; line-height: 1.4;
padding-right: 100rpx; word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} }
.activity-detail { .activity-detail {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
margin-bottom: 20rpx; margin-bottom: 16rpx;
color: #999; color: #999;
font-size: 24rpx; font-size: 24rpx;
line-height: 1.4; line-height: 1.4;
@@ -520,25 +537,27 @@ watch(() => myFilter.value, () => {
flex: 1; flex: 1;
font-size: 20rpx; font-size: 20rpx;
} }
.detail-text-address{
.detail-text-address {
flex: 1; flex: 1;
font-size: 22rpx; font-size: 22rpx;
} }
/* 操作按钮 */ /* 操作按钮 */
.action-buttons { .action-buttons {
margin-top: 30rpx; margin-top: 20rpx;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
.action-btn { .action-btn {
padding: 0px 26rpx; padding: 0 26rpx;
height: 50rpx; height: 56rpx;
line-height: 50rpx; line-height: 56rpx;
font-size: 22rpx; font-size: 24rpx;
border-radius: 10rpx; border-radius: 28rpx;
margin: 0; margin: 0;
min-width: 140rpx;
} }
.signup-btn { .signup-btn {
@@ -618,4 +637,4 @@ watch(() => myFilter.value, () => {
margin-top: 20rpx; margin-top: 20rpx;
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
</style> </style>

298
property-uniapp-project/pageSubPack/activity-list/activityListDetails.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<view class="container"> <view class="container">
<view class="status_bar"></view> <view class="status_bar"></view>
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<view class="nav-bar"> <view class="nav-bar">
<view class="nav-left" @tap="goBack"> <view class="nav-left" @tap="goBack">
@@ -9,21 +9,21 @@
<view class="nav-title">{{navTitle}}</view> <view class="nav-title">{{navTitle}}</view>
<view class="nav-right"></view> <view class="nav-right"></view>
</view> </view>
<!-- 内容区域 --> <!-- 内容区域 -->
<scroll-view class="scroll-content" scroll-y="true"> <scroll-view class="scroll-content" scroll-y="true">
<!-- 选项卡 --> <!-- 选项卡 -->
<view class="tabs"> <view class="tabs">
<view <view
class="tab-item" class="tab-item"
:class="{ 'active': activeTab === 'detail' }" :class="{ 'active': activeTab === 'detail' }"
@tap="switchTab('detail')" @tap="switchTab('detail')"
> >
活动详情 活动详情
</view> </view>
<view <view
class="tab-item" class="tab-item"
:class="{ 'active': activeTab === 'status' }" :class="{ 'active': activeTab === 'status' }"
@tap="switchTab('status')" @tap="switchTab('status')"
> >
@@ -39,46 +39,46 @@
<view class="info-label">报名截止时间</view> <view class="info-label">报名截止时间</view>
<view class="info-value">{{formatTime(activityConent.applyDeadline)}}</view> <view class="info-value">{{formatTime(activityConent.applyDeadline)}}</view>
</view> </view>
<view class="info-item"> <view class="info-item">
<view class="info-label">活动时间</view> <view class="info-label">活动时间</view>
<view class="info-value"> <view class="info-value">
<text>{{formatTime(activityConent.startTime)}} 至 {{formatTime(activityConent.endTime)}}</text> <text>{{formatTime(activityConent.startTime)}} 至 {{formatTime(activityConent.endTime)}}</text>
</view> </view>
</view> </view>
<view class="info-item"> <view class="info-item">
<view class="info-label">签到时间</view> <view class="info-label">签到时间</view>
<view class="info-value"> <view class="info-value">
<text>{{formatTime(activityConent.signinStartTime)}} 至 {{formatTime(activityConent.signinEndTime)}}</text> <text>{{formatTime(activityConent.signinStartTime)}} 至 {{formatTime(activityConent.signinEndTime)}}</text>
</view> </view>
</view> </view>
<view class="info-item"> <view class="info-item">
<view class="info-label">活动地点</view> <view class="info-label">活动地点</view>
<view class="info-value">{{activityConent.address}}</view> <view class="info-value">{{activityConent.address}}</view>
</view> </view>
<view class="info-item"> <view class="info-item">
<view class="info-label">活动名额</view> <view class="info-label">活动名额</view>
<view class="info-value">{{activityConent.quota}}人</view> <view class="info-value">{{activityConent.quota}}人</view>
</view> </view>
<view class="info-item"> <view class="info-item">
<view class="info-label">主办方</view> <view class="info-label">主办方</view>
<view class="info-value">{{activityConent.organizer}}</view> <view class="info-value">{{activityConent.organizer}}</view>
</view> </view>
<view class="info-item"> <view class="info-item">
<view class="info-label">联系人</view> <view class="info-label">联系人</view>
<view class="info-value">{{activityConent.contactName}}</view> <view class="info-value">{{activityConent.contactName}}</view>
</view> </view>
<view class="info-item"> <view class="info-item">
<view class="info-label">联系电话</view> <view class="info-label">联系电话</view>
<view class="info-value">{{activityConent.contactPhone}}</view> <view class="info-value">{{activityConent.contactPhone}}</view>
</view> </view>
<view class="info-item"> <view class="info-item">
<view class="info-label">积分奖励</view> <view class="info-label">积分奖励</view>
<view class="info-value">{{activityConent.pointsReward}}</view> <view class="info-value">{{activityConent.pointsReward}}</view>
@@ -107,9 +107,9 @@
<view v-else class="status-content"> <view v-else class="status-content">
<view class="status-header"> <view class="status-header">
<view class="status-title"> <view class="status-title">
<image src="http://47.104.199.163:9090/images/activity/liveScene.png" style="width: 38rpx;height: 23rpx;"></image> <image src="http://47.104.199.163:9090/images/activity/liveScene.png" style="width: 38rpx;height: 23rpx;"></image>
现场实况 现场实况
</view> </view>
<view class="status-count">{{ liveRecords.length }}次</view> <view class="status-count">{{ liveRecords.length }}次</view>
</view> </view>
@@ -126,22 +126,22 @@
<view class="record-content">{{ record.content }}</view> <view class="record-content">{{ record.content }}</view>
<!-- 图片展示 --> <!-- 图片展示 -->
<view v-if="record.images && record.images.length > 0" class="record-images"> <view v-if="record.images && record.images.length > 0" class="record-images">
<view <view
v-for="(img, imgIndex) in record.images" v-for="(img, imgIndex) in record.images"
:key="imgIndex" :key="imgIndex"
class="image-item" class="image-item"
:style="{ backgroundImage: `url(${img})` }" :style="{ backgroundImage: `url(${img})` }"
> >
<image :src="img" style="width: 100%;height: 100%;"></image> <image :src="img" style="width: 100%;height: 100%;"></image>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
@@ -150,23 +150,23 @@
<!-- 底部操作栏 --> <!-- 底部操作栏 -->
<view class="bottom-bar"> <view class="bottom-bar">
<!-- 未报名状态显示报名按钮 --> <!-- 未报名状态显示报名按钮 -->
<button <button
v-if="!hasSigned && activeTab === 'detail'" v-if="!hasSigned && activeTab === 'detail'"
class="action-btn signup-btn" class="action-btn signup-btn"
@tap="handleSignup" @tap="handleSignup"
> >
报名 报名
</button> </button>
<!-- 已报名状态显示取消报名按钮 --> <!-- 已报名状态显示取消报名按钮 -->
<button <button
v-if="hasSigned && activeTab === 'detail'" v-if="hasSigned && activeTab === 'detail'"
class="action-btn cancel-btn" class="action-btn cancel-btn"
@tap="handleCancelSignup" @tap="handleCancelSignup"
> >
取消报名 取消报名
</button> </button>
<!-- 活动实况页显示添加实况按钮 --> <!-- 活动实况页显示添加实况按钮 -->
<button class="action-btn add-status-btn" v-if="hasSigned &&activeTab === 'status'" @click="liveClick">添加实况</button> <button class="action-btn add-status-btn" v-if="hasSigned &&activeTab === 'status'" @click="liveClick">添加实况</button>
</view> </view>
@@ -254,43 +254,43 @@ const formatTime = (timeStr) => {
// ---接收参数--- // ---接收参数---
onLoad((option) =>{ onLoad((option) =>{
navTitle.value = option?.title navTitle.value = option?.title
curActivityId.value = option?.id curActivityId.value = option?.id
// 处理applied参数（可能是字符串类型，需要转布尔） // 处理applied参数（可能是字符串类型，需要转布尔）
hasSigned.value = option?.applied === 'true' || option?.applied === true hasSigned.value = option?.applied === 'true' || option?.applied === true
// console.log('hasSigned.value',hasSigned.value) // console.log('hasSigned.value',hasSigned.value)
// 2. 初始化数据 // 2. 初始化数据
if (curActivityId.value) { if (curActivityId.value) {
getActivityDetailsData(curActivityId.value) // 获取活动详情 getActivityDetailsData(curActivityId.value) // 获取活动详情
getLiveActivityList() // 获取实况列表 getLiveActivityList() // 获取实况列表
} }
// 3. 监听实况列表刷新事件 // 3. 监听实况列表刷新事件
uni.$on('refreshLiveList', () => { uni.$on('refreshLiveList', () => {
getLiveActivityList() getLiveActivityList()
}) })
}) })
// 获取列表详情 // 获取列表详情
const getActivityDetailsData = async (id) =>{ const getActivityDetailsData = async (id) =>{
try{ try{
const res = await getActivityDetails(id) const res = await getActivityDetails(id)
if(res.code === 200){ if(res.code === 200){
activityConent.value = res.data || {} activityConent.value = res.data || {}
}else{ }else{
activityConent.value = {} activityConent.value = {}
uni.showToast({ uni.showToast({
title: res.msg ||"详情获取失败", title: res.msg ||"详情获取失败",
icon:"error" icon:"error"
}) })
} }
}catch(err){ }catch(err){
uni.showToast({ uni.showToast({
title: "网络异常", title: "网络异常",
icon:"none" icon:"none"
}) })
// console.error('获取活动详情失败：', err) // console.error('获取活动详情失败：', err)
} }
} }
// 切换选项卡 // 切换选项卡
@@ -321,34 +321,34 @@ const confirmSignup = () => {
// 确认报名接口 // 确认报名接口
const confirmRegist = async () =>{ const confirmRegist = async () =>{
try{ try{
const res = await confirmResident(curActivityId.value) const res = await confirmResident(curActivityId.value)
if(res.code === 200){ if(res.code === 200){
hasSigned.value = true // 报名成功后更新状态 hasSigned.value = true // 报名成功后更新状态
uni.showToast({ uni.showToast({
title: '报名成功', title: '报名成功',
icon:"success" icon:"success"
}) })
setTimeout(() =>{ setTimeout(() =>{
uni.$emit('refreshActivityList', { uni.$emit('refreshActivityList', {
activityId: curActivityId.value, activityId: curActivityId.value,
isSigned: true isSigned: true
}) })
uni.navigateBack() uni.navigateBack()
},1500) },1500)
}else{ }else{
uni.showToast({ uni.showToast({
title: res.msg || "报名失败", title: res.msg || "报名失败",
icon:"error" icon:"error"
}) })
} }
}catch(err){ }catch(err){
uni.showToast({ uni.showToast({
title: "网络异常", title: "网络异常",
icon:"none" icon:"none"
}) })
// console.error('报名失败：', err) // console.error('报名失败：', err)
} }
} }
// 处理取消报名 // 处理取消报名
@@ -361,7 +361,7 @@ const hideCancelModal = () => {
showCancelModal.value = false showCancelModal.value = false
} }
// 确认取消报名 // 确认取消报名
const confirmCancel = () => { const confirmCancel = () => {
hasSigned.value = false // 取消报名后更新状态 hasSigned.value = false // 取消报名后更新状态
cancelActivityData() cancelActivityData()
@@ -370,76 +370,76 @@ const confirmCancel = () => {
} }
// 确认取消报名接口 // 确认取消报名接口
const cancelActivityData = async () =>{ const cancelActivityData = async () =>{
try{ try{
const res = await cancelActivity(curActivityId.value) const res = await cancelActivity(curActivityId.value)
if(res.code === 200){ if(res.code === 200){
hasSigned.value = false // 报名成功后更新状态 hasSigned.value = false // 报名成功后更新状态
uni.showToast({ uni.showToast({
title: '取消报名成功', title: '取消报名成功',
icon:"success" icon:"success"
}) })
setTimeout(() =>{ setTimeout(() =>{
uni.$emit('refreshActivityList', { uni.$emit('refreshActivityList', {
activityId: curActivityId.value, activityId: curActivityId.value,
isSigned: false isSigned: false
}) })
uni.navigateBack() uni.navigateBack()
},1500) },1500)
}else{ }else{
uni.showToast({ uni.showToast({
title: res.msg || "取消报名失败", title: res.msg || "取消报名失败",
icon:"error" icon:"error"
}) })
} }
}catch(err){ }catch(err){
uni.showToast({ uni.showToast({
title: "网络异常", title: "网络异常",
icon:"none" icon:"none"
}) })
} }
} }
// -----获取活动实况列表---- // -----获取活动实况列表----
const getLiveActivityList = async () =>{ const getLiveActivityList = async () =>{
try{ try{
const res = await getActivityLive(curActivityId.value) const res = await getActivityLive(curActivityId.value)
if(res.code === 200){ if(res.code === 200){
liveRecords.value = res.rows || [] liveRecords.value = res.rows || []
}else{ }else{
liveRecords.value = [] liveRecords.value = []
uni.showToast({ uni.showToast({
title: res.msg ||"实况列表获取失败", title: res.msg ||"实况列表获取失败",
icon:"error" icon:"error"
}) })
} }
}catch(err){ }catch(err){
uni.showToast({ uni.showToast({
title: "网络异常", title: "网络异常",
icon:"none" icon:"none"
}) })
} }
} }
// 添加实况跳转 // 添加实况跳转
const liveClick = () =>{ const liveClick = () =>{
uni.navigateTo({ uni.navigateTo({
url:`/pageSubPack/activity-list/live-add?id=${curActivityId.value}` url:`/pageSubPack/activity-list/live-add?id=${curActivityId.value}`
}) })
} }
// 监听实况列表刷新 // 监听实况列表刷新
// --------- // ---------
onUnload(() => { onUnload(() => {
uni.$off('refreshLiveList') uni.$off('refreshLiveList')
}) })
// 显示提示信息 // 显示提示信息
const showToastMessage = (message) => { const showToastMessage = (message) => {
toastMessage.value = message toastMessage.value = message
showToast.value = true showToast.value = true
setTimeout(() => { setTimeout(() => {
showToast.value = false showToast.value = false
}, 2000) }, 2000)
@@ -452,15 +452,17 @@ const showToastMessage = (message) => {
<style scoped> <style scoped>
/* 页面容器 */ /* 页面容器 */
.container { .container {
min-height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: linear-gradient(to bottom left, #E2F0FF 0%, #ffffff 50%) background: linear-gradient(to bottom left, #E2F0FF 0%, #ffffff 50%);
overflow: hidden;
} }
/* 状态栏 */ /* 状态栏 */
.status_bar { .status_bar {
height: 46px; height: 46px;
width: 100%; width: 100%;
flex-shrink: 0;
} }
/* 顶部导航栏 */ /* 顶部导航栏 */
@@ -473,6 +475,7 @@ const showToastMessage = (message) => {
position: sticky; position: sticky;
top: 44px; top: 44px;
z-index: 100; z-index: 100;
flex-shrink: 0;
} }
.nav-left { .nav-left {
@@ -504,7 +507,6 @@ const showToastMessage = (message) => {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
overflow-y: auto; overflow-y: auto;
margin-bottom: 120rpx;
} }
/* 选项卡 */ /* 选项卡 */
@@ -702,14 +704,10 @@ const showToastMessage = (message) => {
/* 底部操作栏 */ /* 底部操作栏 */
.bottom-bar { .bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20rpx 30rpx 40rpx; padding: 20rpx 30rpx 40rpx;
background-color: #fff; background-color: #fff;
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05); box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
z-index: 100; flex-shrink: 0;
} }
.action-btn { .action-btn {

9
property-uniapp-project/pageSubPack/notice-list/oneClickOpen.vue
View File

@@ -106,7 +106,7 @@ const getAccessControl = async () =>{
doorList.value = [] doorList.value = []
uni.showToast({ uni.showToast({
title:err.msg || '查询失败', title:err.msg || '查询失败',
icon:"error" icon:"none"
}) })
} }
@@ -144,7 +144,7 @@ const getAccessOpenData = async () =>{
}catch(err){ }catch(err){
uni.showToast({ uni.showToast({
title: err.msg || '开门失败', title: err.msg || '开门失败',
icon:"error" icon:"none"
}) })
} }
} }
@@ -163,8 +163,11 @@ onLoad(() =>{
box-sizing: border-box; box-sizing: border-box;
} }
.status_bar { .status_bar {
height: 32px; height: var(--status-bar-height);
width: 100%; width: 100%;
flex-shrink: 0;
/* height: 32px;
width: 100%; */
} }
/* 顶部标题 */ /* 顶部标题 */
.top-bar { .top-bar {

2
property-uniapp-project/pageSubPack/online-repair/onlineRepair.vue
View File

@@ -258,7 +258,7 @@ onUnload(() =>{
flex: 1; flex: 1;
text-align: center; text-align: center;
font-size: 32rpx; font-size: 32rpx;
font-weight: 600; font-weight: 400;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

4
property-uniapp-project/pageSubPack/visitor/visitor-list.vue
View File

@@ -125,8 +125,8 @@ const fetchVisitorList = async () => {
visitorList.value = mapData(res.data || []) visitorList.value = mapData(res.data || [])
// console.log('222222',visitorList.value) // console.log('222222',visitorList.value)
} catch (e) { } catch (err) {
console.error('获取访客列表失败:', e) uni.showToast({title:err.msg,icon:'none'})
} }
} }

119
property-uniapp-project/pages/navigation/navigation.vue
View File

@@ -1,54 +1,57 @@
<template> <template>
<view class="guide-page"> <view class="guide-page">
<view class="status_bar"></view> <view class="status-bar"></view>
<!-- 引导内容滑动容器 --> <!-- 引导内容滑动容器 -->
<swiper <swiper
class="guide-swiper" class="guide-swiper"
:current="currentStep" :current="currentStep"
@change="handleSwiperChange" @change="handleSwiperChange"
:disable-scroll="false" :disable-scroll="false"
:indicator-dots="false" :indicator-dots="false"
:mode="mode" :mode="mode"
> >
<!-- 便捷服务 --> <!-- 便捷服务 -->
<swiper-item> <swiper-item>
<view class="guide-item"> <view class="guide-item">
<view class="guide-img"> <view class="guide-img">
<image src="https://wuyeadmin.bugtc.com/images/guide1.png" style="width: 100%;height: 100%;"></image> <image src="https://wuyeadmin.bugtc.com/images/guide1.png" mode="aspectFit" class="img-content"></image>
</view> </view>
<view style="height: 200rpx;width: 100%;"></view> <view class="guide-text">
<view class="guide-title">便捷服务</view> <view class="guide-title">便捷服务</view>
<view class="guide-subtitle">报修、缴费、预约</view> <view class="guide-subtitle">报修、缴费、预约</view>
</view>
</view> </view>
</swiper-item> </swiper-item>
<!-- 高效管理 --> <!-- 高效管理 -->
<swiper-item> <swiper-item>
<view class="guide-item"> <view class="guide-item">
<view class="guide-img"> <view class="guide-img">
<image src="https://wuyeadmin.bugtc.com/images/guide2.png" style="width: 100%;height: 100%;"></image> <image src="https://wuyeadmin.bugtc.com/images/guide2.png" mode="aspectFit" class="img-content"></image>
</view> </view>
<view style="height: 200rpx;width: 100%;"></view> <view class="guide-text">
<view class="guide-title">高效管理</view> <view class="guide-title">高效管理</view>
<view class="guide-subtitle">自动化流程和智能设备</view> <view class="guide-subtitle">自动化流程和智能设备</view>
</view>
</view> </view>
</swiper-item> </swiper-item>
<!--安全保障 --> <!--安全保障 -->
<swiper-item> <swiper-item>
<view class="guide-item"> <view class="guide-item">
<view class="guide-img"> <view class="guide-img">
<image src="https://wuyeadmin.bugtc.com/images/guide3.png" style="width: 100%;height: 100%;"></image> <image src="https://wuyeadmin.bugtc.com/images/guide3.png" mode="aspectFit" class="img-content"></image>
</view> </view>
<view style="height: 200rpx;width: 100%;"></view> <view class="guide-text">
<view class="guide-title">安全保障</view> <view class="guide-title">安全保障</view>
<view class="guide-subtitle">智能巡检和智慧访客</view> <view class="guide-subtitle">智能巡检和智慧访客</view>
</view>
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
<!-- 进度点 --> <!-- 进度点 -->
<view class="progress-dots"> <view class="progress-dots">
<view class="dot" :class="{ active: currentStep === 0 }"></view> <view class="dot" :class="{ active: currentStep === 0 }"></view>
<view class="dot" :class="{ active: currentStep === 1 }"></view> <view class="dot" :class="{ active: currentStep === 1 }"></view>
<view class="dot" :class="{ active: currentStep === 2 }"></view> <view class="dot" :class="{ active: currentStep === 2 }"></view>
@@ -56,8 +59,8 @@
<!-- 操作按钮 --> <!-- 操作按钮 -->
<view class="guide-btn-wrap"> <view class="guide-btn-wrap">
<button <button
class="guide-btn" class="guide-btn"
:class="{ primary: currentStep === 2 }" :class="{ primary: currentStep === 2 }"
@click="handleBtnClick" @click="handleBtnClick"
> >
@@ -91,9 +94,9 @@ const handleBtnClick = () => {
// 1. 记录引导已完成 // 1. 记录引导已完成
uni.setStorageSync('hasShowGuide', true); uni.setStorageSync('hasShowGuide', true);
// 2. 跳转首页 // 2. 跳转首页
uni.navigateTo({ uni.navigateTo({
url:"/pageSubPack/loginSub/pwd-login" url: "/pageSubPack/loginSub/pwd-login"
}) })
// uni.switchTab({ // uni.switchTab({
// url: '/pages/index/index' // url: '/pages/index/index'
// }); // });
@@ -106,40 +109,61 @@ const handleBtnClick = () => {
.guide-page { .guide-page {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
/* background-color: #f8f9ff; */
background: linear-gradient(to bottom, #E2F0FF, #F6FAFF); background: linear-gradient(to bottom, #E2F0FF, #F6FAFF);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between;
padding: 120rpx 40rpx 80rpx;
box-sizing: border-box; box-sizing: border-box;
} }
.status_bar {
height: 148px; /* 状态栏 - 自适应设备状态栏高度 */
width: 100%; .status-bar {
} height: var(--status-bar-height);
/* 滑动容器 */ width: 100%;
flex-shrink: 0;
}
/* 滑动容器 */
.guide-swiper { .guide-swiper {
flex: 1; flex: 1;
width: 100%; width: 100%;
} }
/* 单个引导项 */ /* 单个引导项 - 全屏自适应 */
.guide-item { .guide-item {
width: 360px; width: 100%;
height: 480px; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 60rpx;
box-sizing: border-box;
} }
/* 图片区域 - 自适应 */
.guide-img { .guide-img {
width: 80%;
max-width: 600rpx;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40rpx;
}
.img-content {
width: 100%; width: 100%;
height: 50%; height: 100%;
margin-bottom: 80rpx; max-height: 50vh;
}
/* 文字区域 */
.guide-text {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 40rpx;
} }
/* 引导标题 */ /* 引导标题 */
@@ -161,7 +185,8 @@ const handleBtnClick = () => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 60rpx; margin-bottom: 40rpx;
flex-shrink: 0;
} }
/* 单个进度点 */ /* 单个进度点 */
@@ -171,6 +196,7 @@ const handleBtnClick = () => {
border-radius: 8rpx; border-radius: 8rpx;
background-color: #ddd; background-color: #ddd;
margin: 0 8rpx; margin: 0 8rpx;
transition: all 0.3s ease;
} }
/* 激活的进度点 */ /* 激活的进度点 */
@@ -182,6 +208,9 @@ const handleBtnClick = () => {
/* 按钮容器 */ /* 按钮容器 */
.guide-btn-wrap { .guide-btn-wrap {
width: 80%; width: 80%;
max-width: 600rpx;
margin-bottom: 80rpx;
flex-shrink: 0;
} }
/* 引导按钮 */ /* 引导按钮 */
@@ -216,4 +245,4 @@ const handleBtnClick = () => {
color: #fff; color: #fff;
border: none; border: none;
} }
</style> </style>