xmhjc-applet/pages/market/base/rowList.vue

<template>
    <view>
        <view class="content">
            <view @click="linkDetails(item)" v-for="(item,index) in newsList" :key="index" class="box" >
                <view class="box_img">
                    <u--image radius='16rpx' width="343rpx" height="343rpx" :src="item.fileList[0].fileUrl" ></u--image>
                </view>
                <view class="box_right">
                    <view class="box_title">
                        {{item.title}}
                    </view>
                    <view class="box_num">
                        <view class="bn_left">
                            ￥{{item.price}}
                        </view>
                        <view class="bn_right">
                            {{item.views}}人看过
                        </view>
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>
<script>
export default {
    props: {
        listdata: {
            type: Array,
            default: [],
        },
},
watch:{
    listdata: {
        immediate: true,
        handler(val) {
           console.log(val);
           this.newsList = val
        },
    }
},
data() {
return {
    newsList:[]
}
},
onLoad(e) {
    
},
methods: {
    linkDetails(e){
        let id = e.id
        if (e?.productId) {
            id = e?.productId
        }
        uni.navigateTo({
             url: '/pages/market/ProductDetails?id=' + id
        });
    }
}
}
</script>

<style>
.content{
    width: 100vw;
    /* background-color: #FFFFFF; */
    padding: 30rpx 0 30rpx 0;
    display: flex;
    flex-wrap: wrap;
}
.box{
    width: 343rpx;
    height: 545rpx;
    background: #FFFFFF;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    opacity: 1;

    border: 6rpx solid white;

    margin: 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.box_img{
    width: 343rpx;
    height: 343rpx;
    border-radius: 16rpx;
    background-color: #999999;
}
.box_right{
    margin-left: 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.box_title{
    width: 343rpx;
    height: 80rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    margin: 24rpx 0;
    line-height: 40rpx;

    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
}
.box_num{
	width: 343rpx;
	display: flex;
	justify-content: space-between;
    align-items: center;
}
.bn_left{
	width: 106rpx;
	height: 38rpx;
	font-size: 28rpx;
	font-weight: bold;
	color: #F6514F;
}
.bn_right{
	width: 120rpx;
    height: 33rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
}
</style>