discounts-minapp/integral/shop.vue

<template>
	<view class="integral-shop">
		<!-- 筛选器 -->
		<cc-dropDownMenu :titleArr="titleArr" :dropArr="dropArr" @finishDropClick="finishClick"></cc-dropDownMenu>

		<zs-list class="list" mt="100rpx" @load="loadMore" :status="status">
			<view class="item" v-for="(item,index) in list" :key="index">
				<image :src="item.src" mode="aspectFill" class="icon"></image>
				<view class="info">
					<view class="title">
						{{item.title}}
					</view>
					<view class="desc">
						{{item.desc || '非常好吃且美味的小吃'}}
					</view>
					<view class="sale-box">
						<view class="price">
							{{item.score}}分
						</view>
						<view class="exchange-btn">
							兑换
						</view>
					</view>
				</view>
			</view>
		</zs-list>
		
		<zs-skeleton :loading="loading" type="integralShop"></zs-skeleton>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:false,
				titleArr: ['积分', '品牌', '分类'],
				dropArr: [
					// 距离
					[{
							text: '积分',
							value: ""
						},
						{
							text: '金币',
							value: "440103"
						}
					],
					// 类型
					[{
							text: '宅小鹿',
							value: "10000"
						},
						{
							text: '麻辣王子',
							value: "11000"
						}
					],

					// 类型
					[{
							text: '零食',
							value: "0-40"
						},
						{
							text: '肉类',
							value: "40-60"
						}
					],
				],
				filterResultData: [],
				list:[
					{
						src:'http://t14.baidu.com/it/u=1060435979,471196002&fm=224&app=112&f=JPEG?w=500&h=500',
						title:'宅小鹿芒果干',
						score:6000,
						num:120
					},
					{
						src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi2%2F2207895997260%2FO1CN01Ogi5ab23V8BwbWSzn_%21%210-item_pic.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695440007&t=24ed88d94f8a1820a4411241c3bd5940',
						title:'麻辣王子地道辣条',
						score:6000,
						num:120
					},
					{
						src:'https://img2.baidu.com/it/u=248724739,3924050991&fm=253&fmt=auto&app=138&f=JPEG?w=616&h=500',
						title:'良品铺子酥脆薄饼',
						score:6000,
						num:120
					},
					{
						src:'https://alipic.lanhuapp.com/XDSlicePNGMAX5d129d495d8809b39d3bf35bf8bfabb798998037de72617952986550d6581788.png',
						title:'良品铺子猪肉脯',
						score:6000,
						num:120
					},
					{
						src:'https://alipic.lanhuapp.com/XDSlicePNGMAX5d129d495d8809b39d3bf35bf8bfabb798998037de72617952986550d6581788.png',
						title:'良品铺子猪肉脯',
						score:6000,
						num:120
					}
				],
				status:'more',//加载状态
			}
		},
		methods: {
			finishClick(resultData) {
				this.filterResultData = resultData;
				// uni.showModal({
				// 	title: '温馨提示',
				// 	content: '筛选数据 = ' + JSON.stringify(resultData)
				// })
			},
			loadMore(){
				this.status = 'loading'
					setTimeout(()=>{
						this.status = 'more'
						this.list.push({
						src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fbao%2Fuploaded%2Fi2%2F2207895997260%2FO1CN01Ogi5ab23V8BwbWSzn_%21%210-item_pic.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695440007&t=24ed88d94f8a1820a4411241c3bd5940',
						title:'麻辣王子地道辣条',
						score:6000,
						num:120
					},)
					},1000)
			}
		},
		onLoad() {
			this.loading = true
			setTimeout(()=>{
				this.loading = false
			},1000)
		}
	}
</script>

<style lang="scss">
	.integral-shop cc-drop-down-menu{
		position: fixed;
		left: 0%;
		top: 0;
		width: 100%;
		background: #fff;
		z-index: 99999999;
	}
	.integral-shop {
		
		.bar-item-text {
			max-width: 250rpx !important;
		}

		.screen-bar::after {
			display: none;
		}
		.zs-list{
			.item{
				display: flex;
				margin: 0 20rpx 20rpx;
				// box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 3px 0px;
				box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.08);
				
				.icon{
					width: 250rpx;
					height: 250rpx;
					border-radius: 16rpx 0 0 16rpx;
				}
				.info{
					flex: 1;
					padding: 20rpx;
					border-radius: 0 16rpx 16rpx 0;
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.title{
						font-size: 26rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						-webkit-line-clamp: 2;
						text-overflow: ellipsis;
					}
					.desc{
						color: #cacaca;
						font-size: 24rpx;
					}
					.sale-box{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.price{
							color: #ecb751;
							font-size: 38rpx;
						}
						.exchange-btn{
							width: 120rpx;
							height: 50rpx;
							line-height: 50rpx;
							background: $uni-color-primary;
							border-radius: 25rpx;
							text-align: center;
							color: #fff;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
</style>