1/** 2 * Copyright (c) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15import callTabletPage from './dialer/DialerTablet'; 16import contactPage from './contacts/ContactList'; 17import callPage from './phone/dialer/Dialer'; 18import IndexPresenter from '../presenter/IndexPresenter'; 19import { HiLog } from '../../../../../common/src/main/ets/util/HiLog'; 20import { PermissionManager } from '../../../../../common/src/main/ets/permission/PermissionManager'; 21import DialerPresenter from '../presenter/dialer/DialerPresenter'; 22import call from '@ohos.telephony.call'; 23import ContactListPresenter from '../presenter/contact/ContactListPresenter'; 24import CallRecordPresenter from '../presenter/dialer/callRecord/CallRecordPresenter'; 25import device from '@system.device'; 26 27const TAG = 'Index '; 28 29let storage = LocalStorage.GetShared() 30 31@Entry(storage) 32@Component 33struct Index { 34 private controller: TabsController = new TabsController(); 35 @State mPermissionManager: PermissionManager = PermissionManager.getInstance(); 36 @State @Watch("onIndexChanged") mIndexPresenter: IndexPresenter = IndexPresenter.getInstance(); 37 mDialerPresenter: DialerPresenter = DialerPresenter.getInstance(); 38 @State bottomTabIndex: number = call.hasVoiceCapability() ? 0 : 1; 39 @LocalStorageProp('breakpoint') curBp: string = 'sm'; 40 41 onIndexChanged(): void { 42 HiLog.i(TAG, "uriTabIndex change:" + JSON.stringify(this.mIndexPresenter.tabsIndex)); 43 this.controller.changeIndex(this.mIndexPresenter.tabsIndex); 44 this.bottomTabIndex = this.mIndexPresenter.tabsIndex; 45 this.mDialerPresenter.editPhoneNumber(this.mIndexPresenter.editPhoneNumber); 46 if (this.mIndexPresenter.tabsIndex == 0) { 47 ContactListPresenter.getInstance().setPageShow(false); 48 CallRecordPresenter.getInstance().setPageShow(true); 49 } else { 50 CallRecordPresenter.getInstance().setPageShow(false); 51 ContactListPresenter.getInstance().setPageShow(true); 52 } 53 } 54 55 pageTransition() { 56 PageTransitionEnter({ duration: 100 }) 57 PageTransitionExit({ duration: 100 }) 58 } 59 60 onPageShow() { 61 this.mIndexPresenter.onPageShow(); 62 if (this.bottomTabIndex == 0) { 63 ContactListPresenter.getInstance().setPageShow(false); 64 CallRecordPresenter.getInstance().setPageShow(true); 65 } else { 66 CallRecordPresenter.getInstance().setPageShow(false); 67 ContactListPresenter.getInstance().setPageShow(true); 68 } 69 } 70 71 onPageHide() { 72 ContactListPresenter.getInstance().setPageShow(false); 73 CallRecordPresenter.getInstance().setPageShow(false); 74 } 75 76 aboutToAppear() { 77 this.mPermissionManager.initPermissions(); 78 this.mIndexPresenter.aboutToAppear(); 79 this.getInfo(); 80 } 81 82 aboutToDisappear() { 83 this.mIndexPresenter.aboutToDisappear(); 84 } 85 86 getInfo() { 87 device.getInfo({ 88 success: function (data) { 89 AppStorage.SetOrCreate("windowHeight", data.windowHeight / data.screenDensity) 90 }, 91 fail: function (data, code) { 92 HiLog.i(TAG, 'Failed to obtain device information. Error code:' + code + '; Error information: ' + data); 93 }, 94 }); 95 } 96 97 build() { 98 Column() { 99 if (this.mPermissionManager.isAllPermissionsGranted()) { 100 Flex({ 101 direction: this.curBp === 'lg' ? FlexDirection.Row : FlexDirection.Column, 102 alignItems: ItemAlign.Start, 103 justifyContent: FlexAlign.Start 104 }) { 105 if (this.curBp === 'lg') { 106 Column() { 107 TabBars({ controller: this.controller, bottomTabIndex: $bottomTabIndex }) 108 } 109 .height('100%') 110 .zIndex(3) 111 } 112 Column() { 113 Tabs({ 114 barPosition: this.curBp === 'lg' ? BarPosition.Start : BarPosition.End, 115 index: this.bottomTabIndex, 116 controller: this.controller 117 }) { 118 if (this.curBp !== 'lg') { 119 TabContent() { 120 callPage() 121 } 122 } else { 123 TabContent() { 124 callTabletPage() 125 } 126 } 127 TabContent() { 128 contactPage() 129 } 130 } 131 .width('100%') 132 .vertical(false) 133 .barMode(BarMode.Fixed) 134 .barWidth(0) 135 .barHeight(0) 136 .scrollable(false) 137 .animationDuration(0) 138 } 139 .layoutWeight(this.curBp === 'lg' ? 1 : 0) 140 .flexShrink(this.curBp === 'lg' ? 0 : 1) 141 .height(this.curBp === 'lg' ? '100%' : null) 142 .width(this.curBp === 'lg' ? 0 : '100%') 143 144 if (this.curBp !== 'lg') { 145 Column() { 146 TabBars({ controller: this.controller, bottomTabIndex: $bottomTabIndex }) 147 } 148 .backgroundColor($r("sys.color.ohos_id_color_sub_background")) 149 .width('100%') 150 .height($r("app.float.id_item_height_large")) 151 .flexShrink(0) 152 } 153 } 154 .backgroundColor($r("sys.color.ohos_fa_sub_background")) 155 .width('100%') 156 .height('100%') 157 } 158 } 159 .width('100%') 160 .height('100%') 161 } 162} 163 164@Component 165struct TabBars { 166 private tabSrc: number[] = [0, 1]; 167 private controller: TabsController; 168 @Link bottomTabIndex: number; 169 @State mIndexPresenter: IndexPresenter = IndexPresenter.getInstance() 170 @LocalStorageProp('breakpoint') curBp: string = 'sm' 171 172 build() { 173 Flex({ 174 direction: this.curBp === 'lg' ? FlexDirection.Column : FlexDirection.Row, 175 alignItems: ItemAlign.Center, 176 justifyContent: FlexAlign.Center 177 }) { 178 ForEach(this.tabSrc, item => { 179 if (!((!call.hasVoiceCapability()) && item === 0)) { 180 Column() { 181 Column() { 182 Image(this.mIndexPresenter.getTabSrc(this.bottomTabIndex, item)) 183 .objectFit(ImageFit.Contain) 184 .width($r("app.float.id_card_image_small")) 185 .height($r("app.float.id_card_image_small")) 186 .fillColor(this.mIndexPresenter.getTabTextColor(this.bottomTabIndex, item)) 187 Text(this.mIndexPresenter.getTabText(this.bottomTabIndex, item)) 188 .fontWeight(FontWeight.Medium) 189 .margin(this.curBp === 'lg' ? 190 { top: $r("app.float.id_card_margin_mid") } : {}) 191 .fontSize($r("sys.float.ohos_id_text_size_caption")) 192 .fontColor(this.mIndexPresenter.getTabTextColor(this.bottomTabIndex, item)) 193 } 194 .onClick(() => { 195 if (this.bottomTabIndex != item) { 196 this.controller.changeIndex(item); 197 this.bottomTabIndex = item; 198 this.mIndexPresenter.tabsIndex = item; 199 if (item == 0) { 200 ContactListPresenter.getInstance().setPageShow(false); 201 CallRecordPresenter.getInstance().setPageShow(true); 202 } else if (item == 1) { 203 CallRecordPresenter.getInstance().setPageShow(false); 204 ContactListPresenter.getInstance().setPageShow(true); 205 } 206 } 207 }) 208 .width($r("app.float.id_card_image_mid")) 209 .height($r("app.float.id_card_image_mid")) 210 } 211 .justifyContent(FlexAlign.Center) 212 .height(this.curBp === 'lg' ? 213 '130vp' : $r("app.float.id_item_height_large")) 214 .layoutWeight(this.curBp === 'lg' ? 0 : 1) 215 } 216 }, item => item.toString()) 217 } 218 .width(this.curBp === 'lg' ? 219 '96vp' : '100%') 220 .height(this.curBp === 'lg' ? 221 '100%' : $r("app.float.id_item_height_large")) 222 .padding(this.curBp === 'lg' ? 223 { left: $r("app.float.id_card_margin_max"), right: $r("app.float.id_card_margin_max") } : {}) 224 } 225}