zyejMAll-mobile/pages/activity/point/exchange_detail.vue

<!-- 积分商城：商品列表  -->
<template>
	<s-layout title="兑换详情" navbar="normal" :leftWidth="0" :rightWidth="0">
		<view class="main">
			<view class="t-address">
				<view class="t">
					<text class="l">TEST TQQQ</text>
					<text class="r">13615935246</text>
				</view>
				<view class="b">
					北京市 北京市 北京市 北京市
				</view>
				<image
					src="https://zysc.fjptzykj.com:3000/shangcheng/0f01dda22fb349c40c4659d73cb346a1423fee44c9d53eb07bdae1a1e11b5299.png"
					class="img"></image>
			</view>

			<view class="c-goods">
				<view class="t">
					共1件商品
				</view>

				<view class="b-detail">
					<image
						src="https://zysc.fjptzykj.com:3000/shangcheng/21cf998c40ecd9d506f884bbd7540afc2e7928ab0e4ab54afede1fcc48a10972.png"
						class="img" mode=""></image>
					<view class="right">
						<view class="t">
							Xiaomi Citi 2 冰冰蓝 8GB + 128GB <text class="r">x1</text>
						</view>
						<view class="c">
							冰冰蓝，8+128
						</view>
						<view class="b">
							10积分
						</view>
					</view>
				</view>
			</view>

			<view class="b-goodsDetail">
				<view class="ddxx">
					<view class="l">
						订单编号:
					</view>
					<view class="r">
						wx23556151561321321351213
						<view class="copy-btn">
							复制
						</view>
					</view>

				</view>
				<view class="ddxx">
					<view class="l">
						订单状态:
					</view>
					<view class="r">
						未发货
					</view>
				</view>
				<view class="ddxx">
					<view class="l">
						下单时间:
					</view>
					<view class="r">
						2024-10-18 15:46:03
					</view>
				</view>
				<view class="ddxx">
					<view class="l">
						支付积分
					</view>
					<view class="r">
						10
					</view>
				</view>
			</view>
		</view>
	</s-layout>
</template>
<script setup>
	import sheep from '@/sheep';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from 'vue';
	import PointApi from '@/sheep/api/promotion/point';
	import SLayout from '@/sheep/components/s-layout/s-layout.vue';

	// 计算页面高度
	const {
		safeAreaInsets,
		safeArea
	} = sheep.$platform.device;
	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
	const pageHeight =
		(safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;

	const sPointCardRef = ref();
	// 查询活动列表
	const activityPageParams = reactive({
		pageNo: 1, // 页码
		pageSize: 5, // 每页数量
	});

	const activityTotal = ref(0); // 活动总数
	const activityCount = ref(0); // 已加载活动数量
	const loadStatus = ref(''); // 页面加载状态
	async function getActivityList() {
		loadStatus.value = 'loading';
		const {
			data
		} = await PointApi.getPointActivityPage(activityPageParams);
		await sPointCardRef.value.concatActivity(data.list);
		activityCount.value = sPointCardRef.value.getActivityCount();
		activityTotal.value = data.total;

		loadStatus.value = activityCount.value < activityTotal.value ? 'more' : 'noMore';
	}

	// 加载更多
	function loadMore() {
		if (state.loadStatus !== 'noMore') {
			activityPageParams.pageNo += 1;
			getActivityList();
		}
	}

	// 上拉加载更多
	onReachBottom(() => {
		loadMore();
	});
	onLoad(() => {
		getActivityList();
	});
</script>

<style lang="scss" scope>
	.main {
		.t-address {
			margin: 9px 0;
			padding: 15px 10px;
			background: white;
			padding-bottom: 0;

			.t {
				font-size: 19px;
				color: black;
				display: flex;
				font-weight: 700;
				margin-bottom: 5px;

				.l {
					margin-right: 10px;
				}
			}

			.b {
				font-size: 17px;
				color: rgba(156, 143, 114);
			}

			.img {
				width: 100%;
				height: 2px;
			}
		}

		.c-goods {
			margin: 9px 0;
			padding: 15px 10px;
			background: white;

			&>.t {
				font-size: 19px;
				border-bottom: 1px solid rgba(240, 240, 240);
				padding-bottom: 15px;
			}

			.b-detail {
				display: flex;
				margin-top: 15px;

				.img {
					width: 78px;
					height: 78px;
					margin-right: 14px;
				}

				.right {
					flex: 1;
					.t {
						font-size: 14px;
						font-weight: 500;
						display: flex;
						justify-content: space-between;
						.r{
							color:rgba(134,139,151);
						}
					}

					.c {
						margin: 10px 0;
						color:rgba(134,139,151);
					}

					.b {
						color:rgba(254,94,51);
					}
				}
			}
		}
		
		.b-goodsDetail {
			margin: 9px 0;
			padding: 15px 10px;
			background: white;
		}
		
		.ddxx {
			display: flex;
			justify-content: space-between;
			margin: 10px 0;

			.l {
				font-size: 17px;
				.r{
				}
			}

			.r {
				font-size: 16px;
				color: rgba(102, 102, 102);
				display:flex;
				align-items: center;
				.copy-btn{
					margin-left:10px;
					padding:3px 5px;
					border:1px solid black;
				}
			}
			
		}
	}
</style>