睢县12345_前端

Setting-1.html 14KB

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