<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta content="telephone=no" name="format-detection">
<meta name="wap-font-scale" content="no">
<title></title>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/layer.css">
<link rel="stylesheet" href="../css/login.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body style="background: #F0F1F4;">
<div class="neck-nav">
<div class="neck-nav-content">
<a href="pc.html"><img class="logo" src="../images/logo.png" alt=""></a>
<div class="nav-login-big-box">
<!-- <div style="display: none;" class=nav-login-btn>登入/註冊</div>
<div style="display: none;" class="nav-login">
<img class="nav-login-face" src="" alt="">
<div class="nav-login-more">
<div class="nav-login-more-jiao"></div>
<div class="nav-login-more-top">
<img class="login-more-top-face" src="" alt="">
<p class="login-more-top-p1">主播暱稱預留</p>
<p class="login-more-top-p2">ID:246524</p>
</div>
<div class="login-more-content-box">
<div data-type="1">用戶中心</div>
<div data-type="2">儲值中心</div>
<div data-type="3">我的追蹤</div>
<div data-type="4">登出</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
<div class="m-box">
<div style="height: 60px;"></div>
<div class="space-box">
<div class="space-top">
<img class="space-face" src="https://zhibocdn.yabolive.net/comm/stscli/prod/883221/1648095196207/498F890F-33A1-4EE9-9854-9D39A6905E85.jpeg?x-oss-process=image/resize,w_100" alt="">
<div class="space-name"><img class="space-level" src="https://app.ixiulive.com/static/vip/35.png"> 糖醋里脊肉</div>
<div class="space-id">Footseen ID: 123456</div>
<div class="space-num"><span>77</span>追隨 | <span>1440</span>粉絲</div>
<div class="like-btn"></div>
<!-- <div class="talk-btn"></div> -->
</div>
<div class="text-bg"> </div>
<div class="space-content">
<h2 class="space-h2"><div class="line"></div>線上充值</h2>
<div class="space-line1"></div>
<ul class="space-ul clearfix">
<!-- <li><span>性別: </span>女</li>
<li><span>年齡: </span>24</li>
<li><span>來自: </span>台灣</li>
<li><span>身高: </span>168cm</li>
<li><span>體重: </span>50kg</li>
<li><span>星座: </span>巨蟹座</li>
<li><span>學歷: </span>幼稚園</li>
<li><span>職業: </span>教師</li> -->
</ul>
<div class="space-money-box clearfix">
<p><span>收穫羽毛:</span> <img src="images/feather.png" alt="">--</p>
<p><span>贈出寶石:</span> <img src="images/diamond.png" alt="">--</p>
</div>
<div class="mc-car-box">
當前座駕:
<ul class="mc-car-ul">
<!-- <li><img src="images/gift-case.png" alt=""></li> -->
</ul>
</div>
<div class="mc-title-box">獲得勛章:
<span>
<!-- <img src="images/gift-case.png" alt="">
<img src="images/gift-case.png" alt="">
<img src="images/gift-case.png" alt=""> -->
</span>
</div>
</div>
<div class="space-photo">
<h2 class="space-h2"><div class="line"></div>相冊</h2>
<div class="space-line2"></div>
<ul class="mc-images-ul">
<!-- <li style="background: url(https://zhibocdn.yabolive.net/comm/stscli/prod/2044606/1648779346851/A6C101FE-F919-41AB-8FF7-09BA33327B54.jpeg?x-oss-process=image/resize,w_180)no-repeat;background-size: cover;">
<div class="mc-images-li-bottom">
<span class="mc-images-li-span1"><img src="images/images-icon1.png" alt="">59</span>
<span class="mc-images-li-span2"><img src="images/images-icon2.png" alt="">10</span>
<span class="mc-images-li-span3">10:34</span>
</div>
<div class="mc-images-li-shadow"></div>
</li> -->
</ul>
<!-- <ul class="phone-ul clearfix">
<li>
<div class="mc-images-li-bottom">
<span class="mc-images-li-span1"><img src="images/images-icon1.png" alt="">59</span>
<span class="mc-images-li-span2"><img src="images/images-icon2.png" alt="">10</span>
<span class="mc-images-li-span3">10:34</span>
</div>
<div class="mc-images-li-shadow"></div>
</li>
<li>
<div class="mc-images-li-bottom">
<span class="mc-images-li-span1"><img src="images/images-icon1.png" alt="">59</span>
<span class="mc-images-li-span2"><img src="images/images-icon2.png" alt="">10</span>
<span class="mc-images-li-span3">10:34</span>
</div>
<div class="mc-images-li-shadow"></div>
</li>
<li>
<div class="mc-images-li-bottom">
<span class="mc-images-li-span1"><img src="images/images-icon1.png" alt="">59</span>
<span class="mc-images-li-span2"><img src="images/images-icon2.png" alt="">10</span>
<span class="mc-images-li-span3">10:34</span>
</div>
<div class="mc-images-li-shadow"></div>
</li>
<li>
<div class="mc-images-li-bottom">
<span class="mc-images-li-span1"><img src="images/images-icon1.png" alt="">59</span>
<span class="mc-images-li-span2"><img src="images/images-icon2.png" alt="">10</span>
<span class="mc-images-li-span3">10:34</span>
</div>
<div class="mc-images-li-shadow"></div>
</li>
<li>
<div class="mc-images-li-bottom">
<span class="mc-images-li-span1"><img src="images/images-icon1.png" alt="">59</span>
<span class="mc-images-li-span2"><img src="images/images-icon2.png" alt="">10</span>
<span class="mc-images-li-span3">10:34</span>
</div>
<div class="mc-images-li-shadow"></div>
</li>
<li>
<div class="mc-images-li-bottom">
<span class="mc-images-li-span1"><img src="images/images-icon1.png" alt="">59</span>
<span class="mc-images-li-span2"><img src="images/images-icon2.png" alt="">10</span>
<span class="mc-images-li-span3">10:34</span>
</div>
<div class="mc-images-li-shadow"></div>
</li>
<li>
<div class="mc-images-li-bottom">
<span class="mc-images-li-span1"><img src="images/images-icon1.png" alt="">59</span>
<span class="mc-images-li-span2"><img src="images/images-icon2.png" alt="">10</span>
<span class="mc-images-li-span3">10:34</span>
</div>
<div class="mc-images-li-shadow"></div>
</li>
<li>
<div class="mc-images-li-bottom">
<span class="mc-images-li-span1"><img src="images/images-icon1.png" alt="">59</span>
<span class="mc-images-li-span2"><img src="images/images-icon2.png" alt="">10</span>
<span class="mc-images-li-span3">10:34</span>
</div>
<div class="mc-images-li-shadow"></div>
</li>
</ul> -->
</div>
</div>
<div style="height: 60px;"></div>
</div>
<div class="layer-photo">
<img class="photo-arrow-left" src="images/photo-arrow.png" alt="">
<img class="photo-arrow-right" src="images/photo-arrow.png" alt="">
<div class="layer-photo-content">
<div class="layer-photo-content-left">
<img class="photo-content-left-img" src="https://zhibocdn.yabolive.net/comm/user/img/134601/f4035e3045c640ddaf5b8318ccc8e6c5.jpg?x-oss-process=image/resize,w_775" alt="">
</div>
<div class="layer-photo-content-right">
<div class="photo-content-top">
<img class="photo-content-top-face" src="https://zhibocdn.yabolive.net/comm/stscli/prod/123456/1651905234496/656591F9-8A58-4DD2-8C12-FF2C4E899CDA.jpeg?x-oss-process=image/resize,w_50" alt="">
<div class="photo-content-name">主播暱稱預留 <span class="photo-name-like">+追蹤</span></div>
</div>
<div class="photo-content-center">
<p class="photo-time-p">2022年3月1日</p>
<div class="photo-content-speak">我和你就限制暗示法那是反扒說法麼啊發順豐安撫熬死第三方三個偷回家我不明白</div>
<div class="photo-content-like">
<span><img src="images/icon1.png" alt="">25</span>
<span><img src="images/icon2.png" alt="">25</span>
</div>
</div>
<ul class="photo-content-right-ul">
<!-- <li>
<img class="photo-message-face" src="https://zhibocdn.yabolive.net/comm/stscli/prod/123456/1651905234496/656591F9-8A58-4DD2-8C12-FF2C4E899CDA.jpeg?x-oss-process=image/resize,w_50" alt="">
<p class="photo-message-name">用戶暱稱預留</p>
<p class="photo-message-content">阿薩德鬧翻那傻逼噶搜啊什麼封啊實打實搜啊什麼封啊實打實搜啊什麼封啊實打實搜啊什麼封啊實打實</p>
<p class="photo-message-time">12小時前 <span>回復</span></p>
<div class="photo-more-message">
<div class="more-message-box">
<img class="more-message-face" src="https://zhibocdn.yabolive.net/comm/stscli/prod/123456/1651905234496/656591F9-8A58-4DD2-8C12-FF2C4E899CDA.jpeg?x-oss-process=image/resize,w_50" alt="">
<p class="more-message-content"><span>主播暱稱預留:</span> 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
<p class="more-message-time">12小時前 <span>回復</span></p>
</div>
<div class="more-message-box">
<img class="more-message-face" src="https://zhibocdn.yabolive.net/comm/stscli/prod/123456/1651905234496/656591F9-8A58-4DD2-8C12-FF2C4E899CDA.jpeg?x-oss-process=image/resize,w_50" alt="">
<p class="more-message-content"><span>主播暱稱預留:</span> 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
<p class="more-message-time">12小時前 <span>回復</span></p>
</div>
</div>
</li> -->
</ul>
<div class="photo-content-msg">
<input placeholder="請輸入要發送的內容" class="photo-content-input" type="text">
<div class="photo-msg-btn">發送</div>
</div>
</div>
</div>
</div>
</body>
<script src="../lib/jquery-3.1.1.min.js"></script>
<script src="../layer-v3.1.0/layer/layer.js"></script>
<script src="../lib/default.js?v='20220407'"></script>
<script src="../lib/login.js"></script>
<script>
$(function(){
loginGo()
var fid=data.fid
zoneList()
$.ajax({
url: $ip2 + 'room/enterRoom',
data: {
uid: localStorage.uid,
token: localStorage.token,
// pass: true,
roomId: fid,
pageID: localStorage.canvasCode,
},
success: function (data) {
console.log('用戶信息', data)
$(".text-bg").text(data.roomBaseInfo.sign)
var html = [];
if(data.roomOtherInfo.motoring.resource!=undefined)html += '<li><img src="https://zhibocdn.yabolive.net/comm' + data.roomOtherInfo.motoring.resource + '?x-oss-process=image/resize,w_45" alt=""></li>';
$(".mc-car-ul").html(html)
var html=[];
for(var i=0;i<data.roomOtherInfo.medals.length;i++){
var list=data.roomOtherInfo.medals[i]
html+='<img src="https://zhibocdn.yabolive.net/comm' + data.roomOtherInfo.medals[i] + '?x-oss-process=image/resize,w_45" alt="">';
}
$(".mc-title-box >span").html(html);
var html=[];
html+='<img class="space-face" src="https://zhibocdn.yabolive.net/comm'+data.room.face+'?x-oss-process=image/resize,w_100" alt="">';
html+='<div class="space-name">';
html+='<img class="space-level" src="https://app.ixiulive.com/static/vip/'+data.room.lev+'.png"> ';
html+=''+data.room.nickName+'</div>';
html+='<div class="space-id">Footseen ID: '+data.room.roomId+'</div>';
html+='<div class="space-num"><span>77</span>追隨 | <span>1440</span>粉絲</div>';
html+='<div data-type="'+data.room.roomId+'" class="like-btn"></div>';
$(".space-top").html(html);
var html=[]
html+='<li><span>性別: </span>女</li>';
html+='<li><span>年齡: </span>'+data.roomBaseInfo.age+'</li>';
if (data.roomBaseInfo.addr != '')html+='<li><span>來自: </span>'+data.roomBaseInfo.addr+'</li>';
else html+='<li><span>來自: </span>未知</li>';
html+='<li><span>身高: </span>'+data.roomBaseInfo.height+'cm</li>';
html+='<li><span>體重: </span>' + data.roomBaseInfo.weight + 'kg</li>';
html+='<li><span>星座: </span>' + data.roomBaseInfo.constellation + '</li>';
html+='<li><span>學歷: </span>' + data.roomBaseInfo.culture + '</li>';
html+='<li><span>職業: </span>' + data.roomBaseInfo.work + '</li>';
$(".space-ul").html(html);
var html=[];
html+='<p><span>收穫羽毛:</span> <img src="images/feather.png" alt="">'+data.roomOtherInfo.charm+'</p>';
html+='<p><span>贈出寶石:</span> <img src="images/diamond.png" alt="">'+data.roomOtherInfo.rich+'</p>';
$(".space-money-box").html(html);
},
})
function zoneList(){
$.ajax({
url:$ip2+'zone/dynamic/album/getList',
data:{
zoneId:fid,
pageNum:1,
pageSize:99,
pass:true,
pageID:localStorage.canvasCode
},
success:function(data){
dataArr=data
console.log('获取相册列表',data)
$(".material-span-other2").text("相冊("+data.dataList.length+")")
var html=[];
for(var i=0;i<data.dataList.length;i++){
var list=data.dataList[i];
var content=JSON.parse(list.content)
if(list.type==3){
html+='<li data-type2='+i+' data-type='+list.topicId+' style="background: url(https://zhibocdn.yabolive.net/comm'+content.videos[0].cover+'?x-oss-process=image/resize,w_180)no-repeat;background-size: cover;">';
html+='<div class="mc-images-li-bottom">';
html+='<span class="mc-images-li-span1"><img src="images/images-icon1.png" alt="">'+list.comment+'</span>';
html+='<span class="mc-images-li-span2"><img src="images/images-icon2.png" alt="">'+list.up+'</span>';
html+='<span class="mc-images-li-span3">'+add0(Math.floor(content.videos[0].duration/60000))+':'+add0(Math.floor(content.videos[0].duration%60000/1000))+'</span>';
html+='</div>';
html+='<div class="mc-images-li-shadow"></div>';
html+='</li>';
}else{
html+='<li data-type2='+i+' data-type='+list.topicId+' style="background: url(https://zhibocdn.yabolive.net/comm'+content.images[0].url+'?x-oss-process=image/resize,w_180)no-repeat;background-size: cover;">';
html+='<div class="mc-images-li-bottom">';
html+='<span class="mc-images-li-span1"><img src="images/images-icon1.png" alt="">'+list.comment+'</span>';
html+='<span class="mc-images-li-span2"><img src="images/images-icon2.png" alt="">'+list.up+'</span>';
html+='</div>';
html+='<div class="mc-images-li-shadow"></div>';
html+='</li>';
}
}
$(".mc-images-ul").html(html);
$(".mc-images-ul li").unbind("click").on("click",function(){
var _self=$(this);
photo(_self.attr("data-type"),_self.attr("data-type2"))
layer.open({
type: 1,
title: false,
shadeClose: true,
skin: "yourclass5",
area: ["1300px", "900px"],
content: $(".layer-photo"),
end: function () {
$(".layui-layer-shade").hide()
layer.closeAll()
}
})
// $(".photo-arrow-left").unbind("click").on("click",function(){
// var photoNum= _self.attr("data-type2")
// if(photoNum!=0){
// console.log(dataArr.dataList[photoNum-1].topicId)
// }
// // photo(_self.attr("data-type"))
// })
// $(".photo-arrow-right").unbind("click").on("click",function(){
// // photo(_self.attr("data-type"))
// })
})
}
})
}
function photo(e,num){
$.ajax({
url:$ip2+'frontPage/queryTopicInfo',
async:false,
data:{
topicId:e,
pageID:localStorage.canvasCode,
pass:true,
},
success:function(data){
console.log('查看帖子详情',data)
var list=data.topic
var myTopicId=list.topicId
var imagesList=JSON.parse(list.content);
console.log(imagesList)
if(list.type==2){
var html=[];
html+='<img class="photo-content-left-img" src="https://zhibocdn.yabolive.net/comm'+imagesList.images[0].url+'?x-oss-process=image/resize,w_775" alt="">';
$(".layer-photo-content-left").html(html);
}else if(list.type==3){
var html=[];
html+='<video controls src="https://zhibocdn.yabolive.net/comm'+imagesList.videos[0].url.replace("flv","mp4")+'">';
$(".layer-photo-content-left").html(html);
}
var html=[];
html+='<img class="photo-content-top-face" src="https://zhibocdn.yabolive.net/comm'+list.face+'?x-oss-process=image/resize,w_50" alt="">';
html+='<div class="photo-content-name">'+list.nickname+'';
if(list.isLikeRoom==0)html+='<span class="photo-name-like">+追蹤</span>';
html+='</div>';
$(".photo-content-top").html(html);
var html=[];
html+='<p class="photo-time-p">2022年3月1日</p>';
html+='<div class="photo-content-speak">'+imagesList.title+'</div>';
html+='<div class="photo-content-like">';
html+='<span><img src="images/icon1.png" alt="">'+list.comment+'</span>';
html+='<span><img src="images/icon2.png" alt="">'+list.up+'</span>';
html+='</div>';
$(".photo-content-center").html(html);
// setTimeout(function(){
// console.log($(".photo-content-center").height())
// },50)
$(".photo-arrow-left").attr("data-type",""+(num-1)+"")
$(".photo-arrow-right").attr("data-type",""+(Number(num)+1)+"")
$(".photo-arrow-left").unbind("click").on("click",function(){
var _self=$(this)
if(_self.attr("data-type")>-1){
var nextNum=_self.attr("data-type")
var pid=dataArr.dataList[nextNum].topicId
photo(pid,nextNum)
}
})
$(".photo-arrow-right").unbind("click").on("click",function(){
var _self=$(this)
if(dataArr.dataList[_self.attr("data-type")]!=undefined){
var nextNum=Number(_self.attr("data-type"))
var pid=dataArr.dataList[nextNum].topicId
photo(pid,nextNum)
}
})
$(".Reply-btn").unbind("click").on("click",function(){
})
$(".photo-msg-btn").unbind("click").on("click",function(){
if($(".photo-content-input").val()==''){
layer.msg("請輸入要發送的內容")
return;
}
commentSend(myTopicId,$(".photo-content-input").val())
})
}
})
$.ajax({
url:$ip2+'dynamic/comment/list',
data:{
topicId:e,
pageNum:1,
pageSize:99,
pageID:localStorage.canvasCode,
pass:true,
},
success:function(data){
console.log('查看评论列表',data)
setTimeout(function() {
console.log('高度',$(".photo-content-center").height())
var rightHeight=900-$(".photo-content-center").height()-80-75
console.log(rightHeight)
$(".photo-content-right-ul").height(rightHeight)
if(data.commentResult.length==0){
$(".photo-content-right-ul").html('');
return;
}
var html=[];
for(var i=0;i<data.commentResult.length;i++){
var list=data.commentResult[i]
if(data.systemDate-list.updateTime<86400000){
var outTime=Math.ceil((data.systemDate-list.updateTime)/3600000)+'小時前'
}else{
var outTime=timeGet(list.updateTime)[0]+'年'+timeGet(list.updateTime)[1]+'月'+timeGet(list.updateTime)[2]+'日 '+timeGet(list.updateTime)[2]+':'+timeGet(list.updateTime)[3]
}
html+='<li>';
html+='<img class="photo-message-face" src="https://zhibocdn.yabolive.net/comm'+list.face.split('?')[0]+'?x-oss-process=image/resize,w_50" alt="">';
html+='<p class="photo-message-name">'+list.nickname+'</p>';
if(JSON.parse(list.content).images!=undefined){
console.log(JSON.parse(list.content).images)
html+='<p class="photo-message-content">'+JSON.parse(list.content).text+'<br><img src="https://zhibocdn.yabolive.net/comm'+JSON.parse(list.content).images[0].url+'"></p>';
}
else html+='<p class="photo-message-content">'+JSON.parse(list.content).text+'</p>';
html+='<p class="photo-message-time">'+outTime+' <span data-type='+list.commentId+' class="Reply-btn">回復</span></p>';
if(list.replyResult.length!=0){
html+='<div class="photo-more-message">';
for(var j=0;j<list.replyResult.length;j++){
if(data.systemDate-list.replyResult[j].updateTime<86400000){
var outTime2=Math.ceil((data.systemDate-list.replyResult[j].updateTime)/3600000)+'小時前'
}else{
var outTime2=timeGet(list.replyResult[j].updateTime)[0]+'年'+timeGet(list.replyResult[j].updateTime)[1]+'月'+timeGet(list.replyResult[j].updateTime)[2]+'日 '+timeGet(list.replyResult[j].updateTime)[2]+':'+timeGet(list.replyResult[j].updateTime)[3]
}
html+='<div class="more-message-box">';
html+='<img class="more-message-face" src="https://zhibocdn.yabolive.net/comm'+list.replyResult[j].face.split('?')[0]+'?x-oss-process=image/resize,w_50" alt="">';
html+='<p class="more-message-content"><span>'+list.replyResult[j].nickname+':</span> '+JSON.parse(list.replyResult[j].content).text+'</p>';
html+='<p class="more-message-time">'+outTime2+' <span data-type='+list.commentId+' data-type2='+list.replyResult[j].toReplyId+' class="Reply-btn2">回復</span></p>';
html+='</div>';
}
if(list.reply>2)html+='<p class="more-replay">共'+list.reply+'條回復 <span>點擊查看</span></p>'
html+='</div>';
}
html+='</li>';
}
$(".photo-content-right-ul").html(html);
}, 300);
}
})
}
})
</script>
</html>