fix: 发布保存装修按钮增加loading效果

xinkeaboard-seller/src/pages/store/pc_diy/edit_diy_page.js

@@ -3,7 +3,7 @@
 * */
 import { connect } from 'dva/index';
 import React, { Component, Fragment } from 'react';
-import { Form } from 'antd';
+import { Form, Button } from 'antd';
 import {
   failTip,
   sucTip,
@@ -177,6 +177,8 @@ export default class Edit_diy_page extends Component {
         height: 0,
       }],//modal框的数据
       curSetFloorStyleItem:{},//当前设置楼层样式item数据
+      releaseBtnLoading: false,
+      saveBtnLoading: false,
     };
   }
 
@@ -315,6 +317,12 @@ export default class Edit_diy_page extends Component {
 
   //保存装修数据  publish: 是否发布 true为发布 false为仅保存，不发布
   save_diy_page_data = (publish) => {
+    if (!publish) {
+      this.setState({ saveBtnLoading: true})
+    } else {
+      this.setState({releaseBtnLoading: true})
+    } 
+
     const { data, curData, main_swiper_data,query } = this.state;
     //轮播图必须设置
     let swiper_data = {};
@@ -351,6 +359,8 @@ export default class Edit_diy_page extends Component {
         } else {
           failTip(res.msg);
         }
+        this.setState({releaseBtnLoading: false, saveBtnLoading: false})
+
       },
     });
   };
@@ -643,7 +653,7 @@ export default class Edit_diy_page extends Component {
   };
 
   render() {
-    const { data, main_swiper_data, cur_top_code, selTplModalVisible, selTplWidth, selTplTitle,cur_tpl_type,cur_tpl_id,saveInsTplTitle,saveInsTplSubmiting,saveInsTplModalVisible,operateData } = this.state;
+    const { saveBtnLoading, releaseBtnLoading, data, main_swiper_data, cur_top_code, selTplModalVisible, selTplWidth, selTplTitle,cur_tpl_type,cur_tpl_id,saveInsTplTitle,saveInsTplSubmiting,saveInsTplModalVisible,operateData } = this.state;
     let floorData = cur_top_code ? this.topData.filter(item => item.top_code == cur_top_code)[0].children : [];
     return (
       <div ref={(el) => {
@@ -873,8 +883,9 @@ export default class Edit_diy_page extends Component {
           </div>
           <div className={`${global.flex_row_end_center}  ${diy.right}`}>
             <span className={`${diy.opt}`} onClick={() => this.addTplData()}>{sldComLanguage('添加楼层')}</span>
-            <span className={`${diy.opt}`} onClick={() => this.save_diy_page_data(false)}>{sldComLanguage('保存')}</span>
-            <span className={`${diy.opt} ${diy.publish}`} onClick={() => this.save_diy_page_data(true)}>{sldComLanguage('发布')}</span>
+            <Button className={`${diy.opt}`} style={{ backgroundColor: 'transparent' }} loading={ saveBtnLoading } onClick={() => this.save_diy_page_data(false)}>{sldComLanguage('保存')}</Button>
+            <Button className={`${diy.opt} ${diy.publish}`} loading={ releaseBtnLoading } onClick={() => this.save_diy_page_data(true)}>{sldComLanguage('发布')}</Button>
+            {/* <span className={`${diy.opt} ${diy.publish}`} onClick={() => this.save_diy_page_data(true)}>{sldComLanguage('发布')}</span> */}
           </div>
         </div>
         {/*新增/编辑对话框-start*/}