courselist.js 11.8 KB
Newer Older
zhanghaozhe committed
1
/* eslint-disable default-case */
zhanghaozhe committed
2 3 4 5 6
import React, { Component } from "react"
import { VList } from "../../common"
import { Tabs, WhiteSpace, Toast } from "antd-mobile"
import "./courselist.scss"
import HeaderSearch from "../../common/HeaderSearch/index"
zhanghaozhe committed
7
import { http, getParam } from "src/utils"
zhanghaozhe committed
8 9 10
import Loading from "src/common/Loading"
import { connect } from "react-redux"
import { StickyContainer, Sticky } from "react-sticky"
2  
xuzhenghua committed
11 12

function stopScroll(e) {
zhanghaozhe committed
13
  e.preventDefault()
2  
xuzhenghua committed
14
}
xuzhenghua committed
15

zhanghaozhe committed
16 17
@connect(({ user }) => ({
  user,
18
}))
xuzhenghua committed
19
class Classify extends Component {
zhanghaozhe committed
20 21 22 23
  constructor(props) {
    super(props)
    this.state = {
      ispull: false,
zhanghaozhe committed
24
      display: "none",
wangshuo committed
25 26 27
      // arr: [{ basics: [] }, { advanced: [] }],
      arr: [{ basics: [] }],

zhanghaozhe committed
28 29
      allClass: [],
      data: [],
zhanghaozhe committed
30
      activeTab: decodeURIComponent(getParam("name")),
zhanghaozhe committed
31
      isLoading: true,
zhanghaozhe committed
32
      top: 44,
xuzhenghua committed
33
    }
zhanghaozhe committed
34
  }
FE committed
35

zhanghaozhe committed
36 37 38
  componentDidMount() {
    this.getTabs()
    this.getList()
xuzhenghua committed
39

zhanghaozhe committed
40
    const el = document.querySelector(".search-nav")
zhanghaozhe committed
41
    this.setState({
zhanghaozhe committed
42 43
      top: el.offsetHeight,
    })
zhanghaozhe committed
44
  }
2  
xuzhenghua committed
45

zhanghaozhe committed
46
  componentWillUnmount() {
zhanghaozhe committed
47
    document.removeEventListener("touchmove", stopScroll)
zhanghaozhe committed
48
  }
2  
xuzhenghua committed
49

zhanghaozhe committed
50
  // 获取tabs接口
wangshuo committed
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
  // getTabs = () => {
  //   let data = 0
  //   http
  //     .get(`${API.home}/m/course/classify/${data}`)
  //     .then((res) => {
  //       const _this = this
  //       if (res.data.code === 200) {
  //         if (res.data.data.common.length > 0) {
  //           console.log(res.data.data.common)
  //           let arr = ["basics", "advanced"]
  //           let arr2 = [{ basics: [] }, { advanced: [] }]
  //           let arr3 = []
  //           arr.forEach(function (item, index) {
  //             arr2[item] = res.data.data.common[index]
  //             res.data.data.common[index].list.forEach(function (item, index) {
  //               arr3.push({ title: item.c_name, id: item.c_id })
  //             })
  //           })
  //           _this.setState({
  //             arr: arr2,
  //             allClass: arr3,
  //           })
  //         }
  //       } else {
  //         Toast.info(res.data.msg, 2)
  //       }
  //     })
  //     .catch((err) => {
  //       console.log(err)
  //     })
  // }
zhanghaozhe committed
82 83
  getTabs = () => {
    let data = 0
zhanghaozhe committed
84 85
    http
      .get(`${API.home}/m/course/classify/${data}`)
zhanghaozhe committed
86 87 88 89
      .then((res) => {
        const _this = this
        if (res.data.code === 200) {
          if (res.data.data.common.length > 0) {
wangshuo committed
90 91 92
            console.log(res.data.data.common[0].list)
            let arr = ["basics"]
            let arr2 = [{ basics: [] }]
zhanghaozhe committed
93 94 95 96
            let arr3 = []
            arr.forEach(function (item, index) {
              arr2[item] = res.data.data.common[index]
              res.data.data.common[index].list.forEach(function (item, index) {
zhanghaozhe committed
97
                arr3.push({ title: item.c_name, id: item.c_id })
zhanghaozhe committed
98
              })
xuzhenghua committed
99
            })
zhanghaozhe committed
100
            _this.setState({
wangshuo committed
101
              arr: res.data.data.common,
zhanghaozhe committed
102
              allClass: arr3,
xuzhenghua committed
103
            })
zhanghaozhe committed
104
          }
wangshuo committed
105 106
          console.log(this.state.arr.basics,999)

zhanghaozhe committed
107 108 109 110
        } else {
          Toast.info(res.data.msg, 2)
        }
      })
zhanghaozhe committed
111
      .catch((err) => {
zhanghaozhe committed
112 113 114 115 116 117 118 119
        console.log(err)
      })
  }

  // 获取课程接口
  getList = () => {
    const _this = this
    _this.setState((state, props) => ({
zhanghaozhe committed
120 121 122
      isLoading: true,
    }))
    http.get(`${API.home}/m/course/list/${getParam("id")}`).then((res) => {
zhanghaozhe committed
123 124 125
      if (res.data.code === 200) {
        _this.setState({
          data: res.data.data,
zhanghaozhe committed
126
          isLoading: false,
xuzhenghua committed
127
        })
zhanghaozhe committed
128 129 130
      }
    })
  }
xuzhenghua committed
131

zhanghaozhe committed
132 133 134 135 136
  // 点击横向滚动tab查询
  ontabclick = (tab) => {
    this.props.history.push(`/courselist?id=${tab.id}&name=${tab.title}`)
    this.getList()
    this.setState({
zhanghaozhe committed
137 138
      activeTab: decodeURIComponent(getParam("name")),
    })
zhanghaozhe committed
139
  }
xuzhenghua committed
140

zhanghaozhe committed
141 142
  // 上下展示
  pulldown = () => {
zhanghaozhe committed
143 144 145 146 147 148 149 150 151 152 153 154 155
    this.setState(
      (status) => ({
        ispull: !status.ispull,
        display: status.ispull ? "none" : "block",
      }),
      () => {
        this.state.ispull
          ? document.addEventListener("touchmove", stopScroll, {
              passive: false,
            })
          : document.removeEventListener("touchmove", stopScroll)
      }
    )
zhanghaozhe committed
156
  }
xuzhenghua committed
157

zhanghaozhe committed
158 159 160 161
  // 弹窗里面tab点击查询
  labelclick = (item) => {
    this.props.history.push(`/courselist?id=${item.c_id}&name=${item.c_name}`)
    this.getList()
zhanghaozhe committed
162
    this.setState((status) => ({
zhanghaozhe committed
163
      ispull: !status.ispull,
zhanghaozhe committed
164 165
      display: status.ispull ? "none" : "block",
      activeTab: decodeURIComponent(getParam("name")),
zhanghaozhe committed
166 167
    }))
  }
xuzhenghua committed
168

zhanghaozhe committed
169
  toCourseDetail = (id) => {
zhanghaozhe committed
170
    const { history } = this.props
zhanghaozhe committed
171 172
    history.push(`/detail?id=${id}`)
  }
173

zhanghaozhe committed
174
  toClassify = () => {
zhanghaozhe committed
175
    this.props.history.replace("/classify")
zhanghaozhe committed
176
  }
xuzhenghua committed
177

zhanghaozhe committed
178
  render() {
zhanghaozhe committed
179 180 181 182
    const { user = {} } = this.props
    let isLogin = user.data && user.data.uid ? true : false
    const bottom = <i className={"iconfont iconiconfront-69 pull-down"}></i>
    const top = <i className={"iconfont iconiconfront-71 pull-down"}></i>
xuzhenghua committed
183

zhanghaozhe committed
184 185 186
    let page = this.state.allClass.findIndex(
      (item) => item.title === this.state.activeTab
    )
zhanghaozhe committed
187
    return (
zhanghaozhe committed
188 189
      <div className="class-child">
        <HeaderSearch isLogin={isLogin} toHref={this.toClassify} />
zhanghaozhe committed
190
        <Loading isLoading={this.state.isLoading}>
zhanghaozhe committed
191
          <div className="class-content">
zhanghaozhe committed
192 193 194 195 196 197
            {/* <WhiteSpace/> */}
            <div onClick={this.pulldown.bind(this)}>
              {this.state.ispull ? top : bottom}
            </div>
            <StickyContainer>
              {/* <Tabs
2  
xuzhenghua committed
198 199 200 201 202 203 204
                                tabs={this.state.allClass}
                                animated={false}
                                page={page}
                                onChange={(tab) => this.ontabclick(tab)}
                                renderTabBar={props => <div className={'custom-render-bar'}>
                                    <Tabs.DefaultTabBar {...props}/>
                                </div>}
FE committed
205
                            > */}
zhanghaozhe committed
206 207 208 209 210
              <Tabs
                tabs={this.state.allClass}
                animated={false}
                page={page}
                onChange={(tab) => this.ontabclick(tab)}
zhanghaozhe committed
211
                renderTabBar={(props) => {
zhanghaozhe committed
212 213
                  return (
                    <Sticky>
zhanghaozhe committed
214
                      {({ style }) => {
zhanghaozhe committed
215
                        return (
zhanghaozhe committed
216 217 218 219 220 221 222
                          <div
                            style={{
                              ...style,
                              top: `${this.state.top}px`,
                              zIndex: 1,
                            }}
                          >
zhanghaozhe committed
223 224 225 226 227 228 229 230
                            <Tabs.DefaultTabBar {...props} />
                          </div>
                        )
                      }}
                    </Sticky>
                  )
                }}
              >
zhanghaozhe committed
231
                <div className="tabs">
zhanghaozhe committed
232
                  <ul>
zhanghaozhe committed
233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255
                    {this.state.data &&
                      this.state.data.length > 0 &&
                      this.state.data.map((item, index) => {
                        const Info = (
                          <div className="info">
                            <p
                              className="title text-overflow-2"
                              onClick={() =>
                                this.toCourseDetail(item.course_id)
                              }
                            >
                              {item.course_title}
                            </p>
                            <p className="contact text-overflow-1">
                              {item.desc}
                            </p>
                            <div className="des">
                              {item.is_restricted ? (
                                <LimitFree course={item} />
                              ) : item.is_buy ? (
                                <span className="isbuy">已购买</span>
                              ) : (
                                <p className="course-price">
zhanghaozhe committed
256 257 258
                                  <span className="new">¥{item.price1}</span>
                                  <span className="old">¥{item.price0}</span>
                                </p>
zhanghaozhe committed
259 260
                              )}
                            </div>
zhanghaozhe committed
261
                          </div>
zhanghaozhe committed
262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292
                        )
                        const status = !item.is_buy && (
                          <div>
                            {item.bargain_num === 0 &&
                              item.groupon_num !== 0 && (
                                <p className="course-status">
                                  拼团减{item.groupon_num}
                                </p>
                              )}
                            {item.bargain_num !== 0 &&
                              item.groupon_num === 0 && (
                                <p className="course-status">
                                  砍价减{item.bargain_num}
                                </p>
                              )}
                            {item.is_aist && (
                              <span className="return_cash"></span>
                            )}
                          </div>
                        )
                        return (
                          <VList
                            key={index}
                            status={status}
                            img={item.image_name}
                            id={item.course_id}
                            info={Info}
                            toDetail={this.toCourseDetail}
                          />
                        )
                      })}
zhanghaozhe committed
293 294 295 296
                  </ul>
                </div>
              </Tabs>
            </StickyContainer>
zhanghaozhe committed
297
            <WhiteSpace />
zhanghaozhe committed
298
          </div>
zhanghaozhe committed
299
          <div className="mbc-box" style={{ display: this.state.display }}>
wangshuo committed
300
            {this.state.arr!==[] && (
zhanghaozhe committed
301
              <div className="tabcontent">
zhanghaozhe committed
302 303
                <ClassCourse
                  activeTab={this.state.activeTab}
wangshuo committed
304 305
                  data={this.state.arr[0].list}
                  title={this.state.arr[0].name}
zhanghaozhe committed
306 307
                  labelclick={this.labelclick}
                />
wangshuo committed
308
                {/* <ClassCourse
zhanghaozhe committed
309 310 311 312
                  activeTab={this.state.activeTab}
                  data={this.state.arr.advanced.list}
                  title={this.state.arr.advanced.name}
                  labelclick={this.labelclick}
wangshuo committed
313
                /> */}
zhanghaozhe committed
314
              </div>
zhanghaozhe committed
315
            )}
zhanghaozhe committed
316 317 318 319 320
          </div>
        </Loading>
      </div>
    )
  }
xuzhenghua committed
321 322
}

xuzhenghua committed
323
function ClassCourse(props) {
zhanghaozhe committed
324 325
  return (
    <div className="class-course">
zhanghaozhe committed
326 327 328 329 330
      <p className="course-items-title">{props.title}</p>
      <div className="items-box">
        {props.data &&
          props.data.length > 0 &&
          props.data.map((item, index) => {
zhanghaozhe committed
331
            return (
zhanghaozhe committed
332 333 334 335 336 337 338 339 340 341 342
              <span
                className={
                  props.activeTab === item.c_name
                    ? "active-label"
                    : "item-label"
                }
                key={index}
                onClick={(e) => props.labelclick(item)}
              >
                {item.c_name}
              </span>
zhanghaozhe committed
343
            )
zhanghaozhe committed
344
          })}
zhanghaozhe committed
345 346 347
      </div>
    </div>
  )
xuzhenghua committed
348 349
}

zhanghaozhe committed
350
function LimitFreeStatus({ course }) {
zhanghaozhe committed
351
  /*
zhanghaozhe committed
352 353 354
   *  limit-free-status: 0-未领取 1-已领取 2-已过期
   *
   * */
zhanghaozhe committed
355 356
  switch (course.limit_free_status) {
    case 0:
zhanghaozhe committed
357 358 359 360 361 362
      return (
        <div className="limit-free">
          <span>限时免费</span>
          <span>¥{course.price0}</span>
        </div>
      )
zhanghaozhe committed
363 364 365
    case 1:
      return <div>已领取</div>
    case 2:
zhanghaozhe committed
366 367 368 369 370 371
      return (
        <p className="course-price">
          <span className="new">¥{course.price1}</span>
          <span className="old">¥{course.price0}</span>
        </p>
      )
zhanghaozhe committed
372 373 374
  }
}

zhanghaozhe committed
375
function LimitFree({ course }) {
zhanghaozhe committed
376 377
  if (course.is_buy) {
    if (course.limit_free_status === 1) {
zhanghaozhe committed
378
      return <div className={"isbuy"}>已领取</div>
zhanghaozhe committed
379
    } else {
zhanghaozhe committed
380
      return <div className={"isbuy"}>已购买</div>
zhanghaozhe committed
381 382
    }
  } else {
zhanghaozhe committed
383
    return <LimitFreeStatus course={course} />
zhanghaozhe committed
384 385 386
  }
}

zhanghaozhe committed
387
export default Classify