完成其他任务板块

subpkg/otherTask/otherTask.vue

@@ -1,5 +1,5 @@
 <template>
-  <view style="padding-top: 28rpx;">
+  <view style="padding-top: 28rpx;padding-bottom: 160rpx;">
     <view class="card">
       <view class="title">任务名称: 入股任务</view>
       <u-line style="margin: 14rpx 0;"></u-line>
@@ -14,26 +14,76 @@
     <view class="card">
       <view class="title">详情描述</view>
       <u-line style="margin: 14rpx 0;"></u-line>
-      <u--textarea v-model="formData.text" height="80" placeholder="请输入内容" placeholderStyle="font-size: 28rpx;" style="font-size: 28rpx;background-color: #eee;" autoHeight></u--textarea>
+      <u--textarea v-model="formData.text" 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: 16rpx 0;">添加附件</view>
+      <view class="file">
+        <view class="file_item" v-for="(item, index) in formData.fileList" :key="'file'+index">
+          <image class="image" :src="item" @click="priview(index)"></image>
+          <image class="del" src="/static/icons/delete.png" @click.stop="deleteFile(index)"></image>
+        </view>
+        <view class="file_btn" @click="chooseFile"><image src="/static/icons/plus.png"></image></view>
+        <view class="file_empty" v-for="k in placeholderLength" :key="'empty'+k"></view>
+      </view>
     </view>
     <mybtn text="确认提交"></mybtn>
   </view>
 </template>
 
 <script>
+  import {
+  	upLoadImage
+  } from "@/api/file.js"
   export default {
     data() {
       return {
         task_id: -1,
         formData: {
-          text: ''
+          text: '',
+          fileList: []
         }
       };
     },
     onLoad(options) {
       this.task_id = options.task_id;
     },
+    computed:{
+      // 占位长度 
+      placeholderLength(){
+        return (this.formData.fileList.length+1)%3==0? 0 : 3-(this.formData.fileList.length+1)%3;
+      }
+    },
     methods:{
+      chooseFile(){
+        uni.chooseImage({
+          sizeType: ['compressed'],
+          success: async (res) => {
+            for (let item of res.tempFiles) {
+              let res = await upLoadImage({
+                filePath: item.path,
+                name: 'file'
+              });
+              this.formData.fileList.push(res.data.uri);
+            }
+            // this.formData.fileList = [...this.formData.fileList, res.tempFiles]
+          }
+        })
+      },
+      priview(index){
+        uni.previewImage({
+          urls: this.formData.fileList,
+          current: index,
+          longPressActions: {
+            itemList: ['删除'],
+            itemColor: '#ff0000',
+            success(e) {
+              if(e.tapIndex==0)this.deleteFile(e.index);
+            }
+          },
+        })
+      },
+      deleteFile(index){
+        this.formData.fileList.splice(index, 1);
+      },
       navTo (url) {
         if(url){
           uni.showLoading({
@@ -70,5 +120,58 @@
     .text {
       line-height: 50rpx;
     }
+    
+    .file{
+      display: flex;
+      justify-content: left;
+      flex-wrap: wrap;
+      &_item{
+        flex-shrink: 0;
+        width: 200rpx;
+        height: 200rpx;
+        margin: 0 auto;
+        margin-bottom: 16rpx;
+        border: 2px solid #ccc;
+        border-radius: 10rpx;
+        overflow: hidden;
+        position: relative;
+        .image{
+          width: 100%;
+          height: 100%;
+        }
+        .del{
+          position: absolute;
+          height: 40rpx;
+          width: 40rpx;
+          top: 10rpx;
+          right: 10rpx;
+        }
+      }
+      &_btn{
+        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;
+        image{
+          width: 100rpx;
+          height: 100rpx;
+        }
+      }
+      &_empty{
+        flex-shrink: 0;
+        width: 200rpx;
+        height: 200rpx;
+        margin: 0 auto;
+        margin-bottom: 16rpx;
+        border: 2px solid transparent;
+      }
+    }
   }
 </style>