Skip to content

N
newLive
Commit b13cd205 authored by jiaoyahui's avatar jiaoyahui
Browse files
Options

解决main.js的冲突

parents 13b2788b f6e87e3d
Show whitespace changes
Inline Side-by-side
Showing with 1075 additions and 12547 deletions
package-lock.json
View file @ b13cd205
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ b13cd205
...@@ -19,7 +19,9 @@ ...@@ -19,7 +19,9 @@
"pdfh5": "^1.4.2", "pdfh5": "^1.4.2",
"qs": "^6.11.0", "qs": "^6.11.0",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-clipboard2": "^0.3.3",
"vue-pdf": "^4.3.0", "vue-pdf": "^4.3.0",
"vue-qr": "^4.0.9",
"vue-router": "^3.5.2", "vue-router": "^3.5.2",
"vue-video-player": "^5.0.2", "vue-video-player": "^5.0.2",
"vuex": "^4.1.0" "vuex": "^4.1.0"
......
src/axios/api.js
View file @ b13cd205
...@@ -41,9 +41,14 @@ live: { ...@@ -41,9 +41,14 @@ live: {
liveDetail:function(data){ liveDetail:function(data){
return service.post('/app/live/liveDetail', data) return service.post('/app/live/liveDetail', data)
}, },
//游客登录
tourist:function(data){ tourist:function(data){
return service.post('/auth/tourist', data) return service.post('/auth/tourist', data)
}, },
//更新试看时间
updataTime:function(data){
return service.post('/oapi/v1/H5/live/update/duration', data)
},
videoList:function(data){ videoList:function(data){
return service.post('/app/live/getLiveRepeatList', data) return service.post('/app/live/getLiveRepeatList', data)
}, },
......
src/components/plugin/shareCard.vue 0 → 100644
View file @ b13cd205
<template>
<div class="body">
<img class="share-img" @click="clickShare()" src="../../common/img/share.png" alt="">
<div v-if="ifShow">
<img v-if="checkType==0" class="style-one" src="../../common/img/card-style-One.png" alt="">
<img v-if="checkType==1" class="style-one" src="../../common/img/card-style-Two.png" alt="">
<img v-if="checkType==2" class="style-one" src="../../common/img/card-style-Three.png" alt="">
<img class="pressShare" src="../../common/img/pressShare.png" alt="">
<!-- 信息样式 -->
<div v-if="checkType==0">
<img class="headImg" :src="headPro" alt="">
<span class="udStyle">{{udName}}</span>
<img class="lvrImg" :src="lvrImg" alt="">
<span class="lvrName">{{liveName}}</span>
<vue-qr
class="qrCode"
:text="imgUrl"
:size="250"
:logoScale="0.2">
</vue-qr>
</div>
<div v-if="checkType==1">
<img class="headImgTwo" :src="headPro" alt="">
<span class="udStyle">{{udName}}</span>
<img class="lvrImgTwo" :src="lvrImg" alt="">
<span class="lvrNameTwo">{{liveName}}</span>
<vue-qr
class="qrCodeTwo"
:text="imgUrl"
:size="250"
:logoScale="0.2">
</vue-qr>
</div>
<div v-if="checkType==2">
<img class="headImgThree" :src="headPro" alt="">
<!-- <span class="udStyle">{{udName}}</span> -->
<img class="lvrImgThree" :src="lvrImg" alt="">
<span class="lvrNameThree">{{liveName}}</span>
<vue-qr
class="qrCodeThree"
:text="imgUrl"
:size="250"
:logoScale="0.2">
</vue-qr>
</div>
<div class="bottom-countent">
<div @click="checkImg(0)" :class="{smallOneRed:checkType==0,smallOne:checkType!=0}">
<img class="small-img" src="../../common/img/thumbnail-One.png" alt="">
</div>
<div @click="checkImg(1)" class="smallTwo" :class="{smallTwoRed:checkType==1,smallTwo:checkType!=1}">
<img class="small-img" src="../../common/img/thumbnail-Two.png" alt="">
</div>
<div @click="checkImg(2)" class="smallThree" :class="{smallThreeRed:checkType==2,smallThree:checkType!=2}">
<img class="small-img" src="../../common/img/thumbnail-Three.png" alt="">
</div>
<div class="clickWechat">
<img class="wechactImg" src="../../common/img/wechact-share.png" alt="">
<span class="wechactText">微信</span>
</div>
<div class="clickCopy copy"
v-clipboard:copy="copyContent"
v-clipboard:success="onCopy"
v-clipboard:error="onError"
>
<img class="linkImg" src="../../common/img/copy-link.png" alt="">
<span class="linkText">复制链接</span>
</div>
<!-- 提示框 -->
<div class="tips" style="display: none;">
<span>复制成功</span>
</div>
</div>
</div>
</div>
</template>
<script>
import VueQr from 'vue-qr'
export default {
name: 'shareCard',
components:{
      VueQr,
   },
props:{
headPortrait:String,//头像
udNickname:String,//主播名称
lvrName:String,//直播间名称
lvrImgLargeUrl:String,//占位图
},
data() {
return {
checkType:0,
copyContent:window.location.href,//需要复制的内容
ifShow:false,
imgUrl: 'https://baidu.com',//二维码地址
headPro:'',//头像图片
udName:'',//主播名称
lvrImg:'',//占位图
liveName:'',//房间名称
};
},
created() {
// this.getMessage()
},
methods: {
checkImg(e){
this.checkType=e
},
onCopy({value}){
// console.log('success',value);
// console.log(this.copyContent)
$('.tips').show().delay(3000).hide(300)
console.log('复制成功')
},
onError({value}){
// console.log('error',value)
// console.log('复制成功')
},
//获取信息
// getMessage(){
// setTimeout(() => {
// }, 1000)
// },
//点击分享按钮
clickShare(){
if(this.ifShow==false){
this.ifShow=true
}else{
this.ifShow=false
}
console.log("头像信息",this.headPortrait)
console.log("主播名称",this.udNickname)
console.log("直播名称",this.lvrName)
console.log("占位图",this.lvrImgLargeUrl)
// headPro:'',//头像图片
// udName:'',//主播名称
// lvrImg:'',//占位图
// liveName:'',//房间名称
this.headPro=this.headPortrait//头像图片
this.udName=this.udNickname//主播名称
this.lvrImg=this.lvrImgLargeUrl//占位图
this.liveName=this.lvrName//房间名称
this.imgUrl=window.location.href//二维码地址
}
},
};
</script>
<style scoped>
.body{
position: relative;
}
.style-one{
height: 145vw;
position: absolute;
top: 10vw;
z-index: 99;
left: 7.5vw;
width: 85vw;
}
.bottom-countent{
position: absolute;
top: 167vw;
left: 0;
width: 100vw;
height: 50vw;
border-radius: 4vw;
background: white;
}
.smallOne{
position: absolute;
top: 6vw;
left: 10vw;
height: 25vw;
width: 15vw;
/* border: 1vw solid red; */
}
.smallOneRed{
position: absolute;
top: 6vw;
left: 10vw;
height: 25vw;
width: 15vw;
border: 1vw solid red;
}
.smallTwoRed{
position: absolute;
top: 6vw;
left: 43vw;
height: 25vw;
width: 15vw;
border: 1vw solid red;
}
.smallThreeRed{
position: absolute;
top: 6vw;
left: 75vw;
height: 25vw;
width: 15vw;
border: 1vw solid red;
}
.small-img{
height: 25vw;
width: 15vw;
}
.smallTwo{
position: absolute;
top: 6vw;
left: 43vw;
}
.smallThree{
position: absolute;
top: 6vw;
left: 75vw;
}
.wechactImg{
height: 10vw;
width: 10vw;
position: absolute;
top: 1vw;
left: 2vw;
}
.wechactText{
font-size: 4vw;
position: absolute;
top: 3vw;
left: 14vw;
color: #656565;
}
.clickWechat{
height: 12vw;
width: 30vw;
/* background: yellow; */
position: absolute;
top: 34vw;
left: 10vw;
}
.clickCopy{
height: 12vw;
width: 30vw;
/* background: yellow; */
position: absolute;
top: 34vw;
right: 10vw;
}
.linkImg{
height: 10vw;
width: 10vw;
position: absolute;
top: 1vw;
left: 2vw;
}
.linkText{
font-size: 4vw;
position: absolute;
top: 3vw;
left: 14vw;
color: #656565;
}
.tips {
width: 40vw;
text-align: center;
height: 10vw;
background: black;
color: white;
position: fixed;
top: 80vw;
left: 30vw;
border-radius: 4vw;
opacity: 0.6;
line-height: 10vw;
}
.share-img{
position: absolute;
top: 2vw;
right: 3vw;
height: 8vw;
width: 8vw;
}
.headImg{
height: 19vw;
width: 19vw;
position: absolute;
top: 20vw;
z-index: 100;
left: 22vw;
border-radius: 50%;
}
.headImgTwo{
height: 19vw;
width: 19vw;
position: absolute;
top: 20vw;
z-index: 100;
left: 22vw;
border-radius: 50%;
}
.headImgThree{
height: 19vw;
width: 19vw;
position: absolute;
top: 20vw;
z-index: 100;
left: 40.5vw;
border-radius: 50%;
}
.udStyle{
font-size: 5vw;
color: white;
position: absolute;
top: 41vw;
z-index: 100;
left: 22vw;
}
.lvrImg{
height: 39vw;
width: 73vw;
position: absolute;
top: 62vw;
border-radius: 1vw;
left: 13.5vw;
z-index: 100;
}
.lvrImgTwo{
height: 39vw;
width: 71vw;
position: absolute;
top: 62vw;
border-radius: 1vw;
left: 14.5vw;
z-index: 100;
}
.lvrImgThree{
height: 32vw;
width: 58vw;
position: absolute;
top: 68vw;
border-radius: 1vw;
left: 20.5vw;
z-index: 100;
}
.lvrName{
font-size: 5vw;
position: absolute;
top: 104vw;
z-index: 100;
left: 18vw;
}
.lvrNameTwo{
font-size: 5vw;
position: absolute;
top: 104vw;
color: white;
z-index: 100;
left: 18vw;
}
.lvrNameThree{
font-size: 5vw;
position: absolute;
top: 103vw;
color: white;
z-index: 100;
left: 23vw;
}
.pressShare{
height: 5vw;
width: 40vw;
position: absolute;
top: 158vw;
left: 28vw;
}
.qrCode{
position: absolute;
top: 120vw;
left: 58vw;
height: 22vw;
width: 22vw;
z-index: 100;
}
.qrCodeTwo{
position: absolute;
top: 124vw;
left: 60.5vw;
height: 22vw;
width: 22vw;
z-index: 100;
}
.qrCodeThree{
position: absolute;
top: 124vw;
left: 17vw;
height: 22vw;
width: 22vw;
z-index: 100;
}
</style>
\ No newline at end of file
src/main.js
View file @ b13cd205
...@@ -17,12 +17,14 @@ import 'video.js/dist/video-js.css' ...@@ -17,12 +17,14 @@ import 'video.js/dist/video-js.css'
import VueClipboard from "vue-clipboard2";
//引入 hls,视频直播(m3u8)必须引入的 //引入 hls,视频直播(m3u8)必须引入的
import 'videojs-contrib-hls' import 'videojs-contrib-hls'
//播放rtmp视频 //播放rtmp视频
// import 'videojs-flash' // import 'videojs-flash'
import Qs from 'qs' import Qs from 'qs'
Vue.use(Mint); Vue.use(Mint);
Vue.use(VueClipboard);
Vue.use(VideoPlayer); Vue.use(VideoPlayer);
Vue.prototype.server = server; Vue.prototype.server = server;
Vue.prototype.store = store; Vue.prototype.store = store;
......
src/views/fullScreen.vue
View file @ b13cd205
<template> <template>
<div class="videoPlayer"> <div class="videoPlayer">
<img @click="backHome()" class="back-list" src="../common/img/back-list.png" alt="">
<div class="teach-box">
</div>
<img class="head-img" :src='udPhotoFileid' alt="">
<span class="teach-name">{{udNickname}}</span>
<span class="home-number">房间号: {{lvrId}}</span>
<!-- 倒计时框 -->
<div class="countTime" v-if="imgShow==true">
<span class="countTimeText">您还没有购买，可试看{{countTimes}}S</span>
<img class="countTimeImg" src="../common/img/tryButton.png" alt="">
</div>
<!-- //分享卡片 -->
<share-card style=" z-index:99;" :headPortrait='udPhotoFileid' :udNickname='udNickname' :lvrName='lvrName' :lvrImgLargeUrl='lvrImgLargeUrl'> </share-card>
<img v-if="!ifFollow" @click="clickFollow()" class="follow-img" src="../common/img/follow.png" alt="">
<img v-if="ifFollow" @click="clickUnFollow()" class="follow-img" src="../common/img/unfollow.png" alt="">
<!-- <img class="share-img" src="../common/img/share.png" alt=""> -->
<div v-if="imgShow==true"> <div v-if="imgShow==true">
...@@ -85,9 +102,26 @@ ...@@ -85,9 +102,26 @@
</mt-tab-container> --> </mt-tab-container> -->
</div> </div>
<div v-if="imgShow==false"> <div v-if="imgShow==false">
<img src="../common/img/background-imge.jpg" style="height:100vh;width:100%" alt=""> <img src="../common/img/vertical-screen.webp" style="height:100vh;width:100%" alt="">
<img src="../common/img/video_play.png" style="height:14vw;width:14vw;position: fixed;top:74vw;left:42vw;" @click="goLive()" alt=""> <!-- <img src="../common/img/video_play.png" style="height:14vw;width:14vw;position: fixed;top:74vw;left:42vw;" @click="goLive()" alt="">
<span style="font-size:4vw;color:white;position: fixed;top:100vw;left:20vw;">直播暂未开始，先看看其它视频吧</span> <span style="font-size:4vw;color:white;position: fixed;top:100vw;left:20vw;">直播暂未开始，先看看其它视频吧</span> -->
</div>
<!-- 登录后观看按钮 -->
<div v-if="buttonType==0">
<img class="afterSignImg" @click="jumpLogin()" src="../common/img/afterSign.png" alt="">
<img v-if="ifSignFollow==false" @click="ifUcheck(0)" class="signUnCheck" src="../common/img/uncheck-img.png" alt="">
<img v-if="ifSignFollow==true" @click="ifUcheck(1)" class="signUnCheck" src="../common/img/check.png" alt="">
<span class="afterSignText">登录后关注主播</span>
</div>
<!-- 试看结束按钮 -->
<div v-if="buttonType==1">
<img class="afterSignImg" src="../common/img/tryLive.png" alt="">
</div>
<!-- 直播未开始提示购买 -->
<div v-if="buttonType==2">
<img class="afterSignImg" src="../common/img/notLive.png" alt="">
</div> </div>
</div> </div>
</template> </template>
...@@ -105,14 +139,27 @@ import mqtt from "../assets/sysconstant.js"; ...@@ -105,14 +139,27 @@ import mqtt from "../assets/sysconstant.js";
import 'video.js/dist/video-js.css' import 'video.js/dist/video-js.css'
Vue.component(Navbar.name, Navbar); Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem); Vue.component(TabItem.name, TabItem);
export default {
name: 'H5LiveLive',
export default {
// components:{
// shareCard: () => import('@/components/plugin/shareCard.vue')
// },
data() { data() {
return { return {
url: '' , url: '' ,
urlStor:'', urlStor:'',
udNickname:'',//主播名称
udPhotoFileid:'',//主播头像
lvrName:'',//直播名称
lvrImgLargeUrl:'',//占位图
ifSignFollow:true,//是否登录后关注
buttonType:0,//按钮显示
lvrId:'',
countTimes:0,//倒计时
lvrUbId:'',//主播id
timers:null,
stop:true, stop:true,
ifFollow:false,
imgShow:true, imgShow:true,
playerOptions: { playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度 playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
...@@ -154,9 +201,11 @@ export default { ...@@ -154,9 +201,11 @@ export default {
}, },
mounted() { mounted() {
this.liveList() this.liveList()
this.videoList() this.videoList()
this.getHeight() this.getHeight()
this.getListState()
// 连接mqtt // 连接mqtt
mqtt.connect({ mqtt.connect({
user: request.mqtt.mqttUser, user: request.mqtt.mqttUser,
...@@ -168,9 +217,14 @@ export default { ...@@ -168,9 +217,14 @@ export default {
}, this.getMessage); }, this.getMessage);
}, },
destroyed() {
this.updataTime()
console.log('销毁成功')
},
components:{ components:{
PreviewPdf, PreviewPdf,
LivePlayer LivePlayer,
shareCard: () => import('@/components/plugin/shareCard.vue')
}, },
computed:{ computed:{
...@@ -266,6 +320,79 @@ export default { ...@@ -266,6 +320,79 @@ export default {
this.stop=true this.stop=true
this.url=this.urlStor this.url=this.urlStor
} }
},
//点击是否登录关注主播
ifUcheck(e){
if(e==0){
this.ifSignFollow=true
}else{
this.ifSignFollow=false
}
},
//跳转登录页面
jumpLogin(){
this.$router.push(
{
path:'/',
query:{
lvrUbId:this.lvrUbId
}
});
},
//反回列表页页面
backHome(){
this.$router.push(
{
path:'/list',
});
},
//获取token
getState(){
let token=sessionStorage.getItem("token")
if(!token){
this.buttonType=0
this.imgShow=false
}
},
//游客登录
visitorLog(){
let temp=this.qs.stringify({
pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1',
pmMac:1,
pmIp:1,
pmOperator:'无运营商',
applicationType:4,
})
this.server.live.tourist(temp).then(res=>{
let thisToken= res.data.data.token
window.sessionStorage.setItem('token', thisToken);//token
this.liveList()
this.videoList()
this.getHeight()
this.getListState()
})
},
//点击关注事件
clickFollow(){
this.ifFollow=true
},
//点击已经关注按钮
clickUnFollow(){
this.ifFollow=false
}, },
//在vue-video-player的onPlayerCanplay(视频可播放)这个方法中添加回调 //在vue-video-player的onPlayerCanplay(视频可播放)这个方法中添加回调
onPlayerCanplay(player) { onPlayerCanplay(player) {
...@@ -298,7 +425,7 @@ export default { ...@@ -298,7 +425,7 @@ export default {
pmIp:1, pmIp:1,
pmMac:1, pmMac:1,
info:this.messages, info:this.messages,
lvrId:115, lvrId:this.$route.query.lvrId,
pmOperator:'无运营商' pmOperator:'无运营商'
}) })
this.server.live.setMessage(temp).then(res=>{ this.server.live.setMessage(temp).then(res=>{
...@@ -360,28 +487,97 @@ export default { ...@@ -360,28 +487,97 @@ export default {
this.clientHeight=window.screen.height this.clientHeight=window.screen.height
console.log("屏幕高度",this.clientHeight) console.log("屏幕高度",this.clientHeight)
}, },
//获取直播详情接口
liveList(){ liveList(){
let token=sessionStorage.getItem("token")
let img=sessionStorage.getItem("udPhotoFileid")
this.getState()
let temp=this.qs.stringify({ let temp=this.qs.stringify({
pmAppVersion:'884', pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)', pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1', pmSystem:'iOS 10.0.1',
timestamp:this.timestamp, timestamp:this.timestamp,
lvrId:115, lvrId:this.$route.query.lvrId,
pmOperator:'无运营商' pmOperator:'无运营商',
applicationType:4,
}) })
this.server.live.liveDetail(temp).then(res=>{ this.server.live.liveDetail(temp).then(res=>{
this.lvrInfoText=res.data.data.lvrInfoText this.lvrInfoText=res.data.data.lvrInfoText//富文本简介
this.lvrStatus=res.data.data.lvrStatus this.lvrStatus=res.data.data.lvrStatus//直播状态
this.lvrImgLargeUrl=res.data.data.lvrImgLargeUrl//占位图
this.lvrName=res.data.data.lvrName//直播名称
this.udNickname=res.data.data.udNickname//主播名称
this.udPhotoFileid=res.data.data.udPhotoFileid//主播头像
this.lvrId=res.data.data.lvrId//直播间id
this.lvrUbId=res.data.data.lvrUbId//主播id
// res.data.data.seeDuration
let timer=res.data.data.seeDuration
console.log("token",token)
console.log("头像",img)
if(token&&img){
// alert("sadfa第三个")
if(res.data.data.lvrStatus==1){ if(res.data.data.lvrStatus==1){
//是否购买
if(res.data.data.isBuy==1){
this.url=res.data.data.lvpPullUrl this.url=res.data.data.lvpPullUrl
this.urlStor=res.data.data.lvpPullUrl this.urlStor=res.data.data.lvpPullUrl
this.imgShow=true this.imgShow=true//显示直播页面
this.buttonType=3
}else{
if(res.data.data.seeDuration==0){
this.buttonType=1
this.imgShow=false//显示暂无主播
this.url=""
this.urlStor=""
}else{ }else{
this.url=res.data.data.lvpPullUrl
this.urlStor=res.data.data.lvpPullUrl
this.imgShow=true//显示暂无主播
this.buttonType=3
//试看倒计时
if(timer==0){
this.countTimes=0
this.imgShow=false this.imgShow=false
this.buttonType=2
this.url=""
this.urlStor=""
}else{
if (!this.timers) {
this.countTimes=timer
this.timers = setInterval(() => {
if (this.countTimes > 0 && this.countTimes <= timer) {
this.countTimes--;
} else {
this.countTimes=0
this.updataTime()
this.$router.go(0)
this.buttonType=1
this.imgShow=false//显示暂无主播
this.url=""
this.urlStor=""
}
}, 1000)
}
} }
}
}
}else{
this.imgShow=false
this.buttonType=2
}
}else{
this.buttonType=0
this.imgShow=false
// this.url=res.data.data.lvpPullUrl
// this.urlStor=res.data.data.lvpPullUrl
// this.imgShow=true//显示直播页面
// this.buttonType=3
}
// let thisToken= res.data.data.token // let thisToken= res.data.data.token
// window.sessionStorage.setItem('token', thisToken); // window.sessionStorage.setItem('token', thisToken);
...@@ -392,13 +588,32 @@ export default { ...@@ -392,13 +588,32 @@ export default {
// }); // });
}) })
}, },
//更新时间 接口
updataTime(){
let temp=this.qs.stringify({
pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1',
// timestamp:this.timestamp,
pmMac:'1',
pmIp:1,
applicationType:4,
duration:this.countTimes,
lvrId:this.$route.query.lvrId,
pmOperator:'无运营商'
})
this.server.live.updataTime(temp).then(res=>{
})
},
videoList(i){ videoList(i){
let temp=this.qs.stringify({ let temp=this.qs.stringify({
pmAppVersion:'884', pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)', pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1', pmSystem:'iOS 10.0.1',
timestamp:this.timestamp, timestamp:this.timestamp,
lvrId:115, lvrId:this.$route.query.lvrId,
pmOperator:'无运营商' pmOperator:'无运营商'
}) })
this.server.live.videoList(temp).then(res=>{ this.server.live.videoList(temp).then(res=>{
...@@ -430,7 +645,67 @@ export default { ...@@ -430,7 +645,67 @@ export default {
path:'/pdf', path:'/pdf',
query:{url:i}, query:{url:i},
}); });
},
//获取直播列表状态
getListState(){
console.log("好舒服擦",this.$route.query.ifrecom)
let ifrecom=this.$route.query.ifrecom
let lvrId=this.$route.query.lvrId
let temp=this.qs.stringify({
pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1',
pmMac:1,
pmIp:1,
pmOperator:'无运营商',
applicationType:4,
})
if(!ifrecom){
this.server.live.getLive(temp).then(res=>{
// this.url=res.data.data.lvpPullUrl
if(res.data.data.businessCode==10){
let list=res.data.data.appSingleLiveResponseVOList
list.forEach(i => {
// i.ifrecom=true
if(i.lvrIsFree==0){
this.freeList.push(i)
}else{
this.vipList.push(i)
} }
});
console.log('列表信息111',list)
console.log('vip列表111',this.vipList)
console.log('免费列表222',this.freeList)
// this.source=res.data.data.info
// if(i==1){
// this.url=res.data.data.info[0].lvrrVideo
// this.urlStor=res.data.data.info[0].lvrrVideo
// }
}
})
}else{
this.server.live.getLiveRecommendList(temp).then(res=>{
let list=res.data.data.appSingleLiveResponseVOList
// list.forEach(i => {
// if(i.lvrIsFree==0){
// }else{
// }
// });
console.log('列表信息',list)
console.log('vip列表',this.vipList)
console.log('免费列表',this.freeList)
})
}
},
}, },
}; };
</script> </script>
...@@ -441,7 +716,93 @@ export default { ...@@ -441,7 +716,93 @@ export default {
height: 74vh; height: 74vh;
} }
.videoPlayer{
position: relative;
}
.back-list{
position: absolute;
top: 2vw;
left: 1vw;
z-index: 99;
height: 8vw;
width: 8vw;
}
.countTime{
height: 10vw;
width: 82vw;
background:#000000;;
position: absolute;
top: 13vw;
border-radius: 10vw;
right: 5vw;
z-index: 99;
}
.countTimeText{
position: absolute;
top: 3vw;
left: 4vw;
font-size: 3vw;
color: #FF9F2C;
}
.countTimeImg{
height: 8vw;
width: 38vw;
position: absolute;
top: 1vw;
right: 1vw;
}
.teach-box{
position: absolute;
top: 2vw;
left: 12vw;
height: 8vw;
width: 45vw;
border-radius: 10vw;
background: #000000;
}
.head-img{
position: absolute;
top: 2.4vw;
left: 12.7vw;
height: 7vw;
width: 7vw;
z-index:99;
border-radius: 50%;
}
.teach-name{
font-size: 4vw;
transform: scale(0.8);
position: absolute;
z-index:99;
top: 1.4vw;
left: 19vw;
color: white;
}
.home-number{
font-size: 1vw;
transform: scale(0.7);
position: absolute;
top: 6vw;
left: 18vw;
z-index:99;
color: white;
}
.follow-img{
position: absolute;
top: 3vw;
left: 42vw;
height: 6vw;
width: 14vw;
z-index:99
}
.share-img{
position: absolute;
top: 2vw;
right: 3vw;
height: 8vw;
width: 8vw;
}
.subordinate{ .subordinate{
height: 5vw; height: 5vw;
width: 5vw; width: 5vw;
...@@ -729,4 +1090,25 @@ display: block; ...@@ -729,4 +1090,25 @@ display: block;
opacity: 0.6; opacity: 0.6;
line-height: 10vw; line-height: 10vw;
} }
.afterSignImg{
height: 30vw;
width: 60vw;
position: absolute;
top: 90vw;
left: 20vw;
}
.signUnCheck{
height: 4vw;
width: 4vw;
position: absolute;
top: 124.8vw;
left: 32vw;
}
.afterSignText{
font-size: 3.7vw;
color: #C6C6C6;
position: absolute;
top: 124vw;
left: 37vw;
}
</style> </style>
\ No newline at end of file
src/views/live.vue
View file @ b13cd205
...@@ -40,8 +40,9 @@ ...@@ -40,8 +40,9 @@
</div> </div>
<div class="sendMessage"> <div class="sendMessage">
<input type="text" v-model="messages" placeholder="吐个槽吧~" class="wbk2"> <img src="../common/img/voice.png" class="voiceImg" alt="">
<img class="send-message" src="../common/img/send-message.png" @click="clickmessage()" alt=""> <input type="text" v-model="messages" placeholder="有问题发个弹幕问一下" class="wbk2">
<img class="send-message" src="../common/img/sendButton.png" @click="clickmessage()" alt="">
</div> </div>
<div class="tips" style="display: none;"> <div class="tips" style="display: none;">
<span>发送成功</span> <span>发送成功</span>
...@@ -315,11 +316,11 @@ export default { ...@@ -315,11 +316,11 @@ export default {
//屏幕可视区域的高度 //屏幕可视区域的高度
let clientHeight let clientHeight
if(document.documentElement.clientHeight<=750){ if(document.documentElement.clientHeight<=750){
clientHeight=90+'vw' clientHeight=120+'vw'
}else if(document.documentElement.clientHeight<1024){ }else if(document.documentElement.clientHeight<1024){
clientHeight=125+'vw' clientHeight=155+'vw'
}else{ }else{
clientHeight=55+'vw' clientHeight=85+'vw'
} }
console.log("clientHeight 1=="+clientHeight) console.log("clientHeight 1=="+clientHeight)
...@@ -375,7 +376,7 @@ export default { ...@@ -375,7 +376,7 @@ export default {
pmIp:1, pmIp:1,
pmMac:1, pmMac:1,
info:this.messages, info:this.messages,
lvrId:115, lvrId:this.$route.query.lvrId,
pmOperator:'无运营商' pmOperator:'无运营商'
}) })
this.server.live.setMessage(temp).then(res=>{ this.server.live.setMessage(temp).then(res=>{
...@@ -437,7 +438,7 @@ export default { ...@@ -437,7 +438,7 @@ export default {
pmModel:'iPhone 12/13 (Pro)', pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1', pmSystem:'iOS 10.0.1',
timestamp:this.timestamp, timestamp:this.timestamp,
lvrId:115, lvrId:this.$route.query.lvrId,
pmOperator:'无运营商' pmOperator:'无运营商'
}) })
this.server.live.liveDetail(temp).then(res=>{ this.server.live.liveDetail(temp).then(res=>{
...@@ -465,7 +466,7 @@ export default { ...@@ -465,7 +466,7 @@ export default {
pmModel:'iPhone 12/13 (Pro)', pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1', pmSystem:'iOS 10.0.1',
timestamp:this.timestamp, timestamp:this.timestamp,
lvrId:115, lvrId:this.$route.query.lvrId,
pmOperator:'无运营商' pmOperator:'无运营商'
}) })
this.server.live.videoList(temp).then(res=>{ this.server.live.videoList(temp).then(res=>{
...@@ -981,7 +982,7 @@ display: block; ...@@ -981,7 +982,7 @@ display: block;
width: 98%; width: 98%;
height: 16vw; height: 16vw;
/* border: 0.5vw solid red; */ /* border: 0.5vw solid red; */
background: white; /* background: white; */
position: fixed; position: fixed;
box-shadow: #797979 0 -0.5vw 1vw; box-shadow: #797979 0 -0.5vw 1vw;
bottom: 1%; bottom: 1%;
...@@ -994,25 +995,31 @@ display: block; ...@@ -994,25 +995,31 @@ display: block;
font-size: 3.7vw; font-size: 3.7vw;
color: #797979; color: #797979;
border-radius: 5vw; border-radius: 5vw;
width: 65vw; width: 45vw;
height: 13vw; height: 10vw;
/* line-height: 10vw; */ /* line-height: 10vw; */
margin-top: 1.5vw; margin-top: 3.5vw;
padding: 0 3vw; padding: 0 3vw;
background: none; background: none;
box-shadow: none; box-shadow: none;
outline: none; outline: none;
background: rgb(243, 243, 243); background: rgb(243, 243, 243);
margin-left: 4vw; opacity: 0.4;
/* margin-left: 13vw; */
/* border-color: rgb(213, 225, 245); */ /* border-color: rgb(213, 225, 245); */
border-left: 0px; border-left: 0px;
border-top: 0px; border-top: 0px;
border-bottom: 0px; border-bottom: 0px;
border-right: 0px; border-right: 0px;
padding-left: 9vw;
} }
.send-message{ .send-message{
height: 10vw; height: 10vw;
width: 22vw;
margin-top: 3.5vw;
}
.voiceImg{
height: 10vw;
width: 10vw; width: 10vw;
margin-top: 3vw; margin-top: 3vw;
} }
...@@ -1028,10 +1035,13 @@ display: block; ...@@ -1028,10 +1035,13 @@ display: block;
.firstBody1{ .firstBody1{
overflow-x: auto; overflow-x: auto;
overflow-y:auto; overflow-y:auto;
margin-top: 2vw; /* margin-top: 2vw; */
height: 125vw; height: 125vw;
/* background: #0C0A16; */ /* background: #0C0A16; */
background: url('../assets/b.png'); background: url('../assets/b.png');
background-size:145vw;
background-repeat: no-repeat;
} }
.mq-message1{ .mq-message1{
/* height: 10vw; */ /* height: 10vw; */
......
src/views/liveList.vue
View file @ b13cd205
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<span :class="{member:!ifFree,nonemember:ifFree}" @click="clickVIP()">VIP</span> <span :class="{member:!ifFree,nonemember:ifFree}" @click="clickVIP()">VIP</span>
</div> </div>
<div class="content"> <div class="content">
<div v-if="ifFree" v-for="i in freeList" :key="i.lvrId" class="moudle" > <div v-if="ifFree" @click="liveDetail(i)" v-for="i in freeList" :key="i.lvrId" class="moudle" >
<img class="recommed-img" v-if="i.ifrecom" src="../common/img/recommend.png" alt=""> <img class="recommed-img" v-if="i.ifrecom" src="../common/img/recommend.png" alt="">
<img class="head-img" src="../common/img/wechact.png" alt=""> <img class="head-img" src="../common/img/wechact.png" alt="">
<span class="head-name">{{i.udNickname}}</span> <span class="head-name">{{i.udNickname}}</span>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<span class="people-num">{{i.hotNum}}</span> <span class="people-num">{{i.hotNum}}</span>
</div> </div>
<div v-if="!ifFree" v-for="i in vipList" :key="i.lvrId" class="moudle"> <div v-if="!ifFree" @click="liveDetail(i)" v-for="i in vipList" :key="i.lvrId" class="moudle">
<img class="recommed-img" v-if="i.ifrecom" src="../common/img/recommend.png" alt=""> <img class="recommed-img" v-if="i.ifrecom" src="../common/img/recommend.png" alt="">
<img class="head-img" src="../common/img/wechact.png" alt=""> <img class="head-img" src="../common/img/wechact.png" alt="">
<span class="head-name">{{i.udNickname}}</span> <span class="head-name">{{i.udNickname}}</span>
...@@ -133,6 +133,7 @@ export default { ...@@ -133,6 +133,7 @@ export default {
getState(){ getState(){
let token=sessionStorage.getItem("token") let token=sessionStorage.getItem("token")
let img=sessionStorage.getItem("udPhotoFileid") let img=sessionStorage.getItem("udPhotoFileid")
console.log("就阿婆啊v发",token)
if(token){ if(token){
if(img){ if(img){
this.ifLog=2 this.ifLog=2
...@@ -141,7 +142,7 @@ export default { ...@@ -141,7 +142,7 @@ export default {
this.ifLog=1 this.ifLog=1
} }
}else{ }else{
console.log("就阿婆啊v发")
this.ifLog=0 this.ifLog=0
this.visitorLog() this.visitorLog()
} }
...@@ -160,12 +161,42 @@ export default { ...@@ -160,12 +161,42 @@ export default {
this.server.live.tourist(temp).then(res=>{ this.server.live.tourist(temp).then(res=>{
let thisToken= res.data.data.token let thisToken= res.data.data.token
window.sessionStorage.setItem('token', thisToken);//token window.sessionStorage.setItem('token', thisToken);//token
this.$router.go(0)
}) })
}, },
mine(){ mine(){
this.$router.push('/mine') this.$router.push('/mine')
},
liveDetail(i){
let ifrecom
if(i.ifrecom){
ifrecom=true
}else{
ifrecom=false
}
if(i.lvrLiveType==0){
this.$router.push(
{
path:'/fullScreen',
query:{
lvrId:i.lvrId,
ifrecom:ifrecom
}
});
}else{
this.$router.push(
{
path:'/live',
query:{
lvrId:i.lvrId,
ifrecom:ifrecom
}
});
}
} }
}, },
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment