|
@@ -1,164 +1,175 @@
|
|
|
<template>
|
|
|
<view class="order-detail-container">
|
|
|
- <view class="detail-top-container">
|
|
|
- <view :class="currIndex == 1 ? 'detail-top-left-active' : 'detail-top-left'" @click="tabHandle(1)">
|
|
|
- 故障信息
|
|
|
- </view>
|
|
|
- <view :class="currIndex == 2 ? 'detail-top-left-active' : 'detail-top-left'" @click="tabHandle(2)">
|
|
|
- 处理过程
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="order-detail-content" v-if="currIndex == 1">
|
|
|
- <view class="order-detail-info">
|
|
|
- <view class="order-detail-title">
|
|
|
- <view class="order-detail-level">
|
|
|
- {{detailInfo.level == 1 ? '一级故障' : (detailInfo.level == 2 ? '二级故障' : '三级故障')}}
|
|
|
- </view>
|
|
|
- <view class="order-detail-name">
|
|
|
- {{detailInfo.problemTitle || '-'}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="order-detail-time">
|
|
|
- {{'发生时间: ' + detailInfo.occurrenceTime || '-'}}
|
|
|
+ <view class="detail-page-content">
|
|
|
+ <view class="detail-top-container">
|
|
|
+ <view :class="currIndex == 1 ? 'detail-top-left-active' : 'detail-top-left'" @click="tabHandle(1)">
|
|
|
+ 故障信息
|
|
|
</view>
|
|
|
- <view class="order-detail-site">
|
|
|
- <view class="order-detail-status">
|
|
|
- {{detailInfo.status == 0 ? '待处理...' : (detailInfo.status == 1 ? '分析中...' : '已完结')}}
|
|
|
- </view>
|
|
|
- <view class="order-detail-site-text">
|
|
|
- {{detailInfo.stationName || '-'}}
|
|
|
- </view>
|
|
|
+ <view :class="currIndex == 2 ? 'detail-top-left-active' : 'detail-top-left'" @click="tabHandle(2)">
|
|
|
+ 处理过程
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="order-detail-fault-describe">
|
|
|
- <view class="fault-describe-container">
|
|
|
- <view class="fault-describe-title">
|
|
|
- 问题记录
|
|
|
+ <view class="order-detail-content" v-if="currIndex == 1">
|
|
|
+ <view class="order-detail-info">
|
|
|
+ <view class="order-detail-title">
|
|
|
+ <view class="order-detail-level">
|
|
|
+ {{detailInfo.level == 1 ? '一级故障' : (detailInfo.level == 2 ? '二级故障' : '三级故障')}}
|
|
|
+ </view>
|
|
|
+ <view class="order-detail-name">
|
|
|
+ {{detailInfo.problemTitle || '-'}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="fault-describe-remark" v-if="detailInfo.attachment">
|
|
|
- 点击图片可查看保存大图
|
|
|
+ <view class="order-detail-time">
|
|
|
+ {{'发生时间: ' + detailInfo.occurrenceTime || '-'}}
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="order-detail-swiper" v-if="detailInfo.attachment">
|
|
|
- <u-swiper :list="detailInfo.imgList" @click="imageHandle"></u-swiper>
|
|
|
- </view>
|
|
|
- <view class="order-detail-swiper" v-if="detailInfo.video">
|
|
|
- <video :src='detailInfo.video'></video>
|
|
|
- </view>
|
|
|
- <view class="order-problem-container">
|
|
|
- <view class="problem-title">
|
|
|
- <view class="problem-icon">?</view>
|
|
|
- <view class="problem-title-text">
|
|
|
- 问题记录
|
|
|
+ <view class="order-detail-site">
|
|
|
+ <view class="order-detail-status">
|
|
|
+ {{detailInfo.status == 0 ? '待处理...' : (detailInfo.status == 1 ? '分析中...' : '已完结')}}
|
|
|
+ </view>
|
|
|
+ <view class="order-detail-site-text">
|
|
|
+ {{detailInfo.stationName || '-'}}
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="problem-text">
|
|
|
- {{detailInfo.deviceProblem || '-'}}
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="order-detail-basic">
|
|
|
- <view class="order-detail-basic-title">
|
|
|
- <view class="basic-title-text">
|
|
|
- 详细信息
|
|
|
+ <view class="order-detail-fault-describe">
|
|
|
+ <view class="fault-describe-container">
|
|
|
+ <view class="fault-describe-title">
|
|
|
+ 问题记录
|
|
|
+ </view>
|
|
|
+ <view class="fault-describe-remark" v-if="detailInfo.attachment">
|
|
|
+ 点击图片可查看保存大图
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="basic-title-show" v-if="isShowMore" @click="showHandle">
|
|
|
- 收起
|
|
|
- <u-icon name="arrow-up"></u-icon>
|
|
|
+ <view class="order-detail-swiper" v-if="detailInfo.attachment">
|
|
|
+ <u-swiper :list="detailInfo.imgList" @click="imageHandle"></u-swiper>
|
|
|
</view>
|
|
|
- <view class="basic-title-show" v-if="!isShowMore" @click="showHandle">
|
|
|
- 展开
|
|
|
- <u-icon name="arrow-down"></u-icon>
|
|
|
+ <view class="order-detail-swiper" v-if="detailInfo.video">
|
|
|
+ <video :src='detailInfo.video'></video>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="basic-items" v-if="isShowMore">
|
|
|
- <view class="basic-item">
|
|
|
- <view class="basic-item-title">
|
|
|
- 设备名称
|
|
|
+ <view class="order-problem-container">
|
|
|
+ <view class="problem-title">
|
|
|
+ <view class="problem-icon">?</view>
|
|
|
+ <view class="problem-title-text">
|
|
|
+ 问题记录
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="basic-item-text">
|
|
|
- {{detailInfo.deviceName || '-'}}
|
|
|
+ <view class="problem-text">
|
|
|
+ {{detailInfo.deviceProblem || '-'}}
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="basic-item">
|
|
|
- <view class="basic-item-title">
|
|
|
- 设备编号
|
|
|
+ </view>
|
|
|
+ <view class="order-detail-basic">
|
|
|
+ <view class="order-detail-basic-title">
|
|
|
+ <view class="basic-title-text">
|
|
|
+ 详细信息
|
|
|
+ </view>
|
|
|
+ <view class="basic-title-show" v-if="isShowMore" @click="showHandle">
|
|
|
+ 收起
|
|
|
+ <u-icon name="arrow-up"></u-icon>
|
|
|
</view>
|
|
|
- <view class="basic-item-text">
|
|
|
- {{detailInfo.sn || '-'}}
|
|
|
+ <view class="basic-title-show" v-if="!isShowMore" @click="showHandle">
|
|
|
+ 展开
|
|
|
+ <u-icon name="arrow-down"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="basic-item">
|
|
|
- <view class="basic-item-title">
|
|
|
- 上报人
|
|
|
+ <view class="basic-items" v-if="isShowMore">
|
|
|
+ <view class="basic-item">
|
|
|
+ <view class="basic-item-title">
|
|
|
+ 设备名称
|
|
|
+ </view>
|
|
|
+ <view class="basic-item-text">
|
|
|
+ {{detailInfo.deviceName || '-'}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="basic-item-text">
|
|
|
- {{detailInfo.createBy || '-'}}
|
|
|
+ <view class="basic-item">
|
|
|
+ <view class="basic-item-title">
|
|
|
+ 设备编号
|
|
|
+ </view>
|
|
|
+ <view class="basic-item-text">
|
|
|
+ {{detailInfo.sn || '-'}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="basic-item">
|
|
|
- <view class="basic-item-title">
|
|
|
- 联系方式
|
|
|
+ <view class="basic-item">
|
|
|
+ <view class="basic-item-title">
|
|
|
+ 上报人
|
|
|
+ </view>
|
|
|
+ <view class="basic-item-text">
|
|
|
+ {{detailInfo.createBy || '-'}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="basic-item-text">
|
|
|
- {{detailInfo.contactPhone || '-'}}
|
|
|
+ <view class="basic-item">
|
|
|
+ <view class="basic-item-title">
|
|
|
+ 联系方式
|
|
|
+ </view>
|
|
|
+ <view class="basic-item-text">
|
|
|
+ {{detailInfo.contactPhone || '-'}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="order-detail-deal" v-if="detailInfo.status == 0 || (detailInfo.status == 1 && detailInfo.currentPerson == userinfo.userId)">
|
|
|
- <view class="order-detail-deal-title">
|
|
|
- 处理信息
|
|
|
+ <view class="order-detail-deal" v-if="detailInfo.status == 0 || (detailInfo.status == 1 && detailInfo.currentPerson == userinfo.userId)">
|
|
|
+ <view class="order-detail-deal-title">
|
|
|
+ 处理信息
|
|
|
+ </view>
|
|
|
+ <u-form :model="form" ref="uform" :rules="rules" label-align='left' label-width="150">
|
|
|
+ <u-form-item label="处理方式" prop="statusText">
|
|
|
+ <u-input type="select" :select-open="dealSelectShow" placeholder="请选择换电站" v-model="form.statusText" @click="dealSelectShow = true"/>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="处理人员" prop="nextPerson" v-if="form.status == 3">
|
|
|
+ <u-input type="select" :select-open="showPerson" placeholder="请选择处理人员" v-model="form.nextPerson" @click="showPerson = true"/>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="处理记录" prop="info" :label-position="'top'">
|
|
|
+ <u-input type="textarea" placeholder="请输入问题记录 不超过200个字" :maxlength="200" v-model="form.info" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="问题图片(不超过5张,20M以内)" prop="intro" :label-position="'top'">
|
|
|
+ <u-upload multiple :fileList="fileList" @on-choose-complete="onChooseComplete" :auto-upload="false" @delete="deletePic" name="1" :maxCount="5"></u-upload>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="问题视频(不超过1个,50M以内)" prop="intro" :label-position="'top'">
|
|
|
+ <view class="uploadv" @click="onVideoChooseComplete" v-if="!form.video">
|
|
|
+ <u-icon name="plus" class="u-add-btn" size="40"></u-icon>
|
|
|
+ <view class="u-add-tips">选择视频</view>
|
|
|
+ </view>
|
|
|
+ <view class="uploadv" v-if="form.video">
|
|
|
+ <video class="u-add-btn" :src="form.video"></video>
|
|
|
+ </view>
|
|
|
+ </u-form-item>
|
|
|
+ </u-form>
|
|
|
</view>
|
|
|
- <u-form :model="form" ref="uform" :rules="rules" label-align='left' label-width="150">
|
|
|
- <u-form-item label="处理方式" prop="statusText">
|
|
|
- <u-input type="select" :select-open="dealSelectShow" placeholder="请选择换电站" v-model="form.statusText" @click="dealSelectShow = true"/>
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="处理人员" prop="nextPerson">
|
|
|
- <u-input type="select" :select-open="showPerson" placeholder="请选择处理人员" v-model="form.nextPerson" @click="showPerson = true"/>
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="处理记录" prop="info" :label-position="'top'">
|
|
|
- <u-input type="textarea" placeholder="请输入问题记录 不超过200个字" :maxlength="200" v-model="form.info" />
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="问题图片(不超过5张,5M以内)" prop="intro" :label-position="'top'">
|
|
|
- <u-upload action="http://localhost:8087/zl/business/file/upload" multiple :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="5"></u-upload>
|
|
|
- </u-form-item>
|
|
|
- </u-form>
|
|
|
- <view class="">
|
|
|
+ <view class="order-footer-button" :disabled="isClick" v-if="detailInfo.status == 0 || (detailInfo.status == 1 && detailInfo.currentPerson == userinfo.userId)" @click="submitHandle">
|
|
|
处理
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="order-detail-timeLine" v-if="currIndex == 2">
|
|
|
- <u-time-line>
|
|
|
- <u-time-line-item nodeTop="2" v-for="(item, index) in timeDatas" :key="index">
|
|
|
- <template v-slot:node>
|
|
|
- <view class="time-line-node">
|
|
|
- {{item.status == 1 ? '处理' : (item.status == 2 ? '完结' : '流转')}}
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template v-slot:content>
|
|
|
- <view>
|
|
|
- <view class="u-order-title">
|
|
|
- <span class="u-order-time">{{item.handleTime || '-'}}</span>
|
|
|
- <span class="u-order-name" v-if="item.previousName && item.nextPerson">{{item.previousName + '>' + item.nextPerson}}</span>
|
|
|
- <span class="u-order-name" v-else-if="!item.previousName && item.nextPerson">{{item.nextPerson}}</span>
|
|
|
- <span class="u-order-name" v-else>{{item.processorName}}</span>
|
|
|
- </view>
|
|
|
- <view class="u-order-desc">{{item.status == 2 ? '处理完成' : '分析处理中'}}</view>
|
|
|
- <view class="u-order-images" v-if="item.attachment">
|
|
|
- <image :src="img" v-for="(img, i) in item.imgList" :key="i" class="u-order-img"></image>
|
|
|
+ <view class="order-detail-timeLine" v-if="currIndex == 2">
|
|
|
+ <u-time-line>
|
|
|
+ <u-time-line-item nodeTop="2" v-for="(item, index) in timeDatas" :key="index">
|
|
|
+ <template v-slot:node>
|
|
|
+ <view class="time-line-node">
|
|
|
+ {{item.status == 1 ? '处理' : (item.status == 2 ? '完结' : '流转')}}
|
|
|
</view>
|
|
|
- <view class="u-order-images" v-if="item.video">
|
|
|
- <video :src="item.video" class="u-order-img"></video>
|
|
|
+ </template>
|
|
|
+ <template v-slot:content>
|
|
|
+ <view>
|
|
|
+ <view class="u-order-title">
|
|
|
+ <span class="u-order-time">{{item.handleTime || '-'}}</span>
|
|
|
+ <span class="u-order-name" v-if="item.processorName && item.nextPerson">{{item.processorName + '>' + item.nextPerson}}</span>
|
|
|
+ <span class="u-order-name" v-else-if="item.processorName && !item.nextPerson">{{item.processorName}}</span>
|
|
|
+ <span class="u-order-name" v-else>{{item.processorName}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="u-order-desc">{{item.info || '-'}}</view>
|
|
|
+ <view class="u-order-images" v-if="item.attachment">
|
|
|
+ <image :src="img" v-for="(img, i) in item.imgList" :key="i" class="u-order-img"></image>
|
|
|
+ </view>
|
|
|
+ <view class="u-order-images" v-if="item.video">
|
|
|
+ <video :src="item.video" class="u-order-img"></video>
|
|
|
+ </view>
|
|
|
+
|
|
|
</view>
|
|
|
-
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </u-time-line-item>
|
|
|
- </u-time-line>
|
|
|
- <view class="no-data" v-if="timeDatas.length == 0">
|
|
|
- 该工单暂无处理记录
|
|
|
+ </template>
|
|
|
+ </u-time-line-item>
|
|
|
+ </u-time-line>
|
|
|
+ <view class="no-data" v-if="timeDatas.length == 0">
|
|
|
+ 该工单暂无处理记录
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<u-select :list="dealSelectList" v-model="dealSelectShow" @confirm="dealSelectCallback"> </u-select>
|
|
@@ -186,6 +197,9 @@
|
|
|
info: null,
|
|
|
nextPerson: null,
|
|
|
nextId: null,
|
|
|
+ attachment: null,
|
|
|
+ img: [],
|
|
|
+ video: null,
|
|
|
},
|
|
|
//是否显示处理方式
|
|
|
dealSelectShow: false,
|
|
@@ -217,6 +231,8 @@
|
|
|
|
|
|
},
|
|
|
timeDatas: [],
|
|
|
+ //是否点击按钮
|
|
|
+ isClick: false,
|
|
|
}
|
|
|
},
|
|
|
//第一次加载
|
|
@@ -293,7 +309,7 @@
|
|
|
getDealList() {
|
|
|
let _that = this
|
|
|
uni.showLoading({
|
|
|
- title: '搜索中...',
|
|
|
+ title: '加载中...',
|
|
|
})
|
|
|
_that.timeDatas = [];
|
|
|
_that.$http.getOrderDealList({parentId: _that.id}).then(res => {
|
|
@@ -326,6 +342,93 @@
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ //图片上传
|
|
|
+ onChooseComplete(lists, name) {
|
|
|
+ const _that = this;
|
|
|
+ uni.uploadFile({
|
|
|
+ url: 'http://localhost:8087/zl/mini/file/upload',
|
|
|
+ filePath: lists[0].url,
|
|
|
+ name: 'file',
|
|
|
+ header: {
|
|
|
+ "Authorization": `${uni.getStorageSync("token")}`
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ if(res.statusCode == 200) {
|
|
|
+ let data = JSON.parse(res.data)
|
|
|
+ _that.form.img.push(data.msg)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //视频上传
|
|
|
+ onVideoChooseComplete() {
|
|
|
+ const _that = this;
|
|
|
+ uni.chooseVideo({
|
|
|
+ sourceType: ['album', 'camera'],
|
|
|
+ success: (chooseImageRes) => {
|
|
|
+ const tempFilePaths = chooseImageRes.tempFilePath;
|
|
|
+ if( chooseImageRes.size >= 52428800 ) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '不能超过50M',
|
|
|
+ icon: 'none',
|
|
|
+ mask: true,
|
|
|
+ });
|
|
|
+ return
|
|
|
+ }
|
|
|
+ uni.showLoading({
|
|
|
+ title: '视频上传中...'
|
|
|
+ })
|
|
|
+ uni.uploadFile({
|
|
|
+ url: 'http://localhost:8087/zl/mini/file/upload', //仅为示例,非真实的接口地址
|
|
|
+ filePath: tempFilePaths,
|
|
|
+ name: 'file',
|
|
|
+ method: 'post',
|
|
|
+ formData: {
|
|
|
+ "Authorization": `${uni.getStorageSync("token")}`
|
|
|
+ },
|
|
|
+ success: (uploadFileRes) => {
|
|
|
+ let data = JSON.parse(uploadFileRes.data)
|
|
|
+ _that.form.video = data.msg;
|
|
|
+ uni.hideLoading();
|
|
|
+ },
|
|
|
+ fail: () => {
|
|
|
+ uni.hideLoading();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //提交
|
|
|
+ submitHandle() {
|
|
|
+ let _that = this;
|
|
|
+ _that.isClick = true;
|
|
|
+ _that.$refs.uform.validate(valid => {
|
|
|
+ if (!valid) {
|
|
|
+ _that.isClick = false;
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let form = _that.form;
|
|
|
+ form.parentId = _that.id;
|
|
|
+ if(form.img && form.img.length > 0) {
|
|
|
+ form.attachment = form.img.join(',')
|
|
|
+ }
|
|
|
+ _that.$http.orderDeal(_that.form).then(res => {
|
|
|
+ _that.isClick = false;
|
|
|
+ if(res.code == 200) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '处理成功',
|
|
|
+ icon: 'success',
|
|
|
+ duration: 1000
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ _that.getDetailData();
|
|
|
+ }, 1000);
|
|
|
+ } else {
|
|
|
+ _that.$utils.msg(res.msg);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -338,280 +441,286 @@
|
|
|
box-sizing: border-box;
|
|
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
|
padding-top: 15rpx;
|
|
|
- .detail-top-container {
|
|
|
- display: flex;
|
|
|
- margin: 0rpx 30rpx;
|
|
|
- .detail-top-left-active {
|
|
|
- height: 90rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- line-height: 90rpx;
|
|
|
- width: 50%;
|
|
|
- text-align: center;
|
|
|
- font-size: 36rpx;
|
|
|
- font-family: PingFang SC-Medium, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #1D2129;
|
|
|
- border-radius: 16rpx 16rpx 0rpx 0rpx;
|
|
|
- }
|
|
|
- .detail-top-left {
|
|
|
- height: 72rpx;
|
|
|
- background: #E8F3FF;
|
|
|
- line-height: 72rpx;
|
|
|
- width: 50%;
|
|
|
- text-align: center;
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC-Medium, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #1D2129;
|
|
|
- border-radius: 16rpx 16rpx 0rpx 0rpx;
|
|
|
- margin-top: 18rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .order-detail-content {
|
|
|
- .order-detail-info {
|
|
|
- background: #FFFFFF;
|
|
|
- padding: 30rpx;
|
|
|
- margin: 0 30rpx;
|
|
|
- border-radius: 0rpx 0rpx 16rpx 16rpx;
|
|
|
- min-height: 220rpx;
|
|
|
- .order-detail-title {
|
|
|
- display: flex;
|
|
|
- .order-detail-level {
|
|
|
- font-size: 20rpx;
|
|
|
- font-family: PingFang SC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #F53F3F;
|
|
|
- line-height: 36rpx;
|
|
|
- width: 96rpx;
|
|
|
- height: 36rpx;
|
|
|
- background: #FFECE8;
|
|
|
- border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .order-detail-name {
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC-Medium, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #1D2129;
|
|
|
- line-height: 36rpx;
|
|
|
- margin-left: 24rpx;
|
|
|
- width: calc(100% - 120rpx);
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
+ overflow-y: hidden;
|
|
|
+ .detail-page-content {
|
|
|
+ height: calc(100vh - 120rpx - env(safe-area-inset-bottom));
|
|
|
+ overflow-y: auto;
|
|
|
+ .detail-top-container {
|
|
|
+ display: flex;
|
|
|
+ margin: 0rpx 30rpx;
|
|
|
+ .detail-top-left-active {
|
|
|
+ height: 90rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ line-height: 90rpx;
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: PingFang SC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #1D2129;
|
|
|
+ border-radius: 16rpx 16rpx 0rpx 0rpx;
|
|
|
}
|
|
|
- .order-detail-time {
|
|
|
- font-size: 24rpx;
|
|
|
- font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ .detail-top-left {
|
|
|
+ height: 72rpx;
|
|
|
+ background: #E8F3FF;
|
|
|
+ line-height: 72rpx;
|
|
|
+ width: 50%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC-Medium, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
- color: #86909C;
|
|
|
- line-height: 28rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
- }
|
|
|
- .order-detail-site {
|
|
|
- display: flex;
|
|
|
- position: relative;
|
|
|
- margin-top: 20rpx;
|
|
|
- .order-detail-status {
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #3F8CFF;
|
|
|
- line-height: 36rpx;
|
|
|
- }
|
|
|
- .order-detail-site-text {
|
|
|
- font-size: 26rpx;
|
|
|
- font-family: PingFang SC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #86909C;
|
|
|
- line-height: 36rpx;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- }
|
|
|
+ color: #1D2129;
|
|
|
+ border-radius: 16rpx 16rpx 0rpx 0rpx;
|
|
|
+ margin-top: 18rpx;
|
|
|
}
|
|
|
}
|
|
|
- .order-detail-fault-describe {
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 30rpx;
|
|
|
- margin: 30rpx;
|
|
|
- .fault-describe-container {
|
|
|
- display: flex;
|
|
|
- .fault-describe-title {
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC-Medium, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #1E2128;
|
|
|
- line-height: 36px;
|
|
|
- text-align: left;
|
|
|
- flex: 1;
|
|
|
+ .order-detail-content {
|
|
|
+
|
|
|
+ .order-detail-info {
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 30rpx;
|
|
|
+ margin: 0 30rpx;
|
|
|
+ border-radius: 0rpx 0rpx 16rpx 16rpx;
|
|
|
+ min-height: 220rpx;
|
|
|
+ .order-detail-title {
|
|
|
+ display: flex;
|
|
|
+ .order-detail-level {
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #F53F3F;
|
|
|
+ line-height: 36rpx;
|
|
|
+ width: 96rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background: #FFECE8;
|
|
|
+ border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .order-detail-name {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #1D2129;
|
|
|
+ line-height: 36rpx;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ width: calc(100% - 120rpx);
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
}
|
|
|
- .fault-describe-remark {
|
|
|
+ .order-detail-time {
|
|
|
font-size: 24rpx;
|
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
- color: #C9CDD4;
|
|
|
- line-height: 36px;
|
|
|
- flex: 1;
|
|
|
- text-align: right;
|
|
|
+ color: #86909C;
|
|
|
+ line-height: 28rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
}
|
|
|
- }
|
|
|
- .order-detail-swiper {
|
|
|
- margin-top: 30rpx;
|
|
|
- }
|
|
|
- .order-problem-container {
|
|
|
- margin-top: 30rpx;
|
|
|
- .problem-title {
|
|
|
+ .order-detail-site {
|
|
|
display: flex;
|
|
|
- .problem-icon {
|
|
|
- height: 36rpx;
|
|
|
- width: 36rpx;
|
|
|
- border: 1rpx solid #C9CDD4;
|
|
|
- border-radius: 50%;
|
|
|
- margin-right: 10rpx;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ .order-detail-status {
|
|
|
font-size: 30rpx;
|
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
- color: #C9CDD4;
|
|
|
+ color: #3F8CFF;
|
|
|
line-height: 36rpx;
|
|
|
- text-align: center;
|
|
|
}
|
|
|
- .problem-title-text {
|
|
|
- font-size: 30rpx;
|
|
|
+ .order-detail-site-text {
|
|
|
+ font-size: 26rpx;
|
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
- color: #C9CDD4;
|
|
|
+ color: #86909C;
|
|
|
line-height: 36rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
}
|
|
|
}
|
|
|
- .problem-text {
|
|
|
- font-size: 28rpx;
|
|
|
- font-family: PingFang SC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #1D2129;
|
|
|
- line-height: 40rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
- }
|
|
|
}
|
|
|
- }
|
|
|
- .order-detail-basic {
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 30rpx;
|
|
|
- margin: 0rpx 30rpx 30rpx;
|
|
|
- .order-detail-basic-title {
|
|
|
- display: flex;
|
|
|
- .basic-title-text {
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC-Medium, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #1E2128;
|
|
|
- line-height: 36rpx;
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- .basic-title-show {
|
|
|
- font-size: 26rpx;
|
|
|
- font-family: PingFang SC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #C9CDD4;
|
|
|
- line-height: 36rpx;
|
|
|
- flex: 1;
|
|
|
- text-align: right;
|
|
|
- margin-right: 5rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .basic-items {
|
|
|
- margin-top: 30rpx;
|
|
|
- .basic-item {
|
|
|
+ .order-detail-fault-describe {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ margin: 30rpx;
|
|
|
+ .fault-describe-container {
|
|
|
display: flex;
|
|
|
- height: 100rpx;
|
|
|
- .basic-item-title {
|
|
|
+ .fault-describe-title {
|
|
|
font-size: 30rpx;
|
|
|
+ font-family: PingFang SC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #1E2128;
|
|
|
+ line-height: 36px;
|
|
|
+ text-align: left;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .fault-describe-remark {
|
|
|
+ font-size: 24rpx;
|
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
- color: #86909C;
|
|
|
- line-height: 100rpx;
|
|
|
- width: 200rpx;
|
|
|
+ color: #C9CDD4;
|
|
|
+ line-height: 36px;
|
|
|
+ flex: 1;
|
|
|
+ text-align: right;
|
|
|
}
|
|
|
- .basic-item-text {
|
|
|
- font-size: 30rpx;
|
|
|
+ }
|
|
|
+ .order-detail-swiper {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ }
|
|
|
+ .order-problem-container {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .problem-title {
|
|
|
+ display: flex;
|
|
|
+ .problem-icon {
|
|
|
+ height: 36rpx;
|
|
|
+ width: 36rpx;
|
|
|
+ border: 1rpx solid #C9CDD4;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #C9CDD4;
|
|
|
+ line-height: 36rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .problem-title-text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #C9CDD4;
|
|
|
+ line-height: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .problem-text {
|
|
|
+ font-size: 28rpx;
|
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #1D2129;
|
|
|
- line-height: 100rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order-detail-basic {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ margin: 0rpx 30rpx 30rpx;
|
|
|
+ .order-detail-basic-title {
|
|
|
+ display: flex;
|
|
|
+ .basic-title-text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #1E2128;
|
|
|
+ line-height: 36rpx;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .basic-title-show {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #C9CDD4;
|
|
|
+ line-height: 36rpx;
|
|
|
flex: 1;
|
|
|
text-align: right;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
+ margin-right: 5rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .basic-items {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .basic-item {
|
|
|
+ display: flex;
|
|
|
+ height: 100rpx;
|
|
|
+ .basic-item-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #86909C;
|
|
|
+ line-height: 100rpx;
|
|
|
+ width: 200rpx;
|
|
|
+ }
|
|
|
+ .basic-item-text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #1D2129;
|
|
|
+ line-height: 100rpx;
|
|
|
+ flex: 1;
|
|
|
+ text-align: right;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .order-detail-deal {
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 30rpx;
|
|
|
- margin: 0rpx 30rpx 30rpx;
|
|
|
- .order-detail-deal-title {
|
|
|
- font-size: 30rpx;
|
|
|
- font-family: PingFang SC-Medium, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #1E2128;
|
|
|
- line-height: 36rpx;
|
|
|
+ .order-detail-deal {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ margin: 0rpx 30rpx 30rpx;
|
|
|
+ .order-detail-deal-title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #1E2128;
|
|
|
+ line-height: 36rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .order-detail-timeLine {
|
|
|
- background: #FFFFFF;
|
|
|
- padding: 30rpx 30rpx 30rpx 60rpx;
|
|
|
- margin: 0 30rpx;
|
|
|
- border-radius: 0rpx 0rpx 16rpx 16rpx;
|
|
|
- min-height: 220rpx;
|
|
|
- .time-line-node {
|
|
|
- height: 80rpx;
|
|
|
- background: #3F8CFF;
|
|
|
- line-height: 80rpx;
|
|
|
- width: auto;
|
|
|
- padding: 0 10rpx;
|
|
|
- border-radius: 50%;
|
|
|
- font-size: 28rpx;
|
|
|
- font-family: PingFang SC-Regular, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- .u-order-title {
|
|
|
- display: flex;
|
|
|
- .u-order-time {
|
|
|
+ .order-detail-timeLine {
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 30rpx 30rpx 30rpx 60rpx;
|
|
|
+ margin: 0 30rpx;
|
|
|
+ border-radius: 0rpx 0rpx 16rpx 16rpx;
|
|
|
+ min-height: 220rpx;
|
|
|
+ .time-line-node {
|
|
|
+ height: 80rpx;
|
|
|
+ background: #3F8CFF;
|
|
|
+ line-height: 80rpx;
|
|
|
+ width: auto;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ border-radius: 50%;
|
|
|
font-size: 28rpx;
|
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #1D2129;
|
|
|
- line-height: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .u-order-title {
|
|
|
+ display: flex;
|
|
|
+ .u-order-time {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #1D2129;
|
|
|
+ line-height: 32rpx;
|
|
|
+ }
|
|
|
+ .u-order-name {
|
|
|
+ flex: 1;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #C9CDD4;
|
|
|
+ line-height: 32rpx;
|
|
|
+ }
|
|
|
}
|
|
|
- .u-order-name {
|
|
|
- flex: 1;
|
|
|
- text-align: right;
|
|
|
+ .no-data {
|
|
|
+ text-align: center;
|
|
|
font-size: 22rpx;
|
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
- color: #C9CDD4;
|
|
|
+ color: #1D2129;
|
|
|
line-height: 32rpx;
|
|
|
+ position: fixed;
|
|
|
+ top: 200rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%);
|
|
|
}
|
|
|
}
|
|
|
- .no-data {
|
|
|
- text-align: center;
|
|
|
- font-size: 22rpx;
|
|
|
- font-family: PingFang SC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #1D2129;
|
|
|
- line-height: 32rpx;
|
|
|
- position: fixed;
|
|
|
- top: 200rpx;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%);
|
|
|
- }
|
|
|
}
|
|
|
.u-order-desc {
|
|
|
font-size: 24rpx;
|
|
@@ -632,5 +741,61 @@
|
|
|
margin: 0 10rpx 10rpx 0;
|
|
|
}
|
|
|
}
|
|
|
+ .order-footer-button {
|
|
|
+ line-height: 100rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-family: PingFang SC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: #9CC1FA;
|
|
|
+ width: calc(100% - 64rpx);
|
|
|
+ margin: 0 32rpx;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ position: fixed;
|
|
|
+ bottom: env(safe-area-inset-bottom);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ .uploadv {
|
|
|
+ width: 208rpx;
|
|
|
+ height: 208rpx;
|
|
|
+ flex-direction: column;
|
|
|
+ color: #606266;
|
|
|
+ font-size: 26rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 10rpx;
|
|
|
+ background: #f4f5f6;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .u-add-tips {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ line-height: 20rpx;
|
|
|
+ }
|
|
|
+ .img {
|
|
|
+ width: 60%;
|
|
|
+ height: 60%;
|
|
|
+ image {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .u-delete-icon {
|
|
|
+ position: absolute;
|
|
|
+ top: 10rpx;
|
|
|
+ right: 10rpx;
|
|
|
+ z-index: 10;
|
|
|
+ background-color: #FFAD26 !important;
|
|
|
+ border-radius: 108rpx;
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|