spinz777/src/components/layout/CommonLayout.vue

<template>
	<view class="common-layout" :style="{minHeight: appStore.windowInfo.screenHeight + 'px', background: bgColor}">
<!-- 		<el-container>
			<el-aside
				v-if="!appStore.isMobileView"
				width="200px"
			>
				<PcSiderBar />
			</el-aside>
			<el-container> -->
				<!-- <el-header> -->
					<!-- <MobileHeader v-if="appStore.isMobileView"></MobileHeader> -->
					<!-- <PcHeader v-if="!appStore.isMobileView"></PcHeader> -->
				<!-- </el-header> -->
			<!-- 	<el-main>
					<view
						class="content-container"
						:class="{
							'content-container-mobile-padding': appStore.isMobileView,
							'content-container-pc-padding': !appStore.isMobileView
						}"
					>
						<slot></slot>
						<PcFooter v-if="!appStore.isMobileView"></PcFooter>
					</view>
				</el-main>
			</el-container>
		</el-container> -->
		<slot></slot>
		<view
			class="service-icon"
			style="width: 50px; height: 50px;"
			:style="{ 'bottom': serviceIconXY.bottom + 'px', 'left': serviceIconXY.x + 'px' }"
			@click.stop="handleServiceClick"
			@touchmove.prevent="handleTouchMove"
		>
			<theme-image src="@/static/icon-service-top.png" style="width: 50px; height: 50px;"></theme-image>
		</view>
		<DepositClosePopup/>
	</view>
</template>

<script setup>
	import { onMounted, reactive, ref } from 'vue'
	import { useAppStore } from '@/store/useAppStore.js'
	import { useUserStore } from '@/store/useUserStore'
	
	import PcHeader from '@/components/header/PcHeader.vue'
	import MobileHeader from '@/components/header/MobileHeader.vue'
	import PcFooter from '@/components/footer/PcFooter.vue'
	import MobileFooter from '@/components/footer/MobileFooter.vue'
	import PcSiderBar from '@/components/siderbar/PcSiderBar.vue'

	import Toast from '@/module/toast/toast'
	import { openUrl } from '@/module/utils/openUrl'
	import { useI18n } from 'vue-i18n'
	import GlobalConfig from '@/config/global.config.js'
	
	import DepositClosePopup from '@/pages/wallet/components/DepositClosePopup.vue'

	onMounted(() => {
		loadData()
		// handlePages()
	})
	defineProps({
		bgColor: {
			type: String,
			default: 'transparent'
		}
	})
	const appStore = useAppStore()
	const userStore = useUserStore()
	const { t } = useI18n()
	
	const serviceIconXY = reactive({
		x: appStore.windowInfo.windowWidth - 50,
		y: appStore.windowInfo.windowHeight * 0.7,
		bottom: 100
	})
	
	const loadData = () => {
	}
	
	const handlePages = () => {
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		const currentRoute = currentPage.route
		console.log('currentRoute', currentRoute);
		
		const pathKeys = currentRoute.split('/').slice(1).join('.')
		uni.setNavigationBarTitle({
			title: `${GlobalConfig.appName} - ${t(pathKeys)}`
		})
	}
	
	const handleTouchMove = (e) => {
		if (e.type === 'touchmove' && e.touches.length) {
			const windowInfo = uni.getWindowInfo()
			const currentTouch = e.touches[0]
			const x = currentTouch.pageX
			const y = currentTouch.pageY 
			if (x > 0 && x < windowInfo.windowWidth - 50) {
				serviceIconXY.x = x
			}
			if (y > 0 && y < windowInfo.windowHeight - 50) {
				serviceIconXY.y = y
				serviceIconXY.bottom = windowInfo.windowHeight - y
			}
		}
	}
	
	const handleServiceClick = async () => {
		openUrl(appStore.FAQ)
	}
</script>

<style lang="scss" scoped>
	.common-layout {
		position: relative;
		width: 100%;
		min-height: 100%;
		box-sizing: border-box;
		overflow-y: auto;
		// transform: translate(0,0)
	}
	
	.service-icon {
		position: fixed;
		z-index: 101;
	}
	
	.content-container {
		position: relative;
		width: 100%;
		min-height: 100%;
		box-sizing: border-box;
	}
	
	.content-container-mobile-padding {
		// padding-top: 120rpx;
		padding-bottom: 110rpx;
	}
	
	.content-container-pc-padding {
		padding-top: 64px;
		padding-bottom: 0px;
	}
</style>

<style lang="scss">
	.common-layout {
		
		.el-header {
			padding: 0px !important;
		}
		
		.el-main {
			padding: 0px !important;
		}
	}
</style>