person_center.html 8.07 KB
<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
      <title>我的信息</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/mine/mine.css"/>
      <style>
          html,
          body{
            background: #F4F6F9;
          }
      </style>
  </head>
  <body ontouchstart="">
    <header class="aui-header-bar" style="padding-top:30px;background-color:#5B7FF8">
      <div class="aui-header-left" tapmode onclick="closeWin();">
          <i class="aui-iconfont aui-icon-left" style="color:#FFFFFF;font-size:16px;">返回</i>
      </div>
      <div class="aui-title" style="color:#FFFFFF;">我的信息</div>
      <div class="aui-header-right">
      </div>
    </header>
    <div class="person-center-list-panel">
      <div class="inside-person-center-list-panel">
        <div class="aui-row aui-row-flex" style="padding-top:15px;">
          <div class="aui-col aui-col-span-5 aui-row-flex-start" style="margin-top:0.7rem">
            <span class="title-obj" style="margin-top:0.3rem;">头像</span>
          </div>
          <div class="aui-col aui-col-span-19 aui-row-flex-end">
            <img src="../../image/user-avatar-big.png" id="avatar" style="width:44px;height:44px;border-radius:50%;"/>
          </div>
          <!-- <div class="aui-col aui-col-span-2 aui-row-flex-end" style="margin-top:0.5rem"> -->
            <!-- <i class="aui-iconfont aui-icon-right icon-right" style="color:#AEB8CE;"></i> -->
          <!-- </div> -->
        </div>
        <div class="panel-line" style="margin-top:10px;"></div>
        <div class="aui-row aui-row-flex margin-top-21" tapmode onclick="changeUserName();">
          <div class="aui-col aui-col-span-5 aui-row-flex-start">
            <span class="title-obj">用户名</span>
          </div>
          <div class="aui-col aui-col-span-17 aui-row-flex-end">
            <span class="person-center-span" id="user_name"></span>
          </div>
          <div class="aui-col aui-col-span-2 aui-row-flex-end">
            <i class="aui-iconfont aui-icon-right icon-right" style="color:#AEB8CE;"></i>
          </div>
        </div>
        <div class="panel-line margin-top-21"></div>
        <div class="aui-row aui-row-flex margin-top-21" tapmode onclick="changePhone();">
          <div class="aui-col aui-col-span-5 aui-row-flex-start">
            <span class="title-obj">账号</span>
          </div>
          <div class="aui-col aui-col-span-17 aui-row-flex-end">
            <span class="person-center-span" id="user_phone"></span>
          </div>
          <div class="aui-col aui-col-span-2 aui-row-flex-end">
            <i class="aui-iconfont aui-icon-right icon-right" style="color:#AEB8CE;"></i>
          </div>
        </div>
        <!-- <div class="panel-line margin-top-21"></div> -->
        <!-- <div class="aui-row aui-row-flex margin-top-21" tapmode onclick="cleanCache();">
          <div class="aui-col aui-col-span-5 aui-row-flex-start">
            <span class="title-obj">缓存</span>
          </div>
          <div class="aui-col aui-col-span-17 aui-row-flex-end">
            <span class="person-center-span" id="cache_size">0MB</span>
          </div>
          <div class="aui-col aui-col-span-2 aui-row-flex-end">
            <i class="aui-iconfont aui-icon-right icon-right" style="color:#AEB8CE;"></i>
          </div>
        </div> -->
        <div style="height:21px;"></div>
      </div>
    </div>
    <footer></footer>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="../../script/ctrl.js"></script>
  <script type="text/javascript">
    var token;
    var userId;
      apiready = function(){
        api.parseTapmode();
        var header = $api.dom('header'); // 获取 header 标签元素
        var footer = $api.dom('footer'); // 获取 footer 标签元素
        var headerH = $api.fixStatusBar(header);
        var footerH = $api.fixTabBar(footer);
        token = api.getPrefs({sync: true,key: 'userToken'});
        userId = api.getPrefs({sync: true,key: 'userID'});
        getUserInfo();

        api.addEventListener({
            name: 'changeAvatar'
        }, function(ret, err){
            if( ret ){
              if (ret.value.destPath != "") {
                var ele=$api.dom('#avatar');
                $api.attr(ele,'src',ret.value.destPath);
                avatarUrl = ret.value.destPath;
              }
            }
        });
      };

      function getUserInfo() {
        var username_ = api.getPrefs({sync: true,key: 'userName'});
        var userphone_ = api.getPrefs({sync: true,key: 'userPhone'});
        $api.html($api.byId('user_name'), username_);
        $api.html($api.byId('user_phone'), userphone_);
      }

      function changeUserName() {
        var username_ = api.getPrefs({sync: true,key: 'userName'});
        api.prompt({
            title: '修改昵称',
            text: username_,
            buttons: ['取消', '确定']
        },async function(ret, err) {
            var index = ret.buttonIndex;
            var text = ret.text;
            if (index == 2) {
              if (text.length <= 7 && text.length > 0 && text != '') {
                let handleRes = await post_modify_user_name(userId, text)
                console.log(JSON.stringify(handleRes));
                if (handleRes.code === 200) {
                  api.toast({msg: '修改成功'});
                  api.setPrefs({
                    key: 'userName',
                    value: text
                  });
                  getUserInfo();
                  api.sendEvent({name: 'modifyUserName'});
                }else {
                  api.toast({msg: '修改失败'});
                }
              }else if (text == '') {
                api.toast({msg: '昵称不可为空'});
              }else if (text.length > 7) {
                api.toast({msg: '昵称最多7个字符!'});
              }
            }
        });
      }

      // function clickAvatar() {
      //   actionsheet.init({
      //       frameBounces:true,//当前页面是否弹动,(主要针对安卓端)
      //       title:"上传头像",
      //       cancelTitle:'取消',
      //       // destructiveTitle:'红色警告按钮',
      //       buttons:['拍照','图库选择']
      //   },function(ret){
      //       if(ret){
      //         getPicture(ret.buttonIndex);
      //       }
      //   })
      // }

      //选择头像方式
      // function getPicture(sourceType) {
      //   var avatarType = ''
      //   switch (sourceType) {
      //     case 1:
      //       avatarType = 'camera';
      //     break;
      //     case 2:
      //       avatarType = 'pic';
      //     break;
      //     default:
      //
      //   }
      //   //获取一张图像
      //   api.getPicture({
      //       sourceType: avatarType,
      //       encodingType: 'jpg',
      //       mediaValue: 'pic',
      //       allowEdit: false,
      //       quality: 10,
      //       saveToPhotoAlbum: true
      //   }, function(ret, err) {
      //       // 获取图像数据并进行裁剪处理
      //       if (ret) {
      //           var imgSrc = ret.data;
      //           api.openWin({
      //               name: 'clipImg',
      //               url: '../utils/fnImageClip.html',
      //               pageParam: {
      //                   imgSrc: imgSrc
      //               }
      //           });
      //       }
      //   });
      // }

      function changePhone() {
        api.openWin({
            name: 'changePhone_win',
            url: './changePhone_win.html',
            slidBackEnabled: false,
        });
      }

  </script>
  </html>