xiyi/pages/product/classify.vue

<template>
	<view class="container">
		<!-- 头部轮播 -->
		<!-- <view class="carousel-section">
			<swiper class="carousel" autoplay="true" duration="400" interval="5000">
				<swiper-item v-for="(item, index) in bannerImg" :key="index" class="carousel-item" @click="bannerNavToUrl(item)">
					<image :src="item.img" mode=" scaleToFill" />
				</swiper-item>
			</swiper>
		</view> -->
		<!-- <view class="type-title-box flex">
			<view class="title-border"></view>
			<view class="title-content">
				<text v-if="type == 1">精品推荐</text>
				<text v-if="type == 2">热门榜单</text>
				<text v-if="type == 3">首发新品</text>
				<text v-if="type == 4">促销单品</text>
				<text v-if="type == 5">积分商品</text>
				<text v-if="type == 6">礼包商品</text>
			</view>
			<view class="title-border"></view>
		</view> -->

		<view class="goodsList-box flex">
			<view class="goodsList-item" :key="ind" v-for="(ls, ind) in list" @click="navTo(ls)">
				<image :src="ls.image" mode=" scaleToFill"></image>
				<view class="goodsList-content">
					<view class="title clamp2">
						<text>{{ ls.store_name }}</text>
					</view>
					<view class="goods-money">
						<view class="money-box">
							<view class="money">
								<text class="font-size-sm" v-if="type != 10">￥</text>
								{{ ls.price }}
								<text class="font-size-sm " v-if="ls.unit_name">/{{ls.unit_name}}</text>
								<template v-if="type==5">
									<text class="font-size-sm">+</text>
									<text class="font-size-sm">{{ ls.min_integral }}积分</text>
								</template>
								<template v-if="type==10">
									<text class="font-size-sm">积分</text>
								</template>
								<text  class="otMoney" v-else>{{ls.ot_price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		groomList,
		getProducts
	} from '@/api/product.js';
	export default {
		data() {
			return {
				list: [],
				bannerImg: [],
				page: 1,
				limit: 10,
			};
		},
		onLoad(option) {
			// 获取查询对象
			this.type = option.type;
			// 加载基础数据
			this.loadData();
		},
		methods: {
			navTo: function(ls) {
				uni.navigateTo({
					url: '/pages/product/product?id=' + ls.id
				});
			},
			// 请求载入数据
			async loadData() {
				
				if(this.type == 10 || this.type == 11) {
					getProducts({
						sid: this.type == 10 ? 54: 56,
						page: 1,
						limit: 1000
					}, this.type)
						.then(({
							data
						}) => {
							// 保存轮播图
							
							// 保存商品信息
							this.list = data.map((res) => {
								res.price = +res.price;
								return res
							});
						})
						.catch(e => {
							console.log(e);
						});
				}else {
					groomList({}, this.type)
						.then(({
							data
						}) => {
							// 保存轮播图
							this.bannerImg = data.banner;
							// 保存商品信息
							this.list = data.list.map((res) => {
								res.price = +res.price;
								res.ot_price = +res.ot_price;
								if (res.min_integral) {
									res.min_integral = +res.min_integral;
								}
								return res
							});
						})
						.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
					});
				}
			}
		}
	};
</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 {
		padding: 30rpx;
		flex-wrap: wrap;

		.goodsList-item {
			margin-bottom: 40rpx;
			background-color: #ffffff;
			border-radius: 10rpx;
			width: 330rpx;

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

			.goodsList-content {
				flex-grow: 1;
				position: relative;
				padding: 20rpx;

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

				.goods-money {
					.money-box {
						.money {
							font-size: $font-lg;
							color: $color-red;
							font-weight: bold;
						}
						.otMoney {
							color: $font-color-disabled;
							padding-right: 20rpx;
							font-size: 24rpx;
							text-decoration:line-through;
							padding-left: 10rpx;;
						}
					}

					.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;
					}
				}
			}
		}
	}
</style>