zhywpt-sp/pages/service/service.vue

<template>
	<view class="wrapper">
		<navBar title="九州ETC"></navBar>
		<view class="search-box">
			<image :src="`${$imgUrl}service/icon-search.png`" class="icon"></image>
			<input class="search" placeholder="请输入业务名称" />
		</view>
		<view class="content">
			<view class="left">
				<view v-for="(item,index) in menu.list" :key="index"
					:class="activeTab === item.name ? 'menu active' : 'menu'" @click="tabHandle(item.name,index)">
					<view :class="activeTab === item.name ? 'border on' : 'border'"></view>
					<view class="menu-text">{{item.name}}</view>
				</view>
			</view>
			<view class="right">
				<view class="right-content">
					<view v-for="(item,index) in menu.list[tableSelectIndex].subMenus" :key='index' class="item-box"
						@click="
              toNext(item.link)
            ">
						<view class="item bg-blue" :style="{ '--background': bgBlue }">
							<image :src="`${$imgUrl}${item.iconPath}`" />
						</view>
						<view class="text">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import navBar from "@/components/nav-bar/nav-bar.vue";
	import {
		ref,
		reactive,
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		fileURL
	} from "@/datas/fileURL.js";
	import {
		msg
	} from "@/utils/utils";
	import {
		queryMenuConfig
	} from "@/utils/network/api.js";
	import {
		request
	} from "@/utils/network/request.js";
	import {
		getItem,
		StorageKeys,
	} from "@/utils/storage";
	import {
		stringToJson
	} from "@/utils/network/encryption";
	const bgOrange = `url(${fileURL}image/service/bg-orange.png) center center no-repeat`;
	const bgBlue = `url(${fileURL}image/service/bg-blue.png) center center no-repeat`;
	const activeTab = ref("业务服务");
	const tableSelectIndex = ref(4);
	// 切换
	function tabHandle(val, index) {
		activeTab.value = val;
		tableSelectIndex.value = index
		console.log(tableSelectIndex.value)
	}
	const menu = reactive({
		list: []
	});

	onLoad(() => {
		queryMenuConfigAction().then((val: any) => {
			menu.list = val.menuList

		})
	});

	const queryMenuConfigAction = () => {
		var data = {
			openId: getItem(StorageKeys.OpenId),
			systemType: '6',
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};

		return new Promise(async (resolve, reject) => {
			const res = await request(queryMenuConfig, options);
			const data = stringToJson(res.bizContent);
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	}

	function toNext(url) {
		uni.navigateTo({
			url: url,
		});
		// msg("该功能正在开发中，敬请期待！")
	}
</script>

<style>
	page {
		height: 100%;
	}

	.wrapper {
		display: flex;
		background: linear-gradient(to left, #43a1e0 0%, #13e7c1 100%);
		flex-direction: column;
		height: 100%;
	}

	.search-box {
		margin: 50rpx 40rpx;
		height: 72rpx;
		border-radius: 36rpx;
		background: #f7f7f7;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-box .icon {
		width: 48rpx;
		height: 48rpx;
		margin: 0 20rpx;
	}

	.search-box .search {
		flex: 1;
		margin-right: 20rpx;
		height: 100%;
		padding: 0 10rpx;
		font-size: 28rpx;
		color: #00b38b;
	}

	.content {
		display: flex;
		flex: 1;
		flex-grow: 1;
		background: #fff;
		border-radius: 30rpx 30rpx 0 0;
		padding-top: 40rpx;
	}

	.left {
		width: 180rpx;
		border-right: 1px solid #dcdcdc;
		margin-right: 29rpx;
	}

	.left .menu-text {
		font-size: 26rpx;
		color: #666666;
		width: 120rpx;
	}

	.left .menu {
		padding-left: 15rpx;
		display: flex;
		align-items: center;
		margin: 20rpx 0 60rpx 0;
	}

	.left .active .menu-text {
		font-weight: bold;
		color: #00b38b;
		font-size: 28rpx;
		line-height: 32rpx;
	}

	.left .border {
		width: 9rpx;
		height: 26rpx;
		border-radius: 4rpx;
		margin-right: 20rpx;
	}

	.left .on {
		background: linear-gradient(0deg, #43a1e0 0%, #13e7c1 100%);
		font-size: 28rpx;
	}

	.right {
		flex: 1;
	}

	.right-content {
		display: flex;
		flex-wrap: wrap;
	}

	.right .item-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-right: 30rpx;
		margin-bottom: 39rpx;
	}

	.item {
		width: 105rpx;
		height: 105rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
	}

	.item image {
		width: 64rpx;
		height: 64rpx;
	}

	.right .text {
		width: 105rpx;
		font-size: 22rpx;
		text-align: center;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 19rpx;
		color: #666666;
	}

	.bg-blue {
		background: var(--background);
	}

	.bg-orange {
		background: var(--background);
	}

	.right .text-orange {
		color: #fd8362;
	}
</style>