mobile-official/src/views/channel/detail.vue

<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" @onClickLeft="onClickLeft"> </NavBar>
        </el-col>
        <el-col :span="24" class="main">
          <el-col :span="24" class="video">
            <video autoplay controls :src="videoUrl" style="width:100%;height:100%"></video>
          </el-col>
          <el-col :span="24" class="text">
            <van-collapse v-model="activeNames">
              <van-collapse-item name="1">
                <template #title>
                  <div class="title">{{ form.title }}</div>
                </template>
                <el-col :span="24" class="con">
                  <p><span>更新时间：</span>{{ form.create_time }}</p>
                  <p><span>来源：</span>{{ form.orgin }}</p>
                  <p><span>简介：</span>{{ form.desc }}</p>
                </el-col>
              </van-collapse-item>
            </van-collapse>
          </el-col>
          <el-col :span="24" class="choose">
            <el-col :span="24" class="one">
              <span></span>
              <span>选集</span>
            </el-col>
            <el-col :span="24" class="two">
              <van-swipe :loop="false" :width="300">
                <van-swipe-item
                  class="videodata"
                  v-for="(item, index) in form.videodata"
                  :key="index"
                  @click.native="change(index, item)"
                  :class="{ active: changeColor == index }"
                >
                  {{ item.name }}
                </van-swipe-item>
              </van-swipe>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
import NavBar from '@/layout/common/topInfo.vue';
const { mapActions: channel } = createNamespacedHelpers('channel');
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'detail',
  props: {},
  components: {
    NavBar,
  },
  data: function() {
    return {
      // 头部标题
      title: '',
      // meta为true
      isleftarrow: '',
      // 返回
      navShow: true,
      activeNames: ['1'],
      form: {},
      changeColor: 0,
      videoUrl: '',
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...channel(['query', 'fetch']),
    async search() {
      const res = await this.fetch(this.id);
      if (this.$checkRes(res)) {
        this.$set(this, `form`, res.data);
      }
    },
    change(index, item) {
      console.log(index, item);
    },
    back() {
      this.$router.push({ path: 'index' });
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
  },
  mounted() {
    this.title = this.$route.meta.title;
    this.isleftarrow = this.$route.meta.isleftarrow;
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.active {
  color: #409eff;
}
.style {
  width: 100%;
  min-height: 667px;
  position: relative;
  background-color: #f9fafc;
}
.top {
  height: 46px;
  overflow: hidden;
}
.main {
  .text {
    padding: 5px 10px;
    .title {
      font-size: 16px;
      font-weight: bold;
    }
    .con {
      p {
        span {
          font-weight: bold;
          padding: 10px 0 0 0;
        }
      }
    }
  }
  .choose {
    padding: 0 10px;
    .one {
      height: 30px;
      span:nth-child(1) {
        display: inline-block;
        width: 2px;
        height: 30px;
        background: #409eff;
      }
      span:nth-child(2) {
        position: relative;
        top: -8px;
        left: 5px;
        font-size: 18px;
        font-weight: bold;
      }
    }
    .two {
      margin-top: 5px;
      .videodata {
        height: 100px;
        background-color: #f1f1f1;
        margin-right: 10px;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        line-height: 100px;
        border-radius: 5px;
      }
    }
  }
}
/deep/.van-cell {
  background-color: transparent;
  padding: 5px 10px;
}
/deep/.van-collapse-item__content {
  background-color: transparent;
  color: black;
  padding: 0 10px;
}
/deep/.van-swipe__indicators {
  display: none;
}
/deep/.van-collapse-item {
  border-bottom: 1px solid #f1f1f1;
}
/deep/.van-cell::after {
  border: 0;
}
/deep/[class*='van-hairline']::after {
  border: 0;
}
</style>