boxMadeImg.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  1. // pages/customized/made/madeImg/madeImg.js
  2. import * as util from '../../../../utils/util.js'
  3. let app = getApp();
  4. let host = app.globalData.servsers; // 请求的url
  5. Page({
  6. /**
  7. * 页面的初始数据
  8. */
  9. data: {
  10. dataPositionObj: {},
  11. propSize: {},
  12. host: null,
  13. obverseImgObject: {
  14. '5': '/customized/images/customized/box_white_big_1.png',
  15. /*正面 */
  16. '6': '/customized/images/customized/box_white_big_2.png',
  17. /*反面 */
  18. },
  19. fontContent: '可定制区域',
  20. madeImg: null, // 定制图
  21. madeStatic: false, // 定制状态,表示是否已经定制了,false 表示没有定制
  22. animationData: {}, //旋转动画
  23. imageArray: [], //请求数据后的图片列表
  24. imageId: null, // 用户选中图片的id
  25. imageSrc: null, // 选中图片后的路径
  26. imgTouch: {
  27. isActive: '5', // 1表示是正面
  28. src: null,
  29. x: 0,
  30. y: 0,
  31. clientX: 0,
  32. clientY: 0,
  33. width: null, // 图片的宽度
  34. height: null,
  35. scale: 1, // 图片宽高比例
  36. angle: 0, // 旋转度数
  37. },
  38. fontTouch:{},//文字对象
  39. fontAnimationData:{},
  40. },
  41. /**
  42. * 生命周期函数--监听页面加载
  43. */
  44. onLoad: function (options) {
  45. let that = this
  46. that.animation = wx.createAnimation({
  47. timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
  48. })
  49. that.fontAnimation = wx.createAnimation({
  50. timingFunction: 'step-start', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
  51. })
  52. if ('id' in options) {
  53. let cupNum = util.changeCup(options.id);
  54. let madeTouchImg = wx.getStorageSync('madeCupImgData' + options.id);
  55. if (madeTouchImg) {
  56. that.animation.rotate(madeTouchImg.angle).step();
  57. that.setData({
  58. imgTouch: madeTouchImg,
  59. animationData: this.animation.export(),
  60. dataPositionObj: cupNum.dataPositionObj,
  61. propSize: cupNum.propSize,
  62. madeStatic: true,
  63. });
  64. } else {
  65. that.setData({
  66. 'imgTouch.isActive': options.id,
  67. dataPositionObj: cupNum.dataPositionObj,
  68. propSize: cupNum.propSize
  69. });
  70. }
  71. }
  72. },
  73. /**
  74. * 生命周期函数--监听页面初次渲染完成
  75. */
  76. onReady: function () {
  77. let that = this;
  78. that.setData({
  79. host: host,
  80. })
  81. },
  82. /**
  83. * 生命周期函数--监听页面显示
  84. */
  85. onShow: function () {
  86. let that = this;
  87. that.getImgList();
  88. that.getDataTouch(that)
  89. },
  90. /**
  91. * 生命周期函数--监听页面隐藏
  92. */
  93. onHide: function () {
  94. },
  95. /**
  96. * 生命周期函数--监听页面卸载
  97. */
  98. onUnload: function () {
  99. },
  100. /**
  101. * 页面相关事件处理函数--监听用户下拉动作
  102. */
  103. onPullDownRefresh: function () {
  104. },
  105. /**
  106. * 页面上拉触底事件的处理函数
  107. */
  108. onReachBottom: function () {
  109. },
  110. /**
  111. * 用户点击右上角分享
  112. */
  113. onShareAppMessage: function () {
  114. },
  115. touchstart(e){
  116. this.fontTouchstart(e)
  117. },
  118. touchmove(e){
  119. this.fontTouchmove(e)
  120. },
  121. // touch 事件
  122. fontTouchstart(e) {
  123. //1.获取鼠标点击下去的
  124. this.setData({
  125. "imgTouch.clientX": e.touches[0].clientX - this.data.imgTouch.x,
  126. "imgTouch.clientY": e.touches[0].clientY - this.data.imgTouch.y
  127. });
  128. console.log(this.data.imgTouch, "touch")
  129. },
  130. fontTouchmove(e) {
  131. // 鼠标移动的位置
  132. this.setData({
  133. "imgTouch.x": e.changedTouches[0].clientX - this.data.imgTouch.clientX,
  134. "imgTouch.y": e.changedTouches[0].clientY - this.data.imgTouch.clientY
  135. });
  136. // console.log(this.data.touch)
  137. },
  138. imgDelete() { // 图片删除
  139. let that = this;
  140. that.setData({
  141. 'imgTouch.src': null,
  142. madeStatic: false, // 表示已经有图片
  143. })
  144. },
  145. imgEnlarge(e) {
  146. let that = this;
  147. console.log(e.detail.value, 'eee')
  148. that.setData({
  149. 'imgTouch.width': e.detail.value,
  150. 'imgTouch.height': e.detail.value / that.data.imgTouch.scale
  151. })
  152. },
  153. imgRotate(e) { // 旋转
  154. this.animation.rotate(e.detail.value).step();
  155. this.setData({
  156. animationData: this.animation.export(),
  157. 'imgTouch.angle': e.detail.value
  158. })
  159. },
  160. getImgList() { // 根据userid 获取图片列表
  161. // /queryCustomGoodsUserListByUserId
  162. wx.showLoading({
  163. title: '加载中...',
  164. icon: 'none'
  165. })
  166. let that = this
  167. wx.request({
  168. url: host + '/queryImgListByPlaceIdAndGoodsId',
  169. data: {
  170. customGoodsId: 6, // 商品id,白色箱子是6
  171. customGoodsImgPlaceId: that.data.imgTouch.isActive * 1 - 4
  172. },
  173. type: 'get',
  174. success(res) {
  175. console.log(res, '图片列表请求结束')
  176. that.setData({
  177. imageArray: res.data
  178. })
  179. },
  180. complete() {
  181. wx.hideLoading()
  182. }
  183. })
  184. },
  185. uploadImg() {
  186. console.log('点击上传图片');
  187. let that = this;
  188. wx.chooseImage({
  189. success(res) {
  190. const tempFilePaths = res.tempFilePaths
  191. wx.uploadFile({
  192. url: host + 'fileUpload', // 仅为示例,非真实的接口地址
  193. filePath: tempFilePaths[0],
  194. name: 'file',
  195. formData: {
  196. file: tempFilePaths[0],
  197. userId: app.globalData.user_id,
  198. imgStatus: 0, // 表示素材
  199. },
  200. success(res) {
  201. console.log(res, '我上传完了')
  202. that.getImgList()
  203. }
  204. })
  205. }
  206. })
  207. },
  208. selectImgBtn(e) {
  209. console.log('选中图片', e.currentTarget.dataset.id);
  210. this.setData({
  211. imageId: e.currentTarget.dataset.id,
  212. imageSrc: e.currentTarget.dataset.src
  213. })
  214. // 'touch.src': e.currentTarget.dataset.src,
  215. // madeStatic: true, // 表示已经有图片
  216. // this.getScale(this, e.currentTarget.dataset.src);
  217. },
  218. getScale(that, src) { // 获取图片的比例
  219. wx.getImageInfo({
  220. src: src,
  221. success: function (res) {
  222. console.log(res, "fff")
  223. that.setData({
  224. 'imgTouch.width': that.data.dataPositionObj.width,
  225. 'imgTouch.height': res.height * that.data.dataPositionObj.width / res.width,
  226. 'imgTouch.scale': res.width / res.height, // 宽高比例
  227. })
  228. console.log(that.data.imgTouch)
  229. }
  230. })
  231. },
  232. addImg() { // 添加图片
  233. let that = this;
  234. if (that.data.imageSrc) {
  235. that.setData({
  236. 'imgTouch.src': that.data.imageSrc,
  237. madeStatic: true, // 表示已经有图片
  238. })
  239. that.getScale(that, that.data.imageSrc)
  240. } else {
  241. wx.showToast({
  242. title: '您还没有选中图片',
  243. icon: 'none'
  244. })
  245. }
  246. },
  247. madeConfirm() {
  248. // 确认设计
  249. if (this.data.madeStatic) { // 设计完成存储数据
  250. wx.setStorageSync('madeCupImgData' + this.data.imgTouch.isActive, this.data.imgTouch);
  251. wx.navigateBack()
  252. // wx.redirectTo({
  253. // url: '/customized/pages/made/made?id=' + this.data.touch.isActive
  254. // })
  255. } else {
  256. wx.showToast({
  257. title: '您还没有选择图片进行设计',
  258. icon: 'none'
  259. })
  260. }
  261. },
  262. getDataTouch(that) {
  263. let madeTouchFont = wx.getStorageSync('madeCupFontData' + that.data.imgTouch.isActive)
  264. console.log(madeTouchFont,"madeTouchFont")
  265. if (madeTouchFont) {
  266. console.log(that.fontAnimation,"that.fontAnimation")
  267. that.fontAnimation.rotate(madeTouchFont.angle).step();
  268. that.setData({
  269. fontAnimationData: that.fontAnimation.export(),
  270. fontTouch: madeTouchFont ? madeTouchFont : {},
  271. madeStatic: true,
  272. })
  273. }
  274. },
  275. })