xiaogang
/
chengluApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>预览资料</title>
    <script src="js/mui.min.js"></script>
    <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <div class="content">
    <!-- 大图 -->
    <div class="gallery">
      <div class="curr-pic">
        <img id="currpic" src="./pic(1).jpg" height="100%" />
        <div class="blur"></div>
      </div>
      <!-- 图片组 -->
      <div class="pics-list">
<!--        <div class="list-item">-->
<!--          <img onclick="changePic(this)" src="./pic(2).jpg" />-->
<!--        </div>-->
<!--        <div class="list-item">-->
<!--          <img onclick="changePic(this)" src="./pic(3).jpg" />-->
<!--        </div>-->
<!--        <div class="list-item">-->
<!--          <img onclick="changePic(this)" src="./pic(4).jpg" />-->
<!--        </div>-->
        <!-- 更多 -->
<!--        <div class="list-item more">-->
<!--          <div class="bg"></div>-->
<!--          <p class="txt">更多</p>-->
<!--        </div>-->
      </div>
    </div>
    <!-- profile -->
    <div class="profile">
      <div class="cont">
        <!-- 头像 -->
        <div class="portrait">
          <img class="pic" id="avatar" src="./pic(1).jpg" />
          <img class="vip" id="is_vip"  style="display: none;" src="./images/vip@2x.png" />
        </div>
        <!-- 信息 -->
        <div class="proinfo">
          <!-- 昵称 -->
          <div class="nickname">
            <p class="txt" id="nickname"></p>
            <div class="auth" id="is_autn" style="display: none;">女神认证</div>
          </div>
          <!-- 距离 -->
<!--          <p class="distance">距Ta&nbsp;0.8km</p>-->
          <!-- 其他信息 -->
          <p class="other" id="info"></p>
        </div>
      </div>
    </div>
    <!-- 资料和动态 -->
    <!-- <div class="tabs">
      <div class="tab current">资料</div>
      <div class="tab">动态</div>
    </div> -->
    <!-- 资料 -->
    <div class="tab current tab-info">
      <!-- 了解ta -->
      <div class="tab-box">
        <div class="title">了解Ta</div>
        <div class="list">
          <div class="list-item">
            <div class="title">感情状态</div>
            <div class="detail" id="feeling">暂无</div>
          </div>
          <div class="list-item">
            <div class="title">是否饮酒</div>
            <div class="detail" id="drink">暂无</div>
          </div>
          <div class="list-item">
            <div class="title">是否抽烟</div>
            <div class="detail" id="smoke">暂无</div>
          </div>
          <div class="list-item">
            <div class="title">工作职位</div>
            <div class="detail" id="work">暂无</div>
          </div>
          <div class="list-item">
            <div class="title">身材体型</div>
            <div class="detail" id="figure">暂无</div>
          </div>
          <div class="list-item">
            <div class="title">教育学历</div>
            <div class="detail" id="education">暂无</div>
          </div>
          <div class="list-item">
            <div class="title">年收入</div>
            <div class="detail" id="income">暂无</div>
          </div>
            <div class="list-item">
                <div class="title">居住地</div>
                <div class="detail" id="area">暂无</div>
            </div>
        </div>
      </div>
      <!-- 标签 -->
      <div class="tab-box tags" style="margin-bottom: 120px;">
        <div class="title">标签</div>
        <div class="list" id="hobby"></div>
      </div>
    </div>
    <div class="btn"></div>
  </div>

<script>
    mui.init();
    // 画廊
    const currentPic = document.getElementById('currpic')
    function changePic(e) {
      currentPic.src = e.src
    }

    // 获取用户详情
    $.ajax({
        url: 'https://app.orangepai.cn/api/home/user_detail_h5?user_id='+getQueryVariable('id'),
        type: 'get',
        data: {},
        dataType: 'json',
        success: function (res) {
           console.log(res)
            //$('.neir').append(res.data.content);
            var hobby_con = "";
            if(res.hobby.length>0){
                for (var i=0;i<res.hobby.length;i++) {
                    hobby_con += '<div class="list-item">'+res.hobby[i]+'</div>';
                }
            }
            $('#hobby').html(hobby_con);
            $('#avatar').attr('src',res.avatar);
            $('#nickname').html(res.nickname);
            if(res.is_vip==1){
                $('#is_vip').hide();
            }else{
                $('#is_vip').show();
            }
            if(res.is_auth>0){
                if(res.is_auth==1){
                    $('#is_auth').html('真人认证');
                }else{
                    $('#is_auth').html('女神认证');
                }
                $('#is_vip').show();
            }else{
                $('#is_vip').hide();
            }
            //北京市&nbsp;女&nbsp;168/52kg
            var sex = res.sex==1?'男':'女';
            $('#info').html(res.area+' '+sex+' '+res.height+'cm/'+res.weight+'kg');

            $('#feeling').html(res.feeling?res.feeling:"暂无");
            $('#figure').html(res.figure?res.figure:"暂无");
            $('#drink').html(res.drink?res.drink:"暂无");
            $('#education').html(res.education?res.education:"暂无");
            $('#income').html(res.income?res.income:"暂无");
            $('#smoke').html(res.smoke?res.smoke:"暂无");
            $('#work').html(res.work?res.work:"暂无");
            $('#area').html(res.area?res.area:"暂无");
            if(res.photo.length>0){
                $('#currpic').attr('src',res.photo[0].url);
            }

            if(res.photo.length>1){
                var list_item = "";
                for (var i=1;i<res.photo.length;i++) {
                    list_item += '<div class="list-item"><img onclick="changePic(this)" src="'+res.photo[i]+'" /></div>';
                }

                $('.pics-list').html(list_item);
                $('.pics-list').show();
            }else{
                $('.pics-list').hide();
            }
        }
    })

    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }

    $('.btn').click(function(){
        window.location.href='register.html';
    })
</script>
</body>
</html>