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"
				@click="bannerClick"
				:autoplay="true"
				:interval="2000"
				:duration="200"
				:circular="true"
				imgMode="scaleToFill"
				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">我的PERILL评估：<span>{{perillPJ.sum||0}}</span></view>
				<view class="preill-box-state adfacjb">
					<view class="preill-box-state-pre adfac grey">我收到：<span>{{perillPJ.received||0}}</span></view>
					<view class="preill-box-state-pre adfac yellow">我创建：<span>{{perillPJ.created||0}}</span></view>
				</view>
				<view class="preill-box-progress">
					<view class="preill-box-progress-current pbp-yellow" :style="{'width':((perillPJ.received||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 class="preill-box-state-pre adfac grey">我生成：<span>{{perillBG.generated||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 bp1" @click="testShow=true">
				<view class="boxs-pre-title">AI教练对话</view>
				<!-- <view class="boxs-pre-tip adfac">点击开始<image :src="imgBase+'home_arrow_right.png'"></image></view> -->
				<view class="boxs-pre-tip adfac">即将上线，敬请期待</view>
			</view>
			<view class="boxs-pre bp2" @click="toTurn('/pagesHome/weixin')">
				<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="openHtml('PERILL团队发展动态评估系统介绍.html')">
					<image :src="imgBase+'home_img_pinggu.png'"></image>
					<text>PERILL倍力团队六维评估介绍</text>
				</view>
				<view class="common-menu-pre adffcac" @click="openHtml('PERILL团队发展动态评估系统使用说明.html')">
					<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 class="common-menu-pre adffcac" @click="openHtml('PERILL常见问题与支持.html')">
					<image :src="imgBase+'home_img_qywx.png'" style="width: 74rpx;"></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">原价699/次</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>
		<view class="kind-reminder adffcacjc" v-if="testShow">
			<view class="kr-box adffcac">
				<view class="kr-title">温馨提示</view>
				<view class="kr-p" style="margin-top: 54rpx;">功能测试中，即将上线，敬请期待！</view>
				<view class="kr-btn" @click="testShow=false">确定</view>
			</view>
		</view>
		<Tabbar :tabbarIndex="0"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/CusTabbar/index.vue'
	import { resolveHomeBannerAction } from '@/utils/homeBannerAction.js'
	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,
				testShow: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})=>{
						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:{
			openHtml(filename){
				uni.navigateTo({
					url:'/pages/webView?src='+encodeURIComponent(this.$htmlUrl(filename))
				})
			},
			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){
						const list = res.data.filter(l=>l.enable==1);
						this.bannerOrigin = list;
						this.bannarList = list.map(d=>d.fileUrl);
					} else this.bannarList = [this.defaultBanner]
				})
			},
			bannerClick(e){
				const action = resolveHomeBannerAction(this.bannerOrigin[e])
				if(!action) return
				if(action.type==='html') return this.openHtml(action.filename)
				if(action.type==='web') return uni.navigateTo({
					url:'/pages/webView?src='+action.url
				})
				if(action.type==='miniProgram') return uni.navigateToMiniProgram({
					appId:action.appId
				})
			},
			toTurn(url){
				if(!url) return 
				const notloginurls = ['/pages/dialog','/pagesHome/weixin',];
				if(!notloginurls.includes(url)&&!this.isLogin()) return
				uni.navigateTo({
					url
				})
			},
			getPerillPJ(){
				this.$api.get('/core/teammember/que/questionnaireStats').then(res=>{
					if(res.data.code!==0) return
					const stats = res.data.data||{};
					const hasUsableStats = stats.participated !== undefined
						&& stats.received !== undefined
						&& stats.created !== undefined
						&& (Number(stats.participated||0) > 0
							|| Number(stats.received||0) > 0
							|| Number(stats.created||0) > 0);
					if(hasUsableStats){
						this.perillPJ = Object.assign({}, stats, {sum:Number(stats.participated||0)});
						return;
					}
					this.loadPerillStatsFallback();
				})
			},
			loadPerillStatsFallback(){
				Promise.all([
					this.$api.get('/core/teammember/que/listByUser'),
					this.$api.get('/core/teammember/que/personalList',{teamName:''}),
					this.$api.get('/core/teammember/que/createList',{teamName:''})
				]).then(([participatedRes, receivedRes, createdRes])=>{
					const uniqueTaskCount = response => {
						const result = response && response.data && response.data.code===0
							? response.data.data : [];
						return new Set((result||[]).map(item =>
							item.teamQuestionnaireId || item.team_questionnaire_id || item.id
						).filter(Boolean)).size;
					};
					const participated = uniqueTaskCount(participatedRes);
					this.perillPJ = {
						participated,
						received:uniqueTaskCount(receivedRes),
						created:uniqueTaskCount(createdRes),
						sum:participated
					};
				}).catch(()=>{
					this.perillPJ = {participated:0,received:0,created:0,sum: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);
					this.perillBG.sum = (this.perillBG?.received||0)+(this.perillBG?.generated||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'
				})
			},
			onShareAppMessage() {
				const sharerId = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo'))?.id || '' : '';
				return {
					title: '致力于帮助企业打造高价值创造团队',
					path: `/pages/home?shareUserId=${sharerId}&shareType=Forward`,
					imageUrl: this.$imgBase + 'share_fm.png'
				};
			},
			onShareTimeline() {
				const sharerId = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo'))?.id || '' : '';
				return {
					title: '致力于帮助企业打造高价值创造团队',
					query: `shareUserId=${sharerId}&shareType=Forward`,
					imageUrl: this.$imgBase + 'share_fm.png'
				};
			}
		}
	}
</script>

<style scoped lang="scss">
		@import '../static/_asset-config';
::v-deep .u-swiper{
		border-radius: 24rpx !important;
	}
	::v-deep .indicator__dot{
		width: 10rpx;
		height: 10rpx;
		background: transparent;
		border: 2rpx solid #FFFFFF;
		border-radius: 50%;
		margin: 0 7rpx;
	}
	::v-deep .indicator__dot--active{
		width: 10rpx;
		height: 10rpx;
		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: asset-image('home_box_bg1.png') no-repeat;
					background-size: 100% 100%;
				}
				&.bp2{
					background: asset-image('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% / 4);
					image{
						width: 64rpx;
						height: 64rpx;
					}
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #193D59;
						line-height: 32rpx;
						text-align: center;
						margin-top: 24rpx;
						padding: 0 4rpx;
					}
				}
			}
		}
	
		.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: asset-image('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: asset-image('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: asset-image('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: asset-image('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>