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-04-21 15:48:52 +08:00
parent b0d90c27db
commit 65e6e5bf30
70 changed files with 316 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

273
property-uniapp-project/pageSubPack/online-repair/repairDetail.vue Normal file
View File

@@ -0,0 +1,273 @@
<template>
<view class="repair-detail-container">
<!-- 维修流程模块 -->
<view class="info-section">
<!-- <uni-section title="维修流程" type="line" style="margin-bottom: 20rpx;"> -->
<view class="section-title">维修流程</view>
<uni-row class="demo-uni-row" :width="nvueWidth">
<uni-col :span="12">
<up-steps :current="currentStep" direction="column" space="30" active-color="#007aff">
<up-steps-item title="待处理" desc="提交报修成功"></up-steps-item>
<up-steps-item title="已派单" desc="维修师傅已接单"></up-steps-item>
<up-steps-item title="已完成" desc="维修完成"></up-steps-item>
</up-steps>
</uni-col>
<uni-col :span="12">
<view class="step-time">2026-03-24 09:30:38</view>
<view class="step-time">2026-03-26 09:30:38</view>
<view class="step-time-3">2026-03-28 09:30:38</view>
</uni-col>
</uni-row>
<!-- </uni-section> -->
</view>
<!-- 报修信息模块 -->
<view class="info-section">
<!-- <uni-section title="报修信息" type="line" style="margin-bottom: 20rpx;"> -->
<view class="section-title">报修信息</view>
<view class="info-item">
<view class="info-label">报修房屋</view>
<view class="info-value">{{repairInfo.house}}</view>
</view>
<view class="info-item">
<view class="info-label">维修项目</view>
<view class="info-value">{{repairInfo.project}}</view>
</view>
<view class="info-item">
<view class="info-label">标题</view>
<view class="info-value">{{repairInfo.title}}</view>
</view>
<view class="info-item-desc">
<view class="info-label">问题描述</view>
<view class="info-value multi-line">{{repairInfo.description}}</view>
</view>
<view class="info-item">
<view class="info-label">手机号</view>
<view class="info-value">{{repairInfo.phone}}</view>
</view>
<view class="info-item">
<view class="info-label">报修时间</view>
<view class="info-value">{{repairInfo.time}}</view>
</view>
<view class="info-item-desc">
<view class="info-label">问题照片</view>
<view class="photo-container">
<view class="photo-item" v-for="(item, index) in 2" :key="index">
<uni-icons type="plusempty" size="24" color="#ccc"></uni-icons>
</view>
</view>
</view>
<!-- </uni-section> -->
</view>
<!-- 联系物业按钮 -->
<view class="btn-container">
<button class="contact-btn" @click="contactProperty">联系物业</button>
</view>
</view>
</template>
<script setup>
import {
ref
} from 'vue'
import {
onLoad
} from '@dcloudio/uni-app'
// 步骤条当前激活的步骤（0=待处理，1=已派单，2=已完成）
const currentStep = ref(2)
const nvueWidth = ref('300')
// 报修信息数据
const repairInfo = ref({
house: '桂花园(别墅) 2号楼2层',
project: '照明-路灯',
title: '1栋楼下道路灯不亮了',
description: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
phone: '15688888888',
time: '2023-08-01 15:30'
})
onLoad((option) => {
const decodeStr = decodeURIComponent(JSON.stringify(option))
// let item = JSON.parse(decodeStr)
// repairInfo.value = optionStr
console.log('item', decodeStr)
const status = decodeStr.statusClass
// console.log('status',status)
switch (status) {
case 'pending': //待处理
currentStep.value = 0
break
case 'assignde':
currentStep.value = 1
break
case 'completed':
currentStep.value = 2
break
default:
currentStep.value = 0
}
})
// 联系物业按钮点击事件
const contactProperty = () => {
uni.showToast({
title: '正在联系物业...',
icon: 'none'
})
}
</script>
<style scoped>
.repair-detail-container {
padding: 16px;
background-color: #f5f5f5;
min-height: 100vh;
}
.process-section,
.info-section {
background-color: #fff;
border-radius: 8px;
padding: 13px;
margin-bottom: 16px;
/* margin-top: 20rpx; */
}
.repair-steps-container {
padding: 20rpx 30rpx;
background-color: #fff;
}
.title {
font-size: 32rpx;
font-weight: 600;
margin-bottom: 30rpx;
color: #333;
}
.step-time {
height: 54px;
line-height: 54px;
font-size: 12px;
color: #999;
/* font-size: 22rpx;
color: #999;
text-align: right;
margin-top: 5rpx; */
}
.step-time-3{
height: 38px;
line-height: 38px;
font-size: 12px;
color: #999;
}
/* -------- */
.section-title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 12px;
color: #333;
}
.slot-title {
position: absolute;
top: -10px;
font-size: 12px;
font-weight: 400;
}
.slot-desc {
font-size: 10px;
}
/* .step-time {
position: absolute;
right: 0;
top: 0;
font-size: 14px;
color: #999;
white-space: nowrap;
} */
.info-item {
display: flex;
padding: 12px 0;
/* border-bottom: 1px solid #f0f0f0; */
}
.info-item-desc {
/* display: flex; */
padding: 12px 0;
/* border-bottom: 1px solid #f0f0f0; */
}
.info-section.active {
color: #007AFF;
/* font-weight: 500; */
}
.info-item:last-child {
border-bottom: none;
}
.info-label {
width: 80px;
color: #222;
font-size: 14px;
}
.info-value {
flex: 1;
color: #666;
font-size: 14px;
}
.multi-line {
white-space: pre-wrap;
line-height: 1.5;
border: 1px solid #f0f0f0;
border-radius: 8rpx;
padding: 30rpx;
margin: 30rpx 0;
}
.photo-container {
display: flex;
gap: 12px;
margin-top: 4px;
}
.photo-item {
width: 80px;
height: 80px;
border: 1px dashed #ccc;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.btn-container {
padding: 16px;
}
.contact-btn {
background-color: #007AFF;
color: #fff;
border: none;
border-radius: 8px;
height: 48px;
font-size: 16px;
width: 100%;
}
.contact-btn::after {
border: none;
}
</style>