madeImg.js 8.0 KB

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