HuaJingwen 6 years ago
parent
commit
dfc96616e1
3 changed files with 65 additions and 38 deletions
  1. 35 11
      dist/index.js
  2. 22 3
      index.css
  3. 8 24
      index.html

+ 35 - 11
dist/index.js

@@ -191,9 +191,9 @@ function startSwiper(imageCount) {
191 191
 /*copy to clipboard*/
192 192
 function toCopy() {
193 193
     if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
194
-    //区分iPhone设备
194
+        //区分iPhone设备
195 195
         window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
196
-        var Url2=document.getElementById("biaoios");//要复制文字的节点
196
+        var Url2=document.getElementById("copy_2");//要复制文字的节点
197 197
         var range = document.createRange();
198 198
         // 选中需要复制的节点
199 199
         range.selectNode(Url2);
@@ -205,7 +205,7 @@ function toCopy() {
205 205
         // 移除选中的元素
206 206
         window.getSelection().removeAllRanges();
207 207
     }else{
208
-        var Url2=document.getElementById("biao1");//要复制文字的节点
208
+        var Url2=document.getElementById("copy_1");//要复制文字的节点
209 209
         Url2.select(); // 选择对象
210 210
         document.execCommand("Copy"); // 执行浏览器复制命令
211 211
     }
@@ -226,8 +226,9 @@ window.onload = function () {
226 226
         var res = response.data, data = null, html = '', imgList = [], swiperStr = '', pointStr = '', len = 0;
227 227
         var swiper = document.querySelector('.swiper-wrapper .swiper-item'),
228 228
               point = document.querySelector('.swiper-wrapper .swiper-point'),
229
-              detailsWrapper = document.querySelector('.details-wrapper')
230
-
229
+              detailsWrapper = document.querySelector('.details-wrapper'),
230
+              copy_2 = document.getElementById("copy_2"),
231
+              copy_1 = document.getElementById("copy_1")
231 232
               ;
232 233
         console.log(swiper);
233 234
         if (res.errno == 0) {
@@ -245,8 +246,14 @@ window.onload = function () {
245 246
                 }
246 247
                  swiperStr += '<li><a href="javascript: ;"><img src="'+ imgList[0] +'"></a></li>';
247 248
             }
248
-            html = '<h5 class="price"><span>券后 ¥</span><em>'+ data.discount_price +'</em><span class="icon icon-price">券&nbsp;&nbsp; '+ data.coupon_price
249
- +'元</span></h5><div class="info"><p class="before-price">价格 <span>'+ data.price +'</span></p><p class="quantity"> 月销 '+ data.volume +'</p></div><p class="elli desc">'+ data.title +'</p>'
249
+            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
251
+ +'元</span></h5><div class="info"><p class="before-price">价格 <span>'+ data.price +'</span></p><p class="quantity"> 月销 '+ data.volume +'</p></div><p class="elli desc">'+ data.title +'</p>';
252
+            }else{
253
+                html = '<h5 class="price"><span>折后 ¥</span><em>'+ data.discount_price +'</em></h5><div class="info"><p class="before-price">价格 <span>'+ data.price +'</span></p><p class="quantity"> 月销 '+ data.volume +'</p></div><p class="elli desc">'+ data.title +'</p>';
254
+            }
255
+
256
+
250 257
             detailsWrapper.innerHTML = html;
251 258
             swiper.innerHTML = swiperStr;
252 259
             point.innerHTML = pointStr;
@@ -257,8 +264,25 @@ window.onload = function () {
257 264
         console.log(error);
258 265
       });
259 266
 
260
-      btn.addEventListener('click', function () {
261
-        console.log('test');
262
-            toCopy();
263
-      }, false)
267
+      axios.post('/api/v2/adzoneCreate/h5CopyOfTheNaughtyPassword', {
268
+          goods_id: goods_id,
269
+          is_coupon: is_coupon,
270
+          user_id: user_id
271
+        })
272
+        .then(function (response) {
273
+            var res = response.data, data = null;
274
+            if (res.errno == 0) {
275
+                data = res.rst.data;
276
+                copy_2.innerHTML = data;
277
+                console.log(copy_1);
278
+                copy_1.value = data;
279
+                btn.addEventListener('click', function () {
280
+                  console.log('test');
281
+                      toCopy();
282
+                }, false)
283
+            }
284
+        })
285
+        .catch(function (error) {
286
+          console.log(error);
287
+        });
264 288
 }

+ 22 - 3
index.css

@@ -23,6 +23,9 @@ body{
23 23
 em, i{
24 24
     font-style: normal;
25 25
 }
26
+a{
27
+    text-decoration: none;
28
+}
26 29
 .clearfix::before,
27 30
 .clearfix::after{
28 31
     content: "";
@@ -41,6 +44,20 @@ em, i{
41 44
     -webkit-box-orient: vertical;
42 45
 }
43 46
 
47
+#copy_1{
48
+    outline: none;
49
+    border: 0px;
50
+    color: rgba(0,0,0,0.0);
51
+    position: absolute;
52
+    left:-200px;
53
+    background-color: transparent;
54
+}
55
+#copy_2{
56
+    position: absolute;
57
+    left:-200px;
58
+    color: rgba(0,0,0,0);
59
+    background-color: transparent
60
+}
44 61
 
45 62
 .download-wrapper {
46 63
     display: flex;
@@ -73,10 +90,11 @@ em, i{
73 90
     color: #666;
74 91
     line-height: 14px;
75 92
 }
76
-.download-wrapper button{
77
-    flex: 0 0 1.48rem;
93
+.download-wrapper a{
94
+    flex: 0 0 1.6rem;
78 95
     height: 0.56rem;
79
-    margin: auto;
96
+    line-height: 0.56rem;
97
+    text-align: center;
80 98
     background: linear-gradient(-90deg, #FF6900, #FFA500);
81 99
     border-radius: 28px;
82 100
     border: 0 none;
@@ -162,6 +180,7 @@ span.icon.icon-price{
162 180
     vertical-align: top;
163 181
     width: 1.28rem;
164 182
     height: 0.28rem;
183
+    line-height: 0.28rem;
165 184
     margin-top: 9px;
166 185
     margin-left: 10px;
167 186
     background: url('img/icon-price.png') no-repeat center center;

+ 8 - 24
index.html

@@ -40,34 +40,18 @@
40 40
               <h6 class="title">省钱达人</h6>
41 41
               <p class="text">购物省钱,分享赚钱,更多奖励等你来</p>
42 42
             </div>
43
-            <button type="button">下载APP</button>
43
+            <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.kuxuan.coupon">下载APP</a>
44 44
         </div>
45 45
         <div class="swiper-wrapper">
46
-              <ul class="clearfix swiper-item">
47
-                  <li><a href="javascript: ;"><img src="http://img.henhaojie.com/Homeact/20180409/1523252985675069.jpg"></a></li>
48
-                  <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20180518/1526629597825769.jpg"></a></li>
49
-                  <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20180502/1525253753560504.png"></a></li>
50
-                  <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20171123/1511420419308673.png"></a></li>
51
-                  <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20180521/1526897525753766.png"></a></li>
52
-                  <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20180509/1525849287291571.jpg"></a></li>
53
-                  <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20180515/1526368416232243.png"></a></li>
54
-                  <li><a href="#"><img src="http://img.henhaojie.com/Homeact/20180409/1523252985675069.jpg"></a></li>
55
-              </ul>
56
-              <ul class="swiper-point">
57
-                  <li class="now"></li>
58
-                  <li></li>
59
-                  <li></li>
60
-                  <li></li>
61
-                  <li></li>
62
-                  <li></li>
63
-                  <li></li>
64
-              </ul>
46
+              <ul class="clearfix swiper-item"></ul>
47
+              <ul class="swiper-point"></ul>
65 48
         </div>
66
-        <div class="details-wrapper">
49
+        <div class="details-wrapper"></div>
50
+        <div class="btn-wrapper">
51
+            <input id="copy_1" type="text" readOnly="true" value=""/>
52
+            <div id="copy_2"></div>
53
+            <button class="btn">点击复制淘口令,打开淘宝去购买</button>
67 54
         </div>
68
-        <input readOnly="true" style="outline: none;border: 0px; color: rgba(0,0,0,0.0);position: absolute;left:-200px; background-color: transparent" id="biao1" value="要复制的内容"/>
69
-        <div id="biaoios" style=";position: absolute;left:-200px; color: rgba(0,0,0,0);background-color: transparent">要复制的内容</div>
70
-        <div class="btn-wrapper"><button class="btn">点击复制淘口令,打开淘宝去购买</button></div>
71 55
         <script src="dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
72 56
         <script src="dist/swiper.min.js" type="text/javascript" charset="utf-8"></script>
73 57
         <script src="dist/index.js" type="text/javascript" charset="utf-8"></script>