110 lines
2.5 KiB
Vue
110 lines
2.5 KiB
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>
|