index.js 5.03 KB
Newer Older
zhanghaozhe committed
1
/* eslint-disable jsx-a11y/anchor-is-valid, jsx-a11y/anchor-has-content, no-script-url */
zhanghaozhe committed
2 3 4 5 6 7
import React, { PureComponent } from "react"
import { Flex, WhiteSpace, List } from "antd-mobile"
import "./index.scss"
import Avatar from "./image/avatar.png"
import Vip from "./image/vip.png"
import { WithTab } from "src/HOCs"
zhanghaozhe committed
8 9
import { Link } from "react-router-dom"
import { connect } from "react-redux"
zhanghaozhe committed
10 11 12
import { HeaderBar } from "src/common"
import { http } from "src/utils"
import { setCurrentUser, startFetchUser } from "src/store/userAction"
zhanghaozhe committed
13
import { endFetchNoTrace } from "src/store/no-trace-validation/reducer"
zhanghaozhe committed
14

zhanghaozhe committed
15 16
const Item = List.Item
const Brief = Item.Brief
.  
baiguangyao committed
17

zhanghaozhe committed
18 19 20 21 22 23
@connect(
  (state) => ({
    user: state.user,
  }),
  { startFetchUser, setCurrentUser, endFetchNoTrace }
)
24
class My extends PureComponent {
zhanghaozhe committed
25 26 27 28 29 30 31 32 33 34 35 36 37
  constructor(props) {
    super(props)
    this.state = {
      data: [],
    }
  }

  componentDidMount() {
    this.getUser()
  }

  getUser = () => {
    this.props.startFetchUser()
zhanghaozhe committed
38
    http.get(`${API.home}/m/user_info_sample/1`).then((res) => {
zhanghaozhe committed
39
      this.props.endFetchNoTrace()
zhanghaozhe committed
40 41 42 43
      this.props.setCurrentUser(this.transformUser(res))
    })
  }

zhanghaozhe committed
44
  transformUser = (res) => {
zhanghaozhe committed
45 46 47
    let payload
    if (res.data.code === 200) {
      const {
zhanghaozhe committed
48 49
        msg,
        data: {
zhanghaozhe committed
50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
          avatar_file: avatar,
          user_name: username,
          is_vip: isVIP,
          uid,
          code,
        },
      } = res.data

      payload = {
        hasError: false,
        msg,
        data: {
          username,
          isVIP,
          avatar,
          uid,
          code,
        },
      }
    } else {
      payload = {
        hasError: true,
        msg: res.data.msg,
        code: res.data.code,
        data: {},
      }
    }
    return payload
  }

  // 去登录
  toLogin = () => {
zhanghaozhe committed
82
    this.props.history.push("/passport")
zhanghaozhe committed
83 84 85
  }

  toCourseDetail = (id) => {
zhanghaozhe committed
86
    const { history } = this.props
zhanghaozhe committed
87 88
    history.push(`/detail?id=${id}`)
    return false
zhanghaozhe committed
89 90 91
  }

  render() {
zhanghaozhe committed
92
    const { user } = this.props
zhanghaozhe committed
93 94 95 96 97 98 99
    const uid = user && user.data && user.data.uid
    const username = user && user.data && user.data.username
    const avatar = user && user.data && user.data.avatar
    const isVIP = user && user.data && user.data.isVIP

    let list
    if (!uid) {
zhanghaozhe committed
100 101
      list = (
        <List className="my-list">
zhanghaozhe committed
102 103 104 105
          <Item
            className="avatar-wrap"
            arrow="horizontal"
            multipleLine
zhanghaozhe committed
106 107
            thumb={Avatar}
            onClick={this.toLogin}
zhanghaozhe committed
108
          >
zhanghaozhe committed
109
            <Brief>点击登录</Brief>
zhanghaozhe committed
110
          </Item>
zhanghaozhe committed
111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138
        </List>
      )
    } else {
      list = (
        <List className="my-list">
          <Link to="/myedit">
            <Item
              className="avatar-wrap"
              arrow="horizontal"
              multipleLine
              thumb={avatar}
            >
              <Brief>
                {username}
                {isVIP === 1 && <img src={Vip} className="vip" alt="" />}
              </Brief>
              <Brief style={{ fontSize: "12px" }}>学号: {uid}</Brief>
            </Item>
          </Link>
          {!isVIP && (
            <a
              href="javascript:;"
              className="my-isvip"
              onClick={() => this.toCourseDetail(139)}
            ></a>
          )}
        </List>
      )
xuzhenghua committed
139
    }
zhanghaozhe committed
140 141 142 143
    return (
      <div className="flex-container">
        <Flex>
          <Flex.Item>
zhanghaozhe committed
144
            <HeaderBar title="我的" arrow={false} cart={false}></HeaderBar>
xuzhenghua committed
145

zhanghaozhe committed
146
            {list}
xuzhenghua committed
147

zhanghaozhe committed
148
            {!uid && <div className="am-list-header"></div>}
xuzhenghua committed
149

zhanghaozhe committed
150
            <List className="my-list-content">
zhanghaozhe committed
151
              <Link to="/purchased">
zhanghaozhe committed
152 153 154 155 156
                <Item arrow="horizontal">
                  <i className="iconfont iconiconfront-27"></i>
                  已购课程
                </Item>
              </Link>
zhanghaozhe committed
157
              <Link to="/shopcart">
zhanghaozhe committed
158 159 160 161 162
                <Item arrow="horizontal">
                  <i className="iconfont icongouwuche-xianxing"></i>
                  购物车
                </Item>
              </Link>
zhanghaozhe committed
163
              <Link to="/myorders">
zhanghaozhe committed
164 165 166 167 168
                <Item arrow="horizontal">
                  <i className="iconfont iconiconfront-24"></i>
                  课程订单
                </Item>
              </Link>
zhanghaozhe committed
169 170 171 172 173 174 175 176
              <Link
                to={{
                  pathname: "/coupons",
                  state: {
                    from: this.props.location.pathname,
                  },
                }}
              >
zhanghaozhe committed
177 178 179 180 181 182
                <Item arrow="horizontal" className="no-border">
                  <i className="iconfont iconiconfront-52"></i>
                  优惠券
                </Item>
              </Link>
              <div className="am-list-header"></div>
183

zhanghaozhe committed
184 185
              <Link to="/scholarship">
                <Item arrow="horizontal" className="btm-scholarship">
zhanghaozhe committed
186 187
                  <i className="iconfont iconiconfront-51"></i>
                  赚奖学金
xuzhenghua committed
188
                </Item>
zhanghaozhe committed
189
              </Link>
xuzhenghua committed
190
            </List>
zhanghaozhe committed
191 192
          </Flex.Item>
        </Flex>
zhanghaozhe committed
193
        <WhiteSpace size="lg" />
zhanghaozhe committed
194 195 196
      </div>
    )
  }
baiguangyao committed
197 198
}

zhanghaozhe committed
199
export default WithTab(My)