mpvue-dev-temp/src/components/list-item.vue

<template>
  <div v-if="itemData" class="item-container" @click="handleToPage(itemData.info_id)">
    <div class="item-title">{{itemData.title}}</div>
    <div class="item-pic-wrap" v-if="itemData.img_list.length > 1 ">
      <div class="item-pic-item" v-for="(url, idx) in itemData.img_list" :key="idx">
        <div class="pic-item" v-if="idx < 3">
          <img mode="widthFix" :src="!!url ? url : defImage " alt="" >
        </div>
      </div>
    </div>
    <div class="item-media">
      <span class="media-name">{{itemData.media_info.media_name}}</span>
      <span class="media-tip" @click="todrawEvent"></span>
    </div>
  </div>
</template>
<script>
export default {
  props: ['itemData'],
  data () {
    return {
      defImage: '/static/images/grey.gif'
    }
  },
  methods: {
    todrawEvent () {
      wx.navigateTo({
        url: '/pages/banner/main'
      })
    },
    handleToPage (infoId) {
      let goldCoins = wx.getStorageSync('userInfo').gold_coins
      if (goldCoins < 10) {
        wx.showToast({
          title: `很遗憾, 阅读至少需要10金币`,
          icon: 'none',
          duration: 2000
        })
      } else {
        wx.navigateTo({
          url: `/pages/detail/main?info_id=${infoId}`
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .item-container {
    &:last-child {
      margin-bottom: 60px;
    }
    border-bottom: 1px solid #ebebeb;
    padding: 10px 0;
    margin: 0 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    .item-title {
      font-size: 18px;
      color: #222;
    }
    .item-pic-wrap {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      .item-pic-item { 
        display: inline-block;
        width: 32%;
        .pic-item {
          margin-top: 10px;
          max-height: 80px;
          overflow: hidden;
          img {
            border: none;
            width: 100%;
            height: 100%
          }
        }
      }
    }
    .item-media {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      margin-bottom: -5px;
      .media-name {
        color: #9b9b9b;
        visibility: hidden;
      } 
      .media-tip {
        color: #fccf85;
      }

    }
  }
</style>