jpcj-xcx/pages/collectionList/index.vue

<template>
	<view class="content">
		<loadSke :loading='loading' :list='applist'>
			<view class='list-item' v-for="(item, index) in applist" :key="index" @click="goMiniApp({appId:item.appletAddress},item)">
				<image class="avatar" mode="aspectFill" :src="item.appletLogoFileUrl || '/static/imgs/shmr.png'">
					<view class="item-right">
						<view class="top">
							<van-icon class="icon" name="/static/imgs/zf.png" size='14' />
							<van-icon class="icon" name="/static/imgs/bxh.png" @tap.stop='delSc(index)' size='12' />
						</view>
						<view class="center">
							<text class="details">{{item.appletIntroduce || '该商家暂无描述,敬请期待!'}}</text>
						</view>
						<view class="bottom">
							<text class="title">{{item.corporateName}}</text>
						</view>
					</view>
			</view>
		</loadSke>
	</view>

</template>

<script>
	import loadSke from '@/components/skeleton/index/index.vue'
	import {
		collectionList,
		delFavorites
	} from '@/api/applist.js'
	export default {
		components: {
			loadSke
		},
		data() {
			return {
				active: 0,
				current: 0,
				mode: 'round',
				applist: {},
				loading: true,
				pageNum: 1,
				pageSize: 10,
				total: 1,
			}
		},
		mounted() {
			this.initAppList()
		},
		onReachBottom(){
			if(this.total-this.pageNum*this.pageSize<=0){
				return
			}
			this.pageNum++
			collectionList({
				pageNum: this.pageNum,
				pageSize: this.pageSize
			}).then(res => {
				this.applist = this.applist.concat(res.rows)
			})
		},
		methods: {
			initAppList() {
				collectionList({
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then(res => {
					this.applist = res.rows
					this.total = res.total
					this.$nextTick(() => {
						this.loading = false
					})
				})
			},
			delSc(index) {
				delFavorites(this.applist[index].customerId).then(res => {
					if (res.code == 200) {
						this.$set(this.applist[index], 'collectionStatus', '0')
						this.Toast('取消收藏成功!');
						delete this.applist.splice(index, 1)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 1rpx;
	}

	.swiper-box {
		position: sticky;
		top: 0px;
		left: 0;
		height: 422rpx;
		z-index: 9;
	}

	.sticky-top {
		position: sticky;
		top: 192rpx;
		left: 0;
		margin: 30rpx 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #4fc08d;
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
		// border-top-left-radius: 14px;
		// border-top-right-radius: 14px;
		padding-right: 3%;

		.top-search {
			flex: 1;
		}
	}

	.sticky {
		position: sticky;
		top: 295rpx;
		left: 0;
		background-color: #fff;
		z-index: 9;
		margin: 30rpx 30rpx;
		border-radius: 20rpx;

		.grid {
			display: flex;
			justify-content: space-between;
			padding: 1% 2%;
			margin-bottom: 2%;
			border-bottom-left-radius: 10px;
			border-bottom-right-radius: 10px;

			.grid-item {
				width: 50px;
				height: 60px;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				font-size: 12px;
			}
		}
	}

	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		height: 170rpx;
		padding: 34rpx 20rpx;
		margin: 24rpx 30rpx;
		border-radius: 20rpx;

		.avatar {
			flex-shrink: 0;
			width: 161rpx;
			height: 161rpx;
			margin-right: 16rpx;
		}

		.item-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 200rpx;

			.top {
				.icon {
					margin-top: -20rpx;
					padding: 20rpx;
				}

				display: flex;
				justify-content: flex-end;
			}

			.center {
				align-self: flex-start;

				.details {
					width: 436rpx;
					height: 70rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #0F0404;
					display: -webkit-box;
					margin-bottom: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					word-wrap: break-word;
					white-space: normal !important;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}


			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					padding: 3rpx 12rpx;
					height: 30rpx;
					background: #FFE6E6;
					border: 1rpx solid #E31818;
					border-radius: 2rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #E31818;
					line-height: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.right {
					width: 170rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 35rpx;

					.flex {
						display: flex;
						justify-content: center;

						.icon {
							margin-right: 5rpx;
						}
					}
				}
			}
		}
	}
</style>