hh

src/router/index.js

@@ -69,6 +69,13 @@ const routes = [
     meta: { title: '注册', isleftarrow: true },
     component: () => import('../views/registered.vue'),
   },
+  // 推送直播房间详情
+  {
+    path: '/onlive/roomdetail',
+    name: 'onlive_roomdetail',
+    meta: { title: '直播房间详情', isleftarrow: true },
+    component: () => import('../views/onlive/roomdetail.vue'),
+  },
 ];
 
 const router = new VueRouter({

src/views/onlive/roomdetail.vue

@@ -0,0 +1,173 @@
+<template>
+  <div id="roomInfo">
+    <el-row>
+      <el-col :span="24" class="style">
+        <el-col :span="24" class="top">
+          <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
+        </el-col>
+        <el-col :span="24" class="main">
+          <van-image :src="roomInfos.filedir" class="image"></van-image>
+          <van-count-down v-if="time > 0 && endtime > 0" class="time" :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
+          <el-col v-else-if="time <= 0 && endtime > 0" class="time">直播已开始</el-col>
+          <el-col v-else-if="endtime <= 0" class="time">直播已结束</el-col>
+          <van-tabs v-model="active" line-width="50px" title-active-color="#ee0a24">
+            <van-tab title="简介">
+              <van-col :span="24" class="title">{{ roomInfos.title }}</van-col>
+              <van-col :span="24" class="starttime"><van-icon name="underway-o" />开始时间： {{ roomInfos.starttime }}</van-col>
+              <van-col :span="24" class="gap"></van-col>
+
+              <van-col :span="24">
+                <van-col :span="24" class="infotop"><span></span><span>活动简介</span> </van-col>
+                <van-col class="content">{{ roomInfos.content }}</van-col>
+              </van-col>
+            </van-tab>
+          </van-tabs>
+          <!-- <van-col :span="24" class="reserve">立即预约</van-col> -->
+          <van-col :span="24" class="reserve" @click.native="clickBtn()">
+            预约报名
+          </van-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+var moment = require('moment');
+const { mapActions: room } = createNamespacedHelpers('room');
+export default {
+  name: 'roomInfo',
+  props: {},
+  components: {
+    NavBar,
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+      roomInfos: {},
+      time: '',
+      active: 1,
+      endtime: '',
+    };
+  },
+  created() {
+    this.seachInfo();
+  },
+  methods: {
+    ...room(['fetch']),
+    async seachInfo() {
+      let res = await this.fetch(this.id);
+      if (this.$checkRes(res)) {
+        console.log(res.data);
+
+        this.$set(this, `roomInfos`, res.data);
+        const starttime = moment(res.data.starttime).format('x');
+        const endtime = moment(res.data.endtime).format('x');
+        const now = moment(new Date()).format('x');
+        this.$set(this, `time`, starttime - now);
+        this.$set(this, `endtime`, endtime - now);
+      }
+    },
+    async clickBtn() {
+      this.$router.push({ path: '/registered', query: { openid: this.openid } });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+    openid() {
+      return this.$route.query.openid;
+    },
+  },
+  mounted() {
+    this.title = this.$route.meta.title;
+    this.isleftarrow = this.$route.meta.isleftarrow;
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  min-height: 667px;
+  position: relative;
+  background-color: #f9fafc;
+}
+.top {
+  height: 46px;
+  overflow: hidden;
+  position: relative;
+  z-index: 999;
+}
+.main {
+  min-height: 570px;
+}
+.image {
+  width: 100%;
+  height: 220px;
+}
+.time {
+  height: 40px;
+  line-height: 40px;
+  font-size: 16px;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: #ffffff;
+  text-align: center;
+  position: absolute;
+  top: 226px;
+  width: 100%;
+}
+.title {
+  font-size: 20px;
+  font-weight: bold;
+  padding: 10px;
+}
+.starttime {
+  padding: 10px;
+}
+/deep/.van-icon::before {
+  font-size: 13px;
+  margin-right: 5px;
+}
+.gap {
+  background-color: #f2f2f2;
+  height: 10px;
+}
+.infotop {
+  margin: 10px 5px;
+}
+.infotop span:first-child {
+  display: inline-block;
+  background-color: #ee0a24;
+  width: 3px;
+  height: 20px;
+  margin: 0 10px;
+}
+.infotop span:last-child {
+  font-size: 16px;
+  font-weight: bold;
+}
+.content {
+  padding: 10px;
+}
+.reserve {
+  background-color: #2c69fe;
+  position: absolute;
+  bottom: 0px;
+  height: 50px;
+  color: #ffffff;
+  text-align: center;
+  line-height: 50px;
+  font-weight: 600;
+}
+</style>