zhengbasai/pages/rongyu/components/ZhengShu.vue

<template>
	<div>
		<div class="list">
			<div class="title">我的证书</div>
			<!-- 			<div class="tab_list">
				<div :class="['item',curTab==0 ?'actived':'' ]" @click="changeTab(0)">
					证书种类
				</div>
				<div :class="['item',curTab==1 ?'actived':'' ]" @click="changeTab(1)">
					证书种类2
				</div>
				<div :class="['item',curTab==2 ?'actived':'' ]" @click="changeTab(2)">
					证书种类3
				</div>
				<div :class="['item',curTab==3 ?'actived':'' ]" @click="changeTab(3)">
					证书种类4
				</div>
			</div> -->
		
			<div class="zs_list" v-if="list.length>0">

				<u-grid :col="2" :border="false">

					<u-grid-item :custom-style="{'padding-bottom':'0px'}" @click="zsDetail(item)" v-for="item in list"
						:key="item.id">
						<div class="zs">
							<image :src="item.cover" mode="aspectFit"></image>
							<div class="line"></div>
							<div class="pop" v-if="myZs.xuefen <item.min_xuefen">
								<div>还差{{item.min_xuefen - myZs.xuefen}}学分</div>
							</div>
						</div>
						<div class="desc">
							<div class="name">{{item.name}}</div>
							<div class="get" v-if="myZs.xuefen >=item.min_xuefen">（已获得）</div>
							<div class="get" v-else></div>
						</div>
					</u-grid-item>
				</u-grid>
			</div>
			<div class="empty_image" v-else>
				<u-empty text="暂无记录"></u-empty>
			</div>
		</div>
	</div>
</template>
<script>
	export default {

		data() {
			return {
				curTab: 0,
				page: 1,
				last: false,
				list: [],
				myZs: {}
			}
		},
		created() {
			this.getZsList()
			this.getMyZs()
		},
		onReachBottom() {
			if (!this.last) {
				this.page++
			}
			this.getList()
		},
		methods: {
			zsDetail(item) {
				if (this.myZs.xuefen - item.min_xuefen < 0) {
					this.$u.toast('您还差' + (item.min_xuefen - this.myZs.xuefen) + '学分获得《' + item.name + "》")
					return
				}
				localStorage.setItem('zhengshu',JSON.stringify(item))
				uni.navigateTo({
					url: '/pages/rongyu/detail'
				})
			},
			//我的证书
			getMyZs() {
				this.$u.get('/dwbs/zhengshu/me').then(res => {
					this.myZs = res.data
				})
			},
			//重置列表请求
			resetList() {
				this.page = 1
				this.last = false
				this.list = []
				this.getZsList()
			},
			getZsList() {
				this.$u.get('/dwbs/zhengshus').then(res => {
					console.log(res, 'list')
					let data = res.data.data
					if (this.page > 1 && data.length == 0) {
						uni.showToast({
							title: '暂无更多',
							icon: 'none'
						})
						this.last = true
					} else {
						this.list = this.list.concat(data)
					}
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.list {
		padding: 16px;

		.title {
			height: 24px;
			border-left: 5px solid #F5222D;
			padding-left: 11px;
			line-height: 24px;
			font-size: 19px;

			color: #F5222D;
		}

		.zs_list {
			.u-grid-item-box {
				padding-bottom: 0px !important;
			}

			.zs {
				background-color: #f5f5f5;
				height: 214px;
				padding: 10px 15px;
				position: relative;

				image {
					height: 204px;
					width: 124px;
				}

				.line {
					position: absolute;
					left: 0;
					bottom: 0;
					height: 10px;
					width: 100%;
					background: linear-gradient(90deg, #FB7B58 0%, #F5222D 97%);
				}

				.pop {
					position: absolute;
					height: 100%;
					width: 100%;
					background-color: rgba(0, 0, 0, 0.5);
					left: 0;
					top: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					font-size: 18px;
				}
			}

			.desc {
				padding-top: 10px;

				.name {
					font-size: 16px;
					color: #707070;
					text-align: center;
				}

				.get {
					font-size: 12px;
					color: #999999;
					height: 18px;
				}
			}

		}

	}

	.tab_list {
		margin-top: 13px;
		display: flex;


		.item,
		.actived {
			flex: 1;
			margin-right: 6px;
			border-radius: 5px;
			opacity: 1;
			box-sizing: border-box;
			height: 27px;
			line-height: 27px;
			border: 1px solid #999999;
			text-align: center;
			font-size: 14px;
			color: #999999;
		}

		.item:last-child {
			margin-right: 0;

		}

		.actived {
			background: linear-gradient(90deg, #FB7B58 0%, #F5222D 97%);
			color: #FFFFFF;
			border: none;
		}
	}
</style>