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" @click="toTurn('/pages/dialog')">
				<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>
		<div class="new-user-free adffcacjc" v-if="newUserFreeShow">
			<div class="new-user-free-box1">
				<div class="new-user-free-box1-text">PERILL评估</div>
				<div class="new-user-free-box1-text" style="margin-top: 8rpx;">基础版免费体验1次</div>
			</div>
			<div class="new-user-free-box2 adffcac">
				<div class="new-user-free-box2-price adfacjb">
					<div class="new-user-free-box2-price-left adffc">
						<div class="new-user-free-box2-price-left-title">仅限个人创建使用</div>
						<div class="new-user-free-box2-price-left-tip">领取后1年有效</div>
					</div>
					<div class="new-user-free-box2-price-right adffcac">
						<div class="new-user-free-box2-price-right-top">1次</div>
						<div class="new-user-free-box2-price-right-bottom">原价99</div>
					</div>
				</div>
				<div class="new-user-free-box2-btn">免费体验</div>
			</div>
			<image class="new-user-free-close" :src="imgBase+'new_free_close.png'" @click="newUserFreeShow=false"></image>
		</div>
		<div class="kind-reminder adffcacjc" v-if="teamKindShow">
			<div class="kr-box adffcac">
				<image :src="imgBase+'remind_close.png'" @click="teamKindShow=false"></image>
				<div class="kr-title">温馨提示</div>
				<div class="kr-p" style="margin-top: 32rpx;">您尚未加入<span>(问卷ID：{{87999}})</span>的团队</div>
				<div class="kr-p">因此无法填写此问卷</div>
				<div class="kr-p">请联系问卷创建者<span>{{'刘怡然'}}</span>将您加入团队</div>
				<div class="kr-btn" @click="teamKindShow=false">我知道了</div>
			</div>
		</div>
		<div class="kind-reminder adffcacjc" v-if="questionnaireKindShow">
			<div class="kr-box adffcac">
				<image :src="imgBase+'remind_close.png'" @click="questionnaireKindShow=false"></image>
				<div class="kr-title">温馨提示</div>
				<div class="kr-p" style="margin-top: 32rpx;">您有一份<span>“PERILL团队评估初级”</span>问卷待完成，请及时填写，</div>
				<div class="kr-p">以便我们为您提供精准分析</div>
				<div class="kr-btn" @click="handleToFill">去填写</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'
				],
				newUserFreeShow:false,
				teamKindShow:false,
				questionnaireKindShow:false,
			}
		},
		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;
				})
			},
			handleToFill(){
				this.questionnaireKindShow = false;
			}
		}
	}
</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;
					}
				}
			}
		}
	
		.new-user-free{
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: rgba(0, 0, 0, .6);
			z-index: 1000;
			&-box1{
				width: calc(100% - 180rpx);
				height: 280rpx;
				background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/new_free_title.png') no-repeat;
				background-size: 100% 100%;
				padding-left: 53rpx;
				&-text{
					font-family: SourceHanSansCN, SourceHanSansCN;
					font-weight: bold;
					font-size: 36rpx;
					color: #874016;
					line-height: 54rpx;
					margin-top: 140rpx;
				}
			}
			&-box2{
				width: calc(100% - 140rpx);
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 45rpx 25rpx 42rpx;
				box-sizing: border-box;
				&-price{
					width: 100%;
					height: 132rpx;
					background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/new_free_price.png') no-repeat;
					background-size: 100% 100%;
					padding: 27rpx 34rpx 27rpx 30rpx;
					box-sizing: border-box;
					&-left{
						&-title{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #5E2E11;
							line-height: 36rpx;
						}
						&-tip{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #808080;
							line-height: 32rpx;
							margin-top: 10rpx;
						}
					}
					&-right{
						&-top{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 48rpx;
							color: #FF5A09;
							line-height: 67rpx;
						}
						&-bottom{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #612D11;
							line-height: 33rpx;
							margin-top: 3rpx;
						}
					}
				}
				&-btn{
					width: calc(100% - 170rpx);
					height: 80rpx;
					border-radius: 40rpx;
					background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/new_free_btn.png') no-repeat;
					background-size: 100% 100%;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #5E2E11;
					line-height: 80rpx;
					text-align: center;
					letter-spacing: 2rpx;
					margin-top: 38rpx;
				}
			}
			&-close{
				width: 64rpx;
				height: 64rpx;
				margin-top: 48rpx;
			}
		}
	
		.kind-reminder{
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: 1000;
			background: rgba(0, 0, 0, .6);
			.kr-box{
				width: calc(100% - 100rpx);
				padding: 54rpx 60rpx 48rpx;
				box-sizing: border-box;
				background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/remind_bg.png') no-repeat;
				background-size: 100% 100%;
				position: relative;
				image{
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					top: 40rpx;
					right: 30rpx;
				}
				.kr-title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #002846;
					line-height: 56rpx;
					text-align: center;
				}
				.kr-p{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #002846;
					line-height: 48rpx;
					text-align: center;
					span{
						font-weight: bold;
						margin: 0 10rpx;
					}
				}
				.kr-btn{
					width: calc(100% - 80rpx);
					height: 88rpx;
					background: #904A87;
					border-radius: 44rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 88rpx;
					text-align: center;
					letter-spacing: 2rpx;
					margin-top: 66rpx;
				}
			}
		}
	}
</style>