浏览代码

my customer

许静 5 年前
父节点
当前提交
735a6a2882

+ 2
- 2
config/dev.js 查看文件

@@ -9,8 +9,8 @@ module.exports = {
9 9
     WSS_HOST: '"wss://dev.jinchengjiaye.com"',
10 10
     // HOST: '"https://lt.pawoma.cn"',
11 11
     // WSS_HOST: '"wss://lt.pawoma.cn"',
12
-    HOST: '"http://192.168.0.131:8080"',
13
-    WSS_HOST: '"ws://192.168.0.131:8080"',
12
+    // HOST: '"http://192.168.0.131:8080"',
13
+    // WSS_HOST: '"ws://192.168.0.131:8080"',
14 14
   },
15 15
   weapp: {},
16 16
   h5: {}

+ 9
- 3
src/pages/person/customerAnalysis/analysis.js 查看文件

@@ -4,8 +4,9 @@ import { View } from "@tarojs/components";
4 4
 import MoveChart from '../../components/MoveChart'
5 5
 import LineChart from '../../components/LineChart'
6 6
 import './index.scss'
7
-import { AtTabs, AtTabsPane } from 'taro-ui'
7
+import { AtTabs, AtTabsPane, AtProgress } from 'taro-ui'
8 8
 import "taro-ui/dist/style/components/tabs.scss"
9
+import "taro-ui/dist/style/components/progress.scss";
9 10
 import { savePoint, updatePoint } from '@services/common'
10 11
 import { connect } from '@tarojs/redux'
11 12
 
@@ -32,7 +33,7 @@ export default class analysis extends Taro.Component {
32 33
       current: value
33 34
     }, )
34 35
   }
35
- 
36
+
36 37
 
37 38
   render() {
38 39
 
@@ -42,7 +43,12 @@ export default class analysis extends Taro.Component {
42 43
       <View>
43 44
         <AtTabs className="tab-bar" current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
44 45
           <AtTabsPane current={this.state.current} index={0} >
45
-            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;' >标签22页一的内容</View>
46
+            <View>
47
+              <View className="sex-box">
48
+                <View className="sex">性别</View>
49
+                <AtProgress percent={25} strokeWidth={6} color='#FF4949' />
50
+              </View>
51
+            </View>
46 52
           </AtTabsPane>
47 53
           <AtTabsPane current={this.state.current} index={1}>
48 54
             <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页二的内容</View>

+ 1
- 1
src/pages/person/customerAnalysis/index.js 查看文件

@@ -15,7 +15,7 @@ export default class customer extends Taro.Component {
15 15
   }
16 16
 
17 17
   state = {
18
-    current: 1,
18
+    current: 0,
19 19
     recordId: undefined, // 埋点ID
20 20
   }
21 21
 

+ 142
- 1
src/pages/person/customerAnalysis/index.scss 查看文件

@@ -63,6 +63,7 @@
63 63
       flex: none;
64 64
       color: #666;
65 65
       font-size: 28px;
66
+      padding: 12px 20px;
66 67
     }
67 68
     .at-tabs__item--active{
68 69
       color: $primary-color;
@@ -76,7 +77,147 @@
76 77
     }
77 78
   
78 79
   }
80
+}
79 81
 
80 82
 
81
-}
83
+.user_con{
84
+  margin: 0 20px 40px 20px;
85
+  height:256px;
86
+  box-shadow:0px 4px 12px 0px rgba(0,0,0,0.12);
87
+  border-radius:12px;
88
+  position: relative;
89
+ 
90
+  .bg{
91
+    position: absolute;
92
+    top:0;
93
+    left:0;
94
+    width: 100%;
95
+    height: 100%;
96
+    border-radius: 12px;
97
+
98
+  }
99
+  .user__left__headimg{
100
+    width: 176px;
101
+    height: 176px;
102
+    border-radius: 50%;
103
+    position: absolute;
104
+    top:50%;
105
+    left: 128px;
106
+    margin-top: -88px;
107
+  }
108
+  .user__left__name{
109
+    font-size:32px;
110
+    color: $primary-color;
111
+    position: absolute;
112
+    top:76px;
113
+    left:320px;
114
+  }
115
+  .user__left__phone{
116
+    font-size:32px;
117
+    color: #333;
118
+    position: absolute;
119
+    bottom:76px;
120
+    left:320px;
121
+  }
122
+  }
123
+  .my-tab{
124
+    .btn{
125
+      width:360px;
126
+      text-align: center;
127
+      height:70px;
128
+      line-height: 70px;
129
+      margin: 200px auto 40px auto;
130
+      background:$primary-color;
131
+      color: #fff;
132
+      border-radius:8px;
133
+      font-size: 32px;
134
+
135
+    }
136
+    .pane{
137
+      padding-bottom: 240px;
138
+    }
139
+    .at-tabs__item{
140
+      padding: 12px 20px;
141
+      color: #666;
142
+      font-size: 30px;
143
+    }
144
+    .at-tabs__item-underline{
145
+      width: 64%;
146
+      margin-left: 18%;
147
+      background-color: $primary-color;
148
+    }
149
+    .at-tabs__item--active{
150
+      color: $primary-color;
151
+    }
152
+    .at-tabs__underline{
153
+      height: 0px!important;
154
+    }
155
+    .tab-pane1{
156
+      position: relative;
157
+      .status{
158
+        font-size: 36px;
159
+        color: $primary-color;
160
+        position: absolute;
161
+        right:30px;
162
+        top:0px;
163
+      }
164
+      .base-item{
165
+        margin-top: 30px;
166
+        display: flex;
167
+        padding: 0 28px;
168
+        align-items: center;
169
+        color: #666;
170
+        font-size: 30px;
171
+        .con{
172
+          margin-left: 20px;
173
+        }
174
+      }
175
+      
82 176
 
177
+    }
178
+    .tab-pane2{
179
+      padding: 0 40px;
180
+      .date{
181
+        font-size: 26px;
182
+        color: #999;
183
+        margin-top: 30px;
184
+      }
185
+      .record-item{
186
+        font-size: 30px;
187
+        margin-top: 20px;
188
+        color: #333;
189
+        display: flex;
190
+        align-items: center;
191
+        justify-content: space-between;
192
+        .time{
193
+          font-size: 26px;
194
+          color: #999;
195
+        }
196
+      }
197
+    }
198
+    .tab-pane3{
199
+      padding: 20px 40px;
200
+    }
201
+  }
202
+  .tab-pane4{
203
+    padding: 0 40px;
204
+    // .genjin-item{
205
+    //   display: flex;
206
+    //   justify-content: space-between;
207
+    //   align-items: center;
208
+    //   color: #333;
209
+    //   font-size: 34px;
210
+    //   .dot{
211
+    //     width:16px;
212
+    //     height:16px;
213
+    //     display: inline-block;
214
+    //     background:rgba(246,182,29,1);
215
+    //     border-radius: 50%;
216
+    //   }
217
+    //   .time{
218
+    //     font-size: 26px;
219
+    //     color: #999;
220
+    //   }
221
+    // }
222
+    
223
+  }

+ 45
- 0
src/pages/person/customerAnalysis/item/index.js 查看文件

@@ -0,0 +1,45 @@
1
+import Taro, { Component } from '@tarojs/taro';
2
+import './index.scss'
3
+import dayjs from 'dayjs'
4
+import { getThumbnail } from '@utils/tools'
5
+
6
+export default class Item extends Component {
7
+  static defaultProps = {
8
+    data: {},
9
+    style: {}
10
+  }
11
+  handleClick(data) {
12
+
13
+    this.props.onClick(data)
14
+  }
15
+  render() {
16
+    const { data, style } = this.props
17
+    return (
18
+      <View className="item" style={style} onClick={this.handleClick.bind(this, data)}>
19
+        {(data.type == 'help' || data.type == 'group') &&
20
+          <View className={data.type == 'help' ? 'type' : 'type2'}>{data.type == 'help' ? '助力' : '拼团'}</View>
21
+        }
22
+
23
+        <Image className="pic" mode="aspectFill" src={getThumbnail(data.mainImg || data.imgUrl)}></Image>
24
+
25
+        <View className="box">
26
+
27
+          <View className="left">
28
+            <View className="title">{data.title}</View>
29
+            {data.startDate &&
30
+              <View className={data.activityStatus == 0 ? "status signed " : data.activityStatus == 1 ? "status nostart" : data.activityStatus == 2 ? "status fail" : "status"}>{data.activityStatus == 0 ? "立即参与" : data.activityStatus == 1 ? "未开始" : data.activityStatus == 2 ? "已结束" : "已参与"}</View>
31
+            }
32
+          </View>
33
+
34
+          {data.startDate &&
35
+            <View className="time">参与时间:{`${dayjs(data.startDate).format('YYYY年MM月DD日 HH:mm:ss')}`}</View>
36
+          }
37
+          {!data.startDate &&
38
+            <View className="time">{data.type != 'dynamic' ? '参与时间:' : ''}</View>
39
+          }
40
+        </View>
41
+
42
+      </View >
43
+    );
44
+  }
45
+}

+ 79
- 0
src/pages/person/customerAnalysis/item/index.scss 查看文件

@@ -0,0 +1,79 @@
1
+@import "@styles/theme.scss";
2
+@import "@styles/mixins.scss";
3
+
4
+.flex {
5
+  display: flex;
6
+  justify-content: space-between;
7
+  align-items: center;
8
+}
9
+
10
+.item {
11
+  box-shadow:0px 4px 8px 0px rgba(0,0,0,0.12);
12
+  border-radius:  12px;
13
+  overflow: hidden;
14
+  margin-bottom: 20px;
15
+  width: 100%;
16
+  position: relative;
17
+  .type{
18
+    position: absolute;
19
+    left:0;
20
+    top:0;
21
+    color: #fff;
22
+    background:#F6B61D;
23
+    padding: 10px 36px;
24
+    border-radius: 12px 0 12px 0;
25
+    font-size: 24px;
26
+  }
27
+  .type2{
28
+    position: absolute;
29
+    left:0;
30
+    top:0;
31
+    color: #fff;
32
+    background:#BB9C79;
33
+    padding: 12px 36px;
34
+    border-radius: 12px 0 12px 0;
35
+    font-size: 24px;
36
+
37
+  }
38
+  .pic {
39
+    width: 100%;
40
+    height:376px;
41
+    display: block;
42
+  }
43
+
44
+  .box {
45
+    padding:20px 30px;
46
+    .title {
47
+      font-size: 28px;
48
+      color: #333;
49
+      width: 500px;
50
+      @include text-ellipsis;
51
+    }
52
+    .time {
53
+      margin-top: 20px;
54
+      font-size: 24px;
55
+      color: #8E8E8E;
56
+    }
57
+    .left {
58
+      width: 100%;
59
+      overflow: hidden;
60
+      display: flex;
61
+      justify-content: space-between;
62
+      align-items: center;
63
+    }
64
+
65
+    .status {
66
+      color: #E35E44;
67
+      font-size: 28px;
68
+    }
69
+    .signed{
70
+      color: #F6B61D;
71
+    }
72
+		.nostart {
73
+      color:$primary-color;
74
+    }
75
+    .fail{
76
+      color: #979797;
77
+    }
78
+  }
79
+}

+ 84
- 14
src/pages/person/customerAnalysis/myCustomer.js 查看文件

@@ -1,14 +1,11 @@
1 1
 import Taro, { Component } from '@tarojs/taro';
2
-import Authorize from '@components/authorize'
3
-import { View } from "@tarojs/components";
4
-import MoveChart from '../../components/MoveChart'
5
-import LineChart from '../../components/LineChart'
6
-import './index.scss'
7 2
 import { AtTabs, AtTabsPane } from 'taro-ui'
8 3
 import "taro-ui/dist/style/components/tabs.scss"
9 4
 import { savePoint, updatePoint } from '@services/common'
10 5
 import { connect } from '@tarojs/redux'
11
-
6
+import './index.scss'
7
+import ActivityItem from './item'
8
+import { getActNewList } from '@services/activity'
12 9
 
13 10
 @connect(({ user, city }) => ({ user, city }))
14 11
 export default class myCustomer extends Taro.Component {
@@ -20,6 +17,7 @@ export default class myCustomer extends Taro.Component {
20 17
   state = {
21 18
     current: 0,
22 19
     recordId: undefined, // 埋点ID
20
+    list: []
23 21
   }
24 22
 
25 23
   componentWillUnmount() {
@@ -32,26 +30,98 @@ export default class myCustomer extends Taro.Component {
32 30
       current: value
33 31
     }, )
34 32
   }
35
- 
36 33
 
37
-  render() {
34
+  componentDidShow() {
35
+
36
+    this.loadList()
37
+  }
38
+  loadList() {
39
+    getActNewList().then(res => {
40
+      this.setState({
41
+        list: res.records || []
42
+      })
43
+    })
44
+  }
45
+  handleItemClick(item) {
46
+    switch (item.type) {
47
+      case 'help':
48
+        Taro.navigateTo({
49
+          url: '/pages/activity/detail/assistance?id=' + item.id
50
+        })
51
+        return
52
+      case 'group':
53
+        Taro.navigateTo({
54
+          url: '/pages/activity/detail/assemble?id=' + item.id
55
+        })
56
+        return
57
+      default:
58
+        Taro.navigateTo({
59
+          url: '/pages/activity/detail/index?id=' + item.id
60
+        })
61
+        return
62
+    }
63
+  }
38 64
 
39
-    const tabList = [{ title: '新增客户' }, { title: '跟进客户' }, { title: '到访客户' }]
65
+  render() {
40 66
 
67
+    const tabList = [{ title: '基本信息' }, { title: '访问记录' }, { title: '活动信息' }, { title: '跟进记录' }]
68
+    const { list } = this.state
41 69
     return (
42 70
       <View>
43
-        <AtTabs className="tab-bar" current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
71
+        <View className="user_con">
72
+          <Image className="bg" src={require('@assets/shop/background.jpg')} ></Image>
73
+          <Image className="user__left__headimg" src={require('@assets/default-avatar.png')} />
74
+          <View className='user__left__name'>客户姓名</View>
75
+          <View className='user__left__phone'>175 1562 8701</View>
76
+        </View>
77
+        <AtTabs className="my-tab" current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
44 78
           <AtTabsPane current={this.state.current} index={0} >
45
-            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;' >标签22页一的内容</View>
79
+            <View className="tab-pane1 pane">
80
+              <View className="status">到访</View>
81
+              <View className="base-item">意向项目:<View className="con">银城悦见山</View></View>
82
+              <View className="base-item">物业类型:<View className="con">自住</View></View>
83
+              <View className="base-item">项目类型:<View className="con">高层</View></View>
84
+              <View className="base-item">价格区间:<View className="con">{desc || '暂无'}</View></View>
85
+              <View className="base-item">客户描述:<View className="con">{desc || '暂无'}</View></View>
86
+              <View className="btn">完善信息</View>
87
+            </View>
46 88
           </AtTabsPane>
47 89
           <AtTabsPane current={this.state.current} index={1}>
48
-            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页二的内容</View>
90
+            <View className="tab-pane2 pane">
91
+              <View className="date">2019年11月11日</View>
92
+              <View className="record-item"><View >查看项目详情:银城悦见山</View><View className="time">12:30:00</View> </View>
93
+              <View className="record-item"><View >查看项目详情:银城悦见山</View><View className="time">12:30:00</View> </View>
94
+              <View className="record-item"><View >查看项目详情:银城悦见山</View><View className="time">12:30:00</View> </View>
95
+              <View className="date">2019年11月11日</View>
96
+              <View className="record-item"><View >查看项目详情:银城悦见山</View><View className="time">12:30:00</View> </View>
97
+              <View className="record-item"><View >查看项目详情:银城悦见山</View><View className="time">12:30:00</View> </View>
98
+              <View className="record-item"><View >查看项目详情:银城悦见山</View><View className="time">12:30:00</View> </View>
99
+
100
+            </View>
49 101
           </AtTabsPane>
50 102
           <AtTabsPane current={this.state.current} index={2}>
51
-            <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>
103
+            <View className="tab-pane3 pane">
104
+              {list.length > 0 &&
105
+                list.map(item => (
106
+                  <ActivityItem
107
+                    data={item}
108
+                    key={item.id}
109
+                    onClick={this.handleItemClick}>
110
+                  </ActivityItem>
111
+                ))
112
+              }
113
+            </View>
114
+          </AtTabsPane>
115
+          <AtTabsPane current={this.state.current} index={3}>
116
+            <View  style="padding:10px 20px 120px 20px">
117
+              <View style=" display: flex;justify-content: space-between;align-items: center;color: #333;font-size: 16px;">
118
+                <View style=" display: flex;align-items: center;"><View style="width:8px;height:8px;margin-right:10px;display:inline-block;background:rgba(246,182,29,1);border-radius: 50%;"></View>编辑客户信息</View>
119
+                <View classNam="time" style=" font-size: 13px;color: #999;">2019年11月11日 12:24:59</View>
120
+              </View>
121
+              <View className="btn">添加跟进</View>
122
+            </View>
52 123
           </AtTabsPane>
53 124
         </AtTabs>
54
-
55 125
       </View>
56 126
     )
57 127
   }