2018/05/24/14:19

Album/js/main.js

@@ -46,16 +46,21 @@ let SLDstatus = false
 let Detailstatus = false
 //定义当前页数
 let page = 0
-
-
+//手指开始点击的坐标，用于判断手势滑动的左右方向
+let startx = 0
 //绘制函数
 function reStart() {
   console.log('reStartSuccess')//调用成功输出'reStartSuccess'
   reset()//清空之前屏幕上的绘制内容，减少缓存占用，及信息重叠
-  //添加触摸响应事件
+  //添加触摸点击响应事件
   canvas.addEventListener(
     'touchstart',
-    touchEventHandler
+    touchStartHandler
+  )
+  //添加触摸滑动事件
+  canvas.addEventListener(
+    'touchmove',
+    touchMoveHander
   )
   if (Detailstatus == false) {
     //绘制两个侧边栏
@@ -85,8 +90,17 @@ function reStart() {
     else {//当商品列表大于9的时候，需要翻页，通过变量page来控制绘制
       for (let j = page * 9; j < (page + 1) * 9; j++) {
         let img = wx.createImage()
-        img.src = GoodsSource[j].cover_pic
-        dir3.drawContent(context, img, j % 9, GoodsSource[j].name)
+        try {
+          img.src = GoodsSource[j].cover_pic
+          dir3.drawContent(context, img, j % 9, GoodsSource[j].name)
+        } catch (e) {
+          console.log(e.message)
+          /*wx.showToast({
+            title: '最后一页',
+            icon: 'none',
+            duration: 800
+          })*/
+        }
       }
       // if (page > (GoodsSource.length - 1) % 9) break //如果页数大于实际页数的话，停止绘制,避免出现获取不到资源而报错
     }
@@ -100,11 +114,12 @@ function reStart() {
 
 }
 //触摸响应函数
-function touchEventHandler(e) {
+function touchStartHandler(e) {
   try {
     e.preventDefault()
     var x = e.touches[0].clientX
     var y = e.touches[0].clientY
+    startx = x
   } catch (evt) {
     console.log(evt.message)
   }
@@ -219,6 +234,76 @@ function touchEventHandler(e) {
     }
   }
 
+}
+//滑动响应函数
+function touchMoveHander(e) {
+  try {
+    e.preventDefault()
+    var currentX = e.touches[0].clientX
+    var currentY = e.touches[0].clientY
+  } catch (evt) {
+    console.log(evt.message)
+  }
+  if (Detailstatus = false) {
+    //在商品界面滑动表示翻页
+    if (currentX - startx < 0) {//向左滑动
+      if (page > 0)//只有在当前页数大于0的时候才能往回翻页
+        page--//点击翻页时页数+1
+      if (page == 0) {
+        wx.showToast({
+          title: '已经是第一页了',
+          icon: 'none',
+          duration: 800
+        })
+      }
+      console.log(page)
+      //getFLDsource(callback1, url)//重绘
+      reStart()
+    }
+    if (currentX - startx > 0) {
+      if (page < (GoodsSource.length - 1) % 9 + 1)//只有在当前页数小于实际页数的时候才能再往上+
+        page++//点击翻页时页数+1
+      if (page = (GoodsSource.length - 1) % 9 + 1) {
+        wx.showToast({
+          title: '已经是最后一页了',
+          icon: 'none',
+          duration: 800
+        })
+      }
+      console.log(page)
+      //getFLDsource(callback1, url)//重绘
+      reStart()
+    }
+  }
+  if (Detailstatus == true) {//在详情界面，左右滑动，查看商品
+    if (currentX - x < 0) {//左滑
+      if (flag3 == 0) {
+        wx.showToast({
+          title: '已经是第一个了',
+          icon: 'none',
+          duration: 800
+        })
+      }
+      if (flag3 > 0) {
+        flag3--
+        getGoodsDetail(callback4, GoodsSource)
+      }
+    }
+    if (currentX - x > 0) {//右滑
+      if (flag3 == GoodsSource.length) {
+        wx.showToast({
+          title: '已经是最后一个了',
+          icon: 'none',
+          duration: 800
+        })
+      }
+      if (flag3 < GoodsSource.length) {
+        flag3++
+        getGoodsDetail(callback4, GoodsSource)
+      }
+    }
+  }
+
 }
 //清除之前绘制内容
 function reset() {
@@ -226,25 +311,31 @@ function reset() {
 }
 //获取顶级目录列表
 function getFLDsource(callback1, url) {
-  wx.request({
-    url: url,  //这里''里面填写你的服务器API接口的路径    
-    data: {
-    },  //这里是可以填写服务器需要的参数    
-    method: 'GET', // 声明GET请求    
-    // header: {}, // 设置请求的 header，GET请求可以不填    
-    success: function (res) {
-      if (res.statusCode == 200) {
-        let test = JSON.stringify(res.data)
-        let tet = JSON.parse(test)
-        FLDsource.splice(0, FLDsource.length)
-        for (let i in tet.data.cats) {
-          FLDsource.push(tet.data.cats[i])
+  try {
+    wx.request({
+      url: url,  //这里''里面填写你的服务器API接口的路径    
+      data: {
+      },  //这里是可以填写服务器需要的参数    
+      method: 'GET', // 声明GET请求    
+      // header: {}, // 设置请求的 header，GET请求可以不填    
+      success: function (res) {
+        if (res.statusCode == 200) {
+          let test = JSON.stringify(res.data)
+          let tet = JSON.parse(test)
+          FLDsource.splice(0, FLDsource.length)
+          for (let i in tet.data.cats) {
+            FLDsource.push(tet.data.cats[i])
+          }
+          callback1(FLDsource)//导出顶级目录列表
         }
-        callback1(FLDsource)//导出顶级目录列表
+        console.log(res.statusCode)
       }
-      console.log(res.statusCode)
-    }
-  });
+    });
+  } catch (e) {
+    console.log('请求异常')
+    console.log(e.message)
+  }
+
 }
 //在回调函数中通过顶级目录个数获得它的按钮区域
 function callback1(res) {
@@ -269,24 +360,29 @@ function getSLDsource(callback2, FLDsource) {
   //  通过flag1来判断现在处于哪一个顶级目录，然后利用flag1传参数获取该顶级目录下的二级目录信息
   let u = 'http://t6.9026.com/api/album/cat' + '?store_id=0&parent_id=' + FLDsource[flag1].id
   console.log(u)
-  wx.request({
-    url: u,
-    data: {
-    },
-    method: 'GET',
-    success: function (res) {
-      if (res.statusCode == 200) {
-        let test = JSON.stringify(res.data)
-        let tet = JSON.parse(test)
-        SLDsource.splice(0, SLDsource.length)//每次调用重新填充数据的时候清空之前数据
-        for (let i in tet.data.cats) {
-          SLDsource.push(tet.data.cats[i])
+  try {
+    wx.request({
+      url: u,
+      data: {
+      },
+      method: 'GET',
+      success: function (res) {
+        if (res.statusCode == 200) {
+          let test = JSON.stringify(res.data)
+          let tet = JSON.parse(test)
+          SLDsource.splice(0, SLDsource.length)//每次调用重新填充数据的时候清空之前数据
+          for (let i in tet.data.cats) {
+            SLDsource.push(tet.data.cats[i])
+          }
+          callback2(SLDsource)//导出二级目录列表
         }
-        callback2(SLDsource)//导出二级目录列表
+        console.log(res.statusCode)
       }
-      console.log(res.statusCode)
-    }
-  })
+    })
+  } catch (e) {
+    console.log('请求异常')
+    console.log(e.message)
+  }
 }
 //通过二级目录列表的长度来得到它的按钮区域列表
 function callback2(res) {
@@ -309,25 +405,32 @@ function callback2(res) {
 function getGoodsSource(callback3, SLDsource) {
   let u = 'http://t6.9026.com/api/album/goods' + '?store_id=0&cat_id=' + SLDsource[flag2].id
   console.log(u)
+
   wx.request({
     url: u,
     data: {
     },
     method: 'GET',
     success: function (res) {
-      if (res.statusCode == 200) {
+      try {
         let test = JSON.stringify(res.data)
         let tet = JSON.parse(test)
         GoodsSource.splice(0, GoodsSource.length)//每次调用重新填充数据的时候清空之前数据
         for (let i in tet.data.goods) {
           GoodsSource.push(tet.data.goods[i])
         }
-        callback3(GoodsSource)//导出商品列表
+      } catch (e) {
+        wx.showToast({
+          title: '请求异常',
+          icon: 'none',
+          duration: 800
+        })
       }
-
+      callback3(GoodsSource)//导出商品列表
       console.log(res.statusCode)
     }
   })
+
 }
 function callback3(res) {
   reStart()
@@ -335,8 +438,16 @@ function callback3(res) {
 }
 function getGoodsDetail(callback4, GoodsSource) {
   console.log(flag3)
-  console.log(GoodsSource[flag3].id)
+  //如果所点击的区域没有商品展示，那么不进入详情界面
+  try {
+    console.log(GoodsSource[flag3].id)
+  } catch (e) {
+    console.log(e.message)
+    Detailstatus = false
+    reStart()
+  }
   let u = 'http://t6.9026.com/api/album/goods-detail?store_id=0&agent_id=10&goods_id=' + GoodsSource[flag3].id
+
   console.log(u)
   wx.request({
     url: u,
@@ -344,17 +455,28 @@ function getGoodsDetail(callback4, GoodsSource) {
     },
     method: 'GET',
     success: function (res) {
-      let test = JSON.stringify(res.data)
-      let tet = JSON.parse(test)
-      GoodsDetail = tet.data.goods
+      try {
+        let test = JSON.stringify(res.data)
+        let tet = JSON.parse(test)
+        GoodsDetail = tet.data.goods
+      } catch (e) {
+        Detailstatus = false
+        wx.showToast({
+          title: '请求异常,请稍后再试',
+          icon: 'none',
+          duration: 800
+        })
+      }
       callback4(GoodsDetail)//导出商品列表
     }
   })
 }
 function callback4(res) {
-  console.log(GoodsDetail)
+  //console.log(GoodsDetail)
   reStart()
 }
+//小游戏没有打电话的API
+/*
 function makePhoneCall(tel) {
   wx.makePhoneCall({
     phoneNumber: tel,
@@ -365,7 +487,7 @@ function makePhoneCall(tel) {
     complete: function (res) { },
   })
 }
-
+*/
 /*
 主函数
 */