From 504c052364c2dd0c8612647b7bcee81eba920b6d Mon Sep 17 00:00:00 2001
From: kele <1184860403@qq.com>
Date: Tue, 7 Feb 2023 15:51:37 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E8=87=AA=E5=AE=9A=E4=B9=89=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=A4=B4=E9=83=A8=E6=B7=BB=E5=8A=A0=E8=BF=94=E5=9B=9E?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=8F=8A=E5=BF=AB=E6=8D=B7=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=EF=BC=8Cs-layout=20=E6=B7=BB=E5=8A=A0=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E8=BF=94=E5=9B=9E=E6=8C=89=E9=92=AE=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/page.vue                          |  1 +
 .../s-custom-navbar/s-custom-navbar.vue       | 83 ++++++++++++++++++-
 sheep/components/s-layout/s-layout.vue        |  8 +-
 3 files changed, 90 insertions(+), 2 deletions(-)

diff --git a/pages/index/page.vue b/pages/index/page.vue
index 657d1af0..ed7fe3af 100644
--- a/pages/index/page.vue
+++ b/pages/index/page.vue
@@ -5,6 +5,7 @@
     :bgStyle="page.style?.background"
     :navbarStyle="page.style?.navbar"
     onShareAppMessage
+    showLeftButton
   >
     <s-block v-for="(item, index) in page.list" :key="index" :styles="item.style">
       <s-block-item :type="item.type" :data="item.data" :styles="item.style" />
diff --git a/sheep/components/s-custom-navbar/s-custom-navbar.vue b/sheep/components/s-custom-navbar/s-custom-navbar.vue
index 561e9924..cc373f43 100644
--- a/sheep/components/s-custom-navbar/s-custom-navbar.vue
+++ b/sheep/components/s-custom-navbar/s-custom-navbar.vue
@@ -10,6 +10,18 @@
   >
     <template #item>
       <view class="nav-box">
+        <view class="nav-icon" v-if="showLeftButton">
+          <view class="icon-box ss-flex" :class="{ 'inner-icon-box': data.mode == 'inner' }">
+            <view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
+              <text class="sicon-back" v-if="hasHistory" />
+              <text class="sicon-home" v-else />
+            </view>
+            <view class="line"></view>
+            <view class="icon-button icon-button-right ss-flex ss-row-center" @tap="onClickRight">
+              <text class="sicon-more" />
+            </view>
+          </view>
+        </view>
         <view
           class="nav-item"
           v-for="(item, index) in navList"
@@ -39,13 +51,19 @@
   import sheep from '@/sheep';
   import Navbar from './components/navbar.vue';
   import NavbarItem from './components/navbar-item.vue';
+  import { showMenuTools } from '@/sheep/hooks/useModal';
 
   const props = defineProps({
     data: {
       type: Object,
       default: () => ({}),
     },
+    showLeftButton: {
+      type: Boolean,
+      default: false,
+    },
   });
+  const hasHistory = sheep.$router.hasHistory();
   const sticky = computed(() => {
     if (props.data.mode == 'inner') {
       if (props.data.alway) {
@@ -87,7 +105,11 @@
     props.data.mode === 'inner' ? Boolean(props.data.alwaysShow) : true,
   );
   const isOpacity = computed(() =>
-    props.data.mode === 'normal' ? false : props.data.mode === 'inner',
+    props.data.mode === 'normal'
+      ? false
+      : props.showLeftButton
+      ? false
+      : props.data.mode === 'inner',
   );
   const isPlaceholder = computed(() => props.data.mode === 'normal');
   const bgStyles = computed(() => {
@@ -100,6 +122,17 @@
       };
     }
   });
+
+  function onClickLeft() {
+    if (hasHistory) {
+      sheep.$router.back();
+    } else {
+      sheep.$router.go('/pages/index/index');
+    }
+  }
+  function onClickRight() {
+    showMenuTools();
+  }
 </script>
 
 <style lang="scss" scoped>
@@ -113,5 +146,53 @@
       top: 50%;
       transform: translateY(-50%);
     }
+    .nav-icon {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 20rpx;
+      .inner-icon-box {
+        border: 1px solid rgba(#fff, 0.4);
+        background: none !important;
+      }
+      .icon-box {
+        background: #ffffff;
+        box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08),
+          0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
+        border-radius: 30rpx;
+        width: 134rpx;
+        height: 56rpx;
+        margin-left: 8rpx;
+        .line {
+          width: 2rpx;
+          height: 24rpx;
+          background: #e5e5e7;
+        }
+        .sicon-back {
+          font-size: 32rpx;
+          color: #000;
+        }
+        .sicon-home {
+          font-size: 32rpx;
+          color: #000;
+        }
+        .sicon-more {
+          font-size: 32rpx;
+          color: #000;
+        }
+        .icon-button {
+          width: 67rpx;
+          height: 56rpx;
+          &-left:hover {
+            background: rgba(0, 0, 0, 0.16);
+            border-radius: 30rpx 0px 0px 30rpx;
+          }
+          &-right:hover {
+            background: rgba(0, 0, 0, 0.16);
+            border-radius: 0px 30rpx 30rpx 0px;
+          }
+        }
+      }
+    }
   }
 </style>
diff --git a/sheep/components/s-layout/s-layout.vue b/sheep/components/s-layout/s-layout.vue
index 5f83a503..2aac7905 100644
--- a/sheep/components/s-layout/s-layout.vue
+++ b/sheep/components/s-layout/s-layout.vue
@@ -20,6 +20,7 @@
       <s-custom-navbar
         v-else-if="navbar === 'custom' && navbarMode === 'normal'"
         :data="navbarStyle"
+        :showLeftButton="showLeftButton"
       />
       <view class="page-body" :style="[bgBody]">
         <!-- 沉浸式头部 -->
@@ -30,7 +31,7 @@
         ></view>
 
         <!-- 装修组件导航栏-沉浸式 -->
-        <s-custom-navbar v-if="navbar === 'custom' && navbarMode === 'inner'" :data="navbarStyle" />
+        <s-custom-navbar v-if="navbar === 'custom' && navbarMode === 'inner'" :data="navbarStyle" :showLeftButton="showLeftButton" />
 
         <!-- 页面内容插槽 -->
         <slot />
@@ -134,6 +135,11 @@
       type: Boolean,
       default: false,
     },
+    //展示返回按钮
+    showLeftButton: {
+      type: Boolean,
+      default: false,
+    },
   });
   const emits = defineEmits(['search']);