feats

src/pages/Index.jsx → src/pages/Index/components/Normal.jsx

@@ -1,126 +1,106 @@
-import React, { Component, useState, useEffect } from 'react';
-import { Card, Typography, Alert, Row, Col, Button } from 'antd';
-import router from 'umi/router';
-import request from '../utils/request';
-import bgImg from '../assets/picture.png';
-import itemsImg from '../assets/items.png';
-import consultantImg from '../assets/consultantKPI.png';
-import projectImg from '../assets/project.png';
-import reportImg from '../assets/report.png';
-import customerImg from '../assets/customer.png';
-import statisticsImg from '../assets/statistics.png';
-import borderImg from '../assets/border.png';
-
-const index = (props) => {
-
-    const [data, setData] = useState([])
-
-
-    useEffect(() => {
-
-    }, [])
-    const list = [
-        {
-            title: '项目列表',
-            img: itemsImg,
-            path: '/building/list',
-            value: '1',
-        },
-        {
-            title: '客户列表',
-            img: customerImg,
-            path: '/customer/customerlist/list',
-            value: '2',
-        },
-        {
-            title: '数据报表',
-            img: reportImg,
-            path: '/statistical/monitor',
-            value: '3',
-        },
-
-        {
-            title: '项目统计',
-            img: projectImg,
-            path: '/statistical/building',
-            value: '4',
-        },
-        {
-            title: '活动统计',
-            img: statisticsImg,
-            path: '/statistical/activity',
-            value: '5',
-        },
-        {
-            title: '置业顾问KPI',
-            img: consultantImg,
-            path: '/statistical/consultant',
-            value: '6',
-        },
-
-    ]
-    const goNow = (path) => {
-        router.push({
-            pathname: path,
-        });
-    }
-
-
-
-    return (
-        <>
-            <div style={{
-                width: 'calc(100% + 48px)',
-                height: '0',
-                paddingBottom: 'calc(29.64% + 14.23px)',
-                position: 'relative',
-                top: '-24px',
-                left: '-24px',
-                backgroundImage: 'url(https://njcj.oss-cn-shanghai.aliyuncs.com/images/picture.png)',
-                backgroundRepeat: 'no-repeat',
-                backgroundSize: '100% 100%',
-            }} >
-            </div>
-            <div style={{
-                backgroundColor: '#fff',
-                margin: '-24px -24px 0.24rem -24px',
-                paddingBottom: '0.2rem',
-
-            }} >
-                <h2 style={{
-                    fontSize: '0.11rem',
-                    padding: '0.2rem 0 16px 24px'
-                }}>快捷入口</h2>
-                <Row style={{ textAlign: 'center' }}>
-                    {list.map(item => (
-                        <Col span={4} key={item.value} onClick={() => goNow(item.path)}>
-                            <div style={{
-                                width: '1.2rem',
-                                height: '0px',
-                                margin: '0 auto',
-                                paddingBottom: '0.66rem',
-                                position: 'relative',
-                                backgroundImage: 'url(https://njcj.oss-cn-shanghai.aliyuncs.com/images/border.png)',
-                                backgroundRepeat: 'no-repeat',
-                                backgroundSize: '100% 100%',
-                                paddingTop: '0.12rem'
-                            }}>
-                                <p style={{ color: '#FF7F49', fontSize: '0.11rem', letterSpacing: '0.026rem', fontWeight: '600', }}>{item.title}</p>
-                                <img style={{ position: 'absolute', left: '0.08rem', bottom: '0.1rem', width: '0.3rem' }} src={item.img} alt="" />
-                            </div>
-                        </Col>
-                    ))}
-
-
-
-                </Row>
-
-            </div>
-
-
-        </>
-    )
-
-}
-export default index
-
+import React from 'react';
+import { Row, Col } from 'antd';
+import router from 'umi/router';
+import itemsImg from '@/assets/items.png';
+import consultantImg from '@/assets/consultantKPI.png';
+import projectImg from '@/assets/project.png';
+import reportImg from '@/assets/report.png';
+import customerImg from '@/assets/customer.png';
+import statisticsImg from '@/assets/statistics.png';
+
+export default () => {
+    const list = [
+        {
+            title: '项目列表',
+            img: itemsImg,
+            path: '/building/list',
+            value: '1',
+        },
+        {
+            title: '客户列表',
+            img: customerImg,
+            path: '/customer/customerlist/list',
+            value: '2',
+        },
+        {
+            title: '数据报表',
+            img: reportImg,
+            path: '/statistical/monitor',
+            value: '3',
+        },
+
+        {
+            title: '项目统计',
+            img: projectImg,
+            path: '/statistical/building',
+            value: '4',
+        },
+        {
+            title: '活动统计',
+            img: statisticsImg,
+            path: '/statistical/activity',
+            value: '5',
+        },
+        {
+            title: '置业顾问KPI',
+            img: consultantImg,
+            path: '/statistical/consultant',
+            value: '6',
+        },
+
+    ]
+    const goNow = path => {
+        router.push({
+            pathname: path,
+        });
+    }
+
+    return (
+        <>
+            <div style={{
+                width: 'calc(100% + 48px)',
+                height: '0',
+                paddingBottom: 'calc(29.64% + 14.23px)',
+                position: 'relative',
+                top: '-24px',
+                left: '-24px',
+                backgroundImage: 'url(https://njcj.oss-cn-shanghai.aliyuncs.com/images/picture.png)',
+                backgroundRepeat: 'no-repeat',
+                backgroundSize: '100% 100%',
+            }} >
+            </div>
+            <div style={{
+                backgroundColor: '#fff',
+                margin: '-24px -24px 0.24rem -24px',
+                paddingBottom: '0.2rem',
+
+            }} >
+                <h2 style={{
+                    fontSize: '0.11rem',
+                    padding: '0.2rem 0 16px 24px',
+                }}>快捷入口</h2>
+                <Row style={{ textAlign: 'center' }}>
+                    {list.map(item => (
+                        <Col span={4} key={item.value} onClick={() => goNow(item.path)}>
+                            <div style={{
+                                width: '1.2rem',
+                                height: '0px',
+                                margin: '0 auto',
+                                paddingBottom: '0.66rem',
+                                position: 'relative',
+                                backgroundImage: 'url(https://njcj.oss-cn-shanghai.aliyuncs.com/images/border.png)',
+                                backgroundRepeat: 'no-repeat',
+                                backgroundSize: '100% 100%',
+                                paddingTop: '0.12rem',
+                            }}>
+                                <p style={{ color: '#FF7F49', fontSize: '0.11rem', letterSpacing: '0.026rem', fontWeight: '600' }}>{item.title}</p>
+                                <img style={{ position: 'absolute', left: '0.08rem', bottom: '0.1rem', width: '0.3rem' }} src={item.img} alt="" />
+                            </div>
+                        </Col>
+                    ))}
+
+                </Row>
+            </div>
+        </>
+    )
+}

src/pages/Index/components/StickyBtn.jsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import router from 'umi/router';
+import { Modal, Space } from 'antd';
+import book from '@/assets/trial/operation manual.png';
+import contact from '@/assets/trial/contact us.png';
+import Styles from './style.less';
+
+const Btn = props => (
+  <div className={Styles['sticky-btn']} onClick={props.onClick}>
+    <div><img src={props.icon} alt=""/> </div>
+    {props.children}
+  </div>
+)
+
+export default props => {
+  const [visible, setVisible] = useState(false);
+  
+  const goto = path => {
+    if (path.indexOf('http') === 0) {
+      window.location.href = path
+    } else {
+      router.push(path)
+    }
+  }
+
+  return (
+    <div className={Styles['sticky-box']}>
+      <Btn icon={book} onClick={() => goto('https://easydoc.xyz/s/24703398/3SqDkJDw/4q8zspHR')}>操作手册</Btn>
+      <Btn icon={contact} onClick={() => setVisible(true)}>联系我们</Btn>
+      <Modal
+        title="联系我们"
+        width="600"
+        visible={visible}
+        onCancel={() => setVisible(false)}
+      >
+      </Modal>
+    </div>
+  )
+}

src/pages/Index/components/TimeTicker.jsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+import Link from 'umi/link';
+import { Button } from 'antd';
+import countDown from '@/assets/trial/count down.png';
+import Styles from './style.less';
+
+const BlockText = props => (
+  <span className={Styles['block-text']}>
+    {props.text}
+  </span>
+)
+
+export default props => {
+  const expDate = new Date('2020-06-23');
+  const [times, setTimes] = useState([0, 0, 0, 0]);
+
+  useEffect(() => {
+    const ticker = setInterval(() => {
+      const now = new Date();
+      let diff = expDate.getTime() - now.getTime()
+
+      if (diff <= 0) {
+        setTimes([0, 0, 0, 0]);
+        clearInterval(ticker);
+      }
+
+      const days = Math.floor(diff / (24 * 60 * 60 * 1000));
+      diff %= (24 * 60 * 60 * 1000);
+      const hours = Math.floor(diff / (60 * 60 * 1000));
+      diff %= (60 * 60 * 1000);
+      const minutes = Math.floor(diff / (60 * 1000));
+      diff %= (60 * 1000);
+      const seconds = Math.round(diff / 1000);
+
+      setTimes([days, hours, minutes, seconds]);
+    }, 1000);
+
+    return () => clearInterval(ticker);
+  }, [])
+
+  return (
+    <div className={Styles['time-ticker']}>
+      <div className={Styles['time-ticker-header']}> <img src={countDown} alt=""/> </div>
+      <div className={Styles['time-ticker-body']}>
+        <div>
+          剩余
+          <BlockText text={times[0]}/>天
+          <BlockText text={times[1]}/>时
+          <BlockText text={times[2]}/>分
+          <BlockText text={times[3]}/>秒
+        </div>
+        <div className={Styles['time-ticker-body-desc']}>
+          请再结束前 <Link to="/system/miniappSetMeal/index"><span style={{ color: '#1D74D9' }}>购买套餐</span></Link> , 到期后无法登录
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/Index/components/Trial.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import TrialBanner from './TrialBanner';
+import TrialProcess from './TrialProcess';
+import StickyBtn from './StickyBtn';
+import TimeTicker from './TimeTicker';
+import Styles from './style.less';
+
+export default function() {
+  const bannerItem = [
+    {
+      src: 'https://njcj.oss-cn-shanghai.aliyuncs.com/images/admin-trial/banner.png',
+    },
+  ]
+
+  return (
+    <div className={Styles['trial-page']}>
+      <TrialBanner list={bannerItem} />
+
+      <div style={{ padding: '36px 200px' }}>
+        <TrialProcess />
+      </div>
+
+      <StickyBtn />
+
+      <TimeTicker />
+    </div>
+  );
+}

src/pages/Index/components/TrialBanner.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Carousel } from 'antd';
+import classNames from 'classnames';
+import Styles from './style.less';
+
+export default function(props) {
+  const cls = classNames(Styles['scroll-banner-item']);
+  const list = props.list || []
+  const handleClick = item => {
+    if (props.onClick) {
+      props.onClick(item);
+    }
+  }
+
+  return (
+    <Carousel autoplay>
+      {
+        list.map((item, inx) => {
+          const key = `scroll-banner-${inx}`;
+
+          return (
+            <div key={key} className={cls} onClick={() => handleClick(item)}>
+              {
+                props.renderItem ? props.renderItem(item) : <img src={item.src} alt=""/>
+              }
+            </div>
+          );
+        })
+      }
+    </Carousel>
+  )
+}

src/pages/Index/components/TrialProcess.jsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { Steps, Button } from 'antd';
+import Link from 'umi/Link';
+import qrImage from '@/assets/xiaochengxu.png';
+import Styles from './style.less';
+
+const btnColor = { color: '#1D74D9' };
+
+const TrailMiniApp = () => (
+  <div className={Styles['step-box']}>
+    <p><img src={qrImage} alt="" /></p>
+    <p><strong>使用微信扫码，体验橙蕉小程序</strong></p>
+    <p><span className={Styles.tip}>已扫码或不想扫码？可跳转下一步</span></p>
+  </div>
+)
+
+const AuthMiniApp = () => (
+  <div className={Styles['step-box']}>
+    <p><Link to=""><strong>授权小程序</strong></Link></p>
+    <p><span className={Styles.tip}>之前体验的小程序是橙蕉公司自己的小程序 <br /> 想拥有贵公司自己的橙蕉小程序？点击进入！</span></p>
+    <p><span className={Styles.tip}>已扫码或不想扫码？可跳转下一步</span></p>
+  </div>
+)
+
+const AboutPackage = () => (
+  <div className={Styles['step-box']}>
+    <p><Button>了解套餐</Button></p>
+  </div>
+)
+
+export default function(props) {
+  const [current, setCurrent] = useState(0);
+
+  return (
+    <div className={Styles['trail-process']}>
+      <Steps labelPlacement="vertical" current={current} onChange={x => setCurrent(x)}>
+        <Steps.Step title="体验小程序"></Steps.Step>
+        <Steps.Step title="授权小程序"></Steps.Step>
+        <Steps.Step title="了解套餐"></Steps.Step>
+      </Steps>
+      <div style={{ marginTop: '30px' }}>
+        { current === 0 && <TrailMiniApp /> }
+        { current === 1 && <AuthMiniApp /> }
+        { current === 2 && <AboutPackage /> }
+
+        <div style={{ textAlign: 'center' }}>
+          {
+            current > 0 && <Button type="link" onClick={() => setCurrent(current - 1)} style={btnColor}>上一步</Button>
+          }
+          {
+            current < 2 && <Button type="link" onClick={() => setCurrent(current + 1)} style={btnColor}>下一步</Button>
+          }
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/Index/components/style.less

@@ -0,0 +1,143 @@
+.trial-page {
+  background-color: #fff;
+  position: relative;
+
+  width: calc(100% + 48px);
+  top: -24px;
+  left: -24px;
+}
+
+.scroll-banner {
+  &-item {
+    width: 100%;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.trail-process {
+  :global {
+    .ant-steps-item-active, .ant-steps-item-finish {
+      .ant-steps-item-tail::after {
+        background-color: #FF7E48 !important;
+      }
+
+      .ant-steps-item-icon {
+        border-color: #FF7E48;
+        background: #FF7E48;
+
+        .ant-steps-icon {
+          color: #FFF !important;
+        }
+      }
+
+      .ant-steps-item-title {
+        color: #FF7E48 !important;
+      }
+    }
+  }
+
+  .step-box {
+    text-align: center;
+    
+    img {
+      width: 120px;
+      height: 120px;
+      background:rgba(255,255,255,1);
+      border:1px solid rgba(151,151,151,1);
+    }
+
+    p {
+      color: #666;
+      font-size: 20px;
+      line-height: 1.8em;
+    }
+
+    .tip {
+      color: #999;
+    }
+  }
+}
+
+.sticky-box {
+  position: fixed;
+  bottom: 300px;
+  right: 0;
+  background-color: #fff;
+  box-shadow:0px 4px 7px 2px rgba(0,0,0,0.12);
+  border-radius:4px 4px 0px 0px;
+}
+
+.sticky-btn {
+  font-size: 14px;
+  color: #FF7E48;
+  line-height: 1.4em;
+  padding: 12px;
+  text-align: center;
+  cursor: pointer;
+
+  img {
+    width: 48px;
+    height: 48px;
+  }
+
+  & + .sticky-btn {
+    border-top: 1px solid rgba(0,0,0,0.06);
+  }
+}
+
+.time-ticker {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  background:rgba(255,255,255,1);
+  box-shadow:0px 4px 7px 2px rgba(0,0,0,0.12);
+  border-radius:4px 0px 0px 4p;
+  padding: 14px 20px;
+
+  display: flex;
+  align-items: center;
+
+  &-header {
+    flex: none;
+    width: 48px;
+    height: 48px;
+
+    overflow: hidden;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &-body {
+    flex: auto;
+    margin-left: 12px;
+
+    font-size: 16px;
+    line-height: 2em;
+    color: #666;
+
+    &-desc {
+      font-size: 12px;
+      line-height: 1.4em;
+    }
+  }
+    
+  .block-text {
+    display: inline-block;
+    background:rgba(0,0,0,0.5);
+    color: #fff;
+    font-size: 14px;
+    line-height: 1.4em;
+    padding: 2px;
+    text-align: center;
+    min-width: 24px;
+    margin: 0 4px;
+  }
+}
+

src/pages/Index/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import Normal from './components/Normal';
+import Trial from './components/Trial';
+
+export default function() {
+  return (
+    <div>
+      <Trial />
+    </div>
+  )
+}