shoot-miniprograms/src/components/AppFooter.vue

<script setup>
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);

const props = defineProps({
  signin: {
    type: Function,
    default: () => {},
  },
});

const tabs = [
  { image: "../static/tab-vip.png" },
  { image: "../static/tab-grow.png" },
  { image: "../static/tab-mall.png" },
];

function handleTabClick(index) {
  if (index === 1 && !user.value.id) return props.signin();
  if (index === 0) {
    uni.navigateTo({
      url: "/pages/be-vip",
    });
  }
  if (index === 1) {
    uni.navigateTo({
      url: "/pages/my-growth",
    });
  }
  if (index === 2) {
    uni.navigateTo({
      url: "/pages/device-intro",
    });
  }
}
</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)"
    >
      <image
        :src="tab.image"
        :style="{
          width: index === 1 ? '100px' : '40px',
          transform: index === 1 ? '' : 'translateY(10px)',
        }"
        mode="widthFix"
      />
    </view>
  </view>
</template>

<style scoped>
.footer {
  height: 90px;
  width: 100vw;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow-x: hidden;
}

.footer-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
}

.tab-item {
  z-index: 1;
}
</style>