shop_app/pages/mine/groupBuy/new.vue

<template>
	<view class="whole">
		<view class="tabsBox">
			<up-tabs
				:current="active"
				keyName="name"
				:list="pageInfo"
				:lineColor="Color"
				:activeStyle="{ color: Color }"
				@click="onClickTab">
			</up-tabs>
		</view>
		<view class="goodbox">
			<view class="item" v-for="item in goodsList" :key="item.id">
				<div class="imgbox">
					<image :src="item.face_img + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill" class="img" @click="toGroups(item.id)"></image>
					<view class="out flex" v-if="item.sold_status === 0" @click="toGroups(item.id)">
						<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/08/21/QBhUheeYWSJ3OGM27fkAufJAlFSA8GBhWjpY5oNy.png" class="out_img" />
					</view>
				</div>
				<view class="txtBox">
					<view class="tit" @click="toGroups(item.id)">{{item.title}}</view>
					<view class="text">
						<view class="price">
							<text class="icon">￥</text>
							<template v-if="item.pivot && item.pivot.path_type === 1">
								<text v-if="item.pivot.max_price === item.pivot.min_price">{{item.pivot.min_price}}</text>
								<text v-else>{{item.pivot.min_price * 1}}~{{item.pivot.max_price}}</text>
							</template>
							<template v-else>
								<text v-if="item.max_price === item.min_price">{{item.min_price}}</text>
								<text v-else>{{item.min_price * 1}}~{{item.max_price}}</text>
							</template>
						</view>
						<view v-if="item.sold_status === 0" class="btn flex" @click="toWant(item)" :class="item.is_collect ? 'hui' : ''">
							<text v-if="item.is_collect">已想要</text>
							<template v-else>
								<up-icon name="heart-fill" color="#fff" />&nbsp;想要
							</template>
						</view>
						<view v-else @click="toGroups(item.id)"><up-icon name="shopping-cart" :color="Color" size="22" /></view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom" v-if="goodsList.length">— 没有更多了 —</view>
		<view v-if="!goodsList.length && !loading" class="empty">
			<up-empty mode="list" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/list.png" text="暂无数据"></up-empty>
		</view>

	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { getOldDay, toMiniProgram } from '@/components/common.js'
	import { get, post } from '@/api/request.js'
	import { Style } from '@/utils/list.js'
	
	export default {
		setup() {
			const data = reactive({
				pageInfo: [],
				goodsList: [],
				loading: true,
				Color: '',
				priceColor: '',
				canClick: true,
				active: 0
			})
			
			function getFetchList(tab) {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				let date = getOldDay('y-m-d', 0)
				let str = date.split('-')[1] * 1 + '/' + date.split('-')[2] * 1
				get('/api/app/showcase/type/date', {type: 'goods_calendar'}).then((res) => {
					res = res.filter((item, i) => item.items.length !== 0)
					data.pageInfo = res || []
					data.pageInfo.forEach((it, index) => {
						it.name = it.day.replace('/', '月') + '日'
						if(tab && tab == it.name) {
							data.active = index
						} else if(!tab && it.day == str) {
							data.active = index
						}
					})
					data.goodsList = res[data.active] && res[data.active].items
					data.loading = false
					uni.hideLoading()
				}).catch(() => {
					data.loading = false
				})
			}
			
			const toGroups = (id) => {
				uni.navigateTo({
					url: '/pages/groups/index?id=' + id
				})
			}
			
			const toWant = (item) => {
				// 取消提醒
				if(item.is_collect) {
					post(`/api/v1/goods/remind/cancel/${item.id}`, {type: 1}).then((res) => {
						item.is_collect = false
						uni.showToast({
							title: '已取消到货提醒',
							icon: 'none'
						})
					})
				} else {
					toMiniProgram('pages/mine/groupBuy/new')
				}
			}
			
			const onClickTab = (e) => {
				data.active = e.index
				data.goodsList = data.pageInfo[data.active].items
			}
			
			return {
				toMiniProgram,
				getOldDay,
				...toRefs(data),
				getFetchList,
				toGroups,
				toWant,
				onClickTab
			}
		},
		async onLoad(options) {
			// await this.$onLaunched
			this.Color = uni.getStorageSync('theme_color')
			this.priceColor = Style[uni.getStorageSync('theme_index') * 1].priceColor
			await this.getFetchList(options.tab || '')
		}
	}
</script>

<style lang="scss" scoped>
	.whole{
		.tabsBox{
			position: sticky;
			top: 0;
			z-index: 2;
			background-color: #fff;
		}
	}
	.goodbox{
		padding: 0 24rpx;
		margin-top: 24rpx;
		.item{
			padding: 20rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			.imgbox{
				position: relative;
				width: 200rpx;
				height: 200rpx;
				.img{
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
				.out{
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					.out_img{
						width: 100rpx;
						height: 100rpx;
					}
				}
			}
			.txtBox{
				width: calc(100% - 220rpx);
				display: flex;
				flex-direction: column;
				justify-content: inherit;
				.tit{
					font-size: 30rpx;
					color: #000;
					line-height: 44rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					white-space: break-spaces;
				}
				.text{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.price{
						text{
							color: v-bind('priceColor');
							font-size: 34rpx;
						}
						.icon {
							font-size: 24rpx;
						}
					}
					.btn{
						background: v-bind('Color');
						border-radius: 54rpx;
						font-size: 24rpx;
						color: #fff;
						height: 54rpx;
						width: 130rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-left: 24rpx;
						line-height: 1;
						&.hui{
							background-color: #E2E2E2;
						}
					}
				}
			}
		}
	}
	.empty{
		width: 100%;
	}
	.bottom {
		text-align: center;
		font-size: 24rpx;
		color: #999;
		margin: auto;
		padding: 0 0 30rpx;
		width: 100%;
	}
	.loadbox{
		padding: 30rpx 0;
		text-align: center;
		color: #666;
	}
	.flex{
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>