developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
yangchenggong1_wd
feaa5e76 1 parent efc781fb

desc:个人中心 UI 界面绘制

Inline Side-by-side
Showing 7 changed files with 431 additions and 334 deletions
@@ -2,11 +2,14 @@ import MinePagePersonalFunctionsItem from '../../viewmodel/MinePagePersonalFunct @@ -2,11 +2,14 @@ import MinePagePersonalFunctionsItem from '../../viewmodel/MinePagePersonalFunct
2 import MinePageCreatorFunctionsItem from '../../viewmodel/MinePageCreatorFunctionsItem' 2 import MinePageCreatorFunctionsItem from '../../viewmodel/MinePageCreatorFunctionsItem'
3 import MinePageMoreFunctionModel from '../../viewmodel/MinePageMoreFunctionModel' 3 import MinePageMoreFunctionModel from '../../viewmodel/MinePageMoreFunctionModel'
4 import MinePageDatasModel from '../../model/MinePageDatasModel' 4 import MinePageDatasModel from '../../model/MinePageDatasModel'
5 -import RouteManager from '../../utils/RouteManager' 5 +import MinePageUserSimpleInfoUI from '../page/mine/MinePageUserSimpleInfoUI'
  6 +import MinePagePersonFunctionUI from '../page/mine/MinePagePersonFunctionUI'
  7 +import MinePageCardUI from '../page/mine/MinePageCardUI'
  8 +import MinePageCreatorFunctionUI from '../page/mine/MinePageCreatorFunctionUI'
  9 +import MinePageMoreFunctionUI from '../page/mine/MinePageMoreFunctionUI'
6 10
7 const TAG = 'MinePageComponent'; 11 const TAG = 'MinePageComponent';
8 12
9 -  
10 /** 13 /**
11 * 我的页面 14 * 我的页面
12 */ 15 */
@@ -21,6 +24,8 @@ export struct MinePageComponent { @@ -21,6 +24,8 @@ export struct MinePageComponent {
21 scroller: Scroller = new Scroller() 24 scroller: Scroller = new Scroller()
22 25
23 aboutToAppear(){ 26 aboutToAppear(){
  27 + //登录信息 TODO
  28 +
24 this.getFunctionData() 29 this.getFunctionData()
25 } 30 }
26 31
@@ -35,16 +40,16 @@ export struct MinePageComponent { @@ -35,16 +40,16 @@ export struct MinePageComponent {
35 40
36 build() { 41 build() {
37 Scroll(this.scroller){ 42 Scroll(this.scroller){
38 - Flex({direction:FlexDirection.Column}){  
39 - Stack({alignContent:Alignment.Top}){  
40 - Image($r('app.media.mine_head_bg'))  
41 - .setFullWidth()  
42 - .height('657lpx')  
43 - .objectFit(ImageFit.Auto)  
44 - this.MinePageUI()  
45 - }  
46 - }.width('100%') 43 + Stack(){
  44 + Image($r('app.media.mine_head_bg'))
  45 + .width('100%')
  46 + .height('657lpx')
  47 + .objectFit(ImageFit.Auto)
  48 + this.MinePageUI()
  49 + }
  50 + .alignContent(Alignment.Top)
47 } 51 }
  52 + .setFullWidthAndHeight()
48 .backgroundColor($r('app.color.color_F9F9F9')) 53 .backgroundColor($r('app.color.color_F9F9F9'))
49 .scrollable(ScrollDirection.Vertical) 54 .scrollable(ScrollDirection.Vertical)
50 .scrollBar(BarState.Off) 55 .scrollBar(BarState.Off)
@@ -54,308 +59,16 @@ export struct MinePageComponent { @@ -54,308 +59,16 @@ export struct MinePageComponent {
54 @Builder MinePageUI(){ 59 @Builder MinePageUI(){
55 Column(){ 60 Column(){
56 //头像层 61 //头像层
57 - this.HeaderUI() 62 + MinePageUserSimpleInfoUI({isLogin:this.isLogin})
58 //Grid 区域 63 //Grid 区域
59 - this.GridUI() 64 + MinePagePersonFunctionUI({personalData:$personalData})
60 //Card 65 //Card
61 - this.CardUI() 66 + MinePageCardUI()
62 //创作者区域 67 //创作者区域
63 - this.ActiveUI()  
64 - //滑动区域  
65 - this.MoreFunctionUI()  
66 - }.setFullWidth()  
67 - }  
68 -  
69 - @Builder HeaderUI(){  
70 - Row(){  
71 - //头像  
72 - Stack(){  
73 - Button({type:ButtonType.Circle})  
74 - .backgroundColor($r('app.color.main_red'))  
75 - .width('110lpx')  
76 - .height('110lpx')  
77 - Image($r('app.media.mine_head_icon'))  
78 - .width('108lpx')  
79 - .height('108lpx')  
80 - .objectFit(ImageFit.Cover)  
81 - .borderRadius(50)  
82 - }.width('110lpx')  
83 - .height('110lpx')  
84 - .alignContent(Alignment.Center)  
85 - .onClick(()=>{  
86 - RouteManager.jumpNewPage("pages/TestPage")  
87 - })  
88 -  
89 - //昵称信息  
90 - Column(){  
91 - Row(){  
92 - Text("人民日报网友6G5E3T")  
93 - .fontColor($r('app.color.color_222222'))  
94 - .maxLines(1)  
95 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
96 - .fontSize('33lpx')  
97 - .width('326lpx')  
98 - Image($r('app.media.mine_user_edit'))  
99 - .width('11lpx')  
100 - .height('20lpx')  
101 - .margin({left:'15lpx'})  
102 - .objectFit(ImageFit.Cover)  
103 - }.width('100%')  
104 -  
105 - Stack(){  
106 - Image($r('app.media.mine_grade_bg'))  
107 - .width('84lpx')  
108 - .height('29lpx')  
109 - .objectFit(ImageFit.Auto)  
110 - Text("等级8")  
111 - .textAlign(TextAlign.Center)  
112 - .fontColor($r('app.color.white'))  
113 - .fontSize('19lpx')  
114 - .width('50lpx')  
115 - .height('29lpx')  
116 - }.margin({top:'15lpx'})  
117 - }.alignItems(HorizontalAlign.Start)  
118 - .margin({top:'11lpx',left:'17lpx'})  
119 - .width('352lpx')  
120 -  
121 - Blank()  
122 -  
123 - Stack({alignContent:Alignment.Start}){  
124 - Text("签到")  
125 - .textAlign(TextAlign.Start)  
126 - .width('108lpx')  
127 - .height('46lpx')  
128 - .fontColor($r('app.color.color_AD6000'))  
129 - .backgroundColor($r('app.color.color_FFC460'))  
130 - .fontWeight(500)  
131 - .position({x:'23lpx'})  
132 - .padding({left:'35lpx'})  
133 - Image($r("app.media.mine_sign_icon"))  
134 - .width('50lpx')  
135 - .height('50lpx')  
136 - }.width('131lpx')  
137 - }.setBackGroundWhite()  
138 - .setFullWidth()  
139 - .padding({top:'31lpx',left:'46lpx'})  
140 - }  
141 -  
142 - @Builder GridUI(){  
143 - Grid(){  
144 - ForEach(this.personalData,(item:MinePagePersonalFunctionsItem,index:number)=>{  
145 - GridItem(){  
146 - Row(){  
147 - Column(){  
148 - Image(item.imgSrc)  
149 - .width('46lpx')  
150 - .height('46lpx')  
151 - Text(`${item.msg}`)  
152 - .margin({top:'8lpx'})  
153 - .width('50lpx')  
154 - .height('23lpx')  
155 - .fontColor($r('app.color.color_222222'))  
156 - .fontSize('23lpx')  
157 - }  
158 - .alignItems(HorizontalAlign.Center)  
159 - .width('100%')  
160 - Blank()  
161 - .layoutWeight(1)  
162 - if(index % 4 < 3 && index != this.personalData.length){  
163 - Text().backgroundColor($r('app.color.color_222222'))  
164 - .opacity(0.1)  
165 - .width('2lpx')  
166 - .height('29lpx')  
167 - }  
168 - }  
169 - }.onClick(()=>{  
170 - console.log(index+"")  
171 - }).width('169lpx')  
172 - .height('117lpx')  
173 - }, item => item)  
174 - }  
175 - .rowsTemplate('1fr 1fr')  
176 - .columnsTemplate('1fr 1fr 1fr 1fr')  
177 - .height('338lpx')  
178 - .margin({top:'31lpx',left:'23lpx',right:'23lpx' })  
179 - }  
180 -  
181 - @Builder ActiveUI(){  
182 - Column(){  
183 - Row(){  
184 - Text("创作者中心")  
185 - .fontSize('29lpx')  
186 - .width('148lpx')  
187 - .height('46lpx')  
188 - .fontColor($r('app.color.color_222222'))  
189 -  
190 - Blank()  
191 -  
192 - Row(){  
193 - Text("内容管理")  
194 - .fontSize('27lpx')  
195 - .width('113lpx')  
196 - .height('35lpx')  
197 - .fontColor($r('app.color.color_222222'))  
198 -  
199 - Image($r('app.media.mine_right_arrow'))  
200 - .width('27lpx')  
201 - .height('27lpx')  
202 - .objectFit(ImageFit.Auto)  
203 - }  
204 -  
205 - }.setFullWidth()  
206 - .height('92lpx')  
207 - .padding({left:'29lpx',top:'23lpx',right:'31lpx'})  
208 -  
209 - Row(){  
210 - Grid(){  
211 - ForEach(this.creatorData,(item:MinePageCreatorFunctionsItem,index:number)=>{  
212 - GridItem(){  
213 - Row(){  
214 - Column(){  
215 - Image(item.imgSrc)  
216 - .width('50lpx')  
217 - .height('50lpx')  
218 - Text(`${item.msg}`)  
219 - .margin({top:'15lpx'})  
220 - .width('96lpx')  
221 - .height('23lpx')  
222 - .fontColor($r('app.color.color_666666'))  
223 - .fontSize('23lpx')  
224 - }  
225 - .alignItems(HorizontalAlign.Center)  
226 - .width('100%')  
227 - Blank()  
228 - .layoutWeight(1)  
229 - if(index % 4 < 3 && index != this.creatorData.length){  
230 - Text().backgroundColor($r('app.color.color_222222'))  
231 - .opacity(0.1)  
232 - .width('2lpx')  
233 - .height('29lpx')  
234 - }  
235 - }  
236 - }.onClick(()=>{  
237 - console.log(index+"")  
238 - }).width('169lpx')  
239 - .height('117lpx')  
240 - }, item => item)  
241 - }  
242 - .rowsTemplate('1fr')  
243 - .columnsTemplate('1fr 1fr 1fr 1fr')  
244 - .height('88lpx')  
245 - }.setFullWidth()  
246 - .height('127lpx')  
247 - }  
248 - .height('219lpx')  
249 - .borderRadius(8)  
250 - .margin({top:'19lpx',left:'23lpx',right:'23lpx',bottom:'19lpx'})  
251 - .setBackGroundWhite()  
252 - }  
253 -  
254 - @Builder CardUI(){  
255 - Flex(){  
256 - Stack(){  
257 - Image($r('app.media.mine_card_01'))  
258 - .setFullWidthAndHeight()  
259 - .objectFit(ImageFit.Auto)  
260 - Column(){  
261 - Text("积分商城")  
262 - .fontColor($r('app.color.color_994D00'))  
263 - .width('119lpx')  
264 - .height('35lpx')  
265 - .textAlign(TextAlign.Start)  
266 - .fontSize('29lpx')  
267 - Text("华为MATE40手机")  
268 - .width('159lpx')  
269 - .height('23lpx')  
270 - .fontColor($r('app.color.color_FF2E0C'))  
271 - .fontSize('19lpx')  
272 - .textAlign(TextAlign.Start)  
273 - .margin({top:'10lpx'})  
274 - }.padding({left:'29lpx'})  
275 - .alignItems(HorizontalAlign.Start)  
276 - }.alignContent(Alignment.Start)  
277 - .width('345lpx')  
278 - .height('115lpx')  
279 -  
280 - Stack(){  
281 - Image($r('app.media.mine_card_02'))  
282 - .setFullWidthAndHeight()  
283 - .objectFit(ImageFit.Auto)  
284 - Column(){  
285 - Text("数字藏品")  
286 - .fontColor($r('app.color.color_B15900'))  
287 - .width('119lpx')  
288 - .height('35lpx')  
289 - .textAlign(TextAlign.Start)  
290 - .fontSize('29lpx')  
291 - Text("黑胶唱片NFT")  
292 - .width('159lpx')  
293 - .height('23lpx')  
294 - .fontColor($r('app.color.color_B15900'))  
295 - .fontSize('19lpx')  
296 - .textAlign(TextAlign.Start)  
297 - .margin({top:'10lpx'})  
298 - }.padding({left:'67lpx'})  
299 - .alignItems(HorizontalAlign.Start)  
300 - }.alignContent(Alignment.Start)  
301 - .width('348lpx')  
302 - .height('115lpx')  
303 - }.setFullWidth()  
304 - .height('115lpx')  
305 - .setPadding()  
306 - }  
307 -  
308 - @Builder MoreFunctionUI(){  
309 - Column(){  
310 - List(){  
311 - ForEach(this.moreData,(item:MinePageMoreFunctionModel,index:number)=>{  
312 - ListItem(){  
313 - Column(){  
314 - Row(){  
315 - if(item.imgSrc){  
316 - Image(item.imgSrc)  
317 - .width('38lpx')  
318 - .height('38lpx')  
319 - .margin({right:'15lpx'})  
320 - }  
321 - Text(`${item.msg}`)  
322 - .margin({top:'8lpx'})  
323 - .width('456lpx')  
324 - .height('38lpx')  
325 - .fontColor($r('app.color.color_666666'))  
326 - .fontSize('29lpx')  
327 -  
328 - Blank()  
329 -  
330 - Image($r('app.media.mine_user_arrow'))  
331 - .width('27lpx')  
332 - .height('27lpx')  
333 - .objectFit(ImageFit.Auto)  
334 - .margin({left:'81lpx',right:'29lpx'})  
335 - }.alignItems(VerticalAlign.Center)  
336 - .justifyContent(FlexAlign.Start)  
337 -  
338 - if(index != this.moreData.length -1 ){  
339 - Text().backgroundColor($r('app.color.color_F5F5F5'))  
340 - .opacity(0.1)  
341 - .width('612lpx')  
342 - .height('2lpx')  
343 - }  
344 - }.height(index === 0 ? '92lpx':'108lpx')  
345 - }.padding({left:'27lpx'})  
346 - .onClick(()=>{  
347 - console.log(index+"")  
348 - })  
349 - .height('117lpx')  
350 - }, item => item)  
351 - }.onScrollFrameBegin((offset, state) => {  
352 - return { offsetRemain: 0 }  
353 - })  
354 - }  
355 - .setBackGroundWhite()  
356 - .backgroundColor($r('app.color.white'))  
357 - .setMargining()  
358 - .borderRadius(8) 68 + MinePageCreatorFunctionUI({creatorData:$creatorData})
  69 + //更多功能
  70 + MinePageMoreFunctionUI({moreData:$moreData})
  71 + }.width('100%')
359 } 72 }
360 73
361 @Styles setFullWidthAndHeight(){ 74 @Styles setFullWidthAndHeight(){
@@ -363,26 +76,4 @@ export struct MinePageComponent { @@ -363,26 +76,4 @@ export struct MinePageComponent {
363 .height('100%') 76 .height('100%')
364 } 77 }
365 78
366 - @Styles setFullWidth(){  
367 - .width('100%')  
368 - }  
369 -  
370 - @Styles setFullHeight(){  
371 - .height('100%')  
372 - }  
373 -  
374 - @Styles setPadding(){  
375 - .padding({left:'23lpx',right:'23lpx'})  
376 - }  
377 - @Styles setMargining(){  
378 - .margin({left:'23lpx',right:'23lpx'})  
379 - }  
380 -  
381 - @Styles setBackGroundWhite(){  
382 - .backgroundColor($r('app.color.white'))  
383 - }  
384 -  
385 -  
386 -  
387 } 79 }
388 -  
  1 +@Component
  2 +export default struct MinePageCardUI {
  3 + build(){
  4 + Flex(){
  5 + Stack(){
  6 + Image($r('app.media.mine_card_01'))
  7 + .setFullWidthAndHeight()
  8 + .objectFit(ImageFit.Auto)
  9 + Column(){
  10 + Text("积分商城")
  11 + .fontColor($r('app.color.color_994D00'))
  12 + .width('119lpx')
  13 + .height('35lpx')
  14 + .textAlign(TextAlign.Start)
  15 + .fontSize('29lpx')
  16 + .fontWeight(600)
  17 + Text("华为MATE40手机")
  18 + .width('159lpx')
  19 + .height('23lpx')
  20 + .fontColor($r('app.color.color_994D00'))
  21 + .fontSize('19lpx')
  22 + .fontWeight(400)
  23 + .textAlign(TextAlign.Start)
  24 + .margin({top:'10lpx'})
  25 + }.padding({left:'29lpx'})
  26 + .alignItems(HorizontalAlign.Start)
  27 + }.alignContent(Alignment.Start)
  28 + .width('349lpx')
  29 + .height('115lpx')
  30 +
  31 + Stack(){
  32 + Image($r('app.media.mine_card_02'))
  33 + .setFullWidthAndHeight()
  34 + .objectFit(ImageFit.Auto)
  35 + Column(){
  36 + Text("数字藏品")
  37 + .fontColor($r('app.color.color_B15900'))
  38 + .width('119lpx')
  39 + .height('35lpx')
  40 + .textAlign(TextAlign.Start)
  41 + .fontSize('29lpx')
  42 + .fontWeight(600)
  43 + Text("黑胶唱片NFT")
  44 + .width('159lpx')
  45 + .height('23lpx')
  46 + .fontColor($r('app.color.color_B15900'))
  47 + .fontSize('19lpx')
  48 + .textAlign(TextAlign.Start)
  49 + .margin({top:'10lpx'})
  50 + .fontWeight(400)
  51 + }.padding({left:'67lpx'})
  52 + .alignItems(HorizontalAlign.Start)
  53 + }.alignContent(Alignment.Start)
  54 + .width('348lpx')
  55 + .height('115lpx')
  56 + }.setFullWidth()
  57 + .height('115lpx')
  58 + .padding({left:'23lpx',right:'23lpx'})
  59 + .margin({top:'24lpx'})
  60 + }
  61 +
  62 + @Styles setFullWidthAndHeight(){
  63 + .width('100%')
  64 + .height('100%')
  65 + }
  66 +
  67 + @Styles setFullWidth(){
  68 + .width('100%')
  69 + }
  70 +
  71 + @Styles setFullHeight(){
  72 + .height('100%')
  73 + }
  74 +}
  1 +import MinePageCreatorFunctionsItem from '../../../viewmodel/MinePageCreatorFunctionsItem'
  2 +
  3 +@Component
  4 +export default struct MinePageCreatorFunctionUI {
  5 + @Link creatorData:MinePageCreatorFunctionsItem[]
  6 +
  7 + build(){
  8 + Column(){
  9 + Row(){
  10 + Text("创作者中心")
  11 + .fontSize('29lpx')
  12 + .width('148lpx')
  13 + .height('46lpx')
  14 + .fontWeight(600)
  15 + .fontColor($r('app.color.color_222222'))
  16 +
  17 + Blank()
  18 +
  19 + Row(){
  20 + Text("内容管理")
  21 + .fontSize('27lpx')
  22 + .width('113lpx')
  23 + .height('35lpx')
  24 + .fontColor($r('app.color.color_999999'))
  25 +
  26 + Image($r('app.media.mine_right_arrow'))
  27 + .width('27lpx')
  28 + .height('27lpx')
  29 + .objectFit(ImageFit.Auto)
  30 + }
  31 +
  32 + }.setFullWidth()
  33 + .height('92lpx')
  34 + .padding({left:'29lpx',top:'23lpx',right:'31lpx'})
  35 +
  36 + Row(){
  37 + Grid(){
  38 + ForEach(this.creatorData,(item:MinePageCreatorFunctionsItem,index:number)=>{
  39 + GridItem(){
  40 + Row(){
  41 + Column(){
  42 + Image(item.imgSrc)
  43 + .width('50lpx')
  44 + .height('50lpx')
  45 + Text(`${item.msg}`)
  46 + .margin({top:'15lpx'})
  47 + .width('96lpx')
  48 + .height('23lpx')
  49 + .fontColor($r('app.color.color_666666'))
  50 + .fontSize('23lpx')
  51 + }
  52 + .alignItems(HorizontalAlign.Center)
  53 + .width('100%')
  54 + Blank()
  55 + .layoutWeight(1)
  56 + if(index % 4 < 3 && index != this.creatorData.length){
  57 + Text().backgroundColor($r('app.color.color_222222'))
  58 + .opacity(0.1)
  59 + .width('2lpx')
  60 + .height('29lpx')
  61 + }
  62 + }
  63 + }.onClick(()=>{
  64 + console.log(index+"")
  65 + }).width('169lpx')
  66 + .height('117lpx')
  67 + }, item => item)
  68 + }
  69 + .rowsTemplate('1fr')
  70 + .columnsTemplate('1fr 1fr 1fr 1fr')
  71 + .height('88lpx')
  72 + }.setFullWidth()
  73 + .height('127lpx')
  74 + }
  75 + .height('219lpx')
  76 + .borderRadius(8)
  77 + .margin({top:'19lpx',left:'23lpx',right:'23lpx'})
  78 + .setBackGroundWhite()
  79 + }
  80 +
  81 + @Styles setFullWidthAndHeight(){
  82 + .width('100%')
  83 + .height('100%')
  84 + }
  85 +
  86 + @Styles setFullWidth(){
  87 + .width('100%')
  88 + }
  89 +
  90 + @Styles setFullHeight(){
  91 + .height('100%')
  92 + }
  93 +
  94 + @Styles setBackGroundWhite(){
  95 + .backgroundColor($r('app.color.white'))
  96 + }
  97 +}
  1 +import MinePageMoreFunctionModel from '../../../viewmodel/MinePageMoreFunctionModel'
  2 +
  3 +@Component
  4 +export default struct MinePageMoreFunctionUI{
  5 + @Link moreData:MinePageMoreFunctionModel[]
  6 +
  7 + build(){
  8 + Column(){
  9 + Column(){
  10 + Text(`更多功能`)
  11 + .width('456lpx')
  12 + .height('38lpx')
  13 + .fontColor($r('app.color.color_666666'))
  14 + .fontSize('29lpx')
  15 + .margin({left:"31lpx"})
  16 + .fontWeight(600)
  17 + }.height('92lpx')
  18 + .width('100%')
  19 + .justifyContent(FlexAlign.Center)
  20 + .alignItems(HorizontalAlign.Start)
  21 +
  22 + Text().backgroundColor($r('app.color.color_F5F5F5'))
  23 + .width('100%')
  24 + .height('1lpx')
  25 +
  26 + List(){
  27 + ForEach(this.moreData,(item:MinePageMoreFunctionModel,index:number)=>{
  28 + ListItem(){
  29 + Column(){
  30 + Column(){
  31 + Row(){
  32 + if(item.imgSrc){
  33 + Image(item.imgSrc)
  34 + .width('38lpx')
  35 + .height('38lpx')
  36 + .margin({right:'15lpx'})
  37 + }
  38 + Text(`${item.msg}`)
  39 + .width('456lpx')
  40 + .height('38lpx')
  41 + .fontColor($r('app.color.color_666666'))
  42 + .fontSize('29lpx')
  43 + .fontWeight(400)
  44 +
  45 + Blank()
  46 + Image($r('app.media.mine_user_arrow'))
  47 + .width('27lpx')
  48 + .height('27lpx')
  49 + .objectFit(ImageFit.Auto)
  50 + .margin({left:'81lpx',right:'29lpx'})
  51 + }.alignItems(VerticalAlign.Center)
  52 + .justifyContent(FlexAlign.Center)
  53 + }.height('108lpx')
  54 + .justifyContent(FlexAlign.Center)
  55 + .alignItems(HorizontalAlign.Start)
  56 + .padding({left:'27lpx'})
  57 +
  58 + if(index != this.moreData.length -1 ){
  59 + Text().backgroundColor($r('app.color.color_F5F5F5'))
  60 + .width('612lpx')
  61 + .height('1lpx')
  62 + }
  63 + }
  64 + }
  65 + .onClick(()=>{
  66 + console.log(index+"")
  67 + })
  68 + .height('117lpx')
  69 + }, item => item)
  70 + }.onScrollFrameBegin((offset, state) => {
  71 + return { offsetRemain: 0 }
  72 + })
  73 + }
  74 + .backgroundColor($r('app.color.white'))
  75 + .borderRadius(8)
  76 + .margin({left:'23lpx',right:'23lpx',top:"19lpx"})
  77 + }
  78 +}
  1 +
  2 +import MinePagePersonalFunctionsItem from '../../../viewmodel/MinePagePersonalFunctionsItem'
  3 +
  4 +@Component
  5 +export default struct MinePagePersonFunctionUI {
  6 + @Link personalData:MinePagePersonalFunctionsItem[]
  7 +
  8 + build() {
  9 + Grid(){
  10 + ForEach(this.personalData,(item:MinePagePersonalFunctionsItem,index:number)=>{
  11 + GridItem(){
  12 + Row(){
  13 + Column(){
  14 + Image(item.imgSrc)
  15 + .width('46lpx')
  16 + .height('46lpx')
  17 + Text(`${item.msg}`)
  18 + .margin({top:'8lpx'})
  19 + .width('50lpx')
  20 + .height('23lpx')
  21 + .fontColor($r('app.color.color_222222'))
  22 + .fontSize('23lpx')
  23 + }
  24 + .alignItems(HorizontalAlign.Center)
  25 + .width('100%')
  26 + Blank()
  27 + .layoutWeight(1)
  28 + if(index % 4 < 3 && index != this.personalData.length-1){
  29 + Text().backgroundColor($r('app.color.color_222222'))
  30 + .opacity(0.1)
  31 + .width('2lpx')
  32 + .height('29lpx')
  33 + }
  34 + }
  35 + }.onClick(()=>{
  36 + console.log(index+"")
  37 + }).width('169lpx')
  38 + .height('117lpx')
  39 + }, item => item)
  40 + }
  41 + .rowsTemplate('1fr 1fr')
  42 + .columnsTemplate('1fr 1fr 1fr 1fr')
  43 + .height('234lpx')
  44 + .margin({top:'31lpx',left:'23lpx',right:'23lpx' })
  45 + }
  46 +}
  1 +import RouteManager from '../../../utils/RouteManager'
  2 +
  3 +@Component
  4 +export default struct MinePageUserSimpleInfoUI {
  5 + @Prop isLogin:boolean
  6 +
  7 + build(){
  8 + Row(){
  9 + //头像
  10 + Stack(){
  11 + Button({type:ButtonType.Circle})
  12 + .backgroundColor($r('app.color.main_red'))
  13 + .width('110lpx')
  14 + .height('110lpx')
  15 + Image($r('app.media.mine_head_icon'))
  16 + .width('108lpx')
  17 + .height('108lpx')
  18 + .objectFit(ImageFit.Cover)
  19 + .borderRadius(50)
  20 + }.width('110lpx')
  21 + .height('110lpx')
  22 + .alignContent(Alignment.Center)
  23 + .onClick(()=>{
  24 + RouteManager.jumpNewPage("pages/TestPage")
  25 + })
  26 +
  27 + if(this.isLogin){
  28 + //昵称信息
  29 + Column(){
  30 + Row(){
  31 + Text("人民日报6G5E3T")
  32 + .fontColor($r('app.color.color_222222'))
  33 + .maxLines(1)
  34 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  35 + .fontSize('33lpx')
  36 +
  37 + Image($r('app.media.mine_user_edit'))
  38 + .width('27lpx')
  39 + .height('27lpx')
  40 + .margin({left:'15lpx'})
  41 + .objectFit(ImageFit.Cover)
  42 + Blank()
  43 + }.width('100%')
  44 +
  45 + Stack(){
  46 + Image($r('app.media.mine_grade_bg'))
  47 + .width('84lpx')
  48 + .height('29lpx')
  49 + .objectFit(ImageFit.Auto)
  50 + Text("等级8")
  51 + .textAlign(TextAlign.Center)
  52 + .fontColor($r('app.color.white'))
  53 + .fontSize('19lpx')
  54 + .width('50lpx')
  55 + .height('29lpx')
  56 + }.margin({top:'15lpx'})
  57 + }.alignItems(HorizontalAlign.Start)
  58 + .margin({top:'12lpx',left:'17lpx'})
  59 + .width('352lpx')
  60 + }else{
  61 + Row(){
  62 + Text("登录注册")
  63 + .fontColor($r('app.color.color_222222'))
  64 + .maxLines(1)
  65 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  66 + .fontSize('33lpx')
  67 +
  68 + Image($r('app.media.mine_user_edit'))
  69 + .width('11lpx')
  70 + .height('20lpx')
  71 + .margin({left:'15lpx'})
  72 + .objectFit(ImageFit.Cover)
  73 + Blank()
  74 + }
  75 + .margin({top:'11lpx',left:'17lpx'})
  76 + .width('352lpx')
  77 + }
  78 +
  79 + Blank()
  80 +
  81 + Stack({alignContent:Alignment.Start}){
  82 + Text("签到")
  83 + .textAlign(TextAlign.Start)
  84 + .width('108lpx')
  85 + .height('46lpx')
  86 + .fontColor($r('app.color.color_AD6000'))
  87 + .backgroundColor($r('app.color.color_FFC460'))
  88 + .fontWeight(500)
  89 + .position({x:'23lpx'})
  90 + .padding({left:'35lpx'})
  91 + Image($r("app.media.mine_sign_icon"))
  92 + .width('50lpx')
  93 + .height('50lpx')
  94 + }.width('131lpx')
  95 + }.backgroundColor($r('app.color.white'))
  96 + .setFullWidth()
  97 + .padding({top:'31lpx',left:'46lpx'})
  98 + }
  99 +
  100 + @Styles setFullWidthAndHeight(){
  101 + .width('100%')
  102 + .height('100%')
  103 + }
  104 +
  105 + @Styles setFullWidth(){
  106 + .width('100%')
  107 + }
  108 +
  109 + @Styles setFullHeight(){
  110 + .height('100%')
  111 + }
  112 +}
@@ -68,10 +68,9 @@ class MinePageDatasModel{ @@ -68,10 +68,9 @@ class MinePageDatasModel{
68 * 包含名字和图标 68 * 包含名字和图标
69 */ 69 */
70 getMoreFunctionsData():MinePageCreatorFunctionsItem[]{ 70 getMoreFunctionsData():MinePageCreatorFunctionsItem[]{
71 - if(this.moreData.length === 6){ 71 + if(this.moreData.length === 5){
72 return this.moreData 72 return this.moreData
73 } 73 }
74 - this.moreData.push(new MinePageMoreFunctionModel("更多功能",null))  
75 this.moreData.push(new MinePageMoreFunctionModel("扫一扫",$r('app.media.mine_scan'))) 74 this.moreData.push(new MinePageMoreFunctionModel("扫一扫",$r('app.media.mine_scan')))
76 this.moreData.push(new MinePageMoreFunctionModel("我的奖品",$r('app.media.mine_mygift'))) 75 this.moreData.push(new MinePageMoreFunctionModel("我的奖品",$r('app.media.mine_mygift')))
77 this.moreData.push(new MinePageMoreFunctionModel("意见反馈",$r('app.media.mine_suggest'))) 76 this.moreData.push(new MinePageMoreFunctionModel("意见反馈",$r('app.media.mine_suggest')))