frame4.html 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <title>个人中心</title>
  8. <link rel="stylesheet" type="text/css" href="../../css/api.css" />
  9. <link rel="stylesheet" type="text/css" href="../../css/style.css" />
  10. <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
  11. <link rel="stylesheet" href="../../css/projeck.css">
  12. <style>
  13. .personal_header_color {
  14. width: 100%;
  15. height: 57.5px;
  16. background: #009FE8;
  17. }
  18. .personal_details_message {
  19. display: flex;
  20. align-items: center;
  21. justify-content: space-between;
  22. margin: -34px 14px 0 14px;
  23. background: rgba(255, 255, 255, 1);
  24. box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.05);
  25. border-radius: 2px;
  26. padding: 6px 6px 9px 8px;
  27. }
  28. .tips_items_phone,
  29. .tips_items_signature {
  30. display: none;
  31. }
  32. .tips_phone,
  33. .tips_signature {
  34. margin: 5px 14px 0 14px;
  35. padding: 10px 0 10px 9px;
  36. display: flex;
  37. align-items: center;
  38. background: rgba(255, 255, 255, 1);
  39. box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.05);
  40. border-radius: 5px;
  41. color: #7F8C8D;
  42. /*visibility: hidden;*/
  43. }
  44. .tips_phone img,
  45. .tips_signature img {
  46. width: 21px;
  47. height: 21px;
  48. }
  49. .tips_phone div,
  50. .tips_signature div {
  51. margin-left: 6px;
  52. }
  53. .left_avatar_personal_info {
  54. display: flex;
  55. align-items: center;
  56. }
  57. .avatar_container img {
  58. width: 55px;
  59. height: 55px;
  60. border-radius: 100%;
  61. box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.1);
  62. }
  63. .details_info {
  64. margin-left: 12px;
  65. }
  66. .details_info .info_header {
  67. display: flex;
  68. align-items: center;
  69. }
  70. .info_header_name {
  71. font-size: 17px;
  72. font-weight: 700;
  73. }
  74. .info_section_footer {
  75. font-size: 13px;
  76. }
  77. .info_header .name {
  78. color: #232627;
  79. font-size: 18px;
  80. font-weight: 500;
  81. }
  82. .info_header .qrcode_img img {
  83. width: 18px;
  84. height: 18px;
  85. margin-left: 5px;
  86. }
  87. .right_handle_arrow img {
  88. width: 14px;
  89. height: 14px
  90. }
  91. .icon_items {
  92. margin: 0 16px 23px 16px;
  93. }
  94. .icon_items ul {
  95. display: flex;
  96. flex-wrap: wrap;
  97. }
  98. .icon_items ul li {
  99. width: 33%;
  100. text-align: center;
  101. }
  102. .icon_items ul li {
  103. display: flex;
  104. flex-flow: column;
  105. justify-content: center;
  106. align-items: center;
  107. padding-top: 23px;
  108. color: #232627;
  109. font-size: 14px;
  110. }
  111. .icon_items ul li div:last-child {
  112. margin-top: 6px;
  113. }
  114. /*.icon_items ul li:last-child {
  115. padding-top: 6px;
  116. }*/
  117. .icon_items ul li img {
  118. width: 43px;
  119. height: 43px;
  120. }
  121. .line {
  122. height: 4px;
  123. background: rgba(0, 159, 232, 1);
  124. margin: 0 14px;
  125. }
  126. .handle_list_item {
  127. margin: 0 15px 0 23px;
  128. }
  129. .handle_list_item ul li {
  130. height: 45px;
  131. display: flex;
  132. align-items: center;
  133. justify-content: space-between;
  134. border-bottom: solid 1px #F5F5F5
  135. }
  136. .handle_list_item ul li:last-child {
  137. border-bottom: none
  138. }
  139. .handle_list_item ul li div:first-child {
  140. display: flex;
  141. align-items: center;
  142. }
  143. .handle_list_item ul li div:first-child span {
  144. display: block;
  145. margin-left: 6px;
  146. }
  147. .handle_list_item ul li div:first-child img {
  148. width: 18px;
  149. height: 18px;
  150. }
  151. .filter_gray_img {
  152. -webkit-filter: grayscale(100%);
  153. -moz-filter: grayscale(100%);
  154. -ms-filter: grayscale(100%);
  155. -o-filter: grayscale(100%);
  156. filter: grayscale(100%);
  157. filter: gray;
  158. }
  159. </style>
  160. </head>
  161. <body style="background-color:#fff;">
  162. <div class="api_layout">
  163. <div class="personal_header_color"></div>
  164. <div class="personal_details_message" onclick="handleOpenPersonalQrCode()">
  165. <div class="left_avatar_personal_info">
  166. <!-- http://jiewei-icon.oss-cn-beijing.aliyuncs.com/icon/default-avatar.png -->
  167. <div class="avatar_container" onclick="openPersonal()"><img id="avatar_img" src="" alt=""></div>
  168. <div class="details_info">
  169. <div class="info_header">
  170. <div class="info_header_name"></div>
  171. <div class="qrcode_img" onclick="handleOpenPersonQrCode()"><img src="../../image/qrCodeImg.png" alt=""></div>
  172. </div>
  173. <div class="info_section_footer"></div>
  174. </div>
  175. </div>
  176. <div class="right_handle_arrow"><img src="../../image/more.png" alt=""></div>
  177. </div>
  178. <div class="tips_items_phone" onclick="openBind()">
  179. <div class="tips_phone">
  180. <img src="../../image/tips.png" alt="">
  181. <div>未绑定手机号,请立即绑定手机号。</div>
  182. </div>
  183. </div>
  184. <div class="tips_items_signature" onclick="handleOpenSignature()">
  185. <div class="tips_signature">
  186. <img src="../../image/tips.png" alt="">
  187. <div>未添加手写签名,请添加手写签名。</div>
  188. </div>
  189. </div>
  190. <div class="icon_items">
  191. <ul>
  192. <li class="message_alert" onclick="openNewsList()">
  193. <div><img src="../../icon/messagealert.png" alt=""></div>
  194. <div>消息提醒</div>
  195. </li>
  196. <li onclick="getCollectionList()">
  197. <div><img src="../../icon/Collection.png" alt=""></div>
  198. <div>收藏</div>
  199. </li>
  200. <li onclick="openExamine()">
  201. <div><img src="../../icon/Workorderapproval.png" alt=""></div>
  202. <div>工单审核</div>
  203. </li>
  204. <li>
  205. <div><img class="filter_gray_img" src="../../icon/Learningintegra.png" alt=""></div>
  206. <div>学习积分</div>
  207. </li>
  208. <li>
  209. <div><img class="filter_gray_img" src="../../icon/Integralmall.png" alt=""></div>
  210. <div>积分商城</div>
  211. </li>
  212. <li>
  213. <div><img class="filter_gray_img" src="../../icon/LearningReport.png" alt=""></div>
  214. <div>学习报表</div>
  215. </li>
  216. <li onclick="openCloud()">
  217. <div><img src="../../icon/Personalcloudisk.png" alt=""></div>
  218. <div>个人云盘</div>
  219. </li>
  220. <li onclick="handleUserExplain()">
  221. <div><img src="../../icon/Usermanual.png" alt=""></div>
  222. <div>使用手册</div>
  223. </li>
  224. <li onclick="handleServicePhone()">
  225. <div><img src="../../icon/Servicephone.png" alt=""></div>
  226. <div>服务电话</div>
  227. </li>
  228. <li onclick="handleFeedback()">
  229. <div><img src="../../icon/Suggestionfeedback.png" alt=""></div>
  230. <div>建议反馈</div>
  231. </li>
  232. <li onclick="handleDownQrcode()">
  233. <div><img src="../../icon/downQrcode.png" alt=""></div>
  234. <div>下载二维码</div>
  235. </li>
  236. </ul>
  237. </div>
  238. <div class="line"></div>
  239. <div class="handle_list_item">
  240. <ul>
  241. <li onclick="openForget()">
  242. <div>
  243. <img src="../../icon/ChangePassword.png" alt="">
  244. <span>修改密码</span>
  245. </div>
  246. <div class="right_handle_arrow">
  247. <img src="../../image/more.png" alt="">
  248. </div>
  249. </li>
  250. <li onclick="signOut()">
  251. <div>
  252. <img src="../../icon/Signout.png" alt="">
  253. <span>退出登录</span>
  254. </div>
  255. <div class="right_handle_arrow">
  256. <img src="../../image/more.png" alt="">
  257. </div>
  258. </li>
  259. <li onclick="handleUpdateTitle()">
  260. <div>
  261. <img src="../../icon/Updatelog.png" alt="">
  262. <span>更新日志</span>
  263. </div>
  264. <div class="right_handle_arrow">
  265. <img src="../../image/more.png" alt="">
  266. </div>
  267. </li>
  268. </ul>
  269. </div>
  270. </div>
  271. </body>
  272. </html>
  273. <script type="text/javascript" src="../../script/api.js"></script>
  274. <!-- <script src="../../script/aui-toast.js" charset="utf-8"></script> -->
  275. <!-- <script src="../../script/fastclick.min.js" charset="utf-8"></script> -->
  276. <script src="../../script/config.js" charset="utf-8"></script>
  277. <script type="text/javascript">
  278. var token, uuid, headers, personalName = '',
  279. staff_num = '',username='';
  280. var toast = new auiToast();
  281. apiready = function() {
  282. var info = $api.getStorage('data'),
  283. user = JSON.parse(info).data.user;
  284. token = JSON.parse(info).data.access_token;
  285. staff_num = JSON.parse(info).data.user.staff_num;
  286. personalName = JSON.parse(info).data.user.name;
  287. uuid = JSON.parse(info).data.user.staff_num;
  288. username = JSON.parse(info).data.user.name;
  289. headers = {
  290. "Authorization": "Bearer " + token
  291. };
  292. newsNum()
  293. // 个人信息
  294. $http.fnReuestData(UrlRouter.userInfoApi, headers, 'post', '', personalCenterInfo);
  295. api.addEventListener({
  296. name: 'userInfo'
  297. }, function(ret, err) {
  298. $http.fnReuestData(UrlRouter.userInfoApi, headers, 'post', '', personalCenterInfo);
  299. });
  300. api.addEventListener({
  301. name: 'myNews'
  302. }, function(ret, err) {
  303. newsNum()
  304. });
  305. // 手机号绑定更新 -> 对应 forgetBind/bindPhone.html
  306. api.addEventListener({
  307. name: 'updateUserInfoPhone'
  308. }, function(ret, err) {
  309. $http.fnReuestData(UrlRouter.userInfoApi, headers, 'post', '', personalCenterInfo);
  310. });
  311. // 签名更新
  312. api.addEventListener({
  313. name: 'updateUserInfo'
  314. }, function(ret, err) {
  315. $http.fnReuestData(UrlRouter.userInfoApi, headers, 'post', '', personalCenterInfo);
  316. });
  317. };
  318. // 云盘
  319. function openCloud(){
  320. api.showProgress({
  321. title: '登陆云盘中',
  322. text: '',
  323. modal: true
  324. });
  325. // console.log(UrlRouter.loginExtends);
  326. $http.requestData(UrlRouter.loginExtends,'post',
  327. {username,userNo:uuid})
  328. .then(res=>{
  329. // console.log(JSON.stringify(res));
  330. if (res.code === 0) {
  331. api.hideProgress();
  332. setTimeout(()=>{
  333. $event.openTabLayout('cloudDisk','../cloudDisk/cloudDiskList','云盘',{cloudtoken:res.data.token});
  334. },200)
  335. }else {
  336. api.toast({
  337. msg: '用户名或工号错误!',
  338. duration: 2000,
  339. location: 'top'
  340. });
  341. api.hideProgress();
  342. }
  343. })
  344. .catch(err=>{
  345. api.toast({
  346. msg: '网络错误,请检查网络!',
  347. duration: 2000,
  348. location: 'top'
  349. });
  350. api.hideProgress();
  351. })
  352. }
  353. // 个人信息展示
  354. function personalCenterInfo(ret, err) {
  355. if (ret) {
  356. toast.hide();
  357. if (ret.code === 0) {
  358. var ret = ret.data;
  359. var image = 'http://jiewei-icon.oss-cn-beijing.aliyuncs.com/icon/default-avatar.png';
  360. // var bindPhone = $api.dom('.api_phoneBind_wrap');
  361. var head_img = $api.byId('avatar_img'),
  362. name = $api.dom('.info_header_name'),
  363. api_dep = $api.dom('.info_section_footer'),
  364. // personalName = ret.name,
  365. // staff_num = ret.staff_num,
  366. mobile = ret.mobile,
  367. signature = ret.sign
  368. if (mobile == null) {
  369. $api.css($api.dom('.tips_items_phone'), 'display: block');
  370. } else {
  371. $api.css($api.dom('.tips_items_phone'), 'display: none');
  372. }
  373. if (signature == null) {
  374. $api.css($api.dom('.tips_items_signature'), 'display: block');
  375. } else {
  376. $api.css($api.dom('.tips_items_signature'), 'display: none');
  377. }
  378. ret.name == null ? $api.html(name, '无') : $api.html(name, ret.name);
  379. ret.section_fullname == null ? $api.html(api_dep, '无') : $api.html(api_dep, ret.section_fullname);
  380. ret.avatar == null ? head_img.src = image : head_img.src = ret.avatar;
  381. } else if (ret.code === 401) {
  382. api.alert({
  383. title: '提示',
  384. msg: '登录过期,重新登录',
  385. }, function(ret, err) {
  386. var index = ret.buttonIndex;
  387. if (index == 1) {
  388. api.setStatusBarStyle({
  389. color: 'rgba(0,0,0,0)',
  390. style: 'light'
  391. });
  392. api.closeWin({
  393. name: 'index'
  394. });
  395. }
  396. });
  397. }
  398. } else {
  399. toast.hide();
  400. api.toast({
  401. msg: '网络错误',
  402. duration: 2000,
  403. location: 'bottom'
  404. });
  405. }
  406. }
  407. // 打开个人中心二维码
  408. function handleOpenPersonQrCode() {
  409. }
  410. // 打开二维码页面详情
  411. function handleOpenPersonalQrCode() {
  412. let title = `${staff_num}-${personalName}`;
  413. $http.requestData(`${UrlRouter.getPagebyNOAndName}?title=${title}`, 'get', '')
  414. .then(ret => {
  415. if (ret.data.id) {
  416. $event.openWin('browseQrcode_win', '../browseQrcode/browseQrcode_win', {
  417. pageId: ret.data.id,
  418. title: '人员详情'
  419. }, '');
  420. }
  421. })
  422. .catch(err => {
  423. // console.log(JSON.stringify(err));
  424. })
  425. }
  426. // 更新日志
  427. function handleUpdateTitle() {
  428. $event.openWin('browseQrcode_win', '../browseQrcode/browseQrcode_win', {
  429. pageId: pageIdConfig.updateLog,
  430. title: '更新日志'
  431. }, '');
  432. }
  433. // 修改密码
  434. function openForget() {
  435. $event.openTabLayout('forget', '../forgetBind/forgetPass', '修改密码', '');
  436. }
  437. // 绑定手机号
  438. function openBind() {
  439. $event.openTabLayout('bindPhone', '../forgetBind/bindPhone', '绑定手机号', '');
  440. }
  441. // 打开手写签名页面
  442. function handleOpenSignature() {
  443. $event.openTabLayout('handwrittenSignature', '../personalData/handwrittenSignature', '手写签名', '')
  444. }
  445. // 下载二维码
  446. function handleDownQrcode() {
  447. $event.openTabLayout('qrcodeShare', '../browseQrcode/qrcodeShare', '二维码下载', '');
  448. }
  449. // 我的审核
  450. function openExamine() {
  451. $event.openWin('examineMy_win', '../wordorder/examineMy_win', '', '');
  452. }
  453. // 服务电话
  454. function handleServicePhone() {
  455. api.call({
  456. type: 'tel_prompt',
  457. number: '18152480670'
  458. });
  459. }
  460. // 使用说明
  461. function handleUserExplain() {
  462. $event.openWin('browseQrcode_win', '../browseQrcode/browseQrcode_win', {
  463. pageId: pageIdConfig.userManual,
  464. title: '使用说明'
  465. }, '');
  466. }
  467. // 建议反馈
  468. function handleFeedback() {
  469. $event.openWin('browseQrcode_win', '../browseQrcode/browseQrcode_win', {
  470. pageId: pageIdConfig.suggestionFeedback,
  471. title: '意见反馈'
  472. }, '');
  473. }
  474. // // 我的审核openExamineDetails
  475. // function openExamineDetails() {
  476. // $event.openTabLayout('wordorderDetails','../wordorder/wordorderDetails','我的审核','');
  477. // }
  478. // //我的工单
  479. // function openMyWordOder() {
  480. // $event.openWin('myWordeOrder_win','../wordorder/myWordeOrder_win','','');
  481. // }
  482. // //我的流程
  483. // function openMyWordOderList() {
  484. // $event.openTabLayout('wordorderProcess','../wordorder/wordOrderProcess','工单流程','');
  485. // }
  486. // // 打开详情
  487. function openPersonal() {
  488. $event.openWin('personal', '../personalData/personal', '', '');
  489. }
  490. // //消息列表
  491. function openNewsList() {
  492. $event.openWin('newsList', '../news/news_win', '', '');
  493. }
  494. // 收藏列表
  495. function getCollectionList() {
  496. $event.openTabLayout('collectionList', '../personalData/collectionList', '收藏列表', '')
  497. }
  498. // 清除缓存
  499. // function clearCache() {
  500. // $event.openWin('clearCache','clearCache','','');
  501. // }
  502. // 上传头像
  503. var headImg;
  504. function actionSheetFun() {
  505. api.actionSheet({
  506. title: '选择',
  507. cancelTitle: '取消',
  508. buttons: ['相机', '相册']
  509. }, function(ret, err) {
  510. if (ret.buttonIndex != 3) {
  511. var type = 'camera';
  512. if (ret.buttonIndex == 1) {
  513. type = 'camera';
  514. } else {
  515. type = 'album';
  516. }
  517. api.getPicture({
  518. sourceType: type
  519. }, function(ret, err) {
  520. if (ret) {
  521. photoTailoring(ret.data);
  522. headImg = ret.data;
  523. }
  524. });
  525. }
  526. });
  527. }
  528. function uploadUrl(imgUrl) {
  529. var upload_avater = $api.byId('head_img');
  530. upload_avater.style.backgroundImage = 'url(' + imgUrl + ')';
  531. }
  532. function uploadHead(imgUrl) {
  533. toast.loading({
  534. title: "加载中",
  535. duration: 2000
  536. });
  537. api.ajax({
  538. url: urlphp + 'api/user/avatar/upload',
  539. method: 'post',
  540. headers: {
  541. "Authorization": "Bearer " + token,
  542. },
  543. data: {
  544. files: {
  545. avatar: imgUrl
  546. }
  547. }
  548. }, function(ret, err) {
  549. if (ret) {
  550. toast.hide();
  551. if (ret.code === 0) {
  552. api.toast({
  553. msg: '上传成功',
  554. duration: 2000,
  555. location: 'top'
  556. });
  557. } else {
  558. api.toast({
  559. msg: '上传失败',
  560. duration: 2000,
  561. location: 'top'
  562. });
  563. }
  564. } else {
  565. toast.hide();
  566. api.toast({
  567. msg: '网络错误',
  568. duration: 2000,
  569. location: 'top'
  570. });
  571. }
  572. });
  573. }
  574. // 退出
  575. function signOut() {
  576. api.confirm({
  577. title: '提示',
  578. msg: '退出登录?',
  579. buttons: ['确定', '取消']
  580. }, function(ret, err) {
  581. var index = ret.buttonIndex;
  582. if (index == 1) {
  583. api.setStatusBarStyle({
  584. color: 'rgba(0,0,0,0)',
  585. style: 'light'
  586. });
  587. $api.clearStorage();
  588. api.closeWin({
  589. name: 'index'
  590. });
  591. }
  592. });
  593. }
  594. // 照片裁剪
  595. function photoTailoring(imgPath) {
  596. var systemType = api.systemType;
  597. if (systemType == 'ios') {
  598. api.openFrame({
  599. name: 'tailoring',
  600. url: 'tailoring.html',
  601. rect: {
  602. x: 0,
  603. y: 0,
  604. w: api.winWidth,
  605. h: api.winHeight
  606. },
  607. pageParam: {
  608. tailoring: imgPath
  609. },
  610. bounces: false,
  611. bgColor: 'rgba(0,0,0,0)',
  612. vScrollBarEnabled: false,
  613. hScrollBarEnabled: false,
  614. });
  615. } else if (systemType == 'android') {
  616. var imageCrop = api.require('imageCrop');
  617. imageCrop.clipPhoto({
  618. imgPath: imgPath,
  619. height: api.winHeight,
  620. width: api.winWidth
  621. }, function(ret, err) {
  622. if (ret) {
  623. uploadUrl(ret.imgPath);
  624. uploadHead(ret.imgPath);
  625. }
  626. });
  627. }
  628. }
  629. //工单
  630. function openWordOrder() {
  631. // $event.openWin('wordorder_win','../wordorder/wordorder_win','','')
  632. // $event.openTabLayout('wordOrder','wordorder_frame','工单列表','')
  633. }
  634. // 消息总数
  635. function newsNum() {
  636. $http.fnReuestDataNologing(UrlRouter.getNewsNum, headers, 'get', '', function(ret, err) {
  637. if (ret.code === 0) {
  638. if (ret.data.unread_num === 0) {
  639. $api.css($api.dom('.news_num'), 'display:none');
  640. $api.html($api.dom('.news_num'), '');
  641. } else if (ret.data.unread_num > 99 || ret.data.unread_num == 99) {
  642. $api.css($api.dom('.news_num'), 'display:block');
  643. $api.html($api.dom('.news_num'), 99);
  644. } else {
  645. $api.css($api.dom('.news_num'), 'display:block');
  646. $api.html($api.dom('.news_num'), ret.data.unread_num);
  647. }
  648. }
  649. })
  650. }
  651. </script>