底部评论控件

src/components/livedModel/livedControls.vue

@@ -15,23 +15,31 @@
     <livedGoodsDia :showDia="showDia" @changeStatus="changeStatus"></livedGoodsDia>
     <!-- 底部控制层 -->
     <div class="control flex">
-      <div class="goodsImg" @click="showGoodsList">
-        <img src="../../../static/images/lived/goodsImg.png" alt />
-        <p class="goodsNum">99</p>
-      </div>
-      <div class="iptCopy">跟主播说点什么...</div>
-      <div class="shareIcon">
-        <van-icon name="share" />
-      </div>
-      <div class="heardIcon" @click="addLike(1)">
-        <van-icon name="like" class="like" />
-        <p class="heardNum">{{likeNumCopy}}</p>
-        <div class="box">
-          <div class="img" v-for="(item,index) in imgList" :key="index">
-            <img :src="item.img" alt />
+      <template v-if="!isSend">
+        <div class="goodsImg" @click="showGoodsList">
+          <img src="../../../static/images/lived/goodsImg.png" alt />
+          <p class="goodsNum">99</p>
+        </div>
+        <div class="iptCopy" @click="toSendOut">跟主播说点什么...</div>
+        <div class="shareIcon">
+          <van-icon name="share" />
+        </div>
+        <div class="heardIcon" @click="addLike(1)">
+          <van-icon name="like" class="like" />
+          <p class="heardNum">{{likeNumCopy}}</p>
+          <div class="box">
+            <div class="img" v-for="(item,index) in imgList" :key="index">
+              <img :src="item.img" alt />
+            </div>
           </div>
         </div>
-      </div>
+      </template>
+      <template v-else>
+        <div class="sendOut">
+          <input class="sendIpt" :focus="getFocus"  type="text" @blur="onblur" v-model="sendVal" placeholder="和主播说点什么吧~">
+          <div class="send" :class="{'noSendVal':sendVal==''}" @click="toSend">发送</div>
+        </div>
+      </template>
     </div>
   </div>
 </template>
@@ -55,7 +63,10 @@ export default {
       ],
       num: 0,
       userComing: false,
-      showDia: false //显示商品列表弹窗
+      showDia: false, //显示商品列表弹窗
+      isSend:false,//显示评论输入框
+      sendVal:'',//输入内容
+      getFocus:false,//获取焦点
     };
   },
   components: {
@@ -115,6 +126,27 @@ export default {
     },
     changeStatus() {
       this.showDia = false;
+    },
+    // 发送评论
+    toSendOut(){
+      // 登录及未开始判断
+      this.isSend=true;
+      this.getFocus=true;
+    },
+    // 失焦点
+    onblur(){
+      setTimeout(() => {
+        this.isSend = false;
+        this.sendVal = "";
+      }, 10);
+    },
+    // 点击发送留言
+    toSend(){
+      if(this.sendVal == ""){
+        this.getFocus=true;
+      }else{
+
+      }
     }
   }
 };
@@ -267,6 +299,35 @@ export default {
         }
       }
     }
+    .sendOut{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: rgba(#000, 0.4);
+      padding: 0 12px;
+      width: 100%;
+      height: 38px;
+      border-radius: 38px;
+      line-height: 38px;
+      font-size: 16px;
+      .sendIpt{
+        width: 60vw;
+        color: #999;
+        padding-left: 10px;
+      }
+      .send{
+        color: #fff;
+        height: 30px;
+        width: 80px;
+        text-align: center;
+        line-height: 30px;
+        border-radius: 30px;
+        background: linear-gradient(to right, #ff877d, #fb566d);
+      }
+      .noSendVal{
+        background:#ababa9;
+      }
+    }
   }
 }
 </style>

src/pages/lived/index.vue

@@ -2,7 +2,7 @@
   <div class="lived">
     <!-- 背景(未开始&&已结束) -->
     <div class="bgImg" v-if="liveNoticeInfo.coverUrl&&liveNoticeInfo.liveBroadcastState!=1">
-      <img :src="liveNoticeInfo.coverUrl" alt="">
+      <img :src="liveNoticeInfo.coverUrl" alt />
     </div>
     <!-- 直播展示层 -->
     <div class="liveModel" v-if="liveNoticeInfo.liveBroadcastState>-1">
@@ -13,12 +13,13 @@
         </div>
         <div class="shopName flex">
           <div class="img" v-if="shopLogo">
-            <img :src="shopLogo" alt="">
+            <img :src="shopLogo" alt />
           </div>
           <div class="info">
             <p class="name line-clamp1" v-if="shopName">{{shopName}}</p>
             <p class="num">
-              <span>999</span> <span>观看</span>
+              <span>999</span>
+              <span>观看</span>
             </p>
           </div>
           <div class="toShop" @click="toShop">进店</div>
@@ -29,7 +30,10 @@
       <!-- 结束展示 -->
       <livedIsEnded v-if="liveNoticeInfo.liveBroadcastState==2"></livedIsEnded>
       <!-- 控件层 -->
-      <livedControls v-if="liveNoticeInfo&&liveNoticeInfo.liveBroadcastState<2" :info="liveNoticeInfo"></livedControls>
+      <livedControls
+        v-if="liveNoticeInfo&&liveNoticeInfo.liveBroadcastState<2"
+        :info="liveNoticeInfo"
+      ></livedControls>
     </div>
     <!-- 直播 -->
     <live-player
@@ -47,24 +51,24 @@
 <script type="text/ecmascript-6">
 import { DFSImg } from "@/utils/index";
 import live from "@/api/live";
-import notStarted from "@/components/livedModel/notStarted"
-import livedControls from "@/components/livedModel/livedControls"
-import livedIsEnded from "@/components/livedModel/livedIsEnded"
+import notStarted from "@/components/livedModel/notStarted";
+import livedControls from "@/components/livedModel/livedControls";
+import livedIsEnded from "@/components/livedModel/livedIsEnded";
 export default {
   name: "",
   data() {
     return {
-      liveId:'', //直播间id
-      livedUrl:'rtmp://58.200.131.2:1935/livetv/hunantv',
-      shopName:'',
-      shopLogo:'',
-      backPath:'',
-      isLoading: false, 
+      liveId: "", //直播间id
+      livedUrl: "rtmp://58.200.131.2:1935/livetv/hunantv",
+      shopName: "",
+      shopLogo: "",
+      backPath: "",
+      isLoading: false,
       status: 0, // 0：未开始 1：直播中 2：已结束
       liveNoticeInfo: {}, //详情
       isVideo: false, //是否有直播或回放链接
       liveTime: null, //定时器
-      isWifi:true,//提示网络环境
+      isWifi: true //提示网络环境
     };
   },
   components: {
@@ -74,31 +78,46 @@ export default {
   },
   computed: {},
   created() {},
-  onLoad(options){
+  onLoad(options) {
+    wx.getNetworkType({
+      success: function(res) {
+        if(res.networkType!='wifi'){
+          wx.showModal({
+            content: "您当前处于非wifi网络环境下",
+            confirmColor: '#ff877d',
+            success: function(res) {
+              if (res.confirm) {
+              } else if (res.cancel) {
+              }
+            }
+          });
+        }
+      }
+    });
     let params = JSON.parse(options.params);
-    this.liveId=params.liveId;
-    this.shopName=params.shopName;
-    this.shopLogo=DFSImg(params.shopLogo,40,40);
+    this.liveId = params.liveId;
+    this.shopName = params.shopName;
+    this.shopLogo = DFSImg(params.shopLogo, 40, 40);
     this.init();
   },
-  onUnload(){
-    this.liveNoticeInfo.liveBroadcastState=-1;
-    this.liveNoticeInfo={};
-  },
-  mounted() {
-
+  onUnload() {
+    this.liveNoticeInfo.liveBroadcastState = -1;
+    this.liveNoticeInfo = {};
   },
+  mounted() {},
   methods: {
     // 初始化数据
-    init(){
-      let liveBroadcastId=this.liveId;
-      live.getLiveInfo(liveBroadcastId).then(res=>{
-        if(res.data.code==200){
-          console.log(res.data.data,'------73')
-          this.liveNoticeInfo=res.data.data;
-          this.liveNoticeInfo.coverUrl=this.liveNoticeInfo.coverUrl?DFSImg(this.liveNoticeInfo.coverUrl):'';
+    init() {
+      let liveBroadcastId = this.liveId;
+      live.getLiveInfo(liveBroadcastId).then(res => {
+        if (res.data.code == 200) {
+          console.log(res.data.data, "------73");
+          this.liveNoticeInfo = res.data.data;
+          this.liveNoticeInfo.coverUrl = this.liveNoticeInfo.coverUrl
+            ? DFSImg(this.liveNoticeInfo.coverUrl)
+            : "";
         }
-      })
+      });
     },
     statechange(res) {
       console.log(res, "-------19");
@@ -106,26 +125,24 @@ export default {
     error(err) {
       console.log(err, "----22");
     },
-    back(){
+    back() {
       wx.navigateBack({
         delta: 1
-      })
+      });
     },
-    toShop(){
+    toShop() {
       // 到商城首页
-      this.backPath='/';
-       wx.reLaunch({
-        url: `../index/main?from=livedToIndex&backpath=${
-            this.backPath
-          }`
-      })
-    },
+      this.backPath = "/";
+      wx.reLaunch({
+        url: `../index/main?from=livedToIndex&backpath=${this.backPath}`
+      });
+    }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.flex{
+.flex {
   display: flex;
 }
 /*清除浮动*/
@@ -135,7 +152,7 @@ export default {
 
 .clearfix:after {
   clear: both;
-  content: '.';
+  content: ".";
   display: block;
   width: 0;
   height: 0;
@@ -164,14 +181,14 @@ export default {
   height: 100vh;
   position: relative;
   overflow: hidden;
-  .bgImg{
+  .bgImg {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     z-index: -1;
-    img{
+    img {
       width: 100%;
       height: 100%;
       object-fit: cover;
@@ -179,54 +196,54 @@ export default {
       filter: brightness(0.8);
     }
   }
-  .liveModel{
+  .liveModel {
     width: 100vw;
     height: 100vh;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1;
-    .customBack{
+    .customBack {
       position: absolute;
       top: 30px;
       left: 12px;
       width: 70%;
       z-index: 2;
       align-items: center;
-      .backIcon{
+      .backIcon {
         color: #fff;
         font-size: 20px;
       }
-      .shopName{
+      .shopName {
         margin-left: 20px;
-        background: rgba(0,0,0,0.6);
+        background: rgba(0, 0, 0, 0.6);
         border-radius: 30px;
         align-items: center;
         padding-right: 10px;
-        .img{
+        .img {
           width: 30px;
           height: 30px;
           border-radius: 50%;
           overflow: hidden;
           margin-left: 4px;
-          img{
+          img {
             width: 100%;
             height: 100%;
           }
         }
-        .info{
+        .info {
           margin-left: 6px;
           color: #fff;
           flex: 1;
           font-size: 14px;
           padding: 2px 0;
-          .num{
+          .num {
             font-size: 12px;
           }
         }
-        .toShop{
-          background: #FB566D;
-          padding:0 4px;
+        .toShop {
+          background: #fb566d;
+          padding: 0 4px;
           color: #fff;
           font-size: 14px;
           display: inline-block;
@@ -237,7 +254,7 @@ export default {
       }
     }
   }
-  .livePlayer{
+  .livePlayer {
     position: absolute;
     top: 0;
     left: 0;