Skip to content

N
newLive
Commit 23e731d7 authored by mengqr's avatar mengqr
Browse files
Options

分享卡片，竖屏页面

parents 2cdd918c 4ad38ffa
Hide whitespace changes
Inline Side-by-side
Showing with 1031 additions and 12514 deletions
package-lock.json
View file @ 23e731d7
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ 23e731d7
......@@ -19,7 +19,9 @@
"pdfh5": "^1.4.2",
"qs": "^6.11.0",
"vue": "^2.6.14",
"vue-clipboard2": "^0.3.3",
"vue-pdf": "^4.3.0",
"vue-qr": "^4.0.9",
"vue-router": "^3.5.2",
"vue-video-player": "^5.0.2",
"vuex": "^4.1.0"
......
src/axios/api.js
View file @ 23e731d7
......@@ -41,9 +41,14 @@ live: {
liveDetail:function(data){
return service.post('/app/live/liveDetail', data)
},
//游客登录
tourist:function(data){
return service.post('/auth/tourist', data)
},
//更新试看时间
updataTime:function(data){
return service.post('/oapi/v1/H5/live/update/duration', data)
},
videoList:function(data){
return service.post('/app/live/getLiveRepeatList', data)
},
......
src/components/plugin/shareCard.vue 0 → 100644
View file @ 23e731d7
<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 @ 23e731d7
......@@ -11,12 +11,14 @@ import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import common from '../static/js/common.js' //公共方法
import 'video.js/dist/video-js.css'
import VueClipboard from "vue-clipboard2";
//引入 hls,视频直播(m3u8)必须引入的
import 'videojs-contrib-hls'
//播放rtmp视频
// import 'videojs-flash'
import Qs from 'qs'
Vue.use(Mint);
Vue.use(VueClipboard);
Vue.use(VideoPlayer);
Vue.prototype.server = server;
Vue.prototype.store = store;
......
src/views/fullScreen.vue
View file @ 23e731d7
<template>
<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">
......@@ -85,9 +102,26 @@
</mt-tab-container> -->
</div>
<div v-if="imgShow==false">
<img src="../common/img/background-imge.jpg" 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="">
<span style="font-size:4vw;color:white;position: fixed;top:100vw;left:20vw;">直播暂未开始，先看看其它视频吧</span>
<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="">
<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>
</template>
......@@ -105,14 +139,27 @@ import mqtt from "../assets/sysconstant.js";
import 'video.js/dist/video-js.css'
Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);
export default {
name: 'H5LiveLive',
export default {
// components:{
// shareCard: () => import('@/components/plugin/shareCard.vue')
// },
data() {
return {
url: '' ,
urlStor:'',
udNickname:'',//主播名称
udPhotoFileid:'',//主播头像
lvrName:'',//直播名称
lvrImgLargeUrl:'',//占位图
ifSignFollow:true,//是否登录后关注
buttonType:0,//按钮显示
lvrId:'',
countTimes:0,//倒计时
lvrUbId:'',//主播id
timers:null,
stop:true,
ifFollow:false,
imgShow:true,
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
......@@ -154,9 +201,11 @@ export default {
},
mounted() {
this.liveList()
this.videoList()
this.getHeight()
this.getListState()
// 连接mqtt
mqtt.connect({
user: request.mqtt.mqttUser,
......@@ -168,9 +217,14 @@ export default {
}, this.getMessage);
},
destroyed() {
this.updataTime()
console.log('销毁成功')
},
components:{
PreviewPdf,
LivePlayer
LivePlayer,
shareCard: () => import('@/components/plugin/shareCard.vue')
},
computed:{
......@@ -266,6 +320,79 @@ export default {
this.stop=true
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(视频可播放)这个方法中添加回调
onPlayerCanplay(player) {
......@@ -298,7 +425,7 @@ export default {
pmIp:1,
pmMac:1,
info:this.messages,
lvrId:115,
lvrId:this.$route.query.lvrId,
pmOperator:'无运营商'
})
this.server.live.setMessage(temp).then(res=>{
......@@ -360,28 +487,97 @@ export default {
this.clientHeight=window.screen.height
console.log("屏幕高度",this.clientHeight)
},
//获取直播详情接口
liveList(){
let token=sessionStorage.getItem("token")
let img=sessionStorage.getItem("udPhotoFileid")
this.getState()
let temp=this.qs.stringify({
pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1',
timestamp:this.timestamp,
lvrId:115,
pmOperator:'无运营商'
lvrId:this.$route.query.lvrId,
pmOperator:'无运营商',
applicationType:4,
})
this.server.live.liveDetail(temp).then(res=>{
this.lvrInfoText=res.data.data.lvrInfoText
this.lvrStatus=res.data.data.lvrStatus
if(res.data.data.lvrStatus==1){
this.url=res.data.data.lvpPullUrl
this.lvrInfoText=res.data.data.lvrInfoText//富文本简介
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.isBuy==1){
this.url=res.data.data.lvpPullUrl
this.urlStor=res.data.data.lvpPullUrl
this.imgShow=true//显示直播页面
this.buttonType=3
}else{
if(res.data.data.seeDuration==0){
this.buttonType=1
this.imgShow=false//显示暂无主播
this.url=""
this.urlStor=""
}else{
this.url=res.data.data.lvpPullUrl
this.urlStor=res.data.data.lvpPullUrl
this.imgShow=true
this.imgShow=true//显示暂无主播
this.buttonType=3
//试看倒计时
if(timer==0){
this.countTimes=0
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
// window.sessionStorage.setItem('token', thisToken);
......@@ -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){
let temp=this.qs.stringify({
pmAppVersion:'884',
pmModel:'iPhone 12/13 (Pro)',
pmSystem:'iOS 10.0.1',
timestamp:this.timestamp,
lvrId:115,
lvrId:this.$route.query.lvrId,
pmOperator:'无运营商'
})
this.server.live.videoList(temp).then(res=>{
......@@ -430,7 +645,67 @@ export default {
path:'/pdf',
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>
......@@ -441,7 +716,93 @@ export default {
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{
height: 5vw;
width: 5vw;
......@@ -729,4 +1090,25 @@ display: block;
opacity: 0.6;
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>
\ No newline at end of file
src/views/liveList.vue
View file @ 23e731d7
......@@ -11,7 +11,7 @@
<span :class="{member:!ifFree,nonemember:ifFree}" @click="clickVIP()">VIP</span>
</div>
<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="head-img" src="../common/img/wechact.png" alt="">
<span class="head-name">{{i.udNickname}}</span>
......@@ -22,7 +22,7 @@
<span class="people-num">{{i.hotNum}}</span>
</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="head-img" src="../common/img/wechact.png" alt="">
<span class="head-name">{{i.udNickname}}</span>
......@@ -166,6 +166,36 @@ export default {
},
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