256 lines
5.5 KiB
Vue
256 lines
5.5 KiB
Vue
<template>
|
||
<view class="repair-detail-container">
|
||
|
||
<!-- 维修流程模块 -->
|
||
<view class="info-section">
|
||
<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>
|
||
</view>
|
||
|
||
<!-- 报修信息模块 -->
|
||
<view class="info-section">
|
||
<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>
|
||
</view>
|
||
|
||
<!-- 联系物业按钮 -->
|
||
<view class="btn-container">
|
||
<button class="contact-btn" @click="contactProperty">联系物业</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
|
||
const nvueWidth = ref('300')
|
||
|
||
// 报修信息数据
|
||
const repairInfo = ref({
|
||
house: '桂花园(别墅) 2号楼2层',
|
||
project: '照明-路灯',
|
||
title: '1栋楼下道路灯不亮了',
|
||
description: '1栋楼下道路路灯不亮，并且有的亮度不够，请物业公司及时更换，防止发生意外事故。',
|
||
phone: '15688888888',
|
||
time: '2023-08-01 15:30'
|
||
})
|
||
|
||
// 步骤状态
|
||
const currentStep = ref(1)
|
||
|
||
onLoad((option) => {
|
||
const optionstr = decodeURIComponent(JSON.stringify(option))
|
||
// console.log('接收参数：', optionstr)
|
||
|
||
// ✅ 正确解析参数
|
||
const status = optionstr.statusClass
|
||
|
||
// ✅ 正确赋值
|
||
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;
|
||
}
|
||
|
||
.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: 24rpx;
|
||
color: #999;
|
||
}
|
||
.step-time-3{
|
||
height: 38px;
|
||
line-height: 38px;
|
||
font-size: 24rpx;
|
||
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;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
padding: 12px 0;
|
||
}
|
||
.info-item-desc {
|
||
padding: 12px 0;
|
||
}
|
||
|
||
.info-section.active {
|
||
color: #007AFF;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
/* ========== 颜色的代码 ========== */
|
||
/* u-text__value u-text__value--main */
|
||
/* 激活的步骤标题 + 描述 强制蓝色 */
|
||
::v-deep .u-text__value .u-text__value--main {
|
||
color: #007aff !important;
|
||
}
|
||
::v-deep .up-steps-item--active .up-steps-item__desc {
|
||
color: #007aff !important;
|
||
}
|
||
|
||
</style> |