From 56c81fb1d6a73e8e245d0a7c6e5f91bfe0b19eb2 Mon Sep 17 00:00:00 2001
From: Ge Hao <althoughghgh@gmail.com>
Date: Fri, 13 Jan 2017 17:46:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E7=94=BB=E5=B7=AE=E4=B8=8D=E5=A4=9A?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/show_product/show_product.js   | 68 +++++++++++++++++++++++++++-
 pages/show_product/show_product.wxml |  3 ++
 pages/show_product/show_product.wxss | 10 ++++
 3 files changed, 80 insertions(+), 1 deletion(-)

diff --git a/pages/show_product/show_product.js b/pages/show_product/show_product.js
index 8aae962..be75219 100644
--- a/pages/show_product/show_product.js
+++ b/pages/show_product/show_product.js
@@ -10,7 +10,17 @@ Page({
     windowHeight: 667,
     pixelRatio: 2,
     accountType: '',
-    from_share: false
+    from_share: false,
+    codeFloatingData: {},
+    codeFloatingStyle: {
+      width: 100,
+      height: 100
+    },
+    codeFloatingState: 'small',
+    codeFloatingPos: {
+      left: 650,
+      top: 650
+    }
   },
 
   onShareAppMessage: function () {
@@ -126,5 +136,61 @@ Page({
         url: '../cart/cart'
       })
     }
+  },
+
+  changeCodeState: function (e) {
+    var ratio = 750 / this.data.windowWidth
+    var eleStyle = this.data.codeFloatingStyle
+    var pos = e.touches[0]
+
+    var eleLeft = pos.clientX - eleStyle.width / ratio / 2
+    var eleTop = pos.clientY - eleStyle.height / ratio / 2
+
+    if (pos.clientX <= eleStyle.width / ratio / 2) {
+      eleLeft = 0
+    } else if (pos.clientX + eleStyle.width / ratio / 2 > this.data.windowWidth) {
+      eleLeft = this.data.windowWidth - eleStyle.width / 2
+    } else if (pos.clientY + eleStyle.height / ratio / 2 > this.data.windowHeight) {
+      eleTop = this.data.windowHeight - eleStyle.height / 2
+    } else if (pos.clientY <= eleStyle.height / ratio / 2) {
+      eleTop = 0
+    }
+
+    eleLeft = eleLeft * ratio
+    eleTop  = eleTop * ratio
+
+    var animation = wx.createAnimation({
+      duration: 500,
+      timingFunction: 'step-start',
+    })
+    animation.left(`${eleLeft}rpx`).top(`${eleTop}rpx`).step()
+    this.setData({
+      codeFloatingData: animation.export(),
+      codeFloatingPos: {left: eleLeft, top: eleTop}
+    })
+  },
+
+  catchScaleCode: function (e) {
+    var animation = wx.createAnimation({
+      duration: 800,
+      timingFunction: 'ease',
+    })
+
+    var state
+    if (this.data.codeFloatingState == "small") {
+      let width = "750rpx"
+      state = 'big'
+      animation.left(0).top('100rpx').width(width).height(width).step()
+    } else {
+      let width = "100rpx"
+      let pos = this.data.codeFloatingPos
+      state = 'small'
+      animation.left(`${pos.left}rpx`).top(`${pos.top}rpx`).width(width).height(width).step()
+    }
+
+    this.setData({
+      codeFloatingData: animation.export(),
+      codeFloatingState: state
+    })
   }
 })
diff --git a/pages/show_product/show_product.wxml b/pages/show_product/show_product.wxml
index 972a2c1..47039e8 100644
--- a/pages/show_product/show_product.wxml
+++ b/pages/show_product/show_product.wxml
@@ -36,3 +36,6 @@
     </block>
   </view>
 </view>
+
+<view id="codeFloating" catchtouchmove="changeCodeState" catchtap="catchScaleCode" animation="{{codeFloatingData}}">
+</view>
\ No newline at end of file
diff --git a/pages/show_product/show_product.wxss b/pages/show_product/show_product.wxss
index 4c0533d..629e280 100644
--- a/pages/show_product/show_product.wxss
+++ b/pages/show_product/show_product.wxss
@@ -49,3 +49,13 @@
   width: 100%;
   display: block;
 }
+
+#codeFloating {
+  position: fixed;
+  bottom: 20%;
+  left: 650rpx;
+  top: 650rpx;
+  background:red;
+  height:100rpx;
+  width:100rpx;
+}
\ No newline at end of file