mall-uniapp/pages/bargain/details/details.vue

<template>
	<s-layout title="砍价详情">
		<view class="box1">
			<image class="deImge1" src="../../../static/bargain/de-img2png.png"></image>
			<view class="cont">
				<view class="contInfo">
					<image class="infoImg" src="../../../static/goods-empty.png"></image>
					<view class="goods">
						<view class="goodsInfo">
							<view class="info1">
								{{bargainInfo.name}}
							</view>
							<view class="info1">
								最低价：￥{{fen2yuan(bargainInfo.bargainMinPrice)}}
							</view>
							<view class="info1">
								剩余：{{ bargainInfo.stock }} {{bargainInfo.unitName}}
							</view>
							<view class="info1" style="color: #E93323;font-weight: bold;">
								当前：￥<text style="font-size: 36rpx;">{{fen2yuan(bargainInfo.marketPrice)}}</text>
							</view>
						</view>
						<view class="jiantou">
							<image src="../../../static/bargain/arrow.png"></image>
						</view>
					</view>
				</view>
				<view class="contTime" v-if="bargainInfo.endTime > new Date().getTime() && bargainInfo.stock > 0">
					<countDown :tipText="' '" :bgColor="bgColor" :dayText="':'" :hourText="':'" :minuteText="':'"
						:secondText="' '" :datatime="bargainInfo.endTime / 1000" :isDay="true" />
					<text class="txt">后结束</text>
				</view>
				<view class="contTime" v-else-if="bargainInfo.endTime <= new Date().getTime()">
					已结束
				</view>
				<view class="contTime" v-else-if="bargainInfo.stock <= 0">
					已售罄
				</view>
			</view>
		</view>
		<view class="box">
			<view class="boxCont">

			</view>
			<view class="title">
				<image class="titImg" src="../../../static/bargain/zuo2.png"></image>
				<view class="titleText">
					砍价记录
				</view>
				<image class="titImg" src="../../../static/bargain/you2.png"></image>
			</view>
			<view class="titInfo" style="line-height: 500rpx;" v-if="bargainRecordTotal==0">
				暂无砍价记录
			</view>
			<scroll-view scroll-y="true" :scroll-with-animation="false" :enable-back-to-top="true"
				@scrolltolower="loadMore" class="titInfo" v-else>
				
				<uni-load-more v-if="bargainRecordTotal > 0" :status="loadStatus" :content-text="{
				    contentdown: '上拉加载更多',
				  }" />
			</scroll-view>
			<!-- <view class="title">
				<image class="titImg" src="../../../static/bargain/zuo2.png"></image>
				<view class="titleText">
					商品详情
				</view>
				<image class="titImg" src="../../../static/bargain/you2.png"></image>
			</view>
			<view class="titInfo">
				暂无商品详情
			</view> -->
		</view>
	</s-layout>
</template>

<script setup>
	import {
		onLoad,onReachBottom
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import {
		fen2yuan
	} from '@/sheep/hooks/useGoods';
	import countDown from '@/sheep/components/countDown/index.vue'
	import BargainApi from "@/sheep/api/promotion/bargain.js";
	const bgColor = {
		'bgColor': '#E93323',
		'Color': '#fff',
		'width': '44rpx',
		'timeTxtwidth': '16rpx',
		'isDay': true
	}
	//获得商品详情
	const bargainInfo = ref({})
	async function getActivityDetail(id) {
		const {
			data
		} = await BargainApi.getActivityDetail({
			id: id
		});
		bargainInfo.value = data
	}
	//获得砍价记录分页
	const recordPageParams = ref({
		pageNo: 1, // 页码
		pageSize: 10, // 每页数量
	})
	const bargainRecord = ref([])
	const bargainRecordTotal = ref(0)
	const loadStatus = ref('') // 页面加载状态
	async function getBargainRecord() {
		loadStatus.value = 'loading';
		const {
			data
		} = await BargainApi.getBargainRecordPage(recordPageParams.value);
		bargainRecord.value = bargainRecord.value.concat(...data.list);
		bargainRecordTotal.value = data.total;
		loadStatus.value = bargainRecord.value.length < bargainRecordTotal.value ? 'more' : 'noMore';
	}
	// 加载更多
	function loadMore() {
		if (loadStatus.value !== 'noMore') {
			recordPageParams.value.pageNo += 1
			getBargainRecord();
		}
	}
	// 上拉加载更多
	onReachBottom(() => loadMore());
	onLoad((options) => {
		getActivityDetail(options.id);
		getBargainRecord();
	});
</script>

<style lang="scss" scoped>
	.box1 {
		width: 750rpx;
		height: 380rpx;
		position: relative;
	}

	.deImge1 {
		width: 750rpx;
		height: 380rpx;
		position: absolute;
		top: 0;
	}

	.cont {
		width: 650rpx;
		height: 360rpx;
		// background-color: rebeccapurple;
		position: absolute;
		top: 300rpx;
		left: 50rpx;
	}

	.contTime {
		width: 100%;
		height: 60rpx;
		// background-color: #999999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.box {
		width: 750rpx;
		height: 66.2vh;
		margin-top: -1rpx;
		background-color: #E93323;
	}

	.boxCont {
		width: 691rpx;
		height: 300rpx;
		margin: 0 auto;
		background-color: white;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}

	.contInfo {
		width: 600rpx;
		height: 220rpx;
		// background-color: red;
		margin: 25rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.infoImg {
		width: 220rpx;
		height: 220rpx;
	}

	.goods {
		width: 350rpx;
		height: 220rpx;
		// background-color: gold;
		display: flex;
		justify-content: space-between;
	}

	.goodsInfo {
		width: 300rpx;
		height: 220rpx;
		// background-color: green;
	}

	.info1 {
		width: 300rpx;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 22rpx;
		color: #999999;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}

	.jiantou {
		width: 40rpx;
		height: 220rpx;
	}

	.jiantou image {
		width: 20rpx;
		height: 40rpx;
		margin: 100rpx 10rpx;
	}

	.title {
		width: 320rpx;
		height: 100rpx;
		font-size: 40rpx;
		font-weight: 600;
		color: #fff;
		// background-color: white;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.titleText {
		width: 180rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}

	.titImg {
		width: 60rpx;
		height: 60rpx;
	}

	.titInfo {
		width: 691rpx;
		height: 500rpx;
		background-color: white;
		border-radius: 10rpx;
		margin: 10rpx auto;
		text-align: center;
		font-size: 26rpx;
		color: #AAAAAA;
	}
</style>