renshouH5/pages/index/index.vue

<template>
	<view style="overflow: hidden;">
		<view class="top-fixed" :style="'height: '+ systems.barHeight + 'rpx;'">
			<view  :style="'line-height: '+ systems.navigationHeight + 'rpx;top:' + systems.ktxStatusHeight + 'rpx;height:'+systems.navigationHeight+'rpx;text-align: center;'">
				云助理主页
			</view>
		</view>
		<image class="indexBanner" src="../../static/images/indexBanner.png" mode="aspectFill"></image>
		
		<view style="margin-top: -100rpx;z-index: 3;position: relative;">
			<view v-for="item,index in menu" :key="index" class="card-box">
				<view class="card-title">{{item.name}}</view>
				<view class="card-item" v-for="it,idx in item.children" :key="idx+'iit'" @click="jumpLink(it)">
					<image class="card-item-icon" :src="it.pic" mode="aspectFill"></image>
					<view class="card-item-label">{{it.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const req = require('../../utils/request.js');
	const util = require('../../utils/util.js');
	var app = getApp();
	export default {
		data() {
			return {
				systems: {},
				menu:[]
			}
		},
		async onLoad(options) {
			await req.silenceLogin(options.saleNo)
			this.getMenu()
		},
		methods: {
			jumpLink(item){
				if(!item.url) return req.msg("暂未开放")
				uni.navigateTo({
					url:item.url
				})
			},
			getMenu(){
				req.getRequest('/api/menuYzl/list',{},res=>{
					this.menu = res
				})
			}
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
	}
</script>

<style>
	@import './index.css';
</style>