music

Album/js/conf/data.js

@@ -1,3 +1,4 @@
+export const ExitBtnArea = []
 export const FLDsource = []
 export const FLDbtnArea = []
 export const FLDbtnAreaOffset = {y: 0}
@@ -6,6 +7,7 @@ export const DetailbtnArea = []
 export const ContentbtnArea = []
 export const setpriceArea = []
 export const SetPriceBtnArea = []
+export const TopArea = []
 export const SearchButtonArea = []
 
 export const CloseBtnArea = []
@@ -24,5 +26,42 @@ export const page = {
 export const modalCloseBtnArea = []
 
 
+export const ProductBuyModalBtnArea = []
+export const ProductSizeModalBtnArea = []
+
+
 export const triggerMoveDelta = 30 //触发滑动操作的移动距离
-export const homepage_page_size = 6 //触发滑动操作的移动距离
+export const homepage_page_size = 6 //触发滑动操作的移动距离
+
+
+let _base_context
+export const setBaseContext = (context) => {
+  _base_context = context
+}
+export const getBaseContext = () => {
+  return _base_context
+}
+
+let _base_canvas
+export const setBaseCanvas = (canvas) => {
+  _base_canvas = canvas
+}
+export const getBaseCanvas = () => {
+  return _base_canvas
+}
+
+let _product_context
+export const setProductContext = (context) => {
+  _product_context = context
+}
+export const getProductContext = () => {
+  return _product_context
+}
+
+let _product_canvas
+export const setProductCanvas = (canvas) => {
+  _product_canvas = canvas
+}
+export const getProductCanvas = () => {
+  return _product_canvas
+}

Album/js/draw/ContactModal.js

@@ -1,12 +1,17 @@
 import drawText from '../util/drawText.js'
-import drawImage from '../util/drawImage.js'
+import drawImage, { drawScaleImage } from '../util/drawImage.js'
 import Modal from './Modal'
+import { getProductCanvas, getProductContext } from '../conf/data.js'
 
 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.canvas = getProductCanvas()
+    this.context = getProductContext()
     this.seller_name = seller_name
     this.seller_phone = seller_phone
     this.seller_phone = seller_phone
@@ -14,25 +19,33 @@ 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) => {
+    return drawScaleImage(ctx, 'images/contact_popup/h_line@2x.png', screenWidth / 2, win_d.startY + win_d.height * 0.63, 'center', this.scale).then((dimension) => {
+      return drawScaleImage(ctx, '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
-        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()
-        })
+        let middle = a_dimension.startY + a_dimension.height / 2
+        let promises = []
+        promises.push(drawText(ctx, '姓名   ' + this.seller_name, a_dimension.endX + font_size, a_dimension.startY + font_size / 2))
+        promises.push(drawText(ctx, '电话   ' + this.seller_phone, a_dimension.endX + font_size, a_dimension.endY - font_size / 2, 'bottom'))
+        promises.push(drawText(ctx, '联系', dimension.endX - font_size, middle - 2, 'right bottom'))
+        promises.push(drawText(ctx, '商家', dimension.endX - font_size, middle + 2, 'right top').then((t_dimension) => {
+          return drawScaleImage(ctx, 'images/contact_popup/icon_phone@2x.png', t_dimension.startX - font_size * 3, middle, 'right,middle', this.scale)
+        }))
         //地址
-        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')
+        promises.push(drawScaleImage(ctx, '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
 
-        })
+          let promises = []
+          promises.push(drawText(ctx, '地址：   ' + this.seller_addr, a_dimension.endX + font_size, middle, 'middle'))
+          promises.push(drawText(ctx, '路线', dimension.endX - font_size, middle - 2, 'right bottom'))
+          promises.push(drawText(ctx, '导航', dimension.endX - font_size, middle + 2, 'right top').then((t_dimension) => {
+            return drawScaleImage(ctx, 'images/contact_popup/icon_location@2x.png', t_dimension.startX - font_size * 3, middle, 'right,middle', this.scale)
+
+          }))
+          return Promise.all(promises)
+        }))
+        return Promise.all(promises)
       })
     })
 

Album/js/draw/HelpModal.js

@@ -1,12 +1,17 @@
-import drawText from '../util/drawText.js'
-import drawImage from '../util/drawImage.js'
 import Modal from './Modal'
+import { getBaseCanvas, getBaseContext } from '../conf/data.js'
 
 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.canvas = getBaseCanvas()
+    this.context = getBaseContext()
+
     this.data = data
   }
   drawContent = () => {

Album/js/draw/Modal.js

@@ -1,24 +1,27 @@
-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)
+    let ctx = this.context
     //mask 
-    drawImage('images/popup/bg_mask@2x.png', 0, 0, screenWidth, screenHeight).then(() => {
+    return drawImage(ctx, '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) => {
+      return drawScaleImage(ctx, 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) => {
+        return drawImage(ctx, 'images/popup/btn_close@2x.png', dimension.endX - 20, dimension.startY, 'right').then((dimension) => {
           modalCloseBtnArea[0] = {...dimension}
+          return dimension
         })
-        this.drawContent()
       })
+    }).then(()=>{
+
+      return this.drawContent()
+    }).then(() => {
+      GameGlobal.canvas.getContext('2d').drawImage(this.canvas, 0, 0)
     })
   }
   drawContent = () => {

Album/js/draw/PriceModal.js

@@ -1,33 +1,42 @@
 import drawText from '../util/drawText.js'
 import drawImage from '../util/drawImage.js'
 import Modal from './Modal'
-import { SetPriceBtnArea } from '../conf/data.js'
+import { SetPriceBtnArea, getBaseCanvas, getBaseContext } from '../conf/data.js'
 
+let modal_center
 export default class PriceModal extends Modal {
   constructor(context, data) {
     super()
     this.bg_pop_win = 'images/agent/bg_price@2x.png'
-    this.context = context
+    this.canvas = getBaseCanvas()
+    this.context = getBaseContext()
     this.data = data
   }
   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
+    let promises = []
+    promises.push(drawText(ctx, this.data.name, modal_center, startY + font_size * 3, 'center'))
+    promises.push(drawText(ctx, '¥' + (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) => {
+      return dimension
+    }))
+    promises.push(drawImage(ctx, 'images/agent/btn_save@2x.png', modal_center, startY + font_size * 7, 'center,top').then((dimension) => {
       SetPriceBtnArea[1] = {...dimension}
-    })
+      return dimension
+    }))
+    return Promise.all(promises)
   }
   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)
+    return drawText(this.context, '¥' + (price || '0'), modal_center, price_m.startY, 'center').then((dimension) => {
+      price_m = SetPriceBtnArea[0] = { ...dimension }
+      return dimension
     })
   }
 }

Album/js/draw/ProductModal.js

@@ -1,65 +1,141 @@
 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, getProductCanvas, getProductContext } 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.canvas = getProductCanvas()
+    this.context = getProductContext()
     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(ctx, '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(ctx, '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(ctx, '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(ctx, 'images/product_popup/bg_btn@2x.png', dimension.startX, this.win_dimension.endY - 13, 'bottom', this.scale).then((dimension) => {
+
+          drawScaleImage(ctx, 'images/product_popup/btn_fav_active@2x.png', startX, this.win_dimension.endY - 13, 'bottom', this.scale)
+          return dimension
+        })
       } 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(ctx, 'images/product_popup/bg_btn@2x.png', dimension.startX, this.win_dimension.endY - 13, 'bottom', this.scale).then((dimension) => {
+          drawScaleImage(ctx, 'images/product_popup/btn_fav@2x.png', dimension.startX + dimension.width / 2, this.win_dimension.endY - 13 - dimension.height / 2, 'center middle', this.scale)
+          return dimension
         })
       }
+    }).then((dimension) => {
+      if (this.btn_acitve === 'buy') {
+        active_btn_startY = dimension.startY - btn_active_offsetY
+      }
+
+      ProductBuyModalBtnArea[3] = { ...dimension }
+      return dimension
     })
 
     //商品图
     next = next.then(() => {
-      return drawImage(
+      return drawVScrollImage(
+        ctx,
         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}
+      return drawScaleImage(ctx, 'images/product_popup/btn_' + this.btn_acitve + '_active@2x.png', active_btn_startX, active_btn_startY, null, this.scale)
     })
+    return next
 
   }
+  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.context,
+        this.goodDetail.detail,
+        0,
+        offsetY,
+        p.startX,
+        p.startY,
+        p.width,
+        p.height
+      ).then((dimension) => {
+        this.detail_image_point = {...dimension}
+        GameGlobal.canvas.getContext('2d').drawImage(this.canvas, 0, 0)
+        return dimension
+      })
+    }
+  }
+
+  // 收藏按钮更新
+  fav = () => {
+    let ctx = this.context
+    let p = ProductBuyModalBtnArea[3]
+
+    let next
+    next = drawScaleImage(ctx, 'images/product_popup/bg_btn@2x.png', p.startX, p.startY, '', this.scale).then((dimension) => {
+      if (this.goodDetail.is_favorite) {
+        return drawScaleImage(ctx, 'images/product_popup/btn_fav_active@2x.png', dimension.startX + dimension.width / 2, this.win_dimension.endY - 13 - dimension.height / 2, 'center middle', this.scale)
+      } else {
+        return drawScaleImage(ctx, 'images/product_popup/btn_fav@2x.png', dimension.startX + dimension.width / 2, this.win_dimension.endY - 13 - dimension.height / 2, 'center middle', this.scale)
+      }
+    })
+
+    next.then(() => {
+      GameGlobal.canvas.getContext('2d').drawImage(this.canvas, 0, 0)
+    })
+  }
 }

Album/js/draw/SizeModal.js

@@ -1,58 +1,77 @@
 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, getProductCanvas, getProductContext } 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.canvas = getProductCanvas()
+    this.context = getProductContext()
     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(ctx, '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(ctx, '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(ctx, '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 }
+      return 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(
+        ctx,
         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)
+      return drawScaleImage(ctx, 'images/size_popup/btn_' + this.btn_acitve + '_active@2x.png', active_btn_startX, active_btn_startY, null, this.scale)
     })
-
+    return next
   }
 }

Album/js/draw/base.js

@@ -1,5 +1,15 @@
 import drawImage from '../util/drawImage.js'
-import { FLDsource, FLDbtnArea, FLDbtnAreaOffset, SLDArea, SearchButtonArea, CloseBtnArea } from '../conf/data.js'
+import {
+FLDsource,
+FLDbtnArea,
+FLDbtnAreaOffset,
+SLDArea,
+TopArea,
+SearchButtonArea,
+ExitBtnArea,
+setBaseCanvas,
+setBaseContext
+} from '../conf/data.js'
 import drawText from '../util/drawText.js';
 
 let header_height
@@ -8,41 +18,56 @@ let header_height
 画两边的灰色选择栏和下一页按钮
 */
 function basePage(context, serachTerm, isAgent, active_category, active_style, set_price) {
-  return header(context, serachTerm).then((dimension) => {
-    
-    logo(context)
 
-    leftNav(context, active_style, isAgent, set_price)
-    rightNav(context, active_category)
-    return {height: header_height}
-  })
+  let canvas = wx.createCanvas()
+  canvas.width = screenWidth
+  canvas.height = screenHeight
+  context = canvas.getContext('2d')
+  setBaseCanvas(canvas)
+  setBaseContext(context)
+  return drawImage(context, "images/bg@3x.png", 0, 0, screenWidth, screenHeight).then(() => {
+
+    return header(context, serachTerm)
+  }).then(() => {
+    return logo(context)
+  }).then(() => {
+
+    return leftNav(context, active_style, isAgent, set_price)
+  }).then(() => {
+
+    return rightNav(context, active_category)
+  }).then(() => {
+    GameGlobal.canvas.getContext('2d').drawImage(canvas, 0, 0)
+    return { height: header_height }
+  }) 
 }
 function header(context, serachTerm) {
-  return drawImage('images/homepage/bg_top@2x.png', 0, 0, screenWidth).then((dimension) => {
+  return drawImage(context, 'images/homepage/bg_top@2x.png', 0, 0, screenWidth).then((dimension) => {
     header_height = dimension.height
-    return drawText('关闭', 20, header_height / 2, 'middle')
+    TopArea[0] = dimension
+    return drawText(context, '关闭', 20, header_height / 2, 'middle')
   }).then((dimension) => {
-    CloseBtnArea[0] = {...dimension}
-    return drawImage('images/homepage/bg_search@2x.png', dimension.endX + 100, header_height / 2, 'middle')
+    ExitBtnArea[0] = {...dimension}
+    return drawImage(context, 'images/homepage/bg_search@2x.png', dimension.endX + 100, header_height / 2, 'middle')
   }).then((dimension) => {
     SearchButtonArea[0] = {...dimension}
-    return drawImage('images/homepage/icon_search@2x.png', dimension.startX + 20, header_height / 2, 'middle')
+    return drawImage(context, 'images/homepage/icon_search@2x.png', dimension.startX + 20, header_height / 2, 'middle')
   }).then((dimension) => {
     if (!serachTerm) {
 
-      return drawImage('images/homepage/text_placeholder@2x.png', dimension.endX + 15, header_height / 2, 'middle')
+      return drawImage(context, 'images/homepage/text_placeholder@2x.png', dimension.endX + 15, header_height / 2, 'middle')
     } else {
-      return drawText(serachTerm, dimension.endX + 15, header_height / 2, 'middle', 26, "#888" )
+      return drawText(context, serachTerm, dimension.endX + 15, header_height / 2, 'middle', 26, "#888" )
     }
   })
 }
 
 function logo(context) {
-  return drawImage('images/homepage/LOGO@2x.png', screenWidth / 2, header_height / 2, 'center middle')
+  return drawImage(context, 'images/homepage/LOGO@2x.png', screenWidth / 2, header_height / 2, 'center middle')
 }
 
 function leftNav(context, active_style, isAgent, set_price) {
-  let padding = 20
+  let padding = font_size
   let btn_active_offsetY = 0
   let bg_width
   let bg_height
@@ -50,32 +75,50 @@ function leftNav(context, active_style, isAgent, set_price) {
   let active_btn
 
   SLDArea.splice(0, SLDArea.length)
-  let next = drawImage('images/homepage/bg_style@2x.png', 0, header_height + 20,).then((dimension) => {
+  let next = drawImage(context, 'images/homepage/bg_style@2x.png', 0, header_height + 20, null, screenHeight - header_height - 20).then((dimension) => {
     bg_width = dimension.width
     bg_height = dimension.height
-    return drawImage('images/homepage/text_eu@2x.png', bg_width / 2, dimension.startY + padding, 'center')
+    return drawImage(context, 'images/homepage/text_eu@2x.png', bg_width / 2, dimension.startY + padding, 'center')
   }).then((dimension) => {
     if (active_style === 2) {
       active_btn_startY = dimension.startY - btn_active_offsetY
       active_btn = 'eu'
     }
-    SLDArea[2] = { ...dimension }
-    return drawImage('images/homepage/text_new@2x.png', bg_width / 2, dimension.endY + padding * 2, 'center')
+    SLDArea[2] = {
+      ...dimension,
+      startX: 0,
+      endX: bg_width,
+      startY: dimension.startY - padding / 2,
+      endY: dimension.endY + padding / 2
+    }
+    return drawImage(context, 'images/homepage/text_new@2x.png', bg_width / 2, dimension.endY + padding * 2, 'center')
   }).then((dimension) => {
     if (active_style === 0) {
       active_btn_startY = dimension.startY - btn_active_offsetY
       active_btn = 'new'
     }
-    SLDArea[0] = {...dimension}
-    return drawImage('images/homepage/text_prom@2x.png', bg_width / 2, dimension.endY + padding * 2, 'center')
+    SLDArea[0] = {
+      ...dimension,
+      startX: 0,
+      endX: bg_width,
+      startY: dimension.startY - padding / 2,
+      endY: dimension.endY + padding / 2
+    }
+    return drawImage(context, 'images/homepage/text_prom@2x.png', bg_width / 2, dimension.endY + padding * 2, 'center')
   }).then((dimension) => {
     if (active_style === 1) {
       active_btn_startY = dimension.startY - btn_active_offsetY
       active_btn = 'prom'
     }
-    SLDArea[1] = { ...dimension }
+    SLDArea[1] = {
+      ...dimension,
+      startX: 0,
+      endX: bg_width,
+      startY: dimension.startY - padding / 2,
+      endY: dimension.endY + padding / 2
+    }
     if (active_btn) {
-      return drawImage('images/homepage/text_' + active_btn + '_active@2x.png', bg_width, active_btn_startY, 'right')
+      return drawImage(context, 'images/homepage/text_' + active_btn + '_active@2x.png', bg_width, active_btn_startY, 'right')
     } else{
       return dimension
     }
@@ -84,25 +127,28 @@ function leftNav(context, active_style, isAgent, set_price) {
   if (isAgent) {
     if (set_price) {
       return next.then((dimension) => {
-        return drawImage('images/agent/btn_exit@2x.png', 0, screenHeight, 'bottom').then((dimension) => {
+        return drawImage(context, 'images/agent/btn_exit@2x.png', 0, screenHeight, 'bottom').then((dimension) => {
 
           SLDArea[4] = { ...dimension }
           return dimension
         })
       }).then((dimension) => {
-        return drawImage('images/agent/text_help@2x.png', bg_width / 2, dimension.startY - font_size, 'center bottom').then((dimension) => {
+        return drawImage(context, 'images/agent/text_help@2x.png', bg_width / 2, dimension.startY - font_size, 'center bottom').then((dimension) => {
           SLDArea[5] = { ...dimension }
           return dimension
         })
       })
     } else {
       return next.then((dimension) => {
-        return drawImage('images/homepage/text_price@2x.png', bg_width / 2, screenHeight - font_size * 2, 'center bottom').then((dimension) => {
+        return drawImage(context, 'images/homepage/text_price@2x.png', bg_width / 2, screenHeight - font_size * 2, 'center bottom').then((dimension) => {
 
           SLDArea[4] = { ...dimension }
+          return dimension
         })
       })
     }
+  } else {
+    return next
   }
 
 }
@@ -114,7 +160,13 @@ function rightNav(context, active_category) {
   let bg_startX
   let bg_startY
   let active_btn_startY
-  return drawImage('images/homepage/bg_category@2x.png', screenWidth, header_height + 20, 'right').then((dimension) => {
+
+  let new_canvas = wx.createCanvas()
+  new_canvas.width = screenWidth
+  new_canvas.height = screenHeight
+  let new_context = new_canvas.getContext('2d')
+
+  return drawImage(new_context, 'images/homepage/bg_category@2x.png', screenWidth, header_height + 20, null, screenHeight - header_height - 20, 'right').then((dimension) => {
     bg_width = dimension.width
     bg_height = dimension.height
     bg_startX = dimension.startX
@@ -122,17 +174,25 @@ function rightNav(context, active_category) {
     let bg_btn_height = 90
     //绘制一级
     FLDbtnArea.splice(0, FLDbtnArea.length)//每次调用重新填充数据的时候清空之前数据
+
+    let promises = []
     for (let i = 0; i < FLDsource.length; i++) {
 
       let is_active = active_category === i ? '_active' : ''
-      drawImage('images/homepage/bg_btn_category' + is_active + '@2x.png', bg_startX + bg_width / 2, bg_startY + padding * i + bg_btn_height * i, 'center').then((dimension) => {
-        drawText(FLDsource[i].name, bg_startX + bg_width / 2, dimension.startY + dimension.height / 2, 'center middle', 28, is_active ? '#000' : '#fff')
+      promises[i] = drawImage(new_context, 'images/homepage/bg_btn_category' + is_active + '@2x.png', bg_startX + bg_width / 2, bg_startY + padding * i + bg_btn_height * i, 'center').then((dimension) => {
         let item = {...dimension, status: !!is_active}
         FLDbtnArea[i] = item
+        return drawText(new_context, FLDsource[i].name, bg_startX + bg_width / 2, dimension.startY + dimension.height / 2, 'center middle', 28, is_active ? '#000' : '#fff')
       })
     }
-
+    return Promise.all(promises).then(() => {
+      context.drawImage(new_canvas, bg_startX, dimension.startY, bg_width, bg_height, bg_startX, dimension.startY, bg_width, bg_height)
+      return dimension
+    })
   })
 
 }
-export { basePage }
+
+let leftScroll = rightNav
+
+export { basePage, leftScroll }

Album/js/draw/content.js

@@ -1,6 +1,6 @@
 import drawImage from "../util/drawImage";
 import drawText from "../util/drawText";
-import { ContentbtnArea } from '../conf/data.js'
+import { ContentbtnArea, getBaseContext, getBaseCanvas } from '../conf/data.js'
 
 //每个页面放九个元素，每个元素依据它的下标来确定放置的位置
 export default class Content {
@@ -147,22 +147,37 @@ export default class Content {
     let start = this.page * this.pageSize
     let end = (this.page + 1) * this.pageSize
     let current_index
+    let scale = 1
+    if (screenWidth < 1334) {
+      scale = 0.8;
+    }
 
     if (end > this.data.length) {
       end = this.data.length
     }
     ContentbtnArea.splice(0, ContentbtnArea.length)
+
+    let canvas = getBaseCanvas()
+    let context = getBaseContext()
+
+    let promises = []
+
     for (let i = start; i < end; i++) {
       current_index = i - start
       let x = (current_index % this.line_items) * this.item_width + startX + this.h_gutter * (current_index % this.line_items + 1)
       let y = Math.floor(current_index / this.line_items) * (item_height + this.v_gutter) + startY + 20
       let d = this.data[i]
-      drawImage('images/homepage/bg_prod@2x.png', x, y, this.item_width, this.item_height).then((dimension, current_index) => {
+      promises[i] = drawImage(context, 'images/homepage/bg_prod@2x.png', x, y, this.item_width, this.item_height).then((dimension, current_index) => {
 
         ContentbtnArea[i - start] = {...dimension}
-        drawText(d.name, dimension.startX + dimension.width / 2, dimension.endY - 10, 'center, bottom')
-        return drawImage(d.cover_pic, dimension.startX + 5, dimension.startY + 5, dimension.width - 10, dimension.height - 55)
+        return drawText(context, d.name, dimension.startX + dimension.width / 2, dimension.endY - 10, 'center, bottom', font_size * scale).then(() => {
+          return drawImage(context, d.cover_pic, dimension.startX + 5, dimension.startY + 5, dimension.width - 10, dimension.height - 55)
+        })
       })
     }
+    return Promise.all(promises).then(() => {
+      GameGlobal.canvas.getContext('2d').drawImage(canvas, 0, 0)
+      return context
+    })
   }
 }

Album/js/draw/details.js

@@ -1,26 +1,35 @@
 import drawImage from '../util/drawImage.js'
-import { DetailbtnArea } from '../conf/data.js'
+import drawText from '../util/drawText.js'
+import { DetailbtnArea, setProductCanvas, setProductContext } from '../conf/data.js'
 let loadingDown = false
 export default class Details {
   showDetails(context, image, text, price) {
-    context.clearRect(0, 0, screenWidth, screenHeight)
+    let canvas = wx.createCanvas()
+    canvas.width = screenWidth
+    canvas.height = screenHeight
+    context = canvas.getContext('2d')
+    setProductCanvas(canvas)
+    setProductContext(context)
 
     //商品大图
-    drawImage(image, 0, 0, screenWidth, screenHeight).then(function(){
+    return drawImage(context, image, 0, 0, screenWidth, screenHeight).then(() => {
       // 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(context, '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(context, '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(context, 'images/detail/icon_label@2x.png', 160, icon_offset_y)
           context.textAlign = 'start';
           context.textBaseline = 'middle';
           context.font = font_size + "px Arial"
@@ -28,47 +37,53 @@ 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(context, '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(context, 'images/detail/txt_online_album@2x.png', screenWidth - 30, top_height / 2, 'right middle')
+          })
+          return next;
         })
 
         let peer_dock_width = dock_width / 5
         let first_dock_offset_x = (screenWidth - dock_width) / 2 + peer_dock_width
-        let font_size = 28
-        context.textAlign = 'center';
-        context.textBaseline = 'top';
-        context.font = font_size + "px Arial"
-        context.fillStyle = '#000'
-        context.fillText('分享好友', first_dock_offset_x, dock_offset_y + 55)
-        context.fillText('联系商家', first_dock_offset_x + 1 * peer_dock_width, dock_offset_y + 55)
-        context.fillText('详情&购买', first_dock_offset_x + 2 * peer_dock_width, dock_offset_y + 55)
-        context.fillText('尺寸安装图', first_dock_offset_x + 3 * peer_dock_width, dock_offset_y + 55)
+        
+        drawText(context, '分享好友', first_dock_offset_x, screenHeight - font_size * 0.4, 'center,bottom')
+        drawText(context, '联系商家', first_dock_offset_x + 1 * peer_dock_width, screenHeight - font_size * 0.4, 'center,bottom')
+        drawText(context, '详情&购买', first_dock_offset_x + 2 * peer_dock_width, screenHeight - font_size * 0.4, 'center,bottom')
+        drawText(context, '尺寸安装图', first_dock_offset_x + 3 * peer_dock_width, screenHeight - font_size * 0.4, 'center,bottom')
 
         //按钮
-        drawImage('images/detail/btn_back@2x.png', 30, screenHeight - 15, 'bottom').then(function (dimension) {
+        next = next.then(() => {
+          return drawImage(context, '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(context, 'images/detail/btn_share@2x.png', first_dock_offset_x, screenHeight - font_size * 1.7, 'center bottom')
+        }).then(function (dimension) {
+          DetailbtnArea[1] = { ...DetailbtnArea[1], ...dimension }
+          return drawImage(context, 'images/detail/btn_call@2x.png', first_dock_offset_x + 1 * peer_dock_width, screenHeight - font_size * 1.7, '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(context, 'images/detail/btn_buy@2x.png', first_dock_offset_x + 2 * peer_dock_width, screenHeight - font_size * 1.7, '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(context, 'images/detail/btn_size@2x.png', first_dock_offset_x + 3 * peer_dock_width, screenHeight - font_size * 1.7, '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(context, '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(context, 'images/detail/nav_right@2x.png', screenWidth - 20, screenHeight / 2, 'right middle')
+        }).then(function (dimension) {
           DetailbtnArea[6] = { ...DetailbtnArea[6], ...dimension }
+          GameGlobal.canvas.getContext('2d').drawImage(canvas, 0, 0)
+          return dimension
         })
+        return next
         
       })
     })

Album/js/draw/homepage.js

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

Album/js/draw/loading.js

@@ -0,0 +1,147 @@
+import drawImage, { Sprite } from "../util/drawImage";
+
+let isInitialed = false
+let progress_bar_p
+let progress_bg_bar_width
+let progress_bar_startX
+let progress_bar_endX
+let drawing = true
+let canvas
+let context
+
+let img_bg_white = new Sprite('images/bg@3x.png')
+let img_bg_loading = new Sprite('images/loading/bg_loading@2x.png')
+let img_text_online = new Sprite('images/loading/text_online@2x.png')
+let img_text_loading = new Sprite('images/loading/text_loading@2x.png')
+let img_bg_progress = new Sprite('images/loading/bg_progress@2x.png')
+let img_progress_10 = new Sprite('images/loading/progress_10@2x.png')
+let img_progress_20 = new Sprite('images/loading/progress_20@2x.png')
+let img_progress_30 = new Sprite('images/loading/progress_30@2x.png')
+let img_progress_40 = new Sprite('images/loading/progress_40@2x.png')
+let img_progress_50 = new Sprite('images/loading/progress_50@2x.png')
+let img_progress_60 = new Sprite('images/loading/progress_60@2x.png')
+let img_progress_70 = new Sprite('images/loading/progress_70@2x.png')
+let img_progress_80 = new Sprite('images/loading/progress_80@2x.png')
+let img_progress_90 = new Sprite('images/loading/progress_90@2x.png')
+let img_progress_100 = new Sprite('images/loading/progress_100@2x.png')
+let img_text_copyright = new Sprite('images/loading/text_copyright@2x.png')
+
+const loading = (proccess_percent) => {
+
+
+  console.log(`loading percent: ${proccess_percent}, is drawing: ${drawing}`)
+  if (drawing) {
+    canvas = wx.createCanvas()
+    canvas.width = screenWidth
+    canvas.height = screenHeight
+    context = canvas.getContext('2d')
+    console.log('loading init')
+    let d_bg_white = img_bg_white.render(context, 0, 0, screenWidth, screenHeight)
+    let d_bg_loading = img_bg_loading.render(context, 0, 0, screenWidth, screenHeight)
+    let d_text_online = img_text_online.render(context, screenWidth / 2, screenHeight * .2, 'center, middle')
+    let d_text_loading = img_text_loading.render(context, screenWidth / 2, screenHeight * .6, 'center, middle')
+    let d_bg_progress = img_bg_progress.render(context, screenWidth / 2, screenHeight * .75, 'center, middle')
+
+    progress_bg_bar_width = d_bg_progress.width
+    progress_bar_startX = d_bg_progress.startX
+
+    let d_progress_10 = img_progress_10.render(context, d_bg_progress.startX + 2, d_bg_progress.startY + d_bg_progress.height / 2, 'left, middle')
+    progress_bar_p = d_progress_10
+    let d_text_copyright = img_text_copyright.render(context, screenWidth / 2, screenHeight * .9, 'center, middle')
+    GameGlobal.canvas.getContext('2d').drawImage(canvas, 0, 0)
+    isInitialed = true
+    drawing = false
+
+    // return drawImage(context, 'images/bg@3x.png', 0, 0, screenWidth, screenHeight).then((dimension) => {
+    //   return drawImage(context, 'images/loading/bg_loading@2x.png', 0, 0, screenWidth, screenHeight)
+    // }).then((dimension) => {
+    //   console.log(`bg loading ${dimension.width}, ${dimension.height}`)
+    //   return drawImage(context, 'images/loading/text_online@2x.png', screenWidth / 2, screenHeight * .2, 'center, middle')
+    // }).then((dimension) => {
+    //   return drawImage(context, 'images/loading/text_loading@2x.png', screenWidth / 2, screenHeight * .6, 'center, middle')
+    // }).then((dimension) => {
+    //   return drawImage(context, 'images/loading/bg_progress@2x.png', screenWidth / 2, screenHeight * .75, 'center, middle')
+    // }).then((dimension) => {
+    //   progress_bg_bar_width = dimension.width
+    //   progress_bar_startX = dimension.startX
+    //   return drawImage(context, 'images/loading/progress_10@2x.png', dimension.startX + 2, dimension.startY + dimension.height / 2, 'left, middle')
+    // }).then((dimension) => {
+    //   progress_bar_p = dimension
+    //   return drawImage(context, 'images/loading/text_copyright@2x.png', screenWidth / 2, screenHeight * .9, 'center, middle')
+    // }).then((dimension) => {
+    //   isInitialed = true
+    //   drawing = false
+    //   console.log('loading done')
+    //   GameGlobal.canvas.getContext('2d').drawImage(canvas, 0, 0)
+    //   return dimension
+    // })
+  } else {
+    // return drawImage(context, 'images/loading/bg_loading@2x.png', 0, 0, screenWidth, screenHeight).then((dimension) => {
+    //   console.log(`bg loading ${dimension.width}, ${dimension.height}`)
+    //   return drawImage(context, 'images/loading/text_online@2x.png', screenWidth / 2, screenHeight * .2, 'center, middle')
+    // }).then((dimension) => {
+    //   return drawImage(context, 'images/loading/text_loading@2x.png', screenWidth / 2, screenHeight * .6, 'center, middle')
+    // }).then((dimension) => {
+    //   return drawImage(context, 'images/loading/bg_progress@2x.png', screenWidth / 2, screenHeight * .75, 'center, middle')
+    // }).then((dimension) => {
+    //   progress_bg_bar_width = dimension.width
+    //   return drawImage(context, 'images/loading/progress_10@2x.png', dimension.startX + 2, dimension.startY + dimension.height / 2, 'left, middle')
+    // }).then((dimension) => {
+    //   progress_bar_p = dimension
+    //   return drawImage(context, 'images/loading/text_copyright@2x.png', screenWidth / 2, screenHeight * .9, 'center, middle')
+    // }).then((dimension) => {
+    //   console.log('loading done')
+    //   return dimension
+    // }).then(() => {
+    let base_progress_bar = img_progress_10
+    progress_bar_endX = progress_bg_bar_width ? progress_bar_startX + proccess_percent / 100 * progress_bg_bar_width : progress_bar_p.endX + proccess_percent
+    if (progress_bar_endX <= progress_bar_p.endX) {
+      progress_bar_endX = progress_bar_p.endX
+    } else if (progress_bar_endX - progress_bar_p.endX > progress_bar_p.width && progress_bg_bar_width) { //避免进度条断裂
+      let diff = progress_bar_endX - progress_bar_p.endX
+      let delta_percent = Math.ceil(diff / progress_bg_bar_width * 10) * 10
+      switch (delta_percent){
+        case 10:
+          base_progress_bar = img_progress_10
+          break;
+        case 20:
+          base_progress_bar = img_progress_20
+          break;
+        case 30:
+          base_progress_bar = img_progress_30
+          break;
+        case 40:
+          base_progress_bar = img_progress_40
+          break;
+        case 50:
+          base_progress_bar = img_progress_50
+          break;
+        case 60:
+          base_progress_bar = img_progress_60
+          break;
+        case 70:
+          base_progress_bar = img_progress_70
+          break;
+        case 80:
+          base_progress_bar = img_progress_80
+          break;
+        case 90:
+          base_progress_bar = img_progress_90
+          break;
+        case 100:
+          base_progress_bar = img_progress_100
+          break;
+      }
+    }
+    progress_bar_p = base_progress_bar.render(context, progress_bar_endX, progress_bar_p.startY, 'right')
+    GameGlobal.canvas.getContext('2d').drawImage(canvas, 0, 0)
+    // return drawImage(GameGlobal.canvas.getContext('2d'), base_progress_bar, progress_bar_endX, progress_bar_p.startY, 'right').then((dimension) => {
+    //   progress_bar_p = {...dimension}
+    //   // GameGlobal.canvas.getContext('2d').drawImage(canvas, 0, 0)
+    //   return dimension
+    // })
+
+    // })
+  }
+}
+export default loading

Album/js/draw/price.js

@@ -1,8 +1,7 @@
 import drawImage from "../util/drawImage";
 import drawText from "../util/drawText";
-import { setpriceArea, homepage_page_size } from '../conf/data.js'
+import { setpriceArea, homepage_page_size, getBaseCanvas, getBaseContext } from '../conf/data.js'
 
-let context = canvas.getContext('2d')
 export default class Price{
   constructor(data, page, offsetY) {
     this.data = data
@@ -56,50 +55,36 @@ export default class Price{
     let end = (this.page + 1) * this.pageSize
     let current_index
 
+    let canvas = getBaseCanvas()
+    let context = getBaseContext()
+
     if (end > this.data.length) {
       end = this.data.length
     }
     setpriceArea.splice(0, setpriceArea.length)
+
+    let promises = []
     for (let i = start; i < end; i++) {
       current_index = i - start
       let x = (current_index % this.line_items) * this.item_width + startX + this.h_gutter * (current_index % this.line_items + 1)
       let y = Math.floor(current_index / this.line_items) * (item_height + this.v_gutter) + startY + 20
       let d = this.data[i]
 
-      drawImage(d.cover_pic, startX + padding, startY + 20 + current_index * (this.item_height + this.v_gutter), 88.88 * this.item_height / 50, this.item_height).then((dimension) => {
+      promises[i] = drawImage(context, d.cover_pic, startX + padding, startY + 20 + current_index * (this.item_height + this.v_gutter), 88.88 * this.item_height / 50, this.item_height).then((dimension) => {
         context.fillStyle = '#D3D3D3'
         context.fillRect(startX + padding, dimension.endY + 1, this.content_width - padding * 2, 2)
-        drawText(d.name, dimension.endX + font_size * 3, dimension.startY + dimension.height / 2, 'middle')
-        drawImage('images/agent/btn_price@2x.png', startX + this.content_width - padding, dimension.startY + dimension.height / 2, 'right middle').then((t_dimension) => {
+        let promises = []
+        promises.push(drawText(context, d.name, dimension.endX + font_size * 3, dimension.startY + dimension.height / 2, 'middle'))
+        promises.push(drawImage(context, 'images/agent/btn_price@2x.png', startX + this.content_width - padding, dimension.startY + dimension.height / 2, 'right middle').then((t_dimension) => {
           setpriceArea[i - start] = { ...t_dimension }
-          drawText("¥" + (d.price || 0), t_dimension.startX - font_size * 5, dimension.startY + dimension.height / 2, 'middle')
-        })
+          return drawText(context, "¥" + (d.price || 0), t_dimension.startX - font_size * 5, dimension.startY + dimension.height / 2, 'middle')
+        }))
 
-        return dimension
-      }).then
+        return Promise.all(promises)
+      })
     }
-    // try {
-    //   if (GoodsSource.length < 10) {//当商品列表小于10的时候，无需翻页，直接绘制
-    //     for (let i = 0; i < GoodsSource.length; i++) {
-    //       let img = wx.createImage()
-    //       img.src = GoodsSource[i].cover_pic
-    //       dir3.setPrice(context, img, i, GoodsSource[i].name, '0')
-    //     }
-    //   }
-    //   else {//当商品列表大于9的时候，需要翻页，通过变量page来控制绘制
-    //     for (let j = page * 9; j < (page + 1) * 9; j++) {
-    //       let img = wx.createImage()
-    //       try {
-    //         img.src = GoodsSource[j].cover_pic
-    //         dir3.setPrice(context, img, j % 9, GoodsSource[j].name, '0')
-    //       } catch (e) {
-    //         console.log(e.message)
-    //       }
-    //     }
-    //     // if (page > (GoodsSource.length - 1) % 9) break //如果页数大于实际页数的话，停止绘制,避免出现获取不到资源而报错
-    //   }
-    // } catch (e) {
-
-    // }
+    return Promise.all(promises).then(() => {
+      return GameGlobal.canvas.getContext('2d').drawImage(canvas, 0, 0)
+    })
   }
 }

Album/js/main.js

@@ -1,6 +1,5 @@
-import { basePage } from './draw/base.js'
-import FLD from './draw/FirstLevelDirectory.js'
-import SLD from './draw/SecondLevelDirectory.js'
+import loading from './draw/loading.js'
+import { basePage, leftScroll } from './draw/base.js'
 import Content from './draw/content.js'
 import Details from './draw/details.js'
 import setPrice from './draw/price.js'
@@ -11,11 +10,11 @@ import SizeModal from './draw/SizeModal.js'
 import PriceModal from './draw/PriceModal.js';
 import HelpModal from './draw/HelpModal.js';
 //import canvas from './libs/weapp-adapter.js'
+import drawText from './util/drawText.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传参数获取该顶级目录下的商品列表
@@ -23,22 +22,17 @@ var flag3 = 0//通过flag3来判断选择的是哪一个商品，然后获取它
 var flag4 = 0//价格设置参考参数
 var flag5 = 0//风格菜单选中状态
 
-//是否为iPhoneX
-let isiPhoneX
 //定义画布
-//let canvas = wx.createCanvas()
 let context
+let IAC = wx.createInnerAudioContext()
+IAC.src = 'music/click.mp3'
+//IAC.autoplay = true
 
-//中间商品列表显示区绘制辅助变量
-let imgx = 0
-let imgy = 0
-let imgX = 0
-let imgY = 0
-let imgyy = 0
 
 //定义按钮区域
 //一级目录按钮区域
 import {
+  ExitBtnArea,
   FLDsource,
   FLDbtnArea,
   FLDbtnAreaOffset,
@@ -46,10 +40,13 @@ import {
   ContentbtnArea,
   SLDArea,
   setpriceArea,
+  TopArea,
   SearchButtonArea,
   SetPriceBtnArea,
   page,
   modalCloseBtnArea,
+  ProductBuyModalBtnArea,
+  ProductSizeModalBtnArea,
   triggerMoveDelta,
   homepage_page_size
 } from './conf/data.js'
@@ -59,24 +56,17 @@ 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()
+
+let percent = 10
+
 function init() {
   console.log('init')
+  let res = wx.getSystemInfoSync()
   let mobileType = res.model
 
   let drawRatio = GameGlobal.drawRatio = 2
@@ -98,35 +88,21 @@ function init() {
   GameGlobal.font_size = 28
   console.log('screenWidth: ' + screenWidth + ', screenHeight: ' + screenHeight)
 
-  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
+  // context.fillStyle = '#fff'
+  // context.fillRect(0, 0, screenWidth, screenHeight)
+  // wx.setPreferredFramesPerSecond(30)
+  sleep(0).then(() => {
 
-  //详情界面按钮区域
-  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 },]
+    loading(percent)
+    showLoading()
+  })
 }
-init()
 
-//定义目录选中状态
-let FLDstatus = false
-let SLDstatus = false
+// wx.getSystemInfoSync({
+//   success: function (res) {
+//     init(res)
+//   }
+// })
 //定义是否在详情界面状态
 let Detailstatus = false
 //是否隐藏了按钮
@@ -154,6 +130,7 @@ let startx = 0
 let starty = 0
 //agent_id
 let agent_id = 0
+let user_id = 0
 //状态 1 只选择热销 2 只选择最新上市 3只选择一个风格 4 同时选择热销和最新上市 5同时选择热销和风格 6同时选择最新上市和风格 7全选 0全不选
 let status = 0
 let style = 0
@@ -166,13 +143,33 @@ var FactoryName = ''
 var pricein = 0.0
 //输入的电话
 var mobilein = '0'
+
+let isLoading = true
+
+function showLoading() {
+  
+  let interval = window.requestAnimationFrame(function () {
+    // console.log('next frame')
+    if (percent < 99.6 && isLoading) {
+      percent += 0.2
+      loading(percent)
+      showLoading(percent)
+    } else {
+      isLoading = false;
+      window.cancelAnimationFrame(interval)
+      interval = null;
+    }
+  }, canvas)
+}
+
+
 //绘制函数
-function reStart() {
+function reStart(dontReset) {
   console.log('reStartSuccess')//调用成功输出'reStartSuccess'
-  reset()//清空之前屏幕上的绘制内容，减少缓存占用，及信息重叠
+  // !dontReset && 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 {
@@ -187,10 +184,18 @@ 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).catch(() => {
+          wx.hideLoading()
+          wx.showToast({
+            title: '商品详情图片加载失败',
+            icon: 'none',
+            duration: 800
+          })
+          current_page = page.homepage
+        })
       }
       else {
-        drawImage(GoodsDetail.detail_pic, 0, 0, screenWidth, screenHeight)
+        return drawImage(context, GoodsDetail.detail_pic, 0, 0, screenWidth, screenHeight)
       }
 
     } catch (e) {
@@ -204,6 +209,15 @@ function reStart() {
     }
   }
 }
+
+wx.onShow((e) => {
+  if (!isLoading) {
+    console.log('on show')
+    sleep(500).then(() => reStart())
+  } else {
+    init()
+  }
+})
 //触摸响应函数
 wx.onTouchStart(((e) => {
   try {
@@ -217,6 +231,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
@@ -240,13 +268,16 @@ wx.onTouchEnd(((e) => {
     switch (current_page) {
       case page.homepage:
         handleHomepageEvents(endX, endY)
+        handelExitEvents(endX, endY)
         break;
       case page.product_homepage:
         handleProductHomepageEvents(endX, endY)
+        handelExitEvents(endX, endY)
         break;
       case page.set_price:
 
         handleHomepageEvents(endX, endY)
+        handelExitEvents(endX, endY)
         break;
       case page.set_price_modal:
         handleModalCloseModal(endX, endY)
@@ -260,9 +291,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;
     }
   }
@@ -299,7 +332,7 @@ function handleHomepageMoveEvents(startx, starty, endX, endY) {
     }
     if (offsetY !== FLDbtnAreaOffset.y) {
       FLDbtnAreaOffset.y = offsetY
-      reStart()
+      leftScroll(context, flag1)
     }
   }
 }
@@ -315,7 +348,7 @@ function handleProductHomepageMoveEvents(startx, starty, endX, endY) {
         duration: 800
       })
       flag3 = 0
-      reStart()
+      reStart(true)
     } else {
       flag3 = flag3 - 1
       console.log('flag3:' + flag3)
@@ -338,14 +371,24 @@ function handleProductHomepageMoveEvents(startx, starty, endX, endY) {
   }
 }
 
+function handelExitEvents (x, y) {
+  let d = ExitBtnArea[0]
+  if (x >= d.startX && x <= d.endX && y >= d.startY && y <= d.endY) {
+    IAC.play()
+    console.log("exit")
+    wx.exitMiniProgram({})
+  }
+}
 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) {
+        IAC.play()
+        KeyWord = ''
         for (let i in FLDbtnArea) {//点击该按钮的时候，它变为活跃状态status=true，而其他所有按钮变为非活跃状态status=false
           FLDbtnArea[i].status = false
         }
@@ -358,64 +401,72 @@ function handleHomepageEvents(x, y) {
         flag5 = 0//风格重置为新品
         status = 2
         //FLDbtnArea[btn].status = true
-        current_page = page.homepage
-        getFLDsource(callback1, url)//重绘
+        // current_page = page.homepage
+        getGoodsSource(callback3, SLDsource)
       }
     }
-  } 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) { //新品上市
+          IAC.play()
           product_page_index = 0
           flag2 = 0
           flag5 = 0
           status = 2
           getGoodsSource(callback3, SLDsource)
         } else if (i === 1) { //促销产品
+          IAC.play()
           product_page_index = 0
           flag2 = 0
           flag5 = 1
           status = 1
           getGoodsSource(callback3, SLDsource)
         } else if (i === 2) { //风格
+          IAC.play()
           product_page_index = 0
           flag2 = 0
           flag5 = 2
           status = 3
           getGoodsSource(callback3, SLDsource)
         } else if (isAgent == true && i === 4) { //报价
-          if (GoodsSource.length != 0) {
-            setMobile = false
-            if (setprice == true) { //退出报价
+          IAC.play()
+            if (current_page === page.set_price) { //退出报价
               setprice = false
+              current_page = page.homepage
               reStart()
             } else {
-              current_page = page.set_price
-              setprice = true
-              reStart()
+
+              if (GoodsSource.length === 0) {
+                wx.showToast({
+                  title: '当前列表无商品',
+                  icon: 'none',
+                  duration: 500
+                })
+              } else {
+                current_page = page.set_price
+                setprice = true
+                reStart()
+              }
             }
-          } else {
-            wx.showToast({
-              title: '当前列表无商品',
-              icon: 'none',
-              duration: 500
-            })
-          }
         } else if (setprice && i === 5) { //报价帮助按钮
+          IAC.play()
           current_page = page.set_price_help_modal
           new HelpModal(context).draw()
         }
       }
     }
-  } else if (y <= SearchButtonArea[0].startY) {
+  } else if (y <= TopArea[0].endY) {
     //搜索
     if (x >= SearchButtonArea[0].startX
       && x <= SearchButtonArea[0].endX
       && y >= SearchButtonArea[0].startY
       && y <= SearchButtonArea[0].endY) {
+      IAC.play()
       //清除目录控制状态 
       flag5 = -1
       for (let i in FLDbtnArea) {
@@ -440,6 +491,7 @@ function handleHomepageEvents(x, y) {
       })
     }
   } else if (setprice) { //打开报价弹窗
+    IAC.play()
     for (let con in setpriceArea) {
       if (x >= setpriceArea[con].startX
         && x <= setpriceArea[con].endX
@@ -455,6 +507,7 @@ function handleHomepageEvents(x, y) {
       }
     }
   } else {  //进入商品详情
+    IAC.play()
     for (let con in ContentbtnArea) {
       if (x >= ContentbtnArea[con].startX
         && x <= ContentbtnArea[con].endX
@@ -489,27 +542,44 @@ 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) {  //返回
+           IAC.play()
            Detailstatus = false
            current_page = page.homepage
            reStart() //重绘
          } else if (i === 1) {//分享好友
+           IAC.play()
            wx.shareAppMessage({
              //title: '经销商id:' + agent_id,
              query: 'agent_id=' + agent_id
            })
 
          } else if (i === 2) {//联系商家
+           IAC.play()
            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) {//详情&购买
+           IAC.play()
+           wx.showLoading({
+             title: 'loading',
+           })
            current_page = page.product_buy_modal
-           new ProductModal(context, GoodsDetail).draw()
+           productBuyModal = new ProductModal(context, GoodsDetail)
+           productBuyModal.draw().then(() => {
+             wx.hideLoading()
+           })
          } else if (i === 4) {//尺寸&安装
+           IAC.play()
+           wx.showLoading({
+             title: 'loading',
+           })
            current_page = page.product_size_modal
-           new SizeModal(context, GoodsDetail).draw()
+           new SizeModal(context, GoodsDetail, 'size').draw().then(() => {
+             wx.hideLoading()
+           })
          } else if (i === 5) {//上一张
+           IAC.play()
            Buttonstatus = false
            if (flag3 <= 0) {
              wx.showToast({
@@ -526,6 +596,7 @@ function handleProductHomepageEvents(x, y) {
              getGoodsDetail(callback4, GoodsSource)
            }
          } else if (i === 6) {//下一张
+           IAC.play()
            Buttonstatus = false
            if (flag3 == GoodsSource.length - 1) {
              wx.showToast({
@@ -550,6 +621,7 @@ function handleModalCloseModal(x, y) {
     && x <= modalCloseBtnArea[0].endX
     && y >= modalCloseBtnArea[0].startY
     && y <= modalCloseBtnArea[0].endY) {
+    IAC.play()
       if (current_page === page.set_price_help_modal || current_page === page.set_price_modal) {
         current_page = page.set_price
       } else {
@@ -564,6 +636,7 @@ function handleSetPriceModalEvents(x, y) {
     && x <= SetPriceBtnArea[0].endX
     && y >= SetPriceBtnArea[0].startY
     && y <= SetPriceBtnArea[0].endY) {
+    IAC.play()
     wx.showKeyboard({
       defaultValue: '',
       maxLength: 8,
@@ -582,9 +655,11 @@ function handleSetPriceModalEvents(x, y) {
     && x <= SetPriceBtnArea[1].endX
     && y >= SetPriceBtnArea[1].startY
     && y <= SetPriceBtnArea[1].endY) {
+    IAC.play()
   // 保存价格
-    setClick = false
-    console.log('setSuccess')
+    wx.showLoading({
+      title: 'loading',
+    })
     let turl = 'https://t6.9026.com/api/album/set-price'
     wx.request({
       url: turl,
@@ -608,9 +683,103 @@ function handleSetPriceModalEvents(x, y) {
     })
   }
 }
+function handleProductBuyModalMoveEvents(x1, y1, x2, y2) {
+  let p
+  if (!isTouchMoving) {
+    isTouchMoving = true
+    p = productBuyModal.scroll(x1, y1, x2, y2)
+    if (p) {
+      p.then(() => {
+        isTouchMoving = false
+      })
+    } else {
+      isTouchMoving = false
+    }
+  }
+}
+function handleProductBuyModalEvents(x, y) {
+  let d = ProductBuyModalBtnArea[3]
+  if (x >= d.startX && x <= d.endX && y >= d.startY && y <= d.endY) {
+    IAC.play()
+    let is_fav = GoodsDetail.is_favorite
+    let url
+    if (is_fav) {
+      url = 'https://t6.9026.com/api/album/favorite_del'
+    } else {
+      url = 'https://t6.9026.com/api/album/add_favorite'
+    }
+    wx.showLoading({
+      title: 'loading',
+    })
+    wx.request({
+      url: url,  //这里''里面填写你的服务器API接口的路径    
+      data: {
+        store_id: 1,
+        user_id: 1,
+        product_id: GoodsDetail.id
+      },  //这里是可以填写服务器需要的参数    
+      method: 'GET', // 声明GET请求    
+      // header: {}, // 设置请求的 header，GET请求可以不填    
+      success: function (res) {
+        wx.hideLoading()
+        if (res.statusCode == 200) {
+          GoodsDetail.is_favorite = is_fav ? '0' : '1'
+          productBuyModal.fav()
+          wx.showToast({
+            title: '收藏成功',
+            icon: 'none',
+            duration: 500
+          })
+        } else {
+          wx.showToast({
+            title: '收藏失败',
+            icon: 'none',
+            duration: 500
+          })
+        }
+        //console.log(res.statusCode)
+      },
+      fail: function(error) {
+        console.error('收藏失败', error)
+        wx.showToast({
+          title: '收藏失败',
+          icon: 'none',
+          duration: 500
+        })
+      }
+    });
+  }
+}
+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) {
+    IAC.play()
+    reStart().then(() => {
+
+      new SizeModal(context, GoodsDetail, 'size').draw()
+    })
+  } else if (x >= d1.startX && x <= d1.endX && y >= d1.startY && y <= d1.endY) {
+    IAC.play()
+    reStart().then(() => {
+
+      new SizeModal(context, GoodsDetail, 'pic').draw()
+    })
+  } else if (x >= d2.startX && x <= d2.endX && y >= d2.startY && y <= d2.endY) {
+    IAC.play()
+    reStart().then(() => {
+
+      new SizeModal(context, GoodsDetail, 'video').draw()
+    })
+  }
+}
+
+
+
 //清除之前绘制内容
 function reset() {
-  context.clearRect(0, 0, screenWidth, screenHeight)
+  // context.clearRect(0, 0, screenWidth, screenHeight)
   context.fillStyle = "#fff"
   context.fillRect(0, 0, screenWidth, screenHeight)
 }
@@ -647,6 +816,8 @@ function getFLDsource(callback1, url) {
 }
 //在回调函数中通过顶级目录个数获得它的按钮区域
 function callback1(res) {
+
+  percent < 70 && (percent = 70)
   getSLDsource(callback2, FLDsource)//获取二级目录信息
 }
 //根据获取第一个请求函数得到的顶级目录信息来获取二级目录信息
@@ -683,6 +854,8 @@ function getSLDsource(callback2, FLDsource) {
 }
 //通过二级目录列表的长度来得到它的按钮区域列表
 function callback2(res) {
+
+  percent < 80 && (percent = 80)
   SLDbtnArea.splice(0, SLDbtnArea.length)//每次调用重新填充数据的时候清空之前数据
   for (let i = 0; i < res.length; i++) {
     let s = false
@@ -705,6 +878,9 @@ function getGoodsSource(callback3, SLDsource) {
     style = SLDsource[flag2].id
   }
   let u = 'https://t6.9026.com/api/album/goods' + '?store_id=1&cat_id=' + cat_id + '&status=' + status + '&style=' + style
+  wx.showLoading({
+    title: 'loading',
+  })
   wx.request({
     url: u,
     data: {
@@ -712,6 +888,7 @@ function getGoodsSource(callback3, SLDsource) {
     method: 'GET',
     success: function (res) {
       try {
+        wx.hideLoading()
         let test = JSON.stringify(res.data)
         let tet = JSON.parse(test)
         FactoryName = tet.data.name
@@ -719,6 +896,13 @@ function getGoodsSource(callback3, SLDsource) {
         for (let i in tet.data.goods) {
           GoodsSource.push(tet.data.goods[i])
         }
+        if (GoodsSource.length === 0) {
+          wx.showToast({
+            title: '当前列表无商品',
+            icon: 'none',
+            duration: 500
+          })
+        }
       } catch (e) {
         wx.showToast({
           title: '请求异常',
@@ -733,22 +917,26 @@ function getGoodsSource(callback3, SLDsource) {
 
 }
 function callback3(res) {
+  percent < 100 && (percent = 100)
   console.log(GoodsSource)
+
+  isLoading = false
   reStart()
 }
 function getGoodsDetail(callback4, GoodsSource) {
   //如果所点击的区域没有商品展示，那么不进入详情界面
-  let ur = 'https://t6.9026.com/api/album/goods-detail?store_id=1&agent_id=' + agent_id + '&goods_id='
-  try {
-    ur = ur + GoodsSource[flag3].id
-  } catch (e) {
-    console.log(e.message)
-    Detailstatus = false
-    // reStart()
-  }
+  let ur = 'https://t6.9026.com/api/album/goods-detail'
+  wx.showLoading({
+    title: 'loading',
+  })
+
   wx.request({
     url: ur,
     data: {
+      store_id: 1,
+      agent_id: agent_id,
+      goods_id: GoodsSource[flag3].id,
+      user_id: user_id
     },
     method: 'GET',
     success: function (res) {
@@ -766,71 +954,104 @@ function getGoodsDetail(callback4, GoodsSource) {
         })
       }
       callback4(GoodsDetail)//导出商品列表
+    },
+    fail: function(error) {
+      console.error(error)
+      Detailstatus = false
     }
   })
 }
 function callback4(res) {
-  if (GoodsDetail == null) {
-    // wx.hideLoading()
-  } else {
-    wx.showLoading({
-      title: 'loading',
-    })
-    //console.log(GoodsDetail)
-  }
   if (Detailstatus == true)//如果没获取到详情，说明所点击区域没有元素，不进行重绘
-    reStart()
+    reStart(true)
 }
 
 function UserLogin() {
   
-  wx.showLoading({
-    title: '正在登录',
-  })
+  // wx.showLoading({
+  //   title: '正在登录',
+  // })
   wx.login({
     success: function (res) {
       let code = res.code
       console.log(code)
+      percent < 20 && (percent = 20)
       wx.getUserInfo({
         success: function (res) {
+          percent < 30 && (percent = 30)
           let encrypted_data = res.encryptedData
           let iv = res.iv
           let tx = res.userInfo.avatarUrl
           let nn = res.userInfo.nickName
           console.log('getUserInfo success')
+          let params = {
+            code: code,
+            avatar: tx,
+            nickName: nn,
+            iv: iv,
+            store_id: 1
+          }
+          // wx.showToast({
+          //   title: JSON.stringify(params),
+          //   icon: 'none',
+          //   duration: 5000
+          // })
+
           wx.request({
             url: 'https://t6.9026.com/api/album/xyx_login',
             method: 'POST',
-            data: {
-              code: code,
-              avatar: tx,
-              nickName: nn,
-              iv: iv,
-              store_id: 1
-            },
+            data: params,
             success: function (res) {
-              let is_agent = res.data.data.d.data.is_agent
+              percent < 60 && (percent = 60)
+              let data = res.data.data
+              let is_agent = data.is_agent
               if (is_agent == 1) {
                 isAgent = true
-                agent_id = res.data.data.d.data.agent_id
+                agent_id = data.agent_id
+                user_id = data.user_id
                 wx.hideLoading()
                 getFLDsource(callback1, url)
               }
               else {
-                isAgent = true
+                isAgent = false
                 var test = wx.getLaunchOptionsSync()
                 console.log(test)
                 agent_id = test.query.agent_id
+                user_id = data.user_id
                 if (agent_id == undefined)
                   agent_id = 0
                 console.log(agent_id)
                 wx.hideLoading()
                 getFLDsource(callback1, url)
               }
+            }, fail: function () {
+              isLoading = false
+              // drawText(context, code, 0, 0, '', 28, '#000')
+              // drawText(context, tx, 0, font_size, '', 28, '#000')
+              // drawText(context, nn, 0, font_size * 2, '', 28, '#000')
+              // drawText(context, iv, 0, font_size * 3, '', 28, '#000')
+              wx.showToast({
+                title: '系统登录失败',
+                icon: 'none',
+                duration: 800
+              })
+
             }
           })
+        }, fail: function(){
+          wx.showToast({
+            title: '获取用户信息失败',
+            icon: 'none',
+            duration: 800
+          })
         }
       })
+    }, fail: function () {
+      wx.showToast({
+        title: '微信登录失败',
+        icon: 'none',
+        duration: 800
+      })
     }
   })
 }
@@ -847,6 +1068,11 @@ function search(KeyWord) {
         let test = JSON.stringify(res.data)
         let tet = JSON.parse(test)
         GoodsSource.splice(0, GoodsSource.length)//每次调用重新填充数据的时候清空之前数据
+        wx.showToast({
+          title: '这次共搜索到' + tet.data.goods.length + '个产品',
+          icon: 'none',
+          duration: 800
+        })
         for (let i in tet.data.goods) {
           GoodsSource.push(tet.data.goods[i])
         }

Album/js/util/drawImage.js

@@ -1,18 +1,123 @@
-export default function drawImage(img, x1, y1, w, h, align, zoom) {
+
+
+
+let context = canvas.getContext('2d')
+function handleImageLoad(context, resolve, image, x1, y1, w, h, align, zoom) {
+    // image.onload = null;
+    let width = image.width
+    let height = image.height
+    if (!image.complete) {
+        return;
+    }
+    if (typeof w === 'string') {
+        align = w;
+        w = null;
+        h = null;
+    }
+    w = w || width
+    h = h || height
+    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
+    }
+    if (zoom) {
+
+        context.drawImage(image, 0, 0, width, width * h / w, x1, y1, w, h)
+    } else {
+        context.drawImage(image, x1, y1, w, h)
+    }
+
+    let dimension = {
+        startX: x1,
+        startY: y1,
+        endX: x1 + w,
+        endY: y1 + h,
+        width: w,
+        height: h
+    }
+    if (typeof resolve === "function") {
+
+        resolve(dimension);
+    } else {
+        return dimension;
+    }
+}
+export default function drawImage(context,img, x1, y1, w, h, align, zoom) {
     return new Promise(function(resolve, reject) {
+        let image = wx.createImage()
+        image.src = img
+        // if (image.complete && image.width > 0) {
+        //     console.log(image.src + ` is cached, ${image.width}, ${image.height}`)
+        //     handleImageLoad(resolve, image, x1, y1, w, h, align, zoom)
+        // } else {
+            image.onload = function (e) {
+                let width = image.width
+                let height = image.height
+                // console.log(`image load ${width}, ${height}`)
+                handleImageLoad(context,resolve, image, x1, y1, w, h, align, zoom)
+            }
+            image.onerror = function(e) {
+                reject(e)
+            }
+        // }
+
+    })
+}
+export function drawVScrollImage(context,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(context, img, x1, y1, align, scale) {
+    return new Promise(function (resolve, reject) {
+
+        let image = wx.createImage()
+        image.onload = function (e) {
+            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) {
@@ -23,12 +128,7 @@ export default function drawImage(img, x1, y1, w, h, align, zoom) {
             } else if (!!align && align.indexOf('bottom') > -1) {
                 y1 = y1 - h
             }
-            if (zoom) {
-
-                context.drawImage(image, 0, 0, width, width * h/w, x1, y1, w, h)
-            } else {
-                context.drawImage(image, x1, y1, w, h)
-            }
+            context.drawImage(image, x1, y1, w, h)
             resolve({
                 startX: x1,
                 startY: y1,
@@ -40,4 +140,15 @@ export default function drawImage(img, x1, y1, w, h, align, zoom) {
         }
         image.src = img
     })
+}
+
+export class Sprite {
+    constructor(imgSrc) {
+        this.img = wx.createImage()
+        this.img.src = imgSrc
+
+    }
+    render(context, x1, y1, w, h, align, zoom) {
+        return handleImageLoad(context, null, this.img, x1, y1, w, h, align, zoom)
+    } 
 }

Album/js/util/drawText.js

@@ -1,6 +1,5 @@
-let ctx = canvas.getContext('2d')
 
-export default function drawText(text, x, y, align='left top', font_size = 28, color = '#000') {
+export default function drawText(ctx, text, x, y, align='left top', font_size = 28, color = '#000') {
     return new Promise(function(resolve, reject) {
         let r_x
         let r_y

Album/project.config.json

@@ -8,7 +8,7 @@
 		"newFeature": true
 	},
 	"compileType": "game",
-	"libVersion": "1.9.98",
+	"libVersion": "2.1.1",
 	"appid": "wx605448628d21d682",
 	"projectname": "Album",
 	"isGameTourist": true,