index.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. import React, { Component } from 'react';
  2. import './index.less';
  3. import { Popover } from 'antd';
  4. import { Carousel } from 'antd-mobile';
  5. import Assets from '@src/components/Assets';
  6. import { formatDate } from '@src/services/Tools';
  7. import Button from '../Button';
  8. export class CommentFalls extends Component {
  9. createLayout() {
  10. const msnry = new Masonry('.comment-falls', {
  11. itemSelector: '.grid-item',
  12. });
  13. msnry.layout();
  14. }
  15. render() {
  16. const { list = [] } = this.props;
  17. return (
  18. <div className="comment-falls">
  19. {list.map(row => {
  20. return (
  21. <div className="grid-item">
  22. <div className="item">
  23. <div className="item-header">
  24. <Assets src={row.user ? row.user.avatar : row.avatar} />
  25. <div className="name">{row.user ? row.user.nickname : row.nickname}</div>
  26. <div className="date">{formatDate(row.createTime, 'yyyy年mm月dd日')}</div>
  27. </div>
  28. <div className="item-body">{row.content}</div>
  29. </div>
  30. </div>
  31. );
  32. })}
  33. </div>
  34. );
  35. }
  36. }
  37. export class AnswerCarousel extends Component {
  38. constructor(props) {
  39. super(props);
  40. this.state = { index: 1 };
  41. }
  42. onNext() {
  43. const index = this.state.index + 1;
  44. const { list = [] } = this.props;
  45. if (index >= list.length - 1) return;
  46. this.setState({ index });
  47. }
  48. onPrev() {
  49. const index = this.state.index - 1;
  50. if (index < 1) return;
  51. this.setState({ index });
  52. }
  53. render() {
  54. const { onFaq } = this.props;
  55. const { index } = this.state;
  56. const { list = [], hideBtn = false } = this.props;
  57. return (
  58. <div className="other-answer-carousel">
  59. <div className="body">
  60. {list.length > 0 && (
  61. <Carousel selectedIndex={index} cellSpacing={40} dots={false} slideWidth={'350px'}>
  62. {list.map(item => {
  63. return (
  64. <div className="item">
  65. <div className="item-block">
  66. <Assets name="question" />
  67. {item.content}
  68. </div>
  69. <div className="item-block">
  70. <Assets name="answer" />
  71. {item.answer}
  72. </div>
  73. </div>
  74. );
  75. })}
  76. </Carousel>
  77. )}
  78. <div className="fixed" />
  79. <Assets name="footer_next_highlight_1" className="next" onClick={() => this.onNext()} />
  80. <Assets name="footer_previous_highlight_1" className="prev" onClick={() => this.onPrev()} />
  81. </div>
  82. {!hideBtn && (
  83. <Button size="lager" radius onClick={() => onFaq()}>
  84. <Assets name="kf" className="m-r-5" />立即咨询
  85. </Button>
  86. )
  87. }
  88. </div>
  89. );
  90. }
  91. }
  92. export class Consultation extends Component {
  93. render() {
  94. const { data = {} } = this.props;
  95. return (
  96. <div className="other-consultation">
  97. <div className="list">
  98. <div className="item">
  99. <Assets name="call" />
  100. </div>
  101. <div className="item">
  102. <Assets name="mail" />
  103. </div>
  104. <div className="item">
  105. <Assets name="wechat_1" />
  106. </div>
  107. </div>
  108. <div className="line" />
  109. <div className="list">
  110. <div className="item">
  111. <div className="t-1 t-s-16 m-b-10">电话咨询</div>
  112. <div className="t-1 t-s-16 t-w-b">{data.phone}</div>
  113. </div>
  114. <div className="item">
  115. <div className="t-1 t-s-16 m-b-10">邮件咨询</div>
  116. <div className="t-1 t-s-16 t-w-b">{data.email}</div>
  117. </div>
  118. <div className="item">
  119. <div className="t-1 t-s-16 m-b-10">微信咨询</div>
  120. <div className="t-1 t-s-16 t-w-b">
  121. <Popover content={<Assets name="qrcode" />}>
  122. <span>
  123. <Assets src={data.wechatImage} />
  124. </span>
  125. </Popover>
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. );
  131. }
  132. }
  133. export class Contact extends Component {
  134. render() {
  135. const { data = {} } = this.props;
  136. return (
  137. <div className="other-contact">
  138. <div className="body">
  139. <div className="step-list">
  140. <div className="step">
  141. <div className="title">工作机会</div>
  142. <Assets name="logo2" />
  143. </div>
  144. <div className="step" style={{ paddingLeft: 80 }}>
  145. <div className="title">联系我们</div>
  146. <div className="desc">{data.phone}</div>
  147. <div className="desc">{data.email}</div>
  148. <div className="desc">{data.wechat}</div>
  149. </div>
  150. <div className="step" style={{ paddingLeft: 140 }}>
  151. <div className="title">关注我们</div>
  152. <div className="qrcode">
  153. <Assets src={data.wechatImage} />
  154. </div>
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159. );
  160. }
  161. }