myc/pages/integral/index.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="goodsList-box">
			<view class="goodsList-item" :key="ind" v-for="(ls, ind) in list" @click="navToDetailPage(ls)">
				<navigator :url="'/pages/product/product?id=' + ls.id">
					<image :src="ls.image" mode=" scaleToFill"></image>
					<view class="goodsList-content">
						<view class="title clamp">
							<text>{{ ls.store_name }}</text>
						</view>
						<view class="goods-money flex">
							<view class="money-box flex">
								<view v-if="ls.use_max_integral != 0">
									<text class="money">{{ ls.use_max_integral }}</text>
									<text class="font-size-sm">积分</text>
								</view>
								<view v-else>
									<text class="money">￥{{ ls.price }}</text>
								</view>
								<view class="otMoney-box" v-if="ls.use_max_integral != 0">
									<text class="otMoney" v-if="ls.price - ls.use_max_integral > 0">+￥{{ (ls.price - ls.use_max_integral) | toFixed }}</text>
								</view>
							</view>
							<view class="otprice">
								<text>￥{{ ls.price }}</text>
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
import { groomList } from '@/api/product.js';
export default {
	filters: {
		toFixed: function(value) {
			// 判断是否为整数
			if (value % 1 == 0) {
				return value;
			} else {
				return value.toFixed(2);
			}
		}
	},
	data() {
		return {
			list: [],
			bannerImg: []
		};
	},
	onLoad(option) {
		// 加载基础数据
		this.loadData();
	},
	methods: {
		//详情页
		navToDetailPage(item) {
			uni.navigateTo({
				url: '/pages/product/product?id=' + item.id
			});
		},
		// 轮播图跳转
		bannerNavToUrl(item) {
			// #ifdef H5
			if (item.wap_link.indexOf('http') > 0) {
				window.location.href = item.wap_link;
			}
			// #endif
			//测试数据没有写id，用title代替
			uni.navigateTo({
				url: item.wap_link
			});
		},
		// 请求载入数据
		async loadData() {
			groomList({}, 5)
				.then(({ data }) => {
					// 保存轮播图
					this.bannerImg = data.banner;
					// 保存商品信息
					this.list = data.list.map(e => {
						e.price = Number(e.price);
						e.ot_price = Number(e.ot_price);
						return e;
					});
				})
				.catch(e => {
					console.log(e);
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
}
.carousel-section {
	margin-bottom: 30rpx;
	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%;
		}
	}
}
// 商品列表
.goodsList-box {
	padding: 0 25rpx;
	display: flex;
	flex-wrap: wrap;
	.goodsList-item {
		width: 340rpx;
		margin-bottom: 30rpx;
		background-color: #ffffff;
		border-radius: $border-radius-sm;
		image {
			flex-shrink: 0;
			height: 340rpx;
			width: 340rpx;
		}
		&:nth-child(2n + 1) {
			margin-right: 20rpx;
		}
		.goodsList-content {
			padding-left: 20rpx;
			flex-grow: 1;
			padding: 20rpx;
			.title {
				font-size: $font-base;
				color: $font-color-dark;
				font-weight: 500;
			}
			.goods-money {
				line-height: 1;
				margin-top: 10rpx;
				font-size: $font-sm - 4rpx;
				.money {
					color: $color-red;
					font-weight: bold;
				}
				.font-size-sm {
					color: $font-color-light;
				}
				.otMoney {
					background-color: #ffeae2;
					color: $color-red;
				}
				.otprice {
					text-decoration: line-through;
					color: $font-color-light;
				}
			}
		}
	}
}
</style>