xmhjc-applet/pages/market/base/columnList.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="180rpx" height="180rpx" :src="item.fileList[0].fileUrl" ></u--image>
                </view>
                <view class="box_right">
                    <view class="box_title">
                        {{item.title}}
                    </view>
                    <view class="box_c">
                        <text>{{ item.subTitle }}</text>
                    </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=' + e.id
        });
    }
}
}
</script>

<style>
.content{
    width: 100vw;
    background-color: #FFFFFF;
    padding: 30rpx 0 30rpx 0;
}
.box{
    width: 702rpx;
    height: 244rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;

    display: flex;
    margin: 20rpx auto;
    justify-content: space-around;
    align-items: center;
}
.box_img{
    width: 180rpx;
    height: 180rpx;
    border-radius: 16rpx;
    background-color: #999999;
}
.box_right{
    width: 448rpx;
    height: 180rpx;
    margin-left: 10rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.box_title{
    width: 440rpx;
    height: 40rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    line-height: 40rpx;

    display: -webkit-box;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:1;
}
.box_c{
    width: 400rpx;
    height: 33rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    line-height: 36rpx;

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