弹窗适应iphone 5

尺寸安装按钮事件

Album/js/conf/data.js

@@ -7,6 +7,7 @@ export const DetailbtnArea = []
 export const ContentbtnArea = []
 export const setpriceArea = []
 export const SetPriceBtnArea = []
+export const TopArea = []
 export const SearchButtonArea = []
 
 export const CloseBtnArea = []
@@ -25,5 +26,9 @@ export const page = {
 export const modalCloseBtnArea = []
 
 
+export const ProductBuyModalBtnArea = []
+export const ProductSizeModalBtnArea = []
+
+
 export const triggerMoveDelta = 30 //触发滑动操作的移动距离
 export const homepage_page_size = 6 //触发滑动操作的移动距离

Album/js/draw/ContactModal.js

@@ -1,10 +1,13 @@
 import drawText from '../util/drawText.js'
-import drawImage from '../util/drawImage.js'
+import drawImage, { drawScaleImage } from '../util/drawImage.js'
 import Modal from './Modal'
 
 export default class ContactModal extends Modal {
   constructor(context, seller_name = '', seller_phone = '', seller_addr = '') {
     super()
+    if (screenWidth < 1334) {
+      this.scale = 0.8;
+    }
     this.bg_pop_win = 'images/contact_popup/bg_win@2x.png'
     this.context = context
     this.seller_name = seller_name
@@ -14,24 +17,28 @@ export default class ContactModal extends Modal {
   }
   drawContent = () => {
     let ctx = this.context
+    let win_d = this.win_dimension
 
-    drawImage('images/contact_popup/h_line@2x.png', screenWidth / 2, this.win_dimension.endY - 250, 'center').then((dimension) => {
-      drawImage('images/contact_popup/avatar@2x.png', dimension.startX, this.win_dimension.startY + 200, 'middle').then((a_dimension) => {
+    drawScaleImage('images/contact_popup/h_line@2x.png', screenWidth / 2, win_d.startY + win_d.height * 0.63, 'center', this.scale).then((dimension) => {
+      drawScaleImage('images/contact_popup/avatar@2x.png', dimension.startX, win_d.startY + win_d.height * 0.39, 'middle', this.scale).then((a_dimension) => {
         // 信息
-        let isFinish = false
+        let middle = a_dimension.startY + a_dimension.height / 2
+
         drawText('姓名   ' + this.seller_name, a_dimension.endX + font_size, a_dimension.startY + font_size / 2)
         drawText('电话   ' + this.seller_phone, a_dimension.endX + font_size, a_dimension.endY - font_size / 2, 'bottom')
-        drawText('联系', dimension.endX - font_size, this.win_dimension.startY + 200-2, 'right bottom')
-        drawText('商家', dimension.endX - font_size, this.win_dimension.startY + 200+2, 'right top').then((t_dimension) => {
-          drawImage('images/contact_popup/icon_phone@2x.png', t_dimension.startX - font_size * 3, this.win_dimension.startY + 200, 'right,middle').then()
+        drawText('联系', dimension.endX - font_size, middle - 2, 'right bottom')
+        drawText('商家', dimension.endX - font_size, middle + 2, 'right top').then((t_dimension) => {
+          drawScaleImage('images/contact_popup/icon_phone@2x.png', t_dimension.startX - font_size * 3, middle, 'right,middle', this.scale).then()
         })
         //地址
-        drawImage('images/contact_popup/icon_addr@2x.png', a_dimension.startX + a_dimension.width / 2, this.win_dimension.startY + 440, 'center,middle')
-        drawText('地址：   ' + this.seller_addr, a_dimension.endX + font_size, this.win_dimension.startY + 440, 'middle')
-        drawText('路线', dimension.endX - font_size, this.win_dimension.startY + 440 - 2, 'right bottom')
-        drawText('导航', dimension.endX - font_size, this.win_dimension.startY + 440 + 2, 'right top').then((t_dimension) => {
-          drawImage('images/contact_popup/icon_location@2x.png', t_dimension.startX - font_size * 3, this.win_dimension.startY + 440, 'right,middle')
+        drawScaleImage('images/contact_popup/icon_addr@2x.png', a_dimension.startX + a_dimension.width / 2, win_d.startY + win_d.height * 0.8, 'center,middle', this.scale).then((l_dimension) => {
+          var middle = l_dimension.startY + l_dimension.height / 2
+          drawText('地址：   ' + this.seller_addr, a_dimension.endX + font_size, middle, 'middle')
+          drawText('路线', dimension.endX - font_size, middle - 2, 'right bottom')
+          drawText('导航', dimension.endX - font_size, middle + 2, 'right top').then((t_dimension) => {
+            drawScaleImage('images/contact_popup/icon_location@2x.png', t_dimension.startX - font_size * 3, middle, 'right,middle', this.scale)
 
+          })
         })
       })
     })

Album/js/draw/HelpModal.js

@@ -5,6 +5,9 @@ import Modal from './Modal'
 export default class HelpModal extends Modal {
   constructor(context, data) {
     super()
+    if (screenWidth < 1334) {
+      this.scale = 0.8;
+    }
     this.bg_pop_win = 'images/agent/bg_help@2x.png'
     this.context = context
     this.data = data

Album/js/draw/Modal.js

@@ -1,18 +1,16 @@
-import drawImage from '../util/drawImage.js'
+import drawImage, { drawScaleImage } from '../util/drawImage.js'
 import { modalCloseBtnArea } from '../conf/data.js'
 
 export default class Modal {
   constructor() {
-    // if (!this.bg_pop_win) {
-    //   throw new Error('need set bg_pop_win property in sub-class')
-    // }
+    this.scale = 1
   }
   draw = () => {
     // this.prev_context = this.context.getImageData(offsetX, 0, screenWidth, screenHeight)
     //mask 
     drawImage('images/popup/bg_mask@2x.png', 0, 0, screenWidth, screenHeight).then(() => {
       // win
-      drawImage(this.bg_pop_win, screenWidth / 2, screenHeight / 2, 'center middle').then((dimension) => {
+      drawScaleImage(this.bg_pop_win, screenWidth / 2, screenHeight / 2, 'center middle', this.scale).then((dimension) => {
         this.win_dimension = dimension
         drawImage('images/popup/btn_close@2x.png', dimension.endX - 20, dimension.startY, 'right').then((dimension) => {
           modalCloseBtnArea[0] = {...dimension}

Album/js/draw/PriceModal.js

@@ -3,6 +3,7 @@ import drawImage from '../util/drawImage.js'
 import Modal from './Modal'
 import { SetPriceBtnArea } from '../conf/data.js'
 
+let modal_center
 export default class PriceModal extends Modal {
   constructor(context, data) {
     super()
@@ -13,21 +14,23 @@ export default class PriceModal extends Modal {
   drawContent = () => {
     let ctx = this.context
     let next
-    let startX = this.win_dimension.startX + 13;
+    let startX = this.win_dimension.startX;
     let startY = 160 + 76;
-    drawText(this.data.name, startX + this.win_dimension.width / 2, startY + font_size * 3, 'center')
-    drawText((this.data.price || '0') + ' ¥', startX + this.win_dimension.width / 2, startY + font_size * 5, 'center').then((dimension) => {
+    modal_center = startX + this.win_dimension.width / 2
+    drawText(this.data.name, modal_center, startY + font_size * 3, 'center')
+    drawText('¥' + (this.data.price || '0'), modal_center, startY + font_size * 5, 'center').then((dimension) => {
       this.price_dimension = SetPriceBtnArea[0] = {...dimension}
     })
-    drawImage('images/agent/btn_save@2x.png', startX + this.win_dimension.width / 2, 590 - font_size * 2, 'center,bottom').then((dimension) => {
+    drawImage('images/agent/btn_save@2x.png', modal_center, startY + font_size * 7, 'center,top').then((dimension) => {
       SetPriceBtnArea[1] = {...dimension}
     })
   }
   updatePrice(price) {
+    let price_m = this.price_dimension
     this.context.fillStyle = '#fdedac'
-    this.context.fillRect(this.price_dimension.startX, this.price_dimension.startY, this.price_dimension.width, this.price_dimension.height)
-    drawText((price || '0') + ' ¥', this.price_dimension.startX, this.price_dimension.startY).then((dimension) => {
-      this.price_dimension = SetPriceBtnArea[0] = { ...dimension }
+    this.context.fillRect(price_m.startX, price_m.startY, price_m.width, price_m.height)
+    drawText('¥' + (price || '0'), modal_center, price_m.startY, 'center').then((dimension) => {
+      price_m = SetPriceBtnArea[0] = { ...dimension }
     })
   }
 }

Album/js/draw/ProductModal.js

@@ -1,65 +1,109 @@
 import drawText from '../util/drawText.js'
-import drawImage from '../util/drawImage.js'
+import drawImage, { drawVScrollImage, drawScaleImage } from '../util/drawImage.js'
 import Modal from './Modal'
+import { ProductBuyModalBtnArea } from '../conf/data.js'
 
 export default class ProductModal extends Modal {
   constructor(context, goodDetail) {
     super()
+    if (screenWidth < 1334) {
+      this.scale = 0.8;
+    }
     this.bg_pop_win = 'images/product_popup/bg_win@2x.png'
     this.context = context
     this.goodDetail = goodDetail
     this.btn_acitve = 'info'
+    this.detail_image_offsetY = 0
+    this.detail_image_point = {}
   }
   drawContent = () => {
     let ctx = this.context
     let next
-    let startX = this.win_dimension.startX + 13;
-    let startY = this.win_dimension.startY + 76;
-    let btn_active_offsetX = 25
-    let btn_active_offsetY = 7
+    let startX = this.win_dimension.startX + 13 * this.scale;
+    let startY = this.win_dimension.startY + 76 * this.scale;
+    let btn_active_offsetX = 25 * this.scale
+    let btn_active_offsetY = 7 * this.scale
     let active_btn_startX = startX - btn_active_offsetX
     let active_btn_startY
     let context_startX
     let context_width
     
     //详情
-    next = drawImage('images/product_popup/btn_info@2x.png', startX, startY).then((dimension) => {
+    next = drawScaleImage('images/product_popup/btn_info@2x.png', startX, startY, null, this.scale).then((dimension) => {
       if (this.btn_acitve === 'info') {
         active_btn_startY = dimension.startY - btn_active_offsetY
       }
       context_startX = dimension.endX
-      context_width= this.win_dimension.width - 26 - dimension.width
-      return drawImage('images/product_popup/btn_combin@2x.png', startX, dimension.endY)
+      context_width = this.win_dimension.width - 26 * this.scale - dimension.width
+      ProductBuyModalBtnArea[0] = {...dimension}
+      return drawScaleImage('images/product_popup/btn_combin@2x.png', startX, dimension.endY, null, this.scale)
     }).then((dimension) => {
       if (this.btn_acitve === 'combin') {
         active_btn_startY = dimension.startY - btn_active_offsetY
       }
-      return drawImage('images/product_popup/btn_buy@2x.png', startX, dimension.endY)
+      ProductBuyModalBtnArea[1] = { ...dimension }
+      return drawScaleImage('images/product_popup/btn_buy@2x.png', startX, dimension.endY, null, this.scale)
     }).then((dimension) => {
       if (this.btn_acitve === 'buy') {
         active_btn_startY = dimension.startY - btn_active_offsetY
       }
+
+      ProductBuyModalBtnArea[2] = { ...dimension }
       if (this.goodDetail.is_favorite) {
-        return drawImage('images/product_popup/btn_fav_active@2x.png', startX, this.win_dimension.endY - 13, 'bottom')
+        return drawScaleImage('images/product_popup/btn_fav_active@2x.png', startX, this.win_dimension.endY - 13, 'bottom', this.scale)
       } else {
-        return drawImage('images/product_popup/bg_btn@2x.png', dimension.startX, this.win_dimension.endY - 13, 'bottom').then((dimension) => {
-          return drawImage('images/product_popup/btn_fav@2x.png', dimension.startX + dimension.width / 2, this.win_dimension.endY - 13 - dimension.height / 2, 'center middle')
+        return drawScaleImage('images/product_popup/bg_btn@2x.png', dimension.startX, this.win_dimension.endY - 13, 'bottom', this.scale).then((dimension) => {
+          return drawScaleImage('images/product_popup/btn_fav@2x.png', dimension.startX + dimension.width / 2, this.win_dimension.endY - 13 - dimension.height / 2, 'center middle', this.scale)
         })
       }
+    }).then((dimension) => {
+      if (this.btn_acitve === 'buy') {
+        active_btn_startY = dimension.startY - btn_active_offsetY
+      }
+
+      ProductBuyModalBtnArea[3] = { ...dimension }
     })
 
     //商品图
     next = next.then(() => {
-      return drawImage(
+      return drawVScrollImage(
         this.goodDetail.detail,
+        0,
+        0,
         context_startX,
         startY,
         context_width,
-        this.win_dimension.height - 76 - 13)
+        this.win_dimension.height - 76 * this.scale - 13 * this.scale)
     })
     next = next.then((dimension) => {
-      next = drawImage('images/product_popup/btn_' + this.btn_acitve + '_active@2x.png', active_btn_startX, active_btn_startY)
+      this.detail_image_point = {...dimension}
+      next = drawScaleImage('images/product_popup/btn_' + this.btn_acitve + '_active@2x.png', active_btn_startX, active_btn_startY, null, this.scale)
     })
 
   }
+  scroll = (x1, y1, x2, y2) => {
+    let p = this.detail_image_point
+    if (x1 > p.startX && x1 < p.endX && y1 > p.startY && y1 < p.endY &&
+        x2 > p.startX && x2 < p.endX && y2 > p.startY && y2 < p.endY) {
+      let scroll_height = y1 - y2
+      let offsetY = this.detail_image_offsetY + scroll_height
+      if (offsetY < 0) {
+        offsetY = 0
+      } else if (offsetY > p.fullHeight-p.height) {
+        offsetY = p.fullHeight - p.height
+      }
+      this.detail_image_offsetY = offsetY
+      return drawVScrollImage(
+        this.goodDetail.detail,
+        0,
+        offsetY,
+        p.startX,
+        p.startY,
+        p.width,
+        p.height).then((dimension) => {
+          this.detail_image_point = {...dimension}
+          return dimension
+        })
+    }
+  }
 }

Album/js/draw/SizeModal.js

@@ -1,57 +1,72 @@
 import drawText from '../util/drawText.js'
-import drawImage from '../util/drawImage.js'
-import Modal from './Modal'
+import drawImage, {drawScaleImage} from '../util/drawImage.js'
+import Modal from './Modal.js'
+import { ProductSizeModalBtnArea } from '../conf/data.js'
 
 export default class SizeModal extends Modal {
-  constructor(context, goodDetail) {
+  constructor(context, goodDetail, btn_active) {
     super()
+    if (screenWidth < 1334) {
+      this.scale = 0.8;
+    }
     this.bg_pop_win = 'images/size_popup/bg_win@2x.png'
     this.context = context
     this.goodDetail = goodDetail
-    this.btn_acitve = 'size'
+    this.btn_acitve = btn_active
   }
   drawContent = () => {
     let ctx = this.context
     let next
-    let startX = this.win_dimension.startX + 13;
-    let startY = this.win_dimension.startY + 76;
-    let btn_active_offsetX = 25
-    let btn_active_offsetY = 7
+    let startX = this.win_dimension.startX + 13 * this.scale;
+    let startY = this.win_dimension.startY + 76 * this.scale;
+    let btn_active_offsetX = 25 * this.scale
+    let btn_active_offsetY = 7 * this.scale
     let active_btn_startX = startX - btn_active_offsetX
     let active_btn_startY
     let context_startX
     let context_width
     
     //
-    next = drawImage('images/size_popup/btn_size@2x.png', startX, startY).then((dimension) => {
+    next = drawScaleImage('images/size_popup/btn_size@2x.png', startX, startY, null, this.scale).then((dimension) => {
       if (this.btn_acitve === 'size') {
         active_btn_startY = dimension.startY - btn_active_offsetY
       }
+      ProductSizeModalBtnArea[0] = {...dimension}
       context_startX = dimension.endX
-      context_width= this.win_dimension.width - 26 - dimension.width
-      return drawImage('images/size_popup/btn_pic@2x.png', startX, dimension.endY)
+      context_width = this.win_dimension.width - 26 * this.scale - dimension.width
+      return drawScaleImage('images/size_popup/btn_pic@2x.png', startX, dimension.endY, null, this.scale)
     }).then((dimension) => {
       if (this.btn_acitve === 'pic') {
         active_btn_startY = dimension.startY - btn_active_offsetY
       }
-      return drawImage('images/size_popup/btn_video@2x.png', startX, dimension.endY)
+      ProductSizeModalBtnArea[1] = { ...dimension }
+      return drawScaleImage('images/size_popup/btn_video@2x.png', startX, dimension.endY, null, this.scale)
     }).then((dimension) => {
       if (this.btn_acitve === 'video') {
         active_btn_startY = dimension.startY - btn_active_offsetY
       }
+      ProductSizeModalBtnArea[2] = { ...dimension }
     })
 
     //商品图
     next = next.then(() => {
+      let image_url
+      if (this.btn_acitve === 'size') {
+        image_url = this.goodDetail.upload_img
+      } else if (this.btn_acitve === 'pic') {
+        image_url = this.goodDetail.attr
+      } else if (this.btn_acitve === 'video') {
+        image_url = this.goodDetail.attr
+      }
       return drawImage(
         this.goodDetail.upload_img,
         context_startX,
         startY,
         context_width,
-        this.win_dimension.height - 76 - 13)
+        this.win_dimension.height - 89 * this.scale)
     })
     next = next.then((dimension) => {
-      next = drawImage('images/size_popup/btn_' + this.btn_acitve + '_active@2x.png', active_btn_startX, active_btn_startY)
+      next = drawScaleImage('images/size_popup/btn_' + this.btn_acitve + '_active@2x.png', active_btn_startX, active_btn_startY, null, this.scale)
     })
 
   }

Album/js/draw/base.js

@@ -1,5 +1,13 @@
 import drawImage from '../util/drawImage.js'
-import { FLDsource, FLDbtnArea, FLDbtnAreaOffset, SLDArea, SearchButtonArea, ExitBtnArea } from '../conf/data.js'
+import {
+FLDsource,
+FLDbtnArea,
+FLDbtnAreaOffset,
+SLDArea,
+TopArea,
+SearchButtonArea,
+ExitBtnArea
+} from '../conf/data.js'
 import drawText from '../util/drawText.js';
 
 let header_height
@@ -20,6 +28,7 @@ function basePage(context, serachTerm, isAgent, active_category, active_style, s
 function header(context, serachTerm) {
   return drawImage('images/homepage/bg_top@2x.png', 0, 0, screenWidth).then((dimension) => {
     header_height = dimension.height
+    TopArea[0] = dimension
     return drawText('关闭', 20, header_height / 2, 'middle')
   }).then((dimension) => {
     ExitBtnArea[0] = {...dimension}

Album/js/draw/details.js

@@ -3,24 +3,26 @@ import { DetailbtnArea } from '../conf/data.js'
 let loadingDown = false
 export default class Details {
   showDetails(context, image, text, price) {
-    context.clearRect(0, 0, screenWidth, screenHeight)
 
     //商品大图
-    drawImage(image, 0, 0, screenWidth, screenHeight).then(function(){
+    return drawImage(image, 0, 0, screenWidth, screenHeight).then(function(){
       // dock
       wx.hideLoading()
       let dock_width = 1334;
       let dock_offset_y = screenHeight - 90;
-      drawImage('images/detail/bg_buttom@2x.png', screenWidth / 2, (screenHeight - 70), 'center').then(function () {
+
+      return drawImage('images/detail/bg_buttom@2x.png', screenWidth / 2, (screenHeight - 70), 'center').then(function () {
 
         // bg top
         let top_height = 90
-        drawImage('images/detail/bg_top@2x.png', 0, 0, screenWidth, top_height).then(function () {
+        let next
+        next = drawImage('images/detail/bg_top@2x.png', 0, 0, screenWidth, top_height).then(function () {
           //编号
           let font_size = 28
           let text_offset_y = top_height / 2
           let icon_offset_y = (top_height - 50) / 2
-          drawImage('images/detail/icon_label@2x.png', 160, icon_offset_y)
+          let next
+          next = drawImage('images/detail/icon_label@2x.png', 160, icon_offset_y)
           context.textAlign = 'start';
           context.textBaseline = 'middle';
           context.font = font_size + "px Arial"
@@ -28,11 +30,16 @@ export default class Details {
           context.fillText(text, 160 + 58 + 16, text_offset_y)
           //单价
           if (price != '') {
-            drawImage('images/detail/icon_price@2x.png', screenWidth / 2 - 100, icon_offset_y)
+            next = next.then(() => {
+              return drawImage('images/detail/icon_price@2x.png', screenWidth / 2 - 100, icon_offset_y)
+            })
             context.fillText('单价：¥' + price, screenWidth / 2 - 30, text_offset_y)
           }
           //在线画册
-          drawImage('images/detail/txt_online_album@2x.png', screenWidth - 30, top_height / 2, 'right middle')
+          next = next.then(() => {
+            return drawImage('images/detail/txt_online_album@2x.png', screenWidth - 30, top_height / 2, 'right middle')
+          })
+          return next;
         })
 
         let peer_dock_width = dock_width / 5
@@ -48,27 +55,31 @@ export default class Details {
         context.fillText('尺寸安装图', first_dock_offset_x + 3 * peer_dock_width, dock_offset_y + 55)
 
         //按钮
-        drawImage('images/detail/btn_back@2x.png', 30, screenHeight - 15, 'bottom').then(function (dimension) {
+        next = next.then(() => {
+          return drawImage('images/detail/btn_back@2x.png', 30, screenHeight - 15, 'bottom')
+        }).then((dimension) => {
           DetailbtnArea[0] = { ...DetailbtnArea[0], ...dimension }
-        })
-        drawImage('images/detail/btn_share@2x.png', first_dock_offset_x, screenHeight - font_size * 1.3, 'center bottom').then(function(dimension) {
-          DetailbtnArea[1] = { ...DetailbtnArea[1], ...dimension}
-        })
-        drawImage('images/detail/btn_call@2x.png', first_dock_offset_x + 1 * peer_dock_width, screenHeight - font_size * 1.3, 'center bottom').then(function (dimension) {
+          return drawImage('images/detail/btn_share@2x.png', first_dock_offset_x, screenHeight - font_size * 1.3, 'center bottom')
+        }).then(function (dimension) {
+          DetailbtnArea[1] = { ...DetailbtnArea[1], ...dimension }
+          return drawImage('images/detail/btn_call@2x.png', first_dock_offset_x + 1 * peer_dock_width, screenHeight - font_size * 1.3, 'center bottom')
+        }).then(function (dimension) {
           DetailbtnArea[2] = { ...DetailbtnArea[2], ...dimension }
-        })
-        drawImage('images/detail/btn_buy@2x.png', first_dock_offset_x + 2 * peer_dock_width, screenHeight - font_size * 1.3, 'center bottom').then(function (dimension) {
+          return drawImage('images/detail/btn_buy@2x.png', first_dock_offset_x + 2 * peer_dock_width, screenHeight - font_size * 1.3, 'center bottom')
+        }).then(function (dimension) {
           DetailbtnArea[3] = { ...DetailbtnArea[3], ...dimension }
-        })
-        drawImage('images/detail/btn_size@2x.png', first_dock_offset_x + 3 * peer_dock_width, screenHeight - font_size * 1.3, 'center bottom').then(function (dimension) {
+          return drawImage('images/detail/btn_size@2x.png', first_dock_offset_x + 3 * peer_dock_width, screenHeight - font_size * 1.3, 'center bottom')
+        }).then(function (dimension) {
           DetailbtnArea[4] = { ...DetailbtnArea[4], ...dimension }
-        })
-        drawImage('images/detail/nav_left@2x.png', 20, screenHeight / 2, 'middle').then(function (dimension) {
+          return drawImage('images/detail/nav_left@2x.png', 20, screenHeight / 2, 'middle')
+        }).then(function (dimension) {
           DetailbtnArea[5] = { ...DetailbtnArea[5], ...dimension }
-        })
-        drawImage('images/detail/nav_right@2x.png', screenWidth - 20, screenHeight / 2, 'right middle').then(function (dimension) {
+          return drawImage('images/detail/nav_right@2x.png', screenWidth - 20, screenHeight / 2, 'right middle')
+        }).then(function (dimension) {
           DetailbtnArea[6] = { ...DetailbtnArea[6], ...dimension }
+          return dimension
         })
+        return next
         
       })
     })

Album/js/draw/homepage.js

@@ -0,0 +1,4 @@
+
+module.exports = Hompage = (context) => {
+  
+}

Album/js/main.js

@@ -1,7 +1,5 @@
 import loading from './draw/loading.js'
 import { basePage } from './draw/base.js'
-import FLD from './draw/FirstLevelDirectory.js'
-import SLD from './draw/SecondLevelDirectory.js'
 import Content from './draw/content.js'
 import Details from './draw/details.js'
 import setPrice from './draw/price.js'
@@ -16,7 +14,6 @@ import HelpModal from './draw/HelpModal.js';
 var url = 'https://t6.9026.com/api/album/cat?parent_id=0&store_id=1'//初始顶级目录url
 var SLDsource = []//二级目录对象列表
 var GoodsSource = []//商品对象列表
-var AllSource = []//所有商品对象
 var GoodsDetail//商品详情
 var flag1 = 0//通过flag1来判断现在处于哪一个顶级目录，然后利用flag1传参数获取该顶级目录下的二级目录信息
 var flag2 = 0//通过flag1来判断现在处于哪一个二级目录，然后利用flag2传参数获取该顶级目录下的商品列表
@@ -24,19 +21,9 @@ var flag3 = 0//通过flag3来判断选择的是哪一个商品，然后获取它
 var flag4 = 0//价格设置参考参数
 var flag5 = 0//风格菜单选中状态
 
-//是否为iPhoneX
-let isiPhoneX
 //定义画布
-//let canvas = wx.createCanvas()
 let context
 
-//中间商品列表显示区绘制辅助变量
-let imgx = 0
-let imgy = 0
-let imgX = 0
-let imgY = 0
-let imgyy = 0
-
 //定义按钮区域
 //一级目录按钮区域
 import {
@@ -48,10 +35,13 @@ import {
   ContentbtnArea,
   SLDArea,
   setpriceArea,
+  TopArea,
   SearchButtonArea,
   SetPriceBtnArea,
   page,
   modalCloseBtnArea,
+  ProductBuyModalBtnArea,
+  ProductSizeModalBtnArea,
   triggerMoveDelta,
   homepage_page_size
 } from './conf/data.js'
@@ -61,19 +51,9 @@ let current_page = page.homepage
 //二级目录按钮区域
 let SLDbtnArea = []
 
-let CA = []
-let DA = []
-let SA = []
-
-
-//搜索按钮
-let pageArea = []
-//尺寸安装图片转换界面
-let attrArea = []
-
-let sp = []
 let priceModal
-
+let productBuyModal
+let isTouchMoving = false
 
 GameGlobal.isiPhoneX = false
 let res = wx.getSystemInfoSync()
@@ -103,33 +83,10 @@ function init() {
   context.fillStyle = '#fff'
   context.fillRect(0, 0, screenWidth * drawRatio, screenHeight * drawRatio)
   
-  if (isiPhoneX) {
-    imgx = (screenWidth - 240 - 35) / 3
-    imgy = (screenHeight - 118) / 3
-  } else {
-    imgx = (screenWidth - 180) / 3
-    imgy = (screenHeight - 118) / 3
-  }
-
-  imgX = imgx
-  imgY = imgy
-  imgyy = (screenHeight - 95) / 9
-
-  //详情界面按钮区域
-  var DA = [{ startX: 0, startY: screenHeight - 50, endX: 50, endY: screenHeight }, { startX: screenWidth / 2 - 200, startY: screenHeight - 35, endX: screenWidth / 2 - 110, endY: screenHeight - 12 }, { startX: screenWidth / 2 - 100, startY: screenHeight - 35, endX: screenWidth / 2 - 10, endY: screenHeight - 12 }, { startX: screenWidth / 2, startY: screenHeight - 35, endX: screenWidth / 2 + 90, endY: screenHeight - 12 }, { startX: screenWidth / 2 + 100, startY: screenHeight - 35, endX: screenWidth / 2 + 190, endY: screenHeight - 12 }, { startX: 10, startY: screenHeight / 2 - 15, endX: 40, endY: screenHeight / 2 + 15 }, { startX: screenWidth - 40, startY: screenHeight / 2 - 15, endX: screenWidth - 10, endY: screenHeight / 2 + 15 }]
-  //搜索按钮
-  pageArea = [{ startX: screenWidth - 50, startY: screenHeight - 30, endX: screenWidth, endY: screenHeight }, { startX: screenWidth - 50, startY: screenHeight - 65, endX: screenWidth, endY: screenHeight - 35 }]
-  //尺寸安装图片转换界面
-  attrArea = [{ startX: (screenWidth - (screenHeight - 100) * 1.778) / 2, startY: 30, endX: screenWidth / 2, endY: 60 }, { startX: screenWidth / 2, startY: 30, endX: (screenWidth + (screenHeight - 100) * 1.778) / 2 - 30, endY: 60 }, { startX: (screenWidth + (screenHeight - 100) * 1.778) / 2 - 30, startY: 30, endX: (screenWidth + (screenHeight - 100) * 1.778) / 2, endY: 60 }]
-
-  sp = [{ startX: screenWidth / 2 - 150, startY: screenHeight / 2 - 80, endX: screenWidth / 2 + 150, endY: screenHeight / 2 }, { startX: screenWidth / 2 - 40, startY: screenHeight / 2 + 30, endX: screenWidth / 2 + 40, endY: screenHeight / 2 + 70 },]
   showLoading()
 }
 init()
 
-//定义目录选中状态
-let FLDstatus = false
-let SLDstatus = false
 //定义是否在详情界面状态
 let Detailstatus = false
 //是否隐藏了按钮
@@ -193,7 +150,7 @@ function reStart() {
   reset()//清空之前屏幕上的绘制内容，减少缓存占用，及信息重叠
   if (current_page === page.homepage || current_page === page.set_price) {
     //绘制两个侧边栏
-    basePage(context, KeyWord, isAgent, flag1, flag5, setprice).then(({height}) => {
+    return basePage(context, KeyWord, isAgent, flag1, flag5, setprice).then(({height}) => {
       if (current_page === page.homepage) {
         new Content(GoodsSource, product_page_index, height).draw()
       } else {
@@ -208,10 +165,10 @@ function reStart() {
       let img = new Image()
       img.src = GoodsDetail.detail_pic
       if (Buttonstatus == false) {
-        dt.showDetails(context, GoodsDetail.detail_pic, GoodsDetail.name, GoodsDetail.price)
+        return dt.showDetails(context, GoodsDetail.detail_pic, GoodsDetail.name, GoodsDetail.price)
       }
       else {
-        drawImage(GoodsDetail.detail_pic, 0, 0, screenWidth, screenHeight)
+        return drawImage(GoodsDetail.detail_pic, 0, 0, screenWidth, screenHeight)
       }
 
     } catch (e) {
@@ -238,6 +195,20 @@ wx.onTouchStart(((e) => {
   }
 
 }))
+wx.onTouchMove((e) =>{
+  var endX = e.changedTouches[0].clientX * 2 - offsetX
+  var endY = e.changedTouches[0].clientY * 2
+  switch (current_page) {
+
+    case page.product_buy_modal:
+      handleProductBuyModalMoveEvents(startx, starty, endX, endY)
+      startx = endX
+      starty = endY
+      break;
+  }
+
+})
+
 //滑动响应函数
 wx.onTouchEnd(((e) => {
   var endX = e.changedTouches[0].clientX * 2 - offsetX
@@ -284,9 +255,11 @@ wx.onTouchEnd(((e) => {
         break;
       case page.product_buy_modal:
         handleModalCloseModal(endX, endY)
+        handleProductBuyModalEvents(endX, endY)
         break;
       case page.product_size_modal:
         handleModalCloseModal(endX, endY)
+        handleProductSizeModalEvents(endX, endY)
         break;
     }
   }
@@ -370,12 +343,13 @@ function handelExitEvents (x, y) {
 }
 function handleHomepageEvents(x, y) {
   //右边一级目录控制
-  if (x >= FLDbtnArea[0].startX) {
+  if (x >= FLDbtnArea[0].startX && y > TopArea[0].endY) {
     for (let i = 0, len = FLDbtnArea.length; i < len; i++) {
       if (x >= FLDbtnArea[i].startX
         && x <= FLDbtnArea[i].endX
         && y >= FLDbtnArea[i].startY
         && y <= FLDbtnArea[i].endY) {
+        KeyWord = ''
         for (let i in FLDbtnArea) {//点击该按钮的时候，它变为活跃状态status=true，而其他所有按钮变为非活跃状态status=false
           FLDbtnArea[i].status = false
         }
@@ -388,16 +362,17 @@ function handleHomepageEvents(x, y) {
         flag5 = 0//风格重置为新品
         status = 2
         //FLDbtnArea[btn].status = true
-        current_page = page.homepage
+        // current_page = page.homepage
         getFLDsource(callback1, url)//重绘
       }
     }
-  } else if (x <= SLDArea[0].endX) {
+  } else if (x <= SLDArea[0].endX && y > TopArea[0].endY) {
   //左边二级目录控制
     for (let i = 0; i < SLDArea.length; i++) {
       let d = SLDArea[i]
+      KeyWord = ''
       if (d && x >= d.startX && x <= d.endX && y >= d.startY && y <= d.endY) {
-        current_page = page.homepage
+        // current_page = page.homepage
         if (i === 0) { //新品上市
           product_page_index = 0
           flag2 = 0
@@ -421,6 +396,7 @@ function handleHomepageEvents(x, y) {
             setMobile = false
             if (setprice == true) { //退出报价
               setprice = false
+              current_page = page.homepage
               reStart()
             } else {
               current_page = page.set_price
@@ -440,7 +416,7 @@ function handleHomepageEvents(x, y) {
         }
       }
     }
-  } else if (y <= SearchButtonArea[0].startY) {
+  } else if (y <= TopArea[0].endY) {
     //搜索
     if (x >= SearchButtonArea[0].startX
       && x <= SearchButtonArea[0].endX
@@ -519,7 +495,7 @@ function handleProductHomepageEvents(x, y) {
      for (let i = 0; i < DetailbtnArea.length; i++) {
        let d = DetailbtnArea[i]
        if (x >= d.startX && x <= d.endX && y >= d.startY && y <= d.endY) {
-         if (i === 0) {
+         if (i === 0) {  //返回
            Detailstatus = false
            current_page = page.homepage
            reStart() //重绘
@@ -532,13 +508,14 @@ function handleProductHomepageEvents(x, y) {
          } else if (i === 2) {//联系商家
            current_page = page.product_contact_modal
            let tel = GoodsDetail.mobile
-           new ContactModal(context, GoodsDetail.name, tel, GoodsDetail.addr).draw()
+           new ContactModal(context, FactoryName, tel, GoodsDetail.addr).draw()
          } else if (i === 3) {//详情&购买
            current_page = page.product_buy_modal
-           new ProductModal(context, GoodsDetail).draw()
+           productBuyModal = new ProductModal(context, GoodsDetail)
+           productBuyModal.draw()
          } else if (i === 4) {//尺寸&安装
            current_page = page.product_size_modal
-           new SizeModal(context, GoodsDetail).draw()
+           new SizeModal(context, GoodsDetail, 'size').draw()
          } else if (i === 5) {//上一张
            Buttonstatus = false
            if (flag3 <= 0) {
@@ -638,6 +615,55 @@ function handleSetPriceModalEvents(x, y) {
     })
   }
 }
+let i = 0
+function handleProductBuyModalMoveEvents(x1, y1, x2, y2) {
+  let p
+  if (!isTouchMoving) {
+    isTouchMoving = true
+    i++
+    console.log("start:" + i)
+    p = productBuyModal.scroll(x1, y1, x2, y2)
+    if (p) {
+      p.then(() => {
+        isTouchMoving = false
+        console.log("end:" + i)
+      })
+    } else {
+      isTouchMoving = false
+      console.log("end:" + i)
+    }
+  }
+}
+function handleProductBuyModalEvents(x, y) {
+  let d = ProductBuyModalBtnArea[3]
+  if (x >= d.startX && x <= d.endX && y >= d.startY && y <= d.endY) {
+    console.error('没有收藏接口')
+  }
+}
+function handleProductSizeModalEvents(x, y) {
+  let d0 = ProductSizeModalBtnArea[0]
+  let d1 = ProductSizeModalBtnArea[1]
+  let d2 = ProductSizeModalBtnArea[2]
+  if (x >= d0.startX && x <= d0.endX && y >= d0.startY && y <= d0.endY) {
+    reStart().then(() => {
+
+      new SizeModal(context, GoodsDetail, 'size').draw()
+    })
+  } else if (x >= d1.startX && x <= d1.endX && y >= d1.startY && y <= d1.endY) {
+    reStart().then(() => {
+
+      new SizeModal(context, GoodsDetail, 'pic').draw()
+    })
+  } else if (x >= d2.startX && x <= d2.endX && y >= d2.startY && y <= d2.endY) {
+    reStart().then(() => {
+
+      new SizeModal(context, GoodsDetail, 'video').draw()
+    })
+  }
+}
+
+
+
 //清除之前绘制内容
 function reset() {
   context.clearRect(0, 0, screenWidth, screenHeight)
@@ -776,12 +802,17 @@ function getGoodsDetail(callback4, GoodsSource) {
     Detailstatus = false
     // reStart()
   }
+    wx.showLoading({
+      title: 'loading',
+    })
+
   wx.request({
     url: ur,
     data: {
     },
     method: 'GET',
     success: function (res) {
+      wx.hideLoading()
       try {
         GoodsDetail = {}
         let test = JSON.stringify(res.data)
@@ -800,14 +831,6 @@ function getGoodsDetail(callback4, GoodsSource) {
   })
 }
 function callback4(res) {
-  if (GoodsDetail == null) {
-    // wx.hideLoading()
-  } else {
-    wx.showLoading({
-      title: 'loading',
-    })
-    //console.log(GoodsDetail)
-  }
   if (Detailstatus == true)//如果没获取到详情，说明所点击区域没有元素，不进行重绘
     reStart()
 }
@@ -848,7 +871,7 @@ function UserLogin() {
                 getFLDsource(callback1, url)
               }
               else {
-                isAgent = false
+                isAgent = true
                 var test = wx.getLaunchOptionsSync()
                 console.log(test)
                 agent_id = test.query.agent_id

Album/js/util/drawImage.js

@@ -10,7 +10,7 @@ export default function drawImage(img, x1, y1, w, h, align, zoom) {
                 align = w;
                 w = null;
                 h = null;
-            } 
+            }
             w = w || width
             h = h || height
             if (!!align && align.indexOf('center') > -1) {
@@ -40,4 +40,78 @@ export default function drawImage(img, x1, y1, w, h, align, zoom) {
         }
         image.src = img
     })
+}
+export function drawVScrollImage(img, offsetX, offsetY, x, y, w, h, align) {
+    return new Promise(function (resolve, reject) {
+
+        let image = wx.createImage()
+        image.onload = function (e) {
+            let context = canvas.getContext('2d')
+            let width = image.width
+            let height = image.height
+            if (typeof w === 'string') {
+                align = w;
+                w = null;
+                h = null;
+            }
+            w = w || width
+            h = h || height
+            if (!!align && align.indexOf('center') > -1) {
+                x = x - (w / 2)
+            } else if (!!align && align.indexOf('right') > -1) {
+                x = x - w
+            }
+            if (!!align && align.indexOf('middle') > -1) {
+                y = y - (h / 2)
+            } else if (!!align && align.indexOf('bottom') > -1) {
+                y = y - h
+            }
+
+            context.drawImage(image, offsetX, offsetY, width, width * h / w, x, y, w, h)
+            resolve({
+                startX: x,
+                startY: y,
+                endX: x + w,
+                endY: y + h,
+                width: w,
+                height: h,
+                fullHeight: height * w / width
+            })
+        }
+        image.src = img
+    })
+}
+
+export const drawScaleImage = function drawImage(img, x1, y1, align, scale) {
+    return new Promise(function (resolve, reject) {
+
+        let image = wx.createImage()
+        image.onload = function (e) {
+            let context = canvas.getContext('2d')
+            let width = image.width
+            let height = image.height
+            let w = width * scale
+            let h = height * scale
+            if (!!align && align.indexOf('center') > -1) {
+                x1 = x1 - (w / 2)
+            } else if (!!align && align.indexOf('right') > -1) {
+                x1 = x1 - w
+            }
+            if (!!align && align.indexOf('middle') > -1) {
+                y1 = y1 - (h / 2)
+            } else if (!!align && align.indexOf('bottom') > -1) {
+                y1 = y1 - h
+            }
+            context.drawImage(image, x1, y1, w, h)
+            resolve({
+                startX: x1,
+                startY: y1,
+                endX: x1 + w,
+                endY: y1 + h,
+                width: w,
+                height: h
+            })
+        }
+        image.src = img
+    })
 }