永城市12345_前端 - 这个不用

tab-setting.html 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Hello MUI</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <link rel="stylesheet" href="css/mui.min.css">
  10. <link rel="stylesheet" href="css/iconfont.css" />
  11. <style>
  12. html,
  13. body {
  14. background-color: #efeff4;
  15. font-size: 14px;
  16. }
  17. .mui-views,
  18. .mui-view,
  19. .mui-pages,
  20. .mui-page,
  21. .mui-page-content {
  22. position: absolute;
  23. left: 0;
  24. right: 0;
  25. top: 0;
  26. bottom: 0;
  27. width: 100%;
  28. height: 100%;
  29. background-color: #efeff4;
  30. }
  31. .mui-pages {
  32. top: 46px;
  33. height: auto;
  34. }
  35. .mui-scroll-wrapper,
  36. .mui-scroll {
  37. background-color: #efeff4;
  38. }
  39. .mui-page.mui-transitioning {
  40. -webkit-transition: -webkit-transform 300ms ease;
  41. transition: transform 300ms ease;
  42. }
  43. .mui-page-left {
  44. -webkit-transform: translate3d(0, 0, 0);
  45. transform: translate3d(0, 0, 0);
  46. }
  47. .mui-ios .mui-page-left {
  48. -webkit-transform: translate3d(-20%, 0, 0);
  49. transform: translate3d(-20%, 0, 0);
  50. }
  51. .mui-navbar {
  52. position: fixed;
  53. right: 0;
  54. left: 0;
  55. z-index: 10;
  56. height: 44px;
  57. background-color: #f7f7f8;
  58. }
  59. .mui-navbar .mui-bar {
  60. position: absolute;
  61. background: transparent;
  62. text-align: center;
  63. }
  64. .mui-android .mui-navbar-inner.mui-navbar-left {
  65. opacity: 0;
  66. }
  67. .mui-ios .mui-navbar-left .mui-left,
  68. .mui-ios .mui-navbar-left .mui-center,
  69. .mui-ios .mui-navbar-left .mui-right {
  70. opacity: 0;
  71. }
  72. .mui-navbar .mui-btn-nav {
  73. -webkit-transition: none;
  74. transition: none;
  75. -webkit-transition-duration: .0s;
  76. transition-duration: .0s;
  77. }
  78. .mui-navbar .mui-bar .mui-title {
  79. display: inline-block;
  80. width: auto;
  81. }
  82. .mui-page-shadow {
  83. position: absolute;
  84. right: 100%;
  85. top: 0;
  86. width: 16px;
  87. height: 100%;
  88. z-index: -1;
  89. content: '';
  90. }
  91. .mui-page-shadow {
  92. background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
  93. background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
  94. }
  95. .mui-navbar-inner.mui-transitioning,
  96. .mui-navbar-inner .mui-transitioning {
  97. -webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
  98. transition: opacity 300ms ease, transform 300ms ease;
  99. }
  100. .mui-page {
  101. display: none;
  102. }
  103. .mui-pages .mui-page {
  104. display: block;
  105. }
  106. .mui-page .mui-table-view:first-child {
  107. margin-top: 15px;
  108. }
  109. .mui-page .mui-table-view:last-child {
  110. margin-bottom: 30px;
  111. }
  112. .mui-table-view {
  113. margin-top: 20px;
  114. }
  115. .mui-table-view span.mui-pull-right {
  116. color: #999;
  117. }
  118. .mui-table-view-divider {
  119. background-color: #efeff4;
  120. font-size: 14px;
  121. }
  122. .mui-table-view-divider:before,
  123. .mui-table-view-divider:after {
  124. height: 0;
  125. }
  126. .head {
  127. height: 40px;
  128. }
  129. #head {
  130. line-height: 40px;
  131. }
  132. .head-img {
  133. width: 50px;
  134. height: 50px;
  135. margin-right: 10px;
  136. }
  137. #head-img1 {
  138. position: absolute;
  139. bottom: 10px;
  140. right: 40px;
  141. width: 40px;
  142. height: 40px;
  143. }
  144. .update {
  145. font-style: normal;
  146. color: #999999;
  147. margin-right: -25px;
  148. font-size: 15px
  149. }
  150. .mui-fullscreen {
  151. position: fixed;
  152. z-index: 20;
  153. background-color: #000;
  154. }
  155. .mui-ios .mui-navbar .mui-bar .mui-title {
  156. position: static;
  157. }
  158. /*问题反馈在setting页面单独的css*/
  159. #feedback .mui-popover {
  160. position: fixed;
  161. }
  162. #feedback .mui-table-view:last-child {
  163. margin-bottom: 0px;
  164. }
  165. #feedback .mui-table-view:first-child {
  166. margin-top: 0px;
  167. }
  168. /*问题反馈在setting页面单独的css==end*/
  169. .mui-bar-nav {
  170. background-color: #00a1cb!important;
  171. }
  172. p {
  173. font-size: 16px;
  174. color: #000;
  175. padding: 10px;
  176. margin-bottom: 0px;
  177. }
  178. .Img-box{
  179. line-height: 15px;
  180. }
  181. .Img{
  182. width: 20px;
  183. height: 19px;
  184. vertical-align: sub;
  185. }
  186. .size-16{
  187. font-size: 16px;
  188. }
  189. </style>
  190. <link rel="stylesheet" type="text/css" href="../css/feedback.css" />
  191. </head>
  192. <body class="mui-fullscreen">
  193. <!--页面主结构开始-->
  194. <div id="app" class="mui-views">
  195. <div class="mui-view">
  196. <div class="mui-navbar" style="display: none;">
  197. </div>
  198. <div class="mui-pages" style="top: 0;">
  199. </div>
  200. </div>
  201. </div>
  202. <!--页面主结构结束-->
  203. <!--单页面开始-->
  204. <div id="setting" class="mui-page">
  205. <!--页面标题栏开始-->
  206. <div class="mui-navbar-inner mui-bar mui-bar-nav" style="color:#fff">
  207. </div>
  208. <!--页面主内容区开始-->
  209. <div class="mui-page-content">
  210. <div class="mui-scroll-wrapper">
  211. <div class="mui-scroll">
  212. <ul class="mui-table-view mui-table-view-chevron">
  213. <li class="mui-table-view-cell mui-media">
  214. <a class="mui-navigate-right Img-box" href="#account" >
  215. <img class=" mui-pull-left head-img" id="head-img" src="img/personal.png">
  216. <div class="mui-media-body">
  217. <div style="margin: 8px 0;">
  218. <span class="size-16">蓝胖子</span> <span>领导</span>
  219. </div>
  220. <h5 class='mui-ellipsis'>我的账号:18839115206</h5>
  221. </div>
  222. </a>
  223. </li>
  224. </ul>
  225. <ul class="mui-table-view mui-table-view-chevron">
  226. <li class="mui-table-view-cell">
  227. <a id="Question" class="mui-navigate-right">
  228. <img class="Img"src="img/Wa.png" alt="" />
  229. 常见问题 <i class="mui-pull-right "></i></a>
  230. </li>
  231. <li class="mui-table-view-cell">
  232. <a id="feedback" class="mui-navigate-right">
  233. <img class="Img"src="img/Wb.png" alt="" />
  234. 问题反馈 <i class="mui-pull-right "></i></a>
  235. </li>
  236. <li class="mui-table-view-cell">
  237. <a href="" class="mui-navigate-right">
  238. <img class="Img"src="img/Wc.png" alt="" />
  239. 保密协议 <i class="mui-pull-right "></i></a>
  240. </li>
  241. <li class="mui-table-view-cell">
  242. <a href="#" id='update'>
  243. <img class="Img"src="img/Wd.png" alt="" />
  244. 版本更新 <i class="mui-pull-right update"></i></a>
  245. </li>
  246. </ul>
  247. <ul class="mui-table-view ">
  248. <li class="mui-table-view-cell">
  249. <a id="Question" class="mui-navigate-right">
  250. <img class="Img"src="img/Wa.png" alt="" />
  251. 设置 <i class="mui-pull-right "></i></a>
  252. </li>
  253. </ul>
  254. <ul class="mui-table-view">
  255. <li class="mui-table-view-cell" style="text-align: center;">
  256. <a id='exit'>退出</a>
  257. </li>
  258. </ul>
  259. </div>
  260. </div>
  261. </div>
  262. <input type="hidden" id="Vb" />
  263. <!--页面主内容区结束-->
  264. </div>
  265. <!--常见问题-->
  266. </body>
  267. <script src="js/mui.min.js "></script>
  268. <script src="js/zepto.js"></script>
  269. <script src="js/huayi.config.js"></script>
  270. <script src="js/mui.view.js "></script>
  271. <script>
  272. mui.init();
  273. var viewApi = mui('#app').view({
  274. defaultPage: '#setting'
  275. });
  276. //初始化单页的区域滚动
  277. mui('.mui-scroll-wrapper').scroll();
  278. var a = localStorage.getItem("T");
  279. // //检测网络连接
  280. mui.plusReady(function() {
  281. // var Code_;var NewCode_;
  282. // var server = huayi.config.callcenter_url + "ApplicationsRefresh/GetInfo?"; //获取升级描述文件服务器地址
  283. // document.addEventListener("netchange", wainshow, false);
  284. // plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
  285. // // $("#Vb").text(wgtinfo.version);
  286. //// var
  287. //// $('.update').text(Code_);
  288. // console.log("当前应用版本:"+wgtinfo.version+"---"+plus.runtime.version);
  289. // localStorage.setItem("Code",wgtinfo.version)//缓存保存版本号;
  290. // Code_= localStorage.getItem("Code");
  291. // console.log(Code_);
  292. // $('.update').text(Code_);
  293. //
  294. // Gx();
  295. // });
  296. function Gx() {
  297. mui.ajax(server, {
  298. data: {
  299. isNew: true,
  300. token: a
  301. },
  302. dataType: 'json', //服务器返回json格式数据
  303. type: 'post', //HTTP请求类型
  304. timeout: 10000, //超时时间设置为10秒;
  305. headers: {
  306. 'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
  307. },
  308. success: function(data) {
  309. if(data.state == "success") {
  310. NewCode_ = data.data.F_VersionCode;//缓存号
  311. console.log(NewCode_);
  312. if(Code_!= NewCode_){
  313. plus.nativeUI.confirm("发现新版本", function(event) {
  314. var tapIndex = event.index;
  315. if(tapIndex == 0) {
  316. console.log(data);
  317. plus.runtime.openURL(data.data.F_DownUrl);
  318. } else {
  319. mui.toast("取消更新");
  320. }
  321. }, "提示", ["立即更新", "取 消", ])
  322. }
  323. // $('.update').text(NewCode_);
  324. // plus.nativeUI.confirm("发现新版本", function(event) {
  325. // var tapIndex = event.index;
  326. // if(tapIndex == 0) {
  327. // console.log(data);
  328. // plus.runtime.openURL(data.data.F_DownUrl);
  329. // } else {
  330. // mui.toast("取消更新");
  331. // }
  332. // }, "提示", ["立即更新", "取 消", ]);
  333. } else {
  334. mui.toast(data.message);
  335. }
  336. },
  337. error: function(data) {
  338. //异常处理;
  339. console.log(data.message);
  340. }
  341. })
  342. }
  343. var backcount = 0;
  344. mui.back = function() {
  345. if(mui.os.ios) return;
  346. if(backcount > 0) {
  347. if(window.plus) plus.runtime.quit();
  348. return;
  349. };
  350. mui.toast('再按一次退出应用');
  351. backcount++;
  352. setTimeout(function() {
  353. backcount = 0;
  354. }, 2000);
  355. };
  356. });
  357. //退出
  358. document.getElementById('exit').addEventListener('tap', function() {
  359. var btnArray = [{
  360. title: "注销当前账号"
  361. }, {
  362. title: "直接关闭应用"
  363. }];
  364. plus.nativeUI.actionSheet({
  365. cancel: "取消",
  366. buttons: btnArray
  367. }, function(event) {
  368. var index = event.index;
  369. switch(index) {
  370. case 1:
  371. //注销账号
  372. localStorage.clear();
  373. plus.runtime.restart();
  374. break;
  375. case 2:
  376. plus.runtime.quit();
  377. break;
  378. }
  379. });
  380. }, false);
  381. function Clean() {
  382. $("#mobile").val('');
  383. $("#title").val('');
  384. $("#content").val('');
  385. }
  386. var view = viewApi.view;
  387. (function($) {
  388. //处理view的后退与webview后退
  389. var oldBack = $.back;
  390. $.back = function() {
  391. if(viewApi.canBack()) { //如果view可以后退,则执行view的后退
  392. viewApi.back();
  393. } else { //执行webview后退
  394. oldBack();
  395. }
  396. };
  397. //监听页面切换事件方案1,通过view元素监听所有页面切换事件,目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
  398. //第一个参数为事件名称,第二个参数为事件回调,其中e.detail.page为当前页面的html对象
  399. view.addEventListener('pageBeforeShow', function(e) {
  400. // console.log(e.detail.page.id + ' beforeShow');
  401. });
  402. view.addEventListener('pageShow', function(e) {
  403. // console.log(e.detail.page.id + ' show');
  404. });
  405. view.addEventListener('pageBeforeBack', function(e) {
  406. // console.log(e.detail.page.id + ' beforeBack');
  407. });
  408. view.addEventListener('pageBack', function(e) {
  409. // console.log(e.detail.page.id + ' back');
  410. });
  411. })(mui);
  412. //点击两次就退出软件
  413. $(".mui-media").on('tap',function(){
  414. // mui.openWindow({
  415. // "id": 'setting',
  416. // "url": 'setting.html',
  417. // show: {
  418. // aniShow: 'pop-in'
  419. // },
  420. // styles: {
  421. // popGesture: 'hide'
  422. // },
  423. // waiting: {
  424. // autoShow: false
  425. // }
  426. // //
  427. // });
  428. // plus.webview.create('setting.html', 'setting', {
  429. // 'titleNView': {
  430. // 'backgroundcolor': '#FFFFFF',
  431. // 'titletext': '标题栏',
  432. // 'titlecolor': '#FF0000'
  433. // }
  434. // });
  435. // var nwaiting = plus.nativeUI.showWaiting();//显示原生等待框
  436. webviewShow = plus.webview.create("setting.html");//后台创建webview并打开show.html
  437. webviewShow.addEventListener("loaded", function() { //注册新webview的载入完成事件
  438. // nwaiting.close(); //新webview的载入完毕后关闭等待框
  439. webviewShow.show("slide-in-right",300); //把新webview窗体显示出来,显示动画效果为速度300毫秒的右侧移入动画
  440. }, false);
  441. })</script>
  442. </html>