maguodong/uniapp-ZHSQ
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : 底部导航栏添加 - 本地生活

Browse Source
This commit is contained in:
赵毅 2025-07-23 15:42:59 +08:00
parent 38896f2a26
commit 82b4ba8b07
6 changed files with 173 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
components/nav/nav.vue
View File

@ -1,141 +1,175 @@
<template> <template>
<view class="foot-fixed"> <view class="foot-fixed">
<view v-for="(item, index) in navList" :key='index'> <view v-for="(item, index) in navList" :key="index">
<view id="navIndex" :style="{width:foot_width}" @click="jump" :data-idx="index" :data-url="item.url" <view
class="foot-item"> id="navIndex"
:style="{ width: foot_width }"
@click="jump"
:data-idx="index"
:data-url="item.url"
class="foot-item"
>
<view class="foot-icon-box"> <view class="foot-icon-box">
<image class="foot-icon" :src="item.photo" mode="widthFix" v-if="current != index"></image> <image
<image class="foot-icon2" :src="item.photoAc" mode="widthFix" v-if="current == index"></image> class="foot-icon"
:src="item.photo"
mode="widthFix"
v-if="current != index"
:style="{
width: item.photo.includes('footer_localLife.png')
? '70rpx'
: '',
}"
></image>
<image
class="foot-icon2"
:src="item.photoAc"
mode="widthFix"
v-if="current == index"
></image>
</view> </view>
<text class="foot-label" id="navIndexLabel">{{ item.nav_name }}</text>
<text class="foot-label" id="navIndexLabel">{{item.nav_name}}</text>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name: "nav", name: "nav",
props:{ props: {
current:{ current: {
type:Number, type: Number,
default: 0, default: 0,
} },
}, },
data() { data() {
return { return {
navList: [ navList: [
{ {
photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_home.png", photo:
photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_homeAc.png", "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_home.png",
nav_name:"首页", photoAc:
url:"/pages/index/index" "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_homeAc.png",
nav_name: "首页",
url: "/pages/index/index",
}, },
{ {
photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_community.png", photo:
photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_communityAc.png", "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_community.png",
nav_name:"我的小区", photoAc:
url:"/packages/community/index/index" "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_communityAc.png",
nav_name: "我的小区",
url: "/packages/community/index/index",
}, },
{ {
photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_shop.png", photo: "http://localhost:8080/footer_localLife.png",
photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_shopAc.png", photoAc: "http://localhost:8080/footer_localLifeAc.png",
nav_name:"优选商城", nav_name: "本地生活",
url:"/packages/shop/index/index" url: "/packages/localLife/index/index",
}, },
{ {
photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_door.png", photo:
photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_communityAc.png", "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_shop.png",
nav_name:"到家服务", photoAc:
url:"/packages/homeServer/index/index" "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_shopAc.png",
nav_name: "优选商城",
url: "/packages/shop/index/index",
}, },
{ {
photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_mine.png", photo:
photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_mineAc.png", "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_door.png",
nav_name:"我的", photoAc:
url:"/pages/user/index" "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_communityAc.png",
nav_name: "到家服务",
url: "/packages/homeServer/index/index",
},
{
photo:
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_mine.png",
photoAc:
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_mineAc.png",
nav_name: "我的",
url: "/pages/user/index",
}, },
], ],
foot_width: '20%', foot_width: "16.5%",
}; };
}, },
methods: { methods: {
getFootnav() { getFootnav() {
let _that = this; let _that = this;
uni.request({ uni.request({
url: 'https://zhsq.hshuishang.com/Miniapi/Index/footer_nav_list', url: "https://zhsq.hshuishang.com/Miniapi/Index/footer_nav_list",
method: 'post', method: "post",
header: { header: {
'Content-type': 'application/x-www-form-urlencoded' "Content-type": "application/x-www-form-urlencoded",
}, },
data: {}, data: {},
dataType: 'json', dataType: "json",
success: (result) => { success: (result) => {
result.data[0].url = "/pages/index/index" result.data[0].url = "/pages/index/index";
result.data[1].url = "/pages/device/device" result.data[1].url = "/pages/device/device";
result.data[2].nav_name = "手机通行" result.data[2].nav_name = "手机通行";
result.data[2].url = "/pages/phoneGo/phoneGo" result.data[2].url = "/pages/phoneGo/phoneGo";
result.data[3].url = `/packages/community/index/index` result.data[3].url = `/packages/community/index/index`;
result.data[4].url = "/pages/user/index" result.data[4].url = "/pages/user/index";
result.data.splice(1, 2); result.data.splice(1, 2);
let footWidth = (100 / result.data.length).toFixed(2) + '%'; let footWidth = (100 / result.data.length).toFixed(2) + "%";
this.navList = result.data; this.navList = result.data;
this.foot_width = footWidth; this.foot_width = footWidth;
}, },
}); });
}, },
//暂未开通 //暂未开通
NotOpen() { NotOpen() {
uni.showModal({ uni.showModal({
title: '提示', title: "提示",
content: '此功能暂未开通！', content: "此功能暂未开通！",
showCancel: false, showCancel: false,
complete: (res) => { complete: (res) => {
if (res.cancel) { if (res.cancel) {
} }
} },
}) });
}, },
jump(e) { jump(e) {
const ctoken = uni.getStorageSync('ctoken'); const ctoken = uni.getStorageSync("ctoken");
const authen = ['/pages/index/index', '/pages/user/index','/pages/user/index']; const authen = [
"/pages/index/index",
"/pages/user/index",
"/pages/user/index",
];
// 除首页及个人中心页不需要鉴定ctoken， 其他tab页均需存在登录态才可访问 // 除首页及个人中心页不需要鉴定ctoken， 其他tab页均需存在登录态才可访问
if (authen.includes(e.currentTarget.dataset.url)) { if (authen.includes(e.currentTarget.dataset.url)) {
uni.redirectTo({ uni.redirectTo({
url: e.currentTarget.dataset.url, url: e.currentTarget.dataset.url,
}) });
return return;
} }
if (!ctoken) { if (!ctoken) {
uni.redirectTo({ uni.redirectTo({
url: '/pages/login/login', url: "/pages/login/login",
}) });
return; return;
} }
uni.redirectTo({ uni.redirectTo({
url: e.currentTarget.dataset.url, url: e.currentTarget.dataset.url,
}) });
}, },
}, },
mounted() { mounted() {
// this.getFootnav(); // this.getFootnav();
} },
} };
</script> </script>
<style> <style>
@import url("./nav.css"); @import url("./nav.css");
</style> </style>

2
packages/homeServer/index/index.vue
View File

@ -146,7 +146,7 @@
</view> </view>
</view> </view>
<nav-footer :current="3" /> <nav-footer :current="4" />
<!-- 回到顶部 --> <!-- 回到顶部 -->
<div class="toUp" @click="scrollToTop"> <div class="toUp" @click="scrollToTop">

4
packages/localLife/index/index.css
View File

@ -2,6 +2,10 @@ page {
background-color: #fff; background-color: #fff;
} }
.container{
padding-top: 100rpx;
}
.local { .local {
display: flex; display: flex;
align-items: center; align-items: center;

2
packages/shop/index/index.vue
View File

@ -286,7 +286,7 @@
</div> </div>
</div> </div>
<nav-footer :current="2" /> <nav-footer :current="3" />
<div class="shop_car" @click="shopCar"> <div class="shop_car" @click="shopCar">
<u-badge <u-badge

7
pages.json
View File

@ -477,8 +477,11 @@
{ {
"path": "index/index", "path": "index/index",
"style": { "style": {
"navigationBarTitleText": "本地生活", "navigationBarBackgroundColor": "#fff",
"navigationBarBackgroundColor": "#fff" "navigationStyle": "custom",
"usingComponents": {
"nav-footer": "/components/nav/nav"
}
} }
}, },
{ {

2
pages/user/index.vue
View File

@ -125,7 +125,7 @@
<view>客服</view> <view>客服</view>
</view> </view>
<view style="padding-top: 174rpx;"></view> <view style="padding-top: 174rpx;"></view>
<nav-footer :current="4"/> <nav-footer :current="5"/>
</view> </view>
</template> </template>