flying-monkey/pages/workOrder/details.vue

938 lines
34 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="content">
<statusNav :navBarTitle="textTitle"></statusNav>
<view class="details-nav">
<view class="li" @click="detailsNavpa(index)" :class="item.state?'on':''"
v-for="(item,index) in detailsNav">
{{item.title}}
</view>
</view>
<swiper class="swiper" @change="swiperCurrentFun" :current="swiperCurrent" :style="'height:'+swiHeight+'px'">
<swiper-item>
<view class="swiper-item uni-bg-red">
<view id="swi1">
<view class="work-order-from">
<view class="state">
状态:待维修
</view>
<view class="li">
<view class="title">
工单编号:
</view>
<input type="text" class="input" placeholder="" value="GD20211203-001" />
</view>
<view class="li">
<view class="title">
项目编号:
</view>
<input type="text" class="input" placeholder="" value="GD20211203-001" />
</view>
<view class="li">
<view class="title">
项目名称:
</view>
<input type="text" class="input input-black" placeholder=""
value="湖南省林业科学院11楼会议室P2.5" />
</view>
<view class="li">
<view class="title">
产品类型:
</view>
<input type="text" class="input" placeholder="" value="Q2.5-E" />
</view>
<view class="li">
<view class="title">
安装位置:
</view>
<input type="text" class="input" placeholder="" value="详细地址+某某栋11楼会议室" />
</view>
<view class="li">
<view class="title">
故障类型:
</view>
<input type="text" class="input" placeholder="" value="供电不足" />
</view>
<view class="li">
<view class="title">
紧急程度:
</view>
<input type="text" class="input" placeholder="" value="紧急" />
</view>
<view class="li">
<view class="title">
故障说明:
</view>
<textarea auto-height class="input"
value="*********************************************************************************************************"
placeholder="" />
</view>
<view class="li">
<view class="title">
故障图片:
</view>
<view class="input">
<image class="img" src="../../static/del/微信图片_20220113152400.png" mode="aspectFill">
</image>
<image class="img" src="../../static/del/微信图片_20220113152400.png" mode="aspectFill">
</image>
</view>
</view>
</view>
<view class="work-order-from">
<view class="li">
<view class="title">
报 单 人:
</view>
<input type="text" class="input" placeholder="" value="林某" />
</view>
<view class="li">
<view class="title">
报单时间:
</view>
<input type="text" class="input" placeholder="" value="2021/12/3 12:00:05" />
</view>
<view class="li">
<view class="title">
服务方式:
</view>
<input type="text" class="input input-black" placeholder="" value="上门服务" />
</view>
<view class="li">
<view class="title">
定位地址:
</view>
<input type="text" class="input" placeholder=""
value="*******************************" />
</view>
</view>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-green">
<view id="swi2">
<view class="work-order-from">
<view class="state" style="background-image: url(../../static/iocn/swi2.png);">
状态:已完成
</view>
<view class="li">
<view class="title">
开始时间:
</view>
<input type="text" class="input " placeholder="" value="2022-01-25 09:39" />
</view>
<view class="li">
<view class="title">
结束时间:
</view>
<input type="text" class="input " placeholder="" value="2022-01-25 15:30" />
</view>
<view class="li">
<view class="title">
维保用时:
</view>
<input type="text" class="input input-black" placeholder="" value="5小时51分钟" />
</view>
<view class="li">
<view class="title">
维保费用:
</view>
<input type="text" class="input " placeholder="" value="¥500.00元" />
</view>
<view class="li">
<view class="title">
等待时长:
</view>
<input type="text" class="input " placeholder="" value="1天6小时35分钟" />
</view>
<view class="li">
<view class="title">
主维保人:
</view>
<input type="text" class="input " placeholder="" value="陈志远" />
</view>
<view class="li">
<view class="title">
更换配件:
</view>
<view class="rideo">
<view class="isrideo" @click="isrideoFun(true)">
<view class="icon " :class="isrideo?'on':''">
<view class="icon-content">
</view>
</view>
<view class="">
</view>
</view>
<view class="isrideo" @click="isrideoFun(false)" >
<view class="icon" :class="isrideo?'':'on'">
<view class="icon-content">
</view>
</view>
<view class="">
</view>
</view>
</view>
</view>
<view class="li">
<view class="title">
工作描述:
</view>
<textarea auto-height class="input "
value="*********************************************************************************************************"
placeholder="" />
</view>
<view class="li">
<view class="title">
维保图片:
</view>
<view class="input add-display">
<view class="">
<image class="img" src="../../static/del/微信图片_20220113152400.png"
mode="aspectFill"></image>
<image class="img" src="../../static/del/微信图片_20220113152400.png"
mode="aspectFill"></image>
</view>
</view>
</view>
<view class="li">
<view class="title">
故障原因:
</view>
<textarea auto-height class="input "
value="*********************************************************************************************************"
placeholder="" />
</view>
<view class="li">
<view class="title">
维保人员:
</view>
<input type="text" class="input " placeholder="" value="罗帅 陈志远" />
</view>
</view>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-blue">
<view id="swi3">
<view class="change-accessory">
<view class="state" style="background-image: url(../../static/iocn/siw3.png);">
状态:待结算
</view>
<view class="list">
<view class="li">
<image class="img" src="../../static/del/QQ截图20220210213041.png" mode="aspectFill">
</image>
<view class="text-content">
<view class="title">
<view class="text clips1">
全彩LED显示屏电源
</view>
<view class="date">
1011-1
</view>
</view>
<view class="text">
配件品牌:华鑫电源
</view>
<view class="text">
规格型号5A-75B
</view>
<view class="text">
使用数量1张
</view>
</view>
</view>
<view class="li">
<image class="img" src="../../static/del/QQ截图20220210213041.png" mode="aspectFill">
</image>
<view class="text-content">
<view class="title">
<view class="text clips1">
全彩LED显示屏电源
</view>
<view class="date">
1011-1
</view>
</view>
<view class="text">
配件品牌:华鑫电源
</view>
<view class="text">
规格型号5A-75B
</view>
<view class="text">
使用数量1张
</view>
</view>
</view>
<view class="li">
<image class="img" src="../../static/del/QQ截图20220210213041.png" mode="aspectFill">
</image>
<view class="text-content">
<view class="title">
<view class="text clips1">
全彩LED显示屏电源
</view>
<view class="date">
1011-1
</view>
</view>
<view class="text">
配件品牌:华鑫电源
</view>
<view class="text">
规格型号5A-75B
</view>
<view class="text">
使用数量1张
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-blue">
<view id="swi4">
<view class="course-nav">
<view class="state">
状态:待维修
</view>
<view class="date">
报修时间2022年02月10日
</view>
<view class="code">
<view class="">
工单编号1254635996212345
</view>
<view class="btn" @click="copy('1254635996212345')">
复制
</view>
</view>
</view>
<view class="course-content">
<view class="record-content">
<view class="title">
过程追踪
</view>
<view class="list">
<view class="li on">
<view class="icon">
<view class="icon-con">
</view>
</view>
<view class="con">
<view class="text clips2">
【维修中】工号00234工程师将于16:00到达现场为您 服务。
</view>
<view class="date">
2020-06-15 1530
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text clips1">
【工程师已接单】工号00234工程师已接单
</view>
<view class="date">
2020-06-15 14:30
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text">
“黑屏”故障 【某某】已处理。
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text">
“黑屏”故障 【某某】已处理。
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text">
“黑屏”故障 【某某】已处理。
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text">
“黑屏”故障 【某某】已处理。
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text">
“黑屏”故障 【某某】已处理。
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
</view>
</view>
<view class="button">
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import statusNav from '../../components/status-nav.vue';
import footTabOne from "../../components/foot-tabs/foot-tab-one.vue"
export default {
components: {
footTabOne,
statusNav
},
data() {
return {
swiperCurrent: 0,
textTitle: "工单详情",
isrideo:true,
detailsNav: [{
title: "基础信息",
state: true
},
{
title: "处理详情",
state: false
},
{
title: "更换配件",
state: false
},
{
title: "处理过程",
state: false
},
],
}
},
mounted() {
const query = uni.createSelectorQuery().in(this);
query.select('#swi1').boundingClientRect(data => {
this.swiHeight = data.height - 100
}).exec();
this.detailsNavFun(0)
},
methods: {
isrideoFun(is){
this.isrideo=is
},
copy(value) {
//提示模板
uni.showModal({
content: value, //模板中提示的内容
confirmText: '复制内容',
success: () => { //点击复制内容的后调函数
//uni.setClipboardData方法就是讲内容复制到粘贴板
uni.setClipboardData({
data: value, //要被复制的内容
success: () => { //复制成功的回调函数
uni.showToast({ //提示
title: '复制成功'
})
}
});
}
});
},
swiperCurrentFun(data) {
console.log(data.detail.current)
if (data.detail.current == 0) {
this.textTitle = "工单详情"
const query = uni.createSelectorQuery().in(this);
query.select('#swi1').boundingClientRect(data => {
this.swiHeight = data.height
}).exec();
} else if (data.detail.current == 1) {
this.textTitle = "处理详情"
const query = uni.createSelectorQuery().in(this);
query.select('#swi2').boundingClientRect(data => {
this.swiHeight = data.height
}).exec();
} else if (data.detail.current == 2) {
this.textTitle = "工单详情"
const query = uni.createSelectorQuery().in(this);
query.select('#swi3').boundingClientRect(data => {
this.swiHeight = data.height
}).exec();
} else if (data.detail.current == 3) {
this.textTitle = "工单详情"
const query = uni.createSelectorQuery().in(this);
query.select('#swi4').boundingClientRect(data => {
this.swiHeight = data.height
}).exec();
}
this.detailsNavFun(data.detail.current)
},
detailsNavFun(index) {
for (var i = 0; i < this.detailsNav.length; i++) {
this.detailsNav[i].state = false
}
this.detailsNav[index].state = true
},
detailsNavpa(index) {
this.swiperCurrent = index
}
}
}
</script>
<style>
.content {
padding-top: 80rpx;
}
.swiper {
min-height: 88vh;
width: 100%;
}
.submit-button {
width: 686rpx;
border-radius: 50rpx;
height: 90rpx;
background-color: #02A2ea;
line-height: 90rpx;
color: #FFFFFF;
margin-top: 60rpx;
text-align: center;
font-size: 30rpx;
}
.work-order-from {
margin-top: 10rpx;
background-color: #FFFFFF;
padding-bottom: 40rpx;
}
.work-order-from .li {
display: flex;
padding: 20rpx 40rpx;
border-bottom: 2rpx solid #ececec;
}
.work-order-from .li .title {
font-size: 26rpx;
width: 133rpx;
}
.work-order-from .li .input {
font-size: 24rpx;
color: #8b8b8b;
flex: 1;
padding-left: 15rpx;
}
.work-order-from .li .input .img {
width: 169rpx;
height: 127rpx;
margin-right: 10rpx;
}
.state {
/* background-color:
*/
text-align: center;
line-height: 48rpx;
width: 164rpx;
height: 54rpx;
background-image: url(../../static/iocn/sta.png);
border-radius: 0 20rpx 20rpx 0;
background-size: 100% 100%;
font-size: 24rpx;
color: #ffffff;
}
.work-order-from .li .input-black {
color: #292929;
}
.details-nav {
display: flex;
justify-content: space-between;
border-bottom: solid #D5D4D4 2rpx;
padding: 0 24rpx;
margin-bottom: 20rpx;
}
.details-nav .li {
width: 130rpx;
padding-top: 30rpx;
font-size: 30rpx;
padding-bottom: 35rpx;
}
.details-nav .on {
color: #00A2E9;
position: relative;
}
.details-nav .on::after {
content: "";
width: 100%;
position: absolute;
left: 0rpx;
bottom: 0rpx;
height: 6rpx;
background-color: #00A2E9;
}
.course-nav {
background-color: #fff;
}
.course-nav .date {
font-size: 28rpx;
color: #333333;
padding: 20rpx 34rpx;
}
.course-nav .code {
display: flex;
font-size: 28rpx;
padding: 20rpx 34rpx;
padding-top: 0rpx;
align-items: center;
}
.course-nav .code .btn {
background-color: #eeeeee;
width: 73rpx;
height: 40rpx;
border-radius: 10rpx;
text-align: center;
line-height: 40rpx;
margin-left: 28rpx;
border: solid #999999 2rpx;
}
.record-content {
padding: 0 34rpx;
}
.course-content {
background-color: #FFFFFF;
padding-bottom: 60rpx;
margin-top: 20rpx;
padding-top: 20rpx;
}
.record-content .title {
color: #333333;
margin-left: 12rpx;
font-size: 30rpx;
margin-bottom: 33rpx;
}
.record-content .list .li {
display: flex;
align-items: center;
margin-bottom: 40rpx;
}
.record-content .list .li .icon {
width: 14rpx;
height: 14rpx;
margin-right: 50rpx;
border-radius: 50%;
background-color: #999999;
margin-left: 5rpx;
position: relative;
}
.record-content .list .li .icon::after {
content: "";
width: 2rpx;
position: absolute;
left: 7rpx;
height: 106rpx;
background-color: #999999;
top: 14rpx;
}
.record-content .list .li .con {
font-size: 26rpx;
color: #999999;
flex: 1;
}
.record-content .list .on .icon {
background-color: #5caefb;
width: 21rpx;
height: 21rpx;
margin-left: 1rpx;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.record-content .list .on .icon .icon-con {
background-color: #0084ff;
width: 13rpx;
height: 13rpx;
border-radius: 50%;
}
.record-content .list .on .icon::after {
content: "";
width: 2rpx;
position: absolute;
left: 9rpx;
height: 167rpx;
z-index: 1;
background-color: #0084ff;
top: 20rpx;
}
.record-content .list .on .con {
display: block;
color: #0084ff;
}
.record-content .list .on .con .text {
margin-bottom: 35rpx;
}
.record-content .list .li .con .text {
margin-bottom: 10rpx;
}
.record-content .list .on {
align-items: flex-start;
}
.button {
width: 315rpx;
height: 88rpx;
background-color: #00A2E9;
border-radius: 44rpx;
text-align: center;
line-height: 88rpx;
margin: auto;
margin-top: 101rpx;
color: #FFFFFF;
}
.work-order-from .li .input .add-img {
width: 136rpx;
height: 127rpx;
display: flex;
justify-content: center;
background-color: #DCDCDC;
align-items: center;
}
.work-order-from .li .input .add-img .icon {
width: 64rpx;
height: 64rpx;
}
.work-order-from .li .add-display {
display: flex;
}
.change-accessory {
background-color: #FFFFFF;
}
.change-accessory .li .img {
width: 185rpx;
height: 185rpx;
margin-right: 30rpx;
}
.change-accessory .li {
padding: 34rpx;
display: flex;
border-bottom: 2rpx solid #EEEEEE;
}
.change-accessory .li .text-content {
flex: 1;
}
.change-accessory .li .text-content .title {
font-size: 30rpx;
display: flex;
justify-content: space-between;
margin-bottom: 16rpx;
}
.change-accessory .li .text-content .title .text {
width: 77%;
font-size: 30rpx;
color: #333333;
}
.change-accessory .li .text-content .date {
color: #ff0000;
font-size: 24rpx;
font-weight: bold;
}
.change-accessory .li .text-content .text {
width: auto;
font-size: 26rpx;
margin-bottom: 12rpx;
color: #666666;
}
.work-order-from .rideo{
display: flex;
}
.work-order-from .isrideo{
display: flex;
align-items: center;
margin-right: 41rpx;
}
.work-order-from .isrideo .icon{
width: 26rpx;
border: 2rpx solid #818181;
border-radius: 50%;
height: 26rpx;
margin-right: 10rpx;
display: flex;
justify-content: center;
align-items: center;
}
.work-order-from .isrideo .icon .icon-content{
width: 19rpx;
height: 19rpx;
background-color: #818181;
border-radius: 50%;
}
.work-order-from .isrideo .on{
border: 2rpx solid #D81E06;
}
.work-order-from .isrideo .on .icon-content{
background-color: #D81E06
}
</style>