customer

config/dev.js

@@ -5,12 +5,12 @@ module.exports = {
   defineConstants: {
     // HOST: '"http://47.101.36.130:8085"',//测试
     // WSS_HOST: '"wss://47.101.36.130:8085"',
-    // HOST:  '"https://dev.jinchengjiaye.com"',//测试
-    // WSS_HOST: '"wss://dev.jinchengjiaye.com"',
+    HOST:  '"https://dev.jinchengjiaye.com"',//测试
+    WSS_HOST: '"wss://dev.jinchengjiaye.com"',
     // HOST: '"https://lt.pawoma.cn"',
     // WSS_HOST: '"wss://lt.pawoma.cn"',
-    HOST: '"http://192.168.0.84:8080"',
-    WSS_HOST: '"ws://192.168.0.84:8080"',
+    // HOST: '"http://192.168.0.84:8080"',
+    // WSS_HOST: '"ws://192.168.0.84:8080"',
   },
   weapp: {},
   h5: {}

src/app.js

@@ -41,10 +41,13 @@ class App extends Component {
     },
     pages: [
       'pages/project/index',
+      'pages/person/customerAnalysis/followUpCustomer/index',
+      'pages/person/customerAnalysis/transactionCustomer/index',
       'pages/shop/index',
       'pages/activity/activity',
       'pages/activity/myActivity',
       'pages/person/index',
+      'pages/person/customerAnalysis/index',
       'pages/person/profile/index',
       'pages/person/profile/detail/index',
       'pages/project/detail/index',

src/components/AddChart.js

@@ -0,0 +1,166 @@
+import Taro, { Component } from "@tarojs/taro";
+import * as echarts from "./ec-canvas/echarts";
+function setChartData(chart, data) {
+  let option = {
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+        textStyle: {
+          color: "#fff"
+        }
+      },
+    },
+    grid: {
+        "borderWidth": 0,
+        "top": 110,
+        "bottom": 95,
+        textStyle: {
+            color: "#fff"
+        }
+    },
+    dataZoom: [
+      {
+        type: 'slider',
+        start: 0,
+        show: false,
+        end: 60,
+      },
+      {
+        type: 'inside',
+        start: 0,
+        end: 60,
+        filterMode: 'filter',
+      },
+    ],
+    xAxis: [{
+        type: "category",
+        axisLine: {
+          lineStyle: {
+            color: '#90979c'
+          }
+        },
+        splitLine: {
+          show: false
+        },
+        axisTick: {
+          show: false
+        },
+        splitArea: {
+          show: false
+        },
+        axisLabel: {
+          interval: 0,
+        },
+        data: [1,2,3,4,5,6,7,8,9,10,11,12],
+    }],
+    yAxis: [{
+      type: "value",
+      splitLine: {
+        show: false
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#90979c'
+        }
+      },
+      axisTick: {
+          show: false
+      },
+      axisLabel: {
+          interval: 0,
+      },
+      splitArea: {
+          show: false
+      },
+    }],
+    series: [
+      {
+        name: "女",
+        type: "bar",
+        stack: "总量",
+        barWidth: 10,
+        label: {
+          normal: {
+            show: false,
+            position: 'top',
+            color: '#000'
+          }
+        },
+        itemStyle: {
+          normal: {
+            barBorderRadius: 20,
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              offset: 0,
+              color: '#00cefc'
+            }, {
+              offset: 1,
+              color: '#00cefc'
+            }]),
+          }
+        },
+        data: data.barData,
+      },
+      {
+        name: "男",
+        type: "line",
+        stack: "总量",
+        symbolSize: 10,
+        symbol:'circle',
+        itemStyle: {
+          normal: {
+            color: "green",
+            barBorderRadius: 0,
+            label: {
+              show: false,
+              position: "bottom",
+            }
+          }
+        },
+        data: data.lineData
+      },
+    ]
+  }
+  chart.setOption(option);
+}
+
+export default class AddChart extends Component {
+  config = {
+    usingComponents: {
+      "ec-canvas": "./ec-canvas/ec-canvas"
+    }
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  state = {
+    ec: {
+      lazyLoad: true
+    }
+  };
+
+  refresh(data) {
+    this.Chart.init((canvas, width, height) => {
+      const chart = echarts.init(canvas, null, {
+        width: width,
+        height: height
+      });
+      setChartData(chart, data);
+      return chart;
+    });
+  }
+
+  refChart = node => (this.Chart = node);
+
+  render() {
+    return (
+      <ec-canvas
+        ref={this.refChart}
+        canvas-id="mychart-area"
+        ec={this.state.ec}
+      />
+    );
+  }
+}

src/components/LineChart.js

@@ -0,0 +1,74 @@
+import Taro, { Component } from "@tarojs/taro";
+import * as echarts from "./ec-canvas/echarts";
+
+function setChartData(chart, data) {
+  let option = {
+    color: ['#3398DB'],
+    xAxis : [
+      {
+        type: 'category',
+        data: [],
+        axisTick: {
+          alignWithLabel: true
+        }
+      }
+    ],
+    yAxis : [
+      {
+        type : 'value'
+      }
+    ],
+    series : []
+  };
+  if (data && data.dimensions && data.measures) {
+    option.xAxis[0].data = data.dimensions.data
+    option.series = data.measures.map(item => {
+      return {
+        ...item,
+        type:'line',
+      }
+    })
+  }
+  chart.setOption(option);
+}
+
+export default class LineChart extends Component {
+  config = {
+    usingComponents: {
+      "ec-canvas": "./ec-canvas/ec-canvas"
+    }
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  state = {
+    ec: {
+      lazyLoad: true
+    }
+  };
+
+  refresh(data) {
+    this.Chart.init((canvas, width, height) => {
+      const chart = echarts.init(canvas, null, {
+        width: width,
+        height: height
+      });
+      setChartData(chart, data);
+      return chart;
+    });
+  }
+
+  refChart = node => (this.Chart = node);
+
+  render() {
+    return (
+      <ec-canvas
+        ref={this.refChart}
+        canvas-id="mychart-area"
+        ec={this.state.ec}
+      />
+    );
+  }
+}

src/components/MoveChart.js

@@ -0,0 +1,90 @@
+import Taro, { Component } from "@tarojs/taro";
+import * as echarts from "./ec-canvas/echarts";
+
+function setChartData(chart, data) {
+  let option = {
+    tooltip: {
+    },
+    color: ['#3398DB'],
+    xAxis : [
+      {
+        type: 'category',
+        data: [],
+        axisTick: {
+          alignWithLabel: true
+        }
+      }
+    ],
+    dataZoom: [
+      {
+        type: 'slider',
+        start: 0,
+        show: false,
+        end: 50,
+      },
+      {
+        type: 'inside',
+        start: 0,
+        end: 50,
+        filterMode: 'filter',
+      },
+    ],
+    yAxis : [
+      {
+        type : 'value'
+      }
+    ],
+    series : []
+  };
+  if (data && data.dimensions && data.measures) {
+    option.xAxis[0].data = data.dimensions.data
+    option.series = data.measures.map(item => {
+      return {
+        ...item,
+        type:'bar',
+      }
+    })
+  }
+  chart.setOption(option);
+}
+
+export default class MoveChart extends Component {
+  config = {
+    usingComponents: {
+      "ec-canvas": "./ec-canvas/ec-canvas"
+    }
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  state = {
+    ec: {
+      lazyLoad: true
+    }
+  };
+
+  refresh(data) {
+    this.Chart.init((canvas, width, height) => {
+      const chart = echarts.init(canvas, null, {
+        width: width,
+        height: height
+      });
+      setChartData(chart, data);
+      return chart;
+    });
+  }
+
+  refChart = node => (this.Chart = node);
+
+  render() {
+    return (
+      <ec-canvas
+        ref={this.refChart}
+        canvas-id="mychart-area"
+        ec={this.state.ec}
+      />
+    );
+  }
+}

src/components/ec-canvas/ec-canvas.js

@@ -0,0 +1,132 @@
+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];
+        this.chart._zr.handler.dispatch('mousedown', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        this.chart._zr.handler.dispatch('mousemove', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        this.chart._zr.handler.proxy.processGesture(wrapTouch(e), 'start');
+      }
+    },
+
+    touchMove(e) {
+      if (this.chart && e.touches.length > 0) {
+        var touch = e.touches[0];
+        this.chart._zr.handler.dispatch('mousemove', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        this.chart._zr.handler.proxy.processGesture(wrapTouch(e), 'change');
+      }
+    },
+
+    touchEnd(e) {
+      if (this.chart) {
+        const touch = e.changedTouches ? e.changedTouches[0] : {};
+        this.chart._zr.handler.dispatch('mouseup', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        this.chart._zr.handler.dispatch('click', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        this.chart._zr.handler.proxy.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;
+}

src/components/ec-canvas/ec-canvas.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

src/components/ec-canvas/ec-canvas.wxml

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

src/components/ec-canvas/ec-canvas.wxss

@@ -0,0 +1,4 @@
+.ec-canvas {
+  width: 100%;
+  height: 100%;
+}

src/components/ec-canvas/wx-canvas.js

@@ -0,0 +1,97 @@
+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._zr.handler.dispatch(name.ecName, {
+          zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
+          zrY: name.wxName === 'tap' ? touch.clientY : touch.y
+        });
+      };
+    });
+  }
+}

src/pages/Line/Line.js

@@ -0,0 +1,30 @@
+import Taro, { Component } from "@tarojs/taro";
+import { View } from "@tarojs/components";
+import LineChart from '../../components/LineChart'
+import "./index.scss";
+
+export default class Line extends Component {
+  config = {
+    navigationBarTitleText: "折线图示例"
+  };
+  componentDidMount() {
+    const chartData = {
+      dimensions: {
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      },
+      measures: [{
+        data: [10, 52, 200, 334, 390, 330, 220]
+      }]
+    }
+    this.lineChart.refresh(chartData);
+  }
+  refLineChart = (node) => this.lineChart = node
+
+  render() {
+    return (
+      <View className="line-chart">
+        <LineChart ref={this.refLineChart} />
+      </View>
+    );
+  }
+}

src/pages/Line/index.scss

@@ -0,0 +1,4 @@
+.line-chart {
+  width: 100%;
+  height: 100vh;
+}

src/pages/More/More.js

@@ -0,0 +1,40 @@
+import Taro, { Component } from "@tarojs/taro";
+import { View } from "@tarojs/components";
+import MoveChart from '../../components/MoveChart'
+import LineChart from '../../components/LineChart'
+import "./index.scss";
+
+
+export default class More extends Component {
+  config = {
+    navigationBarTitleText: "可移动图表示例"
+  };
+  componentDidMount() {
+    const chartData = {
+      dimensions: {
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+      },
+      measures: [{
+        data: [10, 52, 200, 334, 390, 330, 220, 334, 390, 330, 220, 10, 52, 200,]
+      }]
+    }
+    this.moveChart.refresh(chartData);
+    this.lineChart.refresh(chartData);
+  }
+  refMoveChart = (node) => this.moveChart = node
+
+  refLineChart = (node) => this.lineChart = node
+
+  render() {
+    return (
+      <View className='container'>
+        <View className="move-chart">
+          <MoveChart ref={this.refMoveChart} />
+        </View>
+        <View className="move-chart">
+          <LineChart ref={this.refLineChart} />
+        </View>
+      </View>
+    );
+  }
+}

src/pages/More/index.scss

@@ -0,0 +1,7 @@
+.text {
+  text-align: center;
+}
+.move-chart {
+  width: 100%;
+  height: 50vh;
+}

src/pages/news/item.scss

@@ -1,6 +1,5 @@
 @import "@styles/theme.scss";
 .item {
-  padding: 20px 0;
   border-bottom: solid 1px $border-color-light;
   display: flex;
   justify-content: space-between;
@@ -8,10 +7,9 @@
 	margin:0 30px;
 
   &-img {
-    width: 400px;
-    height: 200px;
+    width: 350px;
+    height: 160px;
     margin-right: 30px;
-    border-radius: 10px;
   }
 
   &-con {

src/pages/person/customerAnalysis/analysis.js

@@ -0,0 +1,58 @@
+import Taro, { Component } from '@tarojs/taro';
+import Authorize from '@components/authorize'
+import { View } from "@tarojs/components";
+import MoveChart from '../../components/MoveChart'
+import LineChart from '../../components/LineChart'
+import './index.scss'
+import { AtTabs, AtTabsPane } from 'taro-ui'
+import "taro-ui/dist/style/components/tabs.scss"
+import { savePoint, updatePoint } from '@services/common'
+import { connect } from '@tarojs/redux'
+
+
+@connect(({ user, city }) => ({ user, city }))
+export default class analysis extends Taro.Component {
+
+  config = {
+    navigationBarTitleText: ''
+  }
+
+  state = {
+    current: 0,
+    recordId: undefined, // 埋点ID
+  }
+
+  componentWillUnmount() {
+    const { recordId } = this.state
+    recordId && updatePoint(recordId)
+  }
+
+  handleClick(value) {
+    this.setState({
+      current: value
+    }, )
+  }
+ 
+
+  render() {
+
+    const tabList = [{ title: '新增客户' }, { title: '跟进客户' }, { title: '到访客户' }]
+
+    return (
+      <View>
+        <AtTabs className="tab-bar" current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
+          <AtTabsPane current={this.state.current} index={0} >
+            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;' >标签22页一的内容</View>
+          </AtTabsPane>
+          <AtTabsPane current={this.state.current} index={1}>
+            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页二的内容</View>
+          </AtTabsPane>
+          <AtTabsPane current={this.state.current} index={2}>
+            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>
+          </AtTabsPane>
+        </AtTabs>
+
+      </View>
+    )
+  }
+}

src/pages/person/customerAnalysis/followUpCustomer/index.js

@@ -0,0 +1,125 @@
+import Taro, { Component } from '@tarojs/taro';
+import Authorize from '@components/authorize'
+import './index.scss'
+import { savePoint, updatePoint } from '@services/common'
+import { connect } from '@tarojs/redux'
+import { View, Text, Picker } from '@tarojs/components';
+const iconImg = require('@assets/person/icon.png')
+
+@connect(({ user, city }) => ({ user, city }))
+export default class transactionCustomer extends Taro.Component {
+
+  config = {
+    navigationBarTitleText: '跟进客户'
+  }
+
+  state = {
+    list: [
+      { name: '刘丽丽', phone: '15852364821', sex: '1' },
+      { name: '邓亚平', phone: '13160056061', sex: '2' },
+    ],
+    recordId: undefined, // 埋点ID
+    inputValue: '',
+    screenVisible: true,
+    statusList: ['全部状态', '认筹', '到访', '签约'],
+    statusIndex: -1,
+    dateSel: '2018-04-22',
+  }
+
+  componentWillUnmount() {
+    const { recordId } = this.state
+    recordId && updatePoint(recordId)
+  }
+  changeInput = e => {
+    this.setState({
+      inputValue: e.detail.value
+    })
+  }
+  searchBtn() {
+    const palyload = {
+      inputValue: this.state.inputValue
+    }
+    console.log(this.state.inputValue, "inputValue")
+  }
+  screenShow() {
+    this.setState({
+      screenVisible: true,
+    })
+  }
+  chooseStatus(item, inx) {
+    this.setState({
+      statusIndex: inx,
+    })
+    console.log(item, inx, "eeeeeeeeeeee")
+  }
+  onDateChange = e => {
+    console.log(e.detail.value, "e.detail.value")
+    this.setState({
+      dateSel: e.detail.value
+    },
+      console.log(this.state.dateSel, "e.detail.value")
+    )
+
+  }
+  renderScreenBox() {
+    const { statusList, statusIndex, dateSel } = this.state
+    return (
+      <View className="mask">
+        <View className="content">
+          <View style="color:#333;font-size:14px">精准筛选</View>
+          <View className="status-box">
+            {
+              statusList.map((item, index) => (
+                <View className={index == statusIndex ? 'checked' : 'status-item'} onClick={this.chooseStatus.bind(this, item, index)}>{item}</View>
+              ))
+            }
+          </View>
+          <View>
+            <Picker mode='date' onChange={this.onDateChange}>
+              <View className='picker'>
+                当前选择：{dateSel}
+              </View>
+            </Picker>
+          </View>
+        </View>
+      </View>
+    )
+  }
+
+  render() {
+    const { list, screenVisible } = this.state
+
+    return (
+      <View>
+        <View className="top-screen" onClick={this.screenShow}>
+          精准筛选<Image src={require('@assets/person/screen.png')} className="screen-img"></Image>
+        </View>
+        {screenVisible && this.renderScreenBox()}
+        <View className="search-box">
+          <Input class="input" placeholderClass='placeholder' autoFocus onInput={this.changeInput} placeholder="请输入用户名/手机号" />
+          <Button className="btn" onClick={this.searchBtn} >搜索</Button>
+        </View>
+        <View style="padding:10px">
+          {
+            list.map(item => (
+              <View class="item">
+                <Image src={require('@assets/default-avatar.png')} className='img'></Image>
+                <View className="name">
+                  {item.name}
+                  {
+                    item.sex == '1' && <View style={`margin-left:10px;background-image: url(${iconImg});background-size: 100%;background-position: 0px -20px;width: 18px;height: 18px;`}></View>
+                  }
+                  {
+                    item.sex == '2' && <View style={`margin-left:10px;background-image: url(${iconImg});background-size: 100%;background-position: 0px 0px;width: 18px;height: 18px;`}></View>
+                  }
+                </View>
+                <View className="phone">{item.phone}<View style={`background-image: url(${iconImg});background-size: 100%;background-position: 0px -44px;width: 22px;height: 22px;`}></View> </View>
+                <View className="status">报备</View>
+              </View>
+            ))
+          }
+        </View>
+      </View>
+    )
+  }
+}

src/pages/person/customerAnalysis/followUpCustomer/index.scss

@@ -0,0 +1,124 @@
+@import "@styles/theme.scss";
+.top-screen{
+  height:56px;
+  line-height: 56px;
+  background:#f4f4f4;
+  color: #999;
+  font-size: 24px;
+  text-align: right;
+  padding-right: 30px;
+  .screen-img{
+    width: 24px;
+    height: 24px;
+    margin: 0 0 -4px 4px;
+  }
+}
+.mask {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  left: 0;
+  top: 0;
+  z-index: 9999;
+  background:rgba(0,0,0,0.22);
+  .content {
+    width: 100%;
+    height:538px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background-color: #fff;
+    padding: 20px 40px;
+    .status-box{
+      display: flex;
+      flex-wrap: wrap;
+      align-content: flex-start;
+      justify-content: space-between;
+      .status-item{
+        flex:0 0 23%;
+        margin:  20px 1%;
+        border: 2px solid $primary-color;
+        height: 56px;
+        line-height: 56px;
+        text-align: center;
+        border-radius: 12px;
+        color: $primary-color;
+      }
+      .checked{
+        flex:0 0 23%;
+        margin:  20px 1%;
+        border: 2px solid $primary-color;
+        height: 56px;
+        line-height: 56px;
+        text-align: center;
+        border-radius: 12px;
+        color: #fff;
+        background-color: $primary-color;
+      }
+    }
+  }
+}
+.search-box{
+  display: flex;
+  align-items: center;
+  padding: 20px 40px;
+  .input{
+    height: 56px;
+    line-height: 56px;
+    width: 84%;
+    background:#f4f4f4;
+    border-radius: 4px 0px 0px 4px;
+    padding: 0 20px;
+    font-size: 22px;
+  }
+  .placeholder{
+    color:#C9C9C9;
+  }
+  .btn{
+    height: 56px;
+    padding: 0;
+    line-height: 56px;
+    width: 16%;
+    text-align: center;
+    background-color: $primary-color; 
+    color: #fff;
+    font-size: 28px;
+    border-radius:0px 4px 4px 0px;
+
+  }
+}
+.item{
+  padding: 20px 0;
+  display: flex;
+  align-items: center;
+  position: relative;
+  justify-content: space-between;
+  box-shadow:0px 2px 0px 0px rgba(0,0,0,0.12);
+  .img{
+    width: 100px;
+    height: 100px;
+    border-radius: 50px;
+  }
+  .name{
+    display: flex;
+    align-items: center;
+    color: #333;
+    font-size: 30px;
+    position: absolute;
+    top:24px;
+    left:120px;
+  }
+  .phone{
+    color: #333;
+    font-size: 30px;
+    position: absolute;
+    bottom:24px;
+    left:120px;
+    display: flex;
+    align-items: center;
+  }
+  .status{
+    color:$primary-color;
+    font-size: 32px;
+  }
+}

src/pages/person/customerAnalysis/index.js

@@ -0,0 +1,69 @@
+import Taro, { Component } from '@tarojs/taro';
+import Authorize from '@components/authorize'
+import './index.scss'
+import { AtTabs, AtTabsPane } from 'taro-ui'
+import "taro-ui/dist/style/components/tabs.scss"
+import { savePoint, updatePoint } from '@services/common'
+import { connect } from '@tarojs/redux'
+import Analysis from './analysis'
+
+@connect(({ user, city }) => ({ user, city }))
+export default class customer extends Taro.Component {
+
+  config = {
+    navigationBarTitleText: '盘客工具'
+  }
+
+  state = {
+    current: 1,
+    recordId: undefined, // 埋点ID
+  }
+
+  componentWillUnmount() {
+    const { recordId } = this.state
+    recordId && updatePoint(recordId)
+  }
+
+  handleClick(value) {
+    this.setState({
+      current: value
+    }, )
+  }
+  toTransactionCustomer() {
+    Taro.navigateTo({
+      url: `/pages/person/customerAnalysis/transactionCustomer/index`
+    })
+  }
+  toFollowUpCustomer() {
+    Taro.navigateTo({
+      url: `/pages/person/customerAnalysis/followUpCustomer/index`
+    })
+  }
+
+  render() {
+    const tabList = [{ title: '客户分析' }, { title: '我的客户' }]
+    return (
+      <AtTabs className="tab-box" current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
+        <AtTabsPane current={this.state.current} index={0} >
+          <View >
+            <Analysis></Analysis>
+          </View>
+        </AtTabsPane>
+        <AtTabsPane current={this.state.current} index={1}>
+          <View style="padding:10px 20px; display: flex;flex-wrap: wrap;align-content: flex-start;justify-content: space-between;">
+            <View className="my-customer" onClick={this.toFollowUpCustomer} style="border-right:1px solid rgba(0,0,0,0.12)">
+              <Image mode="widthFix" src={require('@assets/person/genjin.png')} className='img'></Image>
+              <View className="name">跟进客户</View>
+              <View className="num">33人</View>
+            </View>
+            <View className="my-customer" onClick={this.toTransactionCustomer}>
+              <Image mode="widthFix" src={require('@assets/person/chengjiao.png')} className='img'></Image>
+              <View className="name">成交客户</View>
+              <View className="name">33人</View>
+            </View>
+          </View>
+        </AtTabsPane>
+      </AtTabs>
+    )
+  }
+}

src/pages/person/customerAnalysis/index.scss

@@ -0,0 +1,82 @@
+@import "@styles/theme.scss";
+
+.wrap {
+  background: white;
+  position: relative;
+  height:100vh;
+}
+
+.tab-box{
+  .at-tabs__header{
+    width: 86%;
+    background-color: #fff;
+    box-shadow:0px 4px 12px 0px rgba(0,0,0,0.12);
+    margin: 20px auto 10px auto;
+    border-radius: 44px;
+  }
+  .at-tabs__item{
+    width:50%;
+    flex: none;
+    color: #666;
+    font-size: 28px;
+  }
+  .at-tabs__item--active{
+    color: $primary-color;
+    background-color: #f4f4f4;
+    border-radius: 0 44px 44px 0;
+  }
+  .at-tabs__item-underline{
+    height: 0px;
+  }
+  .at-tabs__underline{
+    height: 0px!important;
+  }
+  .my-customer{
+    flex: 0 0 50%;
+    text-align: center;
+    border-bottom: 2px solid rgba(216,216,216,1);
+    padding: 80px 0;
+    
+    .img{
+      width: 76px;
+    }
+    .name{
+      color: #333;
+      font-size: 30px;
+      line-height: 48px;
+    }
+
+
+  }
+  .tab-bar{
+    margin-top: 50px;
+    .at-tabs__header{
+      width: 80%;
+      background-color: none;
+      box-shadow:none;
+      margin: 0 auto;
+      border-radius: 0;
+      border: none;
+    }
+    .at-tabs__item{
+      width:33.333%;
+      flex: none;
+      color: #666;
+      font-size: 28px;
+    }
+    .at-tabs__item--active{
+      color: $primary-color;
+      background-color: #fff;
+    }
+    .at-tabs__item-underline{
+      height: 2px;
+      background-color: $primary-color;
+      width: 60%;
+      margin-left: 20%;
+    }
+  
+  }
+
+
+}
+

src/pages/person/customerAnalysis/transactionCustomer/index.js

@@ -0,0 +1,59 @@
+import Taro, { Component } from '@tarojs/taro';
+import Authorize from '@components/authorize'
+import './index.scss'
+import { savePoint, updatePoint } from '@services/common'
+import { connect } from '@tarojs/redux'
+// import { getThumbnail } from '@utils/tools'
+const iconImg = require('@assets/person/icon.png')
+
+
+@connect(({ user, city }) => ({ user, city }))
+export default class transactionCustomer extends Taro.Component {
+
+  config = {
+    navigationBarTitleText: '成交客户'
+  }
+
+  state = {
+    list: [
+      { name: '刘丽丽', phone: '15852364821', sex: '1' },
+      { name: '邓亚平', phone: '13160056061', sex: '2' },
+    ],
+    recordId: undefined, // 埋点ID
+  }
+
+  componentWillUnmount() {
+    const { recordId } = this.state
+    recordId && updatePoint(recordId)
+  }
+
+  render() {
+    const { list } = this.state
+
+    return (
+      <View style="padding:10px">
+        {
+
+          list.map(item => (
+            <View class="item">
+
+              <Image src={require('@assets/default-avatar.png')} className='img'></Image>
+              <View className="name">
+                {item.name}
+                {
+                  item.sex == '1' && <View style={`margin-left:10px;background-image: url(${iconImg});background-size: 100%;background-position: 0px -20px;width: 18px;height: 18px;`}></View>
+                }
+                {
+                  item.sex == '2' && <View style={`margin-left:10px;background-image: url(${iconImg});background-size: 100%;background-position: 0px 0px;width: 18px;height: 18px;`}></View>
+                }
+              </View>
+              <View className="phone">{item.phone} </View>
+              <View  style={`background-image: url(${iconImg});background-size: 100%;background-position: 0px -44px;width: 22px;height: 22px;`}></View>
+            </View>
+          ))
+        }
+
+      </View>
+    )
+  }
+}

src/pages/person/customerAnalysis/transactionCustomer/index.scss

@@ -0,0 +1,30 @@
+@import "@styles/theme.scss";
+.item{
+  padding: 20px 0;
+  display: flex;
+  align-items: center;
+  position: relative;
+  justify-content: space-between;
+  box-shadow:0px 2px 0px 0px rgba(0,0,0,0.12);
+  .img{
+    width: 100px;
+    height: 100px;
+    border-radius: 50px;
+  }
+  .name{
+    display: flex;
+    align-items: center;
+    color: #333;
+    font-size: 30px;
+    position: absolute;
+    top:24px;
+    left:120px;
+  }
+  .phone{
+    color: #333;
+    font-size: 30px;
+    position: absolute;
+    bottom:24px;
+    left:120px;
+  }
+}

src/pages/person/menus.js

@@ -33,11 +33,18 @@ const menus = [
     },
     {
       name: '我的主页',
-      url: ({id}) => `/pages/card/index?id=${id}`,
+      url: ({ id }) => `/pages/card/index?id=${id}`,
       icon: icons.homepage,
       extends: undefined,
       userTypes: [CONSULTANT],
     },
+    {
+      name: '盘客工具',
+      url: '/pages/person/customerAnalysis/index',
+      icon: icons.homepage,
+      extends: undefined,
+      userTypes: [CUSTOMER, CONSULTANT],
+    },
     {
       name: '成为经纪人',
       url: '/pages/agent/become/index',

src/pages/policy/index.scss

@@ -7,5 +7,5 @@
   padding:0 40px;
   height:100vh;
   background:white;
-  margin-top:30px;
+  margin-top:20px;
 }

src/pages/policy/item/item.scss

@@ -1,14 +1,13 @@
 @import "@styles/theme.scss";
 .item {
-  padding: 50px 0;
   border-bottom: solid 1px $border-color-light;
   display: flex;
   justify-content: space-between;
   align-items: center;
 
   &-img {
-    width: 400px;
-    height: 200px;
+    width: 350px;
+    height: 160px;
     margin-right: 30px;
   }
 
@@ -21,11 +20,14 @@
 
     &__title {
       font-size: $font-size-title;
+      margin-top: 20px;
     }
 
     &__date {
       font-size: $font-size-content;
-      color: $text-color-lighter
+      color: $text-color-lighter;
+      margin-bottom: 20px;
     }
   }
-}
+}
+