zhywpt-sp/pages/service/service.vue

<template>
	<navBar title="服务" :scrollTop="scrollTop" :isBack="isBack" navbgClass="nav-bgXin" fontColor='#fff'></navBar>
	<view class="wrapper">
		<view class="search-box">
			<image :src="`${$imgUrl}service/icon-search.png`" class="icon" mode="aspectFill" @click="search()"></image>
			<input class="search" placeholder="请输入业务名称" v-model="state.searchVal" @confirm="search()" />
		</view>
		
		<view class="content" v-if="menuShow.list && menuShow.list.length > 0">
			<view class="left">
				<view v-for="(item,index) in menuShow.list" :key="index"
					:class="activeTab === item.name ? 'menu active' : 'menu'" @click="tabHandle(item.name,index)">
					<view :class="activeTab === item.name ? 'border on' : 'border'" :style="{ '--background': bgOn }"></view>
					<view class="menu-text">{{item.name}}</view>
				</view>
			</view>
			<view class="right">
				<rightListVue class="rightListVue" :menuList='menuShow.list[tableSelectIndex].children'
					v-if="menuShow.list.length > 0" />
			</view>
		</view>
		
		<view class="content" v-else-if="state.load"></view>
		
		<view class="content" v-else>
			<view class="left">
				<view class="menu active">
					<view class="border on"></view>
					<view class="menu-text">其他服务</view>
				</view>
			</view>
			<view class="right">
				<view class="login-content" @click="goToLogin">
					<view class="tips" >登录查看更多模块</view>
					<view class="custom-btn">登录</view>
				</view>
			</view>
		</view>
		
	</view>
</template>
<script lang="ts" setup>
	import { source } from "@/utils/network/difference";
	import rightListVue from "./components/rightList.vue";
	import { ref, reactive, } from "vue";
	import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
	import navBar from "../../components/nav-bar/nav-bar2.vue";
	import { fileURL, fileURLList } from "@/datas/fileURL.js";
	import { queryMenuConfig } from "@/utils/network/api.js";
	import {requestNew } from "@/utils/network/request.js";
	import { getItem, StorageKeys } from "@/utils/storage";
	import { hasLogin, confirm, navTo} from "@/utils/utils";
	const bgOn = `url(${fileURL}image/newHome/bg-on.png) center center no-repeat`;
	const activeTab = ref("");
	const tableSelectIndex = ref(0);
	const scrollTop = ref(0);
	const isBack = ref(false);
	// 切换
	function tabHandle(val, index) {
		activeTab.value = val;
		tableSelectIndex.value = index
		console.log(tableSelectIndex.value)
	}
	const menu = reactive({
		list: []  //请求的真正的不会变得
	});
	const menuShow = reactive({
		list: [],//展示的
	});
	const emptyList = reactive({
		list: []  //请求的真正的不会变得
	});
	const state = reactive({
		searchVal: '',  //input输入值
		newArr: [],
		load: false // 是否已经请求过数据
	});
	onLoad(() => {
		// load()
	});
	onShow(() => {
		// state.load = false
		console.log(hasLogin())
		if (!hasLogin()) {
			state.load = false
			menu.list = []
			menuShow.list = []
		}
		if (menu && menu.list.length <= 0) {
			load()
		}
	})
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
	function load(){
		if (!hasLogin()) {
			state.load = false
			// confirm('您需要登录过后才能使用此功能', () => {
			// 	uni.navigateTo({
			// 		url: '/login/login',
			// 	});
			// }, '温馨提示', true, '去登录');
		} else {
			queryMenuConfigAction().then((val : any) => {
				console.log("列表",val)
				state.load = true
				menu.list = val.menuList ? val.menuList : [],
					menu.list = deepClone(menu.list)
				state.newArr = deepClone(menu.list);
				menuShow.list = val.menuList ? val.menuList : [],
					activeTab.value = val.menuList[0]['name']
			}).catch(() => {
				state.load = true
			})
		}
	}
	
	// 深拷贝
	const deepClone = (obj) => {
		if (typeof obj !== 'object' || obj === null) {
			return obj;
		}

		let clone = Array.isArray(obj) ? [] : {};

		for (let key in obj) {
			if (obj.hasOwnProperty(key)) {
				clone[key] = deepClone(obj[key]);
			}
		}

		return clone;
	}
	const search = () => {
		for (var i = 0; i < menu.list.length; i++) {
			state.newArr[i]['children'] = [];
			for (var j = 0; j < menu.list[i]['children'].length; j++) {
				const name = menu.list[i]['children'][j].name;
				if (name.indexOf(state.searchVal) >= 0) {
					state.newArr[i]['children'].push(menu.list[i]['children'][j])
				}
			}
		}
		// 清除没有孩子的父亲
		const lastArr = []
		for (var k = 0; k < state.newArr.length; k++) {
			if (state.newArr[k]['children'].length != 0) {
				lastArr.push(state.newArr[k])
			}
		}
		console.log("lastArr", lastArr)
		if (state.searchVal) {
			tableSelectIndex.value = 0
		}
		menuShow.list = lastArr

		console.log("menuShow.list", menuShow.list, tableSelectIndex.value)
	}
	const queryMenuConfigAction = () => {
		var data = {
			openId: getItem(StorageKeys.OpenId),
			systemType: source == "WECHAT" ? '6' : "9",
			loginSource: getItem("loginSource")
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};

		return new Promise(async (resolve, reject) => {
			const res = await requestNew(queryMenuConfig, options,false, ()=>{
				console.log('---------------------我执行了！')
				load()
			});
			const data = res;
			console.log("dataqueryMenuConfigAction", data.menuList)
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	}
	
	const goToLogin = () => {
		uni.navigateTo({
			url: '/login/login',
		});
	}

	function toNext(url) {
		navTo(url);
	}
</script>

<style>
	page {
		height: 100%;
		background: white;
	}

	.wrapper {
		padding-top: 150rpx;
		display: flex;
		background: #01243A;
		flex-direction: column;
		height: calc(100% - 150rpx);
	}

	.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: black;
		background: transparent;
	}

	.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;
		line-height: 32rpx;
		font-family: NotoSansHans, NotoSansHans;
		font-size: 28rpx;
		color: #01243A;
	}

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

	.left .on {
		border-radius: 4rpx;
		font-size: 28rpx;
		background: var(--background);
		background-size: 100% 100%;
	}

	.right {
		flex: 1;
	}

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

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

	.right .text-orange {
		color: #fd8362;
	}

	.rightListVue {
		height: 100%;
	}
	.login-content{
		display: flex;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 232rpx;
	}
	.tips{
		color: #999999;
		font-size: 30rpx;
		text-align: center;
	}
	.custom-btn{
		width: 120rpx;
		height: 68rpx;
		background: radial-gradient(at 0% 0%, #01243A 0%, #004576 100%);
		border-radius: 68rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 68rpx;
		margin: 32rpx auto;
		text-align: center;
	}
</style>