Background.js

import React, { Component } from 'react';
import { connect } from 'dva';
import { Tabs,Toast } from 'antd-mobile';
import shareHide from "../../utils/shareHide";

import css from './css.less';
class Background extends Component{
  constructor(props) {
    super(props);
    this.state = {
      templatesList:[],
      backgroudTemp:{},//选中的背景
      current:0,
      loadingFlag:true,
    }
  }

   componentDidMount() {
    Toast.loading('loading...',0)
    document.title = '选择背景';
    let _this = this;
    shareHide();
    let cardInfo = JSON.parse(sessionStorage.getItem("cardInfo"));
    let backgroudId = cardInfo.cardBackground;//已选择的背景
    //获取名片背景列表
    this.props.dispatch({
      type: 'BusinessCard/GetCardBackgroundTmpsList',
      payload: {},
      callback(res) {
        let current = _this.state.current;
        if(res && res.length>0){
          for(let ii in res){
            if(res[ii].id == backgroudId){
              current = Number(ii);
              break;
            }
          }
        }
        _this.setState({
            templatesList:res || [],
            current:current,
            backgroudTemp:res[current],
            loadingFlag:false
          })
        Toast.hide();
      }
    })
  }
  confirmOk = () => {
    let _this = this;
    let bgdid = this.state.backgroudTemp.id;
    let cardInfo = JSON.parse(sessionStorage.getItem("cardInfo"));
    let userId = cardInfo.id || JSON.parse(localStorage.getItem("id"));
    this.props.dispatch({
      type: 'BusinessCard/UpdateBusinessCardInfo',
      payload: {
        id:userId,
        cardBackground:bgdid,
      },
      callback(res) {
        _this.props.history.go(-1);
      }
    })
  }
  handleSelect = (index,item)=>{
    this.setState({
      current:index,
      backgroudTemp:item
    })
  }
  render() {
    let {templatesList,current} = this.state;
    if(this.state.loadingFlag){
      return <div></div>
    }
    return (
        <div className={css.bgdtemplate}>
        {
          templatesList.length>0 ? (
            <div>
              <div className={css.bgdSection}>
                {
                  templatesList.map((item,index)=>{
                  return(
                      <div className={css.bgdItem} key={item.id} onClick={()=>{this.handleSelect(index,item)}}>
                        <img className={css.bgdImg} src={item.backgroundPath} alt="" />
                        {current === index ? <img className={css.selected} src={require("../../assets/image/selected_white.png")} /> : ""}
                      </div>
                    )
                  })
                }
              </div>
              <div className={css.footerBtn} onClick={()=>{this.confirmOk()}}>
                <img src={require("../../assets/image/queding.png")} alt="" />
              </div>
            </div>
          ) : (
            <div className={css.haveNoData}>
              <img src={require('../../assets/image/clientless.png')} alt="" />
              <div className={css.text}>暂无背景</div>
            </div>
          )
        }
        </div>
      )
  }
}

export default connect()(Background);