article-mobile/src/views/adminCenter/topic/item.vue

<template>
  <div id="item">
    <el-row class="item">
      <el-col :span="24" style="padding-bottom: 50px;" @click.native="toEdit">{{ data.content }}</el-col>
      <el-col :span="24" v-if="data.type === '0'">
        <el-col :span="8" v-for="(i, index) in data.imgUrl" :key="`img${index}`">
          <template v-if="index < length - 1">
            <van-image :src="i.url" :width="imgpx" :height="imghpx" fit="scale-down" @click="toPreview(index)"></van-image>
          </template>
          <template v-if="index == length - 1 && data.imgUrl.length <= length">
            <van-image :src="i.url" :width="imgpx" :height="imghpx" fit="scale-down" @click="toPreview(index)"></van-image>
          </template>
          <template v-if="index == length - 1 && data.imgUrl.length > length">
            <van-image src="" :width="imgpx" :height="imghpx" fit="scale-down">
              <template #error>
                <el-row>
                  <el-col :span="24" style="font-size:32px"> <van-icon name="plus" size="28" /> {{ data.imgUrl.length - length + 1 }} </el-col>
                </el-row>
              </template>
            </van-image>
          </template>
        </el-col>
      </el-col>
      <el-col :span="24" v-if="data.type === '1'" style="text-align:center">
        <video :src="data.fileUrl[0].url" :width="videopx" :height="videohpx" controls></video>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'item',
  props: { data: { type: Object, default: () => {} } },
  components: {},
  data: function() {
    return {
      length: 9,
    };
  },
  created() {},
  methods: {
    toEdit() {
      this.$router.push({ path: '/adminCommunity/edit', query: { id: this.data._id } });
    },
    toPreview(index) {
      let arr = [];
      if (this.data.type === '0') arr = this.data.imgUrl.map(i => i.url);
      ImagePreview({
        images: arr,
        startPosition: index,
      });
    },
  },
  computed: {
    ...mapState(['user', 'menuParams']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
    imgpx() {
      return 120;
    },
    imghpx() {
      return this.imgpx * 0.8;
    },
    videopx() {
      console.log(document.body.clientHeight);
      return document.body.clientWidth * 0.8;
    },
    videohpx() {
      return document.body.clientHeight * (2 / 10);
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.item {
  border-bottom: 1px solid #ccc;
  padding: 8px 0;
  .el-col:first-child {
    &:extend(.dl2);
  }
}
.dl2 {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
/deep/.van-image__img {
  border: 1px solid #f1f1f1;
}
</style>