appDownload.html 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
  8. <meta content="yes" name="apple-mobile-web-app-capable" />
  9. <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  10. <meta content="telephone=no" name="format-detection" />
  11. <title>移动客户端</title>
  12. <style>
  13. html {
  14. margin: 0;
  15. padding: 0;
  16. }
  17. body {
  18. margin: 0;
  19. padding: 0;
  20. }
  21. @media screen and (max-width: 750px) {
  22. .el-message-box {
  23. width: 60% !important;
  24. }
  25. }
  26. .app_box {
  27. width: 100%;
  28. background-size: cover;
  29. background-position: center;
  30. background-image: url("./img/pic_beijing.png");
  31. padding-top: 62pt;
  32. padding-bottom: 12pt;
  33. }
  34. .app_logo {
  35. width: 50pt;
  36. height: 50pt;
  37. display: block;
  38. margin: 0 auto;
  39. }
  40. .app_title {
  41. color: #333333;
  42. font-size: 24pt;
  43. text-align: center;
  44. margin: 5pt;
  45. }
  46. .app_line {
  47. height: 1px;
  48. background-color: #dedede;
  49. width: 180pt;
  50. margin: 36pt auto 30pt;
  51. }
  52. .app_footer {
  53. height: 60px;
  54. width: 100%;
  55. bottom: 0;
  56. left: 0;
  57. position: fixed;
  58. background: #fff;
  59. }
  60. .app_footer_name {
  61. height: 20px;
  62. font-size: 14px;
  63. font-weight: 400;
  64. color: #666666;
  65. line-height: 20px;
  66. text-align: center;
  67. }
  68. .app_footer_links {
  69. display: flex;
  70. flex-direction: row;
  71. align-items: center;
  72. justify-content: center;
  73. }
  74. .app_footer_link {
  75. font-size: 12px;
  76. color: #999999;
  77. line-height: 16px;
  78. text-decoration: underline;
  79. }
  80. .app_footer_link a:visited,a:link {
  81. color: #999999;
  82. text-decoration: underline;
  83. }
  84. .mask {
  85. position: fixed;
  86. left: 0px;
  87. top: 0px;
  88. right: 0px;
  89. bottom: 0px;
  90. background: rgba(0, 0, 0, 0.4);
  91. }
  92. .mask .mask_alert {
  93. position: absolute;
  94. right: 12pt;
  95. left: 12pt;
  96. top: 120pt;
  97. text-align: center;
  98. color: #fff;
  99. font-size: 12pt;
  100. }
  101. .mask img {
  102. display: block;
  103. position: absolute;
  104. right: 0;
  105. top: 0;
  106. }
  107. .app_version {
  108. color: #999999;
  109. font-size: 12pt;
  110. text-align: center;
  111. }
  112. .actions {
  113. margin: 18pt auto 0;
  114. text-align: center;
  115. }
  116. .actions a {
  117. position: relative;
  118. display: inline-block;
  119. padding: 6pt 12pt;
  120. min-width: 140pt;
  121. border: 1px solid #fb4747;
  122. border-radius: 40px;
  123. font-size: 12pt;
  124. background: #fb4747;
  125. color: #fff;
  126. text-decoration: none;
  127. }
  128. .actions a img {
  129. width: 16pt;
  130. height: 16pt;
  131. vertical-align: middle;
  132. }
  133. .app_line {
  134. height: 1px;
  135. background-color: #dedede;
  136. width: 180pt;
  137. margin: 36pt auto 30pt;
  138. }
  139. .msg {
  140. margin: 12px;
  141. }
  142. .msg .msg_header {
  143. margin-top: 0;
  144. color: #333333;
  145. text-align: center;
  146. font-size: 14pt;
  147. }
  148. .msg .msg_body {
  149. width: 210pt;
  150. margin: 0 auto;
  151. text-align: left;
  152. font-size: 14pt;
  153. color: #999999;
  154. }
  155. </style>
  156. <script src="../o2_core/o2.min.js"></script>
  157. <script src="js/base_simple_anonymous.js"></script>
  158. </head>
  159. <body>
  160. <!-- 移动端app下载页面,用于自助打包发布的app下载 目前就只有android -->
  161. <div id="app">
  162. <div class="app_box">
  163. <img
  164. src="./img/icon_logo150.png"
  165. class="app_logo"
  166. />
  167. <h3 class="app_title">O2OA</h3>
  168. <div class="app_line"></div>
  169. <!-- 下载页面内容 -->
  170. <div id="android_box">
  171. <div
  172. id="android_version"
  173. class="app_version"
  174. >当前最新版本:{{android.versionName}}</div>
  175. <div
  176. id="actions_android"
  177. class="actions type-android"
  178. >
  179. <a id="android_download_link">
  180. <img src="./img/action_android.png" />
  181. 下载安装
  182. </a>
  183. </div>
  184. </div>
  185. <!-- 下载页面底部 -->
  186. <!-- <div class="app_footer">
  187. <div class="app_footer_name">浙江兰德纵横网络技术股份有限公司</div>
  188. <div class="app_footer_links">
  189. <div class="app_footer_link"><a href="https://www.o2oa.net/secret.html" target="_blank">隐私协议</a></div>
  190. <div style="margin:10px;color: #999999;"> | </div>
  191. <div class="app_footer_link" @click="clickPermission()">用户权限</div>
  192. </div>
  193. </div> -->
  194. <div
  195. class="mask"
  196. id="mask"
  197. >
  198. <img
  199. src="./img/menu_tap.png"
  200. width="110"
  201. height="140"
  202. />
  203. <p
  204. class="mask_alert"
  205. id="mask_alert"
  206. >请点右上角菜单,在浏览器打开</p>
  207. </div>
  208. </div>
  209. </div>
  210. <script>
  211. layout.addReady(function(){
  212. (function(layout){
  213. // 判断手机信息
  214. var checkUserAgent = function() {
  215. //判断平台
  216. var ua = window.navigator.userAgent.toLowerCase();
  217. console.log(ua);
  218. var isiOS = /(iPhone|iPad|iPod|iOS)/i.test(ua);
  219. var isAndroid = /(Android|Adr)/i.test(ua);
  220. console.log("isiOS:"+isiOS);
  221. console.log("isAndroid:"+isAndroid);
  222. var isDingding = false;
  223. var isWeixin = false;
  224. if (ua.match(/DingTalk/i) == "dingtalk") {
  225. //用钉钉打开
  226. isDingding = true;
  227. } else if (ua.match(/MicroMessenger/i) == "micromessenger") {
  228. //用微信打开
  229. isWeixin = true;
  230. }
  231. // $("android_box").setStyles({
  232. // display:isAndroid ? "block" : "none"
  233. // })
  234. $("mask").setStyles({
  235. display:isDingding || isWeixin ? "block" : "none"
  236. })
  237. };
  238. // 获取最新版本apk数据
  239. var _loadLastPublishAPK = function() {
  240. o2.Actions.load("x_program_center").AppPackAnonymousAction.androidPackLastAPk(function(json) {
  241. if (json && json.data && json.data.id) {
  242. $("android_version").set("text", "当前最新版本:"+json.data.appVersionName);
  243. var downloadUrl = o2.Actions.getHost("x_program_center") + "/x_program_center/jaxrs/apppackanony/pack/info/file/download/" + json.data.id;
  244. downloadUrl = o2.filterUrl(downloadUrl);
  245. $("android_download_link").set("href", downloadUrl);
  246. } else {
  247. $("android_box").setStyles({ display: "none" });
  248. }
  249. }.bind(this));
  250. };
  251. checkUserAgent();
  252. _loadLastPublishAPK();
  253. })(layout);
  254. });
  255. </script>
  256. </body>
  257. </html>