小程序 数据统计

public/appmini/old/weixin/app.json

@@ -35,7 +35,8 @@
     "pages/plugins/membershiplevelvip/order/order",
     "pages/plugins/membershiplevelvip/order-detail/order-detail",
     "pages/plugins/membershiplevelvip/shouyi-detail/shouyi-detail",
-    "pages/plugins/membershiplevelvip/shouyi/shouyi"
+    "pages/plugins/membershiplevelvip/shouyi/shouyi",
+    "pages/plugins/membershiplevelvip/tongji/tongji"
   ],
   "window": {
     "navigationBarTitleText": "{{application_title}}",

public/appmini/old/weixin/components/ec-canvas/ec-canvas.js

+import WxCanvas from './wx-canvas';
+import * as echarts from './echarts';
+
+let ctx;
+
+Component({
+  properties: {
+    canvasId: {
+      type: String,
+      value: 'ec-canvas'
+    },
+
+    ec: {
+      type: Object
+    }
+  },
+
+  data: {
+
+  },
+
+  ready: function () {
+    if (!this.data.ec) {
+      console.warn('组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" '
+        + 'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>');
+      return;
+    }
+
+    if (!this.data.ec.lazyLoad) {
+      this.init();
+    }
+  },
+
+  methods: {
+    init: function (callback) {
+      const version = wx.version.version.split('.').map(n => parseInt(n, 10));
+      const isValid = version[0] > 1 || (version[0] === 1 && version[1] > 9)
+        || (version[0] === 1 && version[1] === 9 && version[2] >= 91);
+      if (!isValid) {
+        console.error('微信基础库版本过低，需大于等于 1.9.91。'
+          + '参见：https://github.com/ecomfe/echarts-for-weixin'
+          + '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82');
+        return;
+      }
+
+      ctx = wx.createCanvasContext(this.data.canvasId, this);
+
+      const canvas = new WxCanvas(ctx, this.data.canvasId);
+
+      echarts.setCanvasCreator(() => {
+        return canvas;
+      });
+
+      var query = wx.createSelectorQuery().in(this);
+      query.select('.ec-canvas').boundingClientRect(res => {
+        if (typeof callback === 'function') {
+          this.chart = callback(canvas, res.width, res.height);
+        }
+        else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
+          this.chart = this.data.ec.onInit(canvas, res.width, res.height);
+        }
+        else {
+          this.triggerEvent('init', {
+            canvas: canvas,
+            width: res.width,
+            height: res.height
+          });
+        }
+      }).exec();
+    },
+
+    canvasToTempFilePath(opt) {
+      if (!opt.canvasId) {
+        opt.canvasId = this.data.canvasId;
+      }
+
+      ctx.draw(true, () => {
+        wx.canvasToTempFilePath(opt, this);
+      });
+    },
+
+    touchStart(e) {
+      if (this.chart && e.touches.length > 0) {
+        var touch = e.touches[0];
+        var handler = this.chart.getZr().handler;
+        handler.dispatch('mousedown', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        handler.dispatch('mousemove', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        handler.processGesture(wrapTouch(e), 'start');
+      }
+    },
+
+    touchMove(e) {
+      if (this.chart && e.touches.length > 0) {
+        var touch = e.touches[0];
+        var handler = this.chart.getZr().handler;
+        handler.dispatch('mousemove', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        handler.processGesture(wrapTouch(e), 'change');
+      }
+    },
+
+    touchEnd(e) {
+      if (this.chart) {
+        const touch = e.changedTouches ? e.changedTouches[0] : {};
+        var handler = this.chart.getZr().handler;
+        handler.dispatch('mouseup', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        handler.dispatch('click', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        handler.processGesture(wrapTouch(e), 'end');
+      }
+    }
+  }
+});
+
+function wrapTouch(event) {
+  for (let i = 0; i < event.touches.length; ++i) {
+    const touch = event.touches[i];
+    touch.offsetX = touch.x;
+    touch.offsetY = touch.y;
+  }
+  return event;
+}

public/appmini/old/weixin/components/ec-canvas/ec-canvas.json

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

public/appmini/old/weixin/components/ec-canvas/ec-canvas.wxml

+<canvas class="ec-canvas" canvas-id="{{ canvasId }}"
+bindinit="init"
+bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}">
+</canvas>

public/appmini/old/weixin/components/ec-canvas/ec-canvas.wxss

+.ec-canvas {
+  width: 100%;
+  height: 100%;
+}

public/appmini/old/weixin/components/ec-canvas/wx-canvas.js

+export default class WxCanvas {
+  constructor(ctx, canvasId) {
+    this.ctx = ctx;
+    this.canvasId = canvasId;
+    this.chart = null;
+
+    // this._initCanvas(zrender, ctx);
+    this._initStyle(ctx);
+    this._initEvent();
+  }
+
+  getContext(contextType) {
+    if (contextType === '2d') {
+      return this.ctx;
+    }
+  }
+
+  // canvasToTempFilePath(opt) {
+  //   if (!opt.canvasId) {
+  //     opt.canvasId = this.canvasId;
+  //   }
+
+  //   return wx.canvasToTempFilePath(opt, this);
+  // }
+
+  setChart(chart) {
+    this.chart = chart;
+  }
+
+  attachEvent () {
+    // noop
+  }
+
+  detachEvent() {
+    // noop
+  }
+
+  _initCanvas(zrender, ctx) {
+    zrender.util.getContext = function () {
+      return ctx;
+    };
+
+    zrender.util.$override('measureText', function (text, font) {
+      ctx.font = font || '12px sans-serif';
+      return ctx.measureText(text);
+    });
+  }
+
+  _initStyle(ctx) {
+    var styles = ['fillStyle', 'strokeStyle', 'globalAlpha', 
+      'textAlign', 'textBaseAlign', 'shadow', 'lineWidth',
+      'lineCap', 'lineJoin', 'lineDash', 'miterLimit', 'fontSize'];
+
+    styles.forEach(style => {
+      Object.defineProperty(ctx, style, {
+        set: value => {
+          if (style !== 'fillStyle' && style !== 'strokeStyle' 
+            || value !== 'none' && value !== null
+          ) {
+            ctx['set' + style.charAt(0).toUpperCase() + style.slice(1)](value);
+          }
+        }
+      });
+    });
+
+    ctx.createRadialGradient = () => {
+      return ctx.createCircularGradient(arguments);
+    };
+  }
+
+  _initEvent() {
+    this.event = {};
+    const eventNames = [{
+      wxName: 'touchStart',
+      ecName: 'mousedown'
+    }, {
+      wxName: 'touchMove',
+      ecName: 'mousemove'
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'mouseup'
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'click'
+    }];
+
+    eventNames.forEach(name => {
+      this.event[name.wxName] = e => {
+        const touch = e.touches[0];
+        this.chart.getZr().handler.dispatch(name.ecName, {
+          zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
+          zrY: name.wxName === 'tap' ? touch.clientY : touch.y
+        });
+      };
+    });
+  }
+}

public/appmini/old/weixin/pages/plugins/membershiplevelvip/tongji/tongji.js

+import * as echarts from '../../../../components/ec-canvas/echarts';
+const app = getApp();
+
+// 近15日收益走势
+let profit_chart_obj = null;
+function init_profit_chart(canvas, width, height) {
+  profit_chart_obj = echarts.init(canvas, null, {
+    width: width,
+    height: height
+  });
+  canvas.setChart(profit_chart_obj);
+  return profit_chart_obj;
+};
+
+// 近15日推广用户数
+let user_chart_obj = null;
+function init_user_chart(canvas, width, height) {
+  user_chart_obj = echarts.init(canvas, null, {
+    width: width,
+    height: height
+  });
+  canvas.setChart(user_chart_obj);
+  return user_chart_obj;
+};
+
+Page({
+  data: {
+    data_list_loding_status: 1,
+    data_list_loding_msg: '加载中...',
+    data_bottom_line_status: false,
+
+    user_total: null,
+    user_profit_already_price: 0.00,
+    user_profit_stay_price: 0.00,
+    user_profit_total_price: 0.00,
+    user_data: null,
+    profit_data: null,
+
+    // 图表
+    profit_chart: {
+      onInit: init_profit_chart,
+    },
+    user_chart: {
+      onInit: init_user_chart,
+    },
+  },
+  
+  onShow() {
+    this.init();
+  },
+
+  init() {
+    var self = this;
+    wx.showLoading({ title: "加载中..." });
+    this.setData({
+      data_list_loding_status: 1
+    });
+
+    wx.request({
+      url: app.get_request_url("index", "statistics", "membershiplevelvip"),
+      method: "POST",
+      data: {},
+      dataType: "json",
+      success: res => {
+        wx.hideLoading();
+        wx.stopPullDownRefresh();
+        if (res.data.code == 0) {
+          var data = res.data.data;
+          self.setData({
+            user_total: data.user_total || null,
+            user_profit_already_price: data.user_profit_already_price || 0.00,
+            user_profit_stay_price: data.user_profit_stay_price || 0.00,
+            user_profit_total_price: data.user_profit_total_price || 0.00,
+            user_data: data.user_chart || null,
+            profit_data: data.profit_chart || null,
+
+            data_list_loding_status: 3,
+            data_bottom_line_status: true,
+            data_list_loding_msg: '',
+          });
+
+          // 图表
+          setTimeout(function()
+          {
+            // 近15日收益走势
+            self.set_profit_chart(data.profit_chart);
+
+            // 近15日推广用户数
+            self.set_profit_user(data.user_chart);
+          }, 100);
+        } else {
+          self.setData({
+            data_list_loding_status: 2,
+            data_bottom_line_status: false,
+            data_list_loding_msg: res.data.msg,
+          });
+          if (app.is_login_check(res.data, self, 'init')) {
+            app.showToast(res.data.msg);
+          }
+        }
+      },
+      fail: () => {
+        wx.hideLoading();
+        wx.stopPullDownRefresh();
+        self.setData({
+          data_list_loding_status: 2,
+          data_bottom_line_status: false,
+          data_list_loding_msg: '服务器请求出错',
+        });
+
+        app.showToast("服务器请求出错");
+      }
+    });
+  },
+
+  // 近15日推广用户数
+  set_profit_user(data) {
+    if ((data || null) != null) {
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        grid: {
+          top: '5%',
+          left: '5%',
+          right: '5%',
+          bottom: '8%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: data.name_arr
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [{
+          data: data.data,
+          type: 'bar',
+          areaStyle: {}
+        }]
+      };
+      if (typeof (user_chart_obj) == 'object') {
+        user_chart_obj.setOption(option);
+      }
+    }
+  },
+
+  // 近15日收益走势图表
+  set_profit_chart(data) {
+    if ((data || null) != null)
+    {
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        grid: {
+          top: '5%',
+          left: '5%',
+          right: '5%',
+          bottom: '8%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: data.name_arr
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [{
+          data: data.data,
+          type: 'line'
+        }]
+      };
+      if (typeof (profit_chart_obj) == 'object') {
+        profit_chart_obj.setOption(option);
+      }
+    }
+  },
+
+  // 下拉刷新
+  onPullDownRefresh() {
+    this.init();
+  },
+
+});
+

public/appmini/old/weixin/pages/plugins/membershiplevelvip/tongji/tongji.json

+{
+  "enablePullDownRefresh": true,
+  "navigationBarBackgroundColor": "#1d1611",
+  "navigationBarTitleText": "数据统计",
+  "usingComponents": {
+    "component-ec-canvas": "/components/ec-canvas/ec-canvas"
+  }
+}
\ No newline at end of file

public/appmini/old/weixin/pages/plugins/membershiplevelvip/tongji/tongji.wxml

+<!-- 推广客户 -->
+<view class="container user-container bg-white">
+  <view class="title">推广客户</view>
+  <view class="base-content oh tc">
+    <view class="item fl">
+      <view class="name cr-666">已推广用户总数</view>
+      <view class="value single-text">
+        <text class="golden">{{user_total.user_count || 0}}</text>
+        <text class="cr-888">人</text>
+      </view>
+    </view>
+    <view class="item fl">
+      <view class="name cr-666">已推广用户总数</view>
+      <view class="value single-text">
+        <text class="green">{{user_total.valid_user_count || 0}}</text>
+        <text class="cr-888">人</text>
+      </view>
+    </view>
+  </view>
+</view>
+
+<!-- 返利概况 -->
+<view class="container profit-container bg-white spacing-mt">
+  <view class="title">返利概况</view>
+  <view class="base-content oh tc">
+    <view class="item fl">
+      <view class="name cr-666">返佣总金额</view>
+      <view class="value single-text">
+        <text class="golden">￥{{user_profit_total_price || 0.00}}</text>
+      </view>
+    </view>
+    <view class="item fl">
+      <view class="name cr-666">待结算金额</view>
+      <view class="value single-text">
+        <text class="yellow">￥{{user_profit_stay_price || 0.00}}</text>
+      </view>
+    </view>
+    <view class="item fl">
+      <view class="name cr-666">已结算金额</view>
+      <view class="value single-text">
+        <text class="green">￥{{user_profit_already_price || 0.00}}</text>
+      </view>
+    </view>
+  </view>
+</view>
+
+<!-- 近15日收益走势 -->
+<view class="container chart-container bg-white oh spacing-mt">
+  <view class="title">近15日收益走势</view>
+  <component-ec-canvas wx:if="{{(profit_data || null) != null}}" canvas-id="profit-chart" ec="{{ profit_chart }}"></component-ec-canvas>
+  <view wx:else class="cr-888 tc chart-not-data">{{data_list_loding_msg || '暂无数据'}}</view>
+</view>
+
+<!-- 近15日推广用户数 -->
+<view class="container chart-container bg-white oh spacing-mt">
+  <view class="title">近15日推广用户数</view>
+  <component-ec-canvas wx:if="{{(user_data || null) != null}}" canvas-id="user-chart" ec="{{ user_chart }}"></component-ec-canvas>
+  <view wx:else class="cr-888 tc chart-not-data">{{data_list_loding_msg || '暂无数据'}}</view>
+</view>
+
+<import src="/pages/common/bottom_line.wxml" />
+<template is="bottom_line" data="{{status: true}}"></template>

public/appmini/old/weixin/pages/plugins/membershiplevelvip/tongji/tongji.wxss

+/*
+ * 公共
+ */
+.container {
+  padding: 20rpx 10rpx;
+}
+.container .title {
+  border-left: 3px solid #1d1611;
+  padding-left: 20rpx;
+  font-size: 32rpx;
+  font-weight: 500;
+}
+.container .base-content {
+  padding: 30rpx 10rpx;
+}
+.container .base-content .name {
+  margin-bottom: 10rpx;
+}
+.container .base-content .value .golden,
+.container .base-content .value .yellow,
+.container .base-content .value .green {
+  font-weight: 500;
+  margin-right: 10rpx;
+}
+.container .base-content .value .golden {
+  color: #1d1611;
+}
+.container .base-content .value .yellow {
+  color: #f37b1d;
+}
+.container .base-content .value .green {
+  color: #5eb95e;
+}
+
+/*
+ * 用户
+ */
+.user-container .item {
+  width: 50%;
+}
+
+/*
+ * 返利
+ */
+.profit-container .item {
+  width: 33.33%;
+}
+
+/*
+ * 图表
+ */
+.chart-container {
+  width: 100%;
+  height: 520rpx;
+  box-sizing: border-box;  
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+.chart-container .chart-not-data {
+  margin-top: 230rpx;
+}
\ No newline at end of file