小程序使用wx.chooseMedia最新方法,可多选;可递增上传图片并反显,点击删除图片

js部分

Page({
  /**
   * 页面的初始数据
   */
  data: {
    wordMax: 300,
    imgList: [],
    item: "",
    disableButton: true, // 初始时按钮不可点击
    buttonBackground: "#D6DDEB"
  },

  /**
   * 获取输入框内容长度,并实时反馈长度。输入长度为0时提交按钮不可点击
   * 输入长度大于0时提交按钮改变背景颜色样式,并可点击
   */
  textInputs: function (e) {
    // 获取输入框的内容
    const value = e.detail.value;
    this.setData({ //更新内容缓存
      orderNote: e.detail.value
    })
    // 获取输入框内容的长度
    const len = parseInt(value.length);
    //最多字数限制
    if (len > this.data.wordMax) return;
    // 当输入框内容的长度大于最大长度限制(max)时,终止setData()的执行
    this.setData({
      currentWord: len //当前字数
    })

    if (len > 0) {
      this.setData({
        disableButton: false, //当内容长度大于0则可以点击
        buttonBackground: "#1F86FF",
      });
    } else {
      this.setData({
        disableButton: true, //当内容长度为0则不能点击
        buttonBackground: "#D6DDEB",
      })
    }
  },

  //点击按钮返回上级页面
  submit() {
    wx.navigateBack({
      delta: 1
    })
  },

  /**
   * 上传图片并反显,点击删除按钮可以删除指定图片
   */

  chooseSource: function () {
    wx.chooseMedia({
      count: 3,
      mediaType: ['image'], //文件类型
      sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], //可以指定来源是相册还是相机, 默认二者都有
      success: (res) => {
        const _this = this;
        // 返回选定照片的本地文件路径列表,tempFilePaths可以作为img标签的scr属性显示图片
        const imgList = res.tempFiles
        let tempFilePathsImg = _this.data.imgList
        // 获取当前已上传的图片的数组
        const tempFilePathsImgs = tempFilePathsImg.concat(imgList)
        //把新增图片添加到当前数组
        _this.setData({
          imgList: tempFilePathsImgs
        })
      },
    })
  },
  //删除图片
  deleteImg: function (e) {
    const _this = this;
    const imgList = _this.data.imgList;
    const index = e.currentTarget.dataset.index; //获取当前点击图片下标
    imgList.splice(index, 1)
    _this.setData({
      imgList
    })
  }

})

 wxml部分

<view class="feedback-wait">
  <view class="problem-description">
    问题反馈
  </view>
  <view class="text-box">
    <textarea class="content" placeholder='请输入你的问题' maxlength="{{wordMax}}" bindinput="textInputs">
    </textarea>
    <text class="current-word">{{currentWord|0}}/{{wordMax}}</text>
  </view>
  <view class="picture-position">
    <block wx:for="{{imgList}}" wx:key="item">
      <image src="{{item.tempFilePath}}" class="img-size-box" data-url="{{item}}" mode="scaleToFill">
        <image bindtap="deleteImg" data-index="{{index}}" class="picture-del" src="/imgs/feedback_picture_del.png" mode="aspectFit"></image>
      </image>
    </block>
    <button class="view-picture" bindtap="chooseSource" wx:if="{{imgList.length < 3}}">
      <image class="view-picture-add" src="/imgs/feedback_picture_add.png" mode="aspectFit"></image>
    </button>
  </view>

  <text class="text-content">上传图片(可上传0-3张图片)</text>
  <view class="content-line"></view>
  <button bindtap="submit" id="button-submit" style="background-color: {{buttonBackground}}; " disabled="{{disableButton}}">提交</button>
</view>

 less部分

page {
  background-color: #fff;
}

.feedback-wait {
  width: 750rpx;
  padding-left: 32rpx;

  .problem-description {
    font-size: 36rpx;
    font-weight: 600;
    color: #1b2026;
    margin-top: 16rpx;
  }

  .text-box {
    width: 686rpx;
    height: 272rpx;
    margin-top: 32rpx;
    border-radius: 8rpx;
    background: #F2F5FB;

    .current-word {
      font-size: 28rpx;
      color: gray;
      position: absolute;
      right: 72rpx;
      margin-top: 32rpx;
    }

    .content {
      width: 640rpx;
      height: 190rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #77818F;
      top: 32rpx;
      margin-left: 32rpx;
    }

  }

  .picture-position {
    width: 610rpx;
    height: 160rpx;
    display: flex;
    margin-top: 32rpx;

    .img-size-box {
      width: 158rpx;
      height: 160rpx;
      border-radius: 4rpx;
      margin-right: 16rpx;

      .picture-del {
        position: absolute;
        width: 22rpx;
        height: 22rpx;
        margin-top: -160rpx;
        margin-left: 136rpx;
      }
    }

    .view-picture {
      display: flex;
      justify-content: center;
      width: 158rpx;
      margin-left: 0rpx;
      border-radius: 4rpx;
      background: #F2F5FB;

      .view-picture-add {
        width: 60rpx;
        height: 60rpx;
        margin-top: 50rpx;
      }
    }
  }

  .text-content {
    font-size: 24rpx;
    font-weight: 500;
    margin-top: 16rpx;
    color: #1B2026;
  }

  .content-line {
    position: absolute;
    top: 90%;
    width: 750rpx;
    height: 1rpx;
    background: #1F2329D9;
  }

  #button-submit {
    position: absolute;
    width: 622rpx;
    color: #fff;
    top: 92%;
    left: 65rpx;
    border-radius: 12rpx;
    font-size: 30rpx;
    font-weight: 600;
  }
}

  • 13
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值