developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
yangchenggong1_wd
a1d11dd4 1 parent c4e3566d

fix:我的页面 适配 折叠屏

Inline Side-by-side
Showing 4 changed files with 99 additions and 61 deletions
@@ -6,24 +6,25 @@ import { TrackingButton, TrackConstants } from 'wdTracking/Index'; @@ -6,24 +6,25 @@ import { TrackingButton, TrackConstants } from 'wdTracking/Index';
6 @Component 6 @Component
7 export default struct MinePageMoreFunctionUI { 7 export default struct MinePageMoreFunctionUI {
8 @Link moreData: MinePageMoreFunctionModel[] 8 @Link moreData: MinePageMoreFunctionModel[]
  9 + @Link percent:number
9 10
10 build() { 11 build() {
11 Column() { 12 Column() {
12 Column() { 13 Column() {
13 Text("更多功能") 14 Text("更多功能")
14 .fontColor($r('app.color.color_222222')) 15 .fontColor($r('app.color.color_222222'))
15 - .fontSize('29lpx')  
16 - .margin({ left: "31lpx" })  
17 - .lineHeight('46lpx') 16 + .fontSize(`${this.calcHeight(29)}lpx`)
  17 + .margin({ left: `${this.calcHeight(31)}lpx` })
  18 + .lineHeight(`${this.calcHeight(46)}lpx`)
18 .fontWeight(FontWeight.Bold) 19 .fontWeight(FontWeight.Bold)
19 - }.height('92lpx') 20 + }.height(`${this.calcHeight(92)}lpx`)
20 .width('100%') 21 .width('100%')
21 .justifyContent(FlexAlign.Center) 22 .justifyContent(FlexAlign.Center)
22 .alignItems(HorizontalAlign.Start) 23 .alignItems(HorizontalAlign.Start)
23 24
24 Text().backgroundColor($r('app.color.color_F5F5F5')) 25 Text().backgroundColor($r('app.color.color_F5F5F5'))
25 .width('100%') 26 .width('100%')
26 - .height('1lpx') 27 + .height(`${this.calcHeight(1)}lpx`)
27 28
28 List() { 29 List() {
29 ForEach(this.moreData, (item: MinePageMoreFunctionModel, index: number) => { 30 ForEach(this.moreData, (item: MinePageMoreFunctionModel, index: number) => {
@@ -31,39 +32,42 @@ export default struct MinePageMoreFunctionUI { @@ -31,39 +32,42 @@ export default struct MinePageMoreFunctionUI {
31 Column() { 32 Column() {
32 Column() { 33 Column() {
33 Row() { 34 Row() {
  35 + Row(){
34 if (item.imgSrc) { 36 if (item.imgSrc) {
35 Image(item.imgSrc) 37 Image(item.imgSrc)
36 - .width('38lpx')  
37 - .height('38lpx')  
38 - .margin({ right: '15lpx' }) 38 + .width(`${this.calcHeight(38)}lpx`)
  39 + .height(`${this.calcHeight(38)}lpx`)
  40 + .margin({ right: `${this.calcHeight(15)}lpx` })
39 .objectFit(ImageFit.Auto) 41 .objectFit(ImageFit.Auto)
40 .interpolation(ImageInterpolation.High) 42 .interpolation(ImageInterpolation.High)
41 } 43 }
42 Text(`${item.msg}`) 44 Text(`${item.msg}`)
43 - .width('456lpx')  
44 - .height('38lpx') 45 + .height(`${this.calcHeight(38)}lpx`)
45 .fontColor($r('app.color.color_666666')) 46 .fontColor($r('app.color.color_666666'))
46 - .fontSize('29lpx') 47 + .fontSize(`${this.calcHeight(29)}lpx`)
47 .fontWeight(400) 48 .fontWeight(400)
  49 + }.alignItems(VerticalAlign.Center)
  50 + .justifyContent(FlexAlign.Start)
48 51
49 - Blank()  
50 Image($r('app.media.mine_user_arrow_2')) 52 Image($r('app.media.mine_user_arrow_2'))
51 - .width('27lpx')  
52 - .height('27lpx') 53 + .width(`${this.calcHeight(27)}lpx`)
  54 + .height(`${this.calcHeight(27)}lpx`)
53 .objectFit(ImageFit.Auto) 55 .objectFit(ImageFit.Auto)
54 .interpolation(ImageInterpolation.High) 56 .interpolation(ImageInterpolation.High)
55 - .margin({ left: '81lpx', right: '29lpx' }) 57 + .margin({ left: `${this.calcHeight(81)}lpx`, right: `${this.calcHeight(29)}lpx` })
56 }.alignItems(VerticalAlign.Center) 58 }.alignItems(VerticalAlign.Center)
  59 + .justifyContent(FlexAlign.SpaceBetween)
  60 + .width("100%")
  61 +
  62 + }.height(`${this.calcHeight(108)}lpx`)
57 .justifyContent(FlexAlign.Center) 63 .justifyContent(FlexAlign.Center)
58 - }.height('108lpx')  
59 - .justifyContent(FlexAlign.Center)  
60 - .alignItems(HorizontalAlign.Start)  
61 - .padding({ left: '27lpx' }) 64 + .padding({ left: `${this.calcHeight(27)}lpx` })
  65 + .width("100%")
62 66
63 if (index != this.moreData.length - 1) { 67 if (index != this.moreData.length - 1) {
64 Text().backgroundColor($r('app.color.color_F5F5F5')) 68 Text().backgroundColor($r('app.color.color_F5F5F5'))
65 - .width('612lpx')  
66 - .height('1lpx') 69 + .width(`612lpx`)
  70 + .height(`${this.calcHeight(1)}lpx`)
67 } 71 }
68 } 72 }
69 } 73 }
@@ -83,15 +87,21 @@ export default struct MinePageMoreFunctionUI { @@ -83,15 +87,21 @@ export default struct MinePageMoreFunctionUI {
83 ProcessUtils.gotoFeedBackActivity() 87 ProcessUtils.gotoFeedBackActivity()
84 } 88 }
85 }) 89 })
86 - .height('117lpx') 90 + .height(`${this.calcHeight(117)}lpx`)
  91 + .width("100%")
87 }) 92 })
88 }.onScrollFrameBegin((offset, state) => { 93 }.onScrollFrameBegin((offset, state) => {
89 return { offsetRemain: 0 } 94 return { offsetRemain: 0 }
90 }) 95 })
  96 + .width("100%")
91 } 97 }
92 .backgroundColor($r('app.color.white')) 98 .backgroundColor($r('app.color.white'))
93 .borderRadius(8) 99 .borderRadius(8)
94 - .margin({ left: '23lpx', right: '23lpx', top: "19lpx" }) 100 + .margin({ left: `${this.calcHeight(23)}lpx`, right: `${this.calcHeight(23)}lpx`, top: `${this.calcHeight(19)}lpx` })
  101 + }
  102 +
  103 + calcHeight(value:number): number{
  104 + return value * this.percent
95 } 105 }
96 } 106 }
97 107
@@ -11,6 +11,7 @@ const TAG = "MinePagePersonFunctionUI" @@ -11,6 +11,7 @@ const TAG = "MinePagePersonFunctionUI"
11 export default struct MinePagePersonFunctionUI { 11 export default struct MinePagePersonFunctionUI {
12 @Link personalData:MinePagePersonalFunctionsItem[] 12 @Link personalData:MinePagePersonalFunctionsItem[]
13 @Prop isLogin:boolean 13 @Prop isLogin:boolean
  14 + @Link percent:number
14 15
15 build() { 16 build() {
16 Grid(){ 17 Grid(){
@@ -77,14 +78,14 @@ export default struct MinePagePersonFunctionUI { @@ -77,14 +78,14 @@ export default struct MinePagePersonFunctionUI {
77 break; 78 break;
78 } 79 }
79 } 80 }
80 - }).width('142lpx')  
81 - .height('117lpx') 81 + }).width(`${this.calcHeight(142)}lpx`)
  82 + .height(`${this.calcHeight(117)}lpx`)
82 }) 83 })
83 } 84 }
84 .rowsTemplate('1fr') 85 .rowsTemplate('1fr')
85 .columnsTemplate('1fr 1fr 1fr 1fr 1fr') 86 .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
86 - .height('117lpx')  
87 - .margin({top:'31lpx'}) 87 + .height(`${this.calcHeight(117)}lpx`)
  88 + .margin({top:`${this.calcHeight(31)}lpx`})
88 } 89 }
89 90
90 messageClick(){ 91 messageClick(){
@@ -94,6 +95,10 @@ export default struct MinePagePersonFunctionUI { @@ -94,6 +95,10 @@ export default struct MinePagePersonFunctionUI {
94 console.log(TAG, JSON.stringify(err)) 95 console.log(TAG, JSON.stringify(err))
95 }) 96 })
96 } 97 }
  98 +
  99 + calcHeight(value:number): number{
  100 + return value * this.percent
  101 + }
97 } 102 }
98 103
99 function trackButtonClick(buttonName: string){ 104 function trackButtonClick(buttonName: string){
@@ -13,6 +13,7 @@ export default struct MinePageUserSimpleInfoUI { @@ -13,6 +13,7 @@ export default struct MinePageUserSimpleInfoUI {
13 userType:string = "1" 13 userType:string = "1"
14 @State levelHead:string = "" 14 @State levelHead:string = ""
15 @State levelId:number = 0 15 @State levelId:number = 0
  16 + @Link percent:number
16 17
17 loginStateChange(){ 18 loginStateChange(){
18 if(this.isLogin){ 19 if(this.isLogin){
@@ -29,20 +30,20 @@ export default struct MinePageUserSimpleInfoUI { @@ -29,20 +30,20 @@ export default struct MinePageUserSimpleInfoUI {
29 Stack(){ 30 Stack(){
30 Image(this.headPhotoUrl==""?$r('app.media.default_head'):this.headPhotoUrl) 31 Image(this.headPhotoUrl==""?$r('app.media.default_head'):this.headPhotoUrl)
31 .alt($r('app.media.default_head')) 32 .alt($r('app.media.default_head'))
32 - .width('100lpx')  
33 - .height('100lpx') 33 + .width(`${this.calcHeight(100)}lpx`)
  34 + .height(`${this.calcHeight(100)}lpx`)
34 .objectFit(ImageFit.Cover) 35 .objectFit(ImageFit.Cover)
35 .borderRadius(50) 36 .borderRadius(50)
36 37
37 if(StringUtils.isNotEmpty(this.levelHead)){ 38 if(StringUtils.isNotEmpty(this.levelHead)){
38 Image(this.levelHead) 39 Image(this.levelHead)
39 - .width('130lpx')  
40 - .height('130lpx') 40 + .width(`${this.calcHeight(130)}lpx`)
  41 + .height(`${this.calcHeight(130)}lpx`)
41 .objectFit(ImageFit.Cover) 42 .objectFit(ImageFit.Cover)
42 .borderRadius(50) 43 .borderRadius(50)
43 } 44 }
44 - }.width('130lpx')  
45 - .height('130lpx') 45 + }.width(`${this.calcHeight(130)}lpx`)
  46 + .height(`${this.calcHeight(130)}lpx`)
46 .alignContent(Alignment.Center) 47 .alignContent(Alignment.Center)
47 .onClick(()=>{ 48 .onClick(()=>{
48 this.jumpLogin() 49 this.jumpLogin()
@@ -58,13 +59,13 @@ export default struct MinePageUserSimpleInfoUI { @@ -58,13 +59,13 @@ export default struct MinePageUserSimpleInfoUI {
58 .maxLines(1) 59 .maxLines(1)
59 .fontWeight(FontWeight.Bold) 60 .fontWeight(FontWeight.Bold)
60 .textOverflow({ overflow: TextOverflow.Ellipsis }) 61 .textOverflow({ overflow: TextOverflow.Ellipsis })
61 - .fontSize('33lpx')  
62 - .lineHeight("46lpx") 62 + .fontSize(`${this.calcHeight(33)}lpx`)
  63 + .lineHeight(`${this.calcHeight(46)}lpx`)
63 64
64 Image($r('app.media.mine_user_edit')) 65 Image($r('app.media.mine_user_edit'))
65 - .width('27lpx')  
66 - .height('27lpx')  
67 - .margin({left:'15lpx'}) 66 + .width(`${this.calcHeight(27)}lpx`)
  67 + .height(`${this.calcHeight(27)}lpx`)
  68 + .margin({left:`${this.calcHeight(15)}lpx`})
68 .objectFit(ImageFit.Cover) 69 .objectFit(ImageFit.Cover)
69 Blank() 70 Blank()
70 }.width('100%') 71 }.width('100%')
@@ -75,39 +76,39 @@ export default struct MinePageUserSimpleInfoUI { @@ -75,39 +76,39 @@ export default struct MinePageUserSimpleInfoUI {
75 76
76 Stack(){ 77 Stack(){
77 Image($r('app.media.mine_grade_bg')) 78 Image($r('app.media.mine_grade_bg'))
78 - .width('84lpx')  
79 - .height('29lpx') 79 + .width(`${this.calcHeight(84)}lpx`)
  80 + .height(`${this.calcHeight(29)}lpx`)
80 .objectFit(ImageFit.Auto) 81 .objectFit(ImageFit.Auto)
81 Text(`等级${this.levelId}`) 82 Text(`等级${this.levelId}`)
82 .textAlign(TextAlign.Center) 83 .textAlign(TextAlign.Center)
83 .fontColor($r('app.color.white')) 84 .fontColor($r('app.color.white'))
84 - .fontSize('19lpx')  
85 - .width('50lpx')  
86 - .height('29lpx')  
87 - }.margin({top:'15lpx'}) 85 + .fontSize(`${this.calcHeight(19)}lpx`)
  86 + .width(`${this.calcHeight(50)}lpx`)
  87 + .height(`${this.calcHeight(29)}lpx`)
  88 + }.margin({top:'`${this.calcHeight(15)}lpx`'})
88 }.alignItems(HorizontalAlign.Start) 89 }.alignItems(HorizontalAlign.Start)
89 - .margin({top:'12lpx',left:'23lpx'})  
90 - .width('352lpx') 90 + .margin({top:`${this.calcHeight(12)}lpx`,left:`${this.calcHeight(23)}lpx`})
  91 + .width(`${this.calcHeight(352)}lpx`)
91 }else{ 92 }else{
92 Row(){ 93 Row(){
93 Text("登录注册") 94 Text("登录注册")
94 .fontColor($r('app.color.color_222222')) 95 .fontColor($r('app.color.color_222222'))
95 - .fontSize('38lpx')  
96 - .lineHeight("46lpx") 96 + .fontSize(`${this.calcHeight(38)}lpx`)
  97 + .lineHeight(`${this.calcHeight(46)}lpx`)
97 .fontWeight(600) 98 .fontWeight(600)
98 99
99 Image($r('app.media.mine_user_edit')) 100 Image($r('app.media.mine_user_edit'))
100 - .width('11lpx')  
101 - .height('20lpx')  
102 - .margin({left:'15lpx'}) 101 + .width(`${this.calcHeight(11)}lpx`)
  102 + .height(`${this.calcHeight(20)}lpx`)
  103 + .margin({left:`${this.calcHeight(15)}lpx`})
103 .objectFit(ImageFit.Cover) 104 .objectFit(ImageFit.Cover)
104 Blank() 105 Blank()
105 }.onClick(()=>{ 106 }.onClick(()=>{
106 this.jumpLogin() 107 this.jumpLogin()
107 trackButtonClick("myPageUserLogin") 108 trackButtonClick("myPageUserLogin")
108 }) 109 })
109 - .margin({top:'11lpx',left:'23lpx'})  
110 - .width('352lpx') 110 + .margin({top:`${this.calcHeight(11)}lpx`,left:`${this.calcHeight(23)}lpx`})
  111 + .width(`${this.calcHeight(352)}lpx`)
111 } 112 }
112 113
113 Blank() 114 Blank()
@@ -116,15 +117,15 @@ export default struct MinePageUserSimpleInfoUI { @@ -116,15 +117,15 @@ export default struct MinePageUserSimpleInfoUI {
116 Text("签到") 117 Text("签到")
117 .textAlign(TextAlign.Start) 118 .textAlign(TextAlign.Start)
118 .width('108lpx') 119 .width('108lpx')
119 - .height('46lpx') 120 + .height(`${this.calcHeight(46)}lpx`)
120 .fontColor($r('app.color.color_AD6000')) 121 .fontColor($r('app.color.color_AD6000'))
121 .backgroundColor($r('app.color.color_FFC460')) 122 .backgroundColor($r('app.color.color_FFC460'))
122 .fontWeight(500) 123 .fontWeight(500)
123 .position({x:'23lpx'}) 124 .position({x:'23lpx'})
124 .padding({left:'35lpx'}) 125 .padding({left:'35lpx'})
125 Image($r("app.media.mine_sign_icon")) 126 Image($r("app.media.mine_sign_icon"))
126 - .width('50lpx')  
127 - .height('50lpx') 127 + .width(`${this.calcHeight(50)}lpx`)
  128 + .height(`${this.calcHeight(50)}lpx`)
128 }.width('131lpx') 129 }.width('131lpx')
129 .visibility(Visibility.Hidden) 130 .visibility(Visibility.Hidden)
130 }.backgroundColor($r('app.color.white')) 131 }.backgroundColor($r('app.color.white'))
@@ -201,6 +202,10 @@ export default struct MinePageUserSimpleInfoUI { @@ -201,6 +202,10 @@ export default struct MinePageUserSimpleInfoUI {
201 WDRouterRule.jumpWithPage(WDRouterPage.mineHomePage) 202 WDRouterRule.jumpWithPage(WDRouterPage.mineHomePage)
202 } 203 }
203 } 204 }
  205 +
  206 + calcHeight(value:number): number{
  207 + return value * this.percent
  208 + }
204 } 209 }
205 210
206 function trackButtonClick(buttonName: string){ 211 function trackButtonClick(buttonName: string){
@@ -5,7 +5,7 @@ import MinePageDatasModel from '../../model/MinePageDatasModel' @@ -5,7 +5,7 @@ import MinePageDatasModel from '../../model/MinePageDatasModel'
5 import MinePageUserSimpleInfoUI from '../mine/MinePageUserSimpleInfoUI' 5 import MinePageUserSimpleInfoUI from '../mine/MinePageUserSimpleInfoUI'
6 import MinePagePersonFunctionUI from '../mine/MinePagePersonFunctionUI' 6 import MinePagePersonFunctionUI from '../mine/MinePagePersonFunctionUI'
7 import MinePageMoreFunctionUI from '../mine/MinePageMoreFunctionUI' 7 import MinePageMoreFunctionUI from '../mine/MinePageMoreFunctionUI'
8 -import { DateTimeUtils, SPHelper, StringUtils } from 'wdKit' 8 +import { BreakpointSystem, DateTimeUtils, SPHelper, StringUtils } from 'wdKit'
9 import { SpConstants } from 'wdConstant' 9 import { SpConstants } from 'wdConstant'
10 import dataPreferences from '@ohos.data.preferences'; 10 import dataPreferences from '@ohos.data.preferences';
11 import { MergeRecordDialog } from '../../dialog/MergeRecordDialog' 11 import { MergeRecordDialog } from '../../dialog/MergeRecordDialog'
@@ -59,6 +59,20 @@ export struct MinePageComponent { @@ -59,6 +59,20 @@ export struct MinePageComponent {
59 pageHideTime:number = 0; 59 pageHideTime:number = 0;
60 pageFirstCreateTime:number = 0; 60 pageFirstCreateTime:number = 0;
61 @Prop isMinePage:boolean = false; 61 @Prop isMinePage:boolean = false;
  62 + @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
  63 + private breakpointSystem = new BreakpointSystem();
  64 + @State percent:number = 1
  65 +
  66 + currentChanged(){
  67 + if(this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"){
  68 + //大屏幕 折叠屏 或者ipad
  69 + this.percent = 0.7
  70 + }else {
  71 + this.percent = 1
  72 + }
  73 + console.log(TAG,"currentBreakpoint==>"+this.percent)
  74 + }
  75 +
62 76
63 //第一次还没创建时候 pageShow 接收不到监听 77 //第一次还没创建时候 pageShow 接收不到监听
64 async pageShowForUpdateData() { 78 async pageShowForUpdateData() {
@@ -85,11 +99,14 @@ export struct MinePageComponent { @@ -85,11 +99,14 @@ export struct MinePageComponent {
85 } 99 }
86 100
87 aboutToAppear(){ 101 aboutToAppear(){
  102 + this.breakpointSystem.register();
88 this.pageFirstCreateTime = DateTimeUtils.getTimeStamp() 103 this.pageFirstCreateTime = DateTimeUtils.getTimeStamp()
89 104
90 this.getFunctionData() 105 this.getFunctionData()
91 this.getUserLogin() 106 this.getUserLogin()
92 this.addLoginStatusObserver() 107 this.addLoginStatusObserver()
  108 + console.log(TAG,"currentBreakpoint==>"+this.currentBreakpoint)
  109 + this.currentChanged()
93 } 110 }
94 111
95 getMessageData(){ 112 getMessageData(){
@@ -119,6 +136,7 @@ export struct MinePageComponent { @@ -119,6 +136,7 @@ export struct MinePageComponent {
119 } 136 }
120 137
121 aboutToDisappear(): void { 138 aboutToDisappear(): void {
  139 + this.breakpointSystem.unregister();
122 if(this.preferences){ 140 if(this.preferences){
123 this.preferences.off('change', this.observer); 141 this.preferences.off('change', this.observer);
124 } 142 }
@@ -139,7 +157,7 @@ export struct MinePageComponent { @@ -139,7 +157,7 @@ export struct MinePageComponent {
139 Stack(){ 157 Stack(){
140 Image($r('app.media.mine_head_bg')) 158 Image($r('app.media.mine_head_bg'))
141 .width('100%') 159 .width('100%')
142 - .height('657lpx') 160 + .height(`${657 * this.percent}lpx`)
143 .objectFit(ImageFit.Auto) 161 .objectFit(ImageFit.Auto)
144 this.MinePageUI() 162 this.MinePageUI()
145 } 163 }
@@ -155,16 +173,16 @@ export struct MinePageComponent { @@ -155,16 +173,16 @@ export struct MinePageComponent {
155 @Builder MinePageUI(){ 173 @Builder MinePageUI(){
156 Column(){ 174 Column(){
157 //头像层 175 //头像层
158 - MinePageUserSimpleInfoUI({isLogin:this.isLogin}) 176 + MinePageUserSimpleInfoUI({isLogin:this.isLogin,percent:$percent})
159 //Grid 区域 177 //Grid 区域
160 - MinePagePersonFunctionUI({personalData:$personalData,isLogin:this.isLogin}) 178 + MinePagePersonFunctionUI({personalData:$personalData,isLogin:this.isLogin,percent:$percent})
161 //Card 179 //Card
162 //MinePageCardUI() 180 //MinePageCardUI()
163 //创作者区域 181 //创作者区域
164 182
165 //MinePageCreatorFunctionUI({creatorData:$creatorData}) 183 //MinePageCreatorFunctionUI({creatorData:$creatorData})
166 //更多功能 184 //更多功能
167 - MinePageMoreFunctionUI({moreData:$moreData}) 185 + MinePageMoreFunctionUI({moreData:$moreData,percent:$percent})
168 }.width('100%') 186 }.width('100%')
169 .height('100%') 187 .height('100%')
170 .justifyContent(FlexAlign.Start) 188 .justifyContent(FlexAlign.Start)