update the market page

1. fix the time convert function 2.add showing the chart and table with different types including ordering by day ,hour and minute
Cha0s0000 · Apr 23, 2018 · 10409e3 · 10409e3
1 parent 550fd69
commit 10409e3
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 8 deletions.
diff --git a/pages/market/market.js b/pages/market/market.js
@@ -8,6 +8,7 @@ Page({
    */
   data: {
     hidden: false,
+    currentTimeIndex:'day',
 
   },
 
@@ -73,8 +74,8 @@ Page({
   getTime(time) {
     var postTime = new Date(time);
     // console.log(Date.parse(postTime));
-    var nowTime = Date.now() - 28800000;
-    // console.log(nowTime);
+    var nowTime = Date.now();
+    console.log(nowTime);
     var ago = nowTime - postTime;
     if (ago / 1000 / 60 / 60 / 24 >= 1) {
       var dayNum = parseInt(ago / 1000 / 60 / 60 / 24);
@@ -115,7 +116,7 @@ Page({
     lineChart.showToolTip(e, {
       // background: '#7cb5ec',
       format: function (item, category) {
-        return category + '\r\n ' + item.name + ':' + item.data
+        return category + ' ' + item.name + ':' + item.data
       }
     });
   }, 
@@ -129,7 +130,7 @@ Page({
     priceHistory.price = [];
     priceHistory.time = [];
     wx.request({
-      url: 'https://min-api.cryptocompare.com/data/histoday?fsym=STEEM&tsym=SBD&limit=20',
+      url: 'https://min-api.cryptocompare.com/data/histo' + that.data.currentTimeIndex+'?fsym=STEEM&tsym=SBD&limit=20',
       method: 'GET',
       success: function (res) {
         if (res.statusCode == '200') {
@@ -169,7 +170,7 @@ Page({
     priceHistory.price = [];
     priceHistory.time = [];
     wx.request({
-      url: 'https://min-api.cryptocompare.com/data/histoday?fsym=STEEM&tsym=SBD&limit=20',
+      url: 'https://min-api.cryptocompare.com/data/histo' + that.data.currentTimeIndex+'?fsym=STEEM&tsym=SBD&limit=20',
       method: 'GET',
       success: function (res) {
         if (res.statusCode == '200') {
@@ -240,7 +241,7 @@ Page({
     sbdPrice.price = [];
     sbdPrice.time = [];
     wx.request({
-      url: 'https://min-api.cryptocompare.com/data/histoday?fsym=STEEM&tsym=USD&limit=20',
+      url: 'https://min-api.cryptocompare.com/data/histo' + that.data.currentTimeIndex+'?fsym=STEEM&tsym=USD&limit=20',
       method: 'GET',
       success: function (res) {
         if (res.statusCode == '200') {
@@ -256,7 +257,7 @@ Page({
       },
       complete:function(res){
         wx.request({
-          url: 'https://min-api.cryptocompare.com/data/histoday?fsym=STEEM&tsym=USD&limit=20',
+          url: 'https://min-api.cryptocompare.com/data/histo' + that.data.currentTimeIndex+'?fsym=STEEM&tsym=USD&limit=20',
           method: 'GET',
           success: function (res) {
             if (res.statusCode == '200') {
@@ -275,5 +276,13 @@ Page({
       }
 
     })    
+  },
+
+  onPeriodSelectorClick:function(e){
+    var currentIndex = e.currentTarget.dataset.index;
+    console.log("currentIndex");
+    console.log(currentIndex)
+    this.setData({ hidden: false, currentTimeIndex:currentIndex})
+    this.onLoad();
   }
 })
diff --git a/pages/market/market.wxml b/pages/market/market.wxml
@@ -3,6 +3,14 @@
   <view class="chart-title">
     STEEM/SBD price history
   </view>
+  <view id="selector_time">
+    <text style="background-color:{{currentTimeIndex == 'day' ? '#eb333b' : '#f8f8f8'}}; color:{{currentTimeIndex == 0 ? '#ffffff' : '#353535'}}; border:{{currentTimeIndex == 0 ? '1rpx solid rgba(255, 255, 255, 0)' : '1rpx solid #dadada'}};" border-left: none;
+    bindtap="onPeriodSelectorClick" data-index="day">Day</text>
+    <text style="background-color:{{currentTimeIndex == 'hour' ? '#eb333b' : '#f8f8f8'}}; color:{{currentTimeIndex == 1 ? '#ffffff' : '#353535'}}; border:{{currentTimeIndex == 1 ? '1rpx solid rgba(255, 255, 255, 0)' : '1rpx solid #dadada'}}; border-left: none;"
+    bindtap="onPeriodSelectorClick" data-index="hour">Hour</text>
+    <text style="background-color:{{currentTimeIndex == 'minute' ? '#eb333b' : '#f8f8f8'}}; color:{{currentTimeIndex == 2 ? '#ffffff' : '#353535'}}; border:{{currentTimeIndex == 2 ? '1rpx solid rgba(255, 255, 255, 0)' : '1rpx solid #dadada'}}; border-left: none;"
+    bindtap="onPeriodSelectorClick" data-index="minute">Minute</text>
+  </view>
   <canvas canvas-id="priceHistory" disable-scroll="true" class="canvas" bindtouchstart="touchHandler"></canvas>
   <button type="primary" bindtap="updateData">更新数据</button>
 </view>

diff --git a/pages/market/market.wxss b/pages/market/market.wxss
@@ -57,4 +57,29 @@
 .th {
   font-weight: 400;
   background-color: #dadada;
-}
+}
+#selector_time {
+    width: 710rpx;
+    height: 60rpx;
+    margin: 16rpx auto 18rpx auto;
+    text-align: center;
+}
+
+#selector_time text {
+    display: inline-block;
+    width: 20%;
+    height: 100%;
+    box-sizing: border-box;
+    font-size: 26rpx;
+    color: #353535;
+    text-align: center;
+    line-height: 60rpx;
+}
+
+#selector_time text:first-child {
+    border-radius: 8rpx 0 0 8rpx;
+}
+
+#selector_time text:last-child {
+    border-radius: 0 8rpx 8rpx 0;
+}