hyshop/pages/money/vipShop.vue

<template>
	<view>
		<view class="jx-box-content" v-for="item in vipList" @click="navToDetailPage(item)">
			<view class="content-left">
				<image :src=item.image mode=""></image>
			</view>
			<view class="content-right">
				<view class="shop-name">
					{{item.store_name}}
				</view>
				<view class="shop-content">
					<view class="shop-content-left">
						<view class="price-box">
							<view class="yuan-price">
								¥{{item.ot_price}}
							</view>
							<image src="../../static/sy/sy06.png" mode=""></image>
							<view class="j-price">
								直降{{item.ot_price*1-item.price*1}}元
							</view>
						</view>
						<view class="price-x">
							¥{{item.price}}
						</view>
					</view>
					<view class="shop-content-right" >
						立即购买
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from '@/uview-ui/components/u-loadmore/u-loadmore.vue';
	import {getVip} from '@/api/index.js';
	export default {
		components:{
			uniLoadMore
		},
		data() {
			return {
				vipList:[],//商品列表
				page:1,
				limit:10,
				loadingType:'more'
			};
		},
		onLoad() {
		    this.getVipList()
		},
		onReachBottom() {
		    this.getVipList()
		},
		methods:{
			navToDetailPage(item) {
				let id = item.id;
				uni.navigateTo({
					url: '/pages/product/product?id=' + id +'&isVip='+0
				});
			},
			getVipList(){
				let obj = this
				if(obj.loadingType === 'loading' || obj.loadingType === 'noMore'){
					return //如果正在加载中,防止重复加载
				}
				obj.loadingType = 'loading'
				getVip(
				{   page:obj.page,
					limit:obj.limit,
					is_vip:3
				}).then(res=>{
					
					 res.data.forEach(e=>{
						e.isVip = e.store_type? "3" : "0"
					 })
					console.log(res.data,'vip商品');
					 if(res.data.length>0){
						obj.vipList = obj.vipList.concat(res.data)
						console.log(obj.vipList,'vip');
						obj.page++
					 }
					if(obj.limit == res.data.length){
						console.log("haiyou");
						obj.loadingType = 'more'
					}else{
						console.log("wule");
						obj.loadingType = 'noMore'
					}
					console.log(obj.loadingType,"12345789");
					uni.hideLoading()
					this.$set(obj.vipList,'loaded',true)
				})
				
				
			}
		}
	}
</script>

<style lang="scss">
	.jx-box-content {
		display: flex;
		.content-left {
			margin: 20rpx 15rpx;
			width: 236rpx;
			height: 236rpx;
			background: #E2E2E2;
			border-radius: 10rpx;
			image {
				width: 100%;
				height:100%;
			}
		}
	

		.content-right {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			
			.shop-name {
				width: 382rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				
				overflow: hidden;
				text-overflow: ellipsis;
				display:-webkit-box;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:2;
			}

			.shop-content {
				width: 455rpx;
				display: flex;
				justify-content: space-between;
				
				.shop-content-left {
					display: flex;
					flex-direction: column;
					
					
					
					.price-box {
						display: flex;
						align-items: center;
						.yuan-price {
							font-size: 26rpx;
							font-weight: 500;
							text-decoration: line-through;
							color: #999999;
						}

						image {
							margin: 0 10rpx;
							width: 16rpx;
							height: 18rpx;
						}

						.j-price {
							font-size: 24rpx;
							font-weight: bold;
							color: #B59467;
						}
					}

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

				.shop-content-right {
					margin-top:20rpx ;
					align-items: center;
					text-align: center;
					width: 137rpx;
					height: 52rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #fff;
					background: #f75022;
					border-radius: 26rpx;
					line-height: 52rpx;
				}
			}
		}
	}
</style>