feat: 装修上传图片增加loading效果

xinkeaboard-seller/src/components/SldDiyMoreImgModal/SldDiyMoreImgModal.js

@@ -44,8 +44,8 @@ export default class SldDiyMoreImgModal extends Component {
 			link_type: '',//当前链接的操作类型
 			img_width: 150,//图片的宽度
 			img_height: 150,//图片的高度
-      admin_show_width:150,//这里显示的图片的宽度
-      admin_show_height:150,//这里显示的图片的高度
+			admin_show_width:150,//这里显示的图片的宽度
+			admin_show_height:150,//这里显示的图片的高度
 			sele_index: 0,//当前选中的index
 			selectedRowKeys: [],
 			cur_data: [{
@@ -111,20 +111,23 @@ export default class SldDiyMoreImgModal extends Component {
 				render: (text, record) => {
 					let content = '';
 					if (record.type == 'img') {
+						const limit = this.props.uploadLimit!= undefined ? this.props.uploadLimit : uploadLimit
 						content = <div className={styles.modal_img}>
 							<span
 								className={styles.modal_tip_color}>{sldComLanguage('此处对应上传上方选中标签项内容，要求宽度为')}{this.state.img_width}{sldComLanguage('像素、高度')}{this.state.img_height == 0 ? `${sldComLanguage('不限制')}` : this.state.img_height + `${sldComLanguage('像素的图片；支持格式gif，jpg，png。')}`}</span>
 							<Upload
 								withCredentials={true}
-                beforeUpload={(file, fileList)=>sldBeforeUpload(file, fileList,this.props.uploadLimit!=undefined?this.props.uploadLimit:uploadLimit)}
-                accept={'.gif, .jpeg, .png,.jpg,'}
+                				beforeUpload={
+									(file, fileList)=> sldBeforeUpload(file, fileList, limit)
+								}
+                				accept={'.gif, .jpeg, .png,.jpg,'}
 								showUploadList={false}
 								name={'file'}
 								action={`${apiUrl}v3/oss/common/upload?source=sellerDeco`}
 								onChange={(info) => this.setImg(info)}
-                headers={{
-                  Authorization: 'Bearer ' + getLocalStorageStingVal('sld_token')
-                }}
+								headers={{
+									Authorization: 'Bearer ' + getLocalStorageStingVal('sld_token')
+								}}
 							>
 								<Button>
 									<Icon type="upload"/> {sldComLanguage('上传图片')}
@@ -134,15 +137,15 @@ export default class SldDiyMoreImgModal extends Component {
 					} else if (record.type == 'link_type') {
 					  let cur_all_link = diy_link_type();
 					  if(props.client != undefined && props.client == 'mobile'){
-              cur_all_link = m_diy_link_type();
-            }
+						cur_all_link = m_diy_link_type();
+					  }
 						content = <div>
 							<Select
 								value={record.value}
 								style={{ width: 120 }}
 								placeholder={`${sldComLanguage('请选择链接类型')}`}
 								onSelect={this.sldHandSeleChange}
-                getPopupContainer={triggerNode => triggerNode.parentNode}
+                				getPopupContainer={triggerNode => triggerNode.parentNode}
 							>
 								{cur_all_link.map((item, index) =>
 									<Option key={index} value={item.key}>{item.name}</Option>,
@@ -160,7 +163,7 @@ export default class SldDiyMoreImgModal extends Component {
 								}],
 							})(
 								<Input
-                  maxLength={250}
+                  					maxLength={250}
 									onChange={e => this.handleFieldChange(e, 'url', 'link_value')}
 									placeholder={`${sldComLanguage('请输入链接地址')}`}/>,
 							)}
@@ -176,7 +179,7 @@ export default class SldDiyMoreImgModal extends Component {
 								}],
 							})(
 								<Input
-                  maxLength={250}
+                  					maxLength={250}
 									onChange={e => this.handleFieldChange(e, record.type, 'link_value')}
 									placeholder={`${sldComLanguage('请输入关键字')}`}/>,
 							)}
@@ -210,6 +213,7 @@ export default class SldDiyMoreImgModal extends Component {
 					return content;
 				},
 			}],
+			loadingIndexes: {} // 记录图片上传状态
 		};
 	}
 
@@ -308,9 +312,11 @@ export default class SldDiyMoreImgModal extends Component {
 
 	//上传图片
 	setImg = (info) => {
-		let { sele_index, data } = this.state;
+		let { sele_index, data, loadingIndexes } = this.state;
 		let img_data = info.file.response;
-		if (info.file.status != undefined && info.file.status != 'error') {
+		if (info.file.status === 'uploading') {
+			this.setState({loadingIndexes: { ...loadingIndexes, [sele_index]: true }})
+		} else if (info.file.status != undefined && info.file.status != 'error') {
 			if (img_data != undefined && img_data.state != undefined && img_data.state == 200) {
 				data[sele_index].map(item => {
 					if (item.key == 'img') {
@@ -321,7 +327,9 @@ export default class SldDiyMoreImgModal extends Component {
 					}
 				});
 			}
+			this.setState( { loadingIndexes: { ...loadingIndexes, [sele_index]: false } })
 		}
+		
 		this.setState({ data });
 	};
 
@@ -517,7 +525,7 @@ export default class SldDiyMoreImgModal extends Component {
 	};
 
 	render() {
-		const { data, columns, sele_index, link_type,admin_show_width,admin_show_height } = this.state;
+		const { data, columns, sele_index, link_type,admin_show_width,admin_show_height, loadingIndexes } = this.state;
 		const { title, modalVisible, submiting, zIndex, show_foot, modal_tip, form: { getFieldDecorator }, content } = this.props;
 		return <Modal
       maskClosable={false}
@@ -564,14 +572,27 @@ export default class SldDiyMoreImgModal extends Component {
 					{data.map((item, index) => {
 						return item.map((val, key) => {
 							if (val.key == 'img') {
-								return <div onClick={() => this.seleCurData(index)} key={index}
-											className={`${styles.adv_more_img_wrap} ${sele_index == index ? styles.seleImg : null}`}
-											style={{ width: admin_show_width, height: admin_show_height ? admin_show_height : 100 }}>
-									{val.value == ''
-										? null
-										: <img className={styles.adv_01_img} src={val.value}/>}
-									<span onClick={() => this.del_img(index)} className={styles.del_img}>{sldComLanguage('删除')}</span>
-								</div>;
+								const isLoading = loadingIndexes[index];
+								return (
+									<div 
+								      onClick={() => this.seleCurData(index)} 
+								      key={index}
+									  className={`${styles.adv_more_img_wrap} ${sele_index == index ? styles.seleImg : null}`}
+									  style={{ width: admin_show_width, height: admin_show_height ? admin_show_height : 100 }}
+								    >
+										{isLoading ? (
+											<div className={styles.uploadLoading}>
+												<span className={styles.spinner} />
+											</div>) 
+											: (
+												<img
+													className={styles.adv_01_img}
+													src={val.value}
+												/>
+											)}
+										<span onClick={() => this.del_img(index)} className={styles.del_img}>{sldComLanguage('删除')}</span>
+									</div>
+								)
 							}
 						});
 					})}

xinkeaboard-seller/src/defaultSettings.js

@@ -1,18 +1,18 @@
 module.exports = {
-	"navTheme": "dark",
-	"primaryColor": "#00985E",
-  "primaryLightColor": "#98FB98",
-  "primary4LightColor": "#F0FFF0",
-  "primaryCommonColor": "#F5F5F5",
-  "primaryRgbaColor": "0,238,118",
-  "primaryLightRgbaColor": "0,250,154",
-	"layout": "sidemenu",
-	"contentWidth": "Fluid",
-	"fixedHeader": true,
-	"autoHideHeader": false,
-	"fixSiderbar": true,
-	"collapse": true,
-	"menu": {
-		disableLocal:true
-	}
+  navTheme: "dark",
+  primaryColor: "#00985E",
+  primaryLightColor: "#98FB98",
+  primary4LightColor: "#F0FFF0",
+  primaryCommonColor: "#F5F5F5",
+  primaryRgbaColor: "0,238,118",
+  primaryLightRgbaColor: "0,250,154",
+  layout: "sidemenu",
+  contentWidth: "Fluid",
+  fixedHeader: true,
+  autoHideHeader: false,
+  fixSiderbar: true,
+  collapse: true,
+  menu: {
+    disableLocal: true,
+  },
 };

xinkeaboard-seller/src/pages/store/pc_diy/pcdecorate.less

@@ -2296,3 +2296,30 @@ a {
   display: flex;
   align-items: flex-end;
 }
+.uploadLoading {
+  position: absolute;
+  top: 0; 
+  left: 0; 
+  right: 0; 
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid @primary-color; // 主题色，例如antd默认蓝
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+