<repo_name>wangyanilizhongshuo/react<file_sep>/mobile1/src/components/TabDetail.js
import React,{Component} from 'react';
import axios from 'axios';
import { Card, WingBlank, WhiteSpace } from 'antd-mobile';

export default class TabDetail extends Component{
  constructor(props){
    super(props);
    this.state={
      list:[],

    }
  }
  getData=()=>{
    axios({
          url   : `http://localhost:3000/product/${this.props.match.params.id}`,
         method: 'get'
        }).then(res=>{

       this.setState({
        list:[this.state.list,res.data]
    })
       })
  }


  componentDidMount(){
    var headurl=this.props.match.path;
    if(headurl.match(/product/g).length>0){
      this.getData();
    }


  }
  render(){
    // console.log(this.state.list);
    const { Meta } = Card;
    const {carousel} = this.props;
    let jsx=[];
    for(var i=0;i<this.state.list.length;i++){
      if(this.state.list[i].text !=null ){
      jsx.push(
         <WingBlank size="lg">
         <WhiteSpace size="lg" />
      <Card>
      <Card.Header
        title={this.state.list[i].text}
        thumb={this.state.list[i].img}
        thumbStyle={{border:'1px solid black',borderRadius:'25px'
       }}
        extra={<span>{this.state.list[
          i].id}</span>}
      />
      <Card.Body>
        <div >{this.state.list[i].content}</div>
      </Card.Body>
    </Card>
    <WhiteSpace size="lg" />
  </WingBlank>
      ) }
    }




    return (
      <div>
        {jsx}

        </div>

    )}
}<file_sep>/mobile1/src/components/Tabs1.js
import React,{Component} from 'react';
import { NavBar,Card, WingBlank, WhiteSpace, Tabs,Button} from 'antd-mobile';
import { Carousel} from 'antd-mobile';
import { connect } from 'react-redux';
import { fetchCarsouelList } from '../actions';
import { StickyContainer, Sticky } from 'react-sticky';
import axios from 'axios';
const mapStateToProps = state=>{
  return {
    carousel: state.carousel
  }
}
function renderTabBar(props) {
  return (<Sticky>
    {({ style }) => <div style={{ ...style, zIndex: 1 }}><Tabs.DefaultTabBar {...props} /></div>}
  </Sticky>);
}
const tabs = [
  { title: 'News List' },
  { title: 'Product  List' },
  { title: 'Third List' },
];

 class Tabs1 extends Component{
  constructor(props){
    super(props);
    this.state={
      list:[],
      page:1,
      listnews:[],

    }
  }
  getData = ()=>{
    axios({
      url   : `http://localhost:3000/product?_page=1&_limit=3&_sort=id&_order=desc`,
      method: 'get'
    }).then(res=>{
      this.setState({
          list:[...this.state.list,...res.data]
      })

    }
    )
  }
  getData1 = ()=>{
    axios({
      url   : `http://localhost:3000/news?_page=1&_limit=3&_sort=id&_order=desc`,
      method: 'get'
    }).then(res=>{
      this.setState({
          listnews:[...this.state.listnews,...res.data]
      })

    }
    )
  }



  componentDidMount(){
    this.getData();
    this.getData1();

    this.props.fetchCarsouelList();
  }
  render(){
    const { Meta } = Card;
    const {carousel} = this.props;
    let jsx=[];
    for(var i=0;i<this.state.list.length;i++){
      jsx.push(
         <WingBlank size="lg">
         <WhiteSpace size="lg" />
      <Card>
      <Card.Header
        title={this.state.list[i].text}
        thumb={this.state.list[i].img}
        extra={<span>{this.state.list[
          i].id}</span>}
          thumbStyle={{border:'1px solid black',borderRadius:'25px'
       }}
      />
      <Card.Body >
        <div style={{
        'white-space': 'nowrap',
        'text-overflow': 'ellipsis',
        'overflow': 'hidden',
        'display':'block','width':'100%'
}}>{this.state.list[i].content}</div>
      </Card.Body>

    </Card>
    <WhiteSpace size="lg" />
  </WingBlank>
      )
    }


    let  jsxnews=[];
    for(var i=0;i<this.state.listnews.length;i++){
      jsxnews.push(
         <WingBlank size="lg">
         <WhiteSpace size="lg" />
      <Card>
      <Card.Header
        title={this.state.listnews[i].text}
        thumb={this.state.listnews[i].img}
        extra={<span>{this.state.listnews[
          i].id}</span>}
          thumbStyle={{border:'1px solid black',borderRadius:'25px'
       }}

      />
      <Card.Body>
        <div style={{
        'white-space': 'nowrap',
        'text-overflow': 'ellipsis',
        'overflow': 'hidden',
        'display':'block','width':'100%'
}}>{this.state.listnews[i].content}</div>
      </Card.Body>

    </Card>
    <WhiteSpace size="lg" />
  </WingBlank>
      )
    }
    return (
      <div>
        <NavBar mode= "dark">首页</NavBar>

        <WingBlank>
        <Carousel
        autoplay = {false}
        infinite
        beforeChange = {(from, to) => console.log(`slide from ${from} to ${to}`)}
        afterChange  = {index => console.log('slide to', index)}
      >
        {carousel.map(val => (
          <a
            key   = {val.id}
            href  = {val.url}
            style = {{ display: 'inline-block', width: '100%', height: 200 }}
          >
            <img
              src   = {val.img}
              alt   = {val.title}
              style = {{ width: '100%', verticalAlign: 'top' }}

            />
          </a>
        ))}
      </Carousel>
        </WingBlank>


  <div>
    <br/>
  <Button type="primary">产品模块</Button><WhiteSpace />
    {jsx}
    <Button type="primary">新闻模块</Button><WhiteSpace />
   {jsxnews}


</div>





      </div>
    )
  }
}

export default connect(mapStateToProps,{fetchCarsouelList})(Tabs1);<file_sep>/admin/mockData.js
const faker =require('faker');
const Mock = require('mockjs');
const _    = require('lodash');

module.exports = function(){
    return {
        people:_.times(100,function(n){
            return {
                id  : n,
                name: Mock.Random.cname(),
                img : Mock.Random.image('50x50', Mock.Random.color()),
                text: Mock.Random.csentence(8,14),
                time: Mock.Random.date('yyyy-MM-dd'),
                star: Mock.mock({
                    'number|1-100': 100
                })
            }
        }),
        product:_.times(100,function(n){
            return {
                id   : n,
                name : Mock.Random.cname(),
                img  : Mock.Random.image('50x50', Mock.Random.color()),
                content:Mock.Random.csentence(200,300),
                text : Mock.Random.csentence(4,14),
                time : Mock.Random.date('yyyy-MM-dd'),
                price: Mock.mock({
                    'number|1-100': 100
                })
            }
        }),
        news:_.times(100,function(n){
            return {
                id   : n,
                name : Mock.Random.cname(),
                img  : Mock.Random.image('50x50', Mock.Random.color()),
                content:Mock.Random.csentence(200,600),
                text : Mock.Random.csentence(4,14),
                time : Mock.Random.date('yyyy-MM-dd'),

            }
        }),
        carousel:_.times(6,function(n){
            return {
                id   : n,
                name : Mock.Random.cname(),
                img  : Mock.Random.image('50x50', Mock.Random.color()),

                url:Mock.Random.url()
            }
        }),

    }
}
