videoDetails.jsx 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. import React from 'react';
  2. import $ from 'jquery/src/ajax';
  3. import {
  4. Modal,
  5. message,
  6. Spin,
  7. Upload,
  8. Button,
  9. Form,
  10. } from 'antd';
  11. import {getVideoStatus,splitUrl,getVideoType} from '@/tools';
  12. const NewDetail = Form.create()(React.createClass({
  13. getInitialState() {
  14. return {
  15. visible: false,
  16. loading: false,
  17. textFileList: [],
  18. videoFileList: [],
  19. previewVisibleImg:false,
  20. pictureUrl: [],
  21. videoUrl:[]
  22. };
  23. },
  24. loadData(id) {
  25. this.setState({
  26. loading: true
  27. });
  28. $.ajax({
  29. method: "get",
  30. dataType: "json",
  31. crossDomain: false,
  32. url: globalConfig.context + '/api/admin/video/getVideoById' ,
  33. data: {
  34. id: id
  35. },
  36. success: function (data) {
  37. let thisData = data.data;
  38. if (!thisData) {
  39. if (data.error && data.error.length) {
  40. message.warning(data.error[0].message);
  41. };
  42. thisData = {};
  43. };
  44. this.setState({
  45. id:thisData.id,
  46. data: thisData,
  47. videoUrl: thisData.url ? splitUrl(thisData.url, ',', 'http://118.190.205.7:8000' ) : [],
  48. pictureUrl: thisData.coverUrl ? splitUrl(thisData.coverUrl, ',', globalConfig.avatarHost + '/upload') : []
  49. });
  50. }.bind(this),
  51. }).always(function () {
  52. this.setState({
  53. loading: false
  54. });
  55. }.bind(this));
  56. },
  57. cancelFun(){
  58. this.props.closeDesc();
  59. },
  60. //撤销发布
  61. revokeFun(){
  62. this.setState({
  63. loading:true
  64. })
  65. $.ajax({
  66. method: "POST",
  67. dataType: "json",
  68. crossDomain: false,
  69. url: globalConfig.context + '/api/admin/video/updateVideo',
  70. data: {
  71. id: this.state.id,
  72. status:2,
  73. }
  74. }).done(function (data) {
  75. if (!data.error.length) {
  76. message.success('撤销成功!');
  77. this.setState({
  78. loading: false,
  79. });
  80. } else {
  81. message.warning(data.error[0].message);
  82. };
  83. this.props.handOk();
  84. }.bind(this));
  85. },
  86. componentWillMount() {
  87. if (this.props.data.id) {
  88. this.loadData(this.props.data.id);
  89. } else {
  90. this.state.data = {};
  91. };
  92. },
  93. componentWillReceiveProps(nextProps) {
  94. if (!this.props.visible && nextProps.visible) {
  95. this.state.textFileList = [];
  96. this.state.videoFileList = [];
  97. if (nextProps.data.id) {
  98. this.loadData(nextProps.data.id);
  99. } else {
  100. this.state.data = {};
  101. this.state.pictureUrl = [];
  102. };
  103. this.props.form.resetFields();
  104. };
  105. },
  106. render() {
  107. const theData = this.state.data || {};
  108. const FormItem = Form.Item
  109. const formItemLayout = {
  110. labelCol: { span: 6 },
  111. wrapperCol: { span: 12 },
  112. };
  113. return (
  114. <div className='login'>
  115. <Form layout="horizontal" id="demand-form">
  116. <Spin spinning={this.state.loading}>
  117. <div className="clearfix">
  118. <FormItem className="half-item" {...formItemLayout} label="视频名称">
  119. <span>{theData.name}</span>
  120. </FormItem>
  121. <FormItem className="half-item" {...formItemLayout} label="视频类型">
  122. <span>{getVideoType(theData.type)}</span>
  123. </FormItem>
  124. <FormItem className="half-item" {...formItemLayout} label="视频文件">
  125. <span>{theData.url?(theData.url).split('/').pop():''}</span>
  126. {/* <div className="clearfix">
  127. <Upload className="demandDetailShow-upload"
  128. listType="picture-card"
  129. fileList={this.state.videoUrl}
  130. onPreview={(file) => {
  131. this.setState({
  132. previewImage: file.url || file.thumbUrl,
  133. previewVisible: false,
  134. });
  135. }} >
  136. </Upload>
  137. <Modal maskClosable={false} footer={null}
  138. visible={this.state.previewVisible}
  139. onCancel={() => { this.setState({ previewVisible: false }) }}>
  140. <video alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} controls></video>
  141. </Modal>
  142. </div> */}
  143. </FormItem>
  144. <FormItem className="half-item" {...formItemLayout} label="视频封面">
  145. <div className="clearfix">
  146. <Upload className="demandDetailShow-upload"
  147. listType="picture-card"
  148. fileList={this.state.pictureUrl}
  149. onPreview={(file) => {
  150. this.setState({
  151. previewImage: file.url || file.thumbUrl,
  152. previewVisibleImg: true,
  153. });
  154. }} >
  155. </Upload>
  156. <Modal maskClosable={false} footer={null}
  157. visible={this.state.previewVisibleImg}
  158. onCancel={() => { this.setState({ previewVisibleImg: false }) }}>
  159. <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
  160. </Modal>
  161. </div>
  162. </FormItem>
  163. </div>
  164. <div className="clearfix breakWord">
  165. <FormItem labelCol={{ span: 3 }} wrapperCol={{ span: 18 }} label="视频简介">
  166. <span>{theData.summary}</span>
  167. </FormItem>
  168. </div>
  169. <div className="clearfix">
  170. <FormItem className="half-item" {...formItemLayout} label="发布人">
  171. <span>{theData.owner}</span>
  172. </FormItem>
  173. <FormItem className="half-item" {...formItemLayout} label="发布状态">
  174. <span>{getVideoStatus(theData.status)}</span>
  175. </FormItem>
  176. </div>
  177. <div className="clearfix">
  178. {theData.status=='1'&&<FormItem wrapperCol={{ span: 12, offset: 3 }}>
  179. <Button type="danger" style={{marginRight:20}} onClick={(e)=>{this.revokeFun()}}>
  180. 撤销发布
  181. </Button>
  182. <Button className="set-submit" type="ghost" onClick={this.cancelFun}>
  183. 取消
  184. </Button>
  185. </FormItem>}
  186. </div>
  187. </Spin>
  188. </Form>
  189. </div>
  190. )
  191. }
  192. }));
  193. export default NewDetail;