add new list review by zhiming.hu

+<template>
+  <div class="bg" v-if="list.length">
+    <div class="second-list-item" v-for="(product,index) in list" @click="goDetail(product, index)"
+         :key="index" :class="(index) % 2 === 0 && 'magrin-right'">
+
+      <div v-if="product.status === 100" class="dim-background">
+        <ImgSize class="dim-imge" :src="product.secondhand_image" :width="180" :height="180"/>
+      </div>
+      <div v-else class="item-background">
+
+        <div class="good-image-div">
+          <ImgSize
+            class="good-image"
+            :src="product.secondhand_image"
+            :width="180"
+            :height="180"
+          />
+        </div>
+      </div>
+
+      <div class="item-bottom">
+        <div class='flag-wrapper'>
+          <span class='price-flag'>{{product.skup_price && '¥'}}{{product.skup_price || ' '}}</span>
+          <span class='type-flag' v-if="product.secondhandTypeName">{{product.secondhandTypeName}}</span>
+        </div>
+        <div class="size-flag">{{product.size_name}}码</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ImgSize from '../../../components/img-size';
+
+export default {
+  props: {
+    list: Array,
+    yasParams: Object,
+    yasEventName: {
+      type: String,
+      default: 'XY_UFO_PRD_LIST_C'
+    },
+  },
+  components: {
+    ImgSize,
+  },
+  data: function() {
+    return {
+      yasFirstId: 0,
+      itemHeight: 0
+    };
+  },
+  methods: {
+    goDetail(product, index) {
+      if (this.yasParams && Object.keys(this.yasParams).length) {
+        this.yasDetail(product.product_id, index);
+      }
+
+      this.$router.push({
+        name: 'SecondProductDetail',
+        params: {
+          skup: product.skup,
+          yasParams: this.yasParams,
+        }
+      });
+    },
+
+    yasShowEvent: function(height) {
+      if (!this.itemHeight) {
+        let item = document.querySelector('.second-list-item');
+
+        this.itemHeight = item && item.offsetHeight || 0;
+      }
+
+      if (!this.itemHeight) {
+        return;
+      }
+
+      // 获取列表单个元素高度
+      let index = 0;
+
+      if (Number(height) > 0) {
+        // 获取第一个曝光元素
+
+        let row = parseInt((height - 12) / this.itemHeight) + 1;
+
+        index = row * 2 - 2;
+      }
+
+      // 获取曝光列表
+      let list = [];
+
+      for (let i = 0; i < 6; i++) {
+        if (this.list[i + index]) {
+          list.push(this.list[i + index]);
+        }
+      }
+
+      // 判断是否是重复曝光
+      if (list.length && list[0].product_id !== this.yasFirstId) {
+        this.yasFirstId = list[0].product_id;
+        let DATA = [];
+
+        list.map((value, i) => {
+          const prdType = value.pre_sale_flag === 5 ? 2 : 1;   //flag=5全新瑕疵，6二手
+          DATA.push({...this.yasParams, I_INDEX: i + index + 1, PRD_ID: value.product_id, PRD_TYPE: prdType});
+        });
+
+        this.$store.dispatch('reportYas', {
+          params: {
+            param: {DATA},
+            appop: 'XY_UFO_SHOW_EVENT'
+          }
+        });
+      }
+    },
+
+    yasDetail(id, index) {
+      this.$store.dispatch('reportYas', {
+        params: {
+          param: {...this.yasParams, I_INDEX: index + 1, PRD_ID: id },
+          appop: this.yasEventName
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  .magrin-right {
+    margin-right: 14px;
+  }
+
+  .second-list-item {
+    border-radius: 16px;
+    width: 344px;
+    background: #fff;
+    margin-bottom: 16px;
+  }
+
+  .good-image-div {
+    width: 100%;
+    height: 344;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+
+  .good-image {
+    object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .item-background {
+    background: transparent;
+  }
+
+  .item-imge {
+    width: 344px;
+    height: 344px;
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+  }
+
+  .dim-background {
+    background: url(~statics/image/list/Group@2x.png) no-repeat;
+    background-size: contain;
+    background-position: center;
+
+  }
+
+  .dim-imge {
+    width: 344px;
+    height: 344px;
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+    opacity:0.6;
+    filter: alpha(opacity=60);
+  }
+
+  .item-bottom {
+    padding: 20px 14px 30px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    vertical-align: middle;
+  }
+
+  .flag-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .price-flag {
+    color: #000;
+    font-size: 32px;
+    font-weight: bold;
+    line-height: 40px;
+    @include num
+  }
+
+  .type-flag {
+    margin-left: 5px;
+    color: #fff;
+    background: #000;
+    text-align: center;
+    font-size: 22px;
+    line-height: 40px;
+    padding: 4px 8px;
+    line-height: 30px;
+    border-radius: 4px;
+  }
+
+  .size-flag {
+    font-size: 22px;
+    color: #000;
+    line-height: 40px;
+    letter-spacing: 0;
+  }
+
+  .bg {
+    padding: 24px 24px 8px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+</style>