genjin

src/app.js

@@ -43,6 +43,7 @@ class App extends Component {
       'pages/project/index',
       'pages/person/customerAnalysis/followUpCustomer/index',
       'pages/person/customerAnalysis/transactionCustomer/index',
+      'pages/person/customerAnalysis/myCustomer',
       'pages/shop/index',
       'pages/activity/activity',
       'pages/activity/myActivity',

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

@@ -20,10 +20,13 @@ export default class transactionCustomer extends Taro.Component {
     ],
     recordId: undefined, // 埋点ID
     inputValue: '',
-    screenVisible: true,
+    screenVisible: false,
     statusList: ['全部状态', '认筹', '到访', '签约'],
     statusIndex: -1,
-    dateSel: '2018-04-22',
+    visitDate: '',
+    visitDate2: '',
+    reportDate: '',
+    reportDate2: '',
   }
 
   componentWillUnmount() {
@@ -52,17 +55,43 @@ export default class transactionCustomer extends Taro.Component {
     })
     console.log(item, inx, "eeeeeeeeeeee")
   }
-  onDateChange = e => {
-    console.log(e.detail.value, "e.detail.value")
+  onVisitDateChange = e => {
     this.setState({
-      dateSel: e.detail.value
-    },
-      console.log(this.state.dateSel, "e.detail.value")
-    )
-
+      visitDate: e.detail.value
+    })
+  }
+  onVisitDateChange2 = e => {
+    this.setState({
+      visitDate2: e.detail.value
+    })
+  }
+  onReportDateChange = e => {
+    this.setState({
+      reportDate: e.detail.value
+    })
+  }
+  onReportDateChange2 = e => {
+    this.setState({
+      reportDate2: e.detail.value
+    })
+  }
+  saveBtn() {
+    this.setState({
+      screenVisible: false,
+    })
+  }
+  cancelBtn() {
+    this.setState({
+      screenVisible: false,
+    })
+  }
+  toMyCustomer() {
+    Taro.navigateTo({
+      url: `/pages/person/customerAnalysis/myCustomer`
+    })
   }
   renderScreenBox() {
-    const { statusList, statusIndex, dateSel } = this.state
+    const { statusList, statusIndex, visitDate, visitDate2, reportDate, reportDate2 } = this.state
     return (
       <View className="mask">
         <View className="content">
@@ -70,17 +99,48 @@ export default class transactionCustomer extends Taro.Component {
           <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 key={index + 'status'} 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="time-box">
+            到访时间：
+              <Picker mode='date' onChange={this.onVisitDateChange}>
+              <View className='picker'>
+                {visitDate}
+                {!visitDate && <Text className="placeholder">起始时间</Text>}
+              </View>
+            </Picker>-<Picker mode='date' onChange={this.onVisitDateChange2}>
               <View className='picker'>
-                当前选择：{dateSel}
+                {visitDate2}
+                {!visitDate2 && <Text className="placeholder">结束时间</Text>}
               </View>
             </Picker>
           </View>
+          <View className="time-box" style="margin-top:16px">
+            报备时间：
+              <Picker mode='date' onChange={this.onReportDateChange}>
+              <View className='picker'>
+                {reportDate}
+                {!reportDate && <Text className="placeholder">起始时间</Text>}
+              </View>
+            </Picker>-<Picker mode='date' onChange={this.onReportDateChange2}>
+              <View className='picker'>
+                {reportDate2}
+                {!reportDate2 && <Text className="placeholder">结束时间</Text>}
+              </View>
+            </Picker>
+          </View>
+          <View className="bottom-btn">
+            <View className="save" onClick={this.saveBtn}>
+              保存
+            </View>
+            <View className="cancel" onClick={this.cancelBtn}>
+              取消
+          </View>
+            <View>
+            </View>
+          </View>
         </View>
       </View>
     )
@@ -101,8 +161,8 @@ export default class transactionCustomer extends Taro.Component {
         </View>
         <View style="padding:10px">
           {
-            list.map(item => (
-              <View class="item">
+            list.map((item, index) => (
+              <View class="item" key={index + 'list'} onClick={this.toMyCustomer}>
                 <Image src={require('@assets/default-avatar.png')} className='img'></Image>
                 <View className="name">
                   {item.name}

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

@@ -38,8 +38,8 @@
         flex:0 0 23%;
         margin:  20px 1%;
         border: 2px solid $primary-color;
-        height: 56px;
-        line-height: 56px;
+        height: 60px;
+        line-height: 60px;
         text-align: center;
         border-radius: 12px;
         color: $primary-color;
@@ -56,8 +56,56 @@
         background-color: $primary-color;
       }
     }
+    .time-box{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: 20px 0;
+      color: #555;
+        .picker{
+          width: 240px;
+          height:56px;
+          line-height: 56px;
+          background:rgba(244,244,244,1);
+          border-radius:4px;
+          padding: 0 16px;
+          font-size: 26px;
+          .placeholder{
+            color: #999;
+          }
+        }
+    }
+    .bottom-btn{
+      margin-top: 80px;
+      width: 100%;
+      height: 80px;
+      border-radius: 12px;
+      border:2px solid $primary-color;
+      display: flex;
+      flex-wrap: wrap;
+      align-content: flex-start;
+      justify-content: space-between;
+      font-size: 30px;
+      .save{
+        flex:  0 0 50%;
+        background-color: $primary-color;
+        color:#fff;
+        height: 78px;
+        line-height: 78px;
+        text-align: center;
+        border-radius: 12px 0 0 12px;
+      }
+      .cancel{
+        flex:  0 0 50%;
+        color: $primary-color;
+        text-align: center;
+        height: 78px;
+        line-height: 78px;
+      }
+    }
   }
 }
+
 .search-box{
   display: flex;
   align-items: center;

src/pages/person/customerAnalysis/myCustomer.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 myCustomer 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>
+    )
+  }
+}