OfficeApp/subpkg/otherTask/otherTask.vue

345 lines
11 KiB
Vue
Raw Normal View History

2023-08-28 18:24:47 +08:00
<template>
2023-08-29 16:02:08 +08:00
<view style="padding-top: 28rpx;padding-bottom: 160rpx;">
2023-08-28 18:24:47 +08:00
<view class="card">
2023-09-14 14:27:42 +08:00
<view class="title">任务名称: {{task_info.title}}</view>
2023-08-28 18:24:47 +08:00
<u-line style="margin: 14rpx 0;"></u-line>
2023-09-14 14:27:42 +08:00
<!-- <view class="text">阶段类型: 单次</view> -->
<view class="text" style="color: #FF7C32;">任务金额: {{task_info.money}}</view>
2023-08-28 18:24:47 +08:00
</view>
<view class="card">
<view class="title">任务描述</view>
<u-line style="margin: 14rpx 0;"></u-line>
2023-09-14 14:27:42 +08:00
<view class="text">{{task_info.content}}</view>
2023-08-28 18:24:47 +08:00
</view>
<view class="card">
2023-08-28 19:36:09 +08:00
<view class="title">详情描述</view>
2023-08-28 18:24:47 +08:00
<u-line style="margin: 14rpx 0;"></u-line>
2023-09-16 13:59:52 +08:00
<u--textarea :disabled="other.is_commit==1" v-model="other.note" placeholder="请输入内容"
placeholderStyle="font-size: 22rpx;" style="font-size: 28rpx;background-color: #eee;min-height: 100px;"
autoHeight maxlength="-1"></u--textarea>
<view class="title" style="margin-top: 16rpx;">添加附件</view>
<u-tabs :current="current" :list="list1" @click="clickTabs" lineColor='#0122c7' :itemStyle="{height: '80rpx'}" lineWidth='20'
inactiveStyle='color:#666' activeStyle="color:#0122c7" style="margin-bottom: 16rpx;font-size: 28rpx;"></u-tabs>
<view class="file" v-if="current==0">
2023-09-14 14:27:42 +08:00
<view class="file_item" v-for="(item, index) in fileList" :key="'file'+index">
2023-08-29 16:02:08 +08:00
<image class="image" :src="item" @click="priview(index)"></image>
2023-09-16 13:59:52 +08:00
<image v-if="!other.is_commit" class="del" src="/static/icons/delete.png" @click.stop="deleteFile(index)">
</image>
2023-08-29 16:02:08 +08:00
</view>
2023-09-14 15:11:56 +08:00
<view v-if="!other.is_commit" class="file_btn" @click="chooseFile">
2023-09-14 14:27:42 +08:00
<image src="/static/icons/plus.png"></image>
</view>
2023-08-29 16:02:08 +08:00
<view class="file_empty" v-for="k in placeholderLength" :key="'empty'+k"></view>
</view>
2023-09-16 13:59:52 +08:00
<view class="file" v-else>
<view class="file_item" v-for="(item, index) in videoList" :key="'file'+index">
<image class="image" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/3/video_bg.png" @click="videoshow(item)"></image>
<image v-if="!other.is_commit" class="del" src="/static/icons/delete.png" @click.stop="deleteFile(index, 'video')">
</image>
</view>
<view v-if="!other.is_commit" class="file_btn" @click="chooseVideo">
<image src="/static/icons/plus.png"></image>
</view>
<view class="file_empty" v-for="k in placeholderLengthVideo" :key="'empty_v'+k"></view>
</view>
2023-08-28 18:24:47 +08:00
</view>
2023-09-14 15:11:56 +08:00
<!-- <mybtn text="确认提交" @click="$u.throttle(submit, 1500)"></mybtn> -->
2023-09-14 14:27:42 +08:00
<mybtn v-if="!other.is_commit" text="确认提交" @click="$u.throttle(submit, 1500)"></mybtn>
2023-09-14 15:11:56 +08:00
<mybtn v-else-if="task_info.status==3" text="已完成" :my_btn_disabled="true" @click="showToast('任务已完成')"></mybtn>
<mybtn v-else-if="task_info.status==5" text="已关闭" :my_btn_disabled="true" @click="showToast('任务已关闭!')"></mybtn>
<mybtn v-else text="已提交,请等待审核" :my_btn_disabled="true" @click="showToast('请耐心等待审核结果')"></mybtn>
2023-09-16 13:59:52 +08:00
<!--视频预览弹窗-->
<view v-if="show_video" class="video-count">
2023-09-16 14:54:52 +08:00
<video id="myVideo" class="videoLink" autoplay loop muted :src="video_src"></video>
2023-09-16 13:59:52 +08:00
<!--#ifndef APP-PLUS-->
2023-09-16 14:54:52 +08:00
<!-- <video id="myVideo" class="videoLink" autoplay loop muted :src="video_src"></video> -->
2023-09-16 13:59:52 +08:00
<!--#endif-->
<!--#ifdef APP-PLUS-->
<!-- <video id="myVideo" class="videoLink" autoplay loop
:src='video_src && (video_src.substring(0,4) == "http" || video_src.substring(0,5) == "https") ? video_src : "http:" + video_src'></video> -->
<!--#endif-->
</view>
<view class='mask' catchtouchmove="true" :hidden='show_video==false' @tap="show_video=false"></view>
2023-08-28 18:24:47 +08:00
</view>
</template>
<script>
2023-08-29 16:02:08 +08:00
import {
2023-09-16 13:59:52 +08:00
upLoadImage,
VIDEO_URL
2023-08-29 16:02:08 +08:00
} from "@/api/file.js"
2023-09-14 11:02:19 +08:00
import {
2023-09-14 14:27:42 +08:00
taskOtherTaskDetail,
2023-09-14 15:11:56 +08:00
taskOtherTaskCommit
2023-09-14 11:02:19 +08:00
} from "@/api/task.js"
2023-09-16 13:59:52 +08:00
import { Toast } from "../../libs/uniApi";
2023-08-28 18:24:47 +08:00
export default {
data() {
return {
task_id: -1,
2023-09-14 14:27:42 +08:00
task_info: {
},
other: {
annex: [], // 附件列表
is_commit: 0, // 是否提交
note: "", // 详情描述
},
2023-09-16 13:59:52 +08:00
list1: [{
name: '图片',
}, {
name: '视频',
}],
2023-09-16 14:54:52 +08:00
current: 1,
2023-09-16 13:59:52 +08:00
fileList: [],
2023-09-16 14:54:52 +08:00
videoList: ['https://ceshi-worker-task.lihaink.cn/uploads/video/20230916/20230916144834ddf521318.mp4'],
2023-09-16 13:59:52 +08:00
video_src: '',
show_video: false
2023-08-28 18:24:47 +08:00
};
},
onLoad(options) {
this.task_id = options.task_id;
2023-09-14 11:02:19 +08:00
this.initDetail();
2023-08-28 18:24:47 +08:00
},
2023-09-14 14:27:42 +08:00
computed: {
2023-08-29 16:02:08 +08:00
// 占位长度
2023-09-14 14:27:42 +08:00
placeholderLength() {
2023-09-16 13:59:52 +08:00
if (this.other.is_commit == 1) return this.fileList.length % 3 == 0 ? 0 : 3 - this.fileList.length % 3;
2023-09-14 14:27:42 +08:00
return (this.fileList.length + 1) % 3 == 0 ? 0 : 3 - (this.fileList.length + 1) % 3;
2023-09-16 13:59:52 +08:00
},
placeholderLengthVideo() {
if (this.other.is_commit == 1) return this.videoList.length % 3 == 0 ? 0 : 3 - this.videoList.length % 3;
return (this.videoList.length + 1) % 3 == 0 ? 0 : 3 - (this.videoList.length + 1) % 3;
},
2023-08-29 16:02:08 +08:00
},
2023-09-14 14:27:42 +08:00
methods: {
2023-09-14 15:11:56 +08:00
// 初始化
2023-09-14 14:27:42 +08:00
initDetail() {
taskOtherTaskDetail({ id: this.task_id }).then((res) => {
this.task_info = res.data;
this.other = res.data?.extend?.other;
2023-09-14 15:11:56 +08:00
res.data?.extend?.other?.annex ? this.fileList = res.data?.extend?.other?.annex : null;
2023-09-16 13:59:52 +08:00
this.other.is_commit = 0;
2023-09-14 11:02:19 +08:00
})
},
2023-09-16 13:59:52 +08:00
async submit() {
if (this.other.note.trim() == '') return Toast('详情描述不能为空');
2023-09-14 15:11:56 +08:00
await taskOtherTaskCommit({
2023-09-14 14:27:42 +08:00
id: this.task_id,
2023-09-14 15:11:56 +08:00
note: this.other.note,
2023-09-16 13:59:52 +08:00
annex: this.fileList,
vedio_annex: this.videoList
2023-09-14 14:27:42 +08:00
});
this.other.is_commit = 1;
Toast('提交成功')
},
2023-09-16 13:59:52 +08:00
clickTabs(item) {
this.current = item.index;
},
showToast(str) {
2023-09-14 15:11:56 +08:00
Toast(str)
},
2023-09-14 14:27:42 +08:00
chooseFile() {
2023-08-29 16:02:08 +08:00
uni.chooseImage({
sizeType: ['compressed'],
success: async (res) => {
for (let item of res.tempFiles) {
2023-09-14 15:11:56 +08:00
let ul = await upLoadImage({
2023-08-29 16:02:08 +08:00
filePath: item.path,
name: 'file'
});
2023-09-14 15:11:56 +08:00
this.fileList.push(ul.data.uri);
2023-08-29 16:02:08 +08:00
}
2023-09-14 14:27:42 +08:00
// this.fileList = [...this.fileList, res.tempFiles]
2023-08-29 16:02:08 +08:00
}
2023-09-16 13:59:52 +08:00
});
},
chooseVideo(){
console.log(VIDEO_URL);
uni.chooseVideo({
sourceType: ['album', 'camera'], // 视频选择的来源,可以是相册或摄像头
maxDuration: 60, // 视频最大时长,单位秒
success: (res) => {
// 选择视频成功的回调函数
const video = res.tempFilePath;
2023-09-16 14:54:52 +08:00
// this.videoList.push(video)
// return ;
2023-09-16 13:59:52 +08:00
uni.uploadFile({
url: VIDEO_URL,
filePath: video,
name: 'file',
header:{
token: this.$store.state.app.token
},
success: (uploadFileRes) => {
console.log(uploadFileRes);
uploadFileRes.data = JSON.parse(uploadFileRes.data)
if(uploadFileRes.data.code==1) {
2023-09-16 14:54:52 +08:00
this.videoList.push(uploadFileRes.data.uri)
2023-09-16 13:59:52 +08:00
}
else Toast('网络错误')
},
fail: (err) => {
Toast('网络错误')
}
})
},
fail() {
Toast('用户取消上传')
}
});
2023-08-29 16:02:08 +08:00
},
2023-09-14 14:27:42 +08:00
priview(index) {
2023-08-29 16:02:08 +08:00
uni.previewImage({
2023-09-14 14:27:42 +08:00
urls: this.fileList,
2023-08-29 16:02:08 +08:00
current: index,
longPressActions: {
itemList: ['删除'],
itemColor: '#ff0000',
success(e) {
2023-09-14 14:27:42 +08:00
if (e.tapIndex == 0) this.deleteFile(e.index);
2023-08-29 16:02:08 +08:00
}
},
})
},
2023-09-16 13:59:52 +08:00
/*查看视频*/
videoshow(src) {
console.log('视频', src);
this.video_src = src;
this.show_video = true;
this.$nextTick(() => {
this.videoContext = uni.createVideoContext('myVideo', this);
this.videoContext.play();
})
},
screenChange(e) {
let fullScreen = e.detail.fullScreen; //值true为进入全屏false为退出全屏
// console.log(e, "qweeee========================================");
if (!fullScreen) {
this.videoplay = false
//退出全屏 this.videoplay = false; // 隐藏播放盒子
}
},
deleteFile(index, type='image') {
if(type=='image') this.fileList.splice(index, 1);
else if(type=='video') this.videoList.splice(index, 1);
2023-08-29 16:02:08 +08:00
},
2023-09-14 14:27:42 +08:00
navTo(url) {
if (url) {
2023-08-28 18:24:47 +08:00
uni.showLoading({
title: '加载中',
mask: true
});
uni.navigateTo({
2023-09-14 14:27:42 +08:00
url: url,
2023-08-28 18:24:47 +08:00
success() {
uni.hideLoading()
}
})
2023-09-14 14:27:42 +08:00
} else Toast('暂未开放')
2023-08-28 18:24:47 +08:00
},
}
}
</script>
<style lang="scss">
2023-09-16 13:59:52 +08:00
::v-deep .u-tabs__wrapper__nav__item__text{
font-size: 28rpx !important;
}
.video-count {
position: fixed;
width: 600rpx;
height: 500rpx;
top: 50%;
left: 50%;
margin-left: -300rpx;
margin-top: -250rpx;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
.videoLink {
width: 600rpx;
height: 500rpx;
}
}
2023-08-28 18:24:47 +08:00
.card {
margin: 0 auto;
margin-bottom: 28rpx;
width: 694rpx;
background: #FFFFFF;
border-radius: 14rpx;
padding: 28rpx;
.title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
}
.text {
line-height: 50rpx;
}
2023-09-14 14:27:42 +08:00
.file {
2023-08-29 16:02:08 +08:00
display: flex;
justify-content: left;
flex-wrap: wrap;
2023-09-14 14:27:42 +08:00
&_item {
2023-08-29 16:02:08 +08:00
flex-shrink: 0;
width: 200rpx;
height: 200rpx;
margin: 0 auto;
margin-bottom: 16rpx;
border: 2px solid #ccc;
border-radius: 10rpx;
overflow: hidden;
position: relative;
2023-09-14 14:27:42 +08:00
.image {
2023-08-29 16:02:08 +08:00
width: 100%;
height: 100%;
}
2023-09-14 14:27:42 +08:00
.del {
2023-08-29 16:02:08 +08:00
position: absolute;
height: 40rpx;
width: 40rpx;
top: 10rpx;
right: 10rpx;
}
}
2023-09-14 14:27:42 +08:00
&_btn {
2023-08-29 16:02:08 +08:00
flex-shrink: 0;
width: 200rpx;
height: 200rpx;
margin: 0 auto;
margin-bottom: 16rpx;
border: 2px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: 10rpx;
2023-09-14 14:27:42 +08:00
image {
2023-08-29 16:02:08 +08:00
width: 100rpx;
height: 100rpx;
}
}
2023-09-14 14:27:42 +08:00
&_empty {
2023-08-29 16:02:08 +08:00
flex-shrink: 0;
width: 200rpx;
height: 200rpx;
margin: 0 auto;
margin-bottom: 16rpx;
border: 2px solid transparent;
}
}
2023-08-28 18:24:47 +08:00
}
</style>