madeImg.js 6.6 KB

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