Handwriting_board/src/components/del.wpy

<style lang="less">
  .del {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    view {
      position: fixed;
      left: 10%;
      width: 80%;
      height: 100rpx;
      background: #fff;
      border-radius: 20rpx;
      text-align: center;
      line-height: 100rpx;
      font-size: 36rpx;
    }
    .delete {
      bottom: 147rpx;
    }
    .cancel {
      bottom: 36rpx;
    }
    .btn-slect {
      color: #F86363;
    }
  }
</style>
<template>
  <view class="del" wx:if="{{syncFlag == 'true'}}">
    <view class="delete {{slectFlag ? 'btn-slect' : ''}}" @tap="del">删除</view>
    <view class="cancel {{slectFlag ? '' : 'btn-slect'}}"  @tap="hide">取消</view>
  </view>
</template>
<script>
  import wepy from 'wepy'
  import { httpRequestApi } from '../util/httpRequestApi'

  export default class Del extends wepy.component {
    data = {
      slectFlag: false
    }

    props = {
      syncFlag: {
        type: String,
        default: 'null',
        twoWay: true
      },
      index: {
        type: Number,
        default: 'null'
      },
      fileList: {
        type: Array,
        default: 'null',
        twoWay: true
      }
    }

    methods = {
      del () {
        this.slectFlag = !this.slectFlag
        this.syncFlag = 'false'
        console.log(this.fileList)
        const taskJoinUser = this.fileList[this.index].taskJoinUser
        const id = taskJoinUser.id ? taskJoinUser.id : ''
        httpRequestApi.delFile(id, 'CLOSE').success(res => {
          console.log(res)
          this.fileList[this.index].taskJoinUser.fileStatus = 'CLOSE'
          this.$apply()
          wx.showToast({
            title: '成功',
            icon: 'success',
            duration: 2000
          })
        })
        this.$apply()
      },
      hide () {
        this.slectFlag = !this.slectFlag
        this.syncFlag = 'false'
        this.$apply()
      }
    }

    onLoad () {
      console.log(this.syncFlag)
    }
  }
</script>