Accueil Explorer Aide
S'inscrire Connexion
zhuhaiwen
/
freeBuyWeb
Suivre 1
Voter 0
Fork 0
Code Tickets 0 Pull Requests 0 Commits 17 Publications 0 Wiki
Parcourir la Source

android封装vue

朱海文 4 ans auparavant
Parent
65fb0cf403
commit
cf19bb105c
6 fichiers modifiés avec 292 ajouts et 161 suppressions
Vue séparée Afficher les stats Diff
  1. 0 112
      public/android-mobile.html
  2. 1 1
      public/index.html
  3. 42 42
      src/App.vue
  4. BIN
      src/assets/topbg_mobile.png
  5. 22 6
      src/router/index.js
  6. 227 0
      src/views/Android.vue

+ 0 - 112
public/android-mobile.html
Voir le fichier 

@ -1,112 +0,0 @@
1 
<!DOCTYPE html>
2 
<html lang="en">
3 
<head>
4 
  <meta charset="UTF-8">
5 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 
  <title>开心0元购</title>
7 
  <style>
8 
    * {
9 
      padding: 0;
10 
      margin: 0;
11 
      box-sizing: border-box;
12 
    }
13
14 
    body {
15 
      width: 7.5rem;
16 
    }
17
18 
    .container {
19 
      position: relative;
20 
    }
21
22 
    .conbg {
23 
      width: 100%;
24 
      display: block;
25 
    }
26
27 
    .btn {
28 
      position: absolute;
29 
      top: 11.3rem;
30 
      left: calc(50% + 0.15rem);
31 
      transform: translateX(-50%);
32 
      width: 3.1rem;
33 
      height: 0.85rem;
34 
    }
35
36 
    #adr-mask {
37 
      background-color: rgba(0, 0, 0, .8);
38 
      width: 100%;
39 
      height: 100%;
40 
      z-index: 99999;
41 
      left: 0px;
42 
      top: 0px;
43 
      position: fixed;
44 
      overflow: hidden;
45 
      text-align: center;
46 
    }
47 
  </style>
48 
</head>
49 
<body>
50 
<div class="container">
51 
  <div id="adr-mask" style="display: none;">
52 
    <img src="/img/arrow.png" style="margin: 1rem 0 0 2.5rem;">
53 
    <p style="color: #ffffff;font-size: 23px;margin:.5rem 0 .9rem 0;">请在浏览器中打开</p>
54 
    <img src="/img/know.png" onclick="closeMask()" style="CURSOR: pointer">
55 
  </div>
56 
  <img class="conbg" src="/img/bg-img.png" alt="">
57 
  <!-- <a href="https://s3.cn-northwest-1.amazonaws.com.cn/s3.jianos.com/Zero.apk" download=""> -->
58 
  <div class="btn" onclick="download()"></div>
59 
  <!-- </a> -->
60
61 
</div>
62 
<script>
63 
  var downUrl = "https://s3.cn-northwest-1.amazonaws.com.cn/s3.jianos.com/Zero.apk";
64
65 
  function requestApi(callback) {
66 
    var url = 'https://apifreego.jianos.com/app_update';
67 
    var xhr = new XMLHttpRequest();
68 
    xhr.open('get', url, true);
69 
    xhr.setRequestHeader("content-type", "application/json");
70
71 
    xhr.onload = () => {
72 
      // console.log('xhr.response = ', xhr.response)
73 
      if (xhr.status == 200) {
74 
        var result = JSON.parse(xhr.response);
75 
        // console.log(222,result)
76 
        if (result && result.data && result.data.src) {
77 
          downUrl = result.data.src;
78 
          //if(callback)callback(result.src);
79 
          // console.log('得到的下载地址是 = ' + downUrl)
80 
        }
81 
      }
82 
    }
83 
    xhr.onerror = () => {
84 
      console.log('xhr.onerror = ', xhr)
85 
    }
86 
    xhr.send();
87 
  }
88
89 
  requestApi();
90
91 
  document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
92
93 
  function download() {
94 
    var ua = window.navigator.userAgent.toLowerCase();
95 
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
96 
      //是微信环境，弹出遮罩
97 
      document.getElementById('adr-mask').style.display = 'block';
98 
      return true;
99 
    } else {
100 
      // TODO 这里弱网环境会有问题
101 
      //不是微信环境，直接下载，
102 
      window.location.href = downUrl;
103 
      return false;
104 
    }
105 
  }
106
107 
  function closeMask() {
108 
    document.getElementById('adr-mask').style.display = 'none';
109 
  }
110 
</script>
111 
</body>
112 
</html>

+ 1 - 1
public/index.html
Voir le fichier 

@ -5,7 +5,7 @@
5 5 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 6 
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 7 
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 
    <title>漫步今日益行</title>
8 
    <title>开心0元购</title>
9 9 
  </head>
10 10 
  <body>
11 11 
    <noscript>

+ 42 - 42
src/App.vue
Voir le fichier 

@ -1,61 +1,61 @@
1 1 
<template>
2 
<div id="app">
3 
    <router-view />
4 
</div>
2 
  <div id="app">
3 
    <router-view/>
4 
  </div>
5 5 
</template>
6 6
7 7 
<script>
8 
export default {
8 
  export default {
9 9 
    name: 'App',
10 10 
    mounted() {
11 
        if(!this.isPC() && this.isAndroid()) {
12 
            window.location.replace('/android-mobile.html')
13 
        }
14 
        else if(!this.isPC() && this.isIos()) {
15 
            window.location.replace('/ios-mobile.html')
16 
        }
11 
      if (!this.isPC() && this.isAndroid()) {
12 
        // window.location.replace('/android-mobile.html')
13 
        this.$router.push('/Android');
14 
      } else if (!this.isPC() && this.isIos()) {
15 
        window.location.replace('/ios-mobile.html')
16 
      }
17 17 
    },
18 18 
    methods: {
19 
        isPC() {
20 
            var userAgentInfo = navigator.userAgent;
21 
            var Agents = ["Android", "iPhone",
22 
                "SymbianOS", "Windows Phone",
23 
                "iPad", "iPod"
24 
            ];
25 
            var flag = true;
26 
            for (var v = 0; v < Agents.length; v++) {
27 
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
28 
                    flag = false;
29 
                    break;
30 
                }
31 
            }
32 
            return flag;
33 
        },
34 
        isAndroid() {
35 
            var u = navigator.userAgent;
36 
            if(u.indexOf("Android") > -1 || u.indexOf("Adr") > -1){
37 
                return true;
38 
            }
39 
            return false;
40 
        },
41 
        isIos() {
42 
            var u = navigator.userAgent;
43 
            if (u.indexOf("iPhone") > -1 || u.indexOf("iOS") > -1) {
44 
                return true;
45 
            }
46 
            return false;
47 
        },
19 
      isPC() {
20 
        var userAgentInfo = navigator.userAgent;
21 
        var Agents = ["Android", "iPhone",
22 
          "SymbianOS", "Windows Phone",
23 
          "iPad", "iPod"
24 
        ];
25 
        var flag = true;
26 
        for (var v = 0; v < Agents.length; v++) {
27 
          if (userAgentInfo.indexOf(Agents[v]) > 0) {
28 
            flag = false;
29 
            break;
30 
          }
31 
        }
32 
        return flag;
33 
      },
34 
      isAndroid() {
35 
        var u = navigator.userAgent;
36 
        if (u.indexOf("Android") > -1 || u.indexOf("Adr") > -1) {
37 
          return true;
38 
        }
39 
        return false;
40 
      },
41 
      isIos() {
42 
        var u = navigator.userAgent;
43 
        if (u.indexOf("iPhone") > -1 || u.indexOf("iOS") > -1) {
44 
          return true;
45 
        }
46 
        return false;
47 
      },
48 48 
    }
49 
}
49 
  }
50 50 
</script>
51 51
52 52 
<style>
53 
#app {
53 
  #app {
54 54 
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
55 55 
    -webkit-font-smoothing: antialiased;
56 56 
    -moz-osx-font-smoothing: grayscale;
57 57 
    text-align: center;
58 58 
    color: #2c3e50;
59 59 
    margin-top: 60px;
60 
}
60 
  }
61 61 
</style>

BIN
src/assets/topbg_mobile.png
Voir le fichier


+ 22 - 6
src/router/index.js
Voir le fichier 

@ -1,13 +1,29 @@
1 1 
import Vue from 'vue'
2 2 
import Router from 'vue-router'
3 
import Home from '@/views/PC.vue'
3 
import PC from '@/views/PC.vue'
4 
import Android from '@/views/Android.vue'
4 5
5 6 
Vue.use(Router)
6 7
8 
/*
9 
*  Vue框架的检测机制，路由跳转必须为人工手动点击
10 
*/
11 
const originalPush = Router.prototype.push
12 
Router.prototype.push = function push(location) {
13 
  return originalPush.call(this, location).catch(err => err)
14 
}
15
7 16 
export default new Router({
8 
    routes: [{
9 
        path: '/',
10 
        name: 'home',
11 
        component: Home
12 
    }]
17 
  routes: [
18 
    {
19 
    path: '/',
20 
    name: 'PC',
21 
    component: PC
22 
    },
23 
    {
24 
      path: '/Android',
25 
      name: 'Android',
26 
      component: Android
27 
    }
28 
     ]
13 29 
})

+ 227 - 0
src/views/Android.vue
Voir le fichier 

@ -0,0 +1,227 @@
1 
<template>
2 
  <div>
3 
    <!--上半部分-->
4 
    <div>
5 
      <img class="topbg" src="../assets/topbg_mobile.png">
6
7 
      <div class="top_content">
8 
        <img class="app_icon" src="../assets/icon.png"/>
9 
        <font class="app_name">开心0元购</font>
10 
      </div>
11
12 
      <font class="des">连续打卡全额返 就在开心0元购</font>
13
14 
      <div class="btnP">
15 
        <div @click="download()">
16 
          <img class="btnImg" src="~@/assets/bot.png">
17 
          <!-- <a href="https://s3.cn-northwest-1.amazonaws.com.cn/s3.jianos.com/Zero.apk" download="" traget="_blank"> -->
18 
          <font class="btnFont">Android系统下载</font>
19 
          <!-- </a> -->
20 
        </div>
21 
      </div>
22
23 
    </div>
24
25 
    <!--下半部分-->
26 
    <div>
27 
      <img class="img1" src="~@/assets/right_top.png">
28 
      <div class="WordP">
29 
        <div>
30 
          <h1>打卡简单 全额返购自主提现</h1>
31 
          <h2>只要坚持完成连续打卡任务 即全额返现</h2>
32 
          <h3>• 进入指定京东或天猫店铺购买想要的指定商品</h3>
33 
          <h3>• 进入开心0元购注册账号，关联商品 </h3>
34 
          <h3>• 每日打卡，完成阶段任务自主提现，直至全额</h3>
35 
        </div>
36 
      </div>
37
38 
      <img class="img1" src="~@/assets/left_bottom.png">
39 
      <div class="WordP">
40 
        <div>
41 
          <h1>提现便捷 拒绝意外翻车</h1>
42 
          <h2>分阶段返现，完成阶段任务即可直接提现</h2>
43 
          <h3>• 在开心0元购打卡至阶段任务完成</h3>
44 
          <h3>• 进入领奖处，填写收款账户直接申请提现</h3>
45 
          <h3>• 全部现金到账，更有神秘福利免费领取</h3>
46 
        </div>
47 
      </div>
48 
    </div>
49 
  </div>
50 
</template>
51 
<!--(1920 px 1082 px)-->
52 
<!-- Add "scoped" attribute to limit CSS to this component only -->
53 
<style scoped>
54
55 
  .topbg {
56 
    width: 100%;
57 
    height: auto;
58 
  }
59
60 
  .top_content {
61 
    width: auto;
62 
    left: 18%;
63 
    top: 25%;
64 
    position: absolute;
65 
    text-align: left;
66 
    display: flex;
67 
    align-items: center
68 
  }
69
70 
  .app_icon {
71 
    width: 60px;
72 
    height: 60px;
73 
  }
74
75 
  .app_name {
76 
    font-size: 30px;
77 
    font-weight: bold;
78 
    margin-left: 25px;
79 
  }
80
81 
  .des {
82 
    color: #FB4644;
83 
    font-weight: bold;
84 
    font-size: 16px;
85 
    left: 18%;
86 
    top: 36%;
87 
    position: absolute;
88 
  }
89
90 
  .btnP {
91 
    position: absolute;
92 
    bottom: 3%;
93 
    display: flex;
94 
    justify-content: center;
95 
    width: 100%;
96 
    height: auto;
97 
  }
98
99 
  .btnP div {
100 
    background-color: #FB4644;
101 
    display: flex;
102 
    align-items: center;
103 
    width: auto;
104 
    height: auto;
105 
    border-radius: 20px;
106 
    padding: 5px;
107 
    padding-left: 10px;
108 
    padding-right: 20px;
109
110 
  }
111
112 
  .btnP:active {
113 
    /*transform: scale(10);*/
114 
  }
115
116 
  .btnImg {
117 
    width: 30px;
118 
    height: 30px;
119 
  }
120
121 
  .btnFont {
122 
    color: white;
123 
    font-size: 20px;
124 
    font-weight: bold;
125 
    margin-left: 10px;
126 
  }
127
128 
  .btnFont:active {
129 
    font-size: 18px;
130 
  }
131
132 
  .img1 {
133 
    width: 80%;
134 
    height: auto;
135 
    margin-top: 20px;
136 
  }
137
138 
  .WordP {
139 
    width: 100%;
140 
    height: auto;
141 
    display: flex;
142 
    align-items: center;
143 
    justify-content: center;
144 
  }
145
146 
  .WordP div {
147 
    text-align: center;
148 
    margin-top: 10px;
149 
  }
150
151 
  .WordP h1 {
152 
    font-size: 17px;
153 
  }
154
155 
  .WordP h2 {
156 
    font-size: 15px;
157 
  }
158
159 
  .WordP h3 {
160 
    font-size: 13px;
161 
  }
162
163 
</style>
164 
<script>
165
166 
  var downUrl = "https://s3.cn-northwest-1.amazonaws.com.cn/s3.jianos.com/Zero.apk";
167
168 
  function requestApi() {
169 
    var url = 'https://apifreego.jianos.com/app_update';
170 
    var xhr = new XMLHttpRequest();
171 
    xhr.open('get', url, true);
172 
    xhr.setRequestHeader("content-type", "application/json");
173
174 
    xhr.onload = () => {
175 
      // console.log('xhr.response = ', xhr.response)
176 
      if (xhr.status == 200) {
177 
        var result = JSON.parse(xhr.response);
178 
        // console.log(222,result)
179 
        if (result && result.data && result.data.src) {
180 
          downUrl = result.data.src;
181 
          //if(callback)callback(result.src);
182 
          console.log('得到的下载地址是 = ' + downUrl)
183 
        }
184 
      }
185 
    }
186 
    xhr.onerror = () => {
187 
      console.log('xhr.onerror = ', xhr)
188 
    }
189 
    xhr.send();
190 
  }
191
192 
  requestApi();
193
194 
  document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
195
196 
  export default {
197 
    name: 'Android',
198 
    data() {
199 
      return {
200 
        msg: 'Welcome to Your Vue.js App',
201 
      }
202 
    },
203 
    mounted() {
204
205 
    },
206 
    methods: {
207 
      download() {
208 
        var ua = window.navigator.userAgent.toLowerCase();
209 
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
210 
          //是微信环境，弹出遮罩
211 
          document.getElementById('adr-mask').style.display = 'block';
212 
          return true;
213 
        } else {
214 
          // TODO 这里弱网环境会有问题
215 
          //不是微信环境，直接下载，
216 
          window.location.href = downUrl;
217 
          return false;
218 
        }
219 
      },
220 
      closeMask() {
221 
        document.getElementById('adr-mask').style.display = 'none';
222 
      }
223 
    }
224 
  }
225
226 
</script>
227 
<!--本地网络地址：   http://192.168.31.101:8082-->