charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat:改造地址和首页

Browse Source
This commit is contained in:
charles
2025-09-25 22:26:03 +08:00
parent ba8158093a
commit 9e17a4597e
20 changed files with 1959 additions and 1567 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/custom-tab-bar.vue
+102 -77
View File
@@ -1,99 +1,124 @@
<template>
<view class="custom-tab-bar">
<view v-for="(item, index) in tabs" :key="index" class="tab-item" @click="switchTab(index)">
<image :src="tabIndex === index ? item.selectedIconPath : item.iconPath" class="tab-icon"></image>
<text :class="tabIndex === index ? 'tab-text tab-text-sel' : 'tab-text'">{{ item.text }}</text>
</view>
</view>
<view class="custom-tab-bar" :class="platformType ? '' : 'iosplatformType'">
<view
v-for="(item, index) in tabs"
:key="index"
class="tab-item"
@click="switchTab(index)"
>
<image
:src="tabIndex === index ? item.selectedIconPath : item.iconPath"
class="tab-icon"
></image>
<text
:class="tabIndex === index ? 'tab-text tab-text-sel' : 'tab-text'"
>{{ item.text }}</text
>
</view>
</view>
</template>
<script>
export default {
name: "custom-tab-bar",
props: {
tabIndex: { //当前选中的tab项
type: Number,
default: 0
}
},
data() {
return {
tabs: [
{
"pagePath": "/pages/home/home",
"text": "首页",
"iconPath": "/static/column/home.png",
"selectedIconPath": "/static/column/home_sel.png"
},
{
"pagePath": "/pages/sort/sort",
"text": "分类",
"iconPath": "/static/column/sort.png",
"selectedIconPath": "/static/column/sort_sel.png"
},
{
"pagePath": "/pages/supply_chain/supply_chain",
"text": "平价专区",
"iconPath": "/static/column/supply_chain.png",
"selectedIconPath": "/static/column/supply_chain_sel.png"
},
{
"pagePath": "/pages/shopping_cart/shopping_cart",
"text": "购物车",
"iconPath": "/static/column/shopping.png",
"selectedIconPath": "/static/column/shopping_sel.png"
}, {
"pagePath": "/pages/mine/mine",
"text": "我的",
"iconPath": "/static/column/mine.png",
"selectedIconPath": "/static/column/mine_sel.png"
}
]
};
},
methods: {
switchTab(index) {
const pagePath = this.tabs[index].pagePath;
uni.switchTab({ url: pagePath });
}
}
}
name: "custom-tab-bar",
props: {
tabIndex: {
//当前选中的tab项
type: Number,
default: 0,
platformType: 0,
},
},
data() {
return {
tabs: [
{
pagePath: "/pages/home/home",
text: "首页",
iconPath: "/static/column/home.png",
selectedIconPath: "/static/column/home_sel.png",
},
{
pagePath: "/pages/sort/sort",
text: "分类",
iconPath: "/static/column/sort.png",
selectedIconPath: "/static/column/sort_sel.png",
},
{
pagePath: "/pages/supply_chain/supply_chain",
text: "平价",
iconPath: "/static/column/supply_chain.png",
selectedIconPath: "/static/column/supply_chain_sel.png",
},
{
pagePath: "/pages/shopping_cart/shopping_cart",
text: "购物车",
iconPath: "/static/column/shopping.png",
selectedIconPath: "/static/column/shopping_sel.png",
},
{
pagePath: "/pages/mine/mine",
text: "我的",
iconPath: "/static/column/mine.png",
selectedIconPath: "/static/column/mine_sel.png",
},
],
};
},
created() {
/*#ifdef APP-PLUS*/
const appUpdate = uni.getStorageSync("platform");
this.platformType = appUpdate == "android" ? "ANDROID" : "IOS";
/*#endif*/
},
methods: {
switchTab(index) {
const pagePath = this.tabs[index].pagePath;
uni.switchTab({ url: pagePath });
},
},
};
</script>
<style lang="scss" scoped>
.custom-tab-bar {
position: fixed;
display: flex;
justify-content: space-around;
align-items: center;
//height: 140rpx;
/* 根据需要调整 */
background-color: #fff;
/* 背景颜色 */
bottom: 0;
width: 100%;
position: fixed;
display: flex;
justify-content: space-around;
align-items: center;
height: calc(100rpx + env(safe-area-inset-bottom));
/* 根据需要调整 */
background-color: #fff;
/* 背景颜色 */
bottom: 0;
width: 100%;
padding-bottom: calc(env(safe-area-inset-bottom));
&.iosplatformType {
height: 100rpx;
padding-bottom: 0;
}
}
.tab-item {
display: flex;
flex-direction: column;
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
}
.tab-icon {
margin-top: 5rpx;
width: 44rpx;
/* 图标大小 */
height: 44rpx;
/* 图标大小 */
margin-top: 5rpx;
width: 44rpx;
/* 图标大小 */
height: 44rpx;
/* 图标大小 */
}
.tab-text {
font-size: 24rpx
/* 文字大小 */
font-size: 24rpx;
/* 文字大小 */
}
.tab-text-sel {
color: $app-bt-bj;
color: $app-bt-bj;
}
</style>
</style>