// pages/user/profile/index.js let app = getApp(); import util from "../../../utils/util" import WeCropper from '../../../we-cropper/we-cropper.min.js'; import userApi from "../../../utils/https/user" let device = wx.getSystemInfoSync(),rect = wx.getMenuButtonBoundingClientRect(); // 获取设备信息 const width = device.windowWidth // 示例为一个与屏幕等宽的正方形裁剪框 let menuHeight = (rect.top - device.statusBarHeight) * 2 + rect.height + device.statusBarHeight; let height = device.windowHeight - menuHeight; Page({ /** * 页面的初始数据 */ data: { menuWidth:width - rect.right + rect.width + 6, info:null, today:"2020-10-11", sexes:['男','女'], birthday:"", sexIndex:0, cropperOpt: { id: 'cropper', // 用于手势操作的canvas组件标识符 targetId: 'targetCropper', // 用于用于生成截图的canvas组件标识符 pixelRatio: device.pixelRatio, // 传入设备像素比 width, // 画布宽度 height:height, // 画布高度 src: '', scale: 2.5, // 最大缩放倍数 zoom: 8, // 缩放系数 cut: { x: (width - 320) / 2, // 裁剪框x轴起点 y: (height - 320) / 2, // 裁剪框y轴起点 width: 320, // 裁剪框宽度 height: 320 // 裁剪框高度 } }, showCropper:false, avatar:"" }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { let { cropperOpt } = this.data,that = this; cropperOpt.height = device.screenHeight - menuHeight; cropperOpt.cut.y = (height - 320) / 2; console.log(cropperOpt,menuHeight,device) let today = new Date(); this.setData({ today:util.formatDate(today), cropperOpt:cropperOpt }) this.cropper = new WeCropper(cropperOpt); }, // 插件通过touchStart、touchMove、touchEnd方法来接收事件对象。 touchStart(e) { console.log(e) this.cropper.touchStart(e) }, touchMove(e) { this.cropper.touchMove(e) }, touchEnd(e) { this.cropper.touchEnd(e) }, changeSex:function(e){ userApi.user_post("user/changeSex",{ sex:Number(e.detail.value)+1 }).then(res=>{ if(res.code==1){ this.setData({ sexIndex:e.detail.value }) wx.showToast({ title: '修改成功', icon: 'success' }) } }) }, bindDateChange:function(e){ let birthday = e.detail.value; userApi.user_post("user/changeBirthday",{ birthday:birthday }).then(res=>{ if(res.code==1){ this.setData({ birthday:birthday }) wx.showToast({ title: '修改成功', icon: 'success' }) } }) }, // 自定义裁剪页面的布局中,可以重新选择图片 uploadTap() { const self = this wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success(res) { const src = res.tempFilePaths[0] self.cropper.pushOrign(src) self.setData({ showCropper: true }) } }) }, // 生成图片 getCropperImage() { var that = this; wx.showLoading({ title: '加载中', mask: true }); this.cropper.getCropperImage(tempFilePath => { // tempFilePath 为裁剪后的图片临时路径 console.log(tempFilePath) if (tempFilePath) { wx.uploadFile({ url: 'https://api.cloud.sz-trip.com/api/pbservice.other/upload', //这里是上传的服务器地址 filePath: tempFilePath, header:{ token: wx.getStorageSync('jstrip_token'), }, name: "file", success: function (res) { console.log(res) var res = JSON.parse(res.data); let avatar = res.data.url; userApi.user_post("user/changeAvatar",{ avatarUrl:avatar }).then(res=>{ if(res.code==1){ wx.hideLoading(); that.setData({ showCropper: false, avatar: avatar }) } }) }, fail:function(res){ wx.hideLoading(); console.log('err',res) } }) // 拿到裁剪后的图片路径的操作 } else { console.log('获取图片地址失败,请稍后重试') } }) }, goOverview () { if (this.data.info && this.data.info.mobile) { wx.navigateTo({ url: '/subPackages/password/overview/overview', }) } else { wx.showToast({ title: '请先绑定手机号', icon: 'none' }) } }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { userApi.user_post("user/getMyInfo",{}).then(res=>{ this.setData({ info:res.data, avatar:res.data.avatar, birthday:res.data.birthday?res.data.birthday:"" }) if(res.data.gender==2){ this.setData({ sexIndex:1 }) } console.log(this.data.info) }) }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { } })