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

<!-- 积分商城：商品列表  -->
<template>
  <s-layout title="兑换成功" navbar="normal" :leftWidth="0" :rightWidth="0">
		<view class="main">
			<image src="https://zysc.fjptzykj.com:3000/shangcheng/4fd1540f5e7c4545140fe1278fd6db65f18a3cd86bc866b24470b888bf6664fe.png" class="img" mode=""></image>
			<view class="title">商品兑换成功</view>
			<view class="fgx"></view>
			<view class="ddxx">
				<view class="l">
					订单编号
				</view>
				<view class="r">
					wx23556151561321321351213
				</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">
					积分兑换
				</view>
			</view>
			<view class="ddxx">
				<view class="l">
					支付方式
				</view>
				<view class="r">
					10
				</view>
			</view>
			<view class="fgx"></view>
			
			<view class="ck-detail">
				查看详情
			</view>
			<view class="bk-home">
				返回首页
			</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{
		background:white;
		width:85%;
		padding:15px;
		position:fixed;
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
		border-radius:12px;
		.img{
			width:80px;
			height:80px;
			display:block;
			margin:0 auto;
			margin-top: -52px;
		}
		.title{
			text-align: center;
			font-size:18px;
			margin:15px 0;
			font-weight: 700;
		}
		.ddxx{
			display: flex;
			justify-content: space-between;
			margin:10px 0;
			.l{
				font-size: 17px;
			}
			.r{
				font-size: 16px;
				color:rbga(102,102,102);
			}
		}
		.fgx{
			margin: 20px 0;
			height: 1px;
			width: 100%;
			background:rgba(239,239,239);
		}
		.ck-detail{
			// background: rgba(254,92,45);
			background: rgba(207,162,92);
			padding: 10px 0;
			color: white;
			font-size: 19px;
			text-align: center;
			width: 100%;
			margin-bottom: 15px;
			border-radius:31px;
		}
		.bk-home{
			border:1px solid rgba(207,162,92);
			padding: 10px 0;
			color: rgba(207,162,92);
			font-size: 19px;
			text-align: center;
			width: 100%;
			border-radius:31px;
		}
		
	}
</style>