// pages/album/album.js // 获取显示区域长宽 const device = wx.getSystemInfoSync() const W = device.windowWidth const H = device.windowHeight - 50 let cropper = require('../../component/welCropper/welCropper.js'); console.log(device) const HOST = require('../../utils/const.js').apiUrl; import httpRequestApi from '../../utils/APIRequest'; Page({ /** * 页面的初始数据 */ data: { stateFlag: true, photoList: [], photoBoxToken: [] }, //更改相册 setState: function () { this.setData({ stateFlag: !this.data.stateFlag }) const photoBox = this.data.stateFlag ? 'OPEN' : 'PRIVACY'; wx.setStorageSync('photoBox', photoBox); httpRequestApi.setPhoto(photoBox).success(res => { const photoBoxToken = this.data.stateFlag ? [] : res.data.data.photoBoxToken.toString().split(''); this.setData({ photoBoxToken, }) }); }, //上传相册 addPhoto: function (e) { let that = this let mode = e.currentTarget.dataset.mode //如果用户没有填写信息不能上传图片 const userInfo = wx.getStorageSync('userInfo'); if(!userInfo.data.data.mobileNo || !userInfo.data.data.avatar) { wx.navigateTo({ url: '/pages/setName/setName' }) return false; }; //提示图片上传不能超过15张 if(this.data.photoList.length >= 15) { wx.showModal({ title: '温馨提示', content: '只能上传15张图片' }) return false; }; wx.chooseImage({ count: 9, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: (res) => { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 const tempFilePaths = res.tempFilePaths; //启动上传等待中... wx.showToast({ title: '正在上传...', icon: 'loading', mask: true, duration: 1000 }) /* //调用图片截取方法 that.showCropper({ src: tempFilePaths[0], mode: mode, sizeType: ['original', 'compressed'], //'original'(default) | 'compressed' callback: (res) => { if (mode == 'rectangle') { // wx.previewImage({ // current: res, // urls: [res] // }) that.hideCropper() //隐藏,项目里是点击完成就上传,所以如果回调是上传,那么隐藏掉就行了,不用previewImage wx.showToast({ title: '玩命加载中...', icon: 'loading', mask: true, duration: 1000 }) //上传文件 wx.uploadFile({ url: HOST + 'wx/file/upload', filePath: res, name: 'uploadfile_ant', header: { "Content-Type": "multipart/form-data" }, success: (res) => { const data = JSON.parse(res.data); if(data.success) { //上传文件成功后放到相册里 httpRequestApi.addPhotoList({ path: data.data }).success((res) => { if(res.data.success) { //再次调用相册列表 that.getPhotoList(); } }).fail(() => { wx.showModal({ title: '错误提示', content: '图片上传到相册失败' }) }); } }, fail: function (res) { wx.hideToast(); wx.showModal({ title: '错误提示', content: '上传图片失败' }) } }); } else { wx.showModal({ title: '', content: JSON.stringify(res), }) } } }) */ /* wx.navigateTo({ url: '/pages/clipPhoto/clipPhoto?imageUrl=' + tempFilePaths[0] }) */ const that = this; tempFilePaths.forEach(item => { //上传文件 wx.uploadFile({ url: HOST + 'wx/file/upload', filePath: item, name: 'uploadfile_ant', header: { "Content-Type": "multipart/form-data" }, success: (res) => { const data = JSON.parse(res.data); if(data.success) { //上传文件成功后放到相册里 httpRequestApi.addPhotoList({ path: data.data }).success((res) => { if(res.data.success) { //再次调用相册列表 that.getPhotoList(); } }).fail(() => { wx.showModal({ title: '错误提示', content: '图片上传到相册失败' }) }); } }, fail: function (res) { wx.hideToast(); wx.showModal({ title: '错误提示', content: '上传图片失败' }) } }); }); } }) }, //预览图片 preview: function ({ currentTarget }) { const index = currentTarget.dataset.index; const imageUrl = []; for (let item of this.data.photoList) { imageUrl.push(item.path) } console.log(this.data.photoList[index].path) wx.previewImage({ urls: imageUrl, current: this.data.photoList[index].path }) }, //删除相册 removePhoto: function ({ currentTarget }) { httpRequestApi.removePhotoList(currentTarget.dataset.id).success((res) => { console.log('删除册列表', res); if(res.data.success) { this.getPhotoList(); } }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this // 初始化组件数据和绑定事件 cropper.init.apply(that, [W, H]); //获取相册列表 this.getPhotoList(); //初始化相册是否加密 const photoBox = (wx.getStorageSync('photoBox') === 'OPEN' ? true : false); this.setData({ stateFlag: photoBox }) if(!photoBox) { httpRequestApi.setPhoto(wx.getStorageSync('photoBox')).success(res => { const photoBoxToken = this.data.stateFlag ? [] : res.data.data.photoBoxToken.toString().split(''); this.setData({ photoBoxToken, }) }); } }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, //获取相册列表 getPhotoList: function () { httpRequestApi.getPhotoList({ pageNo: 1, pageSize: 15 }).success((res) => { console.log('相册列表', res.data.data.list); this.setData({ photoList: res.data.data.list }) }) } })