newXLSC/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">核销时间:{{ item.add_time }}</view>
				<view class="hx-status">已核销</view>
			</view>
			<view class="hx-info flex">
				<view class="user-logo"><image :src="item.avatar" mode=""></image></view>
				<view class="user-info">
					<view class="info-name clamp">{{ item.nickname }}</view>
					<view class="info-phone clamp">{{item.coupon_title}}</view>
					<view class="info-info">实付:￥{{ item.coupon_price }} 数量: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';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import { write_off } from '@/api/user.js';
export default {
	components: {
		empty,
		uniLoadMore
	},
	data() {
		return {
			loadingType: 'more',
			list: [],
			page: 1,
			limit: 10
		};
	},
	onShow() {
		this.loadingType = 'more';
		this.list = [];
		this.page = 1;
		this.limit = 10;
		this.getList();
	},
	onReachBottom() {
		this.getList();
	},
	methods: {
		getList() {
			let obj = this;
			if (obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
				return;
			}
			obj.loadingType = 'loading';
			write_off({
				page: obj.page,
				limit: obj.limit
			}).then(data => {
				console.log(data, '123456789');
				obj.list = obj.list.concat(data.data);
				if (obj.limit == data.data.length) {
					obj.page++;
					obj.loadingType = 'more';
				} else {
					obj.loadingType = 'noMore';
				}
			});
		}
	}
};
</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>