221 lines
6.8 KiB
Vue
221 lines
6.8 KiB
Vue
<template>
|
||
<view class="foot-fixed">
|
||
<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"
|
||
:class="{ 'foot-item': true, 'scan-item': item.isScan }"
|
||
>
|
||
<view class="foot-icon-box">
|
||
<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-icon3': item.photo.includes('footer_richScan.png'), 'foot-icon2': !item.photo.includes('footer_richScan.png') }"
|
||
:src="item.photoAc"
|
||
mode="widthFix"
|
||
v-if="current == index"
|
||
></image>
|
||
</view>
|
||
|
||
<text class="foot-label" id="navIndexLabel">{{ item.nav_name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "nav",
|
||
props: {
|
||
current: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
},
|
||
computed: {
|
||
foot_width() {
|
||
// 动态计算导航项宽度，确保均匀分布
|
||
return (100 / this.navList.length).toFixed(2) + '%';
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
navList: [
|
||
{
|
||
photo:
|
||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_home.png",
|
||
photoAc:
|
||
"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_facility.png",
|
||
photoAc:
|
||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_facilityAc.png",
|
||
nav_name: "智能设备",
|
||
url: "/packages/smartDevice/index/index",
|
||
},
|
||
{
|
||
photo:
|
||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_richScan.png",
|
||
photoAc:
|
||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_richScan.png",
|
||
url: "",
|
||
isScan: true,
|
||
},
|
||
{
|
||
photo:
|
||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_community.png",
|
||
photoAc:
|
||
"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_localLife.png",
|
||
// photoAc: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_localLifeAc.png",
|
||
// nav_name: "本地生活",
|
||
// url: "/packages/localLife/index/index",
|
||
// },
|
||
// {
|
||
// photo:
|
||
// "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_shop.png",
|
||
// photoAc:
|
||
// "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_door.png",
|
||
// photoAc:
|
||
// "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",
|
||
},
|
||
],
|
||
}
|
||
},
|
||
methods: {
|
||
getFootnav() {
|
||
let _that = this;
|
||
uni.request({
|
||
url: "https://zhsq.hshuishang.com/Miniapi/Index/footer_nav_list",
|
||
method: "post",
|
||
header: {
|
||
"Content-type": "application/x-www-form-urlencoded",
|
||
},
|
||
data: {},
|
||
dataType: "json",
|
||
success: (result) => {
|
||
result.data[0].url = "/pages/index/index";
|
||
result.data[1].url = "/pages/device/device";
|
||
result.data[2].nav_name = "手机通行";
|
||
result.data[2].url = "/pages/phoneGo/phoneGo";
|
||
|
||
result.data[3].url = `/packages/community/index/index`;
|
||
result.data[4].url = "/pages/user/index";
|
||
|
||
result.data.splice(1, 2);
|
||
let footWidth = (100 / result.data.length).toFixed(2) + "%";
|
||
this.navList = result.data;
|
||
this.foot_width = footWidth;
|
||
},
|
||
});
|
||
},
|
||
|
||
//暂未开通
|
||
NotOpen() {
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "此功能暂未开通！",
|
||
showCancel: false,
|
||
complete: (res) => {
|
||
if (res.cancel) {
|
||
}
|
||
},
|
||
});
|
||
},
|
||
|
||
jump(e) {
|
||
const url = e.currentTarget.dataset.url;
|
||
const index = e.currentTarget.dataset.idx;
|
||
const item = this.navList[index];
|
||
|
||
// 检查是否为扫码功能
|
||
if (item.isScan) {
|
||
// 调用uni-app的扫码API
|
||
uni.scanCode({
|
||
success: (res) => {
|
||
// 扫码成功后的处理逻辑
|
||
console.log('扫码结果:', res.result);
|
||
// 可以根据实际需求对扫码结果进行处理
|
||
},
|
||
fail: (err) => {
|
||
console.log('扫码失败:', err);
|
||
}
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 检查url是否存在且不为空
|
||
if (!url || url.trim() === '') {
|
||
this.NotOpen();
|
||
return;
|
||
}
|
||
|
||
const ctoken = uni.getStorageSync("ctoken");
|
||
const authen = [
|
||
"/pages/index/index",
|
||
"/pages/user/index",
|
||
];
|
||
// 除首页及个人中心页不需要鉴定ctoken， 其他tab页均需存在登录态才可访问
|
||
if (authen.includes(url)) {
|
||
uni.redirectTo({
|
||
url: url,
|
||
});
|
||
return;
|
||
}
|
||
if (!ctoken) {
|
||
uni.redirectTo({
|
||
url: "/pages/login/login",
|
||
});
|
||
return;
|
||
}
|
||
|
||
uni.redirectTo({
|
||
url: url,
|
||
});
|
||
},
|
||
},
|
||
mounted() {
|
||
// this.getFootnav();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./nav.css");
|
||
</style> |