HuaJingwen 6 years ago
parent
commit
d59b004909
5 changed files with 96 additions and 41 deletions
  1. 16 13
      dist/index.js
  2. 15 0
      dist/swiper-3.4.2.min.css
  3. BIN
      img/getIt.png
  4. 52 25
      index.css
  5. 13 3
      index.html

+ 16 - 13
dist/index.js

224
       })
224
       })
225
       .then(function (response) {
225
       .then(function (response) {
226
         var res = response.data, data = null, html = '', imgList = [], swiperStr = '', pointStr = '', len = 0;
226
         var res = response.data, data = null, html = '', imgList = [], swiperStr = '', pointStr = '', len = 0;
227
-        var swiper = document.querySelector('.swiper-wrapper .swiper-item'),
227
+        var swiper = document.querySelector('.swiper-container .swiper-wrapper'),
228
               point = document.querySelector('.swiper-wrapper .swiper-point'),
228
               point = document.querySelector('.swiper-wrapper .swiper-point'),
229
               detailsWrapper = document.querySelector('.details-wrapper'),
229
               detailsWrapper = document.querySelector('.details-wrapper'),
230
               copy_2 = document.getElementById("copy_2"),
230
               copy_2 = document.getElementById("copy_2"),
231
-              copy_1 = document.getElementById("copy_1")
231
+              copy_1 = document.getElementById("copy_1"),
232
+              toast = document.getElementById("toast")
232
               ;
233
               ;
233
         console.log(swiper);
234
         console.log(swiper);
234
         if (res.errno == 0) {
235
         if (res.errno == 0) {
237
             len = imgList.length;
238
             len = imgList.length;
238
             if (len > 0) {
239
             if (len > 0) {
239
                 for (var i = 0; i < len; i++) {
240
                 for (var i = 0; i < len; i++) {
240
-                    swiperStr += '<li><a href="javascript: ;"><img src="'+ imgList[i] +'"></a></li>';
241
-                    if (i === 0) {
242
-                        pointStr += '<li  class="now"></li>';
243
-                    }else{
244
-                        pointStr += '<li></li>';
245
-                    }
241
+                    swiperStr += '<div class="swiper-slide"><img src="'+ imgList[i] +'"></div>';
246
                 }
242
                 }
247
-                 swiperStr += '<li><a href="javascript: ;"><img src="'+ imgList[0] +'"></a></li>';
248
             }
243
             }
249
             if (is_coupon == 1) {
244
             if (is_coupon == 1) {
250
                 html = '<h5 class="price"><span>券后 ¥</span><em>'+ data.discount_price +'</em><span class="icon icon-price">券&nbsp;&nbsp; '+ data.coupon_price
245
                 html = '<h5 class="price"><span>券后 ¥</span><em>'+ data.discount_price +'</em><span class="icon icon-price">券&nbsp;&nbsp; '+ data.coupon_price
256
 
251
 
257
             detailsWrapper.innerHTML = html;
252
             detailsWrapper.innerHTML = html;
258
             swiper.innerHTML = swiperStr;
253
             swiper.innerHTML = swiperStr;
259
-            point.innerHTML = pointStr;
260
-            startSwiper(len);
254
+
255
+            var mySwiper = new Swiper ('.swiper-container', {
256
+                autoplay: 3000,
257
+               loop: true,
258
+               pagination: '.swiper-pagination',
259
+             })
261
         }
260
         }
262
       })
261
       })
263
       .catch(function (error) {
262
       .catch(function (error) {
277
                 console.log(copy_1);
276
                 console.log(copy_1);
278
                 copy_1.value = data;
277
                 copy_1.value = data;
279
                 btn.addEventListener('click', function () {
278
                 btn.addEventListener('click', function () {
280
-                  console.log('test');
281
-                      toCopy();
279
+                    // console.log('test');
280
+                    toCopy();
281
+                    toast.classList.add('show');
282
+                    setTimeout(function () {
283
+                        toast.classList.remove('show').add('hide');
284
+                    }, 2000)
282
                 }, false)
285
                 }, false)
283
             }
286
             }
284
         })
287
         })

File diff suppressed because it is too large
+ 15 - 0
dist/swiper-3.4.2.min.css


BIN
img/getIt.png


+ 52 - 25
index.css

105
 .download-wrapper .content,
105
 .download-wrapper .content,
106
 .download-wrapper button{
106
 .download-wrapper button{
107
 } */
107
 } */
108
-.swiper-wrapper{
108
+
109
+.swiper-container{
109
     width: 7.5rem;
110
     width: 7.5rem;
110
     height: 7.5rem;
111
     height: 7.5rem;
111
     /*background-color: #f5f5f5;*/
112
     /*background-color: #f5f5f5;*/
113
     overflow: hidden;
114
     overflow: hidden;
114
     position: relative;
115
     position: relative;
115
 }
116
 }
116
-.swiper-wrapper .swiper-item{
117
-    width: 1000%;
118
-    /*-webkit-transform: translateX(-10%);*/
119
-    /*transform: translateX(-10%);*/
120
-}
121
-.swiper-wrapper .swiper-item li{
122
-    width: 10%;
123
-    float: left;
124
-}
125
-.swiper-wrapper .swiper-item li a{
126
-    display: block;
127
-    width: 100%;
128
-}
129
-.swiper-wrapper .swiper-item li a img{
130
-    display: block;
117
+.swiper-wrapper{
131
     width: 100%;
118
     width: 100%;
119
+    height: 100%;
132
 }
120
 }
133
-.swiper-wrapper .swiper-point{
134
-    position: absolute;
135
-    bottom: 6px;
121
+.swiper-slide img{
136
     width: 100%;
122
     width: 100%;
137
-    text-align: center;
123
+    height: 100%;
138
 }
124
 }
139
-.swiper-wrapper .swiper-point li{
125
+
126
+.swiper-pagination-bullet{
140
     width: 3px;
127
     width: 3px;
141
     height: 3px;
128
     height: 3px;
142
     border-radius: 50%;
129
     border-radius: 50%;
144
     margin-left: 10px;
131
     margin-left: 10px;
145
     background: #CFCFCF;
132
     background: #CFCFCF;
146
 }
133
 }
147
-.swiper-wrapper .swiper-point li:first-child{
148
-    margin-left: 0;
149
-}
150
-.swiper-wrapper .swiper-point li.now{
134
+.swiper-pagination-bullet.swiper-pagination-bullet-active{
151
     width: 8px;
135
     width: 8px;
152
     background: #fff;
136
     background: #fff;
153
     border-radius: 0;
137
     border-radius: 0;
159
     flex-direction: column;
143
     flex-direction: column;
160
     width: 100%;
144
     width: 100%;
161
     padding: 0 0.2rem;
145
     padding: 0 0.2rem;
146
+    margin-bottom: 50px;
162
 }
147
 }
163
 .details-wrapper .price{
148
 .details-wrapper .price{
164
     margin-top: 16px;
149
     margin-top: 16px;
239
 }*/
224
 }*/
240
 
225
 
241
 
226
 
227
+.weui-mask_transparent {
228
+    position: fixed;
229
+    z-index: 1000;
230
+    top: 0;
231
+    right: 0;
232
+    left: 0;
233
+    bottom: 0;
234
+}
235
+.weui-toast {
236
+    position: fixed;
237
+    z-index: 5000;
238
+    width: 7.6em;
239
+    min-height: 7.6em;
240
+    top: 180px;
241
+    left: 50%;
242
+    margin-left: -3.8em;
243
+    background: rgba(17, 17, 17, 0.7);
244
+    text-align: center;
245
+    border-radius: 5px;
246
+    color: #FFFFFF;
242
 
247
 
248
+}
249
+.hide{
250
+    display: none;
251
+    opacity: 0;
252
+}
253
+.show{
254
+    display: block;
255
+    opacity: 1;
256
+}
257
+.weui-icon-success-no-circle {
258
+    display: inline-block;
259
+    vertical-align: middle;
260
+    margin: 22px 0 0;
261
+    width: 39px;
262
+    height: 30px;
263
+    background: url(img/getIt.png) no-repeat 0 0;
264
+    -webkit-background-size: 39px 30px;
265
+    background-size: 39px 30px;
266
+}
267
+.weui-toast__content {
268
+    margin: 6px 0 15px;
269
+}

+ 13 - 3
index.html

29
                 document.write('<style>body{min-width:320px;min-height:320px;}</style>');
29
                 document.write('<style>body{min-width:320px;min-height:320px;}</style>');
30
               }
30
               }
31
         </script>
31
         </script>
32
+        <link rel="stylesheet" type="text/css" href="dist/swiper-3.4.2.min.css">
32
         <link rel="stylesheet" type="text/css" href="index.css">
33
         <link rel="stylesheet" type="text/css" href="index.css">
33
         <style type="text/css" media="screen">
34
         <style type="text/css" media="screen">
34
         </style>
35
         </style>
42
             </div>
43
             </div>
43
             <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.kuxuan.coupon">下载APP</a>
44
             <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.kuxuan.coupon">下载APP</a>
44
         </div>
45
         </div>
45
-        <div class="swiper-wrapper">
46
-              <ul class="clearfix swiper-item"></ul>
47
-              <ul class="swiper-point"></ul>
46
+        <div class="swiper-container">
47
+            <div class="swiper-wrapper">
48
+            </div>
49
+            <!-- 如果需要分页器 -->
50
+            <div class="swiper-pagination"></div>
48
         </div>
51
         </div>
49
         <div class="details-wrapper"></div>
52
         <div class="details-wrapper"></div>
50
         <div class="btn-wrapper">
53
         <div class="btn-wrapper">
52
             <div id="copy_2"></div>
55
             <div id="copy_2"></div>
53
             <button class="btn">点击复制淘口令,打开淘宝去购买</button>
56
             <button class="btn">点击复制淘口令,打开淘宝去购买</button>
54
         </div>
57
         </div>
58
+        <div id="toast" class="hide">
59
+            <div class="weui-mask_transparent"></div>
60
+            <div class="weui-toast">
61
+                <i class="weui-icon-success-no-circle"></i>
62
+                <p class="weui-toast__content">已完成</p>
63
+            </div>
64
+        </div>
55
         <script src="dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
65
         <script src="dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
56
         <script src="dist/swiper.min.js" type="text/javascript" charset="utf-8"></script>
66
         <script src="dist/swiper.min.js" type="text/javascript" charset="utf-8"></script>
57
         <script src="dist/index.js" type="text/javascript" charset="utf-8"></script>
67
         <script src="dist/index.js" type="text/javascript" charset="utf-8"></script>