shop_app/pages/saleTop/hot.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/18LCzYIb3qp8LyvlqCKdNs463Pi0z7LqYiKWrJJY.png');">
		</view>
		<view class="wenzi"><text>根据店铺销量计算，每小时更新</text></view>
		<view class="tabBox">
			<view class="row" :class="curTab == 'day' ? 'on' : ''" @click="changeTab('day')">日榜单</view>
			<view class="row" :class="curTab == 'month' ? 'on' : ''" @click="changeTab('month')">月榜单</view>
			<view class="pie" :class="curTab == 'month' ? 'right' : ''"></view>
		</view>
		<view class="goodbox" v-if="goodsList.length !== 0">
			<view class="item" v-for="(item, index) in goodsList" :key="item.id">
				<view class="left" @click="toGroups(item.id)">
					<image :src="item.face_img + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill" class="img"></image>
					<image v-if="index === 0" src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2022/06/15/pIUXxlbHScMtNzIY3JBUeZ24aUyEpRgUL7LvS63R.png" class="tag" mode="widthFix"/>
					<image v-if="index === 1" src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2022/06/15/tgO5hRzXcYYmswSb1N2M8JWKcWPMxhkfdVsDXd95.png" class="tag" mode="widthFix"/>
					<image v-if="index === 2" src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2022/06/15/I9Pz4UKUUwHvu9xHCMGPboZuE6OhjhsqfcYXF3kk.png" class="tag" mode="widthFix"/>
					<image v-if="index === 3" src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2022/09/28/l7roDmV03wGCHqarip4fPEdVwYPnQkBmUdhFeMWT.png" class="tag" mode="widthFix"/>
				</view>
				<view class="box">
					<view class="tit">{{item.title}}</view>
					<view class="text">
						<view>
							<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}}~{{item.max_price}}</text>
							<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="hanletop" 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'
	export default {
		setup() {
			const data = reactive({
				page: 1,
				last_page: 0,
				goodsList: [],
				loading: false,
				showTop: false,
				Color: '',
				curTab: 'day'
			})
			
			function getFetchList(val = 0) {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				get('/api/v1/top', {
					page: data.page,
					pageSize: 20,
					date_type: data.curTab
				}).then((res) => {
					data.last_page = res.meta.last_page
					data.goodsList = val == 0 ? res.data : data.goodsList.concat(res.data)
					uni.hideLoading()
				})
			}
			
			const hanletop = () => {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			}
			
			const toGroups = (id) => {
				uni.navigateTo({
					url: '/pages/groups/index?id=' + id
				})
			}
			
			function changeTab(val) {
				if(data.curTab != val) {
					data.curTab = val
					data.page = 1
					getFetchList(0)
				}
			}
			
			return {
				...toRefs(data),
				getFetchList,
				hanletop,
				toGroups,
				changeTab
			}
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page ++
				this.getFetchList(1)
			}
		},
		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.loading = true
		}
	}
</script>

<style lang="scss" scoped>
	.whole{
		position: relative;
		padding: 0 30rpx;
		.bg{
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			height: 973rpx;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
		}
		.wenzi{
			padding: 130rpx 0 0;
			text-align: center;
			position: relative;
			z-index: 1;
			height: 220rpx;
			box-sizing: border-box;
			text{
				font-size: 26rpx;
				color: #fff;
			}
		}
	}
	.goodbox{
		padding: 20rpx;
		position: relative;
		z-index: 1;
		background: #fff;
		border-radius: 10rpx;
		.item{
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #f1f1f1;
			padding-bottom: 20rpx;
			.left{
				position: relative;
				width: 200rpx;
				height: 200rpx;
				.tag{
					width: 60rpx;
					position: absolute;
					left: 10rpx;
					top: 0;
				}
			}
			.img{
				width: 100%;
				height: 100%;
			}
			.box{
				display: flex;
				width: calc(100% - 220rpx);
				height: 200rpx;
				flex-direction: column;
				justify-content: inherit;
				.tit{
					font-size: 28rpx;
					color: #333;
					line-height: 44rpx;
				}
				.text{
					display: flex;
					align-items: flex-end;
					justify-content: space-between;
				}
				.txt1{
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					margin-right: 10rpx;
				}
				.txt2{
					font-size: 24rpx;
					color: #9C9C9C;
				}
				.btn{
					width: 140rpx;
					height: 60rpx;
					background: v-bind('Color');
					border-radius: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					color: #fff;
				}
			}
		}
	}
	.empty{
		width: 100%;
		height: calc(100vh - 100rpx);
		position: relative;
		z-index: 1;
		color: #fff;
	}
	.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;
	}
	.tabBox{
		padding: 3px;
		background-color: #fff;
		display: flex;
		width: fit-content;
		border-radius: 30px;
		height: 30px;
		margin: 0 auto 20px;
		position: relative;
		.row{
			width: 100px;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #333;
			border-radius: 30px;
			transition: all 0.3s;
			position: relative;
			z-index: 2;
			font-size: 28rpx;
			&.on{
				color: #fff;
			}
		}
		.pie{
			width: 100px;
			height: 30px;
			background-color: v-bind('Color');
			pointer-events: none;
			border-radius: 30px;
			position: absolute;
			z-index: 1;
			transition: all 0.3s;
			left: 3px;
			top: 3px;
			&.right{
				left: 103px;
			}
		}
	}
</style>