ChuangHengWx/pages/my.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='我的' bgColor="transparent" :showback="false"></cus-header>
		<div class="info adffcacjc">
			<div class="i_avatar">
				<image src="@/static/avatar.png"></image>
			</div>
			<div class="i_name">{{userName}}</div>
			<div class="i_phone">手机号：{{mobile}}</div>
		</div>
		<div class="box">
			<div class="tabs adf">
				<div class="pre" :class="{'active':tidx===1}" @tap="changeTab(1)">收藏</div>
				<div class="pre" :class="{'active':tidx===2}" @tap="changeTab(2)">评论</div>
				<div class="pre" :class="{'active':tidx===3}" @tap="changeTab(3)">报告</div>
			</div>
			<div class="list" :style="{'height':'calc(100vh - '+(356+mt)+'px)'}">
				<block v-if="tidx===1">
					<u-list @scrolltolower="stCollect" v-if="collectList.length">
						<u-list-item v-for="(item, index) in collectList" :key="index">
							<div class="l_item adfacjb">
								<div class="li_l">
									<div class="title">{{'撰写企业管理方案'}}</div>
									<div class="intro">{{'帮我写一篇关于企业管理的方案'}}</div>
									<div class="date">{{'4/25'}}</div>
								</div>
								<div class="li_r"></div>
							</div>
						</u-list-item>
					</u-list>
					<template v-else>
						<page-empty :height="'calc(100vh - '+(356+mt)+'px)'"></page-empty>
					</template>
				</block>
				<block v-else-if="tidx===2">
					<u-list @scrolltolower="stComment" v-if="commentList.length"></u-list>
					<template v-else>
						<page-empty :height="'calc(100vh - '+(356+mt)+'px)'"></page-empty>
					</template>
				</block>
				<block v-else-if="tidx===3">
					<u-list @scrolltolower="stReport" v-if="reportList.length"></u-list>
					<template v-else>
						<page-empty :height="'calc(100vh - '+(356+mt)+'px)'"></page-empty>
					</template>
				</block>
			</div>
		</div>
		<Tabbar :tabbarIndex="2"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/CusTabbar/index.vue'
	import pageEmpty from '@/components/pageEmpty/index.vue'
	export default {
		components:{ Tabbar, pageEmpty },
		data(){
			return {
				userName:'',
				mobile:'',
				tidx:1,
				collectList:[],
				commentList:[],
				reportList:[],
			}
		},
		onLoad() {
			if(uni.getStorageSync('userInfo')){
				this.userName = JSON.parse(uni.getStorageSync('userInfo')).realName||'';
				this.mobile = JSON.parse(uni.getStorageSync('userInfo')).mobile||'';
			}
		},
		methods:{
			changeTab(index){
				this.tidx = index;
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		box-sizing: border-box;
		background: linear-gradient( 270deg, #EEEFF8 0%, #F6ECF4 100%, #F6ECF4 100%);
		.info{
			width: 100%;
			height: 410rpx;
			box-sizing: border-box;
			padding-bottom: 64rpx;
			.i_avatar{
				width: 188rpx;
				height: 188rpx;
				border-radius: 50%;
				background: #FFFFFF;
				margin-top: 30rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.i_name{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #252525;
				line-height: 40rpx;
				margin-top: 40rpx;
			}
			.i_phone{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #6B7280;
				line-height: 28rpx;
				margin-top: 20rpx;
			}
		}
	
		.box{
			width: 100%;
			border-radius: 32rpx 32rpx 0 0;
			background: #FFFFFF;
			.tabs{
				padding: 38rpx calc((100% - 510rpx) / 2) 40rpx;
				border-bottom: 1rpx solid #E5E7EB;
				.pre{
					width: 170rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #252525;
					line-height: 32rpx;
					text-align: center;
					position: relative;
					&.active{
						color: #761E6A;
						&::after{
							content:'';
							width: 120rpx;
							height: 4rpx;
							background: #833478;
							border-radius: 2rpx;
							position: absolute;
							left: 50%;
							margin-left: -60rpx;
							bottom: -40rpx;
						}
					}
				}
			}
		
			.list{
				overflow-y: auto;
				.l_item{
					padding: 30rpx 36rpx;
					border-bottom: 1rpx solid #E5E7EB;
					.li_l{
						width: calc(100% - 186rpx);
						.title{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #252525;
							line-height: 32rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.intro{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #252525;
							line-height: 32rpx;
							margin-top: 20rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.date{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #999999;
							line-height: 32rpx;
							margin-top: 28rpx;
						}
					}
					.li_r{
						width: 166rpx;
						height: 166rpx;
					}
				}
			}
		}
	}
</style>