diff --git a/src/pages/exchangecode/product/add.js b/src/pages/exchangecode/product/add.js index 36a60b21..bd195b2b 100644 --- a/src/pages/exchangecode/product/add.js +++ b/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{
{ this.state.productpic ? - ( - { - this.state.productpic.map((item, index) => { - return ; - }) - } - ) : null + ( +
+
+ + { + this.state.productpic.map((item, index) => { + + + return (
+ + + +
) + + }) + } - } + +
+
+
+ + ) : null + + }
diff --git a/src/pages/exchangecode/product/add.less b/src/pages/exchangecode/product/add.less index 8f36a0b8..bcd13b7b 100644 --- a/src/pages/exchangecode/product/add.less +++ b/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; } \ No newline at end of file