|
|
@@ -1,15 +1,20 @@
|
|
|
<template>
|
|
|
<view class="text-color-12">
|
|
|
<view class="p-30">
|
|
|
- <textarea class="sys-from-background-color r-20 textarea p-20" name="" id="" cols="30" rows="10" v-model="msgData.msg" :maxlength="999"
|
|
|
- :placeholder="placeholder"></textarea>
|
|
|
+ <textarea class="sys-from-background-color r-20 textarea p-20" name="" id="" cols="30" rows="10"
|
|
|
+ v-model="msgData.msg" :maxlength="999" :placeholder="placeholder"></textarea>
|
|
|
<view class="size-26 m-t20 sys-weight-600">上传图片</view>
|
|
|
<view class="image-content">
|
|
|
- <view class="image-box" :key="index" @click="showImg(msgData.msg_img,pIndex)"
|
|
|
- v-for="(msgImg,pIndex) in msgData.msg_img">
|
|
|
- <image class="image-item wh-110 m-t20 r-10 m-r20" :src="msgImg.type===1?msgImg.url:getVideoImg(msgImg.url)" mode="aspectFill">
|
|
|
+ <view class="image-box m-t20 r-10 m-r20" :key="index" @click="showImg(msgData.msg_img,pIndex)"
|
|
|
+ v-for="(msgImg,pIndex) in msgData.msg_img">
|
|
|
+ <image class="image-item wh-110" :src="msgImg.type===1?msgImg.url:getVideoImg(msgImg.url)"
|
|
|
+ mode="aspectFill">
|
|
|
</image>
|
|
|
- <image class="delete-iocn wh-25" src="/page_task/static/img/information/hint-subtract.png" mode="" @click.stop="shutImg(pIndex)"></image>
|
|
|
+ <image class="wh-45 video-icon" src="/static/img/task/play.png" mode="aspectFill"
|
|
|
+ @click.stop="showVideoImg(item.url)" v-if="msgImg.type === 2">
|
|
|
+ </image>
|
|
|
+ <image class="delete-iocn wh-25" src="/page_task/static/img/information/hint-subtract.png" mode=""
|
|
|
+ @click.stop="shutImg(pIndex)"></image>
|
|
|
</view>
|
|
|
<view class="add-image column-c justify-center m-t20" @click.stop="showUploadingImg(true)">
|
|
|
<image class="wh-45" src="/page_task/static/img/task-details/Maskoup.png" mode=""></image>
|
|
|
@@ -18,18 +23,23 @@
|
|
|
</view>
|
|
|
<view class="size-26 m-tb20 sys-weight-600">上传附件</view>
|
|
|
<view class="">
|
|
|
- <view class="sys-from-background-color row-justify-sb center p-20 m-b16 r-20" v-for="(file,fileIndex) in msgData.file_list"
|
|
|
- :key="fileIndex">
|
|
|
- <view class="row-c">
|
|
|
- <image class="wh-60 m-r20" src="/page_task/static/img/task-details/icon-pdf.png" v-if="file.file_type===1" mode="aspectFill"></image>
|
|
|
- <image class="wh-60 m-r20" src="/page_task/static/img/task-details/icon-word.png" v-else-if="file.file_type===2" mode="aspectFill"> </image>
|
|
|
- <image class="wh-60 m-r20" src="/page_task/static/img/task-details/icon-excel.png" v-else mode="aspectFill"> </image>
|
|
|
- <text class="size-24 text-color-666"> {{file.name}}</text>
|
|
|
+ <view class="sys-from-background-color row-justify-sb center p-20 m-b16 r-20"
|
|
|
+ v-for="(file,fileIndex) in msgData.file_list" :key="fileIndex">
|
|
|
+ <view class="row-c">
|
|
|
+ <image class="wh-60 m-r20" src="/page_task/static/img/task-details/icon-pdf.png"
|
|
|
+ v-if="file.file_type===1" mode="aspectFill"></image>
|
|
|
+ <image class="wh-60 m-r20" src="/page_task/static/img/task-details/icon-word.png"
|
|
|
+ v-else-if="file.file_type===2" mode="aspectFill"> </image>
|
|
|
+ <image class="wh-60 m-r20" src="/page_task/static/img/task-details/icon-excel.png" v-else
|
|
|
+ mode="aspectFill"> </image>
|
|
|
+ <text class="size-24 text-color-666"> {{file.name}}</text>
|
|
|
</view>
|
|
|
- <image class="delete-iocn wh-25" src="/page_task/static/img/information/hint-subtract.png" @click.stop="delFile(delFile)" mode=""></image>
|
|
|
+ <image class="delete-iocn wh-25" src="/page_task/static/img/information/hint-subtract.png"
|
|
|
+ @click.stop="delFile(delFile)" mode=""></image>
|
|
|
</view>
|
|
|
<view class="sys-from-background-color row-c p-20 r-20" @click.stop="uploadingFile(5)">
|
|
|
- <image class="wh-80 m-r20" src="/page_task/static/img/task-details/add-file.png" mode="aspectFill"></image>
|
|
|
+ <image class="wh-80 m-r20" src="/page_task/static/img/task-details/add-file.png" mode="aspectFill">
|
|
|
+ </image>
|
|
|
<view class="column">
|
|
|
<text class="select-file size-24">选择文件</text>
|
|
|
<text class="size-24 text-color-666">支持上传文件：pdf、word、excel、ppt</text>
|
|
|
@@ -37,177 +47,195 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <EnButton v-if="is_button" @onSubmit="clickBut"></EnButton>
|
|
|
- <uni-popup ref="popup" type="bottom">
|
|
|
- <view class="popup-block">
|
|
|
- <view class="popup-row" @click="uploadingFile(1)">拍照</view>
|
|
|
- <view class="popup-row" @click="uploadingFile(2)">选择照片</view>
|
|
|
- <view class="popup-row" @click="uploadingFile(3)">录像</view>
|
|
|
- <view class="popup-row" @click="uploadingFile(4)">选择视频</view>
|
|
|
- <view class="popup-row" @click="showUploadingImg(false)">取消</view>
|
|
|
- </view>
|
|
|
- </uni-popup>
|
|
|
+ <EnButton v-if="is_button" @onSubmit="clickBut"></EnButton>
|
|
|
+ <uni-popup ref="popup" type="bottom">
|
|
|
+ <view class="popup-block">
|
|
|
+ <view class="popup-row" @click="uploadingFile(1)">拍照</view>
|
|
|
+ <view class="popup-row" @click="uploadingFile(2)">选择照片</view>
|
|
|
+ <view class="popup-row" @click="uploadingFile(3)">录像</view>
|
|
|
+ <view class="popup-row" @click="uploadingFile(4)">选择视频</view>
|
|
|
+ <view class="popup-row" @click="showUploadingImg(false)">取消</view>
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import tools from "@/service/tools";
|
|
|
- import txUploadFile from "@/service/txOssSts";
|
|
|
+ import txUploadFile from "@/service/txOssSts";
|
|
|
|
|
|
- export default {
|
|
|
+ export default {
|
|
|
props: {
|
|
|
is_button: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
- placeholder:{
|
|
|
- default: '留个言吧~~'
|
|
|
- }
|
|
|
+ placeholder: {
|
|
|
+ default: '留个言吧~~'
|
|
|
+ }
|
|
|
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- msgData: {
|
|
|
- business_id: '',
|
|
|
- msg: '',
|
|
|
- reply_id: 0,
|
|
|
- msg_img: [],
|
|
|
- file_list: [],
|
|
|
- },
|
|
|
- }
|
|
|
+ msgData: {
|
|
|
+ business_id: '',
|
|
|
+ msg: '',
|
|
|
+ reply_id: 0,
|
|
|
+ msg_img: [],
|
|
|
+ file_list: [],
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'msgData': {
|
|
|
+ handler() {
|
|
|
+ this.$emit('input', this.msgData)
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
},
|
|
|
- watch: {
|
|
|
- 'msgData':{
|
|
|
- handler() {
|
|
|
- this.$emit('input',this.msgData)
|
|
|
- },
|
|
|
- deep: true
|
|
|
- }
|
|
|
- },
|
|
|
methods: {
|
|
|
- showImg(item, index) {
|
|
|
+ showImg(item, index) {
|
|
|
|
|
|
- },
|
|
|
- clickBut(){
|
|
|
- console.log('------butClick--------------')
|
|
|
- this.$emit('butClick')
|
|
|
- },
|
|
|
- delFile(fileIndex){
|
|
|
- this.msgData.file_list.splice(fileIndex, 1)
|
|
|
- this.fileNum=-1
|
|
|
- },
|
|
|
- getVideoImg(url){
|
|
|
- return tools.getOssVideo(url)
|
|
|
- },
|
|
|
- shutImg(indexT) {
|
|
|
- this.msgData.msg_img.splice(indexT, 1)
|
|
|
- },
|
|
|
- showUploadingImg(showImg) {
|
|
|
- if (showImg) {
|
|
|
- this.$refs.popup.open("bottom");
|
|
|
- } else {
|
|
|
- this.$refs.popup.close();
|
|
|
- }
|
|
|
- tools.hideLoading()
|
|
|
- },
|
|
|
- uploadingFile(fileType){
|
|
|
- if(fileType<3){
|
|
|
- this.uploadingImg(fileType)
|
|
|
- }else if(fileType<5){
|
|
|
- this.uploadingVideo(fileType)
|
|
|
- }else {
|
|
|
- this.uploadingWord()
|
|
|
- }
|
|
|
- },
|
|
|
- uploadingWord(){
|
|
|
- tools.showLoading()
|
|
|
- wx.chooseMessageFile({
|
|
|
- count: 5, //默认100
|
|
|
- type: 'file', //默认100
|
|
|
- extension:['pdf','doc','docx','xlsx','xls'],
|
|
|
- success: (res)=> {
|
|
|
- console.log('---------------------------------------------');
|
|
|
- console.log(res);
|
|
|
- if (res.tempFiles.length > 0) {
|
|
|
- res.tempFiles.forEach((tempFilePath) => {
|
|
|
- console.log(tempFilePath)
|
|
|
- txUploadFile(tempFilePath.path).then((data) => {
|
|
|
- if (!data) {
|
|
|
- tools.error('图片上传失败')
|
|
|
- } else {
|
|
|
- console.log({'name':tempFilePath.name,'file_type':tools.getFileType(data.Location),'url':data.Location})
|
|
|
- console.log('---------------------------------------------');
|
|
|
- this.msgData.file_list.push({'name':tempFilePath.name,'file_type':tools.getFileType(data.Location),'url':data.Location})
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- this.showUploadingImg(false);
|
|
|
- } else {
|
|
|
- tools.error("请选择上传文件")
|
|
|
- tools.hideLoading()
|
|
|
- }
|
|
|
- },
|
|
|
- fail:(e)=>{
|
|
|
- tools.hideLoading()
|
|
|
- }
|
|
|
- });
|
|
|
+ },
|
|
|
+ clickBut() {
|
|
|
+ console.log('------butClick--------------')
|
|
|
+ this.$emit('butClick')
|
|
|
+ },
|
|
|
+ delFile(fileIndex) {
|
|
|
+ this.msgData.file_list.splice(fileIndex, 1)
|
|
|
+ this.fileNum = -1
|
|
|
+ },
|
|
|
+ getVideoImg(url) {
|
|
|
+ return tools.getOssVideo(url)
|
|
|
+ },
|
|
|
+ shutImg(indexT) {
|
|
|
+ this.msgData.msg_img.splice(indexT, 1)
|
|
|
+ },
|
|
|
+ showUploadingImg(showImg) {
|
|
|
+ if (showImg) {
|
|
|
+ this.$refs.popup.open("bottom");
|
|
|
+ } else {
|
|
|
+ this.$refs.popup.close();
|
|
|
+ }
|
|
|
+ tools.hideLoading()
|
|
|
+ },
|
|
|
+ uploadingFile(fileType) {
|
|
|
+ if (fileType < 3) {
|
|
|
+ this.uploadingImg(fileType)
|
|
|
+ } else if (fileType < 5) {
|
|
|
+ this.uploadingVideo(fileType)
|
|
|
+ } else {
|
|
|
+ this.uploadingWord()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ uploadingWord() {
|
|
|
+ tools.showLoading()
|
|
|
+ wx.chooseMessageFile({
|
|
|
+ count: 5, //默认100
|
|
|
+ type: 'file', //默认100
|
|
|
+ extension: ['pdf', 'doc', 'docx', 'xlsx', 'xls'],
|
|
|
+ success: (res) => {
|
|
|
+ console.log('---------------------------------------------');
|
|
|
+ console.log(res);
|
|
|
+ if (res.tempFiles.length > 0) {
|
|
|
+ res.tempFiles.forEach((tempFilePath) => {
|
|
|
+ console.log(tempFilePath)
|
|
|
+ txUploadFile(tempFilePath.path).then((data) => {
|
|
|
+ if (!data) {
|
|
|
+ tools.error('图片上传失败')
|
|
|
+ } else {
|
|
|
+ console.log({
|
|
|
+ 'name': tempFilePath.name,
|
|
|
+ 'file_type': tools.getFileType(data
|
|
|
+ .Location),
|
|
|
+ 'url': data.Location
|
|
|
+ })
|
|
|
+ console.log(
|
|
|
+ '---------------------------------------------'
|
|
|
+ );
|
|
|
+ this.msgData.file_list.push({
|
|
|
+ 'name': tempFilePath.name,
|
|
|
+ 'file_type': tools.getFileType(data
|
|
|
+ .Location),
|
|
|
+ 'url': data.Location
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.showUploadingImg(false);
|
|
|
+ } else {
|
|
|
+ tools.error("请选择上传文件")
|
|
|
+ tools.hideLoading()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (e) => {
|
|
|
+ tools.hideLoading()
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- },
|
|
|
- uploadingVideo(sourceType){
|
|
|
- tools.showLoading()
|
|
|
- uni.chooseVideo({
|
|
|
- sizeType: "compressed",
|
|
|
- sourceType: [sourceType === 3 ? 'camera' : 'album'],
|
|
|
- success: (res) =>{
|
|
|
- txUploadFile(res.tempFilePath).then((data) => {
|
|
|
- if (!data) {
|
|
|
- tools.error('视频上传失败')
|
|
|
- } else {
|
|
|
- setTimeout(()=>{
|
|
|
- this.msgData.msg_img.push({'type':2,'url':data.Location})
|
|
|
- },1500)
|
|
|
- }
|
|
|
- this.showUploadingImg(false);
|
|
|
- }).catch((e)=>{
|
|
|
- tools.hideLoading()
|
|
|
- })
|
|
|
- },
|
|
|
- fail:(e)=>{
|
|
|
- tools.hideLoading()
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- uploadingImg(sourceType) {
|
|
|
- tools.showLoading()
|
|
|
- uni.chooseMedia({
|
|
|
- mediaType: 'image',
|
|
|
- count: sourceType === 1 ? 1 : 9, //默认9
|
|
|
- sizeType: "compressed",
|
|
|
- sourceType: [sourceType === 1 ? 'camera' : 'album'],
|
|
|
- success: (res) => {
|
|
|
- console.log(res)
|
|
|
- if (res.tempFiles.length > 0) {
|
|
|
- res.tempFiles.forEach((tempFile) => {
|
|
|
- txUploadFile(tempFile.tempFilePath).then((data) => {
|
|
|
- if (!data) {
|
|
|
- tools.error('图片上传失败')
|
|
|
- } else {
|
|
|
- this.msgData.msg_img.push({'type':1,'url':data.Location})
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- this.showUploadingImg(false);
|
|
|
- } else {
|
|
|
- tools.error("请选择上传的图片")
|
|
|
- tools.hideLoading()
|
|
|
- }
|
|
|
- },
|
|
|
- fail:(e)=>{
|
|
|
- tools.hideLoading()
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- }
|
|
|
+ },
|
|
|
+ uploadingVideo(sourceType) {
|
|
|
+ tools.showLoading()
|
|
|
+ uni.chooseVideo({
|
|
|
+ sizeType: "compressed",
|
|
|
+ sourceType: [sourceType === 3 ? 'camera' : 'album'],
|
|
|
+ success: (res) => {
|
|
|
+ txUploadFile(res.tempFilePath).then((data) => {
|
|
|
+ if (!data) {
|
|
|
+ tools.error('视频上传失败')
|
|
|
+ } else {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.msgData.msg_img.push({
|
|
|
+ 'type': 2,
|
|
|
+ 'url': data.Location
|
|
|
+ })
|
|
|
+ }, 1500)
|
|
|
+ }
|
|
|
+ this.showUploadingImg(false);
|
|
|
+ }).catch((e) => {
|
|
|
+ tools.hideLoading()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fail: (e) => {
|
|
|
+ tools.hideLoading()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ uploadingImg(sourceType) {
|
|
|
+ tools.showLoading()
|
|
|
+ uni.chooseMedia({
|
|
|
+ mediaType: 'image',
|
|
|
+ count: sourceType === 1 ? 1 : 9, //默认9
|
|
|
+ sizeType: "compressed",
|
|
|
+ sourceType: [sourceType === 1 ? 'camera' : 'album'],
|
|
|
+ success: (res) => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.tempFiles.length > 0) {
|
|
|
+ res.tempFiles.forEach((tempFile) => {
|
|
|
+ txUploadFile(tempFile.tempFilePath).then((data) => {
|
|
|
+ if (!data) {
|
|
|
+ tools.error('图片上传失败')
|
|
|
+ } else {
|
|
|
+ this.msgData.msg_img.push({
|
|
|
+ 'type': 1,
|
|
|
+ 'url': data.Location
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.showUploadingImg(false);
|
|
|
+ } else {
|
|
|
+ tools.error("请选择上传的图片")
|
|
|
+ tools.hideLoading()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (e) => {
|
|
|
+ tools.hideLoading()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -216,33 +244,34 @@
|
|
|
width: calc(100% - 40rpx);
|
|
|
max-height: 100rpx;
|
|
|
}
|
|
|
- .popup-block {
|
|
|
- border-radius: 20rpx 20rpx 0rpx 0rpx;
|
|
|
- overflow: hidden;
|
|
|
- background-color: #f5f5f5;
|
|
|
|
|
|
- .popup-row {
|
|
|
- height: 100rpx;
|
|
|
- background-color: #fff;
|
|
|
- text-align: center;
|
|
|
- line-height: 100rpx;
|
|
|
- border-bottom: 2rpx solid #f5f5f5;
|
|
|
+ .popup-block {
|
|
|
+ border-radius: 20rpx 20rpx 0rpx 0rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: #f5f5f5;
|
|
|
|
|
|
- &:nth-child(4) {
|
|
|
- margin-bottom: 20rpx;
|
|
|
- }
|
|
|
+ .popup-row {
|
|
|
+ height: 100rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 100rpx;
|
|
|
+ border-bottom: 2rpx solid #f5f5f5;
|
|
|
|
|
|
- &:last-child {
|
|
|
- height: 112rpx;
|
|
|
- border: none;
|
|
|
- line-height: 112rpx;
|
|
|
- }
|
|
|
+ &:nth-child(4) {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
|
|
|
- &:active {
|
|
|
- background-color: rgb(244, 244, 244);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ &:last-child {
|
|
|
+ height: 112rpx;
|
|
|
+ border: none;
|
|
|
+ line-height: 112rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background-color: rgb(244, 244, 244);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
.image-content {
|
|
|
display: flex;
|
|
|
@@ -257,10 +286,17 @@
|
|
|
border-radius: 10rpx;
|
|
|
}
|
|
|
|
|
|
+ .video-icon {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+
|
|
|
.delete-iocn {
|
|
|
position: absolute;
|
|
|
- right: 12rpx;
|
|
|
- top: 12rpx;
|
|
|
+ right: -10rpx;
|
|
|
+ top: -10rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -284,4 +320,4 @@
|
|
|
display: inline-block;
|
|
|
margin-bottom: 10rpx;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
443166679@qq.com