newyqg/pages/product/classify.vue

<template>
	<view class="container">
		<empty v-if="loaded === true && list.length === 0"></empty>
		<view class="hotgoods">
			<view class="hotgoods-item" v-for="item in list" :key="item.id" @click="navToDetailPage(item)">
				<view class="image-wrapper">
					<image :src="item.image" mode="scaleToFill"></image>
				</view>
				<view class="title clamp margin-c-20">{{ item.store_name }}</view>
				<view class="hot-price">
					<view class="price">
						<text class="font-size-sm">￥</text>
						{{ item.price }}
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import empty from '@/components/empty';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {
		groomList
	} from '@/api/product.js';
	export default {
		data() {
			return {
				list: [],
				bannerImg: [],
				type: 1, //1->置换
				loadingType: 'more',
				loaded:false,
				page: 1,
				limit:20
			};
		},
		components: {
			uniLoadMore,
			empty
		},
		onReachBottom() {
			this.loadData();
		},
		onLoad(option) {
			// 获取查询对象
			if (option.type) {
				this.type = option.type;
				uni.setNavigationBarTitle({
					title: option.type == 1? '置换': (option.type == 4? '随意嗨购':(option.type == 3? '大牌专区': ''))
				})
			}
			// 加载基础数据
			this.loadData();
		},
		methods: {
			navTo: function(ls) {
				uni.navigateTo({
					url: '/pages/product/product?id=' + ls.id
				});
			},
			// 请求载入数据
			async loadData() {
				let obj = this
				if(obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
					return
				}
				obj.loadingType = 'loading'
				groomList({
					page: obj.page,
					limit:obj.limit
				}, this.type)
					.then(({
						data
					}) => {
						// 保存轮播图
						obj.bannerImg = data.banner;
						// 保存商品信息
						obj.list = this.list.concat(data.list)
						obj.loaded = true
						obj.page++
						if(obj.limit == data.list.length) {
							obj.loadingType = 'more'
						}else {
							obj.loadingType = 'noMore'
						}
					})
					.catch(e => {
						console.log(e);
					});
			},
			// 轮播图跳转
			bannerNavToUrl(item) {
				// #ifdef H5
				if (item.wap_link.indexOf('http') > 0) {
					window.location.href = item.wap_link;
				}
				// #endif
				if (item.wap_link) {
					uni.navigateTo({
						url: item.wap_link
					});
				}
			},
			navToDetailPage(e) {
				uni.navigateTo({
					url: '/pages/product/product?id=' + e.id
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.carousel-section {
		padding: 0;

		.titleNview-placing {
			padding-top: 0;
			height: 0;
		}

		.swiper-dots {
			left: 45rpx;
			bottom: 40rpx;
		}

		.carousel {
			width: 100%;
			height: 360rpx;

			.carousel-item {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	// 中间标题样式
	.type-title-box {
		padding: 40rpx;

		.title-content {
			height: 100%;
			width: 200rpx;
			text-align: center;
			font-size: $font-lg;
			font-weight: 500;
			color: $font-color-dark;
		}

		.title-border {
			width: 250rpx;
			height: 2rpx;
			background-color: #e9e9e9;
		}
	}

	// 商品列表
	.goodsList-box {
		.goodsList-item {
			margin-bottom: 40rpx;
			background-color: #ffffff;
			padding: 30rpx;

			image {
				flex-shrink: 0;
				border-radius: $border-radius-sm;
				height: 180rpx;
				width: 180rpx;
			}

			.goodsList-content {
				margin-left: 20rpx;
				flex-grow: 1;
				height: 180rpx;
				position: relative;

				.title {
					font-size: $font-base;
					color: $font-color-dark;
					font-weight: 500;
				}

				.goods-money {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;

					.money-box {
						.money {
							font-size: $font-lg;
							color: $color-red;
							font-weight: bold;
						}

						.otMoney-box {
							font-size: $font-sm;

							.otMoney {
								color: $font-color-dark;
								padding-right: 20rpx;
							}

							.sales {
								color: $font-color-light;
							}
						}
					}

					.cart {
						border: 1px solid $color-red;
						color: $color-red;
						font-size: $font-base;
						font-weight: bold;
						border-radius: 99px;
						width: 55rpx;
						height: 55rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}

	.hotgoods {
		margin-top: 38rpx;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 0 32rpx;

		.hotgoods-item {
			width: 48%;
			background-color: #ffffff;
			border-radius: 12rpx;
			margin-bottom: 24rpx;

			&:nth-child(2n + 1) {
				margin-right: 24rpx;
			}

			.image-wrapper {
				width: 100%;
				height: 330rpx;
				// background: red;
				border-radius: 3px;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					opacity: 1;
					border-radius: 12rpx 12rpx 0 0;
				}
			}

			.title {
				font-size: $font-base;
				color: $font-color-dark;
				font-weight: bold;
				line-height: 80rpx;
			}

			.hot-price {
				display: flex;
				justify-content: space-between;
				padding: 0 16rpx 12rpx;

				.price {
					font-size: 36rpx;
					font-weight: bold;
					color: #FD3B39;
				}

				.cart-icon {
					image {
						width: 44rpx;
						height: 44rpx;
					}
				}
			}
		}
	}
</style>