中奖页面

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",

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/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'))
+        component: loadable(() => import(/* webpackChunkName: 'blessing-prehead' */'@/components/blessingPrehead/index'))
+    },
+    {
+        path: '/prize-winner-list',
+        component: loadable(() => import(/* webpackChunkName: 'prize-winner-list' */'@/components/activity/prize-winner-list'))
     },
 ]