You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
177 lines
4.5 KiB
177 lines
4.5 KiB
5 years ago
|
// pages/user/profile/index.js
|
||
|
|
let app = getApp();
|
||
|
|
import util from "../../../utils/util"
|
||
|
|
import WeCropper from '../../../we-cropper/we-cropper.min.js';
|
||
|
|
const device = wx.getSystemInfoSync(),rect = wx.getMenuButtonBoundingClientRect(); // 获取设备信息
|
||
|
|
const ratio = 750 / device.windowWidth;
|
||
|
|
const width = device.windowWidth // 示例为一个与屏幕等宽的正方形裁剪框
|
||
|
|
let height = device.windowHeight - ((rect.top - device.statusBarHeight) * 2 + rect.height);
|
||
|
|
Page({
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 页面的初始数据
|
||
|
|
*/
|
||
|
|
data: {
|
||
|
|
today:"2020-10-11",
|
||
|
|
sexes:['男','女'],
|
||
|
|
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
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 生命周期函数--监听页面加载
|
||
|
|
*/
|
||
|
|
onLoad: function (options) {
|
||
|
|
const {
|
||
|
|
cropperOpt
|
||
|
|
} = this.data,that = this;
|
||
|
|
this.cropper = new WeCropper(cropperOpt);
|
||
|
|
let today = new Date();
|
||
|
|
this.setData({
|
||
|
|
today:util.formatDate(today)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 插件通过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){
|
||
|
|
this.setData({
|
||
|
|
sexIndex:e.detail.value
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 自定义裁剪页面的布局中，可以重新选择图片
|
||
|
|
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) {
|
||
|
|
let userid= wx.getStorageSync('jstrip_userid');
|
||
|
|
wx.uploadFile({
|
||
|
|
url: 'https://api.jszhwlpt.com/guns-cloud-file/fileFront/upload', //这里是上传的服务器地址
|
||
|
|
filePath: tempFilePath,
|
||
|
|
header:{
|
||
|
|
userId: userid,
|
||
|
|
Authorization: wx.getStorageSync('jstrip_token'),
|
||
|
|
},
|
||
|
|
formData:{
|
||
|
|
appName:"miniprogram",
|
||
|
|
fileType:0,
|
||
|
|
userId: userid,
|
||
|
|
},
|
||
|
|
name: "file",
|
||
|
|
success: function (res) {
|
||
|
|
console.log(res)
|
||
|
|
var res = JSON.parse(res.data);
|
||
|
|
let userInfo = that.data.userInfo
|
||
|
|
userInfo.headimgurl = res.data.fileFinalUrl;
|
||
|
|
that.updateInfo({headimgurl:res.data.fileFinalUrl}).then(res=>{
|
||
|
|
wx.hideLoading();
|
||
|
|
})
|
||
|
|
that.setData({
|
||
|
|
showCropper: false,
|
||
|
|
userInfo: userInfo
|
||
|
|
})
|
||
|
|
},
|
||
|
|
fail:function(res){
|
||
|
|
wx.hideLoading();
|
||
|
|
console.log('err',res)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
// 拿到裁剪后的图片路径的操作
|
||
|
|
} else {
|
||
|
|
console.log('获取图片地址失败，请稍后重试')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 生命周期函数--监听页面初次渲染完成
|
||
|
|
*/
|
||
|
|
onReady: function () {
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 生命周期函数--监听页面显示
|
||
|
|
*/
|
||
|
|
onShow: function () {
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 生命周期函数--监听页面隐藏
|
||
|
|
*/
|
||
|
|
onHide: function () {
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 生命周期函数--监听页面卸载
|
||
|
|
*/
|
||
|
|
onUnload: function () {
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
||
|
|
*/
|
||
|
|
onPullDownRefresh: function () {
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 页面上拉触底事件的处理函数
|
||
|
|
*/
|
||
|
|
onReachBottom: function () {
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 用户点击右上角分享
|
||
|
|
*/
|
||
|
|
onShareAppMessage: function () {
|
||
|
|
|
||
|
|
}
|
||
|
|
})
|