new

app/Http/Controllers/Api/HomeController.php

@@ -233,7 +233,20 @@ class HomeController extends Controller
         return response()->json(['message'=>'已拉黑']);
     }
 
-
+    /**
+     * 用户详情
+     * @param Request $request
+     * @return \Illuminate\Http\JsonResponse|void
+     */
+    public function user_detail_h5(Request $request){
+        try {
+            $param['user_id'] = $request->user_id;
+            $res = $this->homeService->user_detail_h5($param);
+        }catch (\Exception $exception){
+            return $this->response->errorForbidden($exception->getMessage());
+        }
+        return response()->json($res);
+    }
 
 
 }

app/Services/HomeService.php

@@ -339,4 +339,25 @@ class HomeService
 
         return true;
     }
+
+
+    //用户详情
+    public function user_detail_h5($param){
+        //根据用户ID查询用户
+        if(!empty($param['user_id'])&& $param['user_id']>0){
+            $touser = User::query()->where('id',$param['user_id'])->first();
+        }
+        $user_id = $touser->id;
+        $userinfo = User::query()
+            ->leftJoin('users_info','users.id','=','users_info.user_id')
+            ->where('users.id',$user_id)
+            ->select(['users.id','users.sex','users.is_auth','users.is_vip','users.latitude','users.longitude','users.tencent_im_user_id','users.online','users_info.*'])
+            ->first();
+        $userinfo->age = birthday($userinfo->birthday);
+        $userinfo->hobby = !empty($userinfo->hobby)?explode(',',$userinfo->hobby):array();
+        $photo = !empty($userinfo->photo)?json_decode($userinfo->photo,true):array();
+        $userinfo->photo = $photo;
+        return $userinfo;
+    }
+
 }

public/web/css/index.css

@@ -0,0 +1,427 @@
+@media screen and (min-width: 320px) {
+  html {
+    font-size: 21.33333333px;
+  }
+}
+@media screen and (min-width: 360px) {
+  html {
+    font-size: 24px;
+  }
+}
+@media screen and (min-width: 375px) {
+  html {
+    font-size: 25px;
+  }
+}
+@media screen and (min-width: 384px) {
+  html {
+    font-size: 25.6px;
+  }
+}
+@media screen and (min-width: 400px) {
+  html {
+    font-size: 26.66666667px;
+  }
+}
+@media screen and (min-width: 414px) {
+  html {
+    font-size: 27.6px;
+  }
+}
+@media screen and (min-width: 424px) {
+  html {
+    font-size: 28.26666667px;
+  }
+}
+@media screen and (min-width: 540px) {
+  html {
+    font-size: 36px;
+  }
+}
+@media screen and (min-width: 720px) {
+  html {
+    font-size: 48px;
+  }
+}
+@media screen and (min-width: 750px) {
+  html {
+    font-size: 50px;
+  }
+}
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #12141B;
+  color: #E5E7EF;
+}
+p {
+  margin: 0;
+}
+.content .gallery {
+  position: relative;
+  width: 100%;
+  height: 14.82rem;
+  background-color: #1C1D27;
+}
+.content .gallery .curr-pic {
+  display: flex;
+  justify-content: center;
+  position: relative;
+  width: 100%;
+  height: 13.92rem;
+  background-color: #1C1D27;
+  overflow: hidden;
+}
+.content .gallery .curr-pic .blur {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 0;
+  width: 100%;
+  height: 50%;
+  background-image: linear-gradient(to top, #000000c2, #1C1D2700);
+}
+.content .gallery .pics-list {
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  right: 0.32rem;
+}
+.content .gallery .pics-list .list-item {
+  width: 2.08rem;
+  height: 2.08rem;
+  margin-right: 0.2rem;
+  border-radius: 0.12rem;
+  overflow: hidden;
+}
+.content .gallery .pics-list .list-item img {
+  width: 100%;
+  height: 100%;
+  border-radius: 0.12rem;
+}
+.content .gallery .pics-list .list-item.more {
+  position: relative;
+  background-color: #3a3a3a;
+}
+.content .gallery .pics-list .list-item.more .bg {
+  width: 100%;
+  height: 100%;
+  background: url('../images/bg.jpg') no-repeat center;
+  -webkit-filter: blur(7px);
+  /* Chrome, Opera */
+  -moz-filter: blur(7px);
+  -ms-filter: blur(7px);
+  filter: blur(7px);
+}
+.content .gallery .pics-list .list-item.more .txt {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  width: 2.08rem;
+  text-align: center;
+  font-size: 0.52rem;
+  line-height: 2.08rem;
+  color: #FDFDFD;
+}
+.content .profile {
+  display: flex;
+  align-items: flex-end;
+  height: 4.7rem;
+  background-color: #1C1D27;
+}
+.content .profile .cont {
+  display: flex;
+  width: 13.96rem;
+  height: 3.72rem;
+  margin: 0 auto;
+}
+.content .profile .cont .portrait {
+  position: relative;
+  width: 2rem;
+  height: 2rem;
+}
+.content .profile .cont .portrait .vip {
+  position: absolute;
+  top: -0.34rem;
+  left: -0.06rem;
+  width: 0.74rem;
+  height: 0.74rem;
+  z-index: 1;
+}
+.content .profile .cont .portrait img {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+.content .profile .cont .proinfo {
+  display: flex;
+  flex-direction: column;
+  margin-left: 0.32rem;
+}
+.content .profile .cont .proinfo .nickname {
+  display: flex;
+  align-items: center;
+  height: 0.88rem;
+}
+.content .profile .cont .proinfo .nickname .txt {
+  font-size: 0.6rem;
+  font-weight: bold;
+}
+.content .profile .cont .proinfo .nickname .auth {
+  margin-left: 0.28rem;
+  width: 2.28rem;
+  height: 0.6rem;
+  background: #FFE3E7;
+  border-radius: 0.3rem;
+  font-size: 0.44rem;
+  color: #FF5068;
+  text-align: center;
+  line-height: 0.6rem;
+}
+.content .profile .cont .proinfo .distance {
+  font-size: 0.36rem;
+  color: #6B6D76;
+}
+.content .profile .cont .proinfo .other {
+  font-size: 0.48rem;
+  color: #BDBFC7;
+  margin-top: 0.32rem;
+}
+.content .tabs {
+  display: flex;
+  justify-content: center;
+  margin-top: 0.3rem;
+}
+.content .tabs .tab {
+  position: relative;
+  box-sizing: border-box;
+  width: 4.28rem;
+  height: 1.8rem;
+  text-align: center;
+  font-size: 0.64rem;
+  line-height: 1.8rem;
+  color: #63656C;
+}
+.content .tabs .tab.current {
+  font-weight: bold;
+  color: white;
+}
+.content .tabs .tab.current::after {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  margin-left: -0.68rem;
+  content: "";
+  width: 1.36rem;
+  height: 0.08rem;
+  background-color: #FC9E3A;
+}
+.content .tab-info {
+  display: none;
+  margin-top: 0.8rem;
+  margin-bottom: 1.62rem;
+}
+.content .tab-info .tab-box {
+  box-sizing: border-box;
+  width: 13.96rem;
+  padding: 0.6rem 0.54rem;
+  margin: 0 auto;
+  margin-bottom: 0.48rem;
+  background-color: #1C1D27;
+  border-radius: 0.16rem;
+}
+.content .tab-info .tab-box .title {
+  font-size: 0.6rem;
+}
+.content .tab-info .tab-box .title p {
+  display: inline-block;
+  font-size: 0.36rem;
+  color: #DC8C37;
+  margin-left: 0.32rem;
+}
+.content .tab-info .tab-box .list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 0.6rem;
+}
+.content .tab-info .tab-box .list .list-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  box-sizing: border-box;
+  width: 3.9rem;
+  height: 2rem;
+  margin-left: 0.36rem;
+  margin-bottom: 0.4rem;
+  padding: 0.32rem;
+  background-color: #454650;
+  border-radius: 0.08rem;
+}
+.content .tab-info .tab-box .list .list-item .title {
+  color: #B2B3BC;
+  font-size: 0.32rem;
+}
+.content .tab-info .tab-box .list .list-item .detail {
+  font-size: 0.44rem;
+  font-weight: bold;
+}
+.content .tab-info .tab-box .star-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 0.8rem;
+}
+.content .tab-info .tab-box .star-box .box {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 5.68rem;
+  height: 2.02rem;
+}
+.content .tab-info .tab-box .star-box .box .item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 0.68rem;
+}
+.content .tab-info .tab-box .star-box .box .item .type {
+  font-size: 0.56rem;
+  color: #A9AAB3;
+}
+.content .tab-info .tab-box .star-box .box .item .stars {
+  display: flex;
+  align-items: center;
+}
+.content .tab-info .tab-box .star-box .box .item .stars img {
+  width: 0.72rem;
+  height: 0.68rem;
+  margin-left: 0.12rem;
+}
+.content .tab-info .tags .list .list-item {
+  width: auto !important;
+  height: 1.08rem !important;
+  border-radius: 0.54rem;
+  padding: 0.28rem 0.68rem;
+  font-size: 0.44rem;
+  color: #E3E5ED;
+}
+.content .tab-post {
+  display: none;
+  margin-top: 0.8rem;
+  margin-bottom: 1.2rem;
+}
+.content .tab-post .list {
+  width: 13.96rem;
+  margin: 0 auto;
+}
+.content .tab-post .list .list-item {
+  display: flex;
+  margin-bottom: 0.6rem;
+}
+.content .tab-post .list .list-item .head {
+  width: 1.8rem;
+  height: 1.8rem;
+  margin-right: 0.48rem;
+  border-radius: 0.9rem;
+}
+.content .tab-post .list .list-item .right {
+  flex: 1;
+}
+.content .tab-post .list .list-item .right .nickname {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 1.8rem;
+  margin-bottom: 0.64rem;
+}
+.content .tab-post .list .list-item .right .nickname .txt {
+  color: #E6E5ED;
+  font-size: 0.6rem;
+}
+.content .tab-post .list .list-item .right .nickname .txt img {
+  width: 0.52rem;
+  height: 0.52rem;
+  margin-left: 0.16rem;
+}
+.content .tab-post .list .list-item .right .nickname .other {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.44rem;
+  color: #B5C0CA76;
+}
+.content .tab-post .list .list-item .right .pictures {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.content .tab-post .list .list-item .right .pictures .item {
+  width: 3.62rem;
+  height: 3.62rem;
+  border-radius: 0.16rem;
+  margin-bottom: 0.4rem;
+}
+.content .tab-post .list .list-item .right .post-detail {
+  color: #E6E5ED;
+  font-size: 0.6rem;
+  line-height: 0.84rem;
+}
+.content .tab-post .list .list-item .right .address {
+  display: flex;
+  align-items: center;
+  margin-top: 0.4rem;
+}
+.content .tab-post .list .list-item .right .address img {
+  width: 0.44rem;
+  height: 0.52rem;
+}
+.content .tab-post .list .list-item .right .address .txt {
+  font-size: 0.44rem;
+  color: #B5C0CA76;
+}
+.content .tab-post .list .list-item .right .toc {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 0.8rem;
+}
+.content .tab-post .list .list-item .right .toc .item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 0.88rem;
+  border-radius: 0.44rem;
+  border: 0.02rem solid #FC9E3A;
+  margin-right: 0.32rem;
+  margin-bottom: 0.32rem;
+}
+.content .tab-post .list .list-item .right .toc .item img {
+  width: 0.52rem;
+  height: 0.52rem;
+  margin-left: 0.4rem;
+}
+.content .tab-post .list .list-item .right .toc .item .txt {
+  color: #FC9E3A;
+  font-size: 0.52rem;
+  margin-left: 0.08rem;
+  margin-right: 0.4rem;
+}
+.content .tab.current {
+  display: block;
+}
+.content .btn {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  width: 6.76rem;
+  height: 3.02rem;
+  margin-left: -3.38rem;
+  margin-bottom: 1.2rem;
+  background: url('../images/btn@2x.png') no-repeat center;
+  background-size: 6.76rem 3.02rem;
+}

public/web/index.html

@@ -0,0 +1,271 @@
+<!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" src="./pic(1).jpg" />
+          <img class="vip" src="./images/vip@2x.png" />
+        </div>
+        <!-- 信息 -->
+        <div class="proinfo">
+          <!-- 昵称 -->
+          <div class="nickname">
+            <p class="txt">wuli星</p>
+            <div class="auth">女神认证</div>
+          </div>
+          <!-- 距离 -->
+          <p class="distance">距Ta&nbsp;0.8km</p>
+          <!-- 其他信息 -->
+          <p class="other">北京市&nbsp;女&nbsp;168/52kg</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">未婚</div>
+          </div>
+          <div class="list-item">
+            <div class="title">感情状态</div>
+            <div class="detail">未婚</div>
+          </div>
+          <div class="list-item">
+            <div class="title">感情状态</div>
+            <div class="detail">未婚</div>
+          </div>
+          <div class="list-item">
+            <div class="title">感情状态</div>
+            <div class="detail">未婚</div>
+          </div>
+          <div class="list-item">
+            <div class="title">感情状态</div>
+            <div class="detail">未婚</div>
+          </div>
+          <div class="list-item">
+            <div class="title">感情状态</div>
+            <div class="detail">未婚</div>
+          </div>
+          <div class="list-item">
+            <div class="title">感情状态</div>
+            <div class="detail">未婚</div>
+          </div>
+        </div>
+      </div>
+      <!-- 标签 -->
+      <div class="tab-box tags">
+        <div class="title">标签</div>
+        <div class="list">
+          <div class="list-item">吃火锅</div>
+          <div class="list-item">乒乓球</div>
+          <div class="list-item">跑步</div>
+          <div class="list-item">熬夜冠军</div>
+          <div class="list-item">跑步</div>
+        </div>
+      </div>
+      <!-- 评价 -->
+      <!-- <div class="tab-box">
+        <div class="title">评价(23) <p>综合评分3.0</p></div>
+        <div class="star-box">
+          <div class="box">
+            <div class="item">
+              <div class="type">形象</div>
+              <div class="stars">
+                <img src="./images/star_full.png" alt="">
+                <img src="./images/star_full.png" alt="">
+                <img src="./images/star_full.png" alt="">
+                <img src="./images/star.png" alt="">
+                <img src="./images/star.png" alt="">
+              </div>
+            </div>
+            <div class="item">
+              <div class="type">诚信</div>
+              <div class="stars">
+                <img src="./images/star_full.png" alt="">
+                <img src="./images/star_full.png" alt="">
+                <img src="./images/star_full.png" alt="">
+                <img src="./images/star.png" alt="">
+                <img src="./images/star.png" alt="">
+              </div>
+            </div>
+          </div>
+          <div class="box">
+            <div class="item">
+              <div class="type">真人</div>
+              <div class="stars">
+                <img src="./images/star_full.png" alt="">
+                <img src="./images/star_full.png" alt="">
+                <img src="./images/star_full.png" alt="">
+                <img src="./images/star.png" alt="">
+                <img src="./images/star.png" alt="">
+              </div>
+            </div>
+            <div class="item">
+              <div class="type">有趣</div>
+              <div class="stars">
+                <img src="./images/star_full.png" alt="">
+                <img src="./images/star_full.png" alt="">
+                <img src="./images/star_full.png" alt="">
+                <img src="./images/star.png" alt="">
+                <img src="./images/star.png" alt="">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div> -->
+    </div>
+    <!-- 动态 -->
+    <!-- <div class="tab tab-post">
+      <div class="list">
+        列表项
+        <div class="list-item">
+          <img src="/pic1.png" alt="" class="head">
+          <div class="right">
+            昵称
+            <div class="nickname">
+              <p class="txt">来自模型星期<img src="/images/vip1@2x.png" alt=""></p>
+              <div class="other">
+                <p>男.20岁&nbsp;互联网&nbsp;188cm.70kg</p>
+                <p>3分钟前</p>
+              </div>
+            </div>
+            文字
+            <p class="post-detail">挠头，不说找对象，怎么在橙路上找个可以聊天的朋友都这么难啊？<br />不知道大家怎么看主动找你聊的人啊？<br />做个主动的人好难啊</p>
+            地址
+            <div class="address">
+              <img src="./images/address@2x.png" alt="" />
+              <p class="txt">北京市&nbsp;1.3km</p>
+            </div>
+            话题
+            <div class="toc">
+              <div class="item">
+                <img src="./images/toc@2x.png" alt="" />
+                <p class="txt">约酒</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        列表项
+        <div class="list-item">
+          <img src="/pic1.png" alt="" class="head">
+          <div class="right">
+            昵称
+            <div class="nickname">
+              <p class="txt">来自模型星期</p>
+              <div class="other">
+                <p>男.20岁&nbsp;互联网&nbsp;188cm.70kg</p>
+                <p>3分钟前</p>
+              </div>
+            </div>
+            图片
+            <div class="pictures">
+              <img class="item" src="/pic1.png" alt="">
+              <img class="item" src="/pic1.png" alt="">
+              <img class="item" src="/pic1.png" alt="">
+              <img class="item" src="/pic1.png" alt="">
+              <img class="item" src="/pic1.png" alt="">
+              <img class="item" src="/pic1.png" alt="">
+            </div>
+            文字
+            <p class="post-detail">挠头，不说找对象，怎么在橙路上找个可以聊天的朋友都这么难啊？<br />不知道大家怎么看主动找你聊的人啊？<br />做个主动的人好难啊</p>
+            地址
+            <div class="address">
+              <img src="./images/address@2x.png" alt="" />
+              <p class="txt">北京市&nbsp;1.3km</p>
+            </div>
+            话题
+            <div class="toc">
+              <div class="item">
+                <img src="./images/toc@2x.png" alt="" />
+                <p class="txt">约酒</p>
+              </div>
+            </div>
+          </div>
+        </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://t22.9026.com/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);
+        }
+    })
+
+    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);
+    }
+</script>
+</body>
+</html>

public/web/register.html

@@ -98,6 +98,7 @@
 </div>
 <script type="text/javascript" charset="utf-8">
     mui.init();
+
     var yhxy = "";
     var ysxy = "";
     //协议
@@ -128,7 +129,7 @@
             var tel = $("#phone").val();
             <!-- var pic=$("#pic").val(); -->
             if (tel.length != 11) {
-                return mui.toast('手机号码格式不对！');
+                return mui.toast('手机号码格式不对！',{ duration:'long', type:'div' });
             }
             <!-- if(pic.length!=4){ -->
             <!-- return mui.toast('图片验证码错误！'); -->

routes/api.php

@@ -34,6 +34,7 @@ $api->version('v1', [
             $api->post('/user_detail', 'HomeController@user_detail')->name('home.user_detail');
             $api->post('/user_dynamic', 'HomeController@user_dynamic')->name('home.user_dynamic');
             $api->post('/photo_destroy', 'HomeController@photo_destroy')->name('home.photo_destroy');
+            $api->post('/user_detail_h5', 'HomeController@user_detail_h5')->name('home.user_detail_h5');
         });
 
         /*