图片预览
wxml
<image src="{{baseUrl}}{{imgSrc}}" mode="widthFix" style="width:100%;" data-src="{{baseUrl}}{{imgSrc}}" bindtap=\'previewImage\'></image>
js
previewImage: function (e) { console.log(1); var current = e.target.dataset.src; //这里获取到的是一张本地的图片 wx.previewImage({ current: current,//需要预览的图片链接列表 urls: [current] //当前显示图片的链接 }) },
以下上传、删除图片
wxml
<!-- 评价 --> <view class=\'comment_box flexBetween\'> <image src=\'{{baseUrl}}{{orderInfo.thumb_img}}\' mode=\'aspectFill\' style=\'width: 100rpx;height:100rpx;\'></image> <view style=\'display:inline-block;margin-left:20rpx;\'> <view>满意度评价</view> <!-- 星星评价--> <view class="comment-right"> <block wx:for="{{[0, 1, 2, 3, 4]}}" wx:key=\'\'> <image wx:if="{{ index < starId }}" src="/images/common/comment01.png" bindtap="startTap" id="{{index}}"></image> <image wx:else src="/images/common/comment01_hui.png" bindtap="startTap" id="{{index}}"></image> </block> </view> </view> </view> <!-- 评价内容 --> <view class=\'comment_box\'> <textarea placeholder=\'亲! 留下你的评论吧~\' placeholder-style=\'color:#999;\' bindinput="bindContent"></textarea> <!-- 上传图片 --> <view class=\'chooseImg\'> <image wx:for="{{imagesList}}" wx:key="index" src=\'{{item}}\' mode=\'aspectFill\' style=\'width:210rpx;height:210rpx;\' data-index="{{index}}" bindlongtap="deleteImage"></image> <image wx:if="{{num < maxLength}}" src=\'/images/common/uploadImg.png\' mode=\'widthFix\' style=\'width:210rpx;\' bindtap=\'uploadImg\'></image> </view> </view> <!-- 提交评论 --> <view class=\'btnBox\'> <view class=\'submit_btn flexCenter\' bindtap="submitComment">发布</view> </view>
js
const app = getApp(); Page({ /** * 页面的初始数据 */ data: { baseUrl: app.globalData.baseUrl, starId: 0, //星级个数 imagesList: [], content: \'\', //评论内容 orderInfo: {}, //存放当前评价的商品信息 num: 0,//已上传的图片数量 maxLength: 6//允许上传的最大数量 }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { console.log(options); var orderInfo = JSON.parse(options.orderInfo); this.setData({ orderInfo: orderInfo, shop_id: options.shop_id }) }, /** * 点击星星评分 */ startTap: function(e) { this.setData({ starId: parseInt(e.currentTarget.id) + 1 }); }, // 更新评论内容 bindContent: function(e) { this.setData({ content: e.detail.value }) }, // 上传图片 uploadImg: function() { var that = this; let imagesList = []; let maxSize = 1024 * 1024; let flag = true; wx.chooseImage({ count: that.data.maxLength - that.data.imagesList.length, //最多可以选择的图片总数 sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机,默认二者都有 success: function(res) { wx.showToast({ title: \'正在上传...\', icon: \'loading\', mask: true, duration: 500 }) for (let i = 0; i < res.tempFiles.length; i++) { if (res.tempFiles[i].size > maxSize) { flag = false; console.log(111) wx.showModal({ content: \'图片太大,不允许上传\', showCancel: false, success: function(res) { if (res.confirm) { console.log(\'用户点击确定\') } } }); } } if (res.tempFiles.length > that.data.maxLength) { console.log(\'222\'); wx.showModal({ content: \'最多能上传\' + that.data.maxLength + \'张图片\', showCancel: false, success: function(res) { if (res.confirm) { console.log(\'确定\'); } } }) } if (flag == true && res.tempFiles.length <= that.data.maxLength) { that.setData({ imagesList: that.data.imagesList.concat(res.tempFilePaths), num: that.data.num + res.tempFiles.length }) } console.log(res); }, fail: function(res) { console.log(res); } }) }, /**删除图片 */ deleteImage: function (e) { var that = this; wx.showModal({ title: \'提示\', content: \'确定删除图片吗?\', success(res) { if (res.confirm) { var imagesList = that.data.imagesList; var index = e.currentTarget.dataset.index; imagesList.splice(index, 1); var num = that.data.num - 1 that.setData({ imagesList: imagesList, num: num, }); } else if (res.cancel) { console.log(\'用户点击取消\') } } }) }, // 提交评论 submitComment: function() { var that = this; if (that.data.starId == 0) { wx.showToast({ title: \'满意度评价不能为空\', icon: \'none\', duration: 2000 }); return false; } if (that.data.content.length <= 0) { wx.showToast({ title: \'评价内容不能为空\', icon: \'none\', duration: 2000 }); return false; } var url = app.globalData.reqUrl + \'shop_goods_evaluate/goods_evaluate\'; var params = { user_id: app.globalData.userId, order_number: this.data.orderInfo.shop_order_number, goods_id: this.data.orderInfo.goods_id, attr: this.data.orderInfo.attr, title: this.data.orderInfo.title, thumb_img: this.data.orderInfo.thumb_img, content: this.data.content, grade: this.data.starId, shop_id: this.data.shop_id } app.request.requestPostApi(url, params, this, this.successFun_goComment, this.failFun); }, successFun_goComment: function(res, selfObj) { var that = selfObj; console.log(res); if (res.code == 200) { var id = res.id; console.log(res); wx.showLoading({ title: \'上传中...\', icon: \'loading\' }) for (let i = 0; i < that.data.imagesList.length; i++) { wx.uploadFile({ url: app.globalData.reqUrl + \'shop_goods_evaluate/upload?id=\' + id, filePath: that.data.imagesList[i], name: \'uploadfile_ant\', header: { "Content-Type": "multipart/form-data" }, success: function(data) { console.log(data); if ((that.data.imagesList.length - 1) == i) { wx.hideLoading(); wx.showToast({ title: \'评价成功\', icon: \'none\', duration: 2000 }) that.setData({
starId: 0, //星级个数
imagesList: [],
content: \'\', //评论内容
orderInfo: {}, //存放当前评价的商品信息
num: 0,//已上传的图片数量
}); setTimeout(function() { wx.redirectTo({ url: \'/pages/orderList/orderList?status=all\', }) }, 2000) } }, fail: function(data) { console.log(data); } }); } }else { wx.showToast({ title: res.message, icon: \'none\' }) } }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { }, /** * 生命周期函数--监听页面显示 */ onShow: function() { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function() { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, /** * 用户点击右上角分享 */ onShareAppMessage: function() { } })