mycajt/pages/prefecture/voucher.vue

<template>
	<view class="container">
		<empty v-if="loaded === true && list.length === 0"></empty>
		<template>
			<view class="jg"></view>
			<view class="good-wrapper flex" v-for="(good ,index) in list" :key="good.id">
				<image :src="good.image" mode="" class="good-img"></image>
				<view class="good-info flex">
					<view class="tit clamp2">
						{{good.store_name  }}
					</view>
					<view class="price-wrap">
						<view class="old-price">
							<text class="old">￥{{good.ot_price}}</text>
							<template v-if="good.ot_price - good.price > 0">
								<!-- <image src="../../static/icon/down.png" mode=""></image> -->
								<!-- <text class="zj">直降{{good.ot_price - good.use_max_integral}}元</text> -->
							</template>
						</view>
						<view class="integral-wrap">
							<image src="../../static/icon/jf.png" mode=""></image>
							<text class="price">{{good.price}}</text>
						</view>
					</view>
					<view class="btn" @click="nav(good.id)">
						立即购买
					</view>
				</view>
			</view>
			<view class="jg"></view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</template>
	</view>
</template>

<script>
import { getProducts } from '@/api/product.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';

export default {
	components: {
		uniLoadMore,
		empty
	},
	filters: {
		toFixed: function(value) {
			// 判断是否为整数
			if (value % 1 == 0) {
				return value;
			} else {
				return value.toFixed(2);
			}
		}
	},
	data() {
		return {
			list: [],
			page: 1,
			limit: 10,
			loadingType: 'more',
			loaded: false,
		};
	},
	onLoad(option) {
		// 加载基础数据
		this.loadData();
	},
	onReachBottom() {
		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
			});
		},
		// 请求载入数据
		loadData() {
			let obj = this
			if(obj.loadingType == 'noMore' || obj.loadingType == 'loading') {
				return
			}
			obj.loadingType = 'loading'
			getProducts({
				page:obj.page,
				limit: obj.limit,
				is_consumer: 1,
			})
				.then(({ data }) => {
					console.log(data)
					// 保存商品信息
					let list = []
					list = data.map(e => {
						e.price = Number(e.price);
						e.ot_price = Number(e.ot_price);
						return e;
					});
					obj.list = obj.list.concat(list)
					obj.page++
					if(obj.limit == data.length) {
						obj.loadingType = 'more'
					}else {
						obj.loadingType = 'noMore'
					}
					obj.loaded = true
				})
				.catch(e => {
					console.log(e);
				});
		},
		nav(id) {
			uni.navigateTo({
				url:'/pages/prefecture/detail?id=' + id
			})
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background: $page-color-base;
}
.jg {
	height: 20rpx;
}
.good-wrapper {
	width: 690rpx;
	height: 276rpx;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 0 auto 20rpx;
	// &:last-of-type {
	// 	margin-bottom: 0;
	// }
	background: #FFFFFF;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 10rpx;
	padding: 20rpx 25rpx 20rpx 15rpx;
	.good-img {
		flex-shrink: 0;
		background-color: #eee;
		width: 236rpx;
		height: 236rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	.good-info {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		height: 100%;
		position: relative;
		.tit {
			padding-top: 10rpx;
			padding-right: 15rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
		}
		.btn {
			width: 137rpx;
			line-height: 52rpx;
			background: linear-gradient(0deg, #52C696 0%, #52C696 100%);
			border-radius: 26rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			text-align: center;
			color: #FFFFFF;
			position: absolute;
			bottom: 0;
			right: 0;
		}
		.price-wrap {
			.old-price {
				
				.old {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					text-decoration: line-through;
					color: #999999;
				}
				image {
					display: inline-block;
					width: 14rpx;
					height: 20rpx;
					margin: 0 6rpx 0 10rpx;
				}
				.zj {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #B59467;
				}
			}
			.integral-wrap {
				display: flex;
				justify-content: flex-start;
				padding-top: 14rpx;
				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 8rpx;
				}
				.price {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF6F0F;
					line-height: 40rpx;
				}
			}
		}
		
	}
}
</style>