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

setting.html 28KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909
  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. }
  15. .mui-views,
  16. .mui-view,
  17. .mui-pages,
  18. .mui-page,
  19. .mui-page-content {
  20. position: absolute;
  21. left: 0;
  22. right: 0;
  23. top: 0;
  24. bottom: 0;
  25. width: 100%;
  26. height: 100%;
  27. background-color: #efeff4;
  28. }
  29. .mui-pages {
  30. top: 46px;
  31. height: auto;
  32. }
  33. .mui-scroll-wrapper,
  34. .mui-scroll {
  35. background-color: #efeff4;
  36. }
  37. .mui-page.mui-transitioning {
  38. -webkit-transition: -webkit-transform 300ms ease;
  39. transition: transform 300ms ease;
  40. }
  41. .mui-page-left {
  42. -webkit-transform: translate3d(0, 0, 0);
  43. transform: translate3d(0, 0, 0);
  44. }
  45. .mui-ios .mui-page-left {
  46. -webkit-transform: translate3d(-20%, 0, 0);
  47. transform: translate3d(-20%, 0, 0);
  48. }
  49. .mui-navbar {
  50. position: fixed;
  51. right: 0;
  52. left: 0;
  53. z-index: 10;
  54. height: 44px;
  55. background-color: #f7f7f8;
  56. }
  57. .mui-navbar .mui-bar {
  58. position: absolute;
  59. background: transparent;
  60. text-align: center;
  61. }
  62. .mui-android .mui-navbar-inner.mui-navbar-left {
  63. opacity: 0;
  64. }
  65. .mui-ios .mui-navbar-left .mui-left,
  66. .mui-ios .mui-navbar-left .mui-center,
  67. .mui-ios .mui-navbar-left .mui-right {
  68. opacity: 0;
  69. }
  70. .mui-navbar .mui-btn-nav {
  71. -webkit-transition: none;
  72. transition: none;
  73. -webkit-transition-duration: .0s;
  74. transition-duration: .0s;
  75. }
  76. .mui-navbar .mui-bar .mui-title {
  77. display: inline-block;
  78. width: auto;
  79. }
  80. .mui-page-shadow {
  81. position: absolute;
  82. right: 100%;
  83. top: 0;
  84. width: 16px;
  85. height: 100%;
  86. z-index: -1;
  87. content: '';
  88. }
  89. .mui-page-shadow {
  90. 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%);
  91. 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%);
  92. }
  93. .mui-navbar-inner.mui-transitioning,
  94. .mui-navbar-inner .mui-transitioning {
  95. -webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
  96. transition: opacity 300ms ease, transform 300ms ease;
  97. }
  98. .mui-page {
  99. display: none;
  100. }
  101. .mui-pages .mui-page {
  102. display: block;
  103. }
  104. .mui-page .mui-table-view:first-child {
  105. margin-top: 15px;
  106. }
  107. .mui-page .mui-table-view:last-child {
  108. margin-bottom: 30px;
  109. }
  110. .mui-table-view {
  111. margin-top: 20px;
  112. }
  113. .mui-table-view span.mui-pull-right {
  114. color: #999;
  115. }
  116. .mui-table-view-divider {
  117. background-color: #efeff4;
  118. font-size: 14px;
  119. }
  120. .mui-table-view-divider:before,
  121. .mui-table-view-divider:after {
  122. height: 0;
  123. }
  124. .head {
  125. height: 40px;
  126. }
  127. #head {
  128. line-height: 40px;
  129. }
  130. .head-img {
  131. width: 40px;
  132. height: 40px;
  133. }
  134. #head-img1 {
  135. position: absolute;
  136. bottom: 10px;
  137. right: 40px;
  138. width: 40px;
  139. height: 40px;
  140. }
  141. .update {
  142. font-style: normal;
  143. color: #999999;
  144. margin-right: -25px;
  145. font-size: 15px
  146. }
  147. .mui-fullscreen {
  148. position: fixed;
  149. z-index: 20;
  150. background-color: #000;
  151. }
  152. .mui-ios .mui-navbar .mui-bar .mui-title {
  153. position: static;
  154. }
  155. /*问题反馈在setting页面单独的css*/
  156. #feedback .mui-popover{
  157. position: fixed;
  158. }
  159. #feedback .mui-table-view:last-child {
  160. margin-bottom: 0px;
  161. }
  162. #feedback .mui-table-view:first-child {
  163. margin-top: 0px;
  164. }
  165. /*问题反馈在setting页面单独的css==end*/
  166. </style>
  167. <link rel="stylesheet" type="text/css" href="css/feedback.css" />
  168. </head>
  169. <body class="mui-fullscreen">
  170. <!--页面主结构开始-->
  171. <div id="app" class="mui-views">
  172. <div class="mui-view">
  173. <div class="mui-navbar">
  174. </div>
  175. <div class="mui-pages">
  176. </div>
  177. </div>
  178. </div>
  179. <!--页面主结构结束-->
  180. <!--单页面开始-->
  181. <div id="setting" class="mui-page">
  182. <!--页面标题栏开始-->
  183. <div class="mui-navbar-inner mui-bar mui-bar-nav">
  184. <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
  185. <span class="mui-icon mui-icon-left-nav"></span>
  186. </button>
  187. <h1 class="mui-center mui-title">设置</h1>
  188. </div>
  189. <!--页面标题栏结束-->
  190. <!--页面主内容区开始-->
  191. <div class="mui-page-content">
  192. <div class="mui-scroll-wrapper">
  193. <div class="mui-scroll">
  194. <ul class="mui-table-view mui-table-view-chevron">
  195. <li class="mui-table-view-cell mui-media">
  196. <a class="mui-navigate-right" href="#account">
  197. <img class="mui-media-object mui-pull-left head-img" id="head-img" src="">
  198. <div class="mui-media-body">
  199. Hello MUI
  200. <p class='mui-ellipsis'>账号:hellomui</p>
  201. </div>
  202. </a>
  203. </li>
  204. </ul>
  205. <ul class="mui-table-view mui-table-view-chevron">
  206. <li class="mui-table-view-cell">
  207. <a href="#account" class="mui-navigate-right">账号与安全</a>
  208. </li>
  209. </ul>
  210. <ul class="mui-table-view mui-table-view-chevron">
  211. <li class="mui-table-view-cell">
  212. <a href="#notifications" class="mui-navigate-right">新消息通知</a>
  213. </li>
  214. <li class="mui-table-view-cell">
  215. <a href="#privacy" class="mui-navigate-right">隐私</a>
  216. </li>
  217. <li class="mui-table-view-cell">
  218. <a href="#general" class="mui-navigate-right">通用</a>
  219. </li>
  220. </ul>
  221. <ul class="mui-table-view mui-table-view-chevron">
  222. <li class="mui-table-view-cell">
  223. <a href="#about" class="mui-navigate-right">关于MUI <i class="mui-pull-right update">V3.1.0</i></a>
  224. </li>
  225. </ul>
  226. <ul class="mui-table-view">
  227. <li class="mui-table-view-cell" style="text-align: center;">
  228. <a>退出登录</a>
  229. </li>
  230. </ul>
  231. </div>
  232. </div>
  233. </div>
  234. <!--页面主内容区结束-->
  235. </div>
  236. <!--单页面结束-->
  237. <div id="account" class="mui-page">
  238. <div class="mui-navbar-inner mui-bar mui-bar-nav">
  239. <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
  240. <span class="mui-icon mui-icon-left-nav"></span>设置
  241. </button>
  242. <h1 class="mui-center mui-title">账号与安全</h1>
  243. </div>
  244. <div class="mui-page-content">
  245. <div class="mui-scroll-wrapper">
  246. <div class="mui-scroll">
  247. <ul class="mui-table-view">
  248. <li class="mui-table-view-cell">
  249. <a id="head" class="mui-navigate-right">头像
  250. <span class="mui-pull-right head">
  251. <img class="head-img mui-action-preview" id="head-img1" src=""/>
  252. </span>
  253. </a>
  254. </li>
  255. <li class="mui-table-view-cell">
  256. <a>姓名<span class="mui-pull-right">Hbuilder</span></a>
  257. </li>
  258. <li class="mui-table-view-cell">
  259. <a>HBuilder账号<span class="mui-pull-right">hbuilder@dcloud.io</span></a>
  260. </li>
  261. </ul>
  262. <ul class="mui-table-view">
  263. <li class="mui-table-view-cell">
  264. <a>QQ号<span class="mui-pull-right">88888888</span></a>
  265. </li>
  266. <li class="mui-table-view-cell">
  267. <a>手机号<span class="mui-pull-right">18601234567</span></a>
  268. </li>
  269. <li class="mui-table-view-cell">
  270. <a>邮箱地址<span class="mui-pull-right">hbuilder@dcloud.io</span></a>
  271. </li>
  272. </ul>
  273. </div>
  274. </div>
  275. </div>
  276. </div>
  277. <div id="notifications" class="mui-page">
  278. <div class="mui-navbar-inner mui-bar mui-bar-nav">
  279. <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
  280. <span class="mui-icon mui-icon-left-nav"></span>设置
  281. </button>
  282. <h1 class="mui-center mui-title">新消息通知</h1>
  283. </div>
  284. <div class="mui-page-content">
  285. <div class="mui-scroll-wrapper">
  286. <div class="mui-scroll">
  287. <ul class="mui-table-view">
  288. <li class="mui-table-view-cell">
  289. <a>接收新消息通知<span class="mui-pull-right">已开启</span></a>
  290. </li>
  291. </ul>
  292. <ul class="mui-table-view">
  293. <li class="mui-table-view-cell">
  294. 通知显示消息详情
  295. <div class="mui-switch mui-active mui-switch-mini">
  296. <div class="mui-switch-handle"></div>
  297. </div>
  298. </li>
  299. </ul>
  300. <div class="mui-content-padded">
  301. <p>若关闭,当收到新消息时,通知提示将不显示发信人和内容摘要</p>
  302. </div>
  303. <ul class="mui-table-view mui-table-view-chevron">
  304. <li class="mui-table-view-cell">
  305. <a href="#notifications_disturb" class="mui-navigate-right">功能消息免打扰</a>
  306. </li>
  307. </ul>
  308. <div class="mui-content-padded">
  309. <p>设置系统功能消息提示声音和震动的时段</p>
  310. </div>
  311. <ul class="mui-table-view">
  312. <li class="mui-table-view-cell">
  313. <a>接收新消息通知<span class="mui-pull-right">已开启</span></a>
  314. </li>
  315. </ul>
  316. <ul class="mui-table-view">
  317. <li class="mui-table-view-cell">
  318. 声音
  319. <div class="mui-switch mui-active mui-switch-mini">
  320. <div class="mui-switch-handle"></div>
  321. </div>
  322. </li>
  323. <li class="mui-table-view-cell">
  324. 震动
  325. <div class="mui-switch mui-active mui-switch-mini">
  326. <div class="mui-switch-handle"></div>
  327. </div>
  328. </li>
  329. </ul>
  330. <div class="mui-content-padded">
  331. <p>当HelloMUI在运行时,你可以设置是否需要声音或者震动</p>
  332. </div>
  333. <div></div>
  334. </div>
  335. </div>
  336. </div>
  337. </div>
  338. <div id="notifications_disturb" class="mui-page">
  339. <div class="mui-navbar-inner mui-bar mui-bar-nav">
  340. <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
  341. <span class="mui-icon mui-icon-left-nav"></span>新消息通知
  342. </button>
  343. <h1 class="mui-center mui-title">功能消息免打扰</h1>
  344. </div>
  345. <div class="mui-page-content">
  346. <div class="mui-scroll-wrapper">
  347. <div class="mui-scroll">
  348. <ul class="mui-table-view mui-table-view-radio">
  349. <li class="mui-table-view-cell">
  350. <a class="mui-navigate-right">开启</a>
  351. </li>
  352. <li class="mui-table-view-cell">
  353. <a class="mui-navigate-right">只在夜间开启</a>
  354. </li>
  355. <li class="mui-table-view-cell">
  356. <a class="mui-navigate-right">关闭</a>
  357. </li>
  358. </ul>
  359. </div>
  360. </div>
  361. </div>
  362. </div>
  363. <div id="privacy" class="mui-page">
  364. <div class="mui-navbar-inner mui-bar mui-bar-nav">
  365. <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
  366. <span class="mui-icon mui-icon-left-nav"></span>设置
  367. </button>
  368. <h1 class="mui-center mui-title">隐私</h1>
  369. </div>
  370. <div class="mui-page-content">
  371. <div class="mui-scroll-wrapper">
  372. <div class="mui-scroll">
  373. <ul class="mui-table-view">
  374. <li class="mui-table-view-divider">通讯录</li>
  375. <li class="mui-table-view-cell">
  376. 加我为朋友时需要验证
  377. <div class="mui-switch mui-active mui-switch-mini">
  378. <div class="mui-switch-handle"></div>
  379. </div>
  380. </li>
  381. </ul>
  382. <ul class="mui-table-view">
  383. <li class="mui-table-view-cell">
  384. 向我推荐QQ好友
  385. <div class="mui-switch mui-switch-mini">
  386. <div class="mui-switch-handle"></div>
  387. </div>
  388. </li>
  389. <li class="mui-table-view-cell">
  390. 通过QQ号搜索到我
  391. <div class="mui-switch mui-switch-mini">
  392. <div class="mui-switch-handle"></div>
  393. </div>
  394. </li>
  395. </ul>
  396. <ul class="mui-table-view">
  397. <li class="mui-table-view-cell">
  398. 可通过手机号搜索到我
  399. <div class="mui-switch mui-active mui-switch-mini">
  400. <div class="mui-switch-handle"></div>
  401. </div>
  402. </li>
  403. <li class="mui-table-view-cell">
  404. 向我推荐通讯录朋友
  405. <div class="mui-switch mui-switch-mini">
  406. <div class="mui-switch-handle"></div>
  407. </div>
  408. </li>
  409. <li class="mui-table-view-divider">开启后,为你推荐已经开通HBuilder的手机联系人</li>
  410. </ul>
  411. <ul class="mui-table-view">
  412. <li class="mui-table-view-cell">
  413. 通过HBuilder账号搜索到我
  414. <div class="mui-switch mui-active mui-switch-mini">
  415. <div class="mui-switch-handle"></div>
  416. </div>
  417. </li>
  418. <li class="mui-table-view-divider">关闭后,其他用户将不能通过HBuilder号搜索到你</li>
  419. </ul>
  420. </div>
  421. </div>
  422. </div>
  423. </div>
  424. <div id="general" class="mui-page">
  425. <div class="mui-navbar-inner mui-bar mui-bar-nav">
  426. <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
  427. <span class="mui-icon mui-icon-left-nav"></span>设置
  428. </button>
  429. <h1 class="mui-center mui-title">通用</h1>
  430. </div>
  431. <div class="mui-page-content">
  432. <div class="mui-scroll-wrapper">
  433. <div class="mui-scroll">
  434. <ul class="mui-table-view">
  435. <li class="mui-table-view-cell">
  436. 多语言
  437. </li>
  438. </ul>
  439. <ul class="mui-table-view">
  440. <li class="mui-table-view-cell">
  441. 听筒模式
  442. <div class="mui-switch mui-switch-mini">
  443. <div class="mui-switch-handle"></div>
  444. </div>
  445. </li>
  446. </ul>
  447. <ul class="mui-table-view">
  448. <li class="mui-table-view-cell">
  449. 功能
  450. </li>
  451. </ul>
  452. </div>
  453. </div>
  454. </div>
  455. </div>
  456. <div id="about" class="mui-page">
  457. <div class="mui-navbar-inner mui-bar mui-bar-nav">
  458. <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
  459. <span class="mui-icon mui-icon-left-nav"></span>设置
  460. </button>
  461. <h1 class="mui-center mui-title">关于MUI</h1>
  462. </div>
  463. <div class="mui-page-content">
  464. <div class="mui-scroll-wrapper">
  465. <div class="mui-scroll">
  466. <ul class="mui-table-view">
  467. <li class="mui-table-view-cell mui-plus-visible">
  468. <a id="rate" class="mui-navigate-right">评分鼓励</a>
  469. </li>
  470. <li class="mui-table-view-cell mui-plus-visible">
  471. <a id="welcome" class="mui-navigate-right">欢迎页</a>
  472. </li>
  473. <li class="mui-table-view-cell mui-plus-visible">
  474. <a id="share" class="mui-navigate-right">分享推荐</a>
  475. </li>
  476. <li class="mui-table-view-cell">
  477. <a id="tel" class="mui-navigate-right">客服电话</a>
  478. </li>
  479. <li class="mui-table-view-cell">
  480. <a id="feedback-btn" href="#feedback" class="mui-navigate-right">问题反馈</a>
  481. </li>
  482. <li id="check_update" class="mui-table-view-cell mui-plus-visible">
  483. <a id="update" class="mui-navigate-right">检查更新</a>
  484. </li>
  485. </ul>
  486. </div>
  487. </div>
  488. </div>
  489. </div>
  490. <div id="feedback" class="mui-page feedback">
  491. <div class="mui-navbar-inner mui-bar mui-bar-nav">
  492. <button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
  493. <span class="mui-icon mui-icon-left-nav"></span>关于MUI
  494. </button>
  495. <button id="submit" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">发送</button>
  496. <h1 class="mui-center mui-title">问题反馈</h1>
  497. </div>
  498. <div class="mui-page-content">
  499. <div class="mui-content-padded">
  500. <div class="mui-inline">问题和意见</div>
  501. <a class="mui-pull-right mui-inline" href="#popover">
  502. 快捷输入
  503. <span class="mui-icon mui-icon-arrowdown"></span>
  504. </a>
  505. <!--快捷输入具体内容,开发者可自己替换常用语-->
  506. <div id="popover" class="mui-popover">
  507. <div class="mui-popover-arrow"></div>
  508. <div class="mui-scroll-wrapper">
  509. <div class="mui-scroll">
  510. <ul class="mui-table-view">
  511. <!--仅流应用环境下显示-->
  512. <li class="mui-table-view-cell stream">
  513. <a href="#">桌面快捷方式创建失败</a>
  514. </li>
  515. <li class="mui-table-view-cell"><a href="#">界面显示错乱</a></li>
  516. <li class="mui-table-view-cell"><a href="#">启动缓慢,卡出翔了</a></li>
  517. <li class="mui-table-view-cell"><a href="#">偶发性崩溃</a></li>
  518. <li class="mui-table-view-cell"><a href="#">UI无法直视,丑哭了</a></li>
  519. </ul>
  520. </div>
  521. </div>
  522. </div>
  523. </div>
  524. <div class="row mui-input-row">
  525. <textarea id='question' class="mui-input-clear question" placeholder="请详细描述你的问题和意见..."></textarea>
  526. </div>
  527. <p>图片(选填,提供问题截图,总大小10M以下)</p>
  528. <div id='image-list' class="row image-list"></div>
  529. <p>QQ/邮箱</p>
  530. <div class="mui-input-row">
  531. <input id='contact' type="text" class="mui-input-clear contact" placeholder="(选填,方便我们联系你 )" />
  532. </div>
  533. <div class="mui-content-padded">
  534. <div class="mui-inline">应用评分</div>
  535. <div class="icons mui-inline" style="margin-left: 6px;">
  536. <i data-index="1" class="mui-icon mui-icon-star"></i>
  537. <i data-index="2" class="mui-icon mui-icon-star"></i>
  538. <i data-index="3" class="mui-icon mui-icon-star"></i>
  539. <i data-index="4" class="mui-icon mui-icon-star"></i>
  540. <i data-index="5" class="mui-icon mui-icon-star"></i>
  541. </div>
  542. </div><br />
  543. </div>
  544. </div>
  545. </body>
  546. <script src="js/mui.min.js "></script>
  547. <script src="js/mui.view.js "></script>
  548. <script src='js/feedback.js'></script>
  549. <script>
  550. mui.init();
  551. //初始化单页view
  552. var viewApi = mui('#app').view({
  553. defaultPage: '#setting'
  554. });
  555. //初始化单页的区域滚动
  556. mui('.mui-scroll-wrapper').scroll();
  557. //分享操作
  558. var shares = {};
  559. mui.plusReady(function() {
  560. plus.share.getServices(function(s) {
  561. if (s && s.length > 0) {
  562. for (var i = 0; i < s.length; i++) {
  563. var t = s[i];
  564. shares[t.id] = t;
  565. }
  566. }
  567. }, function() {
  568. console.log("获取分享服务列表失败");
  569. });
  570. });
  571. setTimeout(function () {
  572. defaultImg();
  573. setTimeout(function() {
  574. initImgPreview();
  575. }, 300);
  576. },500);
  577. //分享链接点击事件
  578. document.getElementById("share").addEventListener('tap', function() {
  579. var ids = [{
  580. id: "weixin",
  581. ex: "WXSceneSession"
  582. }, {
  583. id: "weixin",
  584. ex: "WXSceneTimeline"
  585. }, {
  586. id: "sinaweibo"
  587. }, {
  588. id: "tencentweibo"
  589. }, {
  590. id: "qq"
  591. }],
  592. bts = [{
  593. title: "发送给微信好友"
  594. }, {
  595. title: "分享到微信朋友圈"
  596. }, {
  597. title: "分享到新浪微博"
  598. }, {
  599. title: "分享到腾讯微博"
  600. }, {
  601. title: "分享到QQ"
  602. }];
  603. plus.nativeUI.actionSheet({
  604. cancel: "取消",
  605. buttons: bts
  606. }, function(e) {
  607. var i = e.index;
  608. if (i > 0) {
  609. var s_id = ids[i - 1].id;
  610. var share = shares[s_id];
  611. if (share) {
  612. if (share.authenticated) {
  613. shareMessage(share, ids[i - 1].ex);
  614. } else {
  615. share.authorize(function() {
  616. shareMessage(share, ids[i - 1].ex);
  617. }, function(e) {
  618. console.log("认证授权失败:" + e.code + " - " + e.message);
  619. });
  620. }
  621. } else {
  622. mui.toast("无法获取分享服务,请检查manifest.json中分享插件参数配置,并重新打包")
  623. }
  624. }
  625. });
  626. });
  627. function shareMessage(share, ex) {
  628. var msg = {
  629. extra: {
  630. scene: ex
  631. }
  632. };
  633. msg.href = "http://www.dcloud.io/hellomui/";
  634. msg.title = "最接近原生APP体验的高性能前端框架";
  635. msg.content = "我正在体验HelloMUI,果然很流畅,基本看不出和原生App的差距";
  636. if (~share.id.indexOf('weibo')) {
  637. msg.content += ";体验地址:http://www.dcloud.io/hellomui/";
  638. }
  639. msg.thumbs = ["_www/images/logo.png"];
  640. share.send(msg, function() {
  641. console.log("分享到\"" + share.description + "\"成功! ");
  642. }, function(e) {
  643. console.log("分享到\"" + share.description + "\"失败: " + e.code + " - " + e.message);
  644. });
  645. }
  646. //去评分
  647. document.getElementById("rate").addEventListener('tap', function() {
  648. if (mui.os.ios) {
  649. location.href = 'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewContentsUserReviews?id=682211190&pageNumber=0&sortOrdering=2&type=&mt=8';
  650. } else if (mui.os.android) {
  651. plus.runtime.openURL("market://details?id=io.dcloud.HelloMUI", function(e) {
  652. plus.runtime.openURL("market://details?id=io.dcloud.HelloMUI", function(e) {
  653. mui.alert("360手机助手和应用宝,你一个都没装,暂时无法评分,感谢支持");
  654. }, "com.qihoo.appstore");
  655. }, "com.tencent.android.qqdownloader");
  656. }
  657. });
  658. //客服电话
  659. document.getElementById("tel").addEventListener('tap', function() {
  660. if(mui.os.plus){
  661. plus.device.dial("114");
  662. }else{
  663. location.href = 'tel:114';
  664. }
  665. });
  666. // //意见反馈
  667. // document.getElementById("quest").addEventListener('tap', function() {
  668. //
  669. // });
  670. //
  671. //检查更新
  672. document.getElementById("update").addEventListener('tap', function() {
  673. var server = "http://www.dcloud.io/check/update"; //获取升级描述文件服务器地址
  674. mui.getJSON(server, {
  675. "appid": plus.runtime.appid,
  676. "version": plus.runtime.version,
  677. "imei": plus.device.imei
  678. }, function(data) {
  679. if (data.status) {
  680. plus.ui.confirm(data.note, function(i) {
  681. if (0 == i) {
  682. plus.runtime.openURL(data.url);
  683. }
  684. }, data.title, ["立即更新", "取  消"]);
  685. } else {
  686. mui.toast('Hello MUI 已是最新版本~')
  687. }
  688. });
  689. });
  690. var view = viewApi.view;
  691. (function($) {
  692. //处理view的后退与webview后退
  693. var oldBack = $.back;
  694. $.back = function() {
  695. if (viewApi.canBack()) { //如果view可以后退,则执行view的后退
  696. viewApi.back();
  697. } else { //执行webview后退
  698. oldBack();
  699. }
  700. };
  701. //监听页面切换事件方案1,通过view元素监听所有页面切换事件,目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
  702. //第一个参数为事件名称,第二个参数为事件回调,其中e.detail.page为当前页面的html对象
  703. view.addEventListener('pageBeforeShow', function(e) {
  704. // console.log(e.detail.page.id + ' beforeShow');
  705. });
  706. view.addEventListener('pageShow', function(e) {
  707. // console.log(e.detail.page.id + ' show');
  708. });
  709. view.addEventListener('pageBeforeBack', function(e) {
  710. // console.log(e.detail.page.id + ' beforeBack');
  711. });
  712. view.addEventListener('pageBack', function(e) {
  713. // console.log(e.detail.page.id + ' back');
  714. });
  715. })(mui);
  716. //更换头像
  717. mui(".mui-table-view-cell").on("tap", "#head", function(e) {
  718. if(mui.os.plus){
  719. var a = [{
  720. title: "拍照"
  721. }, {
  722. title: "从手机相册选择"
  723. }];
  724. plus.nativeUI.actionSheet({
  725. title: "修改头像",
  726. cancel: "取消",
  727. buttons: a
  728. }, function(b) {
  729. switch (b.index) {
  730. case 0:
  731. break;
  732. case 1:
  733. getImage();
  734. break;
  735. case 2:
  736. galleryImg();
  737. break;
  738. default:
  739. break
  740. }
  741. })
  742. }
  743. });
  744. function getImage() {
  745. var c = plus.camera.getCamera();
  746. c.captureImage(function(e) {
  747. plus.io.resolveLocalFileSystemURL(e, function(entry) {
  748. var s = entry.toLocalURL() + "?version=" + new Date().getTime();
  749. console.log(s);
  750. document.getElementById("head-img").src = s;
  751. document.getElementById("head-img1").src = s;
  752. //变更大图预览的src
  753. //目前仅有一张图片,暂时如此处理,后续需要通过标准组件实现
  754. document.querySelector("#__mui-imageview__group .mui-slider-item img").src = s + "?version=" + new Date().getTime();;;
  755. }, function(e) {
  756. console.log("读取拍照文件错误:" + e.message);
  757. });
  758. }, function(s) {
  759. console.log("error" + s);
  760. }, {
  761. filename: "_doc/head.jpg"
  762. })
  763. }
  764. function galleryImg() {
  765. plus.gallery.pick(function(a) {
  766. plus.io.resolveLocalFileSystemURL(a, function(entry) {
  767. plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
  768. root.getFile("head.jpg", {}, function(file) {
  769. //文件已存在
  770. file.remove(function() {
  771. console.log("file remove success");
  772. entry.copyTo(root, 'head.jpg', function(e) {
  773. var e = e.fullPath + "?version=" + new Date().getTime();
  774. document.getElementById("head-img").src = e;
  775. document.getElementById("head-img1").src = e;
  776. //变更大图预览的src
  777. //目前仅有一张图片,暂时如此处理,后续需要通过标准组件实现
  778. document.querySelector("#__mui-imageview__group .mui-slider-item img").src = e + "?version=" + new Date().getTime();;
  779. },
  780. function(e) {
  781. console.log('copy image fail:' + e.message);
  782. });
  783. }, function() {
  784. console.log("delete image fail:" + e.message);
  785. });
  786. }, function() {
  787. //文件不存在
  788. entry.copyTo(root, 'head.jpg', function(e) {
  789. var path = e.fullPath + "?version=" + new Date().getTime();
  790. document.getElementById("head-img").src = path;
  791. document.getElementById("head-img1").src = path;
  792. //变更大图预览的src
  793. //目前仅有一张图片,暂时如此处理,后续需要通过标准组件实现
  794. document.querySelector("#__mui-imageview__group .mui-slider-item img").src = path;
  795. },
  796. function(e) {
  797. console.log('copy image fail:' + e.message);
  798. });
  799. });
  800. }, function(e) {
  801. console.log("get _www folder fail");
  802. })
  803. }, function(e) {
  804. console.log("读取拍照文件错误:" + e.message);
  805. });
  806. }, function(a) {}, {
  807. filter: "image"
  808. })
  809. };
  810. function defaultImg() {
  811. if(mui.os.plus){
  812. plus.io.resolveLocalFileSystemURL("_doc/head.jpg", function(entry) {
  813. var s = entry.fullPath + "?version=" + new Date().getTime();;
  814. document.getElementById("head-img").src = s;
  815. document.getElementById("head-img1").src = s;
  816. }, function(e) {
  817. document.getElementById("head-img").src = 'img/logo.png';
  818. document.getElementById("head-img1").src = 'img/logo.png';
  819. })
  820. }else{
  821. document.getElementById("head-img").src = 'img/logo.png';
  822. document.getElementById("head-img1").src = 'img/logo.png';
  823. }
  824. }
  825. document.getElementById("head-img1").addEventListener('tap', function(e) {
  826. e.stopPropagation();
  827. });
  828. document.getElementById("welcome").addEventListener('tap', function(e) {
  829. //显示启动导航
  830. mui.openWindow({
  831. id: 'guide',
  832. url: 'guide.html',
  833. show: {
  834. aniShow: 'fade-in',
  835. duration: 300
  836. },
  837. waiting: {
  838. autoShow: false
  839. }
  840. });
  841. });
  842. function initImgPreview() {
  843. var imgs = document.querySelectorAll("img.mui-action-preview");
  844. imgs = mui.slice.call(imgs);
  845. if (imgs && imgs.length > 0) {
  846. var slider = document.createElement("div");
  847. slider.setAttribute("id", "__mui-imageview__");
  848. slider.classList.add("mui-slider");
  849. slider.classList.add("mui-fullscreen");
  850. slider.style.display = "none";
  851. slider.addEventListener("tap", function() {
  852. slider.style.display = "none";
  853. });
  854. slider.addEventListener("touchmove", function(event) {
  855. event.preventDefault();
  856. })
  857. var slider_group = document.createElement("div");
  858. slider_group.setAttribute("id", "__mui-imageview__group");
  859. slider_group.classList.add("mui-slider-group");
  860. imgs.forEach(function(value, index, array) {
  861. //给图片添加点击事件,触发预览显示;
  862. value.addEventListener('tap', function() {
  863. slider.style.display = "block";
  864. _slider.refresh();
  865. _slider.gotoItem(index, 0);
  866. })
  867. var item = document.createElement("div");
  868. item.classList.add("mui-slider-item");
  869. var a = document.createElement("a");
  870. var img = document.createElement("img");
  871. img.setAttribute("src", value.src);
  872. a.appendChild(img)
  873. item.appendChild(a);
  874. slider_group.appendChild(item);
  875. });
  876. slider.appendChild(slider_group);
  877. document.body.appendChild(slider);
  878. var _slider = mui(slider).slider();
  879. }
  880. }
  881. if(mui.os.stream){
  882. document.getElementById("check_update").display = "none";
  883. }
  884. </script>
  885. </html>