hemall.terabimsoft.com.cn/plugins/shop_server/components/default/goods.vue

<template>
  <div class="goods_wrap flex">
    <div :class="[pc_temp?'fourGoods':'goods']" v-for="(item,index) in list" :key="index"
         @click="toGoods(item)" :style="{width:pc_temp?'220px':'230px'}">
      <img v-lazy="item.thumb">
      <div class="goods_info flex flex-col">
        <div class="title ">{{item.title}}</div>
        <div class="price col_red"><span style="font-size:14px;color:#666;display:inline-block;margin-right:10px;">{{basic_info.lang && basic_info.lang.goods &&basic_info.lang.goods.price ? basic_info.lang.goods.price : '现价'}}:</span><span
          style="font-size: 18px;">¥</span>{{item.min_price||item.price}}
        </div>
      </div>
    </div>
    <div class="no-goods" v-if="list && list.length <= 0">
      暂无更多
    </div>
  </div>
</template>

<script>
  import {mapState} from "vuex";

  export default {
    props: {
      list: {
        type: null
      },
      pc_temp:{
        type: Boolean
      }
    },
    data() {
      return {};
    },
    mounted() {
    },
    computed: {
      ...mapState(["basicSet", "basic_info"]),
    },
    methods: {
      toGoods(item) {
        let id = item.id || item.goods_id;
        if(this.$baseURL) {
          // 静态部署环境下
          window.open(this.fun.getSiteRoot() + "/plugins/shop_server/goods?i=" +this.fun.getKeyByI()+'&id='+id, "_blank");
        }else {
          window.open(this.fun.getSiteRoot() + "/plugins/shop_server/goods/"+ id +"?i=" +this.fun.getKeyByI(), "_blank");
        }
        // this.$router.push(this.fun.getUrl('goods-id', {id: id}));
      },
      toUrl(url, params, query) {
        this.$router.push(this.fun.getUrl(url, params, query));
      },
    }
  };
</script>
<style lang="scss" scoped>
  .goods_wrap {
    flex-wrap: wrap;
    .goods,.fourGoods {
      box-shadow: 1px 1px 2px rgba(191, 191, 191, 0.3);
      width: 230px;
      background: #fff;
      margin-right: 12px;
      box-sizing: border-box;
      margin-bottom: 20px;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.5s ease;
      img {
        width: 100%;
        height: 230px;
        object-fit: contain;
        overflow: hidden;
      }
      .goods_info {
        font-size: 16px;
        padding: 15px;
        height: 130px;
        box-sizing: border-box;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        .title {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .price {
          font-size: 18px;

        }
      }
    }
    .goods:hover,.fourGoods:hover {
      opacity: 0.8;
      box-shadow: 0px 4px 8px 0px rgba(191, 191, 191, 0.6);
      img {
        transform: scale(1.04);
        transition: all 0.5s ease;
      }
    }
    .goods:nth-child(5n) {
      margin-right: 0;
    }
    .fourGoods:nth-child(4n) {
      margin-right: 0;
    }
    .no-goods {
      margin: 20px auto;
      font-size: 16px;
      color: var(--color);
      text-align: center;
    }
  }
</style>