This commit is contained in:
Zy
2026-05-21 10:55:51 +08:00
4 changed files with 495 additions and 584 deletions

View File

@@ -1,6 +1,6 @@
<template>
<view class="report-record-page">
<view class="status-bar"></view>
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
<!-- 顶部导航栏 -->
<uni-nav-bar
left-icon="back"
@@ -58,8 +58,8 @@
<!-- 类型标签 -->
<view class="tag-group">
<view class="tag-item">{{ record.projectTypeStr || '无 ' }}</view>
<view class="tag-item">{{ record.maintenanceItemName || '无'}}</view>
<view class="tag-item" v-if="record.projectTypeStr">{{ record.projectTypeStr}}</view>
<view class="tag-item" v-if="record.maintenanceItemName">{{ record.maintenanceItemName}}</view>
</view>
<!-- 内容 -->
@@ -97,6 +97,7 @@ import {getMyOrderList} from '../../api/api.js'
const navHeight = ref(44)
const statusTabHeight = ref(88)
const typeTabHeight = ref(88)
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight || 0)
// 分页
const pageNum = ref(1) // 当前页
const pageSize = ref(5) // 每页条数
@@ -254,7 +255,9 @@ onReady(() => {
}
.status-bar{
width: 100%;
height: 46px;
/* height: var(--status-bar-height); */
flex-shrink: 0;
/* height: 46px; */
}
/* 状态筛选标签 */
.status-tabs {

View File

@@ -237,8 +237,8 @@ const handleConfirm = () => {
color: #fff;
}
/* 禁用按钮边框 */
button:after{
border-radius: 8px;
.get-verify-btn:after{
border-radius: 40px;
}

View File

@@ -1,33 +1,26 @@
<template>
<view class="content-class">
<view class="nar-top">
<!-- 这里是状态栏占位 -->
<!-- 顶部渐变背景层 -->
<view class="bg-gradient"></view>
<!-- 页面内容区 -->
<view class="page-content">
<!-- 状态栏占位 -->
<view class="status_bar" :style="{ height: statusBarHeight + 'px' }"></view>
<!-- 导航栏 -->
<view class="nav-bar">
<text class="nav-title">首页</text>
</view>
<view class="tabbarClass">
<!-- 小区选择 -->
<view class="header-container" @click="navigateToPage">
<!-- 左侧小区选择区域 -->
<view class="location-area">
<!-- 定位图标 -->
<view class="location-icon">
<image
src="https://wuyeadmin.bugtc.com/images/imgs/adress.png"
style="height: 100%; width: 100%"
></image>
<image src="https://wuyeadmin.bugtc.com/images/imgs/adress.png" style="height: 100%; width: 100%"></image>
</view>
<!-- 小区名称和下拉箭头 -->
<view class="community-selector">
<text class="community-name">{{ currentCommunity }}</text>
<view class="community-icon">
<image
src="https://wuyeadmin.bugtc.com/images/imgs/三角形.png"
style="height: 100%; width: 100%"
></image>
</view>
</view>
<image src="https://wuyeadmin.bugtc.com/images/imgs/三角形.png" style="height: 100%; width: 100%"></image>
</view>
</view>
</view>
@@ -56,15 +49,10 @@
<view class="inspectionClass">
<!-- 消息通知栏 -->
<view class="noticeClass">
<!-- 左侧消息通知文字 -->
<view class="notice-left">
<image
src="https://wuyeadmin.bugtc.com/images/imgs/notice.png"
class="notice-icon"
></image>
<image src="https://wuyeadmin.bugtc.com/images/imgs/notice.png" class="notice-icon"></image>
<view class="notice-line"></view>
</view>
<!-- 右侧滚动公告 -->
<view class="notice-right" @click="getNoticeMore">
<uni-notice-bar
:text="noticeText"
@@ -84,15 +72,15 @@
<!-- 巡检数据统计区 -->
<view class="statistics-wrap">
<view class="statistics-item" @click="goToInspectionRecord">
<text class="num">{{ allCount }}</text>
<text class="num">{{allCount}}</text>
<text class="label">全部巡检</text>
</view>
<view class="statistics-item" @click="goToDaysInspection">
<text class="num">{{ pendingCount }}</text>
<text class="num">{{pendingCount}}</text>
<text class="label">待巡检</text>
</view>
<view class="statistics-item">
<text class="num">{{ InspectedCount }}</text>
<text class="num">{{InspectedCount}}</text>
<text class="label">已巡检</text>
</view>
</view>
@@ -103,51 +91,32 @@
<!-- 第一行功能:故障上报、一键开门、工单大厅、我的工单 -->
<view class="function-row">
<view class="function-item" @click="goToReport">
<image
class="item-icon"
src="https://wuyeadmin.bugtc.com/images/imgs/fault-report.png"
mode="aspectFit"
></image>
<image class="item-icon" src="https://wuyeadmin.bugtc.com/images/imgs/fault-report.png" mode="aspectFit"></image>
<text class="item-text">故障上报</text>
</view>
<view class="function-item" @click="goToOneOpenDoor">
<image
class="item-icon"
src="https://wuyeadmin.bugtc.com/images/imgs/open.png"
mode="aspectFit"
></image>
<image class="item-icon" src="https://wuyeadmin.bugtc.com/images/imgs/open.png" mode="aspectFit"></image>
<text class="item-text">一键开门</text>
</view>
<view class="function-item" @tap="goToTicketHall">
<image
class="item-icon"
src="https://wuyeadmin.bugtc.com/images/imgs/work-order.png"
mode="aspectFit"
></image>
<image class="item-icon" src="https://wuyeadmin.bugtc.com/images/imgs/work-order.png" mode="aspectFit"></image>
<text class="item-text">工单大厅</text>
</view>
<view class="function-item" @tap="goToMyTicket">
<image
class="item-icon"
src="https://wuyeadmin.bugtc.com/images/imgs/my-work.png"
mode="aspectFit"
></image>
<image class="item-icon" src="https://wuyeadmin.bugtc.com/images/imgs/my-work.png" mode="aspectFit"></image>
<text class="item-text">我的工单</text>
</view>
</view>
<!-- 第二行 -->
<view class="function-row" style="margin-top: 2px">
<view class="function-item" @tap="goToComplaint">
<image
class="item-icon"
src="https://wuyeadmin.bugtc.com/images/imgs/complaint.png"
mode="aspectFit"
></image>
<image class="item-icon" src="https://wuyeadmin.bugtc.com/images/imgs/complaint.png" mode="aspectFit"></image>
<text class="item-text">投诉处理</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
@@ -260,8 +229,10 @@ const getInspectionData = () => {
InspectedCount.value = 0
}
}
})
.catch(err => {
}else{
uni.showToast({ title: res.msg || '获取失败', icon: 'none' })
}
}).catch(err => {
uni.showToast({ title: err.msg || '获取失败', icon: 'none' })
})
}
@@ -318,48 +289,53 @@ const clickItem = index => {
<style lang="scss" scoped>
.content-class {
background-color: #f9f9f9;
box-sizing: border-box;
min-height: 100vh;
overflow-y: auto;
position: relative;
}
.nar-top {
height: 400rpx;
width: 100%;
background: repeating-linear-gradient(to right, #edf4fa, #c0e4fb);
/* 顶部渐变背景 */
.bg-gradient {
position: absolute;
}
top: 0;
left: 0;
right: 0;
height: 400rpx;
background: repeating-linear-gradient(to right, #edf4fa, #c0e4fb);
z-index: 0;
}
.status_bar {
/* 页面内容容器 */
.page-content {
position: relative;
z-index: 1;
padding: 0 40rpx 40rpx;
}
.status_bar {
width: 100%;
flex-shrink: 0;
}
}
/* 导航栏 */
.nav-bar {
height: 44px;
line-height: 44px;
/* 导航栏 */
.nav-bar {
height: 88rpx;
line-height: 88rpx;
text-align: center;
}
}
.nav-title {
.nav-title {
font-size: 32rpx;
font-weight: 400;
}
}
.header-container {
.header-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4rpx 30rpx;
box-sizing: border-box;
position: absolute;
top: 85px;
left: 0;
z-index: 9999;
}
padding: 4rpx 0;
}
// 左侧区域
.location-area {
/* 左侧区域 */
.location-area {
display: flex;
align-items: center;
position: relative;
@@ -396,43 +372,36 @@ const clickItem = index => {
margin-top: -22rpx;
}
}
}
}
.bannarClass {
position: relative;
top: 110px;
left: 0;
padding: 20rpx 40rpx;
}
.bannarClass {
padding: 20rpx 0;
}
.swiper-box {
.swiper-box {
height: 300rpx;
border-radius: 16rpx !important;
overflow: hidden !important;
}
}
.swiper-item {
.swiper-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 300rpx;
color: #fff;
}
}
.inspectionClass {
position: relative;
top: 111px;
left: 0;
margin: 0 40rpx;
.inspectionClass {
background: linear-gradient(to right, #7b87fa, #4d5dfa);
border-radius: 16rpx;
box-sizing: border-box;
padding: 30rpx;
}
}
// 消息通知栏
.noticeClass {
/* 消息通知栏 */
.noticeClass {
display: flex;
align-items: center;
height: 80rpx;
@@ -441,10 +410,10 @@ const clickItem = index => {
padding: 6rpx 20rpx;
margin-bottom: 30rpx;
border: 1rpx solid rgba(255, 255, 255, 0.1);
}
}
// 左侧”消息通知”文字
.notice-left {
/* 左侧"消息通知"文字 */
.notice-left {
display: flex;
align-items: center;
margin-right: 16rpx;
@@ -460,83 +429,80 @@ const clickItem = index => {
height: 40rpx;
background-color: rgba(255, 255, 255, 0.4);
}
}
}
// 右侧公告滚动区
.notice-right {
/* 右侧公告滚动区 */
.notice-right {
flex: 1;
}
}
// 深度修改uni-notice-bar样式
:deep(.uni-noticebar) {
/* 深度修改uni-notice-bar样式 */
:deep(.uni-noticebar) {
background-color: transparent !important;
height: 100% !important;
line-height: 80rpx !important;
padding: 0 !important;
margin: 0 !important;
}
}
// 公告文字样式
:deep(.uni-noticebar__content) {
/* 公告文字样式 */
:deep(.uni-noticebar__content) {
font-size: 26rpx !important;
color: #fff !important;
padding: 0 !important;
}
}
// 右侧箭头按钮
:deep(.uni-noticebar__more) {
/* 右侧箭头按钮 */
:deep(.uni-noticebar__more) {
color: #fff !important;
font-size: 24rpx !important;
padding: 0 0 0 10rpx !important;
}
}
// 隐藏默认滚动动画的多余样式
:deep(.uni-noticebar__content-wrapper--scrollable) {
/* 隐藏默认滚动动画的多余样式 */
:deep(.uni-noticebar__content-wrapper--scrollable) {
left: 0 !important;
width: calc(100% - 30rpx) !important;
}
}
// 统计区布局
.statistics-wrap {
/* 统计区布局 */
.statistics-wrap {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20rpx;
}
}
// 统计项样式
.statistics-item {
/* 统计项样式 */
.statistics-item {
text-align: center;
}
}
.statistics-item .num {
.statistics-item .num {
font-size: 36rpx;
font-weight: bold;
color: #fff;
display: block;
line-height: 1;
margin-bottom: 10rpx;
}
}
.statistics-item .label {
.statistics-item .label {
font-size: 24rpx;
color: #fff;
opacity: 0.9;
}
}
.function-container {
.function-container {
background-color: #ffffff;
border-radius: 16rpx;
padding: 30rpx 20rpx;
padding: 30rpx 0;
box-sizing: border-box;
position: relative;
top: 123px;
left: 0;
margin: 0 40rpx;
}
margin-top: 20rpx;
}
// 功能行布局
.function-row {
/* 功能行布局 */
.function-row {
display: flex;
align-items: center;
margin-bottom: 20rpx;
@@ -544,30 +510,29 @@ const clickItem = index => {
&:last-child {
margin-bottom: 0;
}
}
}
.function-item {
.function-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 25%;
padding: 10rpx 0;
}
}
// 功能图标样式
.item-icon {
/* 功能图标样式 */
.item-icon {
width: 88rpx;
height: 88rpx;
margin-bottom: 10rpx;
}
}
// 功能文字样式
.item-text {
/* 功能文字样式 */
.item-text {
font-size: 24rpx;
color: #333333;
font-weight: 400;
text-align: center;
}
}
</style>

View File

@@ -1,236 +1,179 @@
<template>
<view class="contentStyle" style="">
<view class="content-style">
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
<uni-nav-bar title="我的" backgroundColor="transparent" :border="false"> </uni-nav-bar>
<uni-nav-bar title="我的" backgroundColor="transparent" :border="false" />
<scroll-view class="page" scroll-y>
<view class="topBox">
<view class="name">
<image :src="avatar" class="img" />
<span style="padding: 5rpx 5rpx; display: flex; flex-direction: column; line-height: 60rpx">
<span style="font-size: 36rpx; font-weight: 600">
{{ loginName }}
</span>
<span style="font-size: 26rpx; color: #666666">
{{ phoneNum }}
</span>
</span>
<view class="user-card">
<image :src="avatar || defaultAvatar" class="avatar" />
<view class="user-info">
<text class="user-name">{{ loginName }}</text>
<text class="user-phone">{{ phoneNum }}</text>
</view>
</view>
<view class="contentBox">
<div class="page-container">
<view class="list-container">
<view class="list-item" v-for="(item, index) in list" :key="index" @click="onItemClick(item)">
<view
class="list-item"
v-for="(item, index) in list"
:key="index"
@click="onItemClick(item)"
>
<image :src="item.icon" class="item-icon" />
<view class="item-content">
<text class="item-title">{{ item.title }}</text>
</view>
<view class="item-arrow"></view>
<!-- <image src="https://wuyeadmin.bugtc.com/images/propertyImgs/arrow-right.png" class="arrow-icon" /> -->
</view>
</view>
</div>
</view>
</scroll-view>
</view>
</template>
<script setup>
import {
ref
} from 'vue'
import {
onShow
} from '@dcloudio/uni-app'
import {
getSettingInfo
} from '../../api/api.js'
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getSettingInfo } from '../../api/api.js'
const list = ref([{
icon: 'https://wuyeadmin.bugtc.com/images/imgs/shangbao.png',
title: '上报记录'
},
{
icon: 'https://wuyeadmin.bugtc.com/images/imgs/xunjian.png',
title: '巡检记录'
},
{
icon: 'https://wuyeadmin.bugtc.com/images/imgs/xunjian.png',
title: '仪表换新'
},
{
icon: 'https://wuyeadmin.bugtc.com/images/propertyImgs/setting.png',
title: '设置'
}
])
const loginName = ref('')
const phoneNum = ref('')
const avatar = ref('')
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight || 0)
const defaultAvatar = 'https://wuyeadmin.bugtc.com/images/imgs/default-avatar.png'
// 获取管家信息
const fetchUserInfo = () => {
const list = ref([
{ icon: 'https://wuyeadmin.bugtc.com/images/imgs/shangbao.png', title: '上报记录' },
{ icon: 'https://wuyeadmin.bugtc.com/images/imgs/xunjian.png', title: '巡检记录' },
{ icon: 'https://wuyeadmin.bugtc.com/images/imgs/xunjian.png', title: '仪表换新' },
{ icon: 'https://wuyeadmin.bugtc.com/images/propertyImgs/setting.png', title: '设置' }
])
const loginName = ref('')
const phoneNum = ref('')
const avatar = ref('')
const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight || 0)
const fetchUserInfo = () => {
getSettingInfo().then(res => {
if (res.code === 200 && res.data) {
loginName.value = res.data.nickName || ''
phoneNum.value = res.data.phonenumber || ''
avatar.value = res.data.avatar
avatar.value = res.data.avatar || ''
}
}).catch(err => {
uni.showToast({
title: err.msg || '获取失败',
icon: 'none'
uni.showToast({ title: err.msg || '获取失败', icon: 'none' })
})
})
}
}
onShow(() => {
onShow(() => {
fetchUserInfo()
})
})
// --方法----
const goToDetail = () => {
uni.navigateTo({
url: '/pageSubPack/notice-list/noticeListDetails'
})
}
// 返回
const onItemClick = item => {
if (item.title == '上报记录') {
uni.navigateTo({
url: '/pageSubPack/report-record/report-record'
})
} else if (item.title == '巡检记录') {
uni.navigateTo({
url: '/pageSubPack/inspection/inspection_record'
})
} else if (item.title == '仪表换新') {
uni.navigateTo({
url: '/pageSubPack/instrument/replacement_record'
})
} else if (item.title == '设置') {
uni.redirectTo({
url: '/pageSubPack/setting/setting'
})
const onItemClick = item => {
const routes = {
'上报记录': '/pageSubPack/report-record/report-record',
'巡检记录': '/pageSubPack/inspection/inspection_record',
'仪表换新': '/pageSubPack/instrument/replacement_record',
'设置': '/pageSubPack/setting/setting'
}
const url = routes[item.title]
if (!url) return
if (item.title === '设置') {
uni.redirectTo({ url })
} else {
uni.navigateTo({ url })
}
}
</script>
<style lang="scss" scoped>
.contentStyle {
.content-style {
display: flex;
flex-direction: column;
min-height: 100vh;
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
}
}
.topBox {
.status-bar {
width: 100%;
padding: 20rpx 0px;
position: relative;
// background-color: #1A75FF;
}
.titleBox {
width: 100%;
position: relative;
.title {
font-size: 36rpx;
line-height: 80rpx;
text-align: center;
font-weight: 500;
}
.settingImg {
width: 48rpx;
height: 48rpx;
top: 16rpx;
right: 0px;
}
}
.img {
width: 60px;
height: 60px;
margin-right: 10rpx;
border-radius: 50%;
}
.name {
bottom: 30rpx;
left: 30rpx;
display: flex;
align-items: center;
}
.contentBox {
position: relative;
}
.status-bar {
width: 100vw;
// height: 46px;
height: var(--status-bar-height);
flex-shrink: 0;
}
::v-deep .uni-nav-bar-text{
font-size: 32rpx !important;
}
}
.list-item {
:deep(.uni-nav-bar-text) {
font-size: 32rpx !important;
}
.page {
flex: 1;
padding: 0 40rpx;
box-sizing: border-box;
}
.user-card {
display: flex;
align-items: center;
/* background: #fff; */
padding: 20rpx 6rpx;
border-radius: 8rpx;
/* border-bottom:2rpx solid #f2f2f2; */
/* margin-bottom: 10rpx; */
padding: 40rpx 0;
}
.avatar {
width: 120rpx;
height: 120rpx;
margin-right: 20rpx;
border-radius: 50%;
background-color: #eee;
flex-shrink: 0;
}
.user-info {
display: flex;
flex-direction: column;
gap: 8rpx;
}
.user-name {
font-size: 36rpx;
font-weight: 600;
color: #333;
line-height: 1.4;
}
.user-phone {
font-size: 26rpx;
color: #666;
line-height: 1.4;
}
.list-container {
margin-top: 20rpx;
}
.list-item {
display: flex;
align-items: center;
padding: 24rpx 0;
// border-bottom: 1rpx solid #f0f0f0;
&:last-child {
border-bottom: none;
}
.item-icon {
&:active {
opacity: 0.7;
}
}
.item-icon {
width: 84rpx;
height: 84rpx;
/* margin-right: 20rpx; */
}
flex-shrink: 0;
}
.item-content {
.item-title {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
}
.item-title {
font-size: 32rpx;
/* color: #333; */
font-weight: 400;
margin: 10rpx 20rpx;
/* margin-bottom: 6rpx; */
}
margin-left: 20rpx;
}
.item-desc {
font-size: 24rpx;
color: #b5b5b5;
white-space: nowrap;
/* 强制不换行 */
overflow: hidden;
/* 超出隐藏 */
text-overflow: ellipsis;
}
.item-arrow {
.item-arrow {
width: 16rpx;
height: 16rpx;
border-right: 3rpx solid #999999;
border-bottom: 3rpx solid #999999;
border-right: 3rpx solid #999;
border-bottom: 3rpx solid #999;
transform: rotate(-45deg);
margin-right: 10rpx;
}
.page {
flex: 1;
overflow-y: auto;
padding: 0px 40rpx;
box-sizing: border-box;
}
flex-shrink: 0;
}
</style>