zhgdyunapp_vue3/pages/businessCenter/index.vue

<template>
	<view class="businessCenter">
		<view class="fixedheader">
			<headers  :themeType="true">
			<view class="headerName">
				一期项目
			</view>
		</headers>
		</view>
		
		<view class="search-box">
			<view class="search-input">
				<uni-icons2 class="search-icon" type="search" color="#fff" size="14"></uni-icons2>
				<input type="text" placeholder="请输入内容" />
			</view>
		</view>
		<scroll-view class="scrollx-wrap" scroll-x>
			<view class="nav-list flex">
				<view
					class="nav-item"
					:class="{'nav-active': activeNav == index}"
					:id="'nav-'+index"
					v-for="(item,index) in list" :key="index" @tap="checkNav(index)"
					v-show="item.menuList&&item.menuList.length>0">
					{{item.moduleName}}
				</view>
			</view>
		</scroll-view>
		<scroll-view class="scrolly-wrap" :scroll-into-view="moduleIntoView" :style="{'padding-bottom': statusBarHeight + 'px'}" scroll-y>
			<view id="scroll-panel">
				<view class="moudle-box" :id="'module-'+index"
					v-for="(item,index) in list" :key="index"
					v-show="item.menuList&&item.menuList.length>0">
					<view class="moudle-title">{{item.moduleName}}</view>
					<view class="moudle-list flex">
						<view class="moudle-item" v-for="(itm, idx) in item.menuList" :key="idx" @click="goMoudleFn(itm)">
							<image v-if="itm.icon" :src="'/static/businessCenter/' + itm.icon + '.png'"></image>
							<uni-icons2 v-else type="image" size="30" color="#ccc"></uni-icons2>
							<text>{{itm.menuName}}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<footers2 :tabIndex="2"></footers2>
	</view>
</template>

<script>
	import headers from "../../components/headers/headers.vue"
	import footers2 from '../../components/footers/footers2.vue'
	export default{
		data(){
			return{
				activeNav: 0,
				statusBarHeight: 0,
				list: [],
				userInfo: {},
				accountType: "",
				systemInfo: ""
			}
		},
		components:{
			footers2,
			headers
		},
		computed:{
			moduleIntoView() {
				return `module-${this.activeNav}`;
			}
		},
		onShow(){
			this.statusBarHeight=uni.getStorageSync('systemInfo').statusBarHeight;
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			this.accountType = this.userInfo.accountType
			this.list = this.userInfo.menuAuthority.moduleList.filter((item)=>{
				return item.moduleType == 2
			})
			console.log(this.list)
		},
		mounted(){
		},
		methods:{
			checkNav(val){
				console.log(val)
				this.activeNav = val
				console.log(this.activeNav)
			},
			goMoudleFn(item){
				console.log('item.appPath', item.appPath)
				if(item.appPath){
					uni.navigateTo({
						url: item.appPath
					})
				} else{
					uni.showToast({
						icon: 'none',
						title: '该产品暂未开放，敬请期待！'
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.businessCenter{
	height: 100%;
	.search-box{
		height: 80rpx;
		width: 100%;
		background: #2b8df3;
		padding-top: 10rpx;
		color: #fff;
		border-radius: 0 0 50rpx 50rpx;
		.search-input{
			width: 235px;
			height: 52rpx;
			margin: 0 auto;
			position: relative;
			.search-icon{
				position: absolute;
				left: 18rpx;
				top: 50%;
				transform: translateY(-50%);
			}
			uni-input{
				width: 235px;
				height: 52rpx;
				color: #fff;
				border-radius: 26rpx;
				margin: 0 auto;
				padding-left: 60rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				background: rgba(255,255,255,0.3);
				.uni-input-placeholder{
					color: rgba(255,255,255,0.6);
				}
			}
		}
	}
	.scrollx-wrap{
		width: 100%;
	}
	.flex{
		display: flex;
		align-items: center;
	}
	.nav-list{
		flex-wrap: nowrap;
		padding-top: 16rpx;
		.nav-item{
			white-space: nowrap;
			padding: 0 30rpx;
			font-size: 28rpx;
			padding-bottom: 10rpx;
			position: relative;
		}
		.nav-active::before{
			content: "";
			position: absolute;
			bottom: 0;
			left: 50%;
			height: 4rpx;
			width: 18rpx;
			transform: translateX(-50%);
			background: #2b8df3;
		}
	}
	.scrolly-wrap{
		height: calc(100% - 171px);
		box-sizing: border-box;
	}
	.moudle-box{
		padding-left: 30rpx;
		font-size: 28rpx;
		padding-bottom: 30rpx;
		.moudle-title{
			font-weight: 600;
			padding-top: 30rpx;
		}
		.moudle-list{
			flex-wrap: wrap;
			.moudle-item{
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding-top: 30rpx;
				uni-image{
					width: 92rpx;
					height: 92rpx;
					display: block;
					margin-bottom: 12rpx;
				}
				.uni-icons{
					width: 92rpx;
					height: 92rpx;
					display: block;
					line-height: 92rpx;
					margin-bottom: 12rpx;
				}
			}
		}
	}
}
</style>