index.js 11.5 KB
Newer Older
zhanghaozhe committed
1
/* eslint-disable default-case */
zhanghaozhe committed
2 3 4
import React, { Component } from "react"
import "./index.scss"
import { Link } from "react-router-dom"
zhanghaozhe committed
5
import { browser, getParam, http } from "src/utils"
zhanghaozhe committed
6 7
import { Toast } from "antd-mobile"
import { connect } from "react-redux"
zhanghaozhe committed
8
import { WithFullSize } from "src/HOCs"
zhanghaozhe committed
9 10
import { isEmpty } from "lodash"
import { addMessage, addResult, reselect } from "./store"
zhanghaozhe committed
11 12 13 14 15 16

const messageType = {
  SYSTEM_MESSAGE: 1,
  USER_MESSAGE: 2,
  OPTIONS: 3,
}
zhanghaozhe committed
17 18 19 20

class IntelligentRecommend extends Component {
  state = {
    showAnalyzing: false,
zhanghaozhe committed
21 22
    systemAvatar:
      "https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/home/avatar_20191104.png",
zhanghaozhe committed
23 24 25 26 27 28 29 30
    options: {
      data: [],
      messageId: 0,
    },
    next: {
      oid: 0,
      rid: 0,
    },
zhanghaozhe committed
31 32
  }

zhanghaozhe committed
33
  componentDidMount() {
zhanghaozhe committed
34
    const { intelligentRecommend, reselect } = this.props
zhanghaozhe committed
35 36
    if (isEmpty(intelligentRecommend.result)) {
      reselect()
zhanghaozhe committed
37 38
      this.getMessage()
    }
zhanghaozhe committed
39 40
  }

zhanghaozhe committed
41
  handleSelect = (item) => {
zhanghaozhe committed
42 43 44 45
    this.props.addMessage({
      type: messageType.USER_MESSAGE,
      content: item.describe,
      id: item.id,
zhanghaozhe committed
46
    })
zhanghaozhe committed
47 48 49 50 51 52 53 54 55 56 57 58
    this.setState(
      (state) => ({
        options: { data: [], messageId: 0 },
        next: {
          ...state.next,
          oid: item.id,
        },
      }),
      () => {
        this.getMessage()
      }
    )
zhanghaozhe committed
59 60
  }

zhanghaozhe committed
61
  getMessage = () => {
zhanghaozhe committed
62 63 64 65 66 67 68
    const { oid, rid } = this.state.next
    http.get(`${API.home}/sys/icc/communicate/${oid}/${rid}`).then((res) => {
      const { data, code, msg } = res.data
      if (code === 200) {
        if (data.answer_type === 1) {
          this.setState(
            {
zhanghaozhe committed
69
              showAnalyzing: true,
zhanghaozhe committed
70 71
            },
            () => {
zhanghaozhe committed
72
              setTimeout(() => {
zhanghaozhe committed
73 74
                this.setState({ showAnalyzing: false })
                this.props.addResult({ ...data })
zhanghaozhe committed
75
              }, Math.random() * 500 + 1000)
zhanghaozhe committed
76
            }
zhanghaozhe committed
77
          )
zhanghaozhe committed
78
        } else {
zhanghaozhe committed
79 80 81 82 83 84 85 86 87 88 89 90 91
          const message = {
            type: messageType.SYSTEM_MESSAGE,
            content: data.contents.find((item) => item.is_question),
          }
          const optionsData = data.contents.filter((item) => !item.is_question)
          this.props.addMessage(message)
          this.setState({
            options: {
              messageId: message.content.id,
              data: optionsData,
            },
            next: { rid: data.rid },
          })
zhanghaozhe committed
92
        }
zhanghaozhe committed
93 94 95 96
      } else {
        Toast.fail(msg)
      }
    })
zhanghaozhe committed
97 98
  }

zhanghaozhe committed
99 100
  consult = (e) => {
    e.preventDefault()
zhanghaozhe committed
101
    let target = e.target
zhanghaozhe committed
102 103 104 105 106 107 108
    http
      .post(`${API.home}/sys/icc/consult`, {
        rid: this.props.intelligentRecommend.result.rid,
      })
      .finally(() => {
        window.location.href = target.getAttribute("href")
      })
zhanghaozhe committed
109 110
  }

zhanghaozhe committed
111 112
  displayPrice = (price) => {
    let _price = price.toString()
zhanghaozhe committed
113
    let decimal = _price.split(".")
zhanghaozhe committed
114 115 116
    return parseInt(decimal[1]) === 0 ? decimal[0] : price
  }

zhanghaozhe committed
117
  goBack = () => {
zhanghaozhe committed
118 119
    const { state } = this.props.location
    if (browser.isWeixin && getParam("code") && getParam("state")) {
zhanghaozhe committed
120 121 122
      window.history.go(-2)
    }
    if (state.records && state.records.length > 1) {
zhanghaozhe committed
123
      window.history.go(-1)
zhanghaozhe committed
124
    } else if (state.from && state.from.pathname) {
zhanghaozhe committed
125
      window.location.replace(`${state.from.pathname}${state.from.search}`)
zhanghaozhe committed
126 127 128 129 130
    } else {
      window.location.href = window.location.origin
    }
  }

zhanghaozhe committed
131
  render() {
zhanghaozhe committed
132 133 134 135 136 137
    const { showAnalyzing, systemAvatar, options } = this.state
    const {
      user,
      intelligentRecommend: { result, processing },
      reselect,
    } = this.props
zhanghaozhe committed
138
    const recommends = result.contents
zhanghaozhe committed
139
    return (
zhanghaozhe committed
140
      <div id={"intelligent-recommend"}>
zhanghaozhe committed
141 142 143
        <div className="head">
          <div>
            <div className="go-back">
zhanghaozhe committed
144 145 146 147
              <i
                className="iconfont iconiconfront-68"
                onClick={this.goBack}
              ></i>
zhanghaozhe committed
148
            </div>
zhanghaozhe committed
149
            <div className={"title"}>七月在线智能选课</div>
zhanghaozhe committed
150
          </div>
zhanghaozhe committed
151 152 153 154 155 156 157 158 159 160 161 162 163 164 165
          <button
            onClick={() => {
              this.setState(
                {
                  next: { oid: 0, rid: 0 },
                  options: { messageId: 0, data: [] },
                },
                () => {
                  reselect()
                  this.getMessage()
                }
              )
            }}
          >
            重新选课
zhanghaozhe committed
166
          </button>
zhanghaozhe committed
167 168
        </div>
        <div className="dialog-box">
zhanghaozhe committed
169
          {!!processing.length &&
zhanghaozhe committed
170
            // eslint-disable-next-line array-callback-return
zhanghaozhe committed
171
            processing.map((item, index) => {
zhanghaozhe committed
172 173 174 175
              switch (item.type) {
                case messageType.SYSTEM_MESSAGE:
                  return (
                    <React.Fragment key={index}>
zhanghaozhe committed
176 177 178 179 180 181 182 183 184 185 186
                      <Message
                        text={item.content.describe}
                        identity={"system"}
                        avatar={systemAvatar}
                      />
                      {options.messageId === item.content.id && (
                        <Options
                          options={options.data}
                          handleSelect={this.handleSelect}
                        />
                      )}
zhanghaozhe committed
187 188 189
                    </React.Fragment>
                  )
                case messageType.USER_MESSAGE:
zhanghaozhe committed
190 191 192 193 194 195 196 197
                  return (
                    <Message
                      text={item.content}
                      identity={"user"}
                      avatar={user.data.avatar}
                      key={index + 2}
                    />
                  )
zhanghaozhe committed
198
              }
zhanghaozhe committed
199 200
            })}
          {showAnalyzing && <div className="analyzing">努力分析中...</div>}
zhanghaozhe committed
201 202
        </div>

zhanghaozhe committed
203 204
        {!isEmpty(recommends) && (
          <div className="result">
zhanghaozhe committed
205 206
            <div className="title">根据您目前的情况,推荐结果如下</div>
            <div className="obtained">
zhanghaozhe committed
207 208 209 210 211 212 213 214
              <div
                className={"subtitle"}
                dangerouslySetInnerHTML={{ __html: recommends.skill_title }}
              ></div>
              <div
                className={"skill"}
                dangerouslySetInnerHTML={{ __html: recommends.skill_desc }}
              ></div>
zhanghaozhe committed
215 216
            </div>
            <div className="obtained">
zhanghaozhe committed
217 218 219 220 221 222 223 224
              <div
                className={"subtitle"}
                dangerouslySetInnerHTML={{ __html: recommends.project_title }}
              ></div>
              <div
                className={"skill project"}
                dangerouslySetInnerHTML={{ __html: recommends.project_desc }}
              ></div>
zhanghaozhe committed
225 226 227 228 229
              {/*<ul>
                <li className={'skill project'}>·技能描述、技能描述</li>
                <li className={'skill project'}>·工作及项目描述、工作及项目描述、项目描述</li>
              </ul>*/}
            </div>
zhanghaozhe committed
230 231 232 233 234 235 236 237 238
            <div className={"salary-section"}>
              <div
                className={"subtitle"}
                dangerouslySetInnerHTML={{ __html: recommends.salary_title }}
              ></div>
              <div
                className={"salary"}
                dangerouslySetInnerHTML={{ __html: recommends.salary_desc }}
              ></div>
zhanghaozhe committed
239 240 241
            </div>
            <div className="recommends">
              <div>想获得以上技能,向您推荐:</div>
zhanghaozhe committed
242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259
              <ul className={"courses"}>
                {!!recommends.courses.length &&
                  recommends.courses.map((item) => {
                    return (
                      <li
                        className={"course"}
                        key={item.course_id}
                        onClick={(e) => {
                          if (e.target.nodeName.toLowerCase() !== "a") {
                            if (item.course_id) {
                              this.props.history.push(
                                `/detail?id=${item.course_id}`
                              )
                            } else {
                              this.props.history.push(
                                `/play?id=${item.v_course_id}`
                              )
                            }
zhanghaozhe committed
260
                          }
zhanghaozhe committed
261 262 263 264
                        }}
                      >
                        <div className="cover">
                          <img src={item.img_url} alt="" />
zhanghaozhe committed
265
                        </div>
zhanghaozhe committed
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 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317
                        <div className="info">
                          <div className={"title"}>{item.recmd_title}</div>
                          <div className={"des"}>{item.recmd_desc}</div>
                          <div className="bar">
                            {item.c_type === 1 && (
                              <React.Fragment key={item.course_id}>
                                <div className="prices">
                                  <span className={"price"}>
                                    {this.displayPrice(item.price_sale)}
                                  </span>
                                  <span className={"old-price"}>
                                    {this.displayPrice(item.price_original)}
                                  </span>
                                </div>
                                <Link
                                  className={"register"}
                                  to={`/detail?id=${item.course_id}`}
                                >
                                  {item.second_btn}
                                </Link>
                              </React.Fragment>
                            )}
                            {item.c_type === 2 && (
                              <React.Fragment key={item.course_id}>
                                <a
                                  href="http://q.url.cn/s/Vbkup6m?_type=wpa"
                                  className={"contact"}
                                  onClick={this.consult}
                                >
                                  {item.consult}
                                </a>
                                <Link
                                  className={"register"}
                                  to={`/detail?id=${item.course_id}`}
                                >
                                  {item.second_btn}
                                </Link>
                              </React.Fragment>
                            )}
                            {item.c_type === 0 && (
                              <Link
                                className={"study"}
                                to={`/play?id=${item.v_course_id}`}
                              >
                                {item.second_btn}
                              </Link>
                            )}
                          </div>
                        </div>
                      </li>
                    )
                  })}
zhanghaozhe committed
318 319
              </ul>
            </div>
zhanghaozhe committed
320
          </div>
zhanghaozhe committed
321
        )}
zhanghaozhe committed
322
      </div>
zhanghaozhe committed
323
    )
zhanghaozhe committed
324 325 326
  }
}

zhanghaozhe committed
327 328 329 330 331 332 333
function Message({ text, avatar, identity }) {
  return (
    <div className={`message clearfix ${identity}`}>
      <div className="avatar">
        <img src={avatar} alt="" />
      </div>
      <div className={`text`}>{text}</div>
zhanghaozhe committed
334
    </div>
zhanghaozhe committed
335
  )
zhanghaozhe committed
336 337
}

zhanghaozhe committed
338 339 340 341 342 343 344 345 346 347 348 349 350
function Options({ options, handleSelect }) {
  return (
    <ul className={"options"}>
      {!!options.length &&
        options.map((item) => {
          return (
            <li onClick={() => handleSelect(item)} key={item.id}>
              <button>{item.describe}</button>
            </li>
          )
        })}
    </ul>
  )
zhanghaozhe committed
351 352
}

zhanghaozhe committed
353
export default connect(
zhanghaozhe committed
354 355 356
  ({ user, intelligentRecommend }) => ({ user, intelligentRecommend }),
  { addMessage, addResult, reselect }
)(WithFullSize(IntelligentRecommend))