微信小程序仿淘宝申请界面中的“申请描述”
效果图：（上传照片功能、统计字数功能）
.wxml :
<view class="apply-describe"><view class="apply-des"><text class="describe-title">申请描述</text><text class="describe-text">还可以输入{{200-currentWordNumber|0}}字</text></view><view class='ui_uploader_cell'><view class="cu-bar"><textarea maxlength="-1" maxlength="200" disabled="{{modalName!=null}}" bindinput="textareaAInput" placeholder="请您详细描述具体原因"></textarea></view><view class='ui_uploader_item' wx:for="{{uploaderList}}" wx:key="index"><icon class='ui_uploader_item_icon' bindtap='clearImg' data-index="{{index}}" type="clear" size="20" color="red"/><image bindtap='showImg' data-index="{{index}}" src='{{item}}'></image></view><view class='ui_uploader' bindtap='upload' wx:if="{{showUpload}}"><image class="ui_uploder_photo" src="../../imgs/photo.png"></image><text class="ui_uploder_text">上传图片最多3张</text></view></view></view>
.wxss :
.apply-describe{width: 94%;height: 500rpx;margin-left: 20rpx;margin-top: 50rpx;background-color: rgb(234, 247, 199);border-radius: 10px 10px 10px 10px;}.apply-describe .apply-des{height: 90rpx;margin-top: 20rpx;line-height:90rpx ;}.apply-describe .apply-des .describe-title{font-size: 34rpx;margin-left: 29rpx;font-weight: bold;}.apply-describe .apply-des .describe-text{font-size: 25rpx;color: gray;margin-left: 330rpx;}.apply-describe .ui_uploader_cell {width: 93%;height: 370rpx;padding: 40rpx;margin-left: 24rpx;box-sizing: border-box;background-color: rgb(217, 238, 159);border-radius: 10px 10px 10px 10px;}.apply-describe .ui_uploader_cell .cu-bar textarea{height: 160rpx;width: 100%;font-size: 28rpx;margin-bottom: 30rpx;}.apply-describe .ui_uploader_cell .ui_uploader_item{float: left;position: relative;margin-right: 30rpx;margin-bottom: 30rpx;width: 120rpx;height: 120rpx;}.apply-describe .ui_uploader_cell .ui_uploader_item .ui_uploader_item_icon{position: absolute;right: -20rpx;top: -20rpx;background: #fff;border-radius: 50%;}.apply-describe .ui_uploader_cell .ui_uploader_item image {width: 90%;height: 90%;}.apply-describe .ui_uploader_cell .ui_uploader {/* float: left; *//* position: relative; */margin-right: 25rpx;margin-bottom: 25rpx;width: 120rpx;height: 120rpx;border: 2rpx dotted gray;border-radius: 10rpx;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;}.apply-describe .ui_uploader_cell .ui_uploader .ui_uploder_photo{width: 55rpx;height: 55rpx;margin-left: 30rpx;}.apply-describe .ui_uploader_cell .ui_uploader .ui_uploder_text{font-size: 20rpx;margin-left: 10rpx;margin-right: 10rpx;color: gray;}
.js :
Page({/*** 页面的初始数据*/data: {uploaderList: [],uploaderNum:0,showUpload:true},onLoad: function (options) {},// 删除图片clearImg:function(e){console.log(e);var nowList = [];//新数据var uploaderList = this.data.uploaderList;//原数据for (let i = 0; i < uploaderList.length;i++){if (i == e.currentTarget.dataset.index){continue;}else{nowList.push(uploaderList[i])}}this.setData({uploaderNum: this.data.uploaderNum - 1,uploaderList: nowList,showUpload: true})},//展示图片showImg:function(e){var that=this;wx.previewImage({urls: that.data.uploaderList,current: that.data.uploaderList[e.currentTarget.dataset.index]})},//上传图片upload: function(e) {var that = this;wx.chooseImage({count:3 - that.data.uploaderNum, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function(res) {console.log(res)// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片let tempFilePaths = res.tempFilePaths;let uploaderList = that.data.uploaderList.concat(tempFilePaths);if (uploaderList.length==3){that.setData({showUpload:false})}that.setData({uploaderList: uploaderList,uploaderNum: uploaderList.length,})}})},textareaAInput(e) {let value=e.detail.value;let len=parseInt(value.length);if(len>200) return;this.setData({currentWordNumber: len //当前字数 });this.setData({textareaAValue: e.detail.value})} })
