<template>
|
<view>
|
<view class="main_info">
|
<view class="title">
|
<text>{{ info.projectName }}/{{ info.buildingName }}/{{info.roomNum || info.floorName}}</text>
|
<text class="status" v-if="info.dealStatus == 0">待处理</text>
|
<text class="status" v-if="info.dealStatus == 1">待处理</text>
|
<text class="status gray" v-if="info.dealStatus == 2">已处理</text>
|
</view>
|
<view class="desc">{{ info.content }}</view>
|
<view class="file_list">
|
<view class="file" v-for="(item,index) in info.fileList">
|
<image v-if="item.type == 0" :src="item.fileurlFull" mode="aspectFill"></image>
|
<!-- <video v-if="item.type == 1" :src="item.fileurlFull" :controls="false"></video> -->
|
<view v-if="item.type == 1" @click="videoClick(item)" class="video_wrap">
|
<video :src="item.fileurlFull" initial-time="0.01" :show-center-play-btn="false" :controls="false"
|
class="video" :enable-progress-gesture="false" autoplay muted />
|
<image src="@/static/play.png" class="play" mode=""></image>
|
</view>
|
</view>
|
</view>
|
<view class="content">
|
<view class="line" v-if="info.categoryName">
|
<view class="la">工单类型：</view>
|
<view class="val">{{info.categoryName}}</view>
|
</view>
|
<view class="line">
|
<view class="la">上报人：</view>
|
<view class="val">{{ info.creatorName }}{{info.creatorCompany ? '-' + info.creatorCompany : ''}}</view>
|
</view>
|
<view class="line" v-if="info.creatorPhone || info.creatorMobile">
|
<view class="la">联系电话：</view>
|
<view class="val">{{ info.creatorMobile || info.creatorPhone }}</view>
|
</view>
|
<view class="line">
|
<view class="la">上报时间：</view>
|
<view class="val">{{ info.createDate }}</view>
|
</view>
|
<view class="line" v-if="info.getDate">
|
<view class="la">上门时间：</view>
|
<view class="val">{{ info.getDate.slice(0, 16) }}</view>
|
</view>
|
</view>
|
<view class="result_wrap" v-if="info.dealStatus == 2">
|
<div class="title">处理结果</div>
|
<view v-if="info.dealFileList && info.dealFileList.length > 0" class="file_list">
|
<view class="file" v-for="item in info.dealFileList">
|
<image v-if="item.type == 0" :src="item.fileurlFull" mode="aspectFill"></image>
|
<video v-if="item.type == 1" :src="item.fileurlFull" :controls="false"></video>
|
</view>
|
</view>
|
<view v-if="info.dealInfo" class="content">
|
{{info.dealInfo}}
|
</view>
|
<view class="line">
|
<view class="la">处理人：</view>
|
<view class="val">{{ info.dealUserName }}{{info.dealUserCompany ? '-' + info.dealUserCompany : ''}}</view>
|
</view>
|
<view class="line">
|
<view class="la">处理时间：</view>
|
<view class="val">{{ info.dealDate }}</view>
|
</view>
|
</view>
|
</view>
|
<!-- -->
|
<view class="btns" v-if="info.dealStatus == 0 || (info.dealUserId === userInfo.id && info.dealStatus == 1)">
|
<view class="btn" @click="handleCall">
|
<image src="@/static/side/phoneed.png" class="icon"></image>
|
<text>上报人</text>
|
</view>
|
<view class="btn active" @click="handleOpen">去处理</view>
|
</view>
|
<!-- -->
|
<u-popup :show="showUpload" @close="showUpload = false" zIndex="10076" closeOnClickOverlay>
|
<view class="sel_upload_wrap">
|
<view class="btn" @click="uploadImage">选择图片</view>
|
<view class="btn" @click="uploadVideo">选择视频</view>
|
</view>
|
</u-popup>
|
<!-- -->
|
<!-- 工单处理 -->
|
<u-popup :show="isShowHandle" :round="10" :safeAreaInsetTop="true" :safeAreaInsetBottom="true" mode="bottom"
|
closeable @close="isShowHandle = false">
|
<view class="appr_modal">
|
<view class="title">工单处理</view>
|
<view class="df_sb">
|
<view><text class="red">*</text>处理时间</view>
|
<view class="df_ac" @click="isShowHandleDate = true" v-if="handleParam.dealTime">
|
{{ handleParam.dealTime }}
|
<u-icon name="arrow-right"></u-icon>
|
</view>
|
<view @click="isShowHandleDate = true" v-else class="placeholder9 df_ac">
|
请选择
|
<u-icon name="arrow-right"></u-icon>
|
</view>
|
</view>
|
|
<view class="label">
|
上传图片/视频
|
</view>
|
<view class="upload_wrap">
|
<view class="adduser_list_item_ipt1_upload" @click="showUpload = true">
|
<u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>
|
<view class="mt6">图片/视频</view>
|
</view>
|
<view class="adduser_list_item_ipt1_upload" v-for="(item, i) in dealFileList" :key="i">
|
<u-icon class="close" size="20" name="close-circle-fill" color="red"
|
@click="fileDel('dealFileList', i)"></u-icon>
|
<image v-if="item.type == 0" :src="item.fileurlFull" mode="widthFix"></image>
|
<video v-if="item.type == 1" :src="item.fileurlFull" :controls="false"></video>
|
</view>
|
</view>
|
|
<view class="label">处理说明</view>
|
<textarea v-model="handleParam.checkInfo" placeholder="请填写处理说明" placeholder-class="placeholder9" />
|
<view class="back_footer">
|
<view class="btn" @click="isShowHandle = false">取消</view>
|
<view class="btn agree" @click="onSubmit">提交</view>
|
</view>
|
</view>
|
</u-popup>
|
<!-- -->
|
<u-datetime-picker :minDate="new Date().getTime()" :show="isShowHandleDate" @confirm="confirmHandleDate"
|
@cancel="isShowHandleDate = false" mode="datetime"></u-datetime-picker>
|
<!-- -->
|
<view v-if="videoPlay" class="video_app">
|
<video controls autoplay muted x5-video-player-type="h5" x5-video-player-fullscreen="true" id="myvideo"
|
:src="videoUrl" @fullscreenchange="screenChange"></video>
|
<view class="bg" @click="closeVideo"></view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
uploadUrl,
|
ywWorkorderD,
|
ywWorkorderDeal
|
} from '@/api'
|
import dayjs from 'dayjs';
|
export default {
|
data() {
|
return {
|
id: '',
|
info: {},
|
showUpload: false,
|
isShowHandle: false,
|
isShowHandleDate: false,
|
userInfo: uni.getStorageSync('userInfo') || {},
|
handleParam: {},
|
dealFileList: [],
|
|
videoPlay: false,
|
videoContext: null,
|
videoUrl: ''
|
};
|
},
|
onLoad(option) {
|
console.log(option);
|
this.id = option.id
|
this.getDetail()
|
},
|
methods: {
|
handleOpen() {
|
this.isShowHandle = true
|
this.$set(this.handleParam, 'dealTime', dayjs().format('YYYY-MM-DD HH:mm:ss'));
|
},
|
videoClick(item) {
|
this.videoPlay = true;
|
this.videoContext = uni.createVideoContext("myvideo", this); // this这个是实例对象 必传
|
this.videoUrl = item.fileurlFull;
|
this.videoContext.requestFullScreen();
|
this.$nextTick(() => {
|
this.videoContext.play();
|
})
|
},
|
screenChange(e) {
|
let fullScreen = e.detail.fullScreen // 值true为进入全屏，false为退出全屏
|
if (!fullScreen) {
|
//退出全屏
|
this.videoPlay = false // 隐藏播放盒子
|
}
|
},
|
closeVideo() {
|
this.videoPlay = false
|
this.videoContext = null
|
},
|
onSubmit() {
|
const {
|
handleParam,
|
dealFileList,
|
id
|
} = this
|
if (!handleParam.dealTime) return this.showToast('处理时间不能为空')
|
ywWorkorderDeal({
|
...handleParam,
|
id,
|
dealFileList
|
}).then(res => {
|
if (res.code == 200) {
|
this.showToast('操作成功')
|
uni.navigateBack()
|
}
|
})
|
},
|
handleCall() {
|
const {
|
info
|
} = this
|
uni.makePhoneCall({
|
phoneNumber: info.creatorMobile
|
});
|
},
|
getDetail() {
|
ywWorkorderD(this.id).then(res => {
|
this.info = res.data
|
})
|
},
|
callPhone() {
|
uni.makePhoneCall({
|
phoneNumber: '114' //仅为示例
|
});
|
},
|
confirmHandleDate(e) {
|
this.$set(this.handleParam, 'dealTime', dayjs(e.value).format('YYYY-MM-DD HH:mm:ss'));
|
this.isShowHandleDate = false;
|
},
|
fileDel(str, i) {
|
this[str].splice(i, 1);
|
},
|
uploadImage() {
|
this.showUpload = false;
|
let token = uni.getStorageSync('token') || '';
|
uni.chooseImage({
|
count: 6,
|
success: chooseImageRes => {
|
uni.showLoading({
|
title: '上传中',
|
mask: true
|
});
|
const tempFilePaths = chooseImageRes.tempFilePaths;
|
let imgs = tempFilePaths.map((value, index) => {
|
return {
|
name: 'file',
|
uri: value
|
};
|
});
|
uni.uploadFile({
|
url: `${uploadUrl}`,
|
files: imgs,
|
name: 'file',
|
formData: {
|
folder: 'YW_WORKORDER_FILE'
|
},
|
header: {
|
Dm_user_token: token
|
},
|
success: uploadFileRes => {
|
let res = JSON.parse(uploadFileRes.data);
|
if (res.data && res.data.length > 0) {
|
res.data.forEach(i => {
|
i.type = 0;
|
i.fileurl = i.imgaddr;
|
i.fileurlFull = i.url;
|
this.dealFileList.push(i);
|
});
|
}
|
},
|
fail(err) {
|
console.log('err', err);
|
},
|
complete() {
|
uni.hideLoading();
|
// if (i === chooseImageRes.tempFilePaths.length - 1) {
|
// uni.hideLoading()
|
// }
|
}
|
});
|
}
|
});
|
},
|
uploadVideo() {
|
this.showUpload = false;
|
let token = uni.getStorageSync('token') || '';
|
uni.chooseVideo({
|
success: chooseImageRes => {
|
uni.showLoading({
|
title: '上传中',
|
mask: true
|
});
|
uni.uploadFile({
|
url: `${uploadUrl}`,
|
filePath: chooseImageRes.tempFilePath,
|
header: {
|
Dm_user_token: token
|
},
|
name: 'file',
|
formData: {
|
folder: 'YW_WORKORDER_FILE'
|
},
|
success: uploadFileRes => {
|
let res = JSON.parse(uploadFileRes.data);
|
if (res.data && res.data.length > 0) {
|
res.data.forEach(i => {
|
i.type = 1;
|
i.fileurl = i.imgaddr;
|
i.fileurlFull = i.url;
|
this.dealFileList.push(i);
|
});
|
}
|
},
|
complete() {
|
uni.hideLoading();
|
}
|
});
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
page {
|
::v-deep .u-toolbar {
|
border-top: 1rpx solid #cccccc;
|
}
|
}
|
|
.main_info {
|
padding: 0 30rpx;
|
|
.title {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
height: 90rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.status {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: $primaryColor;
|
}
|
|
.gray {
|
color: #999999;
|
}
|
}
|
|
.file_list {
|
display: flex;
|
flex-wrap: wrap;
|
|
.file {
|
width: 156rpx;
|
height: 156rpx;
|
border-radius: 12rpx;
|
margin-right: 22rpx;
|
margin-bottom: 22rpx;
|
|
&:nth-of-type(4n) {
|
margin-right: 0;
|
}
|
|
image,
|
video {
|
width: 156rpx;
|
height: 156rpx;
|
}
|
}
|
}
|
|
.desc {
|
margin: 0rpx 0 30rpx;
|
}
|
|
.content {
|
margin-top: 8rpx;
|
padding: 24rpx 30rpx;
|
background: #F7F7F7;
|
border-radius: 12rpx;
|
|
.line {
|
display: flex;
|
margin-bottom: 20rpx;
|
color: #333333;
|
|
&:nth-last-child(1) {
|
margin-bottom: 0;
|
}
|
|
.la {
|
color: #666666;
|
width: 140rpx;
|
}
|
}
|
}
|
|
.result_wrap {
|
border-top: 20rpx solid #f7f7f7;
|
margin: 20rpx -30rpx 0;
|
padding: 0 30rpx;
|
|
.line {
|
margin-top: 30rpx;
|
height: 42rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.la {
|
color: #666666;
|
}
|
}
|
}
|
}
|
|
.btns {
|
position: fixed;
|
bottom: 68rpx;
|
left: 0;
|
width: 750rpx;
|
padding: 0 40rpx;
|
display: flex;
|
justify-content: space-between;
|
|
.btn {
|
width: 224rpx;
|
height: 88rpx;
|
background: #FFFFFF;
|
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 104, 255, 0.3);
|
border-radius: 44rpx;
|
border: 2rpx solid $primaryColor;
|
color: $primaryColor;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: 500;
|
font-size: 32rpx;
|
|
.icon {
|
width: 32rpx;
|
height: 32rpx;
|
margin-right: 6rpx;
|
}
|
}
|
|
.active {
|
flex: 1;
|
margin-left: 20rpx;
|
color: #fff;
|
background-color: $primaryColor;
|
}
|
}
|
|
.sel_upload_wrap {
|
width: 100%;
|
border-top: 1px solid #666666;
|
box-shadow: 0 1 1 #333333;
|
|
.btn {
|
height: 90rpx;
|
line-height: 90rpx;
|
text-align: center;
|
}
|
}
|
|
.appr_modal {
|
padding: 36rpx 30rpx 0;
|
|
.title {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
margin-bottom: 40rpx;
|
text-align: center;
|
}
|
|
.label {
|
text {
|
color: #ed4545;
|
}
|
}
|
|
.df_sb {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 90rpx;
|
border-bottom: 1rpx solid #e4e4e4;
|
margin-bottom: 30rpx;
|
}
|
|
.back_footer {
|
display: flex;
|
|
.btn {
|
flex: 1;
|
height: 88rpx;
|
line-height: 88rpx;
|
background: #ffffff;
|
border-radius: 44rpx;
|
border: 1rpx solid #999999;
|
font-size: 32rpx;
|
text-align: center;
|
margin: 16rpx 8rpx;
|
}
|
|
.agree {
|
background: $uni-color-primary;
|
color: #fff;
|
border: 1rpx solid $uni-color-primary;
|
}
|
}
|
|
textarea {
|
box-sizing: border-box;
|
width: 690rpx;
|
min-height: 200rpx;
|
background-color: #f7f7f7;
|
font-size: 28rpx;
|
color: #333333;
|
padding: 24rpx;
|
border-radius: 8rpx;
|
margin-bottom: 30rpx;
|
}
|
|
.upload_wrap {
|
display: flex;
|
flex-wrap: wrap;
|
margin-bottom: 30rpx;
|
max-height: 362rpx;
|
overflow-y: auto;
|
margin-right: -30rpx;
|
}
|
|
.adduser_list_item_ipt1_upload {
|
margin-top: 24rpx;
|
width: 156rpx;
|
height: 156rpx;
|
margin-right: 22rpx;
|
border: 1rpx solid #e5e5e5;
|
background: #f7f7f7;
|
color: #666666;
|
font-size: 22rpx;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
|
&:nth-of-type(4n) {
|
margin-right: 0;
|
}
|
|
.close {
|
position: absolute;
|
right: -20rpx;
|
top: -20rpx;
|
z-index: 9999;
|
background-color: #fff;
|
}
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
|
video {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
.video_wrap {
|
position: relative;
|
border: 1px solid;
|
width: 156rpx;
|
height: 156rpx;
|
border-radius: 4rpx;
|
|
.play {
|
width: 60rpx !important;
|
height: 60rpx !important;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
}
|
|
.video_app {
|
overflow: hidden;
|
position: fixed;
|
left: 0;
|
top: 0;
|
width: 100vw;
|
height: 100vh;
|
display: flex;
|
align-items: center;
|
z-index: 9990;
|
|
.bg {
|
background-color: rgba(0, 0, 0, .6);
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
z-index: -1;
|
}
|
|
video {
|
width: 100%;
|
height: 42vh;
|
}
|
}
|
</style>
|
