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
 /*copy to clipboard*/
191
 /*copy to clipboard*/
192
 function toCopy() {
192
 function toCopy() {
193
     if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
193
     if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
194
-    //区分iPhone设备
194
+        //区分iPhone设备
195
         window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
195
         window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
196
-        var Url2=document.getElementById("biaoios");//要复制文字的节点
196
+        var Url2=document.getElementById("copy_2");//要复制文字的节点
197
         var range = document.createRange();
197
         var range = document.createRange();
198
         // 选中需要复制的节点
198
         // 选中需要复制的节点
199
         range.selectNode(Url2);
199
         range.selectNode(Url2);
205
         // 移除选中的元素
205
         // 移除选中的元素
206
         window.getSelection().removeAllRanges();
206
         window.getSelection().removeAllRanges();
207
     }else{
207
     }else{
208
-        var Url2=document.getElementById("biao1");//要复制文字的节点
208
+        var Url2=document.getElementById("copy_1");//要复制文字的节点
209
         Url2.select(); // 选择对象
209
         Url2.select(); // 选择对象
210
         document.execCommand("Copy"); // 执行浏览器复制命令
210
         document.execCommand("Copy"); // 执行浏览器复制命令
211
     }
211
     }
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-wrapper .swiper-item'),
228
               point = document.querySelector('.swiper-wrapper .swiper-point'),
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
         console.log(swiper);
233
         console.log(swiper);
233
         if (res.errno == 0) {
234
         if (res.errno == 0) {
245
                 }
246
                 }
246
                  swiperStr += '<li><a href="javascript: ;"><img src="'+ imgList[0] +'"></a></li>';
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
             detailsWrapper.innerHTML = html;
257
             detailsWrapper.innerHTML = html;
251
             swiper.innerHTML = swiperStr;
258
             swiper.innerHTML = swiperStr;
252
             point.innerHTML = pointStr;
259
             point.innerHTML = pointStr;
257
         console.log(error);
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
 em, i{
23
 em, i{
24
     font-style: normal;
24
     font-style: normal;
25
 }
25
 }
26
+a{
27
+    text-decoration: none;
28
+}
26
 .clearfix::before,
29
 .clearfix::before,
27
 .clearfix::after{
30
 .clearfix::after{
28
     content: "";
31
     content: "";
41
     -webkit-box-orient: vertical;
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
 .download-wrapper {
62
 .download-wrapper {
46
     display: flex;
63
     display: flex;
73
     color: #666;
90
     color: #666;
74
     line-height: 14px;
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
     height: 0.56rem;
95
     height: 0.56rem;
79
-    margin: auto;
96
+    line-height: 0.56rem;
97
+    text-align: center;
80
     background: linear-gradient(-90deg, #FF6900, #FFA500);
98
     background: linear-gradient(-90deg, #FF6900, #FFA500);
81
     border-radius: 28px;
99
     border-radius: 28px;
82
     border: 0 none;
100
     border: 0 none;
162
     vertical-align: top;
180
     vertical-align: top;
163
     width: 1.28rem;
181
     width: 1.28rem;
164
     height: 0.28rem;
182
     height: 0.28rem;
183
+    line-height: 0.28rem;
165
     margin-top: 9px;
184
     margin-top: 9px;
166
     margin-left: 10px;
185
     margin-left: 10px;
167
     background: url('img/icon-price.png') no-repeat center center;
186
     background: url('img/icon-price.png') no-repeat center center;

+ 8 - 24
index.html

40
               <h6 class="title">省钱达人</h6>
40
               <h6 class="title">省钱达人</h6>
41
               <p class="text">购物省钱,分享赚钱,更多奖励等你来</p>
41
               <p class="text">购物省钱,分享赚钱,更多奖励等你来</p>
42
             </div>
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
         </div>
44
         </div>
45
         <div class="swiper-wrapper">
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
         </div>
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
         </div>
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
         <script src="dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
55
         <script src="dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
72
         <script src="dist/swiper.min.js" type="text/javascript" charset="utf-8"></script>
56
         <script src="dist/swiper.min.js" type="text/javascript" charset="utf-8"></script>
73
         <script src="dist/index.js" type="text/javascript" charset="utf-8"></script>
57
         <script src="dist/index.js" type="text/javascript" charset="utf-8"></script>