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: 375rpx;height: 54rpx;margin-left: 12rpx;"></image>
			</view>
		</u-navbar>
		<image class="topbg" :src="imgBase+'home_top_bg.png'" mode="widthFix"></image>
		<view class="lunbo">
			<u-swiper
				:list="bannarList"
				@change="e => current = e.current"
				:autoplay="true"
				:interval="2000"
				:duration="200"
				:circular="true"
				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>
		</view>
		<view class="preill adfacjb">
			<view class="preill-box" @click="toTurn('/pagesHome/questionnaire?type=receive')">
				<view class="preill-box-title">我的PREILL评估：<span>{{perillPJ.sum||0}}</span></view>
				<view class="preill-box-state adfacjb">
					<view class="preill-box-state-pre adfac grey">已完成：<span>{{perillPJ.completed||0}}</span></view>
					<view class="preill-box-state-pre adfac yellow">待完成：<span>{{perillPJ.uncompleted||0}}</span></view>
				</view>
				<view class="preill-box-progress">
					<view class="preill-box-progress-current pbp-yellow" :style="{'width':((perillPJ.completed||0)/(perillPJ.sum||9999)*100)+'%'}"></view>
				</view>
			</view>
			<view class="preill-box" @click="toTurn('/pagesHome/report')">
				<view class="preill-box-title">我的PREILL报告：<span>{{perillBG.sum||0}}</span></view>
				<view class="preill-box-state adfacjb">
					<view class="preill-box-state-pre adfac green">我收到：<span>{{perillBG.received||0}}</span></view>
					<view class="preill-box-state-pre adfac grey">我发送：<span>{{perillBG.sent||0}}</span></view>
				</view>
				<view class="preill-box-progress">
					<view class="preill-box-progress-current pbp-green" :style="{'width':(perillBG.received||0/(perillBG.sum||9999)*100)+'%'}"></view>
				</view>
			</view>
		</view>
		<view class="boxs adfacjb">
			<view class="boxs-pre bp1" @click="toTurn('/pages/dialog')">
				<view class="boxs-pre-title">AI教练对话</view>
				<view class="boxs-pre-tip adfac">点击开始<image :src="imgBase+'home_arrow_right.png'"></image></view>
			</view>
			<view class="boxs-pre bp2" @click="toTurn('/pages/support')">
				<view class="boxs-pre-title">专业支持</view>
				<view class="boxs-pre-tip adfac">添加客服微信预约<image :src="imgBase+'home_arrow_right.png'"></image></view>
			</view>
		</view>
		<view class="common">
			<view class="common-title">常用功能</view>
			<view class="common-menu adf">
				<view class="common-menu-pre adffcac" @click="toTurn('/pagesHome/questionnaire?type=receive')">
					<image :src="imgBase+'home_img_pinggu.png'"></image>
					<text>PERILL团队发展动态评估</text>
				</view>
				<view class="common-menu-pre adffcac" @click="toTurn('/pagesHome/report')">
					<image :src="imgBase+'home_img_baogao.png'"></image>
					<text>PERILL团队发展动态评估报告</text>
				</view>
				<view class="common-menu-pre adffcac" @click="toTurn('/pagesHome/questionnaire?type=create')">
					<image :src="imgBase+'home_img_guanli.png'"></image>
					<text>问卷管理</text>
				</view>
			</view>
		</view>
		<view class="new-user-free adffcacjc" v-if="newUserFreeShow">
			<view class="new-user-free-box1">
				<view class="new-user-free-box1-text">PERILL团队发展动态评估</view>
				<view class="new-user-free-box1-text" style="margin-top: 8rpx;">基础版免费体验1次</view>
			</view>
			<view class="new-user-free-box2 adffcac">
				<view class="new-user-free-box2-price adfacjb">
					<view class="new-user-free-box2-price-left adffc">
						<view class="new-user-free-box2-price-left-title">仅限个人创建使用</view>
						<view class="new-user-free-box2-price-left-tip">领取后1年有效</view>
					</view>
					<view class="new-user-free-box2-price-right adffcac">
						<view class="new-user-free-box2-price-right-top">1次</view>
						<view class="new-user-free-box2-price-right-bottom">原价99</view>
					</view>
				</view>
				<view class="new-user-free-box2-btn" @click="handleFree">免费体验</view>
			</view>
			<image class="new-user-free-close" :src="imgBase+'new_free_close.png'" @click="newUserFreeShow=false"></image>
		</view>
		<view class="kind-reminder adffcacjc" v-if="teamKindShow">
			<view class="kr-box adffcac">
				<image :src="imgBase+'remind_close.png'" @click="teamKindShow=false"></image>
				<view class="kr-title">温馨提示</view>
				<view class="kr-p" style="margin-top: 32rpx;">{{teamKindMsg}}</view>
				<view class="kr-btn" @click="teamKindShow=false">我知道了</view>
			</view>
		</view>
		<view class="kind-reminder adffcacjc" v-if="questionnaireKindShow">
			<view class="kr-box adffcac">
				<image :src="imgBase+'remind_close.png'" @click="questionnaireKindShow=false"></image>
				<view class="kr-title">温馨提示</view>
				<view class="kr-p" style="margin-top: 32rpx;">你有一份<span>“PERILL团队发展动态评估（专业版）”</span>问卷待完成，请及时完成，</view>
				<view class="kr-p">以便我们为您提供精准分析</view>
				<view class="kr-btn" @click="handleToFill">去填写</view>
			</view>
		</view>
		<Tabbar :tabbarIndex="0"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/CusTabbar/index.vue'
	export default {
		components:{ Tabbar },
		data(){
			return {
				current:0,
				perillPJ:null,
				perillBG:null,
				defaultBanner:this.$imgBase+'home_lb.png',
				bannerOrigin:[],
				bannarList:[],
				newUserFreeShow:false,
				teamKindShow:false,
				teamKindMsg:'',
				questionnaireKindShow:false,
			}
		},
		onLoad(options) {
			this.getBannerList();
			if(options.q){
				try{
					const decodedUrl = decodeURIComponent(options.q);
					const codeMatch = decodedUrl.match(/type=([^&]+)/);
					const codeMatchId = decodedUrl.match(/shareUserId=([^&]+)/);
					const stationCode = codeMatch ? codeMatch[1] : null;
					const stationCodeId = codeMatchId ? codeMatchId[1] : null;
					if(stationCode) uni.setStorageSync('channelType',stationCode)
					if(stationCodeId){
						uni.setStorageSync('shareUserId',stationCodeId)
						uni.setStorageSync('channelType','Forward')
					} 
				}catch(e){
					console.log(e,'e');
				}
			}
			if(options.shareType) uni.setStorageSync('channelType',options.shareType)
			if(options.shareUserId) uni.setStorageSync('shareUserId',options.shareUserId)
			if(options.shareTQId) uni.setStorageSync('shareTQId',options.shareTQId)
			if(options.shareTQId||uni.getStorageSync('shareTQId')){
				// if(uni.getStorageSync('userInfo')&&uni.getStorageSync('shareUserId')==JSON.parse(uni.getStorageSync('userInfo')).id) return
				// 邀请进来的并且已经登录的
				if(uni.getStorageSync('userInfo')){
					
					this.$api.get('/wx/queShareCheck',{
						channelType:uni.getStorageSync('channelType')||'',
						phone:JSON.parse(uni.getStorageSync('userInfo')).mobile||'',
						referrerId:uni.getStorageSync('shareUserId')||'',
						teamQuestionnaireId:uni.getStorageSync('shareTQId')||'',
					}).then(({data:res})=>{
						this.$showModal(`queShareCheck接口入参channelType:${uni.getStorageSync('channelType')},
						referrerId:${uni.getStorageSync('shareUserId')},teamQuestionnaireId:${uni.getStorageSync('shareTQId')}
						------返回数据res:${JSON.stringify(res)}`)
						if(res.code!==0){
							this.teamKindMsg = res.msg||'';
							this.teamKindShow = true;
						}else if(res.code===0&&res.data==1) this.questionnaireKindShow = true;
					})
				}
			}
			if(uni.getStorageSync('token')){
				this.getPerillPJ();
				this.getPerillBG();
			}
			if(uni.getStorageSync('newUser')) this.newUserFreeShow = true;
		},
		methods:{
			getBannerList(){
				//space	广告位置: 1首页 2发布问卷
				//type	类型: 1 banner区 2弹框
				this.$api.get('//core/advertisement/manage/page',{
					space:1,
					type:1
				}).then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg)
					if(res.data&&res.data.length){
						this.bannerOrigin = res.data;
						this.bannarList = res.data.map(d=>d.fileUrl);
					} else this.bannarList = [this.defaultBanner]
				})
			},
			toTurn(url){
				if(!url) return 
				if(url!=='/pages/dialog'&&!this.isLogin()) return
				uni.navigateTo({
					url
				})
			},
			getPerillPJ(){
				this.$api.get('/core/teammember/que/questionnaireStats').then(res=>{
					if(res.data.code!==0) return
					this.perillPJ = res.data.data||{};
					this.perillPJ.sum = (this.perillPJ?.completed||0)+(this.perillPJ?.uncompleted||0);
				})
			},
			getPerillBG(){
				this.$api.get('/core/report/reportStats').then(res=>{
					if(res.data.code!==0) return
					this.perillBG = res.data.data||{};
					this.perillBG.sum = (this.perillBG?.received||0)+(this.perillBG?.sent||0);
				})
			},
			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;
				uni.navigateTo({
					url:'/pagesHome/questionnaire?type=receive'
				})
			},
			handleFree(){
				uni.reLaunch({
					url:'/pages/publish'
				})
			}
		}
	}
</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: #F7F7F7;
		.topbg{
			width: 100%;
			height: 720rpx;
			position: fixed;
			top: 0;
			left: 0;
			right: 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: 54rpx 24rpx 52rpx;
				box-sizing: border-box;
				&-title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #002846;
					line-height: 28rpx;
					span{
						font-size: 36rpx;
					}
				}
				&-num{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 800;
					font-size: 40rpx;
					color: #002846;
					line-height: 40rpx;
					margin-top: 24rpx;
				}
				&-state{
					margin-top: 46rpx;
					&-pre{
						padding-left: 16rpx;
						position: relative;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #335368;
						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: 24rpx;
					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;
			position: relative;
			&-pre{
				width: calc(50% - 11rpx);
				padding: 42rpx 0 0 20rpx;
				box-sizing: border-box;
				height: 184rpx;
				&-title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #E0EFEF;
					line-height: 45rpx;
				}
				&-tip{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #E0EFEF;
					line-height: 33rpx;
					margin-top: 16rpx;
					image{
						width: 26rpx;
						height: 26rpx;
						margin-left: 12rpx;
					}
				}
				&.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;
			position: relative;
			&-title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 34rpx;
				color: #002846;
				line-height: 48rpx;
			}
			&-menu{
				width: calc(100% + 48rpx);
				margin-left: -24rpx;
				margin-top: 45rpx;
				&-pre{
					width: calc(100% / 3);
					image{
						width: 64rpx;
						height: 64rpx;
					}
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #193D59;
						line-height: 32rpx;
						text-align: center;
						margin-top: 24rpx;
						padding: 0 24rpx;
					}
				}
			}
		}
	
		.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;
							text-decoration: line-through;
						}
					}
				}
				&-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: linear-gradient( 90deg, #33A7A7 0%, #64BBBB 100%);;
					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>