yfs/package/mine/collect.vue

<!--
 * @Date: 2023-11-16 19:08:42
 * @LastEditTime: 2023-11-30 18:30:38
 * @Description: content
-->
<template>
	<view class="content">
		<uni-nav-bar left-icon="left" title="我的收藏" color="#000000" backgroundColor="transparent" :fixed="true"
			:statusBar="true" :border="false" @clickLeft="$c.back"></uni-nav-bar>

		<scroll-view class="tab" scroll-x>
			<view class="tab-item flex center" v-for="(item, i) in tabList" :key="i" :class="{act: tabCur == i}"
				@click="tabChange(i)">
				{{ item.title }}
			</view>
		</scroll-view>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="getList" :down="downOption"
			:up="upOption">
			<view class="list">
				<view class="list-item common_bg" v-for="(item, i) in listData" :key="i" @click="toDetail(item)">
					<view class="pic center center">
						<image class="pic-img" :src="item.imgurl" lazy-load></image>
					</view>
					<view class="image3 common_bg" :style="{ backgroundImage: `url(${$img1('common/label1.png')})`}">
						<text>
							{{ tabList[tabCur].title }}
						</text>
					</view>
					<view class="title hang1">
						{{ item.goods_title }}
					</view>
					<!-- <view class="redu" v-if="item.join_count">
						<text>{{ item.join_count }}次参与</text>
					</view>
					<view class="redu" v-else>快去参与吧！</view> -->
					<view class="price-box">
						<view class="price">
							¥
							<text>{{ item.goods_price }}</text>
						</view>
						<view v-if="item.stock" class="num-box">
							<view class="num">{{ item.surplus_stock }}/{{ item.stock }}</view>
							<view class="box icon">
								<image :src="$img1('index/box.png')" lazy-load></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					auto: false
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					auto: true,
					page: {
						size: 10 // 每页数据的数量,默认10
					}
				},
				tabList: [{
						id: 2,
						title: '无限赏',
						label: '/static/img/bq1.png',
					},
					{
						id: 8,
						title: '领主赏',
						label: '/static/img/bq5.png',
					},
					{
						id: 9,
						title: '连击赏',
						label: '/static/img/bq4.png',
					},
					// {
					// 	id: 2,
					// 	title: '卡牌赏',
					// 	label:'/static/img/bq2.png',
					// },
					{
						id: 1,
						title: '一番赏',
						label: '/static/img/bq3.png',
					},
					{
						id: 6,
						title: '全局赏'
					},

					// {
					// 	id: 3,
					// 	title: '擂台赏'
					// },
					// {
					//   id: 4,
					//   title: '抽卡机'
					// },
					// {
					// 	id: 5,
					// 	title: '积分赏'
					// },

					// {
					//   id: 7,
					//   title: '福利盲盒'
					// },


				],
				tabCur: 0,
				listData: []
			}
		},

		methods: {
			toDetail(e) {
				// 无限赏
				let url = '/pages/shouye/detail'

				if (e.type == 2 || e.type == 8) {
					url = '/pages/shouye/detail_wuxian'
				}

				if (e.type == 9) {
					url = '/package/index/lian-ji'
				}

				this.$c.to({
					url,
					query: {
						goods_id: e.goods_id,
						type_text: this.tabList[this.tabCur].title
					}
				})
			},

			tabChange(i) {
				this.tabCur = i
				this.listData = []

				this.mescroll.resetUpScroll()
				this.mescroll.scrollTo(0, 0)
			},
			/**
			 * @description: 获取列表
			 * @param {*} num
			 * @param {*} size
			 * @return {*}
			 */
			getList({
				num,
				size
			}) {
				this.req({
					url: 'listCollect',
					data: {
						page: num,
						type: this.tabList[this.tabCur].id
					},
					success: res => {
						if (res.status == 1) {
							if (num == 1) {
								this.listData = []
							}
							this.listData = this.listData.concat(res.data.data)
							this.mescroll.endByPage(res.data.data.length, res.data.last_page)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #F7F7F7;
		.tab {
			white-space: nowrap;

			.tab-item {
				width: 88rpx;
				height: 40rpx;
				position: relative;
				display: inline-flex;
				margin-left: 30rpx;
				background-color: #FFFFFF;
				font-size: 20rpx;
				border-radius: 8rpx;

				&:last-child {
					margin-right: 30rpx;
				}

				font-weight: 400;
				color: #333333;

				&.act {
					background-color: #E6F791;
				}
			}
		}

		.list {
			padding: 1rpx 30rpx 30rpx;
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;

			.list-item {
				width: 330rpx;
				height: 487rpx;
				margin-top: 30rpx;
				position: relative;
				background-color: #FFFFFF;
				border-radius: 16rpx;

				.pic {
					width: 100%;
					height: 332rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #D8D8D8;
					border-radius: 16rpx 16rpx 0rpx 0rpx;
					// overflow: hidden;

					.pic-img {
						// width: 290rpx;
						// height: 290rpx;
						border-radius: 16rpx 16rpx 0rpx 0rpx;
						width: 100%;
						height: 100%;
					}

				}

				.image3 {
					position: absolute;
					z-index: 1;
					top: 12rpx;
					left: 12rpx;
					width: 68rpx;
					height: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						font-size: 14rpx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}

				.title {
					padding: 20rpx 20rpx 0;
					font-size: 20rpx;
					font-weight: 400;
					color: #333333;
				}

				.redu {
					margin-top: 10rpx;
					padding-left: 20rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #cccccc;
				}

				.hot-num {
					padding: 10rpx 20rpx 0;

					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
				}

				.price-box {
					padding: 64rpx 20rpx 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.price {
						font-size: 16rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;

						text {
							font-size: 24rpx;
						}
					}

					.num-box {
						display: flex;
						align-items: center;

						.num {
							font-size: 24rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #cccccc;
						}

						.box {
							width: 26rpx;
							height: 26rpx;
							margin-left: 6rpx;
						}

						.icon {}
					}
				}
			}
		}
	}
</style>