|
@@ -8,6 +8,8 @@ import closeImg from '../../assets/close.png';
|
8
|
8
|
import classNames from 'classnames';
|
9
|
9
|
import 'swiper/css/swiper.min.css';
|
10
|
10
|
|
|
11
|
+const storageKey = 'showSwiperIndex';
|
|
12
|
+
|
11
|
13
|
class swiper extends React.Component {
|
12
|
14
|
constructor(props) {
|
13
|
15
|
super(props);
|
|
@@ -18,25 +20,30 @@ class swiper extends React.Component {
|
18
|
20
|
|
19
|
21
|
this.slider = null
|
20
|
22
|
}
|
21
|
|
- componentWillMount() {
|
22
|
|
- this.getbannerList({ pageNumber: 1, pageSize: 999, type: 'sample' })
|
23
|
|
- }
|
|
23
|
+
|
24
|
24
|
componentDidMount() {
|
25
|
|
- //swiper初始化
|
26
|
|
- this.swiper = new Swiper('.swiper-container', {
|
27
|
|
- slidesPerView: 1,
|
28
|
|
- loop: true,
|
29
|
|
- autoplay: true,
|
30
|
|
- touchRatio: 1.5,
|
31
|
|
- pagination: {
|
32
|
|
- el: '.swiper-pagination',
|
33
|
|
- bulletElement: 'li',
|
34
|
|
- clickable: true,
|
35
|
|
- bulletActiveClass: 'antd-pro-pages-swiper-style-active',
|
36
|
|
- },
|
37
|
|
- observer: true,
|
38
|
|
- observeParents: true,
|
39
|
|
- })
|
|
25
|
+
|
|
26
|
+ const bannerShow = window.localStorage.getItem(storageKey)
|
|
27
|
+
|
|
28
|
+ if (bannerShow) {
|
|
29
|
+ //swiper初始化
|
|
30
|
+ this.swiper = new Swiper('.swiper-container', {
|
|
31
|
+ slidesPerView: 1,
|
|
32
|
+ loop: true,
|
|
33
|
+ autoplay: true,
|
|
34
|
+ touchRatio: 1.5,
|
|
35
|
+ pagination: {
|
|
36
|
+ el: '.swiper-pagination',
|
|
37
|
+ bulletElement: 'li',
|
|
38
|
+ clickable: true,
|
|
39
|
+ bulletActiveClass: 'antd-pro-pages-swiper-style-active',
|
|
40
|
+ },
|
|
41
|
+ observer: true,
|
|
42
|
+ observeParents: true,
|
|
43
|
+ })
|
|
44
|
+ this.getbannerList({ pageNumber: 1, pageSize: 999, type: 'sample' })
|
|
45
|
+ }
|
|
46
|
+
|
40
|
47
|
}
|
41
|
48
|
|
42
|
49
|
|
|
@@ -63,12 +70,14 @@ class swiper extends React.Component {
|
63
|
70
|
aTag.setAttribute('target', '_blank')
|
64
|
71
|
document.body.appendChild(aTag)
|
65
|
72
|
aTag.click();
|
66
|
|
-
|
|
73
|
+
|
67
|
74
|
}
|
|
75
|
+
|
68
|
76
|
closeSwiper() {
|
69
|
77
|
this.setState({
|
70
|
78
|
visible: false
|
71
|
79
|
})
|
|
80
|
+ window.localStorage.removeItem(storageKey)
|
72
|
81
|
}
|
73
|
82
|
render() {
|
74
|
83
|
const swpierData = [
|
|
@@ -79,9 +88,10 @@ class swiper extends React.Component {
|
79
|
88
|
{ img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584592745048&di=e30a13762d0823ac5c1e3945a35ed55d&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201711%2F09%2F20171109195545_M2Bk3.jpeg', title: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊' },
|
80
|
89
|
]
|
81
|
90
|
const { visible, bannerList } = this.state
|
|
91
|
+ const showSwiper = window.localStorage.getItem(storageKey)
|
82
|
92
|
return (
|
83
|
93
|
<>
|
84
|
|
- {bannerList.length > 0 && visible && <div className={styles.mask}>
|
|
94
|
+ {bannerList.length > 0 && visible && showSwiper && <div className={styles.mask}>
|
85
|
95
|
<div className={styles.content}>
|
86
|
96
|
<img src={closeImg} alt="" className={styles.close} onClick={() => this.closeSwiper()} />
|
87
|
97
|
<div className={classNames(['swiper-container', styles.carousel])} >
|