xpl/pages/index/recommend.vue

<template>
	<view class="content">
		<view class="recommend">
			<view class="commodity-item" v-for="(item, index) in recommendList" @click="navToDetailPages(item)">
				<view class="commodity-prc">
					<image :src="item.image" mode=""></image>
					<!-- <view class="fanli" v-if="item.type == 1">
						<view class="fanli-bg"><image src="../../static/img/index-fanl.png" mode=""></image></view>
						<view class="fanli-font flex">
							<view class="font-left">购物最高可返消费金额的</view>
							<view class="font-right">10<text>%</text></view>
						</view>
					</view> -->
				</view>
				<view class="commodity-info">
					<view class="commodity-name clamp">{{ item.store_name }}</view>
					<view class="commodity-systom clamp">{{ item.systom }}</view>
					<view class="commodity-price">
						￥{{ item.price }}
						<text>￥{{ item.ot_price }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { productIndexs } from '@/api/index.js';
export default {
	data() {
		return {
			recommendList: [],
			id: ''
		};
	},
	onLoad(option) {
		if (option.type) {
			this.id = option.type;
		}
		this.loadData();
	},
	methods: {
		// 获取首页数据
		loadData() {
			productIndexs({}, this.id).then(({ data }) => {
				this.recommendList = data.list; // 为你推荐
				console.log('为你推荐', this.recommendList);
			});
		},
		// 跳转热销商品
		navToDetailPage(item) {
			uni.navigateTo({
				url: '/pages/product/product?id=' + item.id
			});
		},
		navToDetailPages(e) {
			uni.navigateTo({
				url: '/pages/product/product?id=' + e.id
			});
		}
	}
};
</script>

<style lang="scss">
.recommend {
	padding: 36rpx 20rpx;
	margin-top: 20rpx;
	display: flex;
	flex-wrap: wrap;
	background-color: #FFFFFF;
}
.commodity-item {
	width: 334rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 10rpx;
	margin: 0 10rpx;
	.commodity-prc {
		width: 330rpx;
		height: 330rpx;
		border-radius: 10rpx;
		position: relative;
		image {
			border-radius: 10rpx;
			width: 100%;
			height: 100%;
		}
		.fanli {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 344rpx;
			height: 96rpx;
			.fanli-bg {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 344rpx;
				height: 96rpx;
			}
			.fanli-font {
				position: relative;
				z-index: 10;
				color: #ffffff;
				height: 96rpx;
				align-items: flex-end;
				padding: 36rpx 10rpx 10rpx;
				.font-left {
					width: 226px;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
				}
				.font-right {
					font-size: 62rpx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #ffffff;
					text {
						font-size: 26rpx;
					}
				}
			}
		}
	}
	.commodity-info {
		padding: 28rpx 20rpx 35rpx 24rpx;
		.commodity-name {
			width: 100%;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.commodity-systom {
			margin-top: 16rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
		.commodity-price {
			margin-top: 34rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #e83f30;
			text {
				display: inline-block;
				padding-left: 6rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				text-decoration: line-through;
				color: #999999;
			}
		}
	}
}
</style>