Merge branch 'master' of http://git.cc-lotus.info/service-platform/mobile-official

src/router/index.js

@@ -12,13 +12,6 @@ const routes = [
     meta: { title: '绑定', isleftarrow: false },
     component: () => import('../views/bind.vue'),
   },
-  // 首页
-  {
-    path: '/home/index',
-    name: 'home_index',
-    meta: { title: '首页', isleftarrow: false },
-    component: () => import('../views/home/index.vue'),
-  },
   // 错误
   {
     path: '/error',
@@ -26,6 +19,13 @@ const routes = [
     meta: { title: '错误页面', isleftarrow: false },
     component: () => import('../views/error.vue'),
   },
+  // 首页
+  {
+    path: '/home/index',
+    name: 'home_index',
+    meta: { title: '首页', isleftarrow: false },
+    component: () => import('../views/home/index.vue'),
+  },
   // 直播大厅
   {
     path: '/live/index',
@@ -33,7 +33,13 @@ const routes = [
     meta: { title: '直播大厅', isleftarrow: true },
     component: () => import('../views/live/index.vue'),
   },
-
+  // 直播详情
+  {
+    path: '/live/detail',
+    name: 'live_detail',
+    meta: { title: '直播详情', isleftarrow: true },
+    component: () => import('../views/live/detail.vue'),
+  },
   // 科技超市
   {
     path: '/market/index',

src/views/live/detail.vue

@@ -0,0 +1,76 @@
+<template>
+  <div id="detail">
+    <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">
+          <liveDetail></liveDetail>
+        </el-col>
+        <!-- <el-col :span="24" class="foot">
+          <footInfo></footInfo>
+        </el-col> -->
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+import NavBar from '@/layout/common/topInfo.vue';
+import footInfo from '@/layout/common/footInfo.vue';
+import liveDetail from './parts/liveDetail.vue';
+export default {
+  name: 'detail',
+  props: {},
+  components: {
+    NavBar,
+    // footInfo,
+    liveDetail, //直播详情
+  },
+  data: function() {
+    return {
+      // 头部标题
+      title: '',
+      // meta为true
+      isleftarrow: '',
+      // 返回
+      navShow: true,
+    };
+  },
+  created() {
+    console.log(this.user);
+  },
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+  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;
+}
+.foot {
+  position: absolute;
+  bottom: 0;
+}
+</style>

src/views/live/index.vue

@@ -6,7 +6,7 @@
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </el-col>
         <el-col :span="24" class="main">
-          直播大厅
+          <liveList></liveList>
         </el-col>
         <el-col :span="24" class="foot">
           <footInfo></footInfo>
@@ -20,12 +20,15 @@
 import { mapState, createNamespacedHelpers } from 'vuex';
 import NavBar from '@/layout/common/topInfo.vue';
 import footInfo from '@/layout/common/footInfo.vue';
+import liveList from './parts/liveList.vue';
+
 export default {
   name: 'index',
   props: {},
   components: {
     NavBar,
     footInfo,
+    liveList, //直播列表
   },
   data: function() {
     return {

src/views/live/parts/liveDetail.vue

@@ -0,0 +1,98 @@
+<template>
+  <div id="liveDetail">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col :span="24" class="video">
+          <el-col :span="15" class="videoLeft">
+            左侧
+          </el-col>
+          <el-col :span="9" class="videoRight">
+            右侧
+          </el-col>
+        </el-col>
+        <el-col :span="24" class="chat">
+          <el-col :span="24" class="chatList">
+            聊天列表
+          </el-col>
+          <el-col :span="24" class="chatInput">
+            <el-col :span="19" class="input">
+              <el-input v-model="input"></el-input>
+            </el-col>
+            <el-col :span="5" class="btn">
+              <el-button type="primary" size="mini" @click="onSubmit">发送</el-button>
+            </el-col>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'liveDetail',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      input: '',
+    };
+  },
+  created() {},
+  methods: {
+    onSubmit() {
+      console.log(this.input);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  padding: 10px;
+  .video {
+    background: #fff;
+    padding: 10px;
+    margin: 0 0 10px 0;
+    .videoLeft {
+      height: 200px;
+      border-style: double;
+      border-color: #ff0000 #00ff00 #0000ff rgb(250, 0, 255);
+      border-radius: 15px;
+    }
+    .videoRight {
+      height: 200px;
+      border-style: double;
+      border-color: #ff0000 #00ff00 #0000ff rgb(250, 0, 255);
+      border-radius: 15px;
+    }
+  }
+  .chat {
+    background: #fff;
+    padding: 10px;
+    .chatList {
+      border: 1px solid #ccc;
+      min-height: 300px;
+      margin: 0 0 10px 0;
+      border-radius: 10px;
+      padding: 5px 10px;
+    }
+    .chatInput {
+      .el-button {
+        width: 100%;
+        padding: 13px 0;
+      }
+    }
+  }
+}
+</style>

src/views/live/parts/liveList.vue

@@ -0,0 +1,91 @@
+<template>
+  <div id="liveList">
+    <el-row>
+      <el-col :span="24" class="info">
+        <el-col class="list" v-for="(item, index) in list" :key="index">
+          <el-col :span="18" class="left">
+            <p class="textOver">{{ item.title }}</p>
+            <p>
+              主讲人:<span>{{ item.user }}</span>
+            </p>
+            <p>
+              直播时间:<span>{{ item.date }}</span>
+            </p>
+          </el-col>
+          <el-col :span="6" class="right">
+            <p @click="$router.push({ path: '/live/detail' })">进入房间</p>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'liveList',
+  props: {},
+  components: {},
+  data: function() {
+    return {
+      list: [
+        {
+          title: '标题',
+          user: '测试人员',
+          date: '2020-02-02',
+        },
+        {
+          title: '标题',
+          user: '测试人员',
+          date: '2020-02-02',
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.info {
+  padding: 10px;
+}
+.list {
+  background: #fff;
+  padding: 10px;
+  border-radius: 5px;
+  margin: 0 0 10px 0;
+  .left {
+    font-size: 16px;
+    color: #ccc;
+    p {
+      padding: 0 0 10px 0;
+      span {
+        color: #000;
+      }
+    }
+    p:first-child {
+      color: #000;
+    }
+  }
+  .right {
+    p {
+      background: #409eff;
+      color: #fff;
+      padding: 5px 8px;
+      border-radius: 5px;
+    }
+  }
+}
+</style>