sports-miniapp/src/pages/index/detail/components/venue.vue

<template>
	<view class="venue-card" v-for="(item, index) in listData" :key="index" @click="venuePreview(item)">
		<image :src="item.cover" mode=""></image>
		<view class="venue-info">
			<view class="info-title">
				<view class="title textHidden">{{ item.name }}</view>
				<view class="sales">年售{{ item.sales }}</view>
			</view>
			<view class="type">
				<text v-for="(category, index) in item.category" :key="index">{{ category }}</text>
			</view>
			<view class="price-info">
				<view class="price">
					<view class="">￥{{ item.sellingPrice||'0.00' }}</view>
					<!-- <view class="">￥{{ item.originalPrice }}</view> -->
				</view>
				<view class="price-btn">免费预约</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
interface Props {
	listData?: any;
}
const props = withDefaults(defineProps<Props>(), {
	listData: []
});

const venuePreview = (item: any) => {
	uni.navigateTo({
		url: '/pages/index/submitOrder/index?id=' + item.id
	})
}
</script>

<style lang="less" scoped>
.venue-card {
	padding: 20rpx;
	background: #FFFFFF;
	border-radius: 32rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
	margin-top: 20rpx;

	&>image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 32rpx;
	}

	.venue-info {
		width: 430rpx;

		.info-title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				width: 340rpx;
				font-weight: 800;
				font-size: 32rpx;
				color: #222222;
			}

			.sales {
				font-size: 22rpx;
				color: #AAAAAA;
			}
		}

		.type {
			margin-top: 16rpx;
			font-size: 24rpx;
			color: #AAAAAA;
		}

		.price-info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 16rpx;

			.price {
				display: flex;
				align-items: center;
				gap: 20rpx;

				&>view:nth-child(1) {
					font-weight: bold;
					font-size: 28rpx;
					color: #FB5B5B;
				}

				&>view:nth-child(2) {
					font-size: 22rpx;
					color: #AAAAAA;
					text-decoration: line-through;
				}
			}

			.price-btn {
				width: 152rpx;
				height: 48rpx;
				background: #C8FF0C;
				border-radius: 8rpx;
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
				text-align: center;
				line-height: 48rpx;
			}
		}
	}
}
</style>