myjtp/pages/certificate/success.vue

<template>
	<view class="success">
		<view class="item flex" v-for="(item,ind) in navList[tabCurrentIndex].orderList">
			<image class="avatar" :src="item.photo" mode="scaleToFill"></image>
			<view class="item-content">
				<view class="item-name">
					{{item.name}}({{item.gender_name}})
				</view>
				<view class="item-tip">
					<text class="type">证件:</text>{{item.idcard}}
				</view>
				<view class="item-tip">
					<text class="type">时间:</text>{{item.date}}
				</view>
				<view class="item-tip">
					<text class="type">编码:</text>{{item.code}}
				</view>
			</view>
			<view class="item-status position-relative">
				
				<view class="level" v-if="item.status==0">
					待审核
				</view>
				<view class="level" v-if="item.status==1">
					已通过
				</view>
				<view class="level" v-if="item.status==2">
					未通过
				</view>
				<view class="level">
					{{item.level_name}}
				</view>
				<navigator :url="'./showCertificate?id='+item.id">
				<view class="buttom">
					查看证书
				</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/api/login.js'
	import {
		getCertList
	} from '@/api/certificate.js'
	export default {
		data() {
			return {
				tabCurrentIndex: 0,
				navList: [{
					state: 2,
					text: '已使用',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				}]
			}
		},
		onLoad(options) {
			getUserInfo().then(() => {
				this.loadData();
			});
		},
		onReachBottom() {
			this.loadData();
		},
		methods: {
			loadData(source) {
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				navItem.loadingType = 'loading';
				getCertList({
						page: navItem.page,
						limit: navItem.limit
					})
					.then(({
						data
					}) => {
						let list = data.list.data;
						navItem.orderList = navItem.orderList.concat(list);
						console.log(navItem.orderList);
						navItem.page++;
						if (navItem.limit == list.length) {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'more';
							return;
						} else {
							//判断是否还有数据， 有改为 more， 没有改为noMore
							navItem.loadingType = 'noMore';
							if(navItem.orderList.length==0){
								uni.showModal({
									title: '提示',
									content: '您未申请证书是否立即申请',
									success: res => {
										if(res.confirm){
											uni.navigateTo({
												url:'/pages/certificate/apply'
											})
										}
									},
									fail: () => {},
									complete: () => {}
								});
							}
						}
						uni.hideLoading();
						this.$set(navItem, 'loaded', true);
					})
					.catch(e => {
						console.log(e);
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.success {
		padding: 30rpx;
	}

	.item {
		background-color: #FFF;
		padding: 30rpx;
		border-radius: 20rpx;
		.avatar {
			width: 160rpx;
			height: 215rpx;
			background-color: red;
			border-radius: 20rpx;
		}

		.item-content {
			padding-left: 30rpx;
			flex-grow: 1;
			font-size: $font-lg;

			.item-tip {
				font-size: $font-sm;
				margin-top: 20rpx;
				color: #99999999;
				.type{
					font-size: $font-base;
				}
			}
		}
		.item-status{
			text-align: right;
			align-self:stretch ;
			flex-shrink: 0;
			.level{
				font-size: $font-lg;
				color: $color-red;
			}
			.buttom{
				position: absolute;
				bottom: 0;
				right: 0;
				flex-shrink: 0;
				color: #FFF;
				background-color: $uni-color-primary;
				line-height: 1;
				padding:.5em ;
				border-radius: 10rpx;
				width: 3em;
				height: 3em;
			}
		}
	}
</style>