flying-monkey/pages/workOrder/details.vue

<template>
    <view class="content" >
        <statusNav returnColor="#c2c2c2" navBarTitle="工单详情"></statusNav>
        <container-subgroup-two>
            <view slot="content" style="margin:-30rpx -30rpx 0 -30rpx;">
                <view class="details-nav" :style="{top:statusBarHeight + 'px'}">
                    <view class="li pad-sx36" @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'">
					<!-- 基础信息 start -->
                    <swiper-item> 
                        <view class="swiper-item uni-bg-red">
                            <view id="swi1">
                                <view class="work-order-from">
                                    <view class="state" :style="{backgroundColor: statusColor}">状态：{{statusText}}</view>
                                    <view class="li" style="margin-top: 20rpx;">
                                        <view class="title">工单编号：</view>
                                        <input type="text" disabled class="input" :value="detailObj.order_number" />
                                    </view>

                                    <view class="li">
                                        <view class="title">项目编号：</view>
                                        <input type="text" disabled class="input" :value="detailObj.project_number" />
                                    </view>
                                    <view class="li">
                                        <view class="title">项目名称：</view>
                                        <input type="text" disabled class="input input-black" :value="detailObj.project_name" />
                                    </view>
                                    <view class="li">
                                        <view class="title">产品类型：</view>
                                        <input type="text" disabled class="input" :value="detailObj.product_type" />
                                    </view>
                                    <view class="li">
                                        <view class="title">安装位置：</view>
                                        <input type="text" disabled class="input" :value="detailObj.installation_location" />
                                    </view>
                                    <view class="li">
                                        <view class="title">维保类型：</view>
                                        <input type="text" disabled class="input" :value="detailObj.fault_type" />
                                    </view>
                                    <view class="li">
                                        <view class="title">紧急程度：</view>
                                        <input type="text" disabled class="input" :value="detailObj.emergency_level_view" />
                                    </view>
                                    <view class="li">
                                        <view class="title">维保说明：</view>
                                        <textarea style="overflow: hidden;overflow-y: scroll;height: auto;max-height: 200rpx;" disabled class="input" :value="detailObj.failure_description" />
                                    </view>
                                    <view class="li">
                                        <view class="title">维保图片：</view>
                                        <view class="input">
                                            <image class="img" v-for="(item,index) in detailObj.fault_picture" :key="index" :src="item" mode="aspectFill" lazy-load></image>
                                        </view>
                                    </view>
                                </view>
                                <view class="work-order-from">
                                    <view class="li">
                                        <view class="title">报 单 人：</view>
                                        <input type="text" disabled class="input" :value="detailObj.order_contact" />
                                    </view>
                                    <view class="li">
                                        <view class="title">报单时间：</view>
                                        <input type="text" disabled class="input" :value="detailObj.order_times" />
                                    </view>
                                    <view class="li">
                                        <view class="title">服务方式：</view>
                                        <input type="text" disabled class="input input-black" :value="detailObj.service_method_view" />
                                    </view>
                                    <view class="li">
                                        <view class="title">定位地址：</view>
                                        <input type="text" disabled class="input" :value="detailObj.service_address" />
                                    </view>
                                </view>
                            </view>
                        </view>
                    </swiper-item>
					<!-- 基础信息 end -->
					
					<!-- 处理详情 start -->
                    <swiper-item>
                        <view class="swiper-item uni-bg-green">
                            <view id="swi2">
                                <view class="work-order-from">
                                    <view class="state" :style="{backgroundColor: statusColor}">状态：{{statusText}}</view>
                                    <view class="li" style="margin-top: 20rpx;">
                                        <view class="title">开始时间：</view>
                                        <input type="text" disabled class="input " :value="handleDetail.start_times" />
                                    </view>
                                    <view class="li">
                                        <view class="title">结束时间：</view>
                                        <input type="text" disabled class="input " :value="handleDetail.completion_times" />
                                    </view>
                                    <view class="li">
                                        <view class="title">维保用时： </view>
                                        <input type="text" disabled class="input input-black" :value="handleDetail.maintenance_time" />
                                    </view>
                                    <view class="li">
                                        <view class="title">维保费用：</view>
                                        <input type="text" disabled class="input " :value="`¥${handleDetail.pay_price}元`" />
                                    </view>
                                    <view class="li">
                                        <view class="title">等待时长：</view>
                                        <input type="text" disabled class="input " :value="handleDetail.waiting_time" />
                                    </view>
                                    <view class="li">
                                        <view class="title">主维保人：</view>
                                        <input type="text" disabled class="input " :value="handleDetail.maintenance_name" />
                                    </view>
                                    <view class="li">
                                        <view class="title">更换配件：</view>
                                        <view class="rideo">
                                            <view class="isrideo">
                                                <view class="icon " :class="handleDetail.is_accessory == 1 ?'on':''">
                                                    <view class="icon-content"></view>
                                                </view>
                                                <view class="fon24" style="color: #8b8b8b;">是</view>
                                            </view>
                                            <view class="isrideo">
                                                <view class="icon" :class="handleDetail.is_accessory == 1 ?'':'on'">
                                                    <view class="icon-content"></view>
                                                </view>
                                                <view class="fon24" style="color: #8b8b8b;">否</view>
                                            </view>
                                        </view>
                                    </view>
                                    <view class="li">
                                        <view class="title">工作描述：</view>
                                        <textarea style="overflow: hidden;overflow-y: scroll;height: auto;max-height: 200rpx;" disabled class="input " :value="handleDetail.work_explanation"/>
                                    </view>
                                    <view class="li">
                                        <view class="title">维保图片：</view>
                                        <view class="input add-display">
                                            <view class="">
                                                <image class="img" v-for="(item,index) in handleDetail.maintenance_pictures" :key="index" :src="item" mode="aspectFill" lazy-load></image>
                                            </view>
                                        </view>
                                    </view>
                                    <view class="li">
                                        <view class="title">维保原因：</view>
                                        <textarea auto-height disabled class="input " :value="handleDetail.failure_reason"/>
                                    </view>
                                    <view class="li">
                                        <view class="title">维保人员： </view>
                                        <input type="text" disabled class="input " :value="handleDetail.maintenance_more" />
                                    </view>
                                </view>
                            </view>
                        </view>
                    </swiper-item>
					<!-- 处理详情 end -->
					
					
					<!-- 更换配件 start -->
                    <swiper-item>
                        <view class="swiper-item uni-bg-blue">
                            <view id="swi3">
                                <view class="change-accessory">
                                    <view class="state" :style="{backgroundColor: statusColor}">状态：{{statusText}}</view>
                                    <view class="list">
                                        <view class="li" v-for="(item,index) in replaceParts" :key="index">
                                            <image class="img" src="../../static/del/img001.png" mode="aspectFill" lazy-load></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/img001.png" mode="aspectFill" lazy-load>
                                            </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/img001.png" mode="aspectFill" lazy-load></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>
					<!-- 更换配件 end -->
					
					<!-- 处理过程 start -->
                    <swiper-item>
                        <view class="swiper-item uni-bg-blue">
                            <view id="swi4">
                                <view class="course-nav">
                                    <view class="state" :style="{backgroundColor: statusColor}">状态：{{statusText}}</view>
                                    <view class="date">报修时间：{{handleProcess.order_times}}</view>
                                    <view class="code">
                                        <view class="">工单编号：{{handleProcess.order_number}}</view>
                                        <view class="btn" @click="copy(handleProcess.order_number)">复制</view>
                                    </view>
                                </view>
                                <view class="course-content">
                                    <view class="record-content">
                                        <view class="title">过程追踪</view>
                                        <view class="list">
                                         <view class="li pad-z40 fon27 col9 pad-x20" :class="index==0 ? 'activeTrack' : ''" v-for="(item,index) in handleProcess.time_line" :key="index">
                                         	<view class="disac fw line-h40">
                                         		<view class="text">{{item.value}}</view>
                                         		<view class="date">{{item.create_time}}</view>
                                         	</view>
                                         </view>
                                        </view>
										<view class="button" @tap="goEvaluate()">我要评价</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </swiper-item>
					<!-- 处理过程 end -->
                </swiper>
            </view>
        </container-subgroup-two>

    </view>
</template>

<script>
    import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
    import statusNav from '../../components/status-nav.vue';
    import footTabOne from "../../components/foot-tabs/foot-tab-one.vue"
	import {handleWorkOrderGet} from '../../jsFile/public-api.js';
    export default {
        components: {
            footTabOne,
            statusNav,
            containerSubgroupTwo
        },
        data() {
            return {
                swiperCurrent: 0,
                swiHeight:0,
				statusBarHeight:uni.getSystemInfoSync().statusBarHeight + 40,
				statusText:'',
                isrideo: true,
                detailsNav: [{
                        title: "基础信息",
                        state: true
                    },
                    {
                        title: "处理详情",
                        state: false
                    },
                    {
                        title: "更换配件",
                        state: false
                    },
                    {
                        title: "处理过程",
                        state: false
                    },

                ],
				orderId:'',//订单id
				detailObj:{},//基础信息
				handleDetail:{},//处理详情
				replaceParts:[],//更换配件
				handleProcess:{}//处理过程
            }
        },
        mounted() {
            const query = uni.createSelectorQuery().in(this);
            query.select('#swi1').boundingClientRect(data => {
                this.swiHeight = data.height - 100
            }).exec();
            this.detailsNavFun(0)

        },
		onLoad(op) {
			this.statusText = op.statusText;
			this.statusColor = op.statusColor;
			if(op.orderId!=undefined) {
				this.orderId = op.orderId;
				// 调取获取工单详情事件
				this.getDetail(1);
			}
		},
        methods: {
			// 获取工单详情事件
			getDetail(type){
				let params = {
					order_id:this.orderId,
					type
				}
				this.$requst.get('/universal/api.order/order_info',params).then(res=>{
					if(res.code) {
						switch (type){
							case 1:
							this.detailObj = res.data;
								break;
							case 2:
							this.handleDetail = res.data;
								break;
							case 3:
							this.replaceParts = res.data.accessory;
								break;
							case 4:
							this.handleProcess = res.data;
								break;
						}
						setTimeout(()=>{
							const query = uni.createSelectorQuery().in(this);
							query.select(`#swi${type}`).boundingClientRect(data => {
							    this.swiHeight = data.height
							}).exec();
						},100)
					}
				})
			},
            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) {
				let current = data.detail.current;
				// 调用工单详情切换事件
				this.detailSwitch(current);
                this.detailsNavFun(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;
				// 调用工单详情切换事件
				this.detailSwitch(index);
            },
			// 工单详情切换事件
			detailSwitch(index){
				let type = [1,2,3,4][index];
				this.getDetail(type);
			},
			// 前往评价页面
			goEvaluate() {
				uni.navigateTo({
					url:`/pagesB/i-want-evaluate/i-want-evaluate?id=${this.orderId}`
				})
			}

        }
    }
</script>

<style>
    .content {}

    .swiper {
        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;
text-align: right;
white-space: nowrap;
/* flex: 1; */
    }

    .work-order-from .li .input {
        font-size: 24rpx;
        color: #8b8b8b;
      width: 80%;
        padding-left: 0;
    }

    .work-order-from .li .input .img {
        width: 169rpx;
        height: 127rpx;
        margin-right: 10rpx;
    }

    .state {
		display: inline-block;
		padding: 2rpx 20rpx 2rpx 16rpx;
        height: 52rpx;
        line-height: 52rpx;
        border-radius: 0 25rpx 25rpx 0;
        font-size: 24rpx;
        color: #ffffff;
		background-color: #dddddd;
		box-shadow: 0rpx 6rpx 6rpx #999999;
    }

    .work-order-from .li .input-black {
        color: #292929;
    }

    .details-nav {
        display: flex;
        justify-content: space-between;
        border-bottom: solid #D5D4D4 2rpx;
        padding: 0 24rpx;
    
        
       position: sticky;
        z-index: 2;
        box-sizing: border-box;
        width: 100%;
        background-color: #F7F7F7;
        left: 0rpx;
        margin-bottom: 20rpx;
    }

    .details-nav .li {
        width: 130rpx;
        font-size: 30rpx;
    }

    .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;
        height: 40rpx;
        border-radius: 10rpx;
        text-align: center;
        line-height: 40rpx;
		padding: 4rpx 20rpx;
        margin-left: 28rpx;
        border: solid #999999 2rpx;
    }

    .record-content {

        padding: 0 34rpx;
    }

    .course-content {
        background-color: #FFFFFF;
        padding-bottom: 20rpx;
        margin-top: 20rpx;
        padding-top: 20rpx;
    }


    .record-content .list .li {
        display: flex;
        align-items: center;
    }

    .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: 50rpx;
        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: 10rpx;
    }

    .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
    }
 .record-content {
 	padding: 0 52rpx;
 
 	padding-top: 33rpx;
 	padding-bottom: 40rpx;
 	background-color: #FFFFFF;
 }
 
 .record-content .title {
 	color: #333333;
 	margin-left: -10rpx;
 	font-size: 36rpx;
 	margin-bottom: 40rpx;    
 }
 
 .record-content .list .li {
 	position: relative;
 	display: flex;
 	align-items: center;
 	padding-top: 20rpx;
 	border-left: 2rpx solid #999999;
 
 }
 .record-content .list .li::before {
 	content: '';
 	display: block;
 	position: absolute;
 	left: -8rpx;
 	width: 14rpx;
 	height: 14rpx;
 	background-color: #999999;
 	border-radius: 100%;
 }
 .record-content .list .activeTrack {
 	color: #0084ff;
 	padding-top: 0rpx;
 }
 .record-content .list .activeTrack::before {
 	background-color: rgba(0,132,255,.5);
 	top: -4rpx;
 	width: 22rpx;
 	height: 22rpx;
 	left: -12rpx;
 	z-index: 1;
 }
 .record-content .list .activeTrack::after {
 	content: '';
 	display: block;
 	position: absolute;
 	top: 0;
 	left: -8rpx;
 	width: 14rpx;
 	height: 14rpx;
 	background-color: #999999;
 	border-radius: 100%;
 }
 .record-content .list .activeTrack .line-h40 {
 	margin-top: -20rpx;
	line-height: 60rpx;
 }
 .record-content .list .date {
 	margin-left: 20rpx;
 }
</style>