<template>
<view class="content">
<statusNav navBarTitle="处理工单"></statusNav>
<container-subgroup-two>
<view slot="content" style="margin: 0 -25rpx;">
<view class="work-order-schedule">
<view class="li">
<view class="icon icon-after">
1
</view>
<view class="text">
签到执行
</view>
</view>
<view class="li">
<view class="icon on icon-after">
2
</view>
<view class="text">
填写维保单
</view>
</view>
<view class="li">
<view class="icon">
3
</view>
<view class="text">
结算审核
</view>
</view>
</view>
<view class="work-order-from">
<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="XM20211203-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 input-black" placeholder="" value="Q2.5-E" />
</view>
<view class="li">
<view class="title">
安装位置：
</view>
<input type="text" class="input input-black" placeholder="" value="详细地址+某某栋11楼会议室" />
</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 input-black" placeholder="" value="上门服务" />
</view>
<view class="li">
<view class="title">
故障说明：
</view>
<textarea auto-height class="input input-black"
value="*********************************************************************************************************"
placeholder="" />
</view>
<view class="li">
<view class="title">
故障图片：
</view>
<view class="input add-display">
<view class="">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
</view>
<view class="add-img">
<image class="icon" src="../../static/iocn/jia.png" mode=""></image>
</view>
</view>
</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 input-black" placeholder="" value="2022-01-25 15:30" />
</view>
<view class="li">
<view class="title">
维保用时：
</view>
<input type="text" class="input " placeholder="" value="5小时51分钟" />
</view>
<view class="li">
<view class="title">
维保费用：
</view>
<input type="text" class="input input-black" 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 input-black" 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>
<view class="work-order-from">
<view class="li">
<view class="title">
工作描述：
</view>
<textarea auto-height class="input input-black"
value="*********************************************************************************************************"
placeholder="" />
</view>
<view class="li">
<view class="title">
维保图片：
</view>
<view class="input add-display">
<view class="">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
</view>
<view class="add-img">
<image class="icon" src="../../static/iocn/jia.png" mode=""></image>
</view>
</view>
</view>
<view class="li">
<view class="title">
故障原因：
</view>
<textarea auto-height class="input input-black"
value="*********************************************************************************************************"
placeholder="" />
</view>
<view class="li">
<view class="title">
维保人员：
</view>
<input type="text" class="input input-black" placeholder="" value="罗帅 陈志远" />
</view>
</view>
<view class="cost-breakdown">
<view class="cost-breakdown-title">
<view class="title">
费用明细
</view>
<view class="btn">
添加配件
</view>
</view>
</view>
<view class="cost-breakdown-content">
<view class="title">
<view class="li">
序号
</view>
<view class="li">
配件名称
</view>
<view class="li">
数量
</view>
<view class="li">
价格
</view>
</view>
<view class="text" v-for="(item,index) in accessoriesData">
<view class="li">
{{item.id}}
</view>
<view class="li">
{{item.title}}
</view>
<view class="li">
{{item.num}}
</view>
<view class="li">
{{item.price}}元
</view>
</view>
</view>
<button class="submit-button" type="default">下一步</button>
</view>
</container-subgroup-two>
</view>
</template>
<script>
import statusNav from '../../components/status-nav.vue';
import footTabOne from "../../components/foot-tabs/foot-tab-one.vue"
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
export default {
components: {
footTabOne,
statusNav,
containerSubgroupTwo
},
data() {
return {
isrideo:true,
accessoriesData: [{
id: 1,
title: "全彩LED显示屏接收卡",
num: 1,
price: "430"
},
{
id: 1,
title: "上门服务费",
num: 1,
price: "4310"
},
{
id: 1,
title: "全彩LED显示屏接收卡",
num: 1,
price: "430"
},
]
}
},
methods: {
isrideoFun(is){
this.isrideo=is
},
}
}
</script>
<style>
.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-schedule {
display: flex;
padding: 22rpx 29rpx;
margin-top: 10rpx;
background-color: #FFFFFF;
justify-content: space-between;
}
.work-order-schedule .icon {
width: 38rpx;
height: 38rpx;
color: #FFFFFF;
margin: auto;
position: relative;
font-size: 24rpx;
margin-bottom: 10rpx;
text-align: center;
line-height: 38rpx;
background-color: #999999;
border-radius: 50%;
}
.work-order-schedule .on {
background-color: #5391F3
}
.work-order-schedule .text {
font-size: 24rpx;
color: #333333;
}
.work-order-schedule .icon-after::after {
content: "";
width: 265rpx;
height: 2rpx;
background-color: #999999;
position: absolute;
top: 19rpx;
left: 38rpx;
}
.work-order-from {
margin-top: 10rpx;
background-color: #FFFFFF;
}
.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;
}
.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;
}
.work-order-from .li .input-black {
color: #292929;
}
.cost-breakdown-title {
padding: 0rpx 40rpx;
display: flex;
justify-content: space-between;
margin-top: 40rpx;
}
.cost-breakdown-title .title {
font-size: 30rpx;
color: #222222;
display: flex;
margin-bottom: 28rpx;
align-items: center;
}
.cost-breakdown-title .title::before {
content: "";
display: block;
width: 4rpx;
height: 30rpx;
margin-right: 22rpx;
background-color: #00a2e9;
}
.cost-breakdown-title .btn {
color: #00a2e9;
text-align: center;
width: 118rpx;
height: 50rpx;
border-radius: 14rpx;
line-height: 50rpx;
text-align: center;
font-size: 26rpx;
border: 2rpx solid #00a2e9;
}
.cost-breakdown-content{
padding: 0rpx 40rpx;
}
.cost-breakdown-content .title{
display: flex;
margin-bottom: 40rpx;
justify-content: space-between;
}
.cost-breakdown-content .title .li{
font-size: 28rpx;
font-weight: bold;
color: #222222;
text-align: center;
}
.cost-breakdown-content .text{
display: flex;
margin-bottom: 40rpx;
justify-content: space-between;
}
.cost-breakdown-content .text .li{
color: #4c4c4c;
font-size: 28rpx;
text-align: center;
}
.cost-breakdown-content .text .li:nth-child(1){
width: 80rpx;
}
.cost-breakdown-content .text .li:nth-child(2){
flex: 1;
}
.cost-breakdown-content .text .li:nth-child(3){
width: 80rpx;
}
.cost-breakdown-content .text .li:nth-child(4){
width: 120rpx;
}
.cost-breakdown-content .title .li:nth-child(1){
width: 80rpx;
}
.cost-breakdown-content .title .li:nth-child(2){
flex: 1;
}
.cost-breakdown-content .title .li:nth-child(3){
width: 80rpx;
}
.cost-breakdown-content .title .li:nth-child(4){
width: 120rpx;
}
.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>