完成新的首页布局

src/components/AppFooter.vue

@@ -1,83 +1,106 @@
 <script setup>
-const tabs = [
-  { image: "../static/tab-vip.png" },
-  { image: "../static/tab-point-book.png" },
-  { image: "../static/tab-mall.png" },
-];
+import { ref } from "vue";
 
-function handleTabClick(index) {
-  if (index === 0) {
-    uni.navigateTo({
-      url: "/pages/be-vip",
-    });
-  }
+const props = defineProps({
+  selected: {
+    type: Number,
+    default: 0,
+  },
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
+});
+
+const isIOS = uni.getDeviceInfo().osName === "ios";
+const tabs = {
+  首页: "home",
+  智能弓: "mall",
+  计分本: "tab-point-book",
+  勋章: "medal",
+  个人中心: "user",
+};
+const onTabChange = (index) => {
   if (index === 1) {
-    uni.navigateTo({
-      url: "/pages/point-book",
-    });
-  }
-  if (index === 2) {
-    uni.navigateTo({
+    return uni.navigateTo({
       url: "/pages/device-intro",
     });
   }
-}
+  if (index === 2) {
+    return uni.navigateTo({
+      url: "/pages/point-book",
+    });
+  }
+  if (index === 4) {
+    return uni.navigateTo({
+      url: "/pages/user",
+    });
+  }
+  // props.onChange(index);
+};
+const getTabSrc = (key, index) => {
+  return `../static/tab-${tabs[key]}${props.selected === index ? "" : "-o"}.png`;
+};
 </script>
 
 <template>
-  <view class="footer">
-    <image class="footer-bg" src="../static/tab-bg.png" mode="widthFix" />
-    <view
-      v-for="(tab, index) in tabs"
-      :key="index"
-      class="tab-item"
-      @click="handleTabClick(index)"
-      :style="{
-        width: index === 1 ? '36%' : '20%',
-      }"
+  <view class="footer" :style="{ paddingBottom: isIOS ? '30rpx' : '0' }">
+    <button
+      hover-class="none"
+      v-for="(key, index) in Object.keys(tabs)"
+      :key="key"
+      @click="onTabChange(index)"
+      :class="index === 2 ? 'point-book-tab' : ''"
     >
-      <image :src="tab.image" mode="widthFix" />
-    </view>
+      <image v-if="index !== 2" :src="getTabSrc(key, index)" mode="widthFix" />
+      <image v-else src="../static/tab-point-book.png" mode="widthFix" />
+      <text
+        v-if="index !== 2"
+        :style="{ color: index === selected ? '#f7cb74' : '#8E7D5C' }"
+        >{{ key }}</text
+      >
+    </button>
   </view>
 </template>
 
 <style scoped>
 .footer {
-  height: 120px;
+  height: 140rpx;
   width: 100vw;
   position: relative;
   display: flex;
   justify-content: space-around;
   align-items: center;
-  overflow: hidden;
+  background: linear-gradient(
+      180deg,
+      rgba(70, 55, 34, 0.75) 0%,
+      rgba(5, 11, 25, 0.58) 100%
+    ),
+    #000000;
+  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.06);
 }
-.footer-bg {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: 0;
-}
-.tab-item {
-  z-index: 1;
+.footer > button {
   display: flex;
+  flex-direction: column;
+  align-items: center;
   justify-content: center;
+  width: 20%;
 }
-.tab-item > image {
-  width: 65rpx;
+.footer > button > image {
+  width: 44rpx;
+  height: 44rpx;
 }
-.tab-item:last-child > image {
-  width: 85rpx;
+.footer > button > text {
+  font-weight: 500;
+  font-size: 20rpx;
+  margin-top: 10rpx;
 }
-.tab-item:nth-child(2) {
-  transform: translate(10%, 40%);
+.point-book-tab {
+  overflow: unset;
 }
-.tab-item:nth-child(3) {
-  margin-bottom: 25rpx;
-}
-.tab-item:nth-child(3) > image {
-  width: 140rpx;
-}
-.tab-item:nth-child(4) {
-  transform: translate(-10%, 44%);
+.point-book-tab > image {
+  width: 144rpx !important;
+  height: 144rpx !important;
+  transform: translateY(-10rpx);
 }
 </style>