xpl/pages/index/duihuanMore.vue

<template>
	<view class="content">
		<view class="recommend">
			<view class="recommend-item" v-for="item in recommendList" :key="item.id">
				<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
				<view class="info-wrapper">
					<text class="title">{{ item.title }}</text>
					<view class="price-box">
						<view class="price-left">
							<view class="price">
								<view class="">{{ item.money * 1 }}</view>
								<view class="ot_price" >
									<view class="price-tip">{{ item.money_type }}</view>
									<view class="price-tip" v-if="item.price != 0">+￥{{ item.price }}</view>
								</view>
							</view>
						</view>
						<view class="price-right" @click="navToDetailPage(item)">
							<view class="buyNow">马上购</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
	</view>
</template>

<script>
import { dhList } from '@/api/user.js';
import uniLoadMore from '@/uview-ui/components/u-loadmore/u-loadmore.vue';
export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			recommendList: [],
			type: '',
			page: 1,
			limit: 10,
			loadingType: 'more'
		};
	},
	//监听页面是否滚动到底部加载更多
	onReachBottom() {
		this.loadData();
	},
	onLoad(option) {
		if (option.type) {
			this.type = option.type;
		}
		this.loadData();
	},
	methods: {
		// 获取首页数据
		loadData() {
			const obj = this
			if (obj.loadingType == 'nomore' || obj.loadingType == 'loading') {
				return;
			}
			obj.loadingType == 'loading';
			dhList({ page: obj.page, limit: obj.limit, money_type: this.type }).then(({ data }) => {
				this.recommendList = data; // 为你推荐
				obj.page++;
				if (data.length == obj.limit) {
					obj.loadingType == 'more';
				} else {
					obj.loadingType == 'nomore';
				}
			});
		},
		// 跳转热销商品
		navToDetailPage(item){
			uni.navigateTo({
				url: '/pages/product/productDuhuan?id=' + item.id
			});
		},
	}
};
</script>

<style lang="scss">
.content {
	width: 100%;
	height: 100%;
}
.recommend {
	padding: 24rpx;
	.recommend-item {
		background-color: #FFFFFF;
		display: flex;
		width: 100%;
		padding: 24rpx;
		border-bottom: 1rpx solid #f0f0f0;
		&:nth-last-child(1) {
			border-bottom: none;
		}
	}
}
.image-wrapper {
	width: 168rpx;
	height: 168rpx;
	border-radius: 3px;
	image {
		width: 168rpx;
		height: 168rpx;
		opacity: 1;
	}
}
.info-wrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
	margin-left: 20rpx;
}
.title {
	font-size: 32rpx;
	color: $font-color-dark;
	word-break: break-all;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.price-box {
	margin-top: 10rpx;
	display: flex;
	justify-content: space-between;
	.price-left {
		display: flex;
		flex-direction: column;
		.price {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 60rpx;
			height: 56rpx;
			line-height: 30rpx;
			color: #ff0000;
			font-size: 56rpx;
			font-weight: 700;
			.price-tip {
				font-size: 28rpx;
			}
		}
		.ot_price {
			margin-left: 4rpx;
			font-size: 28rpx;
			color: #ff0000;
			.price-tip {
				font-size: 22rpx;
			}
		}
	}
	.price-right {
		display: flex;
		flex-direction: column;
		.people {
			margin-top: 32rpx;
			font-weight: 700;
			color: #999999;
			font-size: 22rpx;
			text-align: right;
			margin-right: 4rpx;
		}
		.buyNow {
			margin-top: 68rpx;
			background: linear-gradient(180deg, #fd4646, #ff3535);
			border-radius: 26rpx;
			padding: 6rpx 18rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #ffffff;
		}
	}
}
</style>