123 lines
2.4 KiB
Vue
123 lines
2.4 KiB
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 = {
|
|
VIP: "vip",
|
|
智能弓: "mall",
|
|
计分本: "tab-point-book",
|
|
勋章: "medal",
|
|
个人中心: "user",
|
|
};
|
|
const onTabChange = (index) => {
|
|
if (index === 0) {
|
|
return uni.navigateTo({
|
|
url: "/pages/be-vip",
|
|
});
|
|
}
|
|
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);
|
|
};
|
|
</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="`../static/tab-${tabs[key]}.png`"
|
|
mode="widthFix"
|
|
/>
|
|
<image v-else src="../static/tab-point-book.png" mode="widthFix" />
|
|
<text v-if="index !== 2">{{ key }}</text>
|
|
</button>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.footer {
|
|
height: 140rpx;
|
|
width: 100vw;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(70, 55, 34, 0.75) 0%,
|
|
rgba(5, 11, 25, 0.58) 77%
|
|
),
|
|
#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: 19%;
|
|
color: #8e7d5c;
|
|
}
|
|
.footer > button > image {
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
}
|
|
.footer > button > text {
|
|
font-weight: 500;
|
|
font-size: 20rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
.point-book-tab {
|
|
overflow: unset;
|
|
margin: 0 1%;
|
|
}
|
|
.point-book-tab > image {
|
|
width: 144rpx !important;
|
|
height: 144rpx !important;
|
|
transform: translateY(-20rpx);
|
|
}
|
|
</style>
|