article-mobile/src/views/adminCenter/serve/list.vue

<template>
  <div id="list">
    <el-row>
      <el-col :span="24" class="main" :style="{ height: clientHeight + 'px' }">
        <el-col :span="24" class="one" v-if="type == '0'">
          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
            <el-col :span="24" class="title">
              {{ item.title }}
            </el-col>
            <el-col :span="24" class="other">
              <el-col :span="24" class="origin">
                信息来源:<span>{{ item.origin || '系统管理员' }}</span>
              </el-col>
              <el-col :span="24" class="date">
                <el-col :span="20" class="left">
                  更新时间:<span>{{ item.create_time || item.renew_time || '暂无时间' }}</span>
                </el-col>
                <el-col :span="4" class="right"> <i class="el-icon-view"></i>{{ item.read >= 10000 ? '1万+' : item.read }} </el-col>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="two" v-else-if="type == '1'">
          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
            <el-col :span="17" class="title">
              <el-col :span="24" class="text">
                {{ item.title }}
              </el-col>
              <el-col :span="24" class="other">
                <el-col :span="20" class="left">
                  {{ item.origin || '系统管理员' }}
                </el-col>
                <el-col :span="4" class="right"> <i class="el-icon-view"></i>{{ item.read >= 10000 ? '1万+' : item.read }} </el-col>
              </el-col>
            </el-col>
            <el-col :span="7" class="image">
              <el-image :src="item.imgUrl[0].url">
                <div slot="error" class="image-slot">
                  <img :src="noImg" alt="" />
                </div>
              </el-image>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="thr" v-else-if="type == '2'">
          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
            <el-col :span="24" class="title">
              {{ item.title }}
            </el-col>
            <el-col :span="24" class="video">
              <video
                controls="controls"
                preload="meta"
                x-webkit-airplay="true"
                webkit-playsinline="true"
                playsinline="true"
                x5-video-player-type="h5"
                x5-video-player-fullscreen="true"
                controlsList="nodownload"
                :src="item.fileUrl[0].url"
                loop="loop"
              >
                <source src="movie.ogg" type="video/ogg" />
                <source src="movie.mp4" type="video/mp4" />
              </video>
            </el-col>
            <el-col :span="24" class="other">
              <el-col :span="20" class="left">{{ item.origin || '系统管理员' }}{{ item.create_time || item.renew_time || '暂无时间' }}</el-col>
              <el-col :span="4" class="right"><i class="el-icon-view"></i>{{ item.read >= 10000 ? '1万+' : item.read }}</el-col>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="thr" v-else-if="type == '3'">
          <el-col :span="24" class="list" v-for="(item, index) in list" :key="index" @click.native="detailBtn(item)">
            <el-col :span="24" class="title">
              {{ item.title }}
            </el-col>
            <el-col :span="24" class="video">
              <video
                controls="controls"
                preload="meta"
                x-webkit-airplay="true"
                webkit-playsinline="true"
                playsinline="true"
                x5-video-player-type="h5"
                x5-video-player-fullscreen="true"
                controlsList="nodownload"
                :src="item.fileUrl[0].url"
                loop="loop"
              >
                <source src="movie.ogg" type="video/ogg" />
                <source src="movie.mp4" type="video/mp4" />
              </video>
            </el-col>
            <el-col :span="24" class="other">
              <el-col :span="20" class="left">{{ item.origin || '系统管理员' }}{{ item.create_time || item.renew_time || '暂无时间' }}</el-col>
              <el-col :span="4" class="right"><i class="el-icon-view"></i>{{ item.read >= 10000 ? '1万+' : item.read }}</el-col>
            </el-col>
          </el-col>
        </el-col>
        <van-sticky container="list" :offset-top="clientHeight + 60">
          <page :total="total" :limit="limit" @search="search"></page>
        </van-sticky>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import page from '@/layout/common/page.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: service } = createNamespacedHelpers('service');
export default {
  name: 'list',
  props: {
    type: { type: String, default: '0' },
  },
  components: { page },
  data: function() {
    return {
      noImg: require('@a/noImg.jpg'),
      clientHeight: '',
      list: [],
      total: 0,
      limit: '5',
    };
  },
  created() {
    this.search();
  },
  mounted() {
    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 150;
    this.$set(this, `clientHeight`, clientHeight);
  },
  methods: {
    ...service(['query']),
    async search({ skip = 0 } = {}) {
      const res = await this.query({ skip, limit: this.limit, type: this.type });
      if (this.$checkRes(res)) {
        this.$set(this, `list`, res.data);
        this.$set(this, `total`, res.total);
      }
    },
    detailBtn(data) {
      this.$router.push({ path: '/adminServe/edit', query: { id: data.id } });
    },
  },
  computed: {
    ...mapState(['user', 'menuParams']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.main {
  margin: 10px 0 0 0;
  padding: 0 5px;
  .one {
    .list {
      background-color: #fff;
      margin: 0 0 10px 0;
      padding: 8px;
      border-radius: 5px;
      .title {
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        margin: 0 0 4px 0;
      }
      .other {
        .origin {
          font-size: 14px;
          color: #666;
          margin: 0 0 5px 0;
          span {
            color: #000;
          }
        }
        .date {
          font-size: 14px;
          color: #666;
          margin: 0 0 5px 0;
          span {
            color: #000;
          }
          .right {
            text-align: right;
            color: #000;
          }
        }
      }
    }
  }
  .two {
    .list {
      background-color: #fff;
      margin: 0 0 10px 0;
      padding: 8px;
      border-radius: 5px;
      position: relative;
      .title {
        padding: 0 5px 0 0;
        .text {
          font-size: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          margin: 0 0 4px 0;
          padding: 0 5px 0 0;
        }
        .other {
          font-size: 14px;
          color: #666;
          position: relative;
          top: 25px;
          .right {
            text-align: right;
            height: 20px;
            line-height: 25px;
          }
        }
      }
      .image {
        .el-image {
          float: right;
          width: 100%;
          height: 100%;
          border-radius: 5px;
        }
        /deep/.image-slot img {
          width: 100%;
          height: 100%;
          vertical-align: top;
        }
      }
    }
  }
  .thr {
    .list {
      background-color: #fff;
      margin: 0 0 10px 0;
      padding: 8px;
      border-radius: 5px;
      .title {
        font-size: 15px;
        margin: 0 0 5px 0;
      }
      .video {
        margin: 0 0 5px 0;
        border: 1px solid #f1f1f1;
        video {
          float: left;
          width: 100%;
          height: 100%;
        }
      }
      .other {
        font-size: 14px;
        color: #666;
        .right {
          text-align: right;
        }
      }
    }
  }
}
</style>