|
|
@@ -6,7 +6,22 @@
|
|
|
<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" class="time" :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
|
|
|
+ <el-col v-else-if="time <= 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>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -17,6 +32,7 @@
|
|
|
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',
|
|
|
@@ -33,6 +49,8 @@ export default {
|
|
|
// 返回
|
|
|
navShow: true,
|
|
|
roomInfos: {},
|
|
|
+ time: '',
|
|
|
+ active: 1,
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
@@ -43,7 +61,12 @@ export default {
|
|
|
async seachInfo() {
|
|
|
let res = await this.roomfetch({ roomname: this.roomname });
|
|
|
if (this.$checkRes(res)) {
|
|
|
+ console.log(res.data);
|
|
|
+
|
|
|
this.$set(this, `roomInfos`, res.data);
|
|
|
+ const date = moment(res.data.starttime).format('x');
|
|
|
+ const now = moment(new Date()).format('x');
|
|
|
+ this.$set(this, `time`, date - now);
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
@@ -76,4 +99,62 @@ export default {
|
|
|
.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>
|
