popularize-front/components/travel/travelList.vue

<template>
	<view>
		<view class="info cardStyle_"
		v-for="(item, index) in cardListData" 
		:key="index" @click="toDetail(item)">
		    <view class="left">
		        <image :src="item.image && item.image.split(',')[0]" mode="aspectFill">
		    </view>
		    <view class="right">
		        <view class="detailed">
		            <view class="title">{{item.title}}</view>
		            <view class="date">{{ $dayjs(item.startTime).format('YYYY-MM-DD') }}</view>
		            <view class="address">{{item.address}}</view>
		        </view>
		        <view class="data">
		            <text>¥{{item.price}}</text>
		            <text>{{item.num}}/{{item.sum}}</text>
		            <text class="btn" v-if="item.state == 0">报名中</text>
					<text class="btn-2" v-if="item.state == 1">已结束</text>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"travelList",
		props : ['cardListData'],
		data() {
			return {
				
			};
		},
		methods : {
			toDetail({ id }) {
				uni.navigateTo({
					url:`/pages_order/lvyou-detail?travelId=${id}`
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.info {
	position: relative;
	margin: 20rpx 0;
	padding: 35rpx 0 35rpx 24rpx;
	border-radius: 26rpx;
	.right {
		.data {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.btn {
				background: #381615;
				color: $uni-color-primary;
				padding: 10rpx 40rpx;
				border-radius: 30rpx 0px 0px 30rpx;
			}
			.btn-2 {
				background: #333;
				color: #999;
				padding: 10rpx 40rpx;
				border-radius: 30rpx 0px 0px 30rpx;
			}
		}
	}
}
</style>