pull

package-lock.json

@@ -9225,21 +9225,11 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
-    "lodash.assign": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
-      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc="
-    },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
       "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
     },
-    "lodash.clonedeep": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
-      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
-    },
     "lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -9270,11 +9260,6 @@
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
     },
-    "lodash.mergewith": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz",
-      "integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ=="
-    },
     "lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -10025,9 +10010,9 @@
       }
     },
     "node-sass": {
-      "version": "4.11.0",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.11.0.tgz",
-      "integrity": "sha512-bHUdHTphgQJZaF1LASx0kAviPH7sGlcyNhWade4eVIpFp6tsn7SV8xNMTbsQFpEV9VXpnwTTnNYlfsZXgGgmkA==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.0.tgz",
+      "integrity": "sha512-W1XBrvoJ1dy7VsvTAS5q1V45lREbTlZQqFbiHb3R3OTTCma0XBtuG6xZ6Z4506nR4lmHPTqVRwxT6KgtWC97CA==",
       "requires": {
         "async-foreach": "^0.1.3",
         "chalk": "^1.1.1",
@@ -10036,12 +10021,10 @@
         "get-stdin": "^4.0.1",
         "glob": "^7.0.3",
         "in-publish": "^2.0.0",
-        "lodash.assign": "^4.2.0",
-        "lodash.clonedeep": "^4.3.2",
-        "lodash.mergewith": "^4.6.0",
+        "lodash": "^4.17.15",
         "meow": "^3.7.0",
         "mkdirp": "^0.5.1",
-        "nan": "^2.10.0",
+        "nan": "^2.13.2",
         "node-gyp": "^3.8.0",
         "npmlog": "^4.0.0",
         "request": "^2.88.0",

package.json

@@ -53,6 +53,7 @@
     "postcss-loader": "3.0.0",
     "postcss-preset-env": "6.5.0",
     "postcss-safe-parser": "4.0.1",
+    "prop-types": "^15.7.2",
     "qrcode": "^1.3.3",
     "qs": "^6.7.0",
     "react": "^16.8.6",

src/common/closable-popup/index.js

+import React, { Component } from 'react'
+import './index.scss'
+import classnames from 'classnames'
+import propTypes from 'prop-types'
+
+class ClosablePopup extends Component {
+
+  state = {
+    visible: this.props.visible
+  }
+
+  close = () => {
+    const {close} = this.props
+    close ? close() : this.setState({visible: false})
+  }
+
+  render() {
+    const {title, className, children, closable = true} = this.props
+    return (
+      this.state.visible
+        ?
+        <div className={'closable-popup-mask'}>
+          <div className={classnames(['popup-container', className])}>
+            <div className="title">{title}</div>
+            <div className="content">
+              {children}
+            </div>
+            {
+              closable && <i className={'close iconfont iconiconfront-2'} onClick={this.close}/>
+            }
+          </div>
+        </div>
+        : null
+    )
+  }
+}
+
+ClosablePopup.propTypes = {
+  title: propTypes.string.isRequired,
+  visible: propTypes.bool,
+  closable: propTypes.string,
+  close: propTypes.func
+}
+
+export default ClosablePopup

src/common/closable-popup/index.scss

+.closable-popup-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+
+    .popup-container {
+        position: absolute;
+        top: 165px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 300px;
+        padding: 20px 10px;
+        border-radius: 10px;
+        background: #fff;
+
+        .title {
+            font-size: 16px;
+            color: #525C65;
+            text-align: center;
+        }
+
+        .close {
+            position: absolute;
+            bottom: -88px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 36px;
+            color: #fff;
+        }
+    }
+}

src/common/index.js

@@ -5,8 +5,9 @@ export { default as OrderItem } from './OrderList'
 export { default as HeaderBar } from './HeaderBar'
 export { default as CallApp } from './CallApp'
 export { default as Captcha } from './Captcha'
-export { default as ClearableInput } from "./ClearableInput";
+export { default as ClearableInput } from "./ClearableInput"
 export { default as Loading } from './Loading'
 export { default as RenderTabBar } from './renderTabBar'
+export { default as Popup } from './closable-popup'
 
 

src/components/activity/prize-winner-list/index.js

+import React, { Component } from 'react'
+import './index.scss'
+import { getParam, http } from '@/utils'
+import { WithFullSize } from "@/HOCs"
+
+class PrizeWinnerList extends Component {
+
+  state = {
+    list: [],
+    title: '',
+  }
+
+  componentDidMount() {
+    http.get(`${API.home}/sys/activity/lottery_names/${getParam('tid')}`)
+      .then(res => {
+        const {data} = res
+        if (data.code == 200) {
+          const {data: response} = data
+          this.setState({
+            title: response.title,
+            list: response.list
+          })
+        }
+      })
+  }
+
+  render() {
+    const {title, list} = this.state
+    return (
+      <div id={'prize-winner-list'}>
+        <div className="banner">
+          <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/prize-winner-list-banner.png" alt=""
+               className="banner"/>
+        </div>
+        <h1>
+          <img className={'icon'}
+               src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/title-decorate-left.png" alt=""/>
+          <span>{title}</span>
+          <img className={'icon'}
+               src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/title-decorate-right.png" alt=""/>
+        </h1>
+        <ul>
+          <li className={'head title'}>
+            <div className="code">中奖码</div>
+            <div className="user-name">用户名称</div>
+            <div className="prize">奖品名称</div>
+          </li>
+          {
+            list.map(item => (
+              <li key={item.code}>
+                <div className="code">{item.code}</div>
+                <div className="user-name">{item.name}</div>
+                <div className="prize">{item.prize}</div>
+              </li>
+            ))
+          }
+        </ul>
+      </div>
+    )
+  }
+}
+
+export default WithFullSize(PrizeWinnerList)

src/components/activity/prize-winner-list/index.scss

+#prize-winner-list {
+    height: 100%;
+    background: #5327fa;
+
+    .banner {
+        width: 100%;
+        height: 168px;
+        margin-bottom: 30px;
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    h1 {
+        font-size: 14px;
+        color: #FEFDC7;
+        text-align: center;
+        margin-bottom: 15px;
+
+        span {
+            margin: 0 12px;
+        }
+
+        .icon {
+            width: 25px;
+            height: 12px;
+        }
+    }
+
+    ul {
+        width: 355px;
+        height: 316px;
+        margin: 0 auto;
+        background: rgba(57, 0, 201, 1);
+        border: 1px solid rgba(89, 112, 255, 1);
+        border-radius: 4px;
+
+        & li:nth-of-type(2n+1) {
+            background: #3900C9;
+        }
+
+        & li:nth-of-type(2n) {
+            background: #4200EB;
+        }
+
+        li {
+            height: 44px;
+            color: #FAF9E1;
+            display: flex;
+            text-align: left;
+            line-height: 44px;
+        }
+
+        .title{
+            color: #95FBCA;
+            text-align: center;
+        }
+
+        .code, .user-name {
+            width: 110px;
+            padding-left: 8px;
+        }
+        .user-name{
+            text-align: center;
+        }
+
+        .prize {
+            width: 135px;
+            padding-right: 8px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+}

src/components/blessingPreheat/index.js

+import React, { Component } from 'react'
+import RulePopup from './rulePopup/index'
+import CoursePopup from './coursePopup/index'
+import './index.scss'
+import { Popup } from '@/common'
+
+class BlessingPreheat extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      isRule: false,
+      isCourse: false,
+      inviteVisible: true
+    }
+  }
+
+  handleToHide = (key) => {
+    let obj = {}
+    obj[key] = false
+    this.setState({
+      ...obj
+    })
+  }
+
+  render() {
+    const {isRule, isCourse, inviteVisible} = this.state
+    return (
+      <div id={'blessing-preheat'}>
+        22222
+        {
+          isRule &&
+          <RulePopup handleToHide={() => this.handleToHide('isRule')}/>
+        }
+        {
+          isCourse &&
+          <CoursePopup handleToHide={() => this.handleToHide('isCourse')}/>
+        }
+        <Popup visible={inviteVisible}
+               title={'扫码邀请好友注册+10点福气值'}
+               className={'invite-popup'}
+        >
+          <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt="" className="qr-code"/>
+          <button>一键复制网址</button>
+        </Popup>
+      </div>
+    )
+  }
+}
+
+export default BlessingPreheat

src/components/blessingPreheat/index.scss

+#blessing-preheat {
+    .invite-popup {
+        .content {
+            display: flex;
+            flex-flow: column;
+            align-items: center;
+            margin-top: 29px;
+
+            .qr-code {
+                width: 120px;
+                height: 120px;
+                margin-bottom: 20px;
+            }
+
+            button {
+                width: 133px;
+                height: 30px;
+                background: rgba(83, 39, 250, 1);
+                border-radius: 15px;
+                font-size: 14px;
+                color: #fff;
+                -webkit-appearance: none;
+                outline: none;
+                border: none;
+            }
+        }
+    }
+}

src/router/router-config.js

@@ -171,10 +171,14 @@ export default [
     },
     {
         path: '/blessingRank',
-        component: loadable(() => import(/* webpackChunkName: 'Country' */'@/components/blessingRank/index'))
+        component: loadable(() => import(/* webpackChunkName: 'blessing-rank' */'@/components/blessingRank/index'))
     },
     {
-        path: '/blessingPrehead',
-        component: loadable(() => import(/* webpackChunkName: 'Country' */'@/components/blessingPrehead/index'))
+        path: '/blessingPreheat',
+        component: loadable(() => import(/* webpackChunkName: 'blessing-preheat' */'@/components/blessingPreheat/index'))
     },
-]
\ No newline at end of file
+    {
+        path: '/prize-winner-list',
+        component: loadable(() => import(/* webpackChunkName: 'prize-winner-list' */'@/components/activity/prize-winner-list'))
+    },
+]