倒计时封装

src/components/livedModel/notStarted.vue

+<template>
+  <div class="notStarted">
+    <p class="tit">直播倒计时</p>
+    <div class="time">
+      <timeDown v-if="startTime" :startTime="startTime"></timeDown>
+    </div>
+    <div class="remindBtn" @click="remind">开播提醒</div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+import timeDown from "@/components/livedModel/timeDown";
+export default {
+  props: ["info"],
+  name: "",
+  data() {
+    return {
+      startTime:null,
+    };
+  },
+  components: {
+    timeDown
+  },
+  computed: {},
+  created() {},
+  onLoad(){
+    console.log(this.info,'--------------------126')
+    this.startTime=this.info.startTime;
+  },
+  mounted() {},
+  methods: {
+    // 开播提醒
+    remind() {
+      console.log("开播");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.notStarted {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  .tit {
+    font-size: 16px;
+    color: #fff;
+  }
+  .time {
+    margin-top: 10px;
+  }
+  .remindBtn {
+    margin-top: 10px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    border-radius: 6px;
+    color: #fff;
+    font-size: 18px;
+    padding: 10px 30px;
+    background: linear-gradient(to right, #ff877d, #fb566d);
+  }
+}
+</style>
\ No newline at end of file

src/components/livedModel/timeDown.vue

+<template>
+  <!-- 倒计时组件 -->
+  <div class="days">
+    <template v-if="days-0>0">
+      <span class="item">{{days}}</span>
+      <span class="label">天</span>
+    </template>
+    <template v-if="hours-0>0">
+      <span class="item">{{hours}}</span>
+      <span class="label">时</span>
+    </template>
+    <span class="item">{{minute}}</span>
+    <span class="label">分</span>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+let d = null;
+// 倒计时方法
+if (typeof xcsoft == "undefined") var xcsoft = new function() {}();
+xcsoft.countdown = function(a, b, c) {
+  d = new Object();
+  var e = 0;
+  if (typeof a == "object") {
+    var f = parseInt(new Date().getTime() / 1000);
+    var g = a.startTime ? parseInt(a.startTime) : 0;
+    g = g == 0 ? f : g;
+    var h = a.endTime;
+    var x = g - f;
+    d.decimal = parseInt(a.msec ? a.msec : 0);
+  } else {
+    var f = 0;
+    var x = 0;
+    d.decimal = 0;
+    var h = a;
+    var i = h.toString();
+    if (i.indexOf(".") > 0) {
+      d.decimal = i.split(".")[1];
+      if (d.decimal > 3) {
+        d.decimal = 3;
+      }
+    }
+  }
+  d.time = h;
+  d.finish = false;
+  if (isNaN(h)) {
+    var j = h.substring(0, 19);
+    j = j.replace(/-/g, "/");
+    d.time = new Date(j).getTime() / 1000;
+  }
+  var k = d.decimal == 0 ? 100 : 100;
+  d.day = 0;
+  d.hour = 0;
+  d.minute = 0;
+  d.second = 0;
+  d.t = setInterval(function() {
+    e = new Date().getTime();
+    f = parseInt(e / 1000 + x);
+    var l = d.time - f;
+    if (l <= 0) {
+      e = 0;
+      l = 0;
+    }
+    if (l >= 0) {
+      d = xcsoft.getTimeObject(d, l);
+    }
+    if (d.decimal == 1) {
+      d.msecZero = d.msec = parseInt(10 - (e % 1000) / 100);
+      if (d.msec == 10 || l == 0) {
+        d.msecZero = d.msec = 0;
+      }
+    } else if (d.decimal == 2) {
+      d.msecZero = d.msec = parseInt(100 - (e % 1000) / 10);
+      if (d.msec < 10) {
+        d.msecZero = "0" + d.msec;
+      } else if (d.msec == 100 || l == 0) {
+        d.msec = 0;
+        d.msecZero = "0" + d.msec;
+      }
+    } else {
+      d.msecZero = d.msec = parseInt(1000 - e % 1000);
+      if (d.msec < 10) {
+        d.msecZero = "00" + d.msec;
+      } else if (d.msec < 100) {
+        d.msecZero = "0" + d.msec;
+      } else if (d.msec == 1000 || l == 0) {
+        d.msec = 0;
+        d.msecZero = "00" + d.msec;
+      }
+    }
+    if (b) {
+      b(d);
+    }
+    if (l <= 0 || d.stop == true) {
+      clearInterval(d.t);
+      d.finish = true;
+      if (c) c(d);
+    }
+  }, k);
+};
+xcsoft.getTimeObject = function(a, l) {
+  var b = 60;
+  var c = b * b;
+  var d = 24 * c;
+  a.days = Math.floor(l / d);
+  a.year = Math.floor(a.days / 365);
+  a.day = Math.floor(a.days % 365);
+  a.hour = Math.floor((l % d) / c);
+  a.minute = Math.floor((l - (a.days * d + a.hour * c)) / b);
+  a.second = Math.floor(l % b);
+  a.dayZero = a.day < 10 ? "0" + a.day : a.day;
+  a.daysZero = a.days < 10 ? "0" + a.days : a.days;
+  a.hourZero = a.hour < 10 ? "0" + a.hour : a.hour;
+  a.minuteZero = a.minute < 10 ? "0" + a.minute : a.minute;
+  a.secondZero = a.second < 10 ? "0" + a.second : a.second;
+  return a;
+};
+export default {
+  props: ["startTime"],
+  name: "",
+  data() {
+    return {
+      days: 0,
+      hours: 0,
+      minute: 0,
+      second: 0
+    };
+  },
+  onLoad() {
+    let _this = this;
+    console.log(this.startTime, "--------129");
+    xcsoft.countdown(
+      this.startTime,
+      function(time) {
+        // console.log(time.day,time.hourZero, time.minuteZero, time.secondZero,'--------39')
+        _this.days = time.dayZero;
+        _this.hours = time.hourZero;
+        _this.minute = time.minuteZero;
+        _this.second = time.secondZero;
+      },
+      function(time) {
+        //倒计时结束后的操作
+      }
+    );
+  },
+  onUnload() {
+    // 清除未开播倒计时
+    d.stop = true;
+  },
+  components: {},
+  computed: {},
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.days{
+  font-size: 26px;
+  font-weight: bold;
+  color: #fff;
+  span{
+    padding: 0 4px;
+  }
+}
+</style>

src/pages/lived/index.vue

 <template>
   <div class="lived">
+    <!-- 背景(未开始&&已结束) -->
+    <div class="bgImg" v-if="liveNoticeInfo.coverUrl&&liveNoticeInfo.liveBroadcastState!=1">
+      <img :src="liveNoticeInfo.coverUrl" alt="">
+    </div>
     <!-- 直播展示层 -->
     <div class="liveModel">
       <!-- 自定义返回按钮 -->
@@ -20,8 +24,12 @@
           <!-- <div class="toShop" @click="toShop">进店</div> -->
         </div>
       </div>
+      <!-- 未开始展示 -->
+      <notStarted v-if="liveNoticeInfo.liveBroadcastState==0" :info="liveNoticeInfo"></notStarted>
     </div>
+    <!-- 直播 -->
     <live-player
+      v-if="liveNoticeInfo.liveBroadcastState==1"
       class="livePlayer"
       :src="livedUrl"
       mode="RTC"
@@ -35,6 +43,7 @@
 <script type="text/ecmascript-6">
 import { DFSImg } from "@/utils/index";
 import live from "@/api/live";
+import notStarted from "@/components/livedModel/notStarted"
 export default {
   name: "",
   data() {
@@ -44,9 +53,17 @@ export default {
       shopName:'',
       shopLogo:'',
       backPath:'',
+      isLoading: false, 
+      status: 0, // 0：未开始 1：直播中 2：已结束
+      liveNoticeInfo: {}, //详情
+      isVideo: false, //是否有直播或回放链接
+      liveTime: null, //定时器
+      isWifi:true,//提示网络环境
     };
   },
-  components: {},
+  components: {
+    notStarted
+  },
   computed: {},
   created() {},
   onLoad(options){
@@ -64,7 +81,11 @@ export default {
     init(){
       let liveBroadcastId=this.liveId;
       live.getLiveInfo(liveBroadcastId).then(res=>{
-        console.log(res,'------66')
+        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) {
@@ -130,6 +151,22 @@ export default {
   width: 100vw;
   height: 100vh;
   position: relative;
+  overflow: hidden;
+  .bgImg{
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: -1;
+    img{
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      // 亮度
+      filter: brightness(0.8);
+    }
+  }
   .liveModel{
     width: 100vw;
     height: 100vh;
@@ -142,6 +179,7 @@ export default {
       top: 30px;
       left: 12px;
       width: 70%;
+      z-index: 2;
       align-items: center;
       .backIcon{
         color: #fff;
@@ -152,11 +190,13 @@ export default {
         background: rgba(0,0,0,0.6);
         border-radius: 30px;
         align-items: center;
+        padding-right: 10px;
         .img{
           width: 30px;
           height: 30px;
           border-radius: 50%;
           overflow: hidden;
+          margin-left: 4px;
           img{
             width: 100%;
             height: 100%;
@@ -167,6 +207,10 @@ export default {
           color: #fff;
           flex: 1;
           font-size: 14px;
+          padding: 2px 0;
+          .num{
+            font-size: 12px;
+          }
         }
         .toShop{
           background: #FB566D;