TSYWXT-CLOUD-APP/pages/check-order/orderconfirm.vue

<!--
 * @Title: 
 * @Description: 任务确认
 * @Author: swp
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
	<view class="wrap">
		<uni-nav-bar dark :fixed="true" backgroundColor="#3F9EFF" statusBar="false" left-icon="left" left-text="返回"
			@clickLeft="toBack">
			<view class="nav-title">
				<text>{{title}}</text>
			</view>
		</uni-nav-bar>
		<view class="container">
			<view class="view-btn">
				<button style="background-color: lightcoral;" type="default" @click="toOrderProcess()">工单处理填报</button>
			</view>
			<uni-section title="工单详情" titleFontSize="0.8rem" type="circle">
				<uni-group style="margin-top: 0px;">
					<view class="items-line">
						<view class="item-text-lable">工单发起人:</view>
					</view>
					<view class="items-line">
						<view class="item-text-content" style="margin-left: 0px;color: deepskyblue;">
							{{orderInfo.createOrderPersonName}}
						</view>
					</view>
					<view class="items-line line-space">
						<view class="item-text-lable">发起时间:</view>
					</view>
					<view class="items-line line-space">
						<view class="item-text-content" style="margin-left: 0px;color: deepskyblue;">
							{{orderInfo.createTime}}
						</view>
					</view>
					<view class="items-line line-space">
						<view class="item-text-lable">问题描述:</view>
					</view>
					<view class="items-line line-space">
						<view class="item-text-content" style="margin-left: 0px;color: deepskyblue;">
							{{orderInfo.orderDesc}}
						</view>
					</view>
				</uni-group>
				<uni-card title="工单照片">
					<view class="view-flex-rs-flex-wrap">
						<view v-for="(path, index) in orderInfo.orderPhotoList" :key="index"
							class="view-flex-cc" style="width: 80px;">
							<view class="img-container">
								<view class="note-image-box">
									<view class="note-image-item">
										<view class="image-box">
											<image :src="toOss(path)" mode="widthFix"
												@click="openPhoto(path)">
											</image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
<!-- 					<view class="view-flex-block-center">
						<image v-for="(path, index) in orderInfo.orderPhotoList" :key="index" mode="widthFix"
							style="width: 80%;margin-top: 10px;" :src="toOss(path)">
						</image>
					</view> -->
				</uni-card>
				<uni-card title="工单视频" sub-title="点击视频图标可进行播放预览">
					<view class="view-flex-rs-flex-wrap">
						<view v-for="(item, index) in orderInfo.orderVideoList" :key="index" class="view-flex-cc"
							style="width: 80px;">
							<view class="img-container">
								<view class="note-image-box">
									<view class="note-image-item">
										<view class="image-box">
											<image :src="videoImg" mode="widthFix" @click="openVideo(item)">
											</image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</uni-card>
			</uni-section>
		</view>
	</view>
</template>

<script>
	import http from '@/http/api.js';
	import {
		oss,
	} from '@/common/setting';
	export default {
		components: {

		},
		data() {
			return {
				title: '工单详情',
				orderId: '',
				orderInfo: {
					createOrderPersonName: '',
					createTime: '',
					orderDesc: '',
				},
				orderType: 1,
				videoImg: '/static/images/video.png',
			}
		},
		computed: {},
		onLoad(option) {
			this.orderId = option.orderId;
			this.orderType = option.orderType;
			this.getDetail();
		},
		onShow() {},
		methods: {
			toOss(url) {
				return oss + url;
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			openPhoto(file) {
				let url = '/pages/check-order/photoView?url=' + file;
				uni.navigateTo({
					url: url
				})
			},
			openVideo(file) {
				let url = '/pages/check-order/videoView?url=' + file;
				uni.navigateTo({
					url: url
				})
			},
			getDetail() {
				let that = this;
				let postData = {};
				postData['id'] = this.orderId;
				http.request({
					url: '/galaxy-business/order/detail',
					method: 'GET',
					data: postData
				}).then(res => {
					console.log(res)
					if (res.data != null) {
						that.orderInfo = res.data;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			toOrderProcess() {
				var url = '/pages/check-order/orderprocessreport?skipPage=2&costsApprove=1&orderType=' + this.orderType +
					'&orderId=' + this.orderId;
				uni.navigateTo({
					url: url
				})
			},
			toOrderConfirm() {
				let that = this;
				uni.showModal({
					content: '确定接受该维修任务？',
					showCancel: true,
					success(res) {
						if (res.confirm) {
							let postData = {};
							postData['id'] = that.id;
							http.request({
								url: '/galaxy-business/rtu/check/order/confirm',
								method: 'POST',
								data: postData
							}).then(res => {
								console.log(res)
								if (res.success) {
									uni.showModal({
										content: '任务已确认，是否立即填报？',
										showCancel: true,
										cancelText: "返回",
										success(res) {
											if (res.confirm) {
												that.toOrderProcessReport();
											} else {
												that.toBack();
											}
										}
									});
								}
							}).catch(err => {
								console.log(err)
							})
						}
					}
				});
			},
			toOrderProcessReport() {
				var url = '/pages/check-order/orderprocessreport?orderId=' + this.id + '&skipPage=2';
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style>
	/* page {
		background-color: rgb(240, 242, 244);
	} */
</style>

<style lang="scss" scoped>
	.view-btn {
		margin-top: 20px;
		margin-bottom: 20px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.line-space {
		margin-top: 4px;
	}
	
</style>