Client-Teapay/src/components/goodsList.vue

<template>
  <view class="product-list">
    <view class="product" v-for="(product, index) in productList" :key="index">
      <view class="image-view">
        <image class="product-image" :src="product.goodsThumbnailUrl"></image>
      </view>
      <view :class="['product-title','ellipsis' + long]">{{ product.goodsName }}</view>
      <view class="product-price">
        <text class="product-price-original"
          ><text class="product-unit">￥</text>{{ product.price }}</text
        >
        <!-- <text class="product-price-favour">￥{{product.originalPrice}}</text> -->
        <!-- <text class="product-tip">{{product.tip}}</text> -->
      </view>
      <view class="product-txt">{{ product.fanIntegral }}</view>
    </view>
  </view>
</template>

<script>
import { get, post } from "@/request/api.js";
export default {
  name: "goodslist",
  props: {
    long: {
      type: Number,
      default: 2
    },
    url:{
      type: String,
      default:""
    }
  },
  data() {
    return {
      productList: [],
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData(action = "add") {
      post(this.url).then((res) => {
        if (res.status == 200) {
          this.productList = res.goods;
        }
      });
      if (action === "refresh") {
        this.productList = [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.product-list {
  padding: 0 20rpx;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  flex-direction: row;
}

.product {
  width: 50%;
  padding: 20rpx 10rpx;
  display: flex;
  flex-direction: column;
}

.product-image {
  border-radius: 10rpx 10rpx 0 0;
  width: 100%;
  height: 260rpx;
  object-fit: cover;
}

.product-title {
  width: 100%;
  overflow: hidden;
  line-height: 1.5;
}

.product-price {
  color: #121212;
  font-size: 28rpx;
  position: relative;
}

.product-price-original {
  color: #18bb88;
}

.product-price-favour {
  color: #888888;
  text-decoration: line-through;
  margin-left: 10upx;
}

.product-tip {
  position: absolute;
  right: 10upx;
  background-color: #ff3333;
  color: #ffffff;
  padding: 0 10upx;
  border-radius: 5upx;
}

.product-unit {
  font-size: 24rpx;
}

.product-txt {
  font-size: 22rpx;
  color: #787878;
}
</style>