shop_app/pages/saleTop/super.vue

<template>
	<view class="whole" v-if="loading">
		<view class="bg" style="background-image: url('https://ct-upimg.yx090.com/ju8hn6/shop/image/2022/09/28/IMPeVI4D0inYye0ltGi9gtKDYwCKD6toOT2iJoKy.png');">
		</view>
		<view class="image">
			<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2022/09/28/TzcI5YZxqY0VIjtjUgSLhSGhajNS0zCNoTgDURSg.png" mode="widthFix" class="img"></image>
		</view>
		<view class="goodbox" v-if="goodsList.length !== 0">
			<view class="item" v-for="item in goodsList" :key="item.id">
				<view 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" v-if="item.sold_status === 2">
						<img src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2024/01/16/Cr6cRRhhqYNhScigxIyumyV9hXXMI3vKvsE1jgt0.png" class="out_img" />
					</view>
				</view>
				<view class="box">
					<view class="tit">{{item.title}}</view>
					<view class="text">
						<view class="price">
							<text class="txt1" v-if="item.price * 1 > 0">￥{{item.price}}</text>
							<template v-else>
								<text class="txt1" v-if="parseFloat(item.min_price) == parseFloat(item.max_price)">￥{{item.min_price}}</text>
								<text class="txt1" v-else>￥{{item.min_price * 1}}~{{item.max_price}}</text>
							</template>
							
							<br><text class="txt2" v-if="parseFloat(item.market_price) != 0">￥{{item.market_price}}</text>
						</view>
						<view class="btn" @click="toGroups(item.id)">立即抢购</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="empty">
			<up-empty mode="data" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/data.png" text="暂无数据"></up-empty>
		</view>
		
		<!-- 返回顶部 -->
		<div @click="handleTop" v-show="showTop" class="top">
			<up-icon name="arrow-upward" color="#000" size="24" />
		</div>

	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get, post } from '@/api/request.js'
	import { Style } from '@/utils/list.js'
	
	export default {
		setup() {
			const data = reactive({
				page: 1,
				last_page: 0,
				goodsList: [],
				loading: false,
				showTop: false,
				Color: '',
				priceColor: ''
			})
			
			function getFetchList() {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				get('/api/app/hot', {
					page: data.page,
					pageSize: 20
				}).then((res) => {
					data.last_page = res.meta.last_page
					data.goodsList = data.goodsList.concat(res.data)
					uni.hideLoading()
				})
			}
			
			const handleTop = () => {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			}
			
			const toGroups = (id) => {
				uni.navigateTo({
					url: '/pages/groups/index?id=' + id
				})
			}
			return {
				...toRefs(data),
				getFetchList,
				handleTop,
				toGroups
			}
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page ++
				this.getFetchList()
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 300) {
				this.showTop = true
			} else {
				this.showTop = false
			}
		},
		async onLoad(options) {
			// await this.$onLaunched
			await this.getFetchList()
			this.Color = uni.getStorageSync('theme_color')
			this.priceColor = Style[uni.getStorageSync('theme_index') * 1].priceColor
			this.loading = true
		}
	}
</script>

<style lang="scss" scoped>
	.whole{
		position: relative;
		.bg{
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			height: 587rpx;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
		}
		.image{
			padding: 70rpx 0;
			text-align: center;
			position: relative;
			z-index: 1;
			.img{
				width: 296rpx;
			}
		}
	}
	.goodbox{
		padding: 0 30rpx;
		position: relative;
		z-index: 1;
		.item{
			padding: 20rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			.img{
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
			.imgbox{
				position: relative;
				.out{
					position: absolute;
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					top: 0;
					left: 0;
					.out_img{
						width: 120rpx;
						height: 120rpx;
					}
				}
			}
			.box{
				display: flex;
				width: calc(100% - 220rpx);
				height: 200rpx;
				flex-direction: column;
				justify-content: inherit;
				.tit{
					font-size: 28rpx;
					color: #000;
					line-height: 44rpx;
				}
				.text{
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
				}
				.txt1{
					font-size: 30rpx;
					font-weight: bold;
					color: v-bind('priceColor');
					margin-right: 10rpx;
				}
				.txt2{
					font-size: 24rpx;
					color: #9C9C9C;
					text-decoration: line-through;
				}
				.btn{
					border: 1px solid v-bind('Color');
					border-radius: 56rpx;
					font-size: 24rpx;
					color: v-bind('Color');
					padding: 12rpx 22rpx;
				}
				.price{
					text-align: left;
					width: calc(100% - 160rpx);
					line-height: 56rpx;
				}
			}
		}
	}
	.empty{
		width: 100%;
		height: calc(100vh - 100rpx);
	}
	.top {
		position: fixed;
		bottom: 15%;
		right: 5%;
		background: #fff;
		width: 80rpx;
		height: 80rpx;
		line-height: 107rpx;
		border-radius: 50%;
		text-align: center;
		box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
		z-index: 10;
	}
</style>