更新

app.json

@@ -7,7 +7,9 @@
     "pages/me/me",
     "pages/details/details",
     "pages/next/next",
-    "pages/news/news"
+    "pages/news/news",
+    "pages/filter/filter",
+    "pages/item/item"
   ],
   "window": {
     "backgroundTextStyle": "light",

pages/drop/drop.js

@@ -39,6 +39,7 @@ function initChart(canvas, width, height, dpr, data) {
       data:data,
       areaStyle: {
         color: '#07c160',
+
       },
     }]
   };
@@ -166,7 +167,7 @@ Page({
   open: function (e) {
     console.log(e)
     wx.navigateTo({
-      url: '../details/details'
+      url: '../item/item'
     });
   }
 })

pages/drop/drop.wxml

@@ -1,6 +1,7 @@
 <view class="swiper-tab">
   <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">上周实际数据</view>
   <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">上周预测数据</view>
+    <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="1" bindtap="swichNav">下周预测数据</view>
 </view>
 
 <swiper current="{{currentTab}}" class="swiper-box" duration="300"  style="height:{{winHeight - 48}}px" bindchange="bindChange">

pages/filter/filter.js

@@ -0,0 +1,102 @@
+Page({
+  data: {
+      navLeftItems: [
+        {
+          id:0,
+          name:"行业",
+          nodes:[
+            {desc:"11",logo:"sss"},
+            {desc:"11",logo:"sss"},
+            {desc:"11",logo:"sss"},
+            {desc:"11",logo:"sss"},
+            {desc:"11",logo:"sss"},
+            {desc:"11",logo:"sss"}
+          ]
+        },
+        {
+          id:1,
+          name:"行业",
+          nodes:[
+            {desc:"11",logo:"sss"},
+            {desc:"11",logo:"sss"},
+            {desc:"11",logo:"sss"}
+          ]
+        },
+        {
+          id:2,
+          name:"行业",
+          nodes:[
+            {desc:"11",logo:"sss"},
+            {desc:"11",logo:"sss"},
+            {desc:"11",logo:"sss"}
+          ]
+        }
+      ],
+      navRightItems: [
+        {
+          id:0,
+          name:"行业",
+          nodes:[
+            {desc:"11",logo:"sss"},
+            {desc:"11",logo:"sss"},
+            {desc:"11",logo:"sss"},
+            {desc:"11",logo:"sss"},
+            {desc:"11",logo:"sss"},
+            {desc:"11",logo:"sss"}
+          ]
+        },
+        {
+          id:1,
+          name:"行业",
+          nodes:[
+            {desc:"11",logo:"sss"},
+            {desc:"11",logo:"sss"},
+            {desc:"11",logo:"sss"}
+          ]
+        },
+        {
+          id:2,
+          name:"行业",
+          nodes:[
+            {desc:"11",logo:"sss"},
+            {desc:"11",logo:"sss"},
+            {desc:"11",logo:"sss"}
+          ]
+        }
+      ],
+      curNav: 0,
+  curIndex: 0
+  },
+  onLoad: function() {
+      // 加载的使用进行网络访问，把需要的数据设置到data数据对象
+      var that = this        
+      // wx.request({
+      //     url: 'http://huanqiuxiaozhen.com/wemall/goodstype/typebrandList',
+      //     method: 'GET',
+      //     data: {},
+      //     header: {
+      //         'Accept': 'application/json'
+      //     },
+      //     success: function(res) {
+      //         console.log(res)
+      //         that.setData({
+      //             navLeftItems: res.data,
+      //             navRightItems: res.data
+      //         })
+      //     }
+      // })
+  },
+
+  //事件处理函数
+  switchRightTab: function(e) {
+      // 获取item项的id，和数组的下标值
+      let id = e.target.dataset.id,
+    index = parseInt(e.target.dataset.index);
+      // 把点击到的某一项，设为当前index
+  this.setData({
+    curNav: id,
+    curIndex: index
+  })
+  }
+
+})

pages/filter/filter.json

@@ -0,0 +1,5 @@
+{
+  "navigationBarTitleText": "筛选",
+
+  "usingComponents": {}
+}

pages/filter/filter.wxml

@@ -0,0 +1,42 @@
+<!--主盒子-->
+<view class="containers">
+  <!--左侧栏-->
+  <view class="nav_left">
+
+    <block wx:for="{{navLeftItems}}" wx:key="index">
+      <!--当前项的id等于item项的id，那个就是当前状态-->
+      <!--用data-index记录这个数据在数组的下标位置，使用data-id设置每个item的id值，供打开2级页面使用-->
+      <view class="nav_left_items {{curNav == item.id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}">{{item.name}}</view>
+    </block>
+  </view>
+  <!--右侧栏-->
+  <view class="nav_right">
+    <!--如果有数据，才遍历项-->
+    <view wx:if="{{navRightItems[curIndex].nodes}}">
+      <block wx:for="{{navRightItems[curIndex].nodes}}" wx:key="index">
+        <view class="nav_right_items">
+          <navigator url="../list/index?brand={{item.tree.id}}&typeid={{navRightItems[curIndex].id}}">
+            <!--用view包裹图片组合，如果有图片就用，无图片提供就使用50x30的这个默认图片-->
+            <!-- <view>              
+              <block wx:if="{{item.logo}}">
+                <image src="{{item.logo}}"></image>
+              </block>
+              <block wx:else>
+                <image src="http://temp.im/50x30"></image>
+              </block>
+            </view> -->
+            <!--如果有文字，就用文字；无文字就用其他-->
+            <view wx:if="{{item.desc}}">
+              <text>{{item.desc}}</text>
+            </view>
+            <view wx:else>
+              <text>{{item.desc2}}</text>
+            </view>
+          </navigator>
+        </view>
+      </block>
+    </view>
+    <!--如果无数据，则显示数据-->
+    <view wx:else>暂无数据</view>
+  </view>
+</view>

pages/filter/filter.wxss

@@ -0,0 +1,77 @@
+page{
+  background: #000;
+}
+/*总体主盒子*/
+.containers {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  color: #939393;
+}
+ 
+/*左侧栏主盒子*/
+.nav_left{
+  /*设置行内块级元素（没使用定位）*/
+  display: inline-block;
+  width: 35%;
+  height: 100%;
+  /*主盒子设置背景色为灰色*/
+  text-align: center;
+}
+/*左侧栏list的item*/
+.nav_left .nav_left_items{
+  /*每个高30px*/
+  height: 30px;
+  /*垂直居中*/
+  line-height: 30px;
+  /*再设上下padding增加高度，总高42px*/
+  padding: 6px 0;
+  /* 只设下边线
+  border-bottom: 1px solid #dedede; */
+  /*文字14px*/
+  font-size: 14px;
+}
+/*左侧栏list的item被选中时*/
+.nav_left .nav_left_items.active{
+  /*背景色变成白色*/
+  background: rgb(58, 58, 58);
+}
+ 
+/*右侧栏主盒子*/
+.nav_right{
+  /*右侧盒子使用了绝对定位*/
+  position: absolute;
+  top: 0;
+  right: 0;
+  flex: 1;
+  /*宽度75%，高度占满，并使用百分比布局*/
+  width: 65%;
+  height: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  background: rgb(58, 58, 58);
+}
+/*右侧栏list的item*/
+.nav_right .nav_right_items{
+  /* 浮动向左
+  float: left; */
+  /*每个item设置宽度是33.33%*/
+  width: 100%;
+  height: 80px;
+  text-align: center;
+}
+.nav_right .nav_right_items image{
+  /*被图片设置宽高*/
+  width: 50px;
+  height: 30px;
+}
+.nav_right .nav_right_items text{
+  /*给text设成块级元素*/
+  display: block;
+  margin-top: 5px;
+  font-size: 10px;
+  /*设置文字溢出部分为...*/
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

pages/item/item.js

@@ -0,0 +1,353 @@
+// pages/item/item.js
+import * as echarts from '../../ec-canvas/echarts';
+var timeData = [
+  '2020/6/1', '2009/6/2', '2009/6/3', '2009/6/4', '2009/6/5', '2009/6/6', '2009/6/7', '2009/6/8', '2009/6/9', '2009/6/10',
+];
+
+timeData = timeData.map(function (str) {
+  return str.replace('2009/', '');
+});
+
+var app = getApp()
+function initChart(canvas, width, height, dpr, data) {
+  const chart = echarts.init(canvas, null, {
+    width: width,
+    height: height,
+    devicePixelRatio: dpr // new
+  });
+  canvas.setChart(chart);
+
+  var option = {
+    title: {//标题
+
+      text: '',
+
+      left: 'center'
+
+    },
+
+    renderAsImage: true, //支持渲染为图片模式
+
+    color: ["#DF3E3E", "#80CDF8"],//图例图标颜色
+
+    legend: {
+
+      show: true,
+
+      itemGap: 25,//每个图例间的间隔
+
+      top: 30,
+
+      x: 30,//水平安放位置,离容器左侧的距离  'left'
+
+      z: 100,
+
+      textStyle: {
+
+        color: '#383838'
+      },
+
+    },
+
+    grid: {//网格
+
+      // left: 30,
+      // top:100,
+      containLabel: true,//grid 区域是否包含坐标轴的刻度标签
+    },
+
+    xAxis: {//横坐标
+
+      type: 'category',
+
+      nameTextStyle: {//在name值存在下，设置name的样式
+
+        color: 'white',
+
+        fontStyle: 'normal'
+
+      },
+
+      nameLocation:'end',
+
+      splitLine: {//坐标轴在 grid 区域中的分隔线。
+
+        show: true,
+
+        lineStyle: {
+
+          type: 'dashed',
+          color: ['#2B2B2B']
+        }
+
+      },
+
+      boundaryGap: false,//1.true 数据点在2个刻度直接  2.fals 数据点在分割线上，即刻度值上
+
+      data: timeData,
+      axisLine: {onZero: true},
+      axisLabel: {
+
+        textStyle: {
+
+          fontSize: 13,
+
+          color: '#5D5D5D'
+
+        }
+
+      }
+
+    },
+    dataZoom: [
+      {
+        type: 'slider',
+        xAxisIndex: 0,
+        filterMode: 'empty'
+    },
+
+  ],
+    yAxis: {//纵坐标
+
+      type: 'value',
+
+      position:'right',
+
+      nameTextStyle:{//在name值存在下，设置name的样式
+
+        color:'red',
+
+        fontStyle:'normal'
+
+      },
+
+      splitNumber: 5,//坐标轴的分割段数
+
+      splitLine: {//坐标轴在 grid 区域中的分隔线。
+
+        show: true,
+
+        lineStyle: {
+
+          type: 'dashed',
+          color: ['#2B2B2B']
+
+        }
+
+      },
+
+      axisLabel: {//坐标轴刻度标签
+
+        // formatter: function (value) {
+
+        //   var xLable = [];
+
+        //   if (value == 20) {
+
+        //     xLable.push('25,883');
+
+        //   }
+
+        //   if (value == 40) {
+
+        //     xLable.push('26,035');
+
+        //   }
+
+        //   if (value == 60) {
+
+        //     xLable.push('26,187');
+
+        //   }
+
+        //   if (value == 80) {
+
+        //     xLable.push('26,339');
+
+        //   }
+        //   return xLable
+
+        // },
+
+        textStyle: {
+
+          fontSize: 13,
+
+          color: '#5D5D5D',
+
+        }
+
+      },
+
+      min: 0,
+
+      max: 100,
+
+    },
+
+    series: [{
+
+      name: '实际',
+
+      type: 'line',
+    
+      // smooth:true,
+
+      data: [18, 36, 65, 30, 78, 40, 33],
+
+      symbol: 'none',
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+          offset: 0,
+          color: '#DF3E3E'
+      }, {
+          offset: 1,
+          color: '#1C1C1C'
+      }])
+
+      },
+      itemStyle: {
+
+        normal: {
+
+          lineStyle: {
+
+            color: '#DF3E3E'
+
+          }
+
+        }
+
+      }
+
+    }, {
+
+      name: '预测',
+
+      type: 'line',
+
+      data: [10, 30, 31, 50, 40, 20, 10],
+
+      symbol: 'none',
+
+      itemStyle: {
+
+        normal: {
+
+          lineStyle: {
+
+            color: '#80CDF8'
+
+          }
+
+        }
+
+      }
+
+    }],
+  };
+
+  chart.setOption(option);
+  return chart;
+}
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+        // 页面配置  
+        winWidth: 0,
+        winHeight: 0,
+        // tab切换 
+        currentTab: 0,
+      button:"关注",
+          ec: {
+      onInit: initChart
+    },
+      chartData:[52,56,355,444,52,56,355,444,52,56,355,444,2],
+      object:{
+        title:"appl",
+        Withtitle:"appl inc",
+        Volume:"545455",
+        float:"-5555"
+      }
+  },
+  catchTouchMove:function(res){
+    return false
+  },
+  // 滑动切换tab 
+  bindChange: function(e) {
+    var that = this;
+    that.setData({
+      currentTab: e.detail.current
+    });
+  },
+  // 点击tab切换 
+  swichNav: function(e) {
+    var that = this;
+    if (this.data.currentTab === e.target.dataset.current) {
+      return false;
+    } else {
+      that.setData({
+        currentTab: e.target.dataset.current
+      })
+    }
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/item/item.json

@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "详情",
+  "usingComponents": {
+    "ec-canvas": "../../ec-canvas/ec-canvas"
+  }
+}

pages/item/item.wxml

@@ -0,0 +1,37 @@
+<view class="title">
+ <view class="title-button">
+  <button type="default" size="mini">{{button}}</button>
+ </view>
+ <view class="title-name">
+   <text class="title-name-Big">{{object.title}}</text>
+    <text class="title-name-small">{{object.Withtitle}}</text>
+ </view>
+ <view class="tile-number">
+   <text class="tile-number-Volume">{{object.Volume}}</text>
+    <text class="tile-number-float">{{object.float}}</text>
+ </view>
+</view>
+<view class="swiper-tab">
+  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">实际数据</view>
+  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">下周预测</view>
+</view>
+<view class="map">
+  <view class="map-line">
+     <text class="map-line-red"></text>
+      <text class="map-line-redname">实际</text>
+       <text class="map-line-blue"></text>
+        <text class="map-line-bluename">预测</text>
+  </view>
+  <swiper current="{{currentTab}}" class="swiper-box" duration="300"  style="height:400px" bindchange="bindChange">
+
+    <swiper-item catchtouchmove='catchTouchMove'>
+     <view style="width:100%;height:100%">
+       <ec-canvas  id="mychart-dom-line" canvas-id="mychart-line" tuData="{{ chartData }}" ec="{{ ec }}"></ec-canvas>
+     </view>
+    </swiper-item>
+
+    <swiper-item catchtouchmove='catchTouchMove'>
+
+    </swiper-item>
+  </swiper>
+</view>

pages/item/item.wxss

@@ -0,0 +1,108 @@
+/* pages/item/item.wxss */
+page{
+  background: #000;
+  color: #ffffff;
+  margin-top: 30px;
+}
+ec-canvas {
+  width: 100%;
+  height: 100%;
+
+  }
+.title{
+  background:#1C1C1C;
+  padding: 10px;
+}
+.title .title-button{
+ text-align: right;
+}
+.title .title-button button{
+  background: none;
+  border: 1px solid slategrey;
+  width: 80px;
+  height: 25px;
+  font-size: 12px;
+  color: #ffffff;
+}
+.title .title-name{
+  border-bottom: 1px solid slategrey;
+  height: 50px;
+  margin-top: -20px;
+}
+.title .title-name .title-name-Big{
+  font-size: 28px;
+}
+.title .title-name .title-name-small{
+  font-size: 18px;
+  color: #d6d1d1;
+  margin-left: 10px;
+}
+.title .tile-number{
+  margin-top: 10px;
+}
+.title .tile-number .tile-number-Volume{
+ 
+}
+.title .tile-number .tile-number-float{
+  color: crimson;
+  margin-left: 20px;
+}
+
+.swiper-tab {
+  width: 100%;
+  text-align: center;
+  line-height: 80rpx;
+}
+
+.swiper-tab-list {
+  font-size: 30rpx;
+  display: inline-block;
+  width: 30%;
+  color: #777;
+}
+
+.on {
+  color: #D81E06;
+  border-bottom: 5rpx solid #D81E06;
+}
+
+.swiper-box {
+  display: block;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  color: #fff;
+}
+
+.swiper-box .swiper-box-view {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+  margin: 10rpx;
+ border-bottom: 1rpx slategray solid;
+}
+.map{
+  background:#1C1C1C;
+  padding: 10px;
+  margin-top: 10px;
+}
+.map .map-line {
+  float: right;
+  display: flex;
+  align-items: center;
+}
+.map .map-line text{
+  margin-left: 5px;
+}
+.map .map-line .map-line-red{
+  display: inline-block;
+  width: 30px;
+  height: 2px;
+  background: #D81E06;
+}
+.map .map-line .map-line-blue{
+  display: inline-block;
+  width: 30px;
+  height: 2px;
+  background:#80CDF8;
+}

pages/rise/rise.js

@@ -159,7 +159,7 @@ Page({
   open: function (e) {
     console.log(e)
     wx.navigateTo({
-      url: '../details/details'
+      url: '../filter/filter'
     });
   }
 })

pages/rise/rise.wxml

@@ -1,6 +1,7 @@
 <view class="swiper-tab">
   <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">上周实际数据</view>
   <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">上周预测数据</view>
+  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="1" bindtap="swichNav">下周预测数据</view>
 </view>
 
 <swiper current="{{currentTab}}" class="swiper-box" duration="300"  style="height:{{winHeight - 48}}px" bindchange="bindChange">