live-mobile/src/views/index.vue

<template>
  <div id="index" class="container">
    <van-row>
      <van-row>
        <van-col span="24" class="style">
          <van-col span="24" class="banner">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item class="swipList" v-for="(item, index) in swipList" :key="index">
                <van-image :src="item.url" />
              </van-swipe-item>
            </van-swipe>
          </van-col>
          <van-col span="24" class="click">
            <van-col span="8" class="btn" @click.native="$router.push({ path: '/meetingBrief/index', query: { type: '0' } })">
              <i class="iconfont iconjianjie icon" style="color:#FF8C00;"></i>
              <p style="color:#FF8C00;">会议简介</p>
            </van-col>
            <van-col span="8" class="btn" @click.native="$router.push({ path: '/meetingBrief/index', query: { type: '1' } })">
              <i class="iconfont iconicon-test icon" style="color:#B76958;"></i>
              <p style="color:#B76958;">会议日程</p>
            </van-col>
            <van-col span="8" class="btn" @click.native="$router.push({ path: '/meetingBrief/index', query: { type: '2' } })">
              <i class="iconfont iconzhubanfangrenzheng icon" style="color:#5B4ED4;"></i>
              <p style="color:#5B4ED4;">主办方介绍</p>
            </van-col>
            <van-col span="8" class="btn" @click.native="$router.push({ path: '/meetingBrief/index', query: { type: '3' } })">
              <i class="iconfont iconzhubanfangrenzheng icon" style="color:#2D5868;"></i>
              <p style="color:#2D5868;">协办方介绍</p>
            </van-col>
            <van-col span="8" class="btn" @click.native="$router.push({ path: '/meetingBrief/index', query: { type: '4' } })">
              <i class="iconfont icon111 icon" style="color:#00A8C4;"></i>
              <p style="color:#00A8C4;">专家介绍</p>
            </van-col>
            <van-col span="8" class="btn" @click.native="$router.push({ path: '/user/index', query: { type: '5' } })">
              <i class="iconfont iconjiaoyu icon" style="color:#3B9C55;"></i>
              <p style="color:#3B9C55;">继续教育学分申请</p>
            </van-col>
            <van-col span="8" class="btn" @click.native="$router.push({ path: '/live/roomlist' })">
              <i class="iconfont iconzhibo icon" style="color:#645FB9;"></i>
              <p style="color:#645FB9;">直播入口</p>
            </van-col>
            <van-col span="8" class="btn" @click.native="$router.push({ path: '/meetingBrief/detail', query: { type: '7' } })">
              <i class="iconfont iconkefu icon" style="color:#00A8C4;"></i>
              <p style="color:#00A8C4;">联系客服</p>
            </van-col>
            <van-col span="8" class="btn" @click.native="$router.push({ path: '/meetingBrief/index', query: { type: '6' } })">
              <i class="iconfont iconwenxintishi icon" style="color:#E6A23C;"></i>
              <p style="color:#5E2422;">温馨提示</p>
            </van-col>
          </van-col>
          <!-- <van-col span="24" class="after">
            <h4 style="color:#0DB1AF">往期直播</h4>
            <van-col span="24">
              <van-col
                span="24"
                class="videoList"
                v-for="(item, index) in videoList"
                :key="index"
                @click.native="$router.push({ path: '/onlive/videoinfo', query: { id: item.id, fileid: item.file_id } })"
              >
                <van-col span="9" class="image">
                  <van-image :src="item.filedir" />
                </van-col>
                <van-col span="15" class="text">
                  <p class="textOver">{{ item.title }}</p>
                  <p>时间:{{ item.starttime }}</p>
                  <p>
                    <span>{{ item.username }}</span>
                    <span>¥{{ item.price }}</span>
                  </p>
                </van-col>
              </van-col>
            </van-col>
          </van-col> -->
          <van-col span="24" class="foot">
            <van-tabbar v-model="active">
              <van-tabbar-item icon="home-o" @click.native="$router.push({ path: '/live/index' })">首页</van-tabbar-item>
              <van-tabbar-item icon="tv-o" @click.native="$router.push({ path: '/live/roomlist' })">直播</van-tabbar-item>
              <van-tabbar-item icon="replay" @click.native="$router.push({ path: '/live/roomrecord' })">往期</van-tabbar-item>
              <van-tabbar-item icon="contact" @click.native="$router.push({ path: '/user/index', query: { type: '5' } })">我的</van-tabbar-item>
            </van-tabbar>
          </van-col>
        </van-col>
      </van-row>
    </van-row>
    <!-- <el-col :span="24" class="title">
          <span>叁多健康管理平台</span>
        </el-col>
        <el-col :span="24" class="main">
          <el-col class="guide-box">
            <el-col class="single-box" @click.native="$router.push({ path: '/meetingBrief/roomlist' })">
              <el-image class="icon" :src="require('@/assets/multiroom.png')"> </el-image>
              <span class="label">直播入口</span>
              <span class="desc"></span>
            </el-col>
            <el-col class="single-box" @click.native="$router.push({ path: '/meetingBrief/roomrecord' })">
              <el-image class="icon" :src="require('@/assets/voice.png')"> </el-image>
              <span class="label">往期讲堂</span>
              <span class="desc"></span>
            </el-col>
            <el-col class="single-box" @click.native="$router.push({ path: '/user/index' })">
              <el-image class="icon" :src="require('@/assets/export.png')"> </el-image>
              <span class="label">个人中心</span>
              <span class="desc"></span>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="foot">
          <span>潍坊恒源科技有限公司</span>
        </el-col> -->
  </div>
</template>

<script>
import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
const { mapActions: room } = createNamespacedHelpers('room');
const jwt = require('jsonwebtoken');
export default {
  name: 'index',
  props: {},
  components: {},
  data: () => ({
    // 头部标题
    title: '',
    // meta为true
    isleftarrow: '',
    // 返回
    navShow: true,
    // 轮播图
    swipList: [
      {
        url: require('@/assets/7.png'),
      },
      {
        url: require('@/assets/6.png'),
      },
      {
        url: require('@/assets/1.jpg'),
      },
      {
        url: require('@/assets/2.jpg'),
      },
      {
        url: require('@/assets/3.jpg'),
      },
      {
        url: require('@/assets/4.jpg'),
      },
      {
        url: require('@/assets/5.jpg'),
      },
    ],
    // 往期直播
    videoList: [],
    // 底部标签
    active: 0,
  }),
  created() {
    if (this.token) {
      this.sesstoken();
    }
    // this.searchInfo();
  },
  methods: {
    ...mapMutations(['setUser']),
    ...room({ roomQuery: 'query' }),
    async searchInfo() {
      const info = {};
      info.ishis = '1';
      let res = await this.roomQuery(info);
      if (this.$checkRes(res)) {
        this.$set(this, `videoList`, res.data);
      }
    },
    sesstoken() {
      sessionStorage.setItem('token', this.token);
      let user = jwt.decode(this.token);
      this.setUser(user);
    },
    handleEntry(data) {
      if (data === 1) {
      } else if (data === 2) {
      } else if (data === 3) {
      }
    },
  },
  computed: {
    ...mapState(['user']),
    token() {
      return this.$route.query.token;
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.style {
  .banner {
    .swipList {
      width: 100%;
      height: 200px;
      .van-image {
        width: 100%;
        height: 200px;
      }
    }
  }
  .click {
    border-bottom: 0px solid #ccc;
    .btn {
      padding: 15px 0;
      text-align: center;
      .icon {
        font-size: 40px;
      }
      p {
        font-size: 12px;
        padding: 5px 0 0 0;
      }
    }
  }
  .after {
    margin: 0 0 50px 0;
    h4 {
      padding: 0 10px;
    }
    .videoList {
      position: relative;
      padding: 0 10px;
      .image {
        .van-image {
          height: 90px;
        }
      }
      .text {
        padding: 0 5px;
        p:nth-child(2) {
          font-size: 14px;
          padding: 5px 0;
          color: #333;
        }
        p:last-child {
          position: absolute;
          bottom: 8px;
          width: 57%;
          span {
            display: inline-block;
            width: 50%;
            font-size: 14px;
          }
          span:last-child {
            text-align: right;
          }
        }
      }
    }
  }
}
/deep/.van-image__img {
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
</style>