去除 iPhoneX 单独适配 使用 context.translate

商品详情弹窗

Album/js/draw/FirstLevelDirectory.js

@@ -1,19 +1,3 @@
-/*
-绘制一级目录列表
-*/
-//获取手机屏幕大小信息
-var sw = 0
-var sh = 0
-wx.getSystemInfo({
-  success: function (res) {
-    sw = res.screenWidth
-    sh = res.screenHeight
-  }
-})
-const screenWidth = sw
-const screenHeight = sh
-
-
 export default class FLD {
   drawFLD(context, image, status, index, text) {
     //console.log(index)
@@ -23,48 +7,48 @@ export default class FLD {
       //根据是第几个一级目录画图标
       image.onload = function () {
         let ratio = image.width / image.height
-        context.drawImage(image, (screenWidth - 48) * 2, (index * 50) * 2, 50 * 2, (50/ratio)* 2)
+        context.drawImage(image, (screenWidth - 95), (index * 50) * 2, 50 * 2, (50/ratio)* 2)
       }
       //把目录名字加上
       //drawText(text, index)
       context.fillStyle = '#000'
       context.font = "20px Arial"
       if(text.length == 1){
-        context.fillText(text, (screenWidth - 29) * 2, ((index + 2) * 50 - 4) * 2)
+        context.fillText(text, (screenWidth - 58), ((index + 2) * 50 - 4) * 2)
       }
       if (text.length == 2) {
-        context.fillText(text, (screenWidth - 33) * 2, ((index + 2) * 50 - 4) * 2)
+        context.fillText(text, (screenWidth - 66), ((index + 2) * 50 - 4) * 2)
       }
       if (text.length == 3) {
-        context.fillText(text, (screenWidth - 39) * 2, ((index + 2) * 50 - 4) * 2)
+        context.fillText(text, (screenWidth - 78), ((index + 2) * 50 - 4) * 2)
       }
       if (text.length == 4) {
-        context.fillText(text, (screenWidth - 45) * 2, ((index + 2) * 50 - 4) * 2)
+        context.fillText(text, (screenWidth - 90), ((index + 2) * 50 - 4) * 2)
       }
     }
     else {
       //将选项背景换成白色，左边界变成红色
       context.fillStyle = '#fff'
-      context.fillRect((screenWidth - 48) * 2, (index * 50 + 50) * 2, 50 * 2, 50 * 2)
+      context.fillRect((screenWidth - 96), (index * 50 + 50) * 2, 50 * 2, 50 * 2)
       context.fillStyle = '#FFA500'
-      context.fillRect((screenWidth - 50) * 2, (index * 50 + 50) * 2, 2 * 2, 50 * 2)
+      context.fillRect((screenWidth - 100), (index * 50 + 50) * 2, 2 * 2, 50 * 2)
       image.onload = function () {
         let ratio = image.width / image.height
-        context.drawImage(image, (screenWidth - 48) * 2, (index * 50) * 2, 50 * 2, (50 / ratio) * 2)
+        context.drawImage(image, (screenWidth - 96), (index * 50) * 2, 50 * 2, (50 / ratio) * 2)
       }
       context.fillStyle = '#000'
       context.font = "20px Arial"
       if (text.length == 1) {
-        context.fillText(text, (screenWidth - 29) * 2, ((index + 2) * 50 - 4) * 2)
+        context.fillText(text, (screenWidth - 58), ((index + 2) * 50 - 4) * 2)
       }
       if (text.length == 2) {
-        context.fillText(text, (screenWidth - 33) * 2, ((index + 2) * 50 - 4) * 2)
+        context.fillText(text, (screenWidth - 66), ((index + 2) * 50 - 4) * 2)
       }
       if (text.length == 3) {
-        context.fillText(text, (screenWidth - 39) * 2, ((index + 2) * 50 - 4) * 2)
+        context.fillText(text, (screenWidth - 78), ((index + 2) * 50 - 4) * 2)
       }
       if (text.length == 4) {
-        context.fillText(text, (screenWidth - 45) * 2, ((index + 2) * 50 - 4) * 2)
+        context.fillText(text, (screenWidth - 90), ((index + 2) * 50 - 4) * 2)
       }
     }
     index++

Album/js/draw/ProductModal.js

@@ -0,0 +1,68 @@
+import drawText from '../util/drawText.js'
+import drawImage from '../util/drawImage.js'
+import Modal from './Modal'
+
+export default class ProductModal extends Modal {
+  constructor(context, goodDetail) {
+    super()
+    this.bg_pop_win = 'images/product_popup/bg_win@2x.png'
+    this.context = context
+    this.goodDetail = goodDetail
+    this.bg_acitve = 'info'
+  }
+  drawContent = () => {
+    let ctx = this.context
+    let next
+    let startX = this.win_dimension.startX + 13;
+    let startY = this.win_dimension.startY + 76;
+    let bg_active_offsetX = 25
+    let bg_active_offsetY = 7
+    //详情
+    if (this.bg_acitve === 'info') {
+      next = drawImage('images/product_popup/btn_info_active@2x.png', startX - bg_active_offsetX, startY - bg_active_offsetY)
+    } else {
+      next = drawImage('images/product_popup/btn_info@2x.png', this.win_dimension.startX + 13, startY)
+    }
+    //搭配
+    if (this.bg_acitve === 'combin') {
+      next = next.then((dimension) => {
+        return drawImage('images/product_popup/btn_combin_active@2x.png', startX - bg_active_offsetX, dimension.endY - bg_active_offsetY)
+      })
+    } else {
+      next = next.then((dimension) => {
+        return drawImage('images/product_popup/btn_combin@2x.png', startX, dimension.endY)
+      })
+    }
+    //购买
+    if (this.bg_acitve === 'buy') {
+      next = next.then((dimension) => {
+        return drawImage('images/product_popup/btn_buy_active@2x.png', startX - bg_active_offsetX, dimension.endY - bg_active_offsetY)
+      })
+    } else {
+      next = next.then((dimension) => {
+        return drawImage('images/product_popup/btn_buy@2x.png', startX, dimension.endY)
+      })
+    }
+    if (this.goodDetail.is_favorite) {
+      next.then((dimension) => {
+        return drawImage('images/product_popup/btn_fav_active@2x.png', startX, this.win_dimension.endY - 13, 'bottom')
+      })
+    } else {
+      next.then((dimension) => {
+        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')
+      })
+    }
+    //商品图
+    next = next.then((dimension) => {
+      return drawImage(
+        this.goodDetail.detail,
+        dimension.endX,
+        startY,
+        this.win_dimension.width - 26 - dimension.width,
+        this.win_dimension.height - 76 - 13)
+    })
+
+  }
+}

Album/js/draw/SecondLevelDirectory.js

@@ -23,64 +23,34 @@ const screenHeight = sh
 export default class SLD {
   drawSLD(context, status, index, text) {
     index = index + 4
-    if(isiPhoneX){
-      //未被选中时
-      if (status == false) {
-        //绘制文字，选中和未选中状态下文字颜色不一样
-        context.fillStyle = '#696969'
-        context.font = "20px Arial"
-        //文字总是保持居中，只考虑了2个和3个字
-        if (text.length == 3) {
-          context.fillText(text, 70+2 * 2, (index * 25 + 50) * 2)
-        }
-        if (text.length == 2) {
-          context.fillText(text, 70+8 * 2, (index * 25 + 50) * 2)
-        }
-      }
-      else {//当被选中时，突出显示
-        context.fillStyle = '#dcdcdc'
-        context.fillRect(70, (index * 25 + 35) * 2, 40 * 2, 50, )
+    
+    //未被选中时
+    if (status == false) {
 
-        ///绘制文字，选中和未选中状态下文字颜色不一样
-        context.fillStyle = '#FFA500'
-        context.font = "20px Arial"
-        //文字总是保持居中，只考虑了2个和3个字
-        if (text.length == 3) {
-          context.fillText(text, 70+2 * 2, (index * 25 + 50) * 2)
-        }
-        if (text.length == 2) {
-          context.fillText(text, 70+8 * 2, (index * 25 + 50) * 2)
-        }
+      //绘制文字，选中和未选中状态下文字颜色不一样
+      context.fillStyle = '#696969'
+      context.font = "20px Arial"
+      //文字总是保持居中，只考虑了2个和3个字
+      if (text.length == 3) {
+        context.fillText(text, 2 * 2, (index * 25 +50) * 2)
       }
-    }else{
-      //未被选中时
-      if (status == false) {
-
-        //绘制文字，选中和未选中状态下文字颜色不一样
-        context.fillStyle = '#696969'
-        context.font = "20px Arial"
-        //文字总是保持居中，只考虑了2个和3个字
-        if (text.length == 3) {
-          context.fillText(text, 2 * 2, (index * 25 +50) * 2)
-        }
-        if (text.length == 2) {
-          context.fillText(text, 8 * 2, (index * 25 +50) * 2)
-        }
+      if (text.length == 2) {
+        context.fillText(text, 8 * 2, (index * 25 +50) * 2)
+      }
+    }
+    else {//当被选中时，突出显示
+      context.fillStyle = '#dcdcdc'
+      context.fillRect(0, (index * 25 + 35) * 2, 40 * 2, 50,)
+      
+      ///绘制文字，选中和未选中状态下文字颜色不一样
+      context.fillStyle = '#FFA500'
+      context.font = "20px Arial"
+      //文字总是保持居中，只考虑了2个和3个字
+      if (text.length == 3) {
+        context.fillText(text, 2 * 2, (index * 25 + 50) * 2)
       }
-      else {//当被选中时，突出显示
-        context.fillStyle = '#dcdcdc'
-        context.fillRect(0, (index * 25 + 35) * 2, 40 * 2, 50,)
-        
-        ///绘制文字，选中和未选中状态下文字颜色不一样
-        context.fillStyle = '#FFA500'
-        context.font = "20px Arial"
-        //文字总是保持居中，只考虑了2个和3个字
-        if (text.length == 3) {
-          context.fillText(text, 2 * 2, (index * 25 + 50) * 2)
-        }
-        if (text.length == 2) {
-          context.fillText(text, 8 * 2, (index * 25 + 50) * 2)
-        }
+      if (text.length == 2) {
+        context.fillText(text, 8 * 2, (index * 25 + 50) * 2)
       }
     }
     

Album/js/draw/base.js

@@ -1,61 +1,27 @@
-//获取手机屏幕大小信息
-var sw = 0
-var sh = 0
-//是否为iPhoneX
-let isiPhoneX = false
-wx.getSystemInfo({
-  success: function (res) {
-    sw = res.screenWidth
-    sh = res.screenHeight
-    let mobileType = res.model
-    if (mobileType == 'iPhone X') isiPhoneX = true
-    else isiPhoneX = false
-  }
-})
-const screenWidth = sw
-const screenHeight = sh
-
 /*
 画两边的灰色选择栏和下一页按钮
 */
 function basePage(context) {
-  if (isiPhoneX) {
-    context.fillStyle = '#fff'
-    context.fillRect(35 * 2, 0, screenWidth * 2, screenHeight * 2)
-    context.fillStyle = '#f8f8f8'
-    context.fillRect(35 * 2, 0, screenWidth * 2, 40 * 2)
-    context.fillRect(35 * 2, 50 * 2, 40 * 2, screenHeight * 2)
-    context.fillRect((screenWidth - 50) * 2, 50 * 2, 50 * 2, screenHeight * 2)
-    context.fillStyle = '#FFA500'
-    context.fillRect((screenWidth - 50) * 2, (screenHeight - 30) * 2, 50 * 2, 30 * 2)
-    context.fillRect((screenWidth - 50) * 2, (screenHeight - 65) * 2, 50 * 2, 30 * 2)
-    context.font = '20px Arial'
-    context.fillStyle = '#696969'
-    context.fillText('新品上市', 35 * 2, 70 * 2)
-    context.fillText('促销产品', 35 * 2, 95 * 2)
-    context.fillText('风格', 35 * 2, 120 * 2)
-  } else {
-    context.fillStyle = '#fff'
-    context.fillRect(0, 0, screenWidth * 2, screenHeight * 2)
-    context.fillStyle = '#f8f8f8'
-    context.fillRect(0, 0, screenWidth * 2, 40 * 2)
-    context.fillRect(0, 50 * 2, 40 * 2, screenHeight * 2)
-    context.fillRect((screenWidth - 50) * 2, 50 * 2, 50 * 2, screenHeight * 2)
-    context.fillStyle = '#FFA500'
-    context.fillRect((screenWidth - 50) * 2, (screenHeight - 30) * 2, 50 * 2, 30 * 2)
-    context.fillRect((screenWidth - 50) * 2, (screenHeight - 65) * 2, 50 * 2, 30 * 2)
-    context.font = '20px Arial'
-    context.fillStyle = '#696969'
-    context.fillText('新品上市', 0, 70 * 2)
-    context.fillText('促销产品', 0, 95 * 2)
-    context.fillText('风格', 0, 120 * 2)
-  }
+  context.fillStyle = '#fff'
+  context.fillRect(0, 0, screenWidth, screenHeight)
+  context.fillStyle = '#f8f8f8'
+  context.fillRect(0, 0, screenWidth, 40 * 2)
+  context.fillRect(0, 50 * 2, 40 * 2, screenHeight)
+  context.fillRect(screenWidth - 100, 50 * 2, 50 * 2, screenHeight)
+  context.fillStyle = '#FFA500'
+  context.fillRect(screenWidth - 100, (screenHeight - 60), 50 * 2, 30 * 2)
+  context.fillRect(screenWidth - 100, (screenHeight - 130), 50 * 2, 30 * 2)
+  context.font = '20px Arial'
+  context.fillStyle = '#696969'
+  context.fillText('新品上市', 0, 70 * 2)
+  context.fillText('促销产品', 0, 95 * 2)
+  context.fillText('风格', 0, 120 * 2)
   context.fillStyle = '#FFA500'
   context.fillRect(300, 20, 100, 40)
   context.fillStyle = '#fff'
   context.font = "26px Arial"
-  context.fillText('下一页', (screenWidth - 46) * 2, (screenHeight - 9) * 2)
-  context.fillText('上一页', (screenWidth - 46) * 2, (screenHeight - 44) * 2)
+  // context.fillText('下一页', (screenWidth - 92), (screenHeight - 18))
+  // context.fillText('上一页', (screenWidth - 92), (screenHeight - 88))
   context.font = "26px Arial"
   context.fillText('搜索', 320, 50)
   context.fillRect(76,20,220,40)

Album/js/main.js

@@ -6,6 +6,7 @@ import Details, { DetailbtnArea } from './draw/details.js'
 import setPrice from './draw/price.js'
 
 import ContactModal from './draw/ContactModal.js'
+import ProductModal from './draw/ProductModal.js'
 //import canvas from './libs/weapp-adapter.js'
 
 var url = 'https://t6.9026.com/api/album/cat?parent_id=0&store_id=1'//初始顶级目录url
@@ -18,44 +19,19 @@ var flag1 = 0//通过flag1来判断现在处于哪一个顶级目录，然后利
 var flag2 = 0//通过flag1来判断现在处于哪一个二级目录，然后利用flag2传参数获取该顶级目录下的商品列表
 var flag3 = 0//通过flag3来判断选择的是哪一个商品，然后获取它的的详情
 var flag4 = 0//价格设置参考参数
-//获取手机屏幕大小信息
 
-var sw = 0
-var sh = 0
 //是否为iPhoneX
-let isiPhoneX = false
-wx.getSystemInfo({
-  success: function (res) {
-    sw = res.screenWidth
-    sh = res.screenHeight
-    let mobileType = res.model
-    if (mobileType == 'iPhone X') isiPhoneX = true
-    else isiPhoneX = false
-  }
-})
-console.log('iphonex:' + isiPhoneX)
-const screenWidth = sw
-const screenHeight = sh
+let isiPhoneX
 //定义画布
 //let canvas = wx.createCanvas()
-let drawRatio = GameGlobal.drawRatio = 2
-canvas.height = screenHeight * drawRatio
-canvas.width = screenWidth * drawRatio
-let context = canvas.getContext('2d')
+let context
 
 //中间商品列表显示区绘制辅助变量
-var imgx = 0
-var imgy = 0
-if (isiPhoneX) {
-  imgx = (screenWidth - 240 - 35) / 3
-  imgy = (screenHeight - 118) / 3
-} else {
-  imgx = (screenWidth - 180) / 3
-  imgy = (screenHeight - 118) / 3
-}
-const imgX = imgx
-const imgY = imgy
-const imgyy = (screenHeight - 95) / 9
+let imgx = 0
+let imgy = 0
+let imgX = 0
+let imgY = 0
+let imgyy = 0
 
 //定义按钮区域
 //一级目录按钮区域
@@ -63,41 +39,90 @@ let FLDbtnArea = []
 //二级目录按钮区域
 let SLDbtnArea = []
 
-if (isiPhoneX) {
-  //产品列表区域
-  var CA = [{ startX: 67 + 75, startY: 42, endX: 67 + imgX + 75, endY: 42 + imgY + 25, status: false }, { startX: 77 + 75 + imgX, startY: 42, endX: 77 + 75 + imgX + imgX, endY: 42 + imgY + 25, status: false }, { startX: 87 + 75 + imgX + imgX, startY: 42, endX: 87 + 75 + imgX + imgX + imgX, endY: 42 + 25 + imgY, status: false },
-  { startX: 67 + 75, startY: 42 + imgY + 25, endX: 67 + imgX + 75, endY: 42 + imgY + 25 + imgY + 25, status: false }, { startX: 77 + 75 + imgX, startY: 42 + imgY + 25, endX: 77 + 75 + imgX + imgX, endY: 42 + imgY + 25 + imgY + 25, status: false }, { startX: 87 + 75 + imgX + imgX, startY: 42 + imgY + 25, endX: 87 + 75 + imgX + imgX + imgX, endY: 42 + imgY + 25 + imgY + 25, status: false },
-  { startX: 67 + 75, startY: 42 + imgY + 25 + imgY + 25, endX: 67 + 75 + imgX, endY: 42 + imgY + 25 + imgY + 25 + imgY + 25, status: false }, { startX: 77 + 75 + imgX, startY: 42 + imgY + 25 + imgY + 25, endX: 77 + 75 + imgX + imgX, endY: 42 + imgY + 25 + imgY + 25 + imgY + 25, status: false }, { startX: 87 + 75 + imgX + imgX, startY: 42 + imgY + 25 + imgY + 25, endX: 87 + 75 + imgX + imgX + imgX, endY: 42 + imgY + 25 + imgY + 25 + imgY + 25, status: false }]
-  //详情界面按钮区域
-  var DA = [{ startX: 35, startY: screenHeight - 50, endX: 50 + 35, endY: screenHeight }, { startX: screenWidth / 2 - 200 + 35, startY: screenHeight - 35, endX: screenWidth / 2 - 110 + 35, endY: screenHeight - 12 }, { startX: screenWidth / 2 - 100 + 35, startY: screenHeight - 35, endX: screenWidth / 2 - 10 + 35, endY: screenHeight - 12 }, { startX: screenWidth / 2 + 35, startY: screenHeight - 35, endX: screenWidth / 2 + 90 + 35, endY: screenHeight - 12 }, { startX: screenWidth / 2 + 100 + 35, startY: screenHeight - 35, endX: screenWidth / 2 + 190 + 35, endY: screenHeight - 12 }, { startX: 10 + 35, startY: screenHeight / 2 - 15, endX: 40 + 35, endY: screenHeight / 2 + 15 }, { startX: screenWidth - 40, startY: screenHeight / 2 - 15, endX: screenWidth - 10, endY: screenHeight / 2 + 15 }]
-  //新品上市，促销产品，风格
-  var SA = [{ startX: 35, startY: 50, endX: 60, endY: 75, status: true }, { startX: 35, startY: 75, endX: 60, endY: 100, status: false }, { startX: 35, startY: 100, endX: 60, endY: 125, status: false }, { startX: 35, startY: screenHeight - 60, endX: 75, endY: screenHeight - 30 }, { startX: 35, startY: screenHeight - 30, endX: 75, endY: screenHeight }]
-} else {
-  //产品列表区域
-  var CA = [{ startX: 67, startY: 42, endX: 67 + imgX, endY: 42 + imgY + 25, status: false }, { startX: 77 + imgX, startY: 42, endX: 77 + imgX + imgX, endY: 42 + imgY + 25, status: false }, { startX: 87 + imgX + imgX, startY: 42, endX: 87 + imgX + imgX + imgX, endY: 42 + 25 + imgY, status: false },
-  { startX: 67, startY: 42 + imgY + 25, endX: 67 + imgX, endY: 42 + imgY + 25 + imgY + 25, status: false }, { startX: 77 + imgX, startY: 42 + imgY + 25, endX: 77 + imgX + imgX, endY: 42 + imgY + 25 + imgY + 25, status: false }, { startX: 87 + imgX + imgX, startY: 42 + imgY + 25, endX: 87 + imgX + imgX + imgX, endY: 42 + imgY + 25 + imgY + 25, status: false },
-  { startX: 67, startY: 42 + imgY + 25 + imgY + 25, endX: 67 + imgX, endY: 42 + imgY + 25 + imgY + 25 + imgY + 25, status: false }, { startX: 77 + imgX, startY: 42 + imgY + 25 + imgY + 25, endX: 77 + imgX + imgX, endY: 42 + imgY + 25 + imgY + 25 + imgY + 25, status: false }, { startX: 87 + imgX + imgX, startY: 42 + imgY + 25 + imgY + 25, endX: 87 + imgX + imgX + imgX, endY: 42 + imgY + 25 + imgY + 25 + imgY + 25, status: false }]
-  //详情界面按钮区域
-  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 }]
-  //新品上市，促销产品，风格
-  var SA = [{ startX: 0, startY: 50, endX: 25, endY: 75, status: true }, { startX: 0, startY: 75, endX: 25, endY: 100, status: false }, { startX: 0, startY: 100, endX: 25, endY: 125, status: false }, { startX: 0, startY: screenHeight - 60, endX: 40, endY: screenHeight - 30 }, { startX: 0, startY: screenHeight - 30, endX: 40, endY: screenHeight }]
-}
+let CA = []
+let DA = []
+let SA = []
 
-const ContentbtnArea = [...CA]
-const SLDArea = [...SA]
+let ContentbtnArea
+let SLDArea
 
 //搜索按钮
-let SearchButton = [{ startX: 38, startY: 10, endX: 140, endY: 30 }, { startX: 150, startY: 10, endX: 200, endY: 30 }]
+let SearchButton = []
 //翻页按钮
-const pageArea = [{ startX: screenWidth - 50, startY: screenHeight - 30, endX: screenWidth, endY: screenHeight }, { startX: screenWidth - 50, startY: screenHeight - 65, endX: screenWidth, endY: screenHeight - 35 }]
+let pageArea = []
 //尺寸安装图片转换界面
-const 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 }]
+let attrArea = []
 //setprice
 
-const setpriceArea = [{ startX: screenWidth - 100, startY: 50, endX: screenWidth - 50, endY: 50 + imgyy + 5 }, { startX: screenWidth - 100, startY: 50 + imgyy + 5, endX: screenWidth - 50, endY: 50 + (imgyy + 5) * 2 }, { startX: screenWidth - 100, startY: 50 + (imgyy + 5) * 2, endX: screenWidth - 50, endY: 50 + (imgyy + 5) * 3 }, { startX: screenWidth - 100, startY: 50 + (imgyy + 5) * 3, endX: screenWidth - 50, endY: 50 + (imgyy + 5) * 4 }, { startX: screenWidth - 100, startY: 50 + (imgyy + 5) * 4, endX: screenWidth - 50, endY: 50 + (imgyy + 5) * 5 }, { startX: screenWidth - 100, startY: 50 + (imgyy + 5) * 5, endX: screenWidth - 50, endY: 50 + (imgyy + 5) * 6 }, { startX: screenWidth - 100, startY: 50 + (imgyy + 5) * 6, endX: screenWidth - 50, endY: 50 + (imgyy + 5) * 7 }, { startX: screenWidth - 100, startY: 50 + (imgyy + 5) * 7, endX: screenWidth - 50, endY: 50 + (imgyy + 5) * 8 }, { startX: screenWidth - 100, startY: 50 + (imgyy + 5) * 8, endX: screenWidth - 50, endY: 50 + (imgyy + 5) * 9 }]
+let setpriceArea = []
 // setprice ok
 
-const 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 },]
+let sp = []
+
+GameGlobal.isiPhoneX = false
+let res = wx.getSystemInfoSync()
+function init() {
+  console.log('init')
+  let mobileType = res.model
+
+  let drawRatio = GameGlobal.drawRatio = 2
+  canvas.width = res.screenWidth * drawRatio
+  canvas.height = res.screenHeight * drawRatio
+
+  context = canvas.getContext('2d')
+
+  if (mobileType == 'iPhone X') {
+    GameGlobal.isiPhoneX = true
+    context.translate(70, 0)
+    GameGlobal.offsetX = 70
+  } else {
+    GameGlobal.isiPhoneX = false
+    GameGlobal.offsetX = 0
+  }
+  GameGlobal.screenWidth = res.screenWidth * 2 - 70
+  GameGlobal.screenHeight = res.screenHeight * 2
+  GameGlobal.font_size = 28
+  console.log('screenWidth: ' + screenWidth + ', screenHeight: ' + screenHeight)
+
+  context.fillStyle = '#fff'
+  context.fillRect(0, 0, screenWidth * 2, screenHeight * 2)
+  
+  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 CA = [{ startX: 67, startY: 42, endX: 67 + imgX, endY: 42 + imgY + 25, status: false }, { startX: 77 + imgX, startY: 42, endX: 77 + imgX + imgX, endY: 42 + imgY + 25, status: false }, { startX: 87 + imgX + imgX, startY: 42, endX: 87 + imgX + imgX + imgX, endY: 42 + 25 + imgY, status: false },
+    { startX: 67, startY: 42 + imgY + 25, endX: 67 + imgX, endY: 42 + imgY + 25 + imgY + 25, status: false }, { startX: 77 + imgX, startY: 42 + imgY + 25, endX: 77 + imgX + imgX, endY: 42 + imgY + 25 + imgY + 25, status: false }, { startX: 87 + imgX + imgX, startY: 42 + imgY + 25, endX: 87 + imgX + imgX + imgX, endY: 42 + imgY + 25 + imgY + 25, status: false },
+    { startX: 67, startY: 42 + imgY + 25 + imgY + 25, endX: 67 + imgX, endY: 42 + imgY + 25 + imgY + 25 + imgY + 25, status: false }, { startX: 77 + imgX, startY: 42 + imgY + 25 + imgY + 25, endX: 77 + imgX + imgX, endY: 42 + imgY + 25 + imgY + 25 + imgY + 25, status: false }, { startX: 87 + imgX + imgX, startY: 42 + imgY + 25 + imgY + 25, endX: 87 + imgX + imgX + imgX, endY: 42 + imgY + 25 + imgY + 25 + imgY + 25, status: false }]
+    //详情界面按钮区域
+    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 }]
+    //新品上市，促销产品，风格
+    var SA = [{ startX: 0, startY: 50, endX: 25, endY: 75, status: true }, { startX: 0, startY: 75, endX: 25, endY: 100, status: false }, { startX: 0, startY: 100, endX: 25, endY: 125, status: false }, { startX: 0, startY: screenHeight - 60, endX: 40, endY: screenHeight - 30 }, { startX: 0, startY: screenHeight - 30, endX: 40, endY: screenHeight }]
+  ContentbtnArea = [...CA]
+  SLDArea = [...SA]
+  //搜索按钮
+  SearchButton = [{ startX: 38, startY: 10, endX: 140, endY: 30 }, { startX: 150, startY: 10, endX: 200, endY: 30 }]
+  //翻页按钮
+  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 }]
+  //setprice
+
+  setpriceArea = [{ startX: screenWidth - 100, startY: 50, endX: screenWidth - 50, endY: 50 + imgyy + 5 }, { startX: screenWidth - 100, startY: 50 + imgyy + 5, endX: screenWidth - 50, endY: 50 + (imgyy + 5) * 2 }, { startX: screenWidth - 100, startY: 50 + (imgyy + 5) * 2, endX: screenWidth - 50, endY: 50 + (imgyy + 5) * 3 }, { startX: screenWidth - 100, startY: 50 + (imgyy + 5) * 3, endX: screenWidth - 50, endY: 50 + (imgyy + 5) * 4 }, { startX: screenWidth - 100, startY: 50 + (imgyy + 5) * 4, endX: screenWidth - 50, endY: 50 + (imgyy + 5) * 5 }, { startX: screenWidth - 100, startY: 50 + (imgyy + 5) * 5, endX: screenWidth - 50, endY: 50 + (imgyy + 5) * 6 }, { startX: screenWidth - 100, startY: 50 + (imgyy + 5) * 6, endX: screenWidth - 50, endY: 50 + (imgyy + 5) * 7 }, { startX: screenWidth - 100, startY: 50 + (imgyy + 5) * 7, endX: screenWidth - 50, endY: 50 + (imgyy + 5) * 8 }, { startX: screenWidth - 100, startY: 50 + (imgyy + 5) * 8, endX: screenWidth - 50, endY: 50 + (imgyy + 5) * 9 }]
+  // setprice ok
+
+  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 },]
+}
+init()
 
 //定义目录选中状态
 let FLDstatus = false
@@ -339,8 +364,8 @@ function reStart() {
 wx.onTouchStart(((e) => {
   try {
     //e.preventDefault()
-    var x = e.touches[0].clientX
-    var y = e.touches[0].clientY
+    var x = e.touches[0].clientX * 2 - offsetX
+    var y = e.touches[0].clientY * 2
     startx = x
     starty = y
   } catch (evt) {
@@ -553,7 +578,7 @@ wx.onTouchStart(((e) => {
         })
       }
     }
-    if(isAgent == true){
+    if (isAgent == true) {
       if (x >= SLDArea[3].startX
         && x <= SLDArea[3].endX
         && y >= SLDArea[3].startY
@@ -688,7 +713,7 @@ wx.onTouchStart(((e) => {
               method: 'GET',
               success: function () {
                 wx.showToast({
-                  title: GoodsSource[flag4].name+'价格已更新为'+pricein,
+                  title: GoodsSource[flag4].name + '价格已更新为' + pricein,
                   icon: 'none',
                   duration: 1500
                 })
@@ -744,7 +769,7 @@ wx.onTouchStart(((e) => {
           method: 'GET',
           success: function () {
             wx.showToast({
-              title: '联系电话已更新为'+mobilein,
+              title: '联系电话已更新为' + mobilein,
               icon: 'none',
               duration: 1500
             })
@@ -756,8 +781,6 @@ wx.onTouchStart(((e) => {
   }
   else {//在详情界面的时候
     if (attrFlag == false) {
-      x = x * 2 - GameGlobal.offsetX
-      y = y * 2
       //  点击返回按钮返回原来界面
       if (x >= DetailbtnArea[0].startX
         && x <= DetailbtnArea[0].endX
@@ -809,12 +832,13 @@ wx.onTouchStart(((e) => {
         && y <= DetailbtnArea[3].endY) {
         if (Buttonstatus == true) Buttonstatus = false
         else Buttonstatus = true
-        let img = new wx.createImage()
-        img.src = GoodsDetail.detail
-        img.onload = function () {
-          let ratio = img.width / img.height
-          context.drawImage(img, screenWidth - (screenHeight - 80) * ratio, 60, (screenHeight - 80) * 2 * ratio, (screenHeight - 80) * 2)
-        }
+        // let img = new wx.createImage()
+        // img.src = GoodsDetail.detail
+        // img.onload = function () {
+        //   let ratio = img.width / img.height
+        //   context.drawImage(img, screenWidth - (screenHeight - 80) * ratio, 60, (screenHeight - 80) * 2 * ratio, (screenHeight - 80) * 2)
+        // }
+        new ProductModal(context, GoodsDetail).draw()
       }
       //尺寸&安装
       if (x >= DetailbtnArea[4].startX
@@ -843,46 +867,46 @@ wx.onTouchStart(((e) => {
           }
         }
       }
-      // //上一张
-      // if (x >= DetailbtnArea[5].startX
-      //   && x <= DetailbtnArea[5].endX
-      //   && y >= DetailbtnArea[5].startY
-      //   && y <= DetailbtnArea[5].endY) {
-      //   Buttonstatus = false
-      //   if (flag3 <= 0) {
-      //     wx.showToast({
-      //       title: '已经是第一个了',
-      //       icon: 'none',
-      //       duration: 800
-      //     })
-      //     flag3 = 0
-      //     reStart()
-      //   }
-      //   if (flag3 > 0) {
-      //     flag3 = flag3 - 1
-      //     console.log('flag3:' + flag3)
-      //     getGoodsDetail(callback4, GoodsSource)
-      //   }
-      // }
-      // //下一张
-      // if (x >= DetailbtnArea[6].startX
-      //   && x <= DetailbtnArea[6].endX
-      //   && y >= DetailbtnArea[6].startY
-      //   && y <= DetailbtnArea[6].endY) {
-      //   Buttonstatus = false
-      //   if (flag3 == GoodsSource.length - 1) {
-      //     wx.showToast({
-      //       title: '已经是最后一个了',
-      //       icon: 'none',
-      //       duration: 800
-      //     })
-      //   }
-      //   if (flag3 < GoodsSource.length - 1) {
-      //     flag3 = flag3 + 1
-      //     console.log('flag3:' + flag3)
-      //     getGoodsDetail(callback4, GoodsSource)
-      //   }
-      // }
+      //上一张
+      if (x >= DetailbtnArea[5].startX
+        && x <= DetailbtnArea[5].endX
+        && y >= DetailbtnArea[5].startY
+        && y <= DetailbtnArea[5].endY) {
+        Buttonstatus = false
+        if (flag3 <= 0) {
+          wx.showToast({
+            title: '已经是第一个了',
+            icon: 'none',
+            duration: 800
+          })
+          flag3 = 0
+          reStart()
+        }
+        if (flag3 > 0) {
+          flag3 = flag3 - 1
+          console.log('flag3:' + flag3)
+          getGoodsDetail(callback4, GoodsSource)
+        }
+      }
+      //下一张
+      if (x >= DetailbtnArea[6].startX
+        && x <= DetailbtnArea[6].endX
+        && y >= DetailbtnArea[6].startY
+        && y <= DetailbtnArea[6].endY) {
+        Buttonstatus = false
+        if (flag3 == GoodsSource.length - 1) {
+          wx.showToast({
+            title: '已经是最后一个了',
+            icon: 'none',
+            duration: 800
+          })
+        }
+        if (flag3 < GoodsSource.length - 1) {
+          flag3 = flag3 + 1
+          console.log('flag3:' + flag3)
+          getGoodsDetail(callback4, GoodsSource)
+        }
+      }
       //隐藏或显示按钮
       if (x >= DetailbtnArea[5].endX
         && x <= DetailbtnArea[6].startX
@@ -965,8 +989,8 @@ wx.onTouchStart(((e) => {
 }))
 //滑动响应函数
 wx.onTouchEnd(((e) => {
-  var endX = e.changedTouches[0].clientX
-  var endY = e.changedTouches[0].clientY
+  var endX = e.changedTouches[0].clientX * 2 - 70
+  var endY = e.changedTouches[0].clientY * 2
   if (Detailstatus == false) {
 
   }
@@ -1049,10 +1073,10 @@ function callback1(res) {
     let s = false
     if (i == flag1) s = true
     let FLDobj = new Object()
-    FLDobj.startX = screenWidth - 50
-    FLDobj.startY = 50 * (i + 1)
+    FLDobj.startX = screenWidth - 100
+    FLDobj.startY = 100 * (i + 1)
     FLDobj.endX = screenWidth
-    FLDobj.endY = 50 * (i + 2)
+    FLDobj.endY = 100 * (i + 2)
     FLDobj.status = s
     FLDbtnArea.push(FLDobj)
   }
@@ -1098,18 +1122,10 @@ function callback2(res) {
     let s = false
     if (i == flag2) s = true
     let SLDobj = new Object()
-    if (isiPhoneX) {
-      SLDobj.startX = 35
-    } else {
       SLDobj.startX = 0
-    }
-    SLDobj.startY = 25 * (i + 4) + 35
-    if (isiPhoneX) {
-      SLDobj.endX = 70
-    } else {
+    SLDobj.startY = 50 * (i + 4) + 70
       SLDobj.endX = 40
-    }
-    SLDobj.endY = 25 * (i + 5) + 35
+    SLDobj.endY = 50 * (i + 5) + 70
     SLDobj.status = s
     SLDbtnArea.push(SLDobj)
   }
@@ -1201,8 +1217,7 @@ function callback4(res) {
 }
 
 function UserLogin() {
-  context.fillStyle = '#fff'
-  context.fillRect(0,0,screenWidth*2,screenHeight*2)
+  
   wx.showLoading({
     title: '正在登录',
   })
@@ -1251,24 +1266,6 @@ function UserLogin() {
       })
     }
   })
-  GameGlobal.isiPhoneX = false
-  wx.getSystemInfo({
-    success: function (res) {
-      let mobileType = res.model
-      if (mobileType == 'iPhone X') {
-        GameGlobal.isiPhoneX = true
-        context.translate(70, 0)
-        GameGlobal.offsetX = 70
-      } else {
-        GameGlobal.isiPhoneX = false
-        GameGlobal.offsetX = 0
-      }
-      GameGlobal.screenWidth = res.screenWidth * 2 - 70
-      GameGlobal.screenHeight = res.screenHeight * 2
-      GameGlobal.font_size = 28
-      console.log('screenWidth: ' + screenWidth + ', screenHeight: ' + screenHeight)
-    }
-  })
 }
 function sleep(time) {
   return new Promise((resolve) => setTimeout(resolve, time));

Album/js/util/EventBus.js

@@ -15,8 +15,7 @@ wx.onTouchStart((origin_e) => {
     //e.preventDefault()
     var x = origin_e.touches[0].clientX
     var y = origin_e.touches[0].clientY
-    startx = x
-    starty = y
+
   } catch (evt) {
     console.log(evt.message)
   }