shoot-miniprograms/src/pages/point-book.vue

<script setup>
import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
import Container from "@/components/Container.vue";

import { getHomeData } from "@/apis";

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

const activeTab = ref(0);

const isIOS = computed(() => {
  const systemInfo = uni.getDeviceInfo();
  return systemInfo.osName === "ios";
});

const onClickTab = (index) => {
  if (index > 0 && !user.value.id) {
    return uni.navigateTo({
      url: "/pages/sign-in",
    });
  }
  activeTab.value = index;
};

watch(
  () => user.value.id,
  async (id) => {
    if (id) {
      const data = await getHomeData();
      if (data.user) updateUser(data.user);
    }
  }
);

onMounted(async () => {
  const token = uni.getStorageSync(
    `${uni.getAccountInfoSync().miniProgram.envVersion}_token`
  );
  if (!user.value.id && token) {
    const data = await getHomeData();
    if (data.user) updateUser(data.user);
  }
});
</script>

<template>
  <Container :bgType="4" bgColor="#F5F5F5" :whiteBackArrow="false" title="">
    <view class="container"> </view>
    <view class="tabbar">
      <button hover-class="none" @click="onClickTab(0)">
        <image
          :src="`../static/tab1${activeTab === 0 ? '-s' : ''}.png`"
          mode="widthFix"
        />
        <text :style="{ color: activeTab === 0 ? '#333' : '#999' }">Score</text>
      </button>
      <button hover-class="none" @click="onClickTab(1)">
        <image
          :src="`../static/tab2${activeTab === 1 ? '-s' : ''}.png`"
          mode="widthFix"
        />
        <text :style="{ color: activeTab === 1 ? '#333' : '#999' }"
          >History</text
        >
      </button>
      <button hover-class="none" @click="onClickTab(2)">
        <image
          :src="`../static/tab3${activeTab === 2 ? '-s' : ''}.png`"
          mode="widthFix"
        />
        <text :style="{ color: activeTab === 2 ? '#333' : '#999' }"
          >Profile</text
        >
      </button>
    </view>
  </Container>
</template>

<style scoped>
.container {
  width: calc(100% - 50rpx);
  height: 100%;
  padding: 25rpx;
}
.tabbar {
  width: 100%;
  height: 140rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: #fff;
  padding-bottom: 20rpx;
}
.tabbar > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20rpx;
}
.tabbar > button > image {
  margin-bottom: 10rpx;
  width: 60rpx;
  height: 60rpx;
}
</style>