xxl/pages/user/hxjl.vue

<template>
	<view class="content">
		<view class="" style="height: 20rpx;"></view>
		<empty v-if="list.length === 0"></empty>
		<view class="hx-wrap" v-for="item in list">
			<view class="hx-tit flex">
				<view class="hx-time">
					核销时间:2022-06-09 13:00:00
				</view>
				<view class="hx-status">
					已核销
				</view>
			</view>
			<view class="hx-info flex">
				<view class="user-logo">
					<image src="../../static/error/missing-face.png" mode=""></image>
				</view>
				<view class="user-info">
					<view class="info-name clamp">
						叶落思晨叶落思晨叶落思晨叶落思晨叶落思晨叶落思晨叶落思晨
					</view>
					<view class="info-phone">
						137****5213
					</view>
					<view class="info-info">
						实付:￥80 数量:1
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
		<view class="" style="height: 3rpx;"></view>
	</view>
</template>

<script>
	import empty from '@/components/empty';
	export default {
		components: {
			empty
		},
		data() {
			return {
				loadingType: 'more',
				list: [],
			}
		},
		onShow() {

		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			getList() {
				let obj = this
				if (obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
					return
				}
				obj.loadingType = 'loading'
			}
		}
	}
</script>

<style lang="scss">
	.hx-wrap {
		width: 702rpx;
		height: 194rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 10rpx;
		margin: 0 auto 17rpx;
		padding: 30rpx 30rpx 0;

		.hx-tit {
			font-size: 26rpx;
			font-weight: 500;
			color: #999999;
		}

		.hx-info {
			justify-content: flex-start;
			padding-top: 20rpx;

			.user-logo {
				flex-shrink: 0;

				image {
					width: 64rpx;
					height: 64rpx;
				}
			}

			.user-info {
				padding-left: 26rpx;
				max-width: 500rpx;

				.info-name {
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
				}

				.info-phone {
					font-size: 30rpx;
					font-weight: 500;
					color: #666666;
				}

				.info-info {
					font-size: 22rpx;
					font-weight: 400;
					color: #999999;
				}
			}
		}
	}
</style>