ChuangHengWx/pages/home.vue

<template>
	<view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<!-- <cus-header title='创衡汇教练AI智能体' bgColor="transparent" :showback="false"></cus-header> -->
		<u-navbar bgColor="transparent">
			<view class="u-nav-slot" slot="left" style="display: flex;background-color: transparent;">
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/01/ed8615d1-5cf5-4bfd-977a-c654b2eb6560.png" style="width: 200rpx;height: 54rpx;"></image>
			</view>
		</u-navbar>
		<image class="topbg" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/dbb693be-c302-4848-8e2e-a4eb263aa60c.png"></image>
		<div class="home_top">
			<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/12c326b4-7328-4282-9175-a87903adbf12.png"></image>
			<p>Hi，我是AI团队教练助手</p>
			<p class="tip">可以为你提供全方位多角度的PREILL团队分析</p>
		</div>
		<div class="order">
			<div class="pre" @tap="toTurn('/pages/questionnaire')">
				<div class="top">
					<div class="left">
						<p>我的问卷</p>
						<p>{{wjDwc}}/{{wjYwc}}</p>
					</div>
					<div class="right">
						<p>待完成：<span>{{wjDwc}}</span></p>
						<p>已完成：<span>{{wjYwc}}</span></p>
					</div>
				</div>
				<div class="bottom">
					<div class="jd" :style="{'width':(wjDwc/(wjDwc+wjYwc)*100)+'%'}"></div>
				</div>
			</div>
			<div class="pre" @tap="toTurn('/pages/report')">
				<div class="top">
					<div class="left">
						<p>我的报告</p>
						<p>{{bgGr+bgTd}}</p>
					</div>
					<div class="right"></div>
				</div>
				<div class="bottom" style="margin-top: 40rpx;">
					<div class="jd green" :style="{'width':(bgGr/(bgGr+bgTd)*100)+'%'}"></div>
				</div>
			</div>
		</div>
		<div class="title">快速访问</div>
		<div class="menus adfacjb">
			<div class="m_pre adffcacjc" @tap="toTurn('/pages/dialog')">
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/b86ddd7a-6111-48d8-a9db-54a62a3446c4.png"></image>
				<p>智能问答</p>
			</div>
			<div class="m_pre adffcacjc" @tap="toTurn('/pages/report')">
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/35023203-f2d3-4c09-bd13-31047ec68d9e.png"></image>
				<p>我的报告</p>
			</div>
			<div class="m_pre adffcacjc" @tap="toTurn('/pages/questionnaire')">
				<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/79bf1765-b520-43c7-9ed0-ab1d1a84fe64.png"></image>
				<p>我的问卷</p>
			</div>
		</div>
		<Tabbar :tabbarIndex="0"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/CusTabbar/index.vue'
	export default {
		components:{ Tabbar },
		data(){
			return {
				wjDwc:0,
				wjYwc:0,
				bgGr:0,
				bgTd:0
			}
		},
		onLoad() {
			this.getWjList();
			this.getReportList2();
			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.$showToast(res.data.msg)
					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/2').then(res=>{
					if(res.data.code!==0) return
					this.bgGr = res.data.data.filter(d=>d.type==2).length;
				})
			},
			getReportList2(){
				this.$api.get('/core/report/member/personalReportList/1').then(res=>{
					if(res.data.code!==0) return
					this.bgTd = res.data.data.filter(d=>d.type==1).length;
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.tabPage{
		background: #FFFFFF;
		padding: 0 30rpx 192rpx;
		box-sizing: border-box;
		
		.topbg{
			width: 100%;
			height: 720rpx;
			position: fixed;
			top: 0;
			left: 0;
		}
	
		.home_top{
			width: 100%;
			height: 288rpx;
			position: relative;
			background:url(https://transcend.ringzle.com/xiaozhi-app/profile/2025/06/16/537756e6-f473-479e-ab0a-1a56cce38cd2.png) no-repeat;
			background-size: 100% 100%;
			padding-left: 275rpx;
			box-sizing: border-box;
			padding-top: 71rpx;
			margin-top: 52rpx;
			&>image{
				width: 184rpx;
				height: 312rpx;
				position: absolute;
				left: 31rpx;
				bottom: 19rpx;
			}
			&>p{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 34rpx;
				color: #252525;
				line-height: 48rpx;
				&.tip{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #6B7280;
					line-height: 40rpx;
					margin-top: 11rpx;
				}
			}
		}
	
		.order{
			display: flex;
			justify-content: space-between;
			position: relative;
			margin-top: 20rpx;
			position: relative;
			.pre{
				width: calc(50% - 9rpx);
				background: linear-gradient( 180deg, #FFFFFF 0%, #FFFFFF 100%);
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131,52,120,0.08);
				border-radius: 12rpx;
				padding: 40rpx 24rpx;
				box-sizing: border-box;
				.top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						p{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #252525;
							line-height: 28rpx;
							&:last-child{
								font-family: DINAlternate, DINAlternate;
								font-weight: bold;
								font-size: 40rpx;
								color: #333333;
								line-height: 40rpx;
								margin-top: 30rpx;
							}
						}
					}
					.right{
						p{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #657588;
							position: relative;
							padding-left: 16rpx;
							&::before{
								content: '';
								width: 10rpx;
								height: 10rpx;
								background: #FEA400;
								border-radius: 50%;
								position: absolute;
								left: 0;
								top: 50%;
								margin-top: -5rpx;
							}
							&.gr::before{
								background: #31D1D6;
							}
							&:last-child{
								margin-top: 44rpx;
								&::before{
									background: #DDE0E6;
								}
							}
							span{
								color: #1D2129;
							}
						}
					}
				}
				.bottom{
					width: 100%;
					height: 10rpx;
					background: #DFE5EE;
					border-radius: 3rpx;
					margin-top: 30rpx;
					position: relative;
					.jd{
						height: 10rpx;
						background: #FEA400;
						border-radius: 3rpx;
						position: absolute;
						left: 0;
						top: 0;
						&.green{
							background: #31D1D6;
						}
					}
				}
			}
		}
	
		&>.title{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 34rpx;
			color: #111111;
			line-height: 48rpx;
			margin-top: 44rpx;
		}
		
		.menus{
			margin-top: 64rpx;
			.m_pre{
				width: calc(100% / 3);
				image{
					width: 110rpx;
					height: 110rpx;
				}
				p{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #252525;
					line-height: 37rpx;
					text-align: center;
					margin-top: 24rpx;
				}
			}
		}
	}
</style>