1
0

setting.html 28 KB

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