mall-uniapp/pages/bargain/index.vue

<!-- 砍价活动列表 -->
<template>
	<s-layout title="砍价列表">
		<view class="box">
			<view class=imgBox>
				<view class="imgbox2">
					<view class="boxImg2">
						<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" interval="2500" duration="500"
							vertical="true" circular="true">
							<block v-for="(item,index) in bargainSuccessList" :key='index'>
								<swiper-item>
									{{ item.nickname }}
									拿了
									{{ item.activityName }}
								</swiper-item>
							</block>
						</swiper>
					</view>
				</view>
				<image class="boxImg1" src="../../static/bargain/beijing.png"></image>
				<view class="tit">已有{{ bargainTotal }}人砍成功</view>
			</view>
			<scroll-view scroll-y="true" :scroll-with-animation="false" :enable-back-to-top="true"
				@scrolltolower="loadMore" class="scroll">
				<view class="listLi" v-for="(item,index) in activityList" :key="index">
					<image class="listImg" :src="item.picUrl"></image>
					<view class="listCont">
						<view class="contT">
							{{item.name}}
						</view>
						<view class="contTime">
							<countDown :tipText="' '" :bgColor="bgColor" :dayText="':'" :hourText="':'"
								:minuteText="':'" :secondText="' '" :datatime="item.endTime / 1000" :isDay="true" />
							<text class="txt">后结束</text>
						</view>
						<view class="contP">
							<view><text style="font-size:20rpx">最低:￥</text>{{item.bargainMinPrice}}</view>
							<view class="but" @click="sheep.$router.go('/pages/bargain/details/details', { id: item.id })">参与砍价</view>
						</view>
					</view>
				</view>
				<uni-load-more v-if="activityTotal > 0" :status="loadStatus" :content-text="{
				    contentdown: '上拉加载更多',
				  }" />
			</scroll-view>
		</view>
	</s-layout>
</template>
<script setup>
	import {
		ref
	} from 'vue';
	import countDown from '@/sheep/components/countDown/index.vue'
	import BargainApi from "@/sheep/api/promotion/bargain.js";
	import sheep from '@/sheep';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	const bgColor = {
		'bgColor': '#E93323',
		'Color': '#fff',
		'width': '44rpx',
		'timeTxtwidth': '16rpx',
		'isDay': true
	}
	//活动概要
	const bargainSuccessList = ref([])
	const bargainTotal = ref(0)
	const autoplay = ref(true)
	const indicatorDots = ref(false)
	async function getActivitySuccess() {
		const {
			data
		} = await BargainApi.getActivitySuccess();
		bargainSuccessList.value = data.successList
		bargainTotal.value = data.successUserCount
		console.log(bargainSuccessList.value)
	}
	// 查询活动列表
	const activityTotal = ref(0) // 活动总数
	const activityList = ref([]) // 活动列表
	const loadStatus = ref('') // 页面加载状态
	const activityPageParams = ref({
		pageNo: 1, // 页码
		pageSize: 3, // 每页数量
	})
	async function getActivityList() {
		loadStatus.value = 'loading';
		const {
			data
		} = await BargainApi.getBargainActivityList(activityPageParams.value);
		activityList.value = activityList.value.concat(...data.list);
		activityTotal.value = data.total;
		loadStatus.value = activityList.value.length < activityTotal.value ? 'more' : 'noMore';
		// console.log('shuju',data)
	}
	// 加载更多
	function loadMore() {
		if (loadStatus.value !== 'noMore') {
			activityPageParams.value.pageNo += 1
			getActivityList();
		}
	}
	// 上拉加载更多
	onReachBottom(() => loadMore());
	// 页面初始化
	onLoad(async () => {
		await getActivityList()
		await getActivitySuccess()
	});
</script>
<style lang="scss" scoped>
	.box {
		width: 750rpx;
		height: 89.5vh;
		background-color: red;
	}

	.imgBox {
		width: 750rpx;
		height: 450rpx;
		// background-color: blue;
		position: relative;
	}

	.imgbox2 {
		width: 100%;
		height: 50rpx;
		text-align: center;
		// background-color: gold;
		position: absolute;
		top: 0;
	}

	.boxImg2 {
		width: 500rpx;
		height: 50rpx;
		line-height: 50rpx;
		margin: 0 auto;
		color: white;
		background-image: url('../../static/bargain/lun.png');
		background-size: 100% 100%;
		overflow: hidden;
	}

	.boxImg1 {
		width: 100%;
		height: 100%;
	}

	.scroll {
		width: 90%;
		height: 900rpx;
		// background-color: gold;
		margin: 0 auto;
	}

	.listLi {
		width: 100%;
		height: 240rpx;
		background-color: white;
		border-radius: 10px;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.listImg {
		width: 200rpx;
		height: 200rpx;
		// background-color: red;
	}

	.listCont {
		width: 400rpx;
		height: 200rpx;
		// background-color: blue;
	}

	.contT {
		width: 100%;
		height: 100rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.contTime {
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 22rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.contP {
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		display: flex;
		justify-content: space-between;
		color: #E93323;
		font-size: 28rpx;
		font-weight: bold;
	}

	.but {
		width: 162rpx;
		height: 52rpx;
		border-radius: 50rpx;
		font-size: 24rpx;
		color: #fff;
		text-align: center;
		background: linear-gradient(90deg, #FF7931 0%, #E93323 100%);
	}
	.tit{
		width: 100%;
		height: 50rpx;
		font-size: 28rpx;
		color: white;
		margin-top:-80rpx;
		text-align: center;
		line-height: 50rpx;
	}
</style>