底部资源位实现

 import httpService from '../../../common/httpService'
 import config from '../config'
 
-let conf = query => httpService.get(config.domain + '/activity/wheelSurf/conf', query);
-let start = () => httpService.get(config.domain + '/activity/wheelSurf/start');
-module.exports = {conf, start};
\ No newline at end of file
+let conf = params => httpService.postJson(config.domain + '/api/activity/wheelSurf/conf', params);
+let start = () => httpService.postJson(config.domain + '/api/activity/wheelSurf/start');
+let resource = query => httpService.get(config.domain + '/api/common/resource', query);
+module.exports = {conf, start, resource};
\ No newline at end of file

 import React from 'react';
 
 import './index.scss';
-export default class BottomButtons extends React.Component {
+export default class BottomButton extends React.Component {
     constructor(props) {
         super(props);
     }
@@ -16,10 +16,10 @@ export default class BottomButtons extends React.Component {
         return (
             <div className="comp-bottom-btns-wrap">
                 {
-                    linkArr.map(link => {
+                    linkArr.map((link, idx) => {
                         return (
-                            <a href="" className="button-item">
-                                <img className="btn-item-bg" src="https://cdn.yoho.cn/o_1cpeb6vql1nm9cvvls15n9184p24.png"/>
+                            <a href={link.url} className="button-item" key={idx}>
+                                <img className="btn-item-bg" src={link.bg}/>
                             </a>
                         )
                     })

+import React from 'react';
+import {resource} from '../../../api';
+import {image} from '../../../../../common/utils';
+
+import './index.scss';
+
+export default class Resource extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            floors: []
+        };
+
+        this.loadResource();
+    }
+
+    loadResource = async () => {
+        try {
+            let result = await resource({contentCode: this.props.code});
+            
+            if (result.code === 200) {
+                this.setState({
+                    floors: result.data
+                });
+            }
+
+        } catch (err) {
+            
+        }
+    };
+
+    render() {
+        const {floors} = this.state;
+        
+        if (!this.props.code) {
+            return null;
+        }
+        
+        return (
+            <div className="comp-resource-wrap">
+                {
+                    floors.map((floor, idx) => {
+                        return (
+                            <div className="new-single-img-item" key={floor.template_id}>
+                                <a>
+                                    <img src={
+                                        image(floor.data.list[0].src, floor.data.imageWidth, floor.data.imageHeight)
+                                    } alt=""/>
+                                </a>
+                            </div>
+                        )
+                    })
+                }
+            </div>
+        )
+    }
+}
\ No newline at end of file

+.comp-resource-wrap {
+    position: absolute;
+    top: 1248px;
+    left: 0;
+    right: 0;
+    width: 100%;
+    padding: 0 40px;
+    font-size: 0;
+    box-sizing: border-box;
+    
+    .new-single-img-item img {
+        width: 100%;
+        margin-bottom: 20px;
+    }
+}
\ No newline at end of file

@@ -12,7 +12,8 @@ import {
     Link
 } from 'react-router-dom'
 
-import BottomButtons from '../components/bottom-buttons';
+import Resource from '../components/resource';
+import BottomButton from '../components/bottom-button';
 
 const {actId} = getQueryObj();
 
@@ -25,6 +26,7 @@ export default class wheelSurf extends PureComponent {
             pending: false, // 抽奖中
             startEnd: false,
             isEnding: false, // 即将停止
+            isLogin: false,
 
             conf: {
                 loading: ''
@@ -35,22 +37,13 @@ export default class wheelSurf extends PureComponent {
     }
 
     init = async () => {
-        let uid = cookie.load('app_uid') || getQueryObj().uid || 0;
-        if(!uid || !parseInt(uid)){
-            return;
-        }
-
         let result = await conf({
-            actId,
-            uid: uid,
-            sessionKey: cookie.load('app_session_key') || getQueryObj().session_key || '',
-            sessionType: cookie.load('app_client_type') || '',
-            appVersion: cookie.load('app_version') || ''
+            act_id: +actId
         });
         
         if (result.code === 200) {
             this.setState({
-                conf: result.data
+                conf: result.data.conf
             })
         }
     };
@@ -80,32 +73,65 @@ export default class wheelSurf extends PureComponent {
 
         if (result.code === 200) {
             this.setState({
-                conf: result.data
+                conf: result.data.conf
             })
         }
     };
+    
+    links = conf => {
+        let links = [];
+        
+        if (conf.jump_btn_left_url) {
+            links.push({
+                url: conf.jump_btn_left_url,
+                bg: conf.jump_btn_left_bg
+            });
+        }
+        
+        if (conf.jump_btn_middle_url) {
+            links.push({
+                url: conf.jump_btn_middle_url,
+                bg: conf.jump_btn_middle_bg
+            });
+        }
+        
+        if (conf.jump_btn_right_url) {
+            links.push({
+                url: conf.jump_btn_right_url,
+                bg: conf.jump_btn_right_bg
+            });
+        }
+
+        return links;
+    };
 
     render() {
-        const {conf, isEnding} = this.state;
+        const {conf, isEnding, isLogin} = this.state;
+
         if (!conf.id) {
             return (
                 <div className="home-wrap">
-                    <img className="main-bg" src={this.state.conf.loading + '?imageslim'}/>
+                    <img className="main-bg" src={this.state.conf.loading}/>
                 </div>
             )
         }
-        
+
+        let links = this.links(conf);
+
         return (
             <div className="home-wrap">
-                <img className="main-bg" src={conf.main_bg + '?imageslim'}/>
-                {conf.rule_btn_bg ? (<Link to={`${config.routerPath}/rule.html`}><img className="rule-btn" src={conf.rule_btn_bg + '?imageslim'}/></Link>) : ''}
-                {conf.share_btn_bg ? (<img className="share-btn" src={conf.share_btn_bg + '?imageslim'}/>): ''}
-                <img className="wheel-bg" src={conf.wheel_bg + '?imageslim'}/>
+                <img className="main-bg" src={conf.main_bg}/>
+                {conf.rule_btn_bg ? (<Link to={`${config.routerPath}/rule.html`}><img className="rule-btn" src={conf.rule_btn_bg}/></Link>) : ''}
+                {conf.share_btn_bg ? (<img className="share-btn" src={conf.share_btn_bg}/>): ''}
+                <img className="wheel-bg" src={conf.wheel_bg}/>
                 <img className="wheel-bg-surf-layer" src={conf.wheel_bg}/>
                 <img onClick={()=>{this.start()}} className="start-btn-bg" src={conf.prize_btn_bg}/>
+    
+                <BottomButton links={links}/>
+                <Resource code={conf.code || '11421760f4ea8b231c5b8269f4ff65bb'}/>
+
                 {isEnding ? (<img className="prize-hit-bg" src={conf.win_prize_bg}/>) : ''}
                 {isEnding ? (<img className="prize-hit-start-bg" src={conf.prize_btn_bg}/>) : ''}
-                <BottomButtons links={this.conf}/>
             </div>
         )
     }

@@ -114,7 +114,69 @@ const parseUrl= (url)=> {
         query: query
     };
 }
+
+const image = (url, width, height, mode) => {
+    mode = !isNaN(mode) ? mode : 2;
+    url = url || '';
+    url = url.replace(/{width}/g, width).replace(/{height}/g, height).replace(/{mode}/g, mode);
+    if (url.indexOf('imageView2') > 0) {
+        url += '/q/70';
+    }
+    return url.replace('http:', '');
+};
+
+
+const image2 = (imageUrl, opts) => {
+    if (imageUrl) {
+        let params = opts.hash;
+        let urls = imageUrl.split('?');
+        let query = urls[1] || '';
+        let uri = urls[0];
+
+        if (uri.indexOf('http:') === 0) {
+            uri = uri.replace('http:', '');
+        }
+
+        if (query) {
+            query = query.replace(/{width}/g, params.w)
+                .replace(/{height}/g, params.h)
+                .replace(/{mode}/g, (params.mode || 2));
+
+            if (query.indexOf('imageView2') === 0) {
+                if (params.q && query.indexOf('/q/') > 0) {
+                    query = query.replace(/\/q\/\d+/g, '/q/' + params.q);
+                } else {
+                    query += '/q/' + params.q;
+                }
+            } else if (query.indexOf('imageMogr2') === 0) {
+                if (params.q && query.indexOf('/quality/') > 0) {
+                    query = query.replace(/\/quality\/\d+/g, '/quality/' + params.q);
+                } else {
+                    query += '/quality/' + params.q;
+                }
+            } else if (query.indexOf('imageView/') === 0) {
+                if (params.q && query.indexOf('/q/') > 0) {
+                    query = query.replace(/\/q\/\d+/g, '/q/' + params.q);
+                } else {
+                    query += '/q/' + params.q;
+                }
+
+                if (params.mode) {
+                    query = query.replace(/imageView\/\d{1}\//, 'imageView/' + params.mode + '/');
+                }
+            }
+        } else {
+            query = 'imageView2/2/interlace/1/q/' + (params.q || 75);
+        }
+        return uri + '?' + query;
+    } else {
+        return imageUrl;
+    }
+};
+
 export {
+    image,
+    image2,
     getEnv,
     invokeMethod,
     getQueryObj,

@@ -3877,6 +3877,14 @@ mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "http://npm.yohops.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
 
+mini-css-extract-plugin@^0.4.3:
+  version "0.4.3"
+  resolved "http://npm.yohops.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.3.tgz#98d60fcc5d228c3e36a9bd15a1d6816d6580beb8"
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^1.0.0"
+    webpack-sources "^1.1.0"
+
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "http://npm.yohops.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"