// pages/customized/made/madeImg/madeImg.js import * as util from '../../../../utils/util.js' let app = getApp(); let host = app.globalData.servsers; // 请求的url Page({ /** * 页面的初始数据 */ data: { dataPositionObj: { //正面数据 top: 184, left: 305, width: 218, height: 218, }, propSize: { top: '5cm', right: '5cm', bottom: '5cm', left: '5cm', }, host: null, obverseImgObject: { '1': '/customized/images/customized/cup_black_big.png', /*正面 */ '2': '/customized/images/customized/cup_black_side.png', /*侧面面 */ '3': '/customized/images/customized/cup_black_handle.png', /*手柄 */ '4': '/customized/images/customized/cup_black_bottom.png', /*底部 */ }, fontContent: '可定制区域', madeImg: null, // 定制图 madeStatic: false, // 定制状态，表示是否已经定制了,false 表示没有定制 animationData: {}, //旋转动画 imageArray: [], //请求数据后的图片列表 imageId: null, // 用户选中图片的id imageSrc: null, // 选中图片后的路径 imgTouch: { isActive: '1', // 1表示是正面 src: null, x: 0, y: 0, clientX: 0, clientY: 0, width: null, // 图片的宽度 height: null, scale: 1, // 图片宽高比例 angle: 0, // 旋转度数 }, fontTouch:{},//文字对象 fontAnimationData:{}, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { let that = this that.animation = wx.createAnimation({ timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end" }) that.fontAnimation = wx.createAnimation({ timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end" }) if ('id' in options) { let cupNum = util.changeCup(options.id); let madeTouchImg = wx.getStorageSync('madeCupImgData' + options.id); if (madeTouchImg) { that.animation.rotate(madeTouchImg.angle).step(); that.setData({ imgTouch: madeTouchImg, animationData: this.animation.export(), dataPositionObj: cupNum.dataPositionObj, propSize: cupNum.propSize, madeStatic: true, }); } else { that.setData({ 'imgTouch.isActive': options.id, dataPositionObj: cupNum.dataPositionObj, propSize: cupNum.propSize }); } } }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { let that = this; that.setData({ host: host, }) }, /** * 生命周期函数--监听页面显示 */ onShow: function () { let that = this; that.getImgList(); that.getDataTouch(that) }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, touchstart(e){ this.fontTouchstart(e) }, touchmove(e){ this.fontTouchmove(e) }, // touch 事件 fontTouchstart(e) { //1.获取鼠标点击下去的 this.setData({ "imgTouch.clientX": e.touches[0].clientX - this.data.imgTouch.x, "imgTouch.clientY": e.touches[0].clientY - this.data.imgTouch.y }); console.log(this.data.imgTouch, "touch") }, fontTouchmove(e) { // 鼠标移动的位置 this.setData({ "imgTouch.x": e.changedTouches[0].clientX - this.data.imgTouch.clientX, "imgTouch.y": e.changedTouches[0].clientY - this.data.imgTouch.clientY }); // console.log(this.data.touch) }, imgDelete() { // 图片删除 let that = this; that.setData({ 'imgTouch.src': null, madeStatic: false, // 表示已经有图片 }) }, imgEnlarge(e) { let that = this; console.log(e.detail.value, 'eee') that.setData({ 'imgTouch.width': e.detail.value, 'imgTouch.height': e.detail.value / that.data.imgTouch.scale }) }, imgRotate(e) { // 旋转 this.animation.rotate(e.detail.value).step(); this.setData({ animationData: this.animation.export(), 'imgTouch.angle': e.detail.value }) }, getImgList() { // 根据userid 获取图片列表 // /queryCustomGoodsUserListByUserId wx.showLoading({ title: '加载中...', icon: 'none' }) let that = this wx.request({ url: host + '/queryImgListByPlaceIdAndGoodsId', data: { userId: app.globalData.user_id, customGoodsId: 1, // 商品id customGoodsImgPlaceId: that.data.imgTouch.isActive * 1 - 1 }, type: 'get', success(res) { console.log(res, '图片列表请求结束') that.setData({ imageArray: res.data }) }, complete() { wx.hideLoading() } }) }, uploadImg() { console.log('点击上传图片'); let that = this; wx.chooseImage({ success(res) { const tempFilePaths = res.tempFilePaths wx.uploadFile({ url: host + 'adminFileUpload', // 仅为示例，非真实的接口地址 filePath: tempFilePaths[0], name: 'file', formData: { file: tempFilePaths[0], userId: app.globalData.user_id, customGoodsId: wx.getStorageSync('detail').id, customGoodsImgPlaceId: that.data.imgTouch.isActive * 1 - 1 }, success(res) { console.log(res, '我上传完了') that.getImgList() } }) } }) }, selectImgBtn(e) { console.log('选中图片', e.currentTarget.dataset.id); this.setData({ imageId: e.currentTarget.dataset.id, imageSrc: e.currentTarget.dataset.src }) // 'touch.src': e.currentTarget.dataset.src, // madeStatic: true, // 表示已经有图片 // this.getScale(this, e.currentTarget.dataset.src); }, getScale(that, src) { // 获取图片的比例 wx.getImageInfo({ src: src, success: function (res) { console.log(res, "fff") that.setData({ 'imgTouch.width': that.data.dataPositionObj.width, 'imgTouch.height': res.height * that.data.dataPositionObj.width / res.width, 'imgTouch.scale': res.width / res.height, // 宽高比例 }) console.log(that.data.imgTouch) } }) }, addImg() { // 添加图片 let that = this; if (that.data.imageSrc) { that.setData({ 'imgTouch.src': that.data.imageSrc, madeStatic: true, // 表示已经有图片 }) that.getScale(that, that.data.imageSrc) } else { wx.showToast({ title: '您还没有选中图片', icon: 'none' }) } }, madeConfirm() { // 确认设计 if (this.data.madeStatic) { // 设计完成存储数据 wx.setStorageSync('madeCupImgData' + this.data.imgTouch.isActive, this.data.imgTouch); wx.navigateBack() // wx.redirectTo({ // url: '/customized/pages/made/made?id=' + this.data.touch.isActive // }) } else { wx.showToast({ title: '您还没有选择图片进行设计', icon: 'none' }) } }, getDataTouch(that) { let madeTouchFont = wx.getStorageSync('madeCupFontData' + that.data.imgTouch.isActive) console.log(madeTouchFont,"madeTouchFont") if (madeTouchFont) { console.log(that.fontAnimation,"that.fontAnimation") that.fontAnimation.rotate(madeTouchFont.angle).step(); that.setData({ fontAnimationData: that.fontAnimation.export(), fontTouch: madeTouchFont ? madeTouchFont : {}, madeStatic: true, }) } }, })