addShare.jsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
  1. import React,{Component} from 'react';
  2. import SpinContainer from "../../../SpinContainer";
  3. import {Button, Form, Icon, Input, message, Modal, Select, Upload} from "antd";
  4. import {beforeUploadFile,splitUrl} from "@/tools.js";
  5. import Editors from "@/richTextEditors";
  6. import $ from "jquery/src/ajax";
  7. const FormItem = Form.Item;
  8. //上传图片组件
  9. const PicturesWall = React.createClass({
  10. getInitialState() {
  11. return {
  12. previewVisible: false,
  13. previewImage: "",
  14. fileList: this.props.pictureUrl,
  15. type:''
  16. };
  17. },
  18. getDefaultProps() {
  19. return {
  20. changeClick: this.modifyChange
  21. };
  22. },
  23. handleCancel() {
  24. this.setState({ previewVisible: false });
  25. },
  26. handlePreview(file) {
  27. let type = '';
  28. if(file.type){
  29. let str = file.type;
  30. let index = str.indexOf("/");
  31. type =str.substring(0,index) === 'video' ? 1 : str.substring(0,index) === 'audio' ? 2 : 0;
  32. }else{
  33. // let str = file.url || file.thumbUrl;
  34. // let index = str.lastIndexOf(".");
  35. // type = str.substring(index+1);
  36. type = this.props.type;
  37. }
  38. this.setState({
  39. type,
  40. previewImage: file.url || file.thumbUrl,
  41. previewVisible: true
  42. });
  43. },
  44. handleChange(info) {
  45. let fileList = info.fileList;
  46. this.setState({ fileList });
  47. this.props.fileList(fileList);
  48. },
  49. componentWillReceiveProps(nextProps) {
  50. this.state.fileList = nextProps.pictureUrl;
  51. },
  52. render() {
  53. const { previewVisible, previewImage, fileList } = this.state;
  54. const uploadButton = (
  55. <div>
  56. <Icon type="plus" />
  57. <div className="ant-upload-text">点击上传</div>
  58. </div>
  59. );
  60. return (
  61. <div style={{ display: "inline-block" }}>
  62. <Upload
  63. accept={
  64. this.props.type === 0 ? "image/*" :
  65. this.props.type === 1 ?
  66. 'video/mp4,video/rmvb,video/mkv,video/avi' :
  67. this.props.type === 2 ?
  68. "audio/mp3" : '*'}
  69. beforeUpload={beforeUploadFile}
  70. action={globalConfig.context + "/api/admin/project/uploadFile"}
  71. data={{ sign: "purchase_picture" }}
  72. listType="picture-card"
  73. fileList={fileList}
  74. onPreview={this.handlePreview}
  75. onChange={this.handleChange}
  76. >
  77. {fileList && fileList.length >= 1 ? null : uploadButton}
  78. </Upload>
  79. <Modal
  80. maskClosable={false}
  81. visible={previewVisible}
  82. footer={null}
  83. onCancel={this.handleCancel}
  84. >
  85. {
  86. this.state.type=== 0 ?
  87. <img alt="" style={{ width: "100%" }} src={previewImage} /> :
  88. this.state.type=== 1 ?
  89. <video style={{width:'100%'}} controls="controls" autoPlay="" name="media">
  90. <source src={previewImage} type="video/mp4"/>
  91. </video>:
  92. this.state.type=== 2 ?
  93. <audio src={previewImage} controls="controls">Your browser does not support the audio element.</audio>: ''
  94. }
  95. </Modal>
  96. </div>
  97. );
  98. }
  99. });
  100. class Add extends Component{
  101. constructor(props) {
  102. super(props);
  103. this.state={
  104. loading: false,
  105. projectType: props.shareType || '',
  106. name:'',
  107. pictureImgUrl: '',
  108. shareImgUrl:'',
  109. shareId:'',
  110. }
  111. this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
  112. this.getShareOrgCodeUrl = this.getShareOrgCodeUrl.bind(this);
  113. this.onOk = this.onOk.bind(this);
  114. this.getWeChatShareDetals = this.getWeChatShareDetals.bind(this);
  115. }
  116. componentDidMount() {
  117. if(this.props.id || this.props.shareId){
  118. this.getWeChatShareDetals();
  119. }
  120. }
  121. getOrgCodeUrl(e) {
  122. this.setState({ pictureImgUrl: e });
  123. }
  124. getShareOrgCodeUrl(e) {
  125. this.setState({ shareImgUrl: e });
  126. }
  127. onOk(){
  128. if(!this.state.name){
  129. message.warning('请输入分享标题');
  130. return false;
  131. }
  132. if(isNaN(parseInt(this.state.projectType))){
  133. message.warning('请选择分享位置');
  134. return false;
  135. }
  136. if(this.state.pictureImgUrl.length === 0){
  137. message.warning('请上传朋友分享图');
  138. return false;
  139. }
  140. if(this.state.shareImgUrl.length === 0){
  141. message.warning('请上传朋友圈分享图');
  142. return false;
  143. }
  144. this.setState({
  145. loading: true
  146. });
  147. let url = this.state.shareId ? "/api/admin/weChatShare/update" : "/api/admin/weChatShare/add"
  148. $.ajax({
  149. method: "post",
  150. dataType: "json",
  151. crossDomain: false,
  152. url: globalConfig.context + url,
  153. data: {
  154. pid: this.props.id || undefined, //项目编号
  155. id: this.state.shareId || undefined,
  156. title: this.state.name || undefined,
  157. shareUrl: this.state.pictureImgUrl[0].response.data || undefined,
  158. momentsUrl: this.state.shareImgUrl[0].response.data || undefined,
  159. type: this.state.projectType,
  160. },
  161. success: function(data) {
  162. if (data.error && data.error.length) {
  163. message.warning(data.error[0].message);
  164. } else {
  165. message.success(this.state.shareId ? '修改成功' : '添加成功');
  166. this.props.onOk();
  167. }
  168. }.bind(this)
  169. }).always(
  170. function() {
  171. this.setState({
  172. loading: false
  173. });
  174. }.bind(this)
  175. );
  176. }
  177. getWeChatShareDetals() {
  178. this.setState({
  179. loading: true
  180. });
  181. let data = {};
  182. if(this.props.id){
  183. data.pid = this.props.id
  184. }else if(this.props.shareId){
  185. data.id = this.props.shareId
  186. }
  187. $.ajax({
  188. method: "get",
  189. dataType: "json",
  190. crossDomain: false,
  191. url: globalConfig.context + "/api/admin/weChatShare/details",
  192. data: data
  193. }).done((data1) => {
  194. if (data1.error.length !== 0) {
  195. message.warning(data1.error[0].message);
  196. } else {
  197. if(data1.data){
  198. this.setState({
  199. name: data1.data.title,
  200. projectType: data1.data.type,
  201. pictureImgUrl: data1.data.shareUrl ? splitUrl(data1.data.shareUrl, ',', globalConfig.avatarHost + '/upload') : [],
  202. shareImgUrl: data1.data.momentsUrl ? splitUrl(data1.data.momentsUrl, ',', globalConfig.avatarHost + '/upload') : [],
  203. shareId:data1.data.id,
  204. })
  205. }
  206. }
  207. }).always(function () {
  208. this.setState({
  209. loading: false
  210. });
  211. }.bind(this))
  212. }
  213. render() {
  214. return (
  215. <Modal
  216. className="customeDetails"
  217. title={this.state.shareId ? "修改分享" : "添加分享"}
  218. okText={"保存"}
  219. width="1050"
  220. visible={this.props.visible}
  221. onCancel={this.props.onCancel}
  222. footer={false}
  223. >
  224. <Form
  225. layout="horizontal"
  226. id="demand-form"
  227. >
  228. <SpinContainer spinning={this.state.loading}>
  229. <div className="clearfix">
  230. <FormItem
  231. className="half-item"
  232. labelCol={{ span: 8 }}
  233. wrapperCol={{ span: 12 }}
  234. label="转发标题"
  235. >
  236. <Input
  237. placeholder="请输入转发标题"
  238. value={this.state.name}
  239. onChange={(e) => {
  240. this.setState({ name: e.target.value });
  241. }}
  242. />
  243. </FormItem>
  244. {!this.props.shareType ? <FormItem
  245. className="half-item"
  246. labelCol={{ span: 8 }}
  247. wrapperCol={{ span: 12 }}
  248. label="分享位置"
  249. >
  250. <Select
  251. value={this.state.projectType}
  252. placeholder="请选择分享位置"
  253. onChange={e => {
  254. this.setState({
  255. projectType: e
  256. });
  257. }}
  258. >
  259. <Option value={1}>首页</Option>
  260. </Select>
  261. </FormItem> : null}
  262. <div className="clearfix">
  263. <FormItem
  264. className="half-item"
  265. labelCol={{ span: 8 }}
  266. wrapperCol={{ span: 12 }}
  267. label="朋友分享图"
  268. extra='图片长宽比是 5:4,建议尺寸660*528'
  269. >
  270. <PicturesWall
  271. type={0}
  272. fileList={this.getOrgCodeUrl}
  273. pictureUrl={this.state.pictureImgUrl}
  274. />
  275. </FormItem>
  276. </div>
  277. <div className="clearfix">
  278. <FormItem
  279. className="half-item"
  280. labelCol={{ span: 8 }}
  281. wrapperCol={{ span: 12 }}
  282. label="朋友圈分享图"
  283. extra='图片长宽比是 1:1,会自动收缩,尺寸大小影响不大'
  284. >
  285. <PicturesWall
  286. type={0}
  287. fileList={this.getShareOrgCodeUrl}
  288. pictureUrl={this.state.shareImgUrl}
  289. />
  290. </FormItem>
  291. </div>
  292. </div>
  293. <div style={{display:'flex',justifyContent: 'center'}}>
  294. <Button
  295. type="primary"
  296. onClick={()=>{
  297. this.onOk();
  298. }}>
  299. 保存
  300. </Button>
  301. </div>
  302. </SpinContainer>
  303. </Form>
  304. </Modal>
  305. )
  306. }
  307. }
  308. export default Add;