xpl/pages/product/ping.vue

<template>
	<view class="center">
		<image class="logo-img" src="../../static/img/img01.png"></image>
		<view class="goods-list">
			<view v-for="(item, index) in producList" :key="index" class="guess-item">
				<image :src="item.background_image"></image>
				<view class="guess-box">
					<view class="title clamp2">
						<view class="tuanF">
							<view class="tuan">
								<image class="tuan-image" src="../../static/img/fire.png" mode=""></image>
								<view class="tuan-font">11人团1人中</view>
							</view>
						</view>
						{{ item.name }}
					</view>
					<view class="price-box flex">
						<view class="jiang">门票费：{{item.ticket}} {{item.ticket_money_type}}</view>
					</view>
					<view class="price">{{ item.cost_money_type === item.cost_2_money_type? item.cost*1+item.cost_money_type : item.cost*1+item.cost_money_type + '/' +item.cost_2*1 + item.cost_2_money_type}}</view>
					<view class="btn" @click="navToDetailPage(item)">马上拼</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { lala, lalaDetial } from '@/api/product.js';
export default {
	data() {
		return {
			producList: []
		};
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		navToDetailPage(item) {
			uni.navigateTo({
				url: '/pages/product/pingDetails?id=' + item.id
			});
		},
		loadData() {
			lala({}).then(({data}) => {
				console.log(data,'123456');
				this.producList = data.list.data
			});
		}
	}
};
</script>

<style lang="scss">
.center,
page {
	height: 100%;
	background: #f8f6f6;
}
.logo-img {
	margin: 20rpx;
	width: 710rpx;
	height: 268rpx;
}
/* 商品列表 */
.goods-list {
	display: flex;
	flex-wrap: wrap;
	padding: 0 30rpx;
	background: #fff;
	.guess-item {
		display: flex;
		width: 710rpx;
		height: 290rpx;
		background: #ffffff;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 10rpx;
		padding: 15rpx;
		margin: 20rpx auto 0;
		position: relative;
		image {
			background: #000000;
			width: 260rpx;
			height: 260rpx;
			border-radius: 10rpx;
		}
		.guess-box {
			padding: 12rpx 0 0 24rpx;
			width: 436rpx;
			.title {
				font-size: 30rpx;
				padding-left: 4rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				width: 368rpx;
				line-height: 36rpx;
				.tuanF {
					display: inline-block;
					margin-right: 4rpx;
					position: relative;
					top: -6rpx;
					line-height: 1;
					.tuan {
						display: flex;
						align-items: center;
						padding: 10rpx;
						height: 36rpx;
						background: #ffebe9;
						border-radius: 18rpx;
						.tuan-image {
							width: 18rpx;
							height: 18rpx;
						}
						.tuan-font {
							display: inline;
							font-size: 20rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #ff1135;
							margin-left: 2rpx;
						}
					}
				}
			}

			.price-box {
				margin-top: 70rpx;
				justify-content: flex-start;
				.jiang {
					padding-left: 2rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #b59467;
				}
			}
			.price {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ff1135;
			}
			.btn {
				width: 137rpx;
				height: 56rpx;
				background: linear-gradient(0deg, #2e58ff, #32c6ff);
				border-radius: 28rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 56rpx;
				text-align: center;
				position: absolute;
				bottom: 25rpx;
				right: 25rpx;
			}
		}
	}
}
</style>