shoot-miniprograms/src/components/AppFooter.vue

<script setup>
import { ref } from "vue";

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

const props = defineProps({
  selected: {
    type: Number,
    default: 0,
  },
  onSignin: {
    type: Function,
    default: () => {},
  },
  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) {
    return uni.navigateTo({
      url: "/pages/device-intro",
    });
  }
  if (index === 2) {
    return uni.navigateTo({
      url: "/pages/point-book",
    });
  }
  if (index === 4) {
    if (!user.value.id) {
      props.onSignin();
      return;
    }
    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" :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 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: 140rpx;
  width: 100vw;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  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 > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 20%;
}
.footer > button > image {
  width: 44rpx;
  height: 44rpx;
}
.footer > button > text {
  font-weight: 500;
  font-size: 20rpx;
  margin-top: 10rpx;
}
.point-book-tab {
  overflow: unset;
}
.point-book-tab > image {
  width: 144rpx !important;
  height: 144rpx !important;
  transform: translateY(-10rpx);
}
</style>