index.nvue
3.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<template>
<view class="f-page">
<StatusBar bg-color="#3277fb" />
<view class="mall" :style="`top: ${height}px`">
<MallSelect :is-home="true" has-store="1" class="mall-select" choose-group="1" @change="handleMallChange" >
<!-- 返回 -->
<template #leftIcon>
<uv-icon class="nav-left-icon" name="arrow-left" color="#ffffff" size="20px" @tap="handleBack" />
</template>
</MallSelect>
</view>
<view class="mall-block" style="height: 44px;"></view>
<TabCards ref="tabCardsRef" :cards="computedCards" :top="44 + height" text-size="28rpx"
@indexChange="handleIndexChange"></TabCards>
</view>
</template>
<script setup>
import {
ref,
computed
} from 'vue'
import {
onLoad,
onShow,
onPullDownRefresh
} from '@dcloudio/uni-app'
import Test from './Test.vue'
import StatusBar from '@/components/StatusBar.vue'
import MallSelect from '@/components/MallSelect.nvue';
import TabCards from '@/components/TabCards.nvue';
import { t, initI18n,updateTabBarText } from '@/plugins/index.js'
onLoad(()=>{
})
onShow(()=>{
initI18n()
updateTabBarText()
})
onPullDownRefresh(() => {
initI18n()
updateTabBarText()
// 子组件内部刷新方法
uni.stopPullDownRefresh()
});
const handleBack = () => {
console.log('点击返回--');
uni.navigateBack();
};
// 计算tabcard高度
const height = ref(uni.getSystemInfoSync().statusBarHeight || 0)
const tabCardsRef = ref(null)
const params = ref({})
const handleMallChange = (e) => {
params.value = e
// 如果没有门店id
if (!params.value.storeId) {
tabCardsRef.value?.setActive(0)
}
}
const computedCards = computed(() => {
if (!params.value.storeId) {
return [{
name: t('app.menu.passengerFlowOverview'),
component: 'Flow'
}]
}
return cards
})
const handleIndexChange = (index) => {
if (index === 1) {
console.log('date');
}
}
const platform = uni.getSystemInfoSync().platform
const cards = [{
name: 'app.menu.passengerFlowOverview',
component: 'Flow'
},
// #ifdef APP-PLUS
// {
// name: 'PreMenu.jointheatmap',//'门店热力',
// component: platform === 'ios' ? 'IosStoreHeatMapNvue' : 'StoreHeatMap',
// props: {
// as: 'comp'
// }
// },
// #endif
// #ifndef APP-PLUS || MP-WEIXIN
// {
// name: 'PreMenu.jointheatmap',//'门店热力',
// component: 'StoreHeatMap',
// props: {
// as: 'comp'
// }
// },
// #endif
// #ifndef MP-WEIXIN
// {
// name: 'Management.zones',// '店内分区',
// component: 'AreaStatistic'
// }
// #endif
]
</script>
<style lang="scss" scoped>
.f-page {
width: 750rpx;
/* #ifdef H5 */
height: calc(100vh - 60px);
/* #endif */
}
::v-deep(.mall-select){
.mall-select-group{
margin-top: 11px;
}
}
.mall {
position: fixed;
left: 0;
width: 750rpx;
height: 44px;
z-index: 999;
background-color: #3277FB;
display: flex;
flex-direction: column;
justify-content: flex-start;
/* #ifdef H5 */
top: 44px;
/* #endif */
/* #ifndef H5 */
top: 0;
/* #endif */
}
.nav-left-icon{
position: fixed;
left: 20rpx;
top: 60px
}
</style>