OfficeApp/subpkg/otherTask/otherTask.vue

<template>
  <view style="padding-top: 28rpx;padding-bottom: 160rpx;">
    <view class="card">
      <view class="title">任务名称: 入股任务</view>
      <u-line style="margin: 14rpx 0;"></u-line>
      <view class="text">阶段类型: 单次</view>
      <view class="text" style="color: #FF7C32;">任务金额: 3000元</view>
    </view>
    <view class="card">
      <view class="title">任务描述</view>
      <u-line style="margin: 14rpx 0;"></u-line>
      <view class="text">完成公司分配入股任务，时限30日内。完成公司分配入股任务，时限30日内。完成公司分配入股任务，时限30日内。</view>
    </view>
    <view class="card">
      <view class="title">详情描述</view>
      <u-line style="margin: 14rpx 0;"></u-line>
      <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: '',
          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({
            title: '加载中',
            mask: true
          });
          uni.navigateTo({
          	url: url,
            success() {
              uni.hideLoading()
            }
          })
        }else Toast('暂未开放')
      },
    }
  }
</script>

<style lang="scss">
  .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;
    }
    
    .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>