jiaoyi-uni2/奥莱优品/pages/goods/list.vue

<template>
	<view>
		<scroll-view class="home-goods" scroll-y scroll-with-animation @scrolltoupper="scrolltoupper" @scrolltolower="scrolltolower" upper-threshold="80">
			<view class="goods-list">
				<view class="list-item" v-for="(item,index) in goodsData" :key="index" @click="toDetail(item.goods_id)">
					<view class="image">
						<image :src="item.image_list[0].url"></image>
						<text>{{$dialog.disFormat(item.price,item.line_price)}}折</text>
					</view>
					<view class="info">
						<view class="title" v-if="item.is_new==1">{{item.price}}元代{{item.line_price}}元商场权益券{{item.product_name}}</view>
						<view class="title" v-else>{{item.product_name}}</view>
						<view class="tags"></view>
						<view class="tags">已售{{item.sale_stock}}</view>
						<view class="price-btn">
							<view class="price">{{$dialog.formatMoney(item.price)}}</view>
							<view class="price-line">{{$dialog.formatMoney(item.line_price)}}</view>
							<view class="buy-btn">立即抢购</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
var app;
export default {
	data() {
		return {
			storeId:"",
			goodsData:[],
			orderData:{
				size:10,
				page:1,
				loading:false,
				isDone:false
			},
		}
	},
	onLoad() {
		app = this;
		app.getGoods()
	},
	methods: {
		scrolltoupper(){},
		scrolltolower(e){
			if (app.orderData.isDone || app.goodsData.length == 0) return ;
			app.getGoods()
		},
		toDetail(id){
			uni.navigateTo({
				url:`/pages/goods/detail?goods=${id}`
			})
		},
		async getGoods(){
			var formData = {};
			const tokenPoi = uni.getStorageSync("contact");
			formData.store = tokenPoi.poi_id;
			formData.page = app.orderData.page;
			formData.size = app.orderData.size;
			var resp = await app.$api.home.goods.get(formData);
			if (resp.code !== 200) {
				return app.$dialog.showSuccess(resp.msg)
			}
			app.isLogin = true;
			if (resp.data.rows.length > 0) {
				app.orderData.page ++;
				app.goodsData = [...app.goodsData,...resp.data.rows];
			} else {
				app.orderData.isDone = true;
			}
		},
	}
}
</script>

<style lang="scss" scoped>

.home-goods{
	width: 95%;
	margin: 20rpx auto;
	.list-item{
		display: flex;
		align-items: center;
		gap: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		.info{
			flex: 1 1 0%;
			overflow: hidden;
			.title{
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 32rpx;
				color: #333;
				font-weight: 900;
			}
			.tags {
				color: #94a3b8;
				font-size: 24rpx;
				margin: 10rpx 0;
			}
			.price-btn{
				display: flex;
				align-items: center;
				gap: 20rpx;
				align-items: flex-end;
				.price{
					font-size: 30rpx;
					color: $main-color;
					font-weight: 900;
				}
				.price-line {
					color: #999999;font-size: 24rpx;text-decoration-line: line-through;
				}
				.buy-btn{
					margin-left: auto;
					margin-right: 0;
					background-color: $main-color;
					color: #fff;
					border-radius: 30rpx;
					font-size: 28rpx;
					padding: 10rpx 20rpx;
				}
			}
		}
		.image {
			height: 180rpx;
			overflow: hidden;display: flex;align-items: center;min-width: 180rpx;
			position: relative;
			text {
				background-color: $main-color;
				color: #fff;
				position: absolute;
				top: 10rpx;
				left: 10rpx;
				font-size: 24rpx;
				border-radius: 30rpx;
				padding: 10rpx 15rpx;
			}
			image {
				width: 180rpx;
				border-radius: 10upx;
				height: 100%;
			}
		}
	}
	.goods-title{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.title-left{
			.name {
				font-size: 34rpx;
				color: #333;
				font-weight: 900;
			}
			text {
				color: $main-color;
				font-weight: 700;
				font-size: 24rpx;
			}
		}
		.title-more{
			display: flex;
			align-items: center;
			color: #94a3b8;
			font-size: 28rpx;
			image {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}
}
</style>