在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
图片预览 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() { } }) |
请发表评论