point-app/pagesMessage/message/components/goods_1.vue

<template>
	<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
		<view class="list-scroll-view">
			<view class="goods">
				<view class="goods_1">
					<view class="list" v-for="(item,index) in marketList" :key="index">
						<image class="image" :src="item.file&&item.file.length>0?item.file[0].url:''" mode="">
						</image>
						<view class="name textOver">
							{{item.name}}
						</view>
						<view class="other">
							<view class="money">
								<view class="money_1">
									<text>¥</text><text>{{item.sell_money||0}}</text>
								</view>
								<view class="money_2">
									<text>¥</text><text>{{item.flow_money||0}}</text>
								</view>
							</view>
						</view>
						<view class="other" v-if="item.leader_price">
							<view class="leader">
								<text>会员价</text><text>¥</text><text>{{item.leader_price||0}}</text>
							</view>
						</view>
						<view class="other" v-if="item.p_act">
							<text class="label" v-for="(tag,index) in item.p_act" :key="index">{{tag}}</text>
						</view>
						<view class="button" @tap="toSend(item)">
							<text>发送</text>
						</view>
						<view class="acttags">
							<text v-for="(i,indexx) in item.actTagsShow" :key="indexx">{{i.label}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			marketList: {
				type: Array
			},
		},
		data() {
			return {};
		},
		methods: {
			// 分页
			toPage(e) {
				const that = this;
				that.$emit('toPage')
			},
			// 发送
			toSend(e) {
				const that = this;
				that.$emit('toSend', e)
			}
		}
	}
</script>

<style lang="scss">
	.goods {
		display: flex;
		flex-direction: column;
		background-color: var(--f2Color);
		padding: 2vw 0;

		.goods_1 {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 0 2vw;

			.list {
				// break-inside: avoid;
				position: relative;
				width: 41vw;
				background-color: var(--fffColor);
				padding: 2vw;
				margin: 0 0 2vw 0;
				border-radius: 10px;

				.image {
					width: 100%;
					height: 40vw;
				}

				.name {
					font-size: var(--font14Size);
				}

				.other {
					display: flex;
					flex-direction: row;
					padding: 1vw 0 0 0;

					.money {
						display: flex;

						.money_1 {
							color: var(--fFB1Color);
							font-size: 12px;

							text:last-child {
								font-size: 16px;
								padding: 0 0 0 1vw;
							}
						}

						.money_2 {
							font-size: 12px;
							margin: 0 0 0 2vw;
							color: var(--f99Color);

							text {
								text-decoration: line-through;
							}

							text:last-child {
								font-size: 16px;
								padding: 0 0 0 1vw;
							}
						}
					}

					.label {
						font-size: 12px;
						color: #FFA500;
						border: 1px solid #FFA500;
						border-radius: 5px;
						padding: 0 1vw;
						margin: 0 1vw 0 0;
					}

					.leader {
						font-size: 12px;
						text-align: center;
						color: #23B67A;

						text:last-child {
							font-size: 16px;
							padding: 0 0 0 1vw;
						}
					}
				}

				.button {
					text-align: right;
					margin: 1vw 0;

					text {
						font-size: 12px;
						padding: 10rpx 20rpx;
						border-radius: 20rpx;
						color: #ffffff;
						background-color: var(--fFB1Color);
					}
				}

				.acttags {
					position: absolute;
					top: 2vw;
					width: 93%;

					text {
						display: inline-block;
						background-color: var(--fFB1Color);
						color: #fff;
						border-radius: 1vw;
						padding: 0.5vw;
						font-size: 12px;

						margin: 0 1vw 0 0;
					}
				}
			}
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}
</style>