商品编辑

src/pages/exchangecode/product/add.js

@@ -4,13 +4,16 @@ import "./add.less"
 import Ipt from "../../../components/input/main"
 import Form from "../../../components/form/main"
 import FormItem from "../../../components/form-item/main"
-import {Swiper,Select,Button,ImageUpload ,onUpload,Sweetalert,RadioButton,RadioGroup,Notify} from "zent"
+import {Select,Button,ImageUpload ,onUpload,Sweetalert,RadioButton,RadioGroup,Notify} from "zent"
+import Swiper from 'swiper/dist/js/swiper.js'
+import 'swiper/dist/css/swiper.min.css'
 import Bus from "../../../assets/eventBus.js"
 import {getProductInfoSelect,handelResponse,uploadImg} from "../../../assets/api.js"
 import _ from "lodash";
 
 
 export default class adduserinfo extends React.Component{
+	mySwiper = null;
   constructor(props){
     super(props)
     this.state={
@@ -37,7 +40,26 @@ export default class adduserinfo extends React.Component{
 	  
 	}
   }
+	componentDidMount() {
 		
+	     this.mySwiper =  new Swiper('.swiper-container', {
+	                   slidesPerView: 1,
+	                   centeredSlides: true,
+					   loop : true,
+					   autoplay : 3000,
+					   observer: true, // 修改swiper自己或子元素时，自动初始化swiper
+					   observeParents: false, // 修改swiper的父元素时，自动初始化swiper
+					    pagination: '.swiper-pagination',
+						watchSlidesVisibility: true,
+	                   virtual: {
+	                       slides:this.state.productpic,
+	                   }
+	               })
+	    }
+		componentWillReceiveProps() {
+			console.log(1111);
+			// this.mySwiper.update();
+		}
    componentWillMount(e){
 
 	   //获取商品信息
@@ -256,8 +278,8 @@ export default class adduserinfo extends React.Component{
 		let arr =_.map(files,(o)=>{
 			return o.name
 		})
-		// console.log("保留的数据",arr)
-		// console.log( this.state.productpic)
+		console.log("保留的数据",arr)
+	
 		if(arr.length > this.state.productpic.length)
 		{
 			   //新增
@@ -305,9 +327,11 @@ export default class adduserinfo extends React.Component{
 				let temp = this.state.productpic[i]
 				if(arr.indexOf(temp.name) > -1)
 				{
+					
 					temp_arr.push(temp)
 				}
 			}
+			console.log("移除后数据",temp_arr)
 			this.setState({productpic:temp_arr})
 		}
 
@@ -323,6 +347,12 @@ export default class adduserinfo extends React.Component{
 			}
 			this.setState({productpic:temp_arr})
 		}
+		console.log(this.mySwiper)
+			console.log( this.state.productpic)
+		this.mySwiper.update();
+		this.mySwiper.startAutoplay();
+		this.mySwiper.reLoop();
+		
 	};
 	 onUploadError = (type, data) => {
 	    if (type === 'overMaxAmount') {
@@ -495,21 +525,31 @@ export default class adduserinfo extends React.Component{
 		 <div className="mobile_top">
 		 {
 			 this.state.productpic ? 
-		 ( <Swiper
-		           className="swiper-mobile-simple"
-				   autoplay
-				   autoplayInterval={3000}
-		           dotsColor="#31A896"
-		           dotsSize="small"
-		         >
-		           {
-		             this.state.productpic.map((item, index) => {
-		               return <img src={item.url} />;
-		             })
-		           }
-		         </Swiper> ) : null
+		 ( 
+			 <div className="swiper-container">
+			    <div className="swiper-wrapper">
 				
-				 }
+				{
+					this.state.productpic.map((item, index) => {
+					
+					
+				return	(<div className="swiper-slide" >
+					
+					   <img src={item.url}   />
+					
+					</div>)
+					
+					})
+				}
+				 
+		 
+				</div>
+				 <div className="swiper-pagination"></div>
+			</div>
+		 
+		 ) : null
+				 
+			}
 		 </div>
 		<div className="mobile_center">
 		</div>

src/pages/exchangecode/product/add.less

@@ -44,6 +44,19 @@
 	// background-image: url;
 	
 }
+.swiper-container{
+	width: 100%;
+	height: 100%;
+}
+
+.swiper-slide{
+	img{
+		 width: 100% !important;
+		 height: 100% !important;
+	}
+}
+
+
 .swiper-mobile-simple{
 	height: 100% !important;
 }