静态页面

src/assets/css/iconfont.json

@@ -5,6 +5,27 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "18609904",
+      "name": "编 辑",
+      "font_class": "xiugai",
+      "unicode": "e745",
+      "unicode_decimal": 59205
+    },
+    {
+      "icon_id": "7934584",
+      "name": "女性",
+      "font_class": "nvxing",
+      "unicode": "e6cd",
+      "unicode_decimal": 59085
+    },
+    {
+      "icon_id": "21849876",
+      "name": "男性",
+      "font_class": "nanxing",
+      "unicode": "e713",
+      "unicode_decimal": 59155
+    },
     {
       "icon_id": "16036802",
       "name": "电  话",

src/assets/css/iconfont.svg

@@ -20,6 +20,15 @@ Created by iconfont
   />
     <missing-glyph />
     
+    <glyph glyph-name="xiugai" unicode="&#59205;" d="M368.13359375 247.74492186999998c15.89238281-15.89150391 40.98515625-15.89150391 56.04082031 0L861.62890625 685.19853516c15.89238281 15.89238281 15.89238281 40.98515625 0 56.87753906s-40.98515625 15.89238281-56.04082031 0L368.13359375 304.62246094c-15.89238281-15.89238281-15.89238281-40.98515625 0-56.87753907zM852.42675781 444.30703125c-21.74677734 0-40.1484375-17.56582031-40.1484375-40.1484375v-320.35341797h-600.55664062v600.55664063h320.35253906c21.74765625 0 39.31259766 17.56582031 40.1484375 40.1493164 0 21.74765625-17.56494141 40.1484375-39.31171875 40.1484375H171.57236328c-21.74677734 0-40.1484375-17.56494141-40.1484375-40.1484375v-680.85527343c0-10.87294922 4.18183594-20.9109375 11.70966797-28.43876954 7.52783203-7.52783203 17.56494141-11.70966797 28.43876953-11.70966796h680.85527344c10.87382813 0 20.9109375 4.18183594 28.43876953 11.70966796 7.52783203 7.52783203 11.70966797 17.56582031 11.70966797 28.43876954V404.15771484c0 22.58349609-18.40166016 40.1484375-40.1484375 40.1484375z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="nvxing" unicode="&#59085;" d="M614.18956259 266.02997974000004v11.30058352h152.88075247v300.27264835a256.84612042 256.84612042 0 0 1-510.46350375 0v-300.27264835h152.96147067v-11.21986533L111.63646805 70.28772838999998v-108.2434466h801.04993753V69.07695127z m8.07184561-188.71974564c-72.64660886-70.54792905-110.66500086 36.80761487-110.66500085 36.80761487s-37.69551837-107.35554392-110.74571823-36.80761487c0 0-32.28738162 20.74464267-35.51612036 159.82253916L511.51568914 114.11784896999995l146.1811204 123.01492429c-3.63233057-138.99717746-35.75827497-159.82253916-35.75827497-159.82253916z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="nanxing" unicode="&#59155;" d="M578.83748281 808.30321687c12.78209812-3.9071325 29.1222375-19.03888125 49.02041907-45.39524532 23.56363594-4.40391563 40.88391563-14.78937094 51.97426593-31.14964968 28.96783219-48.49006969 30.54545437-119.50321687 4.72615407-213.09986063 2.64503531 0.91972031 5.22293719 1.07412562 7.61958 0.34237781 12.4128675-3.79972031 15.44055938-29.86741219 6.76699312-58.21762218-7.49202844-24.51692343-21.28111875-42.71664375-32.89510499-44.76419625-6.10909125-26.40335625-16.25958-50.32279689-30.65286656-70.48951032a183.89034937 183.89034937 0 0 0-38.61482532-39.91048968c0.20811188-24.94657313 4.63888125-47.8724475 13.0573425-65.74992938-29.10209813-25.42993031-62.43356625-39.87020999-97.83944063-39.87021-35.41258781 0-68.73062906 14.44027969-97.83944063 39.87021 8.94881156 18.99860156 13.39300687 43.71020999 13.04391657 70.48951031-12.62769188 10.84195781-23.82545437 23.54349657-33.23748282 37.09090875-13.62797156 19.60951031-23.295105 42.63608438-29.20951031 67.93846125l-0.6981825-0.30881062-0.8324475-0.28867124c-12.40615406-3.80643375-29.49818156 16.125315-38.17174781 44.5023778-8.67356625 28.34349655-5.63916094 54.41118844 6.76699312 58.21090876 3.14853187 0.97342687 6.5924475 0.40279687 10.13034938-1.43664376-33.86853188 93.38181844-1.64475562 202.76139844-0.98013938 202.76139938 0.81902063 4.95440531 24.80559469 43.5826575 37.32587344 54.14937 56.52587438 47.6777625 135.83664375 55.09594406 200.53930125 35.325315zM245.93902063 171.48083905c48.59748281 33.33818156 111.43384594 54.12923062 166.17398624 65.81034938l52.65902157-204.83580375c1.40979001-5.504895 6.37762219-9.35832187 12.07048875-9.35832189l10.4324475 74.18853189a38.89006969 38.89006969 0 1 0 49.45007062 0l10.43916094-74.18853187c5.68615406 0 10.65398625 3.84671344 12.07048875 9.35832187l52.65902156 204.83580375c54.73342687-11.68111875 117.57650345-32.47216781 166.16727281-65.81034938 100.14881156-68.71048969 97.04727281-157.634685 96.08727282-185.11216781-0.07384594-2.114685-0.13426594-3.87356625-0.13426594-5.22293719v-10.43916093H149.98601375v10.43916093c0 1.34937094-0.0671325 3.10825219-0.13426594 5.22293719-0.96 27.47748281-4.06153875 116.40167812 96.08727282 185.11216781z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="dianhua" unicode="&#58893;" d="M598.308571 219.538286l24.064 14.994285c9.398857 5.632 17.115429 9.947429 24.868572 13.385143 54.637714 24.868571 102.765714 7.314286 166.4-67.035428 39.424-46.08 51.053714-86.930286 35.84-123.355429-11.337143-27.172571-33.133714-45.933714-71.972572-69.12-2.523429-1.462857-24.868571-14.518857-30.610285-18.066286-90.404571-55.771429-297.691429 71.936-446.646857 290.157715-149.577143 218.806857-188.196571 452.059429-96.585143 508.708571l12.068571 7.68 13.165714 8.484572c46.299429 29.952 75.958857 41.910857 111.104 35.986285 35.108571-5.997714 64.950857-31.963429 90.221715-79.286857 53.284571-100.096 41.545143-147.565714-26.953143-190.756571-4.973714-3.181714-22.454857-13.714286-24.137143-14.738286-16.749714-10.386286 11.702857-80.018286 77.860571-176.859429 66.889143-97.901714 122.88-151.478857 141.165715-140.178285h0.146285z"  horiz-adv-x="1024" />
 
     

src/pages/mine/components/StatCustomerListItem/index.jsx

@@ -7,10 +7,10 @@ export default function StatCustomerListItem (props) {
   const { data = {}, showStatus = false } = props
   return (
     <view className='components StatCustomerListItem flex-h'>
-      <view className='Icon'>
+      <view className='Icon' onClick={() => { Taro.navigateTo({url: `/pages/mine/customerDetail/index?id=${data.id}`}) }}>
         <Image mode='scaleToFill' src={null}></Image>
       </view>
-      <view className='flex-item'>
+      <view className='flex-item' onClick={() => { Taro.navigateTo({url: `/pages/mine/customerDetail/index?id=${data.id}`}) }}>
         <view>
           <text>范丞丞</text>
           <text className='iconfont icon-yonghu'></text>
@@ -21,7 +21,7 @@ export default function StatCustomerListItem (props) {
       <text className='iconfont icon-dianhua active'></text>
       {
         showStatus &&
-        <text className='Status'>报备</text>
+        <text className='Status' onClick={() => { Taro.navigateTo({url: `/pages/mine/customerDetail/index?id=${data.id}`}) }}>报备</text>
       }
     </view>
   )

src/pages/mine/components/UserDetailActivityInfo/index.jsx

@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import Taro from '@tarojs/taro'
+import { ScrollView, Image } from '@tarojs/components'
+
+export default function UserDetailActivityInfo (props) {
+  const { Data = {} } = props
+  const [PageList, setPageList] = useState([
+    { content: '参加了5D沉浸式 剧场', time: '2019年7月12日 12:30:00' },
+    { content: '参加了5D沉浸式 剧场', time: '2019年7月12日 12:30:00' },
+    { content: '参加了5D沉浸式 剧场', time: '2019年7月12日 12:30:00' },
+    { content: '参加了5D沉浸式 剧场', time: '2019年7月12日 12:30:00' },
+    { content: '参加了5D沉浸式 剧场', time: '2019年7月12日 12:30:00' },
+    { content: '参加了5D沉浸式 剧场', time: '2019年7月12日 12:30:00' }
+  ])
+  const [IsPull, setPull] = useState(false)
+  const [PullTimer, setPullTimer] = useState(null)
+
+  const PageRefresh = () => { // 页面下拉刷新回调
+    setPull(true)
+  }
+
+  useEffect(() => { // 下拉刷新触发
+    if (IsPull) {
+      clearTimeout(PullTimer)
+      setPullTimer(setTimeout(() => {
+        setPull(false)
+      }, 2000))
+    }
+  }, [IsPull])
+
+  return (
+    <view className='components UserDetailActivityInfo'>
+      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
+        <view className='PageContent'>
+
+          <view className='Content'>
+            {
+              PageList.map((item, index) => (
+                <view className='flex-h' key={`Item-${index}`}>
+                  <view className='flex-item'>
+                    <text>{item.time}</text>
+                  </view>
+                  <view className='Line'>
+                    <view></view>
+                  </view>
+                  <view className='flex-item'>
+                    <text className='active'>{item.content}</text>
+                  </view>
+                </view>
+              ))
+            }
+          </view>
+
+          <view className='Btn'>
+            <text className='active'>添加跟进</text>
+          </view>
+
+        </view>
+      </ScrollView>
+    </view>
+  )
+}

src/pages/mine/components/UserDetailActivityInfo/index.scss

@@ -0,0 +1,114 @@
+.components.UserDetailActivityInfo {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  > scroll-view {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .PageContent {
+      position: relative;
+      overflow: hidden;
+      padding: 0 30px;
+      min-height: 100vh;
+      >.Content {
+        background: #fff;
+        position: relative;
+        overflow: hidden;
+        margin-top: 30px;
+        border-radius: 16px;
+        box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.03);
+        padding: 50px 30px;
+        >.flex-h {
+          position: relative;
+          overflow: hidden;
+          &:first-child {
+            >.Line {
+              >view {
+                &::before {
+                  content: '';
+                  display: block;
+                  width: 12px;
+                  height: 12px;
+                  position: absolute;
+                  left: 4px;
+                  top: 4px;
+                  background: #193C83;
+                  border-radius: 100%;
+                }
+              }
+            }
+          }
+          &:last-child {
+            >.Line {
+              &::before {
+                display: none;
+              }
+            }
+          }
+          >.flex-item {
+            text-align: center;
+            padding-bottom: 50px;
+            >text {
+              display: block;
+              text-align: center;
+              font-size: 30px;
+              line-height: 40px;
+              transform: translateY(-6px);
+              -webkit-transform: translateY(-6px);
+              &.active {
+                font-weight: bold;
+              }
+            }
+          }
+          >.Line {
+            position: relative;
+            overflow: hidden;
+            margin-right: 20px;
+            &::before {
+              content: '';
+              display: block;
+              position: absolute;
+              width: 2px;
+              background: #193C83;
+              top: 0;
+              z-index: 1;
+              left: 11px;
+              height: 100%;
+            }
+            >view {
+              width: 24px;
+              height: 24px;
+              box-sizing: border-box;
+              border: 2px solid #193C83;
+              position: relative;
+              z-index: 2;
+              border-radius: 100%;
+              background: #fff;
+            }
+          }
+        }
+      }
+      >.Btn {
+        padding: 0 30px 36px;
+        >text {
+          display: block;
+          margin-top: 36px;
+          font-size: 32px;
+          font-weight: bold;
+          line-height: 92px;
+          box-sizing: border-box;
+          border: 2px solid #193C83;
+          border-radius: 92px;
+          text-align: center;
+          color: #193C83;
+          &.active {
+            background: #193C83;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/mine/components/UserDetailBasicInfo/index.jsx

@@ -0,0 +1,170 @@
+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import Taro from '@tarojs/taro'
+import { ScrollView, Image } from '@tarojs/components'
+
+export default function UserDetailBasicInfo (props) {
+  const { Data = {} } = props
+  const [PageList, setPageList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', ''])
+  const [IsPull, setPull] = useState(false)
+  const [PullTimer, setPullTimer] = useState(null)
+
+  const PageRefresh = () => { // 页面下拉刷新回调
+    setPull(true)
+  }
+
+  useEffect(() => { // 下拉刷新触发
+    if (IsPull) {
+      clearTimeout(PullTimer)
+      setPullTimer(setTimeout(() => {
+        setPull(false)
+      }, 2000))
+    }
+  }, [IsPull])
+
+  return (
+    <view className='components UserDetailBasicInfo'>
+      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
+        <view className='PageContent'>
+
+          <view className='Content'>
+            <view className='flex-h'>
+              <text>姓名</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>范丞丞</text>
+              </view>
+              <text className='iconfont icon-xiugai active'></text>
+              <text className='active'>修改</text>
+            </view>
+            <view className='flex-h'>
+              <text>昵称</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>Tomorrow</text>
+              </view>
+            </view>
+            <view className='flex-h'>
+              <text>手机号码</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>13613949434</text>
+              </view>
+            </view>
+            <view className='flex-h'>
+              <text>性别</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>男</text>
+              </view>
+            </view>
+            <view className='flex-h'>
+              <text>家庭住址</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>江苏省南京市雨花台区铁心桥街道韩府坊小区</text>
+              </view>
+            </view>
+            <view className='flex-h'>
+              <text>工作地址</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>江苏省南京市雨花台区</text>
+              </view>
+            </view>
+            <view className='flex-h'>
+              <text>年龄段</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>18-25</text>
+              </view>
+            </view>
+            <view className='flex-h'>
+              <text>职业</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>演员</text>
+              </view>
+            </view>
+            <view className='flex-h'>
+              <text>家庭年收入</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>10万以下</text>
+              </view>
+            </view>
+            <view className='flex-h'>
+              <text>家庭成员数</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>5人</text>
+              </view>
+            </view>
+            <view className='flex-h'>
+              <text>已有房产数</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>2</text>
+              </view>
+            </view>
+            <view className='flex-h'>
+              <text>已有车辆数</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>2</text>
+              </view>
+            </view>
+            <view className='flex-h'>
+              <text>预计购房时间</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>1月以内</text>
+              </view>
+            </view>
+            <view className='flex-h'>
+              <text>咨询重点</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>江苏省南京市雨花台区</text>
+              </view>
+            </view>
+            <view className='flex-h'>
+              <text>购房动机</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>结婚</text>
+              </view>
+            </view>
+            <view className='flex-h'>
+              <text>抗性分析</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>交通</text>
+              </view>
+            </view>
+            <view className='flex-h'>
+              <text>项目认可点</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>户型</text>
+              </view>
+            </view>
+            <view className='flex-h'>
+              <text>备注</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>暂无</text>
+              </view>
+            </view>
+          </view>
+
+          <view className='Btn'>
+            <text className='active'>添加跟进</text>
+            <text>变更状态</text>
+          </view>
+
+        </view>
+      </ScrollView>
+    </view>
+  )
+}

src/pages/mine/components/UserDetailBasicInfo/index.scss

@@ -0,0 +1,83 @@
+.components.UserDetailBasicInfo {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  > scroll-view {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .PageContent {
+      position: relative;
+      overflow: hidden;
+      padding: 0 30px;
+      min-height: 100vh;
+      >.Content {
+        background: #fff;
+        position: relative;
+        overflow: hidden;
+        margin-top: 30px;
+        border-radius: 16px;
+        box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.03);
+        padding: 30px;
+        >.flex-h {
+          align-items: flex-start;
+          margin-top: 30px;
+          &:first-child {
+            margin-top: 0;
+          }
+          >text {
+            font-size: 30px;
+            line-height: 40px;
+            color: #333;
+            &:first-child {
+              min-width: 200px;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              text-align: justify;
+              text-align-last: justify;
+            }
+            &.active {
+              color: #193C83;
+              font-weight: bold;
+              font-size: 32px;
+              &.iconfont {
+                font-weight: normal;
+                margin-right: 6px;
+                font-size: 36px;
+              }
+            }
+          }
+          >.flex-item {
+            >text {
+              font-size: 30px;
+              line-height: 40px;
+              font-weight: bold;
+              color: #333;
+              display: block;
+            }
+          }
+        }
+      }
+      >.Btn {
+        padding: 0 30px 36px;
+        >text {
+          display: block;
+          margin-top: 36px;
+          font-size: 32px;
+          font-weight: bold;
+          line-height: 92px;
+          box-sizing: border-box;
+          border: 2px solid #193C83;
+          border-radius: 92px;
+          text-align: center;
+          color: #193C83;
+          &.active {
+            background: #193C83;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/mine/components/UserDetailFollowRecord/index.jsx

@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import Taro from '@tarojs/taro'
+import { ScrollView, Image } from '@tarojs/components'
+
+export default function UserDetailFollowRecord (props) {
+  const { Data = {} } = props
+  const [PageList, setPageList] = useState([
+    { content: '参加了5D沉浸式 剧场', time: '2019年7月12日 12:30:00' },
+    { content: '参加了5D沉浸式 剧场', time: '2019年7月12日 12:30:00' },
+    { content: '参加了5D沉浸式 剧场', time: '2019年7月12日 12:30:00' },
+    { content: '参加了5D沉浸式 剧场', time: '2019年7月12日 12:30:00' },
+    { content: '参加了5D沉浸式 剧场', time: '2019年7月12日 12:30:00' },
+    { content: '参加了5D沉浸式 剧场', time: '2019年7月12日 12:30:00' }
+  ])
+  const [IsPull, setPull] = useState(false)
+  const [PullTimer, setPullTimer] = useState(null)
+
+  const PageRefresh = () => { // 页面下拉刷新回调
+    setPull(true)
+  }
+
+  useEffect(() => { // 下拉刷新触发
+    if (IsPull) {
+      clearTimeout(PullTimer)
+      setPullTimer(setTimeout(() => {
+        setPull(false)
+      }, 2000))
+    }
+  }, [IsPull])
+
+  return (
+    <view className='components UserDetailFollowRecord'>
+      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
+        <view className='PageContent'>
+
+          <view className='Content'>
+            {
+              PageList.map((item, index) => (
+                <view className='flex-h' key={`Item-${index}`}>
+                  <view className='flex-item'>
+                    <text>{item.time}</text>
+                  </view>
+                  <view className='Line'>
+                    <view></view>
+                  </view>
+                  <view className='flex-item'>
+                    <text className='active'>{item.content}</text>
+                  </view>
+                </view>
+              ))
+            }
+          </view>
+
+          <view className='Btn'>
+            <text className='active'>添加跟进</text>
+          </view>
+
+        </view>
+      </ScrollView>
+    </view>
+  )
+}

src/pages/mine/components/UserDetailFollowRecord/index.scss

@@ -0,0 +1,114 @@
+.components.UserDetailFollowRecord {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  > scroll-view {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .PageContent {
+      position: relative;
+      overflow: hidden;
+      padding: 0 30px;
+      min-height: 100vh;
+      >.Content {
+        background: #fff;
+        position: relative;
+        overflow: hidden;
+        margin-top: 30px;
+        border-radius: 16px;
+        box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.03);
+        padding: 50px 30px;
+        >.flex-h {
+          position: relative;
+          overflow: hidden;
+          &:first-child {
+            >.Line {
+              >view {
+                &::before {
+                  content: '';
+                  display: block;
+                  width: 12px;
+                  height: 12px;
+                  position: absolute;
+                  left: 4px;
+                  top: 4px;
+                  background: #193C83;
+                  border-radius: 100%;
+                }
+              }
+            }
+          }
+          &:last-child {
+            >.Line {
+              &::before {
+                display: none;
+              }
+            }
+          }
+          >.flex-item {
+            text-align: center;
+            padding-bottom: 50px;
+            >text {
+              display: block;
+              text-align: center;
+              font-size: 30px;
+              line-height: 40px;
+              transform: translateY(-6px);
+              -webkit-transform: translateY(-6px);
+              &.active {
+                font-weight: bold;
+              }
+            }
+          }
+          >.Line {
+            position: relative;
+            overflow: hidden;
+            margin-right: 20px;
+            &::before {
+              content: '';
+              display: block;
+              position: absolute;
+              width: 2px;
+              background: #193C83;
+              top: 0;
+              z-index: 1;
+              left: 11px;
+              height: 100%;
+            }
+            >view {
+              width: 24px;
+              height: 24px;
+              box-sizing: border-box;
+              border: 2px solid #193C83;
+              position: relative;
+              z-index: 2;
+              border-radius: 100%;
+              background: #fff;
+            }
+          }
+        }
+      }
+      >.Btn {
+        padding: 0 30px 36px;
+        >text {
+          display: block;
+          margin-top: 36px;
+          font-size: 32px;
+          font-weight: bold;
+          line-height: 92px;
+          box-sizing: border-box;
+          border: 2px solid #193C83;
+          border-radius: 92px;
+          text-align: center;
+          color: #193C83;
+          &.active {
+            background: #193C83;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/mine/components/UserDetailViewRecord/index.jsx

@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from 'react'
+import './index.scss'
+import Taro from '@tarojs/taro'
+import { ScrollView, Image } from '@tarojs/components'
+
+export default function UserDetailViewRecord (props) {
+  const { Data = {} } = props
+  const [PageList, setPageList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', ''])
+  const [IsPull, setPull] = useState(false)
+  const [PullTimer, setPullTimer] = useState(null)
+
+  const PageRefresh = () => { // 页面下拉刷新回调
+    setPull(true)
+  }
+
+  useEffect(() => { // 下拉刷新触发
+    if (IsPull) {
+      clearTimeout(PullTimer)
+      setPullTimer(setTimeout(() => {
+        setPull(false)
+      }, 2000))
+    }
+  }, [IsPull])
+
+  return (
+    <view className='components UserDetailViewRecord'>
+      <ScrollView scroll-y={true} refresher-enabled={true} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
+        <view className='PageContent'>
+
+          <view className='Content'>
+            <view className='flex-h'>
+              <text>查看项目详情</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>银城悦见山</text>
+              </view>
+              <text>2021/05/21 13:00</text>
+            </view>
+            <view className='flex-h'>
+              <text>查看户型图</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>银城悦见山</text>
+              </view>
+              <text>2021/05/21 13:00</text>
+            </view>
+            <view className='flex-h'>
+              <text>报名活动</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>银城悦见山</text>
+              </view>
+              <text>2021/05/21 13:00</text>
+            </view>
+            <view className='flex-h'>
+              <text>在线沟通</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>银城悦见山</text>
+              </view>
+              <text>2021/05/21 13:00</text>
+            </view>
+            <view className='flex-h'>
+              <text>在线咨询</text>
+              <text>：</text>
+              <view className='flex-item'>
+                <text>银城悦见山</text>
+              </view>
+              <text>2021/05/21 13:00</text>
+            </view>
+          </view>
+
+          <view className='Btn'>
+            <text className='active'>添加跟进</text>
+          </view>
+
+        </view>
+      </ScrollView>
+    </view>
+  )
+}

src/pages/mine/components/UserDetailViewRecord/index.scss

@@ -0,0 +1,84 @@
+.components.UserDetailViewRecord {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  > scroll-view {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .PageContent {
+      position: relative;
+      overflow: hidden;
+      padding: 0 30px;
+      min-height: 100vh;
+      >.Content {
+        background: #fff;
+        position: relative;
+        overflow: hidden;
+        margin-top: 30px;
+        border-radius: 16px;
+        box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.03);
+        padding: 30px;
+        >.flex-h {
+          align-items: flex-start;
+          margin-top: 30px;
+          &:first-child {
+            margin-top: 0;
+          }
+          >text {
+            font-size: 24px;
+            line-height: 40px;
+            color: #333;
+            &:first-child {
+              font-size: 30px;
+              min-width: 200px;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              text-align: justify;
+              text-align-last: justify;
+            }
+            &.active {
+              color: #193C83;
+              font-weight: bold;
+              font-size: 32px;
+              &.iconfont {
+                font-weight: normal;
+                margin-right: 6px;
+                font-size: 36px;
+              }
+            }
+          }
+          >.flex-item {
+            >text {
+              font-size: 30px;
+              line-height: 40px;
+              font-weight: bold;
+              color: #333;
+              display: block;
+            }
+          }
+        }
+      }
+      >.Btn {
+        padding: 0 30px 36px;
+        >text {
+          display: block;
+          margin-top: 36px;
+          font-size: 32px;
+          font-weight: bold;
+          line-height: 92px;
+          box-sizing: border-box;
+          border: 2px solid #193C83;
+          border-radius: 92px;
+          text-align: center;
+          color: #193C83;
+          &.active {
+            background: #193C83;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+}

src/pages/mine/customerAnalyse/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '客户分析'
+}

src/pages/mine/customerAnalyse/index.jsx

@@ -0,0 +1,96 @@
+import React, { useState, useEffect } from 'react'
+import withLayout from '@/layout'
+import './index.scss'
+import '../../../assets/css/iconfont.css'
+import { ScrollView } from '@tarojs/components'
+
+export default withLayout((props) => {
+
+  // const [PageProps] = useState(props)
+  const [MenuList] = useState([
+    { name: '新增客户', id: 1 },
+    { name: '跟进客户', id: 2 },
+    { name: '到访客户', id: 3 }
+  ])
+  const [CurrentMenuId, setCurrentMenuId] = useState(1)
+
+  const [ChartMenuList] = useState([
+    { name: '日', id: 1 },
+    { name: '月', id: 2 }
+  ])
+  const [CurrentChartMenuId, setCurrentChartMenuId] = useState(1)
+
+  const [SexList, setSexList] = useState([
+    { name: '男', per: 0.6 },
+    { name: '女', per: 0.3 },
+    { name: '未知', per: 0.1 }
+  ])
+
+  const CutMenu = (item) => {
+    return () => {
+      setCurrentMenuId(item.id)
+    }
+  }
+
+  const CutChartMenu = (item) => {
+    return () => {
+      setCurrentChartMenuId(item.id)
+    }
+  }
+
+  return (
+    <view className='Page customerAnalyse flex-v'>
+
+      <view className='MenuList'>
+        <view>
+          {
+            MenuList.map((item, index) => (
+              <text key={`MenuItem-${index}`} className={CurrentMenuId === item.id ? 'active' : ''} onClick={CutMenu(item)}>{item.name}</text>
+            ))
+          }
+        </view>
+      </view>
+
+      <view className='flex-item'>
+        <view>
+          <ScrollView scroll-y={true} refresher-enabled={false}>
+            <view className='PageContent'>
+
+              {/* 图表 */}
+              <view className='Chart'>
+                <view className='Menu'>
+                  {
+                    ChartMenuList.map((item, index) => (
+                      <text key={`ChartMenuItem-${index}`} className={CurrentChartMenuId === item.id ? 'active' : ''} onClick={CutChartMenu(item)}>{item.name}</text>
+                    ))
+                  }
+                </view>
+                <view className='LineChart'>
+
+                </view>
+              </view>
+
+              {/* 性别 */}
+              <view className='Sex'>
+                <text>性别</text>
+                {
+                  SexList.map((item, index) => (
+                    <view className='flex-h' key={`SexItem-${index}`}>
+                      <text>{item.name}</text>
+                      <view className='flex-item'>
+                        <view style={{width: `${Math.floor(item.per * 100)}%`}}></view>
+                      </view>
+                      <text>{Math.floor(item.per * 100)}%</text>
+                    </view>
+                  ))
+                }
+              </view>
+
+            </view>
+          </ScrollView>
+        </view>
+      </view>
+
+    </view>
+  )
+})

src/pages/mine/customerAnalyse/index.scss

@@ -0,0 +1,160 @@
+.Page.customerAnalyse {
+  background: #f8f8f8;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100vh;
+  >.MenuList {
+    position: relative;
+    overflow: hidden;
+    z-index: 2;
+    padding: 0 50px;
+    box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.03);
+    background: #fff;
+    >view {
+      position: relative;
+      overflow: hidden;
+      text-align: center;
+      font-size: 0;
+      white-space: nowrap;
+      >text {
+        display: inline-block;
+        font-size: 32px;
+        color: #666;
+        line-height: 40px;
+        margin-left: 80px;
+        vertical-align: middle;
+        padding: 20px 0;
+        position: relative;
+        overflow: hidden;
+        &:first-child {
+          margin-left: 0;
+        }
+        &.active {
+          color: #333;
+          font-weight: 34px;
+          font-weight: bold;
+          &::after {
+            content: '';
+            width: 100%;
+            height: 4px;
+            background: #1A3B83;
+            display: block;
+            position: absolute;
+            left: 0;
+            bottom: 0;
+          }
+        }
+      }
+    }
+  }
+  > .flex-item {
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+    > view {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      >scroll-view {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        .PageContent {
+          min-height: 100vh;
+          position: relative;
+          >view {
+            position: relative;
+            overflow: hidden;
+            background: #fff;
+            margin-top: 20px;
+            padding: 40px;
+            &:first-child {
+              margin-top: 0;
+            }
+            &.Chart {
+              >.Menu {
+                font-size: 0;
+                white-space: nowrap;
+                text-align: right;
+                >text {
+                  display: inline-block;
+                  vertical-align: middle;
+                  font-size: 28px;
+                  line-height: 40px;
+                  color: #999;
+                  background: #f5f5f5;
+                  width: 76px;
+                  text-align: center;
+                  margin-left: 30px;
+                  &.active {
+                    color: #fff;
+                    background: #1A3B83;
+                  }
+                }
+              }
+              >.LineChart {
+                height: 450px;
+                position: relative;
+                overflow: hidden;
+              }
+            }
+            &.Sex {
+              >text {
+                display: block;
+                font-size: 36px;
+                line-height: 50px;
+                color: #666;
+              }
+              >.flex-h {
+                align-items: center;
+                margin-top: 40px;
+                &:nth-child(2) {
+                  >.flex-item {
+                    >view {
+                      background: #1296DB;
+                    }
+                  }
+                }
+                &:nth-child(3) {
+                  >.flex-item {
+                    >view {
+                      background: #FE7CD1;
+                    }
+                  }
+                }
+                >text {
+                  font-size: 32px;
+                  line-height: 44px;
+                  color: #666;
+                  &:first-child {
+                    min-width: 70px;
+                  }
+                }
+                >.flex-item {
+                  margin-left: 8px;
+                  margin-right: 20px;
+                  position: relative;
+                  overflow: hidden;
+                  height: 12px;
+                  background: #F5F5F5;
+                  border-radius: 12px;
+                  >view {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    height: 100%;
+                    background: #A2A2A2;
+                    border-radius: 12px;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/mine/customerDetail/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '客户信息'
+}

src/pages/mine/customerDetail/index.jsx

@@ -0,0 +1,98 @@
+import React, { useState, useEffect } from 'react'
+import withLayout from '@/layout'
+import './index.scss'
+import '../../../assets/css/iconfont.css'
+import { Image } from '@tarojs/components'
+import UserDetailBasicInfo from '../components/UserDetailBasicInfo/index'
+import UserDetailViewRecord from '../components/UserDetailViewRecord/index'
+import UserDetailActivityInfo from '../components/UserDetailActivityInfo/index'
+import UserDetailFollowRecord from '../components/UserDetailFollowRecord/index'
+
+export default withLayout((props) => {
+
+  // const [PageProps] = useState(props)
+  const [MenuList] = useState([
+    { name: '基本信息', id: 1 },
+    { name: '访问记录', id: 2 },
+    { name: '活动信息', id: 3 },
+    { name: '跟进记录', id: 4 }
+  ])
+  const [CurrentMenuId, setCurrentMenuId] = useState(1)
+
+  const CutMenu = (item) => {
+    return () => {
+      setCurrentMenuId(item.id)
+    }
+  }
+
+  return (
+    <view className='Page customerDetail flex-v'>
+
+      <view className='UserInfo'>
+        <view>
+          <view>
+            <view className='centerLabel'>
+              <view className='flex-h'>
+                <view className='Icon'>
+                  <Image mode='aspectFill' src={null}></Image>
+                </view>
+                <view className='flex-item'>
+                  <view>
+                    <text>徐慧慧</text>
+                    <text className='iconfont icon-nvxing'></text>
+                  </view>
+                  <text>136 1394 9434</text>
+                </view>
+                <text className='iconfont icon-liaotian'></text>
+                <text className='iconfont icon-dianhua'></text>
+              </view>
+            </view>
+            <text className='Status'>已到访</text>
+            <text className='Tips'>NEW</text>
+            <text className='Tips'>NEW</text>
+          </view>
+        </view>
+      </view>
+
+      <view className='MenuList'>
+        <view>
+          {
+            MenuList.map((item, index) => (
+              <text key={`MenuItem-${index}`} className={CurrentMenuId === item.id ? 'active' : ''} onClick={CutMenu(item)}>{item.name}</text>
+            ))
+          }
+        </view>
+      </view>
+
+      <view className='flex-item'>
+        <view>
+
+          {/* 基本信息 */}
+          {
+            CurrentMenuId === 1 &&
+            <UserDetailBasicInfo></UserDetailBasicInfo>
+          }
+
+          {/* 访问记录 */}
+          {
+            CurrentMenuId === 2 &&
+            <UserDetailViewRecord></UserDetailViewRecord>
+          }
+
+          {/* 活动信息 */}
+          {
+            CurrentMenuId === 3 &&
+            <UserDetailActivityInfo></UserDetailActivityInfo>
+          }
+
+          {/* 跟进记录 */}
+          {
+            CurrentMenuId === 4 &&
+            <UserDetailFollowRecord></UserDetailFollowRecord>
+          }
+        </view>
+      </view>
+
+    </view>
+  )
+})

src/pages/mine/customerDetail/index.scss

@@ -0,0 +1,173 @@
+.Page.customerDetail {
+  background: #fff;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100vh;
+  >.UserInfo {
+    padding: 0 30px;
+    position: relative;
+    overflow: hidden;
+    >view {
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      padding-bottom: 33.33%;
+      background: #193C83;
+      border-radius: 24px;
+      >view {
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        overflow: hidden;
+        >.centerLabel {
+          width: 100%;
+          z-index: 3;
+          >view {
+            position: relative;
+            overflow: hidden;
+            align-items: center;
+            >.Icon {
+              width: 116px;
+              height: 116px;
+              position: relative;
+              overflow: hidden;
+              border-radius: 100%;
+              background: #eee;
+              margin-left: 46px;
+              margin-right: 22px;
+              >image {
+                width: 100%;
+                height: 100%;
+              }
+            }
+            >.flex-item {
+              >view {
+                font-size: 0;
+                white-space: nowrap;
+                >text {
+                  display: inline-block;
+                  vertical-align: middle;
+                  font-size: 32px;
+                  line-height: 1;
+                  color: #fff;
+                  &.iconfont {
+                    margin-left: 30px;
+                  }
+                }
+              }
+              >text {
+                display: block;
+                font-size: 28px;
+                margin-top: 26px;
+                color: #fff;
+              }
+            }
+            >text {
+              font-size: 40px;
+              width: 80px;
+              line-height: 80px;
+              text-align: center;
+              border-radius: 100%;
+              color: #FA9730;
+              background: rgba(251, 171, 87, 0.12);
+              margin-right: 40px;
+              &:last-child {
+                color: #00BC4B;
+                background: rgba(129, 188, 75, 0.12);
+              }
+            }
+          }
+        }
+        >.Status {
+          display: block;
+          position: absolute;
+          z-index: 2;
+          width: 200px;
+          background: #FFF602;
+          color: #193C83;
+          font-size: 22px;
+          text-align: center;
+          right: -65px;
+          top: 20px;
+          line-height: 40px;
+          transform: rotateZ(45deg);
+          -webkit-transform: rotateZ(45deg);
+        }
+        >.Tips {
+          font-size: 100px;
+          color: rgba(255, 255, 255, 0.3);
+          display: inline-block;
+          z-index: 1;
+          position: absolute;
+          right: 0;
+          top: -60px;
+          &:last-child {
+            right: auto;
+            top: auto;
+            left: 0;
+            bottom: -60px;
+          }
+        }
+      }
+    }
+  }
+  >.MenuList {
+    position: relative;
+    overflow: hidden;
+    z-index: 2;
+    padding: 0 50px;
+    margin-top: 10px;
+    >view {
+      position: relative;
+      overflow: hidden;
+      text-align: center;
+      font-size: 0;
+      white-space: nowrap;
+      border-bottom: 2px solid rgba(0, 0, 0, 0.12);
+      >text {
+        display: inline-block;
+        font-size: 32px;
+        color: #666;
+        line-height: 40px;
+        margin-left: 40px;
+        vertical-align: middle;
+        padding: 20px 0;
+        position: relative;
+        overflow: hidden;
+        &:first-child {
+          margin-left: 0;
+        }
+        &.active {
+          color: #333;
+          font-weight: 34px;
+          font-weight: bold;
+          &::after {
+            content: '';
+            width: 100%;
+            height: 4px;
+            background: #1A3B83;
+            display: block;
+            position: absolute;
+            left: 0;
+            bottom: 0;
+          }
+        }
+      }
+    }
+  }
+  > .flex-item {
+    position: relative;
+    overflow: hidden;
+    z-index: 1;
+    > view {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+    }
+  }
+}

src/pages/mine/tabData.js

@@ -37,7 +37,7 @@ const MineMenuList = {
       { name: '添加客户', icon: require('../../assets/mine-icon7.png'), router: '/pages/mine/addCustomer/index' },
       { name: '我的主页', icon: require('../../assets/mine-icon15.png'), router: '' },
       { name: '我的推广码', icon: require('../../assets/mine-icon14.png'), router: '' },
-      { name: '客户分析', icon: require('../../assets/mine-icon5.png'), router: '' },
+      { name: '客户分析', icon: require('../../assets/mine-icon5.png'), router: '/pages/mine/customerAnalyse/index' },
       { name: '盘客工具', icon: require('../../assets/mine-icon6.png'), router: '/pages/mine/statCustomer/index' }
     ],
     [

src/routes.js

@@ -236,6 +236,18 @@ const routes = [
     pkg: 'main',
     type: 'mine',
   },
+  {
+    name: '客户信息',
+    page: 'pages/mine/customerDetail/index',
+    pkg: 'main',
+    type: 'mine',
+  },
+  {
+    name: '客户分析',
+    page: 'pages/mine/customerAnalyse/index',
+    pkg: 'main',
+    type: 'mine',
+  },
   {
     name: '意见反馈',
     page: 'pages/mine/feedBack/index',