小屏直播试看关注调用支付弹窗

src/axios/api.js

@@ -45,6 +45,10 @@ live: {
     tourist:function(data){
         return service.post('/auth/tourist', data)
     },
+    //关注接口
+    follow:function(data){
+        return service.post('/app/live/followAnchor', data)
+    },
     //更新试看时间
     updataTime:function(data){
         return service.post('/oapi/v1/H5/live/update/duration', data)

src/axios/request.js

@@ -9,9 +9,9 @@ const appName = "test5"
 
 const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
 // 接口路径
-const BASEURL_TEST = 'https://api.douniu8.com'
+const BASEURL_TEST = 'https://test6.douniu8.com'
 // const BASEURL_TEST = 'http://39.105.193.58:8081'
-const BASEURL_PROD = 'https://api.douniu8.com'
+const BASEURL_PROD = 'https://test6.douniu8.com'
 const CONTRACT_TEST = 'http://47.95.140.89:9090'
 const CONTRACT_PROD = 'http://ht.douniu8.com:9090'
 const baseURL =  IS_PROD ? BASEURL_PROD : BASEURL_TEST;

src/components/plugin/shareCard.vue

@@ -6,7 +6,7 @@
         <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="">
-       
+       <img class="shareTips" v-if="ifTips" @click="clickTips()" src="../../common/img/shareTips.png" alt="">
         <!-- 信息样式 -->
         <div v-if="checkType==0">
             <img class="headImg" :src="headPro" alt="">
@@ -57,7 +57,7 @@
             <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">
+            <div @click="clickWechact()" class="clickWechat">
                 <img class="wechactImg" src="../../common/img/wechact-share.png" alt="">
                 <span class="wechactText">微信</span>
             </div>
@@ -103,6 +103,7 @@ export default {
             headPro:'',//头像图片
             udName:'',//主播名称
             lvrImg:'',//占位图
+            ifTips:false,//是否显示提示图
             liveName:'',//房间名称
         };
     },
@@ -137,6 +138,13 @@ export default {
         
         
 //     },
+//点击微信分享
+clickWechact(){
+this.ifTips=true
+},
+clickTips(){
+this.ifTips=false
+},
     //点击分享按钮
 clickShare(){
     if(this.ifShow==false){
@@ -180,7 +188,7 @@ this.imgUrl=window.location.href//二维码地址
     left: 0;
     width: 100vw;
     height: 50vw;
-    border-radius: 4vw;
+    border-radius: 4vw 4vw 0 0;
     background: white;
 }
 .smallOne{
@@ -357,27 +365,30 @@ font-size: 4vw;
     z-index: 100;
 }
 .lvrName{
-    font-size: 5vw;
+    font-size: 4vw;
+    width: 68vw;
     position: absolute;
-    top: 104vw;
+    top: 102vw;
     z-index: 100;
-    left: 18vw;
+    left: 15vw;
 }
 .lvrNameTwo{
-    font-size: 5vw;
+    font-size: 3.8vw;
+    width: 66vw;
     position: absolute;
-    top: 104vw;
+    top: 102vw;
     color: white;
     z-index: 100;
-    left: 18vw;
+    left: 16vw;
 }
 .lvrNameThree{
-    font-size: 5vw;
+    font-size: 3.8vw;
     position: absolute;
-    top: 103vw;
+    top: 100vw;
+    width: 56vw;
     color: white;
     z-index: 100;
-    left: 23vw;
+    left: 21vw;
 }
 .pressShare{
     height: 5vw;
@@ -410,4 +421,12 @@ font-size: 4vw;
     width: 22vw;
     z-index: 100;
 }
+.shareTips{
+   height: 100vh;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    z-index: 110;
+    left: 0;
+}
 </style>
\ No newline at end of file

src/views/fullScreen.vue

@@ -7,6 +7,8 @@
         <img class="head-img" :src='udPhotoFileid' alt="">
         <span class="teach-name">{{udNickname}}</span>
         <span class="home-number">房间号: {{lvrId}}</span>
+        <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="">
 <!-- 倒计时框 -->
         <div class="countTime" v-if="imgShow==true">
             <span class="countTimeText">您还没有购买，可试看{{countTimes}}S</span>
@@ -14,8 +16,7 @@
         </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">
 
@@ -101,6 +102,127 @@
   </mt-tab-container-item>
 </mt-tab-container> -->
 </div>
+<!-- 直播卡片 -->
+<div v-if="pten" @click="clickPayBox" class="payBox">
+
+</div>
+<div class="p_conte" v-if="pten">
+    <div class="conten">
+       <div class="Sue">确认支付</div>
+        <div class="odiv">
+               <ul>
+ 
+                 <!--第一个卡片 -->
+             <li class="live_b"  @click="tab_li(index,item.chargeModeKey)" v-for="(item,index) in Listfor" :key="index"
+              :class="is_xuanzhong == `${is_Month + index}` ? 'Month'+index : item.chargeModeKey"
+             
+              >
+                 <div class="one_day">{{item.leftPromptText}}</div>
+                 <div class="Plef">
+                     <div class="div_p">{{item.chargeModeName}}</div>
+                     <div class="Uimg"> 
+                        <img src="../assets/niu.png" alt="" class="sent_r">
+                        <span>{{item.lvrfFee}} </span>
+                      </div>
+                    
+                     <div class="Mar_p">
+                      <img src="../assets/niu.png" alt="" class="U_both">
+                      <span class="d_num">{{item.promptFee}}/月</span>
+                     </div>
+                   
+                  </div>
+             </li>
+
+         </ul>
+          <!-- <ul>
+                
+             <li class="live_b" @click="tab_li(index,item.chargeModeKey)" :class="{active_p:currentIndex === index}" v-for="(item,index) in Listfor" :key="index">
+                 <div class="one_day">畅享受{{item.num}}天</div>
+                 <div class="Plef">
+                     <div class="div_p">{{item.chargeModeName}}</div>
+                     <div class="Uimg"> 
+                        <img src="../assets/niu.png" alt="" class="sent_r">
+                        
+                        <span>{{item.lvrfFee}}   </span>
+                      </div>
+                    
+                     <div class="Mar_p">
+                      <img src="../assets/niu.png" alt="" class="U_both">
+                     
+                      <span>{{item.promptFee}}月</span>
+                      
+                     </div>
+                   
+                  </div>
+             </li>
+       
+         </ul> -->
+        </div>
+    
+         <div class="Lent">
+         
+              <div class="Usret">
+               
+                <span class="buy">购买者</span><span class="name">{{udRealname}}</span>
+              </div>
+              <div class="Usret_p">
+                <span class="buy">购买项目</span><span class="name">xxxx谁的直播间</span>
+              </div>
+              <div class="Lpin">支付方式 <span>{{text}}</span></div>
+                  <!--牛币-->
+              <div class="ov"  :class="n==1?'active':''">
+                   <div>
+                        <img src="../assets/niu.png" alt="">
+                       <span>金牛（账户余额：20金牛）</span>
+                   </div>
+                    <!--未选中-->
+                    <img src="../assets/noxuanzhong.png" alt="" class="Ig"  v-show="n != 1" @click="slect_one(1)"> 
+                    <!--选中-->
+                     <img src="../assets/select.png" alt="" class="Ig" v-if="n == 1"> 
+                
+                
+              </div>
+               <!--微信-->
+               <div class="ov"  :class="n==2?'active':''">
+                   <div>
+                        <img src="../assets/wx.png" alt="">
+                       <span>微信</span>
+                   </div>
+                   <!--未选中-->
+                    <img src="../assets/noxuanzhong.png" alt="" class="Ig"  v-show="n != 2" @click="slect_one(2)"> 
+                    <!--选中-->
+                     <img src="../assets/select.png" alt="" class="Ig" v-if="n==2"> 
+                
+              </div>
+               <!--支付宝-->
+               <div class="ov"  :class="n==3?'active':''">
+                   <div>
+                        <img src="../assets/zfb.png" alt="">
+                       <span>支付宝</span>
+                   </div>
+                   <!--未选中-->
+                    <img src="../assets/noxuanzhong.png" alt="" class="Ig"  v-show="n != 3" @click="slect_one(3)"> 
+                    <!--选中-->
+                     <img src="../assets/select.png" alt="" class="Ig" v-if="n==3"> 
+                
+                
+              </div>
+              <div class="z_sen">
+                      <!--未选中-->
+                     <img src="../assets/noxuanzhong.png" alt="" class="Ig" v-if="isImg_show_p"  @click="x_login"> 
+                       <!--选中-->
+                     <img src="../assets/select.png" alt="" class="Ig" v-if="isImg_show" @click="x_login"> 
+                    <span>同意</span><span class="no_p">《风险揭示书》《服务协议书》</span>
+                    <div v-if="a_plert" class="gtert">请勾选同意</div>
+                   
+              </div>
+               <div class="gr"><img src="../assets/login.png" alt="" class="Pl" @click="login_t"></div>
+               <img :src="'data:image/png;base64,'+ qrcodeSrc" alt=""  >
+         </div>
+         
+         
+    </div>
+</div>
 <div v-if="imgShow==false">
 <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="">
@@ -115,12 +237,12 @@
 </div>
 
 <!-- 试看结束按钮 -->
-<div v-if="buttonType==1">
+<div v-if="buttonType==1" @click="pay_p">
 <img class="afterSignImg" src="../common/img/tryLive.png" alt="">
 </div>
 
 <!-- 直播未开始提示购买 -->
-<div v-if="buttonType==2">
+<div v-if="buttonType==2" @click="pay_p">
     <img class="afterSignImg" src="../common/img/notLive.png" alt="">
 </div>
 </div>
@@ -155,9 +277,20 @@ export default {
            ifSignFollow:true,//是否登录后关注
             buttonType:0,//按钮显示
            lvrId:'',
+           Listfor:'',
+           text:'',
+           pten:false,//直播卡片显示
            countTimes:0,//倒计时
            lvrUbId:'',//主播id
            timers:null,
+            a_plert:false,
+            isImg_show:false,//提交勾选协议
+           isImg_show_p:true,
+           n : 1,
+            qrcodeSrc:'',
+            chargeModeKey:'Month',
+            is_xuanzhong : 'Month0',
+            is_Month : 'Month',
            stop:true,
            ifFollow:false,
            imgShow:true,
@@ -185,6 +318,7 @@ export default {
           },
            selected:'1',
            ifcli:false,
+           udRealname:'',
            lvrStatus:'',
            lvrInfoText:'',
            timestamp:Date.parse(new Date())/1000,
@@ -206,6 +340,7 @@ export default {
         this.videoList()
         this.getHeight()
         this.getListState()
+        this.pay_info()
         // 连接mqtt
       mqtt.connect({
         user: request.mqtt.mqttUser,
@@ -321,6 +456,64 @@ export default {
                 this.url=this.urlStor
             }
     },
+    tab_li(index,chargeModeKey){
+         
+       this.is_xuanzhong = 'Month' + index;
+     this.chargeModeKey = chargeModeKey;
+        // this.idx=index
+        // this.Modekey=chargeModeKey
+            console.log( this.chargeModeKey+"是否收费模式")
+       },
+       slect_one(val){
+         this.n = val
+       },
+    //直播卡片显示事件
+    pay_p(){
+       this.pten = true
+       },
+       clickPayBox(){
+this.pten = false
+          },
+       //点击支付选中按钮
+       x_login(){
+        this.isImg_show=true
+        this.isImg_show_p=false
+        if(this.isImg_show == false){
+            this.a_plert = false;
+                   
+          }else if(this.isImg_show == true){
+            this.a_plert = false;
+          }
+       },
+       login_t(){
+        this.payorder()
+        // this.pay_code()   
+        if(!this.isImg_show){
+           this.a_plert=true
+          return;
+        }
+       },
+       //获取支付信息
+        pay_info(){
+                let temp=this.qs.stringify({
+                    
+                    applicationType:4,
+                    pmAppVersion: 868,
+                  // applicationType: 3,
+                    goodsType:3,
+                    goodsId:429,//285
+                })
+                    this.server.live.payinfo(temp).then(res=>{
+                    this.udRealname=res.data.data.udRealname
+                    this.text=res.data.data.text,
+                    this.Listfor =res.data.data.fees
+                    // this.lvrStatus=res.data.data.lvrStatus
+
+                    console.log()
+       
+                })
+
+        },
     //点击是否登录关注主播
     ifUcheck(e){
 
@@ -388,11 +581,54 @@ export default {
         },
     //点击关注事件    
     clickFollow(){
-        this.ifFollow=true
+        
+        let temp=this.qs.stringify({
+                   pmAppVersion:'884',
+                    pmModel:'iPhone 12/13 (Pro)',
+                    pmSystem:'iOS 10.0.1',
+                    pmMac:'1',
+                    pmIp:1,
+                    lvrUbId:this.lvrUbId,
+                    applicationType:4,
+                    type:1,
+                    pmOperator:'无运营商'
+                })
+                let token=sessionStorage.getItem("token")    
+            let img=sessionStorage.getItem("isReg")
+            
+                this.server.live.follow(temp).then(res=>{
+                    if(res.data.data.businessCode==20){
+                        this.ifFollow=true
+                    }else{
+                        alert(res.data.data.businessMessage)
+                    }
+                    
+                })
     },
     //点击已经关注按钮
     clickUnFollow(){
-        this.ifFollow=false
+       let temp=this.qs.stringify({
+                   pmAppVersion:'884',
+                    pmModel:'iPhone 12/13 (Pro)',
+                    pmSystem:'iOS 10.0.1',
+                    pmMac:'1',
+                    pmIp:1,
+                    lvrUbId:this.lvrUbId,
+                    type:1,
+                    applicationType:4,
+                    pmOperator:'无运营商'
+                })
+                let token=sessionStorage.getItem("token")    
+            let img=sessionStorage.getItem("isReg")
+            
+                this.server.live.follow(temp).then(res=>{
+                    if(res.data.data.businessCode==20){
+                        this.ifFollow=true
+                    }else{
+                        alert(res.data.data.businessMessage)
+                    }
+                    
+                })
     },
         //在vue-video-player的onPlayerCanplay(视频可播放)这个方法中添加回调
     onPlayerCanplay(player) {
@@ -490,7 +726,7 @@ export default {
         //获取直播详情接口
         liveList(){
             let token=sessionStorage.getItem("token")
-            let img=sessionStorage.getItem("udPhotoFileid")
+            let img=sessionStorage.getItem("isReg")
             this.getState()
             let temp=this.qs.stringify({
                    pmAppVersion:'884',
@@ -510,10 +746,12 @@ export default {
                     this.udPhotoFileid=res.data.data.udPhotoFileid//主播头像
                     this.lvrId=res.data.data.lvrId//直播间id
                     this.lvrUbId=res.data.data.lvrUbId//主播id
+
+                    this.ifFollow=res.data.data.followAnchor//关注主播状态
                     // res.data.data.seeDuration
                     let timer=res.data.data.seeDuration
                 
-                 
+                 console.log("萨芬", this.lvrUbId)
                     console.log("token",token)
              console.log("头像",img)
             if(token&&img){
@@ -735,7 +973,7 @@ let temp=this.qs.stringify({
     top: 13vw;
     border-radius: 10vw;
     right: 5vw;
-    z-index: 99;
+    z-index: 89;
 } 
 .countTimeText{
     position: absolute;
@@ -755,6 +993,7 @@ let temp=this.qs.stringify({
     position: absolute;
     top: 2vw;
     left: 12vw;
+    opacity: 0.6;
     height: 8vw;
     width: 45vw;
     border-radius: 10vw;
@@ -779,6 +1018,16 @@ let temp=this.qs.stringify({
     left: 19vw;
     color: white;
 }
+.payBox{
+        height: 55vw;
+    width: 100%;
+    background: white;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 100;
+}
 .home-number{
     font-size: 1vw;
     transform: scale(0.7);
@@ -1111,4 +1360,471 @@ display: block;
     top: 124vw;
     left: 37vw;
         }
+        .conten{
+        position: fixed;
+    bottom: -23%;
+    left: 0%;
+    width: 100%;
+    /* background: red; */
+    background: white;
+    height: 100%;
+    z-index: 110;
+     }
+     .p_conte{
+        position: relative;
+     }
+     .odiv{
+           
+        width: 76.33333vw;
+        /* display: flex; */
+        overflow-x: auto;
+        margin:0 auto
+        
+     }
+     .Plef_thr span{
+       color: #F79D2E;
+        font-size: 18px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        width: 17px;
+        height: 50px;
+     }
+     .sent_r{
+        width:12px;
+        height:15x;
+        margin-right:6px
+     }
+     .Mar_p{
+        margin-left:4px
+     }
+    .div_p{
+        width: 17px;
+        height: 50px;    
+        font-size: 18px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #FF7874;
+        line-height: 25px;
+        margin-left: 21px;
+        margin-top: 20px;
+        }
+     .div_p_thr{
+        width: 17px;
+        height: 50px; 
+        font-size: 18px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #F79D2E;
+        line-height: 25px;
+        margin-left: 21px;
+        margin-top: 20px;
+      }
+     .U_both{
+           width: 3.2vw;
+           height: 4.2vw;
+        }
+     .div_p_six{
+        width: 17px;
+        height: 50px;
+        font-size: 18px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #41A9FF;
+        line-height: 25px;
+        margin-left: 21px;
+        margin-top: 20px;
+        }
+     
+     .one_day{
+        width:20px;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #FF7874;
+        line-height: 17px;
+        margin-top: 20px;
+        margin-left: 2vw;
+     }
+     .one_day_thr{
+        width:20px;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #F79D2E;
+        line-height: 17px;
+        margin-top: 20px;
+        margin-left: 2vw;
+     }
+       .one_day_six{
+        width:20px;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #41A9FF;
+        line-height: 17px;
+        margin-top: 20px;
+        margin-left: 2vw;
+     }
+     .Plef_six .C_div_p_six{
+         width: 17px;
+         height: 50px;  
+        font-size: 18px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #F79D2E;
+        line-height: 25px;
+        margin-left: 21px;
+        margin-top: 20px;
+     }
+      .Uimg span{
+         color: #F79D2E;
+         font-size: 3.2vw;
+         font-family: PingFangSC-Regular, PingFang SC;
+         font-weight: 400;
+     }
+     .Colo_r{
+         width:20px;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #F79D2E;
+        line-height: 17px;
+        margin-top: 20px;
+        margin-left: 2vw;
+     }
+     .Uimg_l{
+       margin-left: 3.2vw;
+      width: 9.6vw;
+     }
+     .one_day_ten{
+         width: 5.33333vw;
+        font-size: 3.2vw;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #B37EEB;
+        line-height: 4.53333vw;
+        margin-top: 5.33333vw;
+        margin-left: 2vw;
+     }
+     .div_p_ten{
+        width: 4.53333vw;
+        height: 13.33333vw;
+        font-size: 4.8vw;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #B37EEB;
+        line-height: 6.66667vw;
+        margin-left: 5.6vw;
+        margin-top: 5.33333vw;
+     }
+     .Uimg_t{
+        
+      margin-left: 3.2vw;
+      width: 9.6vw;
+     }
+     .Sue{
+    text-align: center;
+    margin-top:10px;
+    font-size: 16px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #222222;
+    line-height: 22px;
+
+
+}
+     .Uimg_t span{
+       font-size: 3.2vw;
+       font-family: PingFangSC-Regular, PingFang SC;
+       font-weight: 400;
+       color: #B37EEB;
+     }
+     .Uimg_l span{
+       font-size: 3.2vw;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #41A9FF;
+     }
+     
+     .Plef img{
+        /* width:20px; */
+        
+
+        /* margin-left:12px; */
+        /* margin-top:10px; */
+        /* margin-right:6px */
+     }
+     .Uimg{
+        margin-left:12px;
+        width: 36px;
+     }
+     .live_b{
+        background:url('../assets/payone.png') no-repeat;
+        width: 121.33333vw;
+        height: 41.86667vw;
+        display:flex;
+        margin-right:6px;
+ 
+     
+     }
+     .one_day_nine{
+        width:20px;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #F79D2E;
+        line-height: 17px;
+        margin-top: 20px;
+        margin-left: 2vw;
+        color: #DBC114;
+     }
+     .Uimg_p  {
+        margin-left: 3.2vw;
+        width: 9.6vw;
+        font-size: 18px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #41A9FF;
+       
+       
+       
+     }
+     .Plef_six span{
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+    /* color: #41A9FF; */
+     }
+     .Uimg_nine{
+        font-size: 3.2vw;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color:#DBC114;
+         margin-left: 3.2vw;
+         width: 9.6vw;
+     }
+     .div_p_nine{
+        width: 4.53333vw;
+        height: 13.33333vw;
+        font-size: 4.8vw;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #DBC114;
+        line-height: 6.66667vw;
+        margin-left: 5.6vw;
+        margin-top: 5.33333vw;
+     }
+    .Plef span {
+         
+       width: 16px;
+        height: 16px;
+        font-size: 12px;
+        font-family: HelveticaNeue;
+        color: #FF7874;
+        line-height: 16px;
+     }
+     .Mar_p span{
+         color: #999999
+     }
+     .conten ul{
+        width: 76.33333vw;
+        display: flex;
+        padding-left: 5.33333vw;
+        padding-top: 7.73333vw;
+        margin: 0 auto;
+        width: 126.33333vw;
+
+     }
+     .Lent{
+        height:100%;
+        margin-left:20px;
+        margin-right:20px;
+     
+     }
+     .name{
+        float:right
+     }
+      .buy{
+        float:left
+     }
+     .ov{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        border-bottom: 1px solid #F5F5F5;
+        padding-bottom: 20px;
+        padding-top:12px
+        
+     }
+     .z_sen{margin-top: 12px;}
+     .ov div{
+        display: flex;
+     }
+     .Ig{
+        width:20px;
+        height:20px;
+        margin-right:6px
+     }
+     .no_p{
+        color:red
+     }
+     .Pl{
+    width: 272px;
+    height:46px;
+    margin:0 auto
+}
+.gr{
+    text-align: center;
+    margin-top:25px
+}
+     .Lpin{
+        margin-top:20px;
+        font-size: 16px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #000000;
+        line-height: 22px;
+     }
+     .Lpin span{
+        font-size: 16px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #E31D1A;
+        line-height: 22px;
+     }
+     .Usret{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+     }
+    .Usret_p{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top:14px
+     }
+     .ov img{
+            width: 6.33333vw;
+            height: 5.86667vw;
+            padding-right: 7px;
+     }
+     .activeClass{
+       
+     }
+  .active_p{
+          background:url("../assets/back_a.png") no-repeat;color:white
+     
+  }
+   .active_one{
+          background:url("../assets/pay_inone.png") no-repeat;color:white
+     
+  }
+   .active_two{
+          background:url("../assets/bac_p.png") no-repeat;color:white
+     
+  }
+   .active_thre{
+          background:url("../assets/back_a.png") no-repeat;color:white
+     
+  }
+   .active_pfoue{
+          background:url("../assets/bac_l.png") no-repeat;color:white
+     
+  }
+   .active_five{
+          background:url("../assets/back_c.png") no-repeat;color:white
+     
+  }
+  .Month0{
+       background:url("../assets/back_a.png") no-repeat;color:white
+  }
+   .Month1{
+          background:url("../assets/bac_l.png") no-repeat;color:white
+     
+  }
+    .Month2{
+     background:url("../assets/back_c.png") no-repeat;color:white
+  } 
+
+     .Month3{
+          background:url("../assets/bac_p.png") no-repeat;color:white
+     
+  }
+    .Month4{
+     background:url("../assets/pay_inone.png") no-repeat;color:white
+  } 
+  .Quarter .div_p{color:#41A9FF
+
+  }
+  .Quarter .one_day{
+    color:#41A9FF
+  }
+  .Quarter span{
+         color:#41A9FF
+  }
+ 
+ .HalfYear .div_p{
+    color:#CCA9F1
+ }
+  .HalfYear span{
+   color:#CCA9F1
+ }
+.HalfYear .one_day{
+       color:#CCA9F1
+ }
+
+
+  .Month0 .one_day{
+    color:white
+  }
+   .Month0  .div_p{
+   color:white
+  }
+    .Month0  span{
+   color:white
+  }
+    .Month1 .one_day{
+    color:white
+  }
+   .Month1  .div_p{
+   color:white
+  }
+    .Month1  span{
+   color:white
+  }
+      .Month2 .one_day{
+    color:white
+  }
+   .Month2  .div_p{
+   color:white
+  }
+  .Month2  span{
+   color:white
+  }
+  .Month3 .one_day{
+    color:white
+  }
+   .Month3  .div_p{
+   color:white
+  }
+  .Month3 span{
+   color:white
+  }
+
+.Month4 .one_day{
+    color:white
+  }
+   .Month4 .div_p{
+   color:white
+  }
+  .Month4 span{
+   color:white
+  }
+
+  .HalfYear .d_num{
+    color: #999999;
+  }
+     .Quarter .d_num{
+    color: #999999;
+  }
 </style>
\ No newline at end of file

src/views/live.vue

 <template>
     <div class="videoPlayer">
-        
+        <!-- //分享卡片 -->
+        <share-card style=" z-index:99;" :headPortrait='udPhotoFileid' :udNickname='udNickname' :lvrName='lvrName' :lvrImgLargeUrl='lvrImgLargeUrl'> </share-card>
     <!-- <LivePlayer      :videoUrl="url"    /> -->
     <div class='demo'>
       <video-player class="video-player vjs-custom-skin" 
@@ -10,13 +11,28 @@
             :options="playerOptions">
       </video-player>
     </div>
+    <!-- 返回按钮 -->
+    <img @click="backHome()" class="back-list" src="../common/img/back-list.png" alt="">
+    <span class="headLvrName">{{lvrName}}</span>
+    <img class="head-img" :src='udPhotoFileid' alt="">
+    <div class="teach-box">
+
+    </div>
+        <span class="teach-name">{{udNickname}}</span>
+        <span class="home-number">房间号: {{lvrId}}</span>
+        <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="">
     <!-- <span class="text">12314342</span> -->
     <!-- <preview-pdf ref="previewPdfh5"></preview-pdf> -->
+
     <mt-navbar v-model="selected">
   <mt-tab-item id="1">讨论</mt-tab-item>
   <mt-tab-item id="2">主播</mt-tab-item>
   <mt-tab-item id="3">回放</mt-tab-item>
-  <div @click="pay_p">支付</div>
+  <mt-tab-item id="4"></mt-tab-item>
+  <mt-tab-item id="5"></mt-tab-item>
+  <mt-tab-item id="6"></mt-tab-item>
+  <!-- <div @click="pay_p">支付</div> -->
 </mt-navbar>
  
 <mt-tab-container v-model="selected">
@@ -33,7 +49,8 @@
            <span class="welcome">欢迎</span><span class="info1">{{i.sender}}</span><span class="into1">进入直播间</span>
        </div>
        <div class="mq-messageTwo2" v-else-if="i.type==1">
-           <img class="get-horn" src="../common/img/get-message.png" alt=""><span class="infoTwo1">{{i.sender}} :</span><span class="intoTwo1">{{i.info}}</span>
+           <!-- <img class="get-horn" src="../common/img/get-message.png" alt=""> -->
+           <span class="infoTwo1">{{i.sender}} :</span><span class="intoTwo1">{{i.info}}</span>
        </div>
        </div>
        
@@ -81,6 +98,10 @@
    
   </mt-tab-container-item>
 </mt-tab-container>
+<!-- 直播卡片 -->
+<div class="payBox" v-if="pten" @click="clickPayBox">
+
+</div>
 <div class="p_conte" v-if="pten">
     <div class="conten">
        <div class="Sue">确认支付</div>
@@ -198,6 +219,37 @@
          
     </div>
 </div>
+<!-- 倒计时框 -->
+        <div class="countTime" v-if="buttonType==3">
+            <span class="countTimeText">您还没有购买，可试看{{countTimes}}S</span>
+            <img class="countTimeImg" src="../common/img/tryButton.png" alt="">
+        </div>
+<!-- 登录后观看按钮 -->
+<div v-if="buttonType==0" class="backgroundBlack">
+
+</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"  class="backgroundBlack">
+
+</div>
+<div v-if="buttonType==1" @click="pay_p">
+<img class="afterSignImg" src="../common/img/tryLive.png" alt="">
+</div>
+
+<!-- 直播未开始提示购买 -->
+<div v-if="buttonType==2"  class="backgroundBlack">
+
+</div>
+<div v-if="buttonType==2" @click="pay_p">
+    <img class="afterSignImg" src="../common/img/notLive.png" alt="">
+</div>
 </div>
 </template>
 
@@ -223,6 +275,17 @@ export default {
             is_xuanzhong : 'Month0',
             is_Month : 'Month',
            url: '' ,
+           udPhotoFileid:'',//主播头像
+           udNickname:'',//主播名称
+           ifFollow:false,//关注按钮显示隐藏
+           lvrName:'',//直播名称
+           lvrImgLargeUrl:'',//占位图
+           ifSignFollow:true,//是否登录后关注
+            buttonType:0,//按钮显示
+           lvrId:'',
+           countTimes:0,//倒计时
+           timers:null,
+           lvrUbId:'',//主播id
            playerOptions: {
             playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
             autoplay: true, // 如果为true,浏览器准备好时开始回放。
@@ -303,7 +366,8 @@ export default {
     },
     components:{
         PreviewPdf,
-        LivePlayer
+        LivePlayer,
+        shareCard: () => import('@/components/plugin/shareCard.vue')
         
     },
     computed:{
@@ -311,11 +375,11 @@ export default {
   //屏幕可视区域的高度
   let clientHeight 
   if(document.documentElement.clientHeight<=750){
-      clientHeight=120+'vw'
+      clientHeight=93+'vw'
   }else if(document.documentElement.clientHeight<1024){
-        clientHeight=155+'vw'
+        clientHeight=136+'vw'
   }else{
-        clientHeight=85+'vw'
+        clientHeight=58+'vw'
   }
    
    console.log("clientHeight 1=="+clientHeight)
@@ -348,6 +412,11 @@ export default {
       mqtt.disconnect();
     //   clearInterval(this.setInterval);
     },
+    //销毁后
+    destroyed() {
+    this.updataTime()
+    console.log('销毁成功')
+},
     methods: {
         clickOpen(i){
             if(i==1){
@@ -404,6 +473,93 @@ export default {
             // });
                 })
         },
+
+        //反回列表页页面
+    backHome(){
+         this.$router.push(
+                {
+                    path:'/list',
+                    
+
+                    
+            });
+    },
+//点击关注事件    
+    clickFollow(){
+        
+        let temp=this.qs.stringify({
+                   pmAppVersion:'884',
+                    pmModel:'iPhone 12/13 (Pro)',
+                    pmSystem:'iOS 10.0.1',
+                    pmMac:'1',
+                    pmIp:1,
+                    lvrUbId:this.lvrUbId,
+                    type:1,
+                    applicationType:4,
+                    pmOperator:'无运营商'
+                })
+                let token=sessionStorage.getItem("token")    
+            let img=sessionStorage.getItem("isReg")
+            
+                this.server.live.follow(temp).then(res=>{
+                    if(res.data.data.businessCode==20){
+                        this.ifFollow=true
+                    }else{
+                        alert(res.data.data.businessMessage)
+                    }
+                    
+                })
+    },
+    //点击已经关注按钮
+    clickUnFollow(){
+        
+        let temp=this.qs.stringify({
+                   pmAppVersion:'884',
+                    pmModel:'iPhone 12/13 (Pro)',
+                    pmSystem:'iOS 10.0.1',
+                    pmMac:'1',
+                    pmIp:1,
+                    lvrUbId:this.lvrUbId,
+                    type:1,
+                    applicationType:4,
+                    pmOperator:'无运营商'
+                })
+                let token=sessionStorage.getItem("token")    
+            let img=sessionStorage.getItem("isReg")
+            
+                this.server.live.follow(temp).then(res=>{
+                    if(res.data.data.businessCode==20){
+                        this.ifFollow=false
+                    }else{
+                        alert(res.data.data.businessMessage)
+                    }
+                    
+                })
+    },
+//跳转登录页面
+    jumpLogin(){
+        
+        this.$router.push(
+                {
+                    path:'/',
+                    query:{
+                        lvrUbId:this.lvrUbId
+                        
+                        }
+
+                    
+            });
+    },
+    //点击是否登录关注主播
+    ifUcheck(e){
+
+        if(e==0){
+            this.ifSignFollow=true
+        }else{
+            this.ifSignFollow=false
+        }
+    },
+    //获取用户列表
         getMessage(item){
             console.log("啊哈哈哈",item)
             let list={
@@ -432,14 +588,77 @@ export default {
                     lvrId:this.$route.query.lvrId,
                     pmOperator:'无运营商'
                 })
+                let token=sessionStorage.getItem("token")    
+            let img=sessionStorage.getItem("isReg")
+            
+            if(!token){
+            this.buttonType=0
+                // this.imgShow=false
+            }
                 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.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
+                        this.ifFollow=res.data.data.followAnchor//关注主播状态
+                    let timer=res.data.data.seeDuration//试看时间
+                    if(token&&img){
+                        //正确登录
+                        if(res.data.data.lvrIsFree==0){
+                            // 免费
+                            if(res.data.data.lvrStatus==1){
+                                this.buttonType=4
                         this.playerOptions.sources[0].src=res.data.data.lvpPullUrl
                     }else{
-                        this.videoList(1)
+                        // this.videoList(1)
+                        // aleart("直播暂未开始")
+                        this.buttonType=1
+                        // alert("直播暂未开始")
+                    }
+                        }else{
+                            // 付费
+                            if(res.data.data.isBuy==0){
+                                // this.buttonType=0
+                                //未购买进行试看
+                            //试看倒计时
+                if(timer==0){
+                    this.countTimes=0
+                    
+                        this.buttonType=2
+                        
+                }else{
+                    this.buttonType=3
+                    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
+                            
+                    }
+                }, 1000)
+            }
+                }
+
+                            }else{
+                                //已经购买
+                                this.playerOptions.sources[0].src=res.data.data.lvpPullUrl
+                                this.buttonType=4
+                            }
+                        }
+                         
                     }
+                   
                     
                     
             //       let thisToken= res.data.data.token
@@ -451,6 +670,24 @@ 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',
@@ -463,7 +700,7 @@ export default {
                 this.server.live.videoList(temp).then(res=>{
                     // this.url=res.data.data.lvpPullUrl
                     if(res.data.data.businessCode==10){
-                        // this.source=res.data.data.info  先隐藏
+                        this.source=res.data.data.info  //先隐藏
                         if(i==1){
                             this.playerOptions.sources[0].src=res.data.data.info[0].lvrrVideo
                         }
@@ -480,7 +717,7 @@ export default {
         //获取支付信息
         pay_info(){
                 let temp=this.qs.stringify({
-                    pmAppVersion:'884',
+                    
                     applicationType:4,
                     pmAppVersion: 868,
                   // applicationType: 3,
@@ -624,7 +861,9 @@ export default {
        pay_p(){
        this.pten = true
        },
-          
+          clickPayBox(){
+this.pten = false
+          },
        onBridgeReady() {
   
             WeixinJSBridge.invoke('getBrandWCPayRequest', {
@@ -694,6 +933,15 @@ export default {
 .video-js .vjs-modal-dialog{
     display: none;
 }
+.vjs-custom-skin > .video-js .vjs-big-play-button {
+    background-color: rgba(0,0,0,0.45);
+    font-size: 3.5em;
+    display: none;
+    /* border-radius: 50%; */
+    height: 2em !important;
+    line-height: 2em !important;
+    margin-top: -1em !important;
+}
 </style>
 <style  scoped>
 
@@ -744,6 +992,87 @@ export default {
     line-height: 22px;
 
 
+}
+.back-list{
+    position: absolute;
+    top: 2vw;
+    left: 1vw;
+    z-index: 89;
+    height: 8vw;
+    width: 8vw;
+}
+.headLvrName{
+    font-size: 3.8vw;
+    position: absolute;
+    top: 3.3vw;
+    left: 8vw;
+    color: white;
+}
+.head-img{
+      position: absolute;
+    top: 59.5vw;
+    left: 53.5vw;
+    height: 7vw;
+    width: 7vw;
+    z-index: 89;
+    border-radius: 50%;
+    
+}
+.payBox{
+        height: 55vw;
+    width: 100%;
+    background: white;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 100;
+}
+.follow-img{
+    position: absolute;
+    top: 60vw;
+    left: 82vw;
+    height: 6vw;
+    width: 14vw;
+    z-index: 89;
+}
+.home-number{
+        font-size: 1vw;
+    transform: scale(0.7);
+    position: absolute;
+    top: 63vw;
+    left: 60vw;
+    z-index: 89;
+    color: white;
+}
+.teach-name{
+        font-size: 4vw;
+    transform: scale(0.8);
+    position: absolute;
+    z-index: 89;
+    top: 58vw;
+    left: 60vw;
+    color: white;
+}
+.followBox{
+    height: 20vw;
+    width: 90vw;
+    background: rgb(129, 148, 100);
+    border-radius: 10vw;
+    position: absolute;
+    top: 1vw;
+    left: 1vw;
+
+}
+.teach-box{
+    position: absolute;
+    top: 59vw;
+    opacity: 0.6;
+    left: 52vw;
+    height: 8vw;
+    width: 45vw;
+    border-radius: 10vw;
+    background: #000000;
 }
 .author{
     position: absolute;
@@ -845,7 +1174,7 @@ width: 90vw;
 .background{
     height: 28vw;
     width: 90%;
-    background: rgb(248, 239, 201);
+    /* background: rgb(248, 239, 201); */
     position: relative;
     margin-top: 4vw;
     margin-left: 5%;
@@ -858,7 +1187,7 @@ display: block;
     padding: 3vw 1vw 1vw 5vw;
     text-indent: 8vw;
     letter-spacing: 0.4vw;
-    color: red;
+    color: #BF9959;
 }
 .headImg{
     height: 6vw;
@@ -868,21 +1197,21 @@ display: block;
     left: 5vw;
 }
 .sendMessage{
-    width: 98%;
-    height: 16vw;
+    width: 100%;
+    height: 19vw;
     /* border: 0.5vw solid red; */
-    /* background: white; */
+    background: black;
     position: fixed;
-    box-shadow: #797979 0 -0.5vw 1vw;
-    bottom: 1%;
+    /* box-shadow: #797979 0 -0.5vw 1vw; */
+    bottom: 0%;
     line-height: 15vw;
-    left: 1%;
+    left: 0%;
     display: flex;
     justify-content: space-around;
 }
 .wbk2 {
               font-size: 3.7vw;
-    color: #797979;
+    color: #848484;
     border-radius: 5vw;
     width: 45vw;
     height: 10vw;
@@ -931,12 +1260,71 @@ display: block;
             background-size:145vw;
 
 background-repeat: no-repeat;
+        }
+        .countTime{
+     height: 10vw;
+    width: 82vw;
+    background: #000000;
+    position: absolute;
+    top: 44vw;
+    border-radius: 10vw;
+    right: 16vw;
+    z-index: 89;
+} 
+.countTimeText{
+    position: absolute;
+    top: 3vw;
+    left: 4vw;
+    font-size: 3vw;
+    color: #FF9F2C;
+}
+.countTimeImg{
+         height: 8vw;
+    width: 38vw;
+    position: absolute;
+    top: 1vw;
+    right: 1vw;
+    z-index: 89;
+}
+        .afterSignImg{
+             height: 30vw;
+    width: 60vw;
+    position: absolute;
+    z-index: 89;
+    top: 13vw;
+    left: 20vw;
+        }
+        .backgroundBlack{
+            height: 24vw;
+    width: 50vw;
+    background: black;
+    position: absolute;
+    top: 18vw;
+    left: 26vw;
+    z-index: 88;
+        }
+        .signUnCheck{
+                height: 4vw;
+    width: 4vw;
+    position: absolute;
+    z-index: 89;
+    top: 46.5vw;
+    left: 32vw;
+        }
+        .afterSignText{
+            font-size: 3.7vw;
+    color: #C6C6C6;
+    position: absolute;
+    z-index: 89;
+    top: 46vw;
+    left: 37vw;
         }
         .mq-message1{
             /* height: 10vw; */
             padding: 2vw 0 2vw 0;
-            width: 91%;
-            /* background: green; */
+            margin-bottom: 3vw;
+            /* width: 91%; */
+            background: #25232E;
             font-size: 3.8vw;
             margin-left: 4%;
             display: flex;
@@ -945,17 +1333,20 @@ background-repeat: no-repeat;
         }
         .mq-messageTwo2{
             padding: 3vw 0 5vw 0;
-            margin-bottom: 1vw;
-           width: 91%;
-           /* background: green; */
-          font-size: 3.8vw;
-           margin-left: 4%;
-            /* display: flex; */
-            /* justify-content: space-around; */
-            position: relative;
+    margin-bottom: 3vw;
+    background: #25232E;
+    line-height: 2vw;
+    /* width: 91%; */
+    /* background: green; */
+    font-size: 3.8vw;
+    margin-left: 4%;
+    /* display: flex; */
+    /* justify-content: space-around; */
+    position: relative;
         }
         .welcome{
                margin-left: -23vw;
+               color: white;
         }
         .info1{
             color: red;
@@ -963,13 +1354,14 @@ background-repeat: no-repeat;
         }
         .infoTwo1{
             color: #FF9B00;
-            margin-left: 11vw;
+            margin-left: 5vw;
             float: left;
             display: block;
-            width: 32%;
+            width: 22%;
         }
         .into1{
         margin-left: -50vw;
+         color: white;
         }
         .intoTwo1{
         /* margin-left: -43vw; */
@@ -1010,14 +1402,16 @@ background-repeat: no-repeat;
  
      
      }
+
      .conten{
         position: fixed;
-        bottom: 0%;
-        left: 0%;
-        width: 100%;
-        /* background: red; */
-        background: white;
-        height: 100%;
+    bottom: -23%;
+    left: 0%;
+    width: 100%;
+    /* background: red; */
+    background: white;
+    height: 100%;
+    z-index: 110;
      }
      .p_conte{
         position: relative;

src/views/liveList.vue

@@ -4,7 +4,7 @@
              <span>斗牛财经</span> 
             <img v-if="ifLog==0" class="portait-not" src="../common/img/not-logged.png" alt="">
             <img v-if="ifLog==1" class="portait-not" src="../common/img/title_logo.png" alt="" @click="mine">
-            <img v-if="ifLog==2" class="portait-not" :src="userImg" alt="">
+            <img v-if="ifLog==2" class="portait-not" :src="userImg" alt="" @click="mine">
         </div>
         <div class="tab">
             <span :class="{free:ifFree,nonefree:!ifFree}" @click="clickFree()">免费</span>
@@ -13,9 +13,9 @@
         <div class="content">
             <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="">
+                <img class="head-img" :src="i.headPhoto" alt="">
                 <span class="head-name">{{i.udNickname}}</span>
-                <img class="count-img" src="https://customer-img.douniu8.com/1665380604617GPdvMCWnMN.jpg" alt="">
+                <img class="count-img" :src="i.imgLargeUrl" alt="">
                 <img class="liv-img" v-if="i.lvrStatus==1"  src="../common/img/living.png" alt="">
                 <span class="title-message">{{i.lvrName}}</span>
                 <img class="people-img" src="../common/img/people-num.png" alt="">
@@ -24,9 +24,9 @@
             </div>
             <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="">
+                <img class="head-img" :src="i.headPhoto" alt="">
                 <span class="head-name">{{i.udNickname}}</span>
-                <img class="count-img" src="https://customer-img.douniu8.com/1665380604617GPdvMCWnMN.jpg" alt="">
+                <img class="count-img" :src="i.imgLargeUrl" alt="">
                 <!-- <img class="liv-img" v-if="ifFree" src="../common/img/living.png" alt=""> -->
                 <span class="title-message">{{i.lvrName}}</span>
                 <img class="people-img" src="../common/img/people-num.png" alt="">