poster

src/components/sharePoster/index.js

-import React, {Component} from 'react'
-import './index.scss'
-import {HeaderBar} from '../../common'
-import {http, api, getParam} from '@/utils'
-import QRCode from 'qrcode'
-import { Toast} from 'antd-mobile'
-
-
+import React, {Component} from 'react';
+import './index.scss';
+import {HeaderBar} from '@/common';
+import {http, getParam} from '@/utils';
+import QRCode from 'qrcode';
+import { Toast} from 'antd-mobile';
 
 class SharePoster extends Component {
     constructor(props) {
@@ -23,7 +21,7 @@ class SharePoster extends Component {
     }
 
     componentDidMount() {
-        this.getCodeWe()
+        this.getCodeWe();
         http.get(`${API.home}/m/dist/posters/${getParam('courseId')}/${getParam('uid')}`).then((res) => {
             if (res.data.code === 200) {
                 this.setState({
@@ -221,56 +219,73 @@ class SharePoster extends Component {
     squareClick = (index) => {
         this.setState({
             smallactive: index
-        })
+        });
         this.initCanvas(this.state.bgImage, index);
-
     }
 
     render() {
+        const { distPrice={}, smallListImg=[], smallactive } = this.state;
         return (
             <div className='share-poster'>
-                <HeaderBar title='生成专属海报' arrow={true} cart={false}></HeaderBar>
+                <HeaderBar 
+                    title='生成专属海报' 
+                    arrow={true} 
+                    cart={false}
+                />
                 <div className="total-container">
                     <div className='placard-img-container' id='imgWrapper'>
-                        <img src={this.state.billSrc.src} alt=""/>
+                        <img src={this.state.billSrc.src} alt="" />
                     </div>
-                    <img src={this.state.codeSrc} alt="" id='qrcode' className='placard-code'/>
-                    <canvas id='canvas' width='450' height='800'
-                            className={this.state.billSrc === '' ? '' : 'hide'}></canvas>
+                    <img 
+                        src={this.state.codeSrc} 
+                        alt="" 
+                        id='qrcode' 
+                        className='placard-code'
+                    />
+                    <canvas 
+                        id='canvas' 
+                        width='450' 
+                        height='800'
+                        className={this.state.billSrc === '' ? '' : 'hide'}
+                    />
                 </div>
                 <div className='placard-desc'>
                     <span className='placard-sharetxt'>
                         长按保存海报分享给好友，每有一人通过您的分享购买该课程，您可以
                         {
-                            this.state.distPrice.count_type === 0 &&
-                            <span className='placard-price'>获得{this.state.distPrice.first_level_tip}元的佣金奖励。</span>
+                            distPrice.count_type === 0 &&
+                            <span className='placard-price'>
+                                获得{distPrice.first_level_tip}元的佣金奖励。
+                            </span>
                         }
                         {
-                            this.state.distPrice.count_type === 1 &&
-                            <span
-                                className='placard-price'>获得成交金额的{this.state.distPrice.first_level_scale}%作为佣金奖励。</span>
+                            distPrice.count_type === 1 &&
+                            <span className='placard-price'>
+                                获得成交金额的{distPrice.first_level_scale}%作为佣金奖励。
+                            </span>
                         }
                     </span>
                 </div>
-
                 <div className='placard-swiper'>
                     <ul className='placard-list'>
                         {
-                            this.state.smallListImg && this.state.smallListImg.length > 0 && this.state.smallListImg.map((item, index) => {
+                            smallListImg.length > 0 && smallListImg.map((item, index) => {
                                 return (
-                                    <li onClick={this.squareClick.bind(this, index)} key={index}
-                                        className={this.state.smallactive === index ? 'active' : ''}>
-                                        <img src={item.square} alt=""/>
+                                    <li 
+                                        onClick={this.squareClick.bind(this, index)} 
+                                        key={index}
+                                        className={smallactive === index ? 'active' : ''}
+                                    >
+                                        <img src={item.square} alt="" />
                                     </li>
-                                )
+                                );
                             })
                         }
                     </ul>
                 </div>
-
             </div>
-        )
+        );
     }
 }
 
-export default SharePoster
+export default SharePoster;