Client-Teapay/src/components/goodsList.vue

<template>
    <view class="product-list">
        <view class="product" v-for="(i, s) in productList" :key="s" @click="NavToGoodsDetail(i.goodsId,i.type)">
            <view class="image-view">
                <image class="product-image" :src="i.goodsThumbnailUrl"></image>
            </view>
            <view :class="['product-title', 'ellipsis' + long]">{{ i.goodsName }}</view>
            <view class="product-price">
                <text class="product-price-original"><text class="product-unit">￥</text>{{ i.price }}</text>
                <!-- <text class="product-price-favour">￥{{i.originalPrice}}</text> -->
                <!-- <text class="product-tip">{{i.tip}}</text> -->
            </view>
            <view class="product-txt">{{ i.fanIntegral }}</view>
        </view>
        <view class='fz_w_text mar_t20 mar_b20'>茶，让生活更美好！</view>
    </view>
</template>
<script>
import { get, post, u_post } from "@/request/api.js";
export default {
    name: "goodslist",
    components: {},
    props: {
        long: {
            type: Number,
            default: 2,
        },
        url: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            productList: [], //商品数据
        };
    },
    created() {
        this.loadData();
    },
    methods: {
        loadData() {
            post(this.url).then((res) => {
                if (res.status == 200) {
                    this.productList = res.goods;
                }
            });
        },
        // 跳转到商品详情页
        NavToGoodsDetail(id,type){
            uni.navigateTo({
                url:'/pages/product/p_details?id=' + id + '&type=' + type
            })
        },
    },
};
</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>