no message

page_task/task_details/module/send_chat.vue

@@ -1,32 +1,33 @@
 <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"
-				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="留个言吧"></textarea>
 			<view class="size-26 m-t20 sys-weight-600">上传图片</view>
 			<view class="image-content">
-				<view class="image-box" v-for="(item,index) in 1" :key="index">
-					<image class="image-item wh-110 m-t20 r-10 m-r20" src="/static/img/logo.png" mode="aspectFill">
+				<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">
 					</image>
-					<image class="delete-iocn wh-25" src="/static/img/information/hint-subtract.png" mode=""></image>
+					<image class="delete-iocn wh-25" src="/static/img/information/hint-subtract.png" mode="" @click.stop="shutImg(pIndex)"></image>
 				</view>
-				<view class="add-image column-c justify-center m-t20">
+				<view class="add-image column-c justify-center m-t20" @click.stop="showUploadingImg(true)">
 					<image class="wh-45" src="/static/img/task-details/Mask oup.png" mode=""></image>
 					<text class="size-24 text-color-666">视频/图片</text>
 				</view>
 			</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="(item,index) in 1"
-					:key="index">
+				<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="/static/img/task-details/icon-word.png" mode="aspectFill">
 						</image>
-						<text class="size-24 text-color-666">资金证明资料</text>
+						<text class="size-24 text-color-666"> {{file.name}}</text>
 					</view>
-					<image class="delete-iocn wh-25" src="/static/img/information/hint-subtract.png" mode=""></image>
+					<image class="delete-iocn wh-25" src="/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">
+				<view class="sys-from-background-color row-c p-20 r-20" @click.stop="uploadingFile(5)">
 					<image class="wh-80 m-r20" src="/static/img/task-details/add-file.png" mode="aspectFill">
 					</image>
 					<view class="column">
@@ -37,11 +38,23 @@
 			</view>
 		</view>
 		<EnButton v-if="is_button"></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>
-	export default {
+	import tools from "@/service/tools";
+  import txUploadFile from "@/service/txOssSts";
+
+  export default {
 		props: {
 			is_button: {
 				type: Boolean,
@@ -49,9 +62,133 @@
 			}
 		},
 		data() {
-			return {}
+			return {
+        msgData: {
+          business_id: '',
+          msg: '',
+          reply_id: 0,
+          msg_img: [],
+          file_list: [],
+        },
+      }
 		},
-		methods: {}
+		methods: {
+      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()
+          }
+        });
+      },
+    }
 	}
 </script>
 
@@ -60,6 +197,33 @@
 		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;
+
+      &:nth-child(4) {
+        margin-bottom: 20rpx;
+      }
+
+      &:last-child {
+        height: 112rpx;
+        border: none;
+        line-height: 112rpx;
+      }
+
+      &:active {
+        background-color: rgb(244, 244, 244);
+      }
+    }
+  }
 
 	.image-content {
 		display: flex;