【feat】【第二版开发】

1.优化页面结构布局代码
2.增加返回主页、返回上一页的图标和对应功能

components/main-layout/main-layout.vue

@@ -1,18 +1,18 @@
 <template>
 	<view class="layout-container">
 		<!-- 顶部填充区 -->
-		<view :style="{height: safeAreaStore.statusBarHeight+'px'}"></view>
+		<view :style="statusBarStyle"></view>
 		
 		<!-- 顶部胶囊区 -->
-		<view class="capsule-box" 
-		:style="{
-			height: safeAreaStore.capsuleBarHeight+'px',
-			width: safeAreaStore.capsuleBarLeft+'px',
-			'padding-top': safeAreaStore.capsuleBarMarginTop+'px', 
-			'padding-bottom': safeAreaStore.capsuleBarMarginBottom+'px'}">
-			<uni-icons type="back" color="#406CE7"></uni-icons>	
-			<uni-icons type="home" color="#406CE7"></uni-icons>	
-			<!-- <slot name="capsule"></slot> -->
+		<view class="capsule-box" :style="capsuleBarStyle">
+			<view class="icon-wrap" v-if="showBack || showHome">
+				<view v-if="showBack" class="icon-box" :style="iconBoxStyle" @click="goBackPage">
+					<uni-icons type="back" color="#FFFFFF" :size="iconSize"></uni-icons>		
+				</view>
+				<view v-if="showHome" class="icon-box" :style="iconBoxStyle" @click="goIndexPage">
+					<uni-icons type="home" color="#FFFFFF" :size="iconSize"></uni-icons>	
+				</view>
+			</view>
 		</view>
 		
 		<!-- 内容区 -->
@@ -21,14 +21,92 @@
 		</view>
 		
 		<!-- 底部填充区 -->
-		<view :style="{height: safeAreaStore.bottomHeight+'px'}"></view>
+		<view :style="bottomBoxStyle"></view>
 
 	</view>
 </template>
 
 <script setup>
+	import { computed, ref } from 'vue';
 	import { useSafeAreaStore } from '@/stores/safeArea.js';
+	import router from '@/common/constants/router';
+	
+	defineProps({
+		showHome: {
+			type: Boolean,
+			default: false
+		},
+		showBack: {
+			type: Boolean,
+			default: false
+		}
+	});
+	
+	/**
+	 * 安全区
+	 */
 	const safeAreaStore = useSafeAreaStore();
+	
+	/**
+	 * 状态栏样式
+	 */
+	const statusBarStyle = computed(() => {
+		return {
+			height: safeAreaStore.statusBarHeight+'px'
+		}
+	});
+	
+	/**
+	 * 胶囊区样式
+	 */
+	const capsuleBarStyle = computed(() => {
+		return {
+			height: safeAreaStore.capsuleBarHeight+'px',
+			width: safeAreaStore.capsuleBarLeft+'px',
+			'padding-top': safeAreaStore.capsuleBarMarginTop+'px', 
+			'padding-bottom': safeAreaStore.capsuleBarMarginBottom+'px'
+		}
+	});
+	
+	/**
+	 * 图标容器样式
+	 */
+	const iconBoxStyle = computed(() => {
+		return {
+			width: safeAreaStore.capsuleBarContentHeight-5+'px',
+			height: safeAreaStore.capsuleBarContentHeight-5+'px'
+		}
+	});
+	
+	/**
+	 * 图标大小
+	 */
+	const iconSize = computed(() => safeAreaStore.capsuleBarContentHeight-10);
+	
+	/**
+	 * 底部填充区样式
+	 */
+	const bottomBoxStyle = computed(() => {
+		return {
+			height: safeAreaStore.bottomHeight+'px'
+		}
+	});
+	
+	/**
+	 * 返回主页
+	 */
+	const goIndexPage = () => {
+		uni.reLaunch({
+			url: router.INDEX_URL
+		});
+	};
+	
+	/**
+	 * 返回上一页
+	 */
+	const goBackPage = () => {
+		uni.navigateBack();
+	};
 </script>
 
 <style lang="scss" scoped>
@@ -41,6 +119,27 @@
 		.capsule-box {
 			padding-left: 24rpx;
 			padding-right: 24rpx;
+			
+			.icon-wrap {
+				display: flex;
+				justify-content: left;
+				height: 100%;
+				align-items: center;
+				
+				.icon-box {
+					margin-left: 16rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					border-radius: 50%;
+					opacity: 0.2;
+					background: rgba(0, 0, 0, 1);
+				}
+						
+				.icon-box:first-child {
+					margin-left: 0rpx;
+				}
+			}
 		}
 		
 		.content-box {

pages/login/login.vue

@@ -1,5 +1,5 @@
 <template>
-	<main-layout>
+	<main-layout :showHome="true">
 		<template>
 			<view class="login-container">
 				<view class="login-avator">

pages/punchin-detail/punchin-detail.vue

@@ -1,5 +1,5 @@
 <template>
-	<main-layout>
+	<main-layout :showHome="true">
 		<uni-calendar />	
 		<viwe class="info-box">
 			<view class="left">打卡：12次</view>

pages/punchin-edit/punchin-edit.vue

@@ -1,5 +1,5 @@
 <template>
-	<main-layout>
+	<main-layout :showHome="true" :showBack="true">
 		<template>
 			<uni-forms ref="baseForm" :modelValue="punchInData" :label-width="80">
 				<uni-section title="基本信息" padding="16px" type="line">

pages/settle-list/settle-list.vue

@@ -1,5 +1,5 @@
 <template>
-	<main-layout>
+	<main-layout :showHome="true" :showBack="true">
 		<!-- <view class="selector">
 			<view class="wrap selected">月</view>
 			<view class="wrap">年</view>

pages/user-info/user-info.vue

@@ -1,5 +1,5 @@
 <template>
-	<main-layout>
+	<main-layout :showHome="true">
 		<template>
 			<view class="header">
 				<view class="avatar">