ChuangHengWx/pages/home.vue

<template>
	<view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<u-navbar bgColor="transparent">
			<view class="u-nav-slot" slot="left" style="display: flex;background-color: transparent;">
				<image :src="imgBase+'home_logo.png'" style="width: 200rpx;height: 54rpx;margin-left: 12rpx;"></image>
			</view>
		</u-navbar>
		<div class="lunbo">
			<u-swiper
				:list="bannarList"
				@change="e => current = e.current"
				:autoplay="false"
				height="368rpx"
			>
				<template #indicator>
					<view class="indicator adf">
						<view class="indicator__dot" v-for="(item, index) in bannarList" :key="index"
							:class="[index === current && 'indicator__dot--active']">
						</view>
					</view>
				</template>
			</u-swiper>
		</div>
		<div class="preill adfacjb">
			<div class="preill-box">
				<div class="preill-box-title">我的PREILL评估</div>
				<div class="preill-box-num">{{3}}</div>
				<div class="preill-box-state adfacjb">
					<div class="preill-box-state-pre adfac grey">已完成：<span>{{2}}</span></div>
					<div class="preill-box-state-pre adfac yellow">待完成：<span>{{1}}</span></div>
				</div>
				<div class="preill-box-progress">
					<div class="preill-box-progress-current pbp-yellow" :style="{'width':(2/(2+1)*100)+'%'}"></div>
				</div>
			</div>
			<div class="preill-box">
				<div class="preill-box-title">我的PREILL报告</div>
				<div class="preill-box-num">{{3}}</div>
				<div class="preill-box-state adfacjb">
					<div class="preill-box-state-pre adfac green">我收到：<span>{{2}}</span></div>
					<div class="preill-box-state-pre adfac grey">我发送：<span>{{1}}</span></div>
				</div>
				<div class="preill-box-progress">
					<div class="preill-box-progress-current pbp-green" :style="{'width':(2/(2+1)*100)+'%'}"></div>
				</div>
			</div>
		</div>
		<div class="boxs adfacjb">
			<div class="boxs-pre bp1">
				<div class="boxs-pre-title">AI督导对话</div>
				<div class="boxs-pre-tip">全球顶尖团队教练</div>
			</div>
			<div class="boxs-pre bp2">
				<div class="boxs-pre-title">人工报告解读</div>
				<div class="boxs-pre-tip">团队诊断和提升</div>
			</div>
		</div>
		<div class="common">
			<div class="common-title">常用功能</div>
			<div class="common-menu adf">
				<div class="common-menu-pre adffcac">
					<image :src="imgBase+'home_img_pinggu.png'"></image>
					<text>PREILL评估</text>
				</div>
				<div class="common-menu-pre adffcac">
					<image :src="imgBase+'home_img_baogao.png'"></image>
					<text>PREILL报告</text>
				</div>
				<div class="common-menu-pre adffcac">
					<image :src="imgBase+'home_img_guanli.png'"></image>
					<text>问卷管理</text>
				</div>
			</div>
		</div>
		<Tabbar :tabbarIndex="0"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/CusTabbar/index.vue'
	export default {
		components:{ Tabbar },
		data(){
			return {
				current:0,
				bannarList:[
					this.$imgBase+'home_lb.png',
					this.$imgBase+'home_lb.png',
					this.$imgBase+'home_lb.png'
				]
			}
		},
		onLoad(options) {
			if(options.q){
				try{
					const decodedUrl = decodeURIComponent(options.q);
					const codeMatch = decodedUrl.match(/type=([^&]+)/);
					const stationCode = codeMatch ? codeMatch[1] : null;
					if(stationCode) uni.setStorageSync('channelType',stationCode)
				}catch(e){
					console.log(e,'e');
				}
			}
			
			if(uni.getStorageSync('token')){
				this.getWjList();
				this.getReportList();
			}
		},
		methods:{
			toTurn(url){
				if(!url) return 
				if(url!=='/pages/dialog'&&!this.isLogin()) return
				uni.navigateTo({
					url
				})
			},
			getWjList(){
				this.$api.get('/core/teammember/que/listByUser').then(res=>{
					if(res.data.code!==0) return
					this.wjDwc = res.data.data.filter(d=>d.status===0).length;
					this.wjYwc = res.data.data.filter(d=>d.status===1).length;
				})
			},
			getReportList(){
				this.$api.get('/core/report/member/personalReportList').then(res=>{
					if(res.data.code!==0) return
					this.reportCount = res.data.data.length;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .indicator__dot{
		width: 12rpx;
		height: 12rpx;
		background: transparent;
		border: 2rpx solid #FFFFFF;
		border-radius: 6rpx;
		margin: 0 8rpx;
	}
	::v-deep .indicator__dot--active{
		width: 12rpx;
		height: 12rpx;
		background: #FFFFFF;
	}
	
	.tabPage{
		background-image: linear-gradient(to bottom,#EAE7FC 500rpx,#F6F4FF 744rpx,#F7F7F7 100%);
		.topbg{
			width: 100%;
			height: 720rpx;
			position: fixed;
			top: 0;
			left: 0;
		}
	
		.lunbo{
			width: 100%;
			height: 368rpx;
			margin-top: 30rpx;
			position: relative;
		}
	
		.preill{
			margin-top: 30rpx;
			position: relative;
			&-box{
				width: calc(50% - 11rpx);
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 36rpx 24rpx 26rpx;
				box-sizing: border-box;
				&-title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #002846;
					line-height: 28rpx;
				}
				&-num{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 800;
					font-size: 40rpx;
					color: #002846;
					line-height: 40rpx;
					margin-top: 24rpx;
				}
				&-state{
					margin-top: 30rpx;
					&-pre{
						padding-left: 16rpx;
						position: relative;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #657588;
						line-height: 20rpx;
						span{
							color: #1D2129;
						}
						&::before{
							content: '';
							width: 10rpx;
							height: 10rpx;
							border-radius: 5rpx;
							position: absolute;
							left: 0;
							top: 50%;
							margin-top: -5rpx;
						}
						&.grey{
							&::before{
								background: #DDE0E6;
							}
						}
						&.yellow{
							&::before{
								background: #FFD750;
							}
						}
						&.green{
							&::before{
								background: #31D1D6;
							}
						}
					}
				}
				&-progress{
					margin-top: 20rpx;
					width: 100%;
					height: 10rpx;
					background: #DFE5EE;
					border-radius: 5rpx;
					position: relative;
					&-current{
						height: 10rpx;
						border-radius: 4rpx;
						position: absolute;
						left: 0;
						top: 0;
					}
					.pbp-yellow{
						background: #FFD750;
					}
					.pbp-green{
						background: #31D1D6;
					}
				}
			}
		}
	
		.boxs{
			margin-top: 20rpx;
			&-pre{
				width: calc(50% -11rpx);
				padding: 36rpx 124rpx 36rpx 24rpx;
				box-sizing: border-box;
				height: 184rpx;
				&-title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #002846;
					line-height: 45rpx;
				}
				&-tip{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #657588;
					line-height: 33rpx;
					margin-top: 20rpx;
				}
				&.bp1{
					background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/home_box_bg1.png') no-repeat;
					background-size: 100% 100%;
				}
				&.bp2{
					background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/home_box_bg2.png') no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	
		.common{
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 40rpx 24rpx 48rpx;
			&-title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 34rpx;
				color: #002846;
				line-height: 48rpx;
			}
			&-menu{
				margin-top: 45rpx;
				&-pre{
					width: calc(100% / 3);
					image{
						width: 62rpx;
						height: 62rpx;
					}
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #193D59;
						line-height: 26rpx;
						text-align: center;
						margin-top: 27rpx;
					}
				}
			}
		}
	}
</style>