feat: 保修详情页开发,其他bug优化

This commit is contained in:
mayubo@gmail.com 2025-04-27 18:07:17 +08:00
parent b26aaa663c
commit 67f6b14136
9 changed files with 748 additions and 33 deletions

View File

@ -213,7 +213,7 @@
},
ReparirList(){
NavgateTo(`/community/repairListByCommunity/index?id=${this.id}&title=${this.info.name}`, {isLogin: false })
NavgateTo(`/community/repairList/index?id=${this.id}&title=${this.info.name}`, {isLogin: false })
},

View File

@ -0,0 +1,306 @@
.box {
background-color: #F9F9F9;
min-height: 100vh;
}
.nav-box {
box-sizing: border-box;
width: 100%;
z-index: 2;
background: #F9F9F9;
padding-bottom: 25rpx;
}
.nav-box .nav-bar {
display: flex;
align-items: center;
}
.nav-box .nav-bar .nav-bar-left,
.nav-box .nav-bar .nav-bar-right {
padding: 0 20rpx;
min-width: 36rpx;
}
.nav-box .nav-bar .nav-bar-left van-icon {
vertical-align: sub;
color: #333333;
}
.nav-box .nav-bar .nav-bar-title {
flex: 1;
text-align: center;
font-weight: 400;
font-size: 36rpx;
color: #000000;
}
.tabItem {
font-weight: 400;
font-size: 28rpx;
color: #555555;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.active {
position: relative;
font-weight: bold;
font-size: 32rpx;
color: #222222;
}
.active::after {
content: '';
width: 130rpx;
height: 10rpx;
background: #FF512A;
border-radius: 0rpx 0rpx 0rpx 0rpx;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -8rpx;
}
.active::before {
content: '';
width: 120rpx;
height: 4rpx;
background: #FF5D73;
border-radius: 0rpx 0rpx 0rpx 0rpx;
filter: blur(12rpx);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -18rpx;
}
.InfoMsg {
background-color: #fff;
margin-bottom: 20rpx;
}
.InfoMsg {
padding-left: 20rpx;
padding-right: 20rpx;
padding-top: 30rpx;
padding-bottom: 4rpx;
}
.InfoMsg_tit {
font-weight: bold;
font-size: 32rpx;
color: #222222;
margin-bottom: 40rpx;
}
.InfoMsg_info {
display: flex;
align-items: center;
font-weight: 400;
font-size: 26rpx;
color: #999999;
margin-bottom: 30rpx;
}
.InfoMsg_info text {
color: #222222;
margin-left: 30rpx;
}
.InfoItem {
background-color: #fff;
padding-top: 30rpx;
padding-left: 20rpx;
padding-right: 20rpx;
padding-bottom: 30rpx;
}
.InfoItem_tit {
font-weight: bold;
font-size: 32rpx;
color: #222222;
margin-bottom: 40rpx;
}
.InfoItem_msg {
display: flex;
font-weight: 400;
font-size: 26rpx;
white-space: nowrap;
margin-bottom: 30rpx;
color: #222222;
}
.InfoItem_msg:last-child {
margin-bottom: 0;
}
.InfoItem_msg text {
color: #999999;
width: 140rpx;
}
.maintenance_progress {
background-color: #fff;
padding: 60rpx 20rpx;
box-sizing: border-box;
box-sizing: border-box;
}
.progress {
width: 100%;
height: 100%;
background: rgba(249, 249, 249, 0.6);
border-radius: 30rpx 30rpx 30rpx 30rpx;
margin: 0 auto;
padding-left: 80rpx;
padding-top: 60rpx;
padding-bottom: 66rpx;
}
.progress_step_cir {
width: 28rpx;
height: 28rpx;
background: rgba(255, 81, 42, 0.2);
border-radius: 0rpx 0rpx 0rpx 0rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin-right: 30rpx;
}
.progress_step_cir2 {
width: 18rpx;
height: 18rpx;
background: #FF512A;
border-radius: 50%;
box-sizing: border-box;
}
.progress_step_time {
font-weight: 400;
font-size: 28rpx;
color: #222222;
position: relative;
display: flex;
align-items: center;
}
.progress_step_msg {
font-weight: 400;
font-size: 24rpx;
color: #FF512A;
border-left: 2rpx dashed #C4C4C4;
padding-left: 44rpx;
box-sizing: border-box;
margin-left: 14rpx;
margin-top: 6rpx;
margin-bottom: 12rpx;
padding-top: 16rpx;
padding-bottom: 45rpx;
}
.progress_step_msg2 {
font-weight: 400;
font-size: 24rpx;
color: #555555;
border-left: 2rpx dashed #C4C4C4;
padding-left: 44rpx;
box-sizing: border-box;
margin-left: 14rpx;
margin-top: 6rpx;
margin-bottom: 12rpx;
padding-top: 16rpx;
padding-bottom: 45rpx;
}
.progress_step_person {
width: 498rpx;
height: 143rpx;
background: #FFECE7;
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-top: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 30rpx;
padding-left: 40rpx;
}
.personAva {
width: 76rpx;
height: 76rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
margin-right: 20rpx;
}
.personAva image {
width: 59rpx;
height: 59rpx;
}
.personCall {
width: 36rpx;
height: 36rpx;
}
.personCall image {
width: 100%;
height: 100%;
}
.personInfo_name {
font-weight: 400;
font-size: 28rpx;
color: #222222;
display: flex;
align-items: center;
}
.personInfo_name text {
margin-right: 10rpx;
}
.personInfo_name image {
width: 20rpx;
height: 20rpx;
margin-right: 3rpx;
}
.personInfo_phone {
font-weight: 400;
font-size: 22rpx;
color: #999999;
}
.progress_step_person_left {
display: flex;
align-items: center;
}
.imgList {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.imgList image {
width: 120rpx !important;
height: 120rpx !important;
margin-right: 20rpx;
margin-bottom: 20rpx;
}

View File

@ -0,0 +1,91 @@
<template>
<view class="box">
<view class="tabList">
</view>
<!-- 维修进度 -->
<!-- 维修详情 -->
<view class="InfoList">
<view class="InfoMsg">
<view class="InfoMsg_tit">基本信息</view>
<view class="InfoMsg_info">联系人: <text>{{info.user_name}}</text> </view>
<view class="InfoMsg_info">联系电话: <text>{{info.mobile}}</text> </view>
<view class="InfoMsg_info">期望上门时间: <text>{{info.hope_order_time}}</text> </view>
</view>
<view class="InfoItem">
<view class="InfoItem_tit">报修内容</view>
<!-- <view class="InfoItem_msg"><text>故障描述</text>净水机不出水</view> -->
<view class="InfoItem_msg"><text>故障小区</text> {{info.community.name}}/{{info.facility.name }}/{{info.room.name}}
</view>
<view class="InfoItem_msg"><text>报修内容</text>
{{Info.details}}
</view>
<view class="InfoItem_msg"><text>故障图片</text>
<view class="imgList">
<image :src="item" mode='' v-for="(item, index) in imgList" @click="lookMore" :data-url="item" :key="index" />
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { request, picUrl, NavgateTo } from '../../utils';
import {
apiArr
} from '../../api/community';
export default {
data() {
return {
id: "",
info: "",
imgList: []
}
},
methods: {
async init() {
const res = await request(apiArr.getInfoById, 'POST', {
feed_id: this.id
});
let imgList = []
imgList = this.processApiData(res.photos);
this.info = res;
this.imgList = imgList;
},
lookMore(e) {
uni.previewImage({
urls: this.imgList,
current: e.currentTarget.dataset.url
})
},
processApiData(apiData) {
let arr = apiData.split(',');
console.log('123131 arr', arr);
for (let index = 0; index < arr.length; index++) {
arr[index] = picUrl + arr[index]
}
return arr
},
},
onLoad(options) {
this.id = Number(options.id);
uni.setNavigationBarTitle({
title: options.title,
});
this.init()
},
}
</script>
<style>
@import url("./index.css");
</style>

View File

@ -0,0 +1,215 @@
.box {
background-color: #F9F9F9;
display: flex;
flex-direction: column;
min-height: 90vh;
}
.nav-box {
box-sizing: border-box;
width: 100%;
z-index: 2;
background: #F9F9F9;
padding-bottom: 25rpx;
}
.nav-box .nav-bar {
display: flex;
align-items: center;
}
.nav-box .nav-bar .nav-bar-left,
.nav-box .nav-bar .nav-bar-right {
padding: 0 20rpx;
min-width: 36rpx;
}
.nav-box .nav-bar .nav-bar-left van-icon {
vertical-align: sub;
color: #333333;
}
.nav-box .nav-bar .nav-bar-title {
flex: 1;
text-align: center;
font-weight: 400;
font-size: 36rpx;
color: #000000;
}
.nav-bar-right {
display: none;
}
.van-tab {
font-size: 28rpx !important;
color: #555555 !important;
}
.tabList {
display: flex;
align-items: center;
margin-left: 20rpx;
background-color: #fff;
padding-top: 40rpx;
padding-bottom: 20rpx;
box-sizing: border-box;
}
.tabItem {
font-weight: 400;
font-size: 28rpx;
color: #555555;
margin-right: 70rpx;
}
.active {
position: relative;
font-weight: bold;
}
.active::after {
content: '';
width: 64rpx;
height: 10rpx;
background: #FF512A;
border-radius: 0rpx 0rpx 0rpx 0rpx;
position: absolute;
left: 50%;
bottom: -8rpx;
transform: translateX(-50%);
}
.active::before {
content: '';
width: 54rpx;
height: 4rpx;
background: #FF5D73;
border-radius: 0rpx 0rpx 0rpx 0rpx;
filter: blur(12rpx);
position: absolute;
left: 50%;
bottom: -18rpx;
transform: translateX(-50%);
}
.recordList {
background-color: #fff;
padding-top: 10rpx;
}
.recordItem {
display: flex;
align-items: center;
justify-content: center;
margin-left: 20rpx;
margin-right: 20rpx;
padding-top: 30rpx;
padding-bottom: 30rpx;
border-bottom: 2rpx solid #E6E6E6;
}
.recordItem_img {
width: 180rpx;
height: 180rpx;
border-radius: 30rpx 30rpx 30rpx 30rpx;
overflow: hidden;
}
.recordItem_img image {
width: 100%;
height: 100%;
}
.recordItem_Msg {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
margin-left: 30rpx;
}
.recordItem_Msg_right_state1 {
width: 150rpx;
height: 50rpx;
background: #999999;
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.recordItem_Msg_right_state2 {
width: 150rpx;
height: 50rpx;
background: #FF512A;
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.recordItem_Msg_right_state3 {
width: 150rpx;
height: 50rpx;
background: #D5AC66;
border-radius: 100rpx 100rpx 100rpx 100rpx;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.recordItem_Msg_left {
flex: 1;
}
.recordItem_Msg_left_tit {
font-weight: 400;
font-size: 32rpx;
color: #000000;
margin-bottom: 10rpx;
}
.recordItem_Msg_left_msg {
font-weight: 400;
font-size: 24rpx;
color: #999999;
}
.recordItem:last-child {
border-bottom: none;
}
.btn {
width: 650rpx;
height: 80rpx;
background: #FF512A;
border-radius: 100rpx 100rpx 100rpx 100rpx;
font-weight: 400;
font-size: 36rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 40rpx;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
}
.emplty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20rpx;
}

View File

@ -0,0 +1,116 @@
<template>
<view class="box">
<view class="tabList">
<view :class="['tabItem', status == 0 ? 'active' : '']" @click="changeTab" data-index="0">全部</view>
<view :class="['tabItem', status == 1 ? 'active' : '']" @click="changeTab" data-index="1">待处理</view>
<view :class="['tabItem', status == 2 ? 'active' : '']" @click="changeTab" data-index="2">处理中</view>
<view :class="['tabItem', status == 3 ? 'active' : '']" @click="changeTab" data-index="3">已完成</view>
</view>
<view class="recordList" v-if="list.length != 0">
<view class="recordItem" v-for="(item, index) in list" @click="headerRepairDetailClick" :data-id="item.feed_id">
<view class="recordItem_Msg">
<view class="recordItem_Msg_left">
<view class="recordItem_Msg_left_tit">{{item.details}}</view>
<view class="recordItem_Msg_left_msg">
联系人{{item.user_name}}
</view>
<view class="recordItem_Msg_left_msg">
联系人电话{{item.mobile}}
</view>
<view class="recordItem_Msg_left_msg">
期望上门{{item.hope_order_time}}
</view>
<view class="recordItem_Msg_left_msg">
提交时间{{item.create_time}}
</view>
</view>
<!-- <view class="recordItem_Msg_right_state1" wx:if="{{item.status == 0}}">待处理</view>
<view class="recordItem_Msg_right_state2" wx:if="{{item.status == 1}}">已完成</view>
<view class="recordItem_Msg_right_state3" wx:if="{{item.status == 2}}">处理中</view> -->
</view>
</view>
</view>
<view v-if="list.length == 0" class="emplty">
<u-empty iconSize="180" textSize='28' text="暂无内容" />
</view>
<view class="btn" @click="headerRepairClick">我要报修</view>
</view>
</template>
<script>
import { request, picUrl, NavgateTo } from '../../utils';
import { apiArr } from '../../api/community';
export default {
data() {
return {
page_num: 1,
page_size: 10,
flag: false,
list: [],
id: "",
title: '',
status: 0
}
},
methods: {
async init() {
const res = await request(apiArr.getListByRepair, 'POST', {
community_id: this.id,
page_num: this.page_num,
page_size: this.page_size,
status: this.status
})
if (res.rows) {
let flag = false
if (res.rows.length == this.page_size) {
flag = true
} else {
flag = false
}
this.flag = flag;
this.page_num = this.page_num + 1;
this.list = this.list.concat(res.rows || []);
}
},
headerRepairClick(e){
NavgateTo(`/community/oneRepair/index`, { isLogin: false })
},
headerRepairDetailClick(e){
const { id } = e.currentTarget.dataset
NavgateTo(`/community/repairDetail/index?id=${id}&title=${this.title}`, { isLogin: false })
},
changeTab(e){
this.status = Number(e.currentTarget.dataset.index);
this.flag = false;
this.page_num = 1;
this.list = [];
this.init()
},
},
onLoad(options) {
this.id = Number(options.id);
this.title = options.title;
uni.setNavigationBarTitle({
title: options.title,
});
this.init()
},
}
</script>
<style>
@import url("./index.css");
</style>

View File

@ -1,28 +0,0 @@
<template>
<view class="container">
保修列表
</view>
</template>
<script>
import { request, picUrl, NavgateTo } from '../../utils';
import { apiArr } from '../../api/community';
export default {
data() {
return {
}
},
methods: {
},
onLoad(options) {
},
}
</script>
<style>
</style>

View File

@ -74,7 +74,11 @@
},
"usingComponents" : true,
"requiredPrivateInfos" : [ "getLocation" ],
"permission" : {}
"permission" : {
"scope.userLocation": {
"desc": "正在授权您获取当前位置信息"
}
}
},
"mp-alipay" : {
"usingComponents" : true

View File

@ -111,12 +111,18 @@
},
{
"path": "oneRepair/index",
"style": {
"navigationBarTitleText": "报事报修"
}
},
{
"path": "repairList/index",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "repairListByCommunity/index",
"path": "repairDetail/index",
"style": {
"navigationBarTitleText": ""
}

View File

@ -31,7 +31,8 @@
"applyOwer/index",
"mycar/index",
"oneRepair/index",
"repairListByCommunity/index",
"repairList/index",
"repairDetail/index",
"chooseMsg/index",
"addCar/index"
]
@ -53,6 +54,10 @@
"requiredPrivateInfos": [
"getLocation"
],
"permission": {},
"permission": {
"scope.userLocation": {
"desc": "正在授权您获取当前位置信息"
}
},
"usingComponents": {}
}