shop_app/pages/mine/groupBuy/customized.vue

<template>
	<view class="whole">
		<view class="goodbox">
			<template v-for="item in goodsList" :key="item.id">
				<view class="item" v-for="it in item.items" :key="it.id">
					<div class="imgbox" @click="toGroups(it.id)">
						<image :src="it.face_img + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill" class="img"></image>
						<view class="out flex" v-if="it.sold_status === 0" @click="toGroups(it.id)">
							<img src="../../../static/image/presale.png" class="out_img" />
						</view>
						<view class="shield flex">
							<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2025/03/19/MRObpJsCXIJM7f3JyDNPDeTO5uz0x6uPEnvLW0sW.png" class="img" />
							<view class="box flex">
								<view class="tit">{{item.day.split('/')[0]}}月</view>
								<text>{{item.day.split('/')[1]}}</text>
							</view>
						</view>
					</div>
					<view class="txtBox">
						<view class="tit" @click.stop="toGroups(it.id)">{{it.title}}</view>
						<view class="text">
							<view class="price">
								<text class="icon">￥</text>
								<template v-if="it.pivot && it.pivot.path_type === 1">
									<text v-if="it.pivot.max_price === it.pivot.min_price">{{it.pivot.min_price * 1}}</text>
									<text v-else>{{it.pivot.min_price * 1}}~{{it.pivot.max_price * 1}}</text>
								</template>
								<template v-else>
									<text v-if="it.max_price === it.min_price">{{it.min_price * 1}}</text>
									<text v-else>{{it.min_price * 1}}~{{it.max_price * 1}}</text>
								</template>
							</view>
							<view v-if="it.sold_status === 0" class="btn flex" @click.stop="toWant(it)" :class="it.is_collect ? 'hui' : ''">
								<view v-if="it.is_collect">已提醒</view>
								<view v-else><up-icon name="bell-fill" color="#fff" size="15" />&nbsp;预约提醒</view>
								<view><up-count-down :time="gapMilliSecond(it.pivot.up_time)" format="距开售DD天HH时mm分ss秒" @finish="finish(it)" /></view>
							</view>
							<view v-else @click="toGroups(it.id)"><up-icon name="shopping-cart" :color="Color" size="20" /></view>
						</view>
					</view>
				</view>
			</template>
			
		</view>
		<view class="bottom" v-if="goodsList.length">— 没有更多了 —</view>
		<view v-if="!goodsList.length && !loading" class="empty">
			<up-empty mode="data" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/data.png" text="暂无数据" />
		</view>

	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { getOldDay, toMiniProgram, showToast } 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: '',
				active: 0
			})
			
			function getFetchList() {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				get('/api/v1/showcase/type/date', {type: 'bespoke_goods_calendar'}).then((res) => {
					data.goodsList = res
					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
						showToast('已取消到货提醒')
					})
				} else {
					toMiniProgram('pages/mine/wise/index')
				}
			}
			
			function gapMilliSecond(startTime) {
				let dateTime = new Date(startTime.replace(/-/g, "/"))
				let dateNow = new Date()
				return dateTime.getTime() - dateNow.getTime()
			}
			
			function finish(item) {
				item.sold_status = 1
			}
			
			return {
				getOldDay,
				toMiniProgram,
				...toRefs(data),
				getFetchList,
				toGroups,
				toWant,
				gapMilliSecond,
				finish
			}
		},
		async onLoad(options) {
			// await this.$onLaunched
			this.Color = uni.getStorageSync('theme_color')
			this.priceColor = Style[uni.getStorageSync('theme_index') * 1].priceColor
			await this.getFetchList()
		}
	}
</script>

<style lang="scss" scoped>
	.whole{
	}
	.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: 180rpx;
				height: 180rpx;
				.img{
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
				.out{
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					z-index: 2;
					.out_img{
						width: 100rpx;
						height: 100rpx;
					}
				}
				.shield{
					width: 40px;
					height: 40px;
					position: absolute;
					top: -2px;
					left: 0;
					font-size: 26rpx;
					color: #222;
					.img{
						width: 100%;
						height: 100%;
						vertical-align: bottom;
					}
					.box{
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						flex-direction: column;
						text-align: center;
						padding-bottom: 10px;
						box-sizing: border-box;
						line-height: 20px;
						.tit{
							border-bottom: 1px solid #222;
							width: 24px;
						}
					}
				}
			}
			.txtBox{
				width: calc(100% - 200rpx);
				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;
					flex-wrap: wrap;
					.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;
						padding: 10rpx 20rpx 4rpx;
						width: 200rpx;
						white-space: nowrap;
						line-height: 1;
						flex-direction: column;
						font-size: 28rpx;
						&.hui{
							opacity: 0.7;
						}
					}
				}
			}
		}
	}
	.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;
	}
	::v-deep .btn {
		.u-count-down__text {
			color: #fff !important;
			font-size: 18rpx !important;
		}
	}
</style>