<template>
	<view style="min-height: 100vh;background-color: #f8f8f8;box-sizing: border-box;">
		<view class="content_wrapper">
			<view style="color: #444;font-size: 18px;font-weight: bold;line-height: 40px;">距离完成身份还差一步</view>
			<view style="color: #999;font-size: 12px;line-height: 20px;">
				我们针对不同身份的您，精心准备了定制功能，请选择您的身份分类
			</view>
		</view>
		<view class="content_wrapper">
			<view v-for="(item,index) in dataList" :key="index" class="list-item" @click="toDetail(item.url)">
				<view class="text-box">
					<view style="font-size: 14px;line-height: 22px;font-weight: bold;">{{item.title1}}</view>
					<view class="text">{{item.title2}}</view>
				</view>
				<image :src="item.img" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import loadmore from '@/components/template/loadmore.vue'
	export default {
		data() {
			return {
				page: 1,
				dataList: [
					{title1:"我是学生",title2:"I am a student",img:"../../static/Learning-cuate.png", url:'/pagesA/studentIdentification/studentIdentification'},
					{title1:"我是教师",title2:"I am a teacher",img:"../../static/Learning-pana.png", url:'/pagesA/identityList/teacherCertification'},
					{title1:"我是企业",title2:"I am an enterprise",img:"../../static/partner-rafiki.png", url:'/pages/mainPages/Settled/Settled'},
					{title1:"我是博主",title2:"I am a blogger",img:"../../static/Influencer-rafiki.png", url:'/pagesA/identityList/bloggerCertification'}
				]
			}
		},
		components: {
			loadmore
		},
		onShow() {
			// this.getList();
		},
		methods: {
			getList(){
				let _this = this;
				App._post_form('&p=student&do=campusActivitiesList', {page:_this.page, size: 10}, res => {
					if(_this.page===1){
						if(res.data.data.length>0){
							_this.setData({
								dataList: res.data.data
							})
						}
					}else{
						if(res.data.data.length>0){
							let dataList = _this.dataList.concat(res.data.data);
							_this.setData({
								dataList
							})
						}
					}
				}, false, err=>{
					
				});
			},
			toDetail(url){
				uni.navigateTo({
					url:url
				})
			}
		},
		onReachBottom(){
			this.page++;
			this.getList();
		}
	}
</script>

<style lang="scss">
.dis-flex{
	display: flex;
	align-items: center;
}
.content_wrapper{
	padding: 10px 20px;
	.list-item{
		display: flex;
		padding: 0px 15px;
		border-bottom: 1px solid #efefef;
		box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .05);
		margin-bottom: 40upx;
		border-radius: 10upx;
	}
	image{
		width: 180upx;
		height: 180upx;
		border-radius: 0upx;
		margin: 0px 0px 0px 10px;
	}
	.text-box{
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		line-height: 20px;
	}
	.text{
		display: -webkit-box;//将盒子转换为弹性盒子
		-webkit-box-orient: vertical;//文本显示方式，默认水平
		-webkit-line-clamp: 2;//设置显示多少行
		overflow: hidden;
		font-size: 13px;
		color: #999;
	}
}
</style>
