直播详情页初始化

src/app.json

 {
   "pages": [
     "pages/index/main",
+    "pages/lived/main",
     "pages/login/main",
     "pages/wxPay/main",
     "pages/counter/main",
     "pages/address/main",
-    "pages/contact/main",
-    "pages/lived/main"
+    "pages/contact/main"
   ],
   "window": {
     "backgroundTextStyle": "light",

src/pages/lived/index.vue

 <template>
   <div class="lived">
-    <van-button type="primary">按钮</van-button>
+    <!-- 直播展示层 -->
+    <div class="liveModel">
+      <!-- 自定义返回按钮 -->
+      <div class="customBack flex">
+        <div class="backIcon">
+          <van-icon name="arrow-left" @click="back" />
+        </div>
+        <div class="shopName flex">
+          <div class="img">
+            <img :src="shopLogo" alt="">
+          </div>
+          <div class="info">
+            <p class="name" v-if="shopName">{{shopName}}</p>
+            <p class="num">
+              <span>999</span> <span>观看</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
     <live-player
+      class="livePlayer"
       :src="livedUrl"
       mode="RTC"
       autoplay
       bindstatechange="statechange"
       binderror="error"
-      style="width: 100vw;height:99vh;"
     />
   </div>
 </template>
 
 <script type="text/ecmascript-6">
+import { DFSImg } from "@/utils/index";
 export default {
   name: "",
   data() {
     return {
       liveId:'', //直播间id
       livedUrl:'rtmp://58.200.131.2:1935/livetv/hunantv',
+      shopName:'',
+      shopLogo:'',
     };
   },
   components: {},
   computed: {},
   created() {},
   onLoad(options){
-    this.liveId=options.liveId;
+    let params = JSON.parse(options.params);
+    this.liveId=params.liveId;
+    this.shopName=params.shopName;
+    this.shopLogo=DFSImg(params.shopLogo,40,40);
     this.init();
   },
   mounted() {
-    
+
   },
   methods: {
     // 初始化数据
@@ -42,15 +67,101 @@ export default {
     error(err) {
       console.log(err, "----22");
     },
+    back(){
+      wx.navigateBack({
+        delta: 1
+      })
+    },
   }
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.flex{
+  display: flex;
+}
+/*清除浮动*/
+.clearfix {
+  zoom: 1;
+}
+
+.clearfix:after {
+  clear: both;
+  content: '.';
+  display: block;
+  width: 0;
+  height: 0;
+  visibility: hidden;
+}
+/* 一行否则出现省略号 */
+.line-clamp1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
+.line-clamp2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-height: 22px;
+}
+
 .lived {
   width: 100vw;
-  height: 99vh;
-  background: #eee;
+  height: 100vh;
   position: relative;
+  .liveModel{
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    .customBack{
+      position: absolute;
+      top: 30px;
+      left: 12px;
+      width: 60%;
+      align-items: center;
+      .backIcon{
+        color: #fff;
+        font-size: 20px;
+      }
+      .shopName{
+        margin-left: 20px;
+        background: rgba(0,0,0,0.6);
+        border-radius: 34px;
+        .img{
+          width: 34px;
+          height: 34px;
+          border-radius: 50%;
+          overflow: hidden;
+          img{
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .info{
+          margin-left: 6px;
+          color: #fff;
+          flex: 1;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+  .livePlayer{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: -1;
+  }
 }
-</style>
+</style>
\ No newline at end of file

src/pages/lived/main.json

 {
   "navigationStyle":"custom",
+  "navigationBarTextStyle": "white",
   "usingComponents": {
-    "van-button": "/static/vant/button/index"
+    "van-button": "/static/vant/button/index",
+    "van-icon": "/static/vant/icon/index"
   }
 }
\ No newline at end of file