• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2023 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 */
15
16import { TitleBar } from './TitleBar'
17
18@Observed
19  //设置条目信息构造
20class SettingMenu {
21  public id: string; // 唯一id
22  public image: Resource; // 菜单图标
23  public text: Resource; // 菜单文本
24  public des: Resource; //后缀文本
25
26  constructor(id: string, image: Resource, text: Resource, des: Resource) {
27    this.id = id;
28    this.image = image;
29    this.text = text;
30    this.des = des;
31  }
32}
33
34@Component
35export struct MineView {
36  //会员中心数组
37  @State vipCenter: SettingMenu[] = [
38    new SettingMenu('vipcenter', $r('app.media.mine_vip'), $r('app.string.vipcenter'), $r('app.string.after_vipcenter'))
39  ];
40  //设置条目信息数组
41  @State menuGroup: SettingMenu[] = [
42    new SettingMenu('setting', $r('app.media.mine_settings'), $r('app.string.setting'), $r('app.string.void')),
43    new SettingMenu('vipownsetting', $r('app.media.mine_vipsettings'), $r('app.string.vipownsetting'), $r('app.string.void')),
44    new SettingMenu('mycollection', $r('app.media.ic_collect'), $r('app.string.mycollection'), $r('app.string.void')),
45    new SettingMenu('mylike', $r('app.media.mine_like'), $r('app.string.mylike'), $r('app.string.void')),
46    new SettingMenu('browsinghistory', $r('app.media.mine_time'), $r('app.string.browsinghistory'), $r('app.string.void')),
47    new SettingMenu('followinghypertalk', $r('app.media.mine_favor'), $r('app.string.followinghypertalk'), $r('app.string.void')),
48    new SettingMenu('shieldsetting', $r('app.media.mine_forbid'), $r('app.string.shieldsetting'), $r('app.string.void')),
49    new SettingMenu('backgroundsetting', $r('app.media.mine_bg'), $r('app.string.settingbackground'), $r('app.string.after_settingBackground')),
50  ];
51
52  build() {
53    Column() {
54      //“我的”标题
55      TitleBar({ title: $r('app.string.my'), image: $r('app.media.scan') })
56      List() {
57
58        //用户头像、昵称信息
59        ListItem() {
60          Column() {
61            Stack() {
62              Row() {
63                Image($r('app.media.photo15'))
64                  .width($r('app.integer.layout_size_48'))
65                  .height($r('app.integer.layout_size_48'))
66                  .borderRadius($r('app.integer.layout_size_26'))
67                Column() {
68                  Text($r('app.string.user_name'))
69                    .fontSize($r('app.integer.layout_size_16'))
70                    .fontColor($r('app.color.font_color_182431'))
71                    .lineHeight($r('app.integer.layout_size_22'))
72                    .fontWeight(500)
73                  Row() {
74                    Text($r('app.string.following'))
75                      .fontSize($r('app.integer.layout_size_14'))
76                      .fontColor($r('app.color.font_color_182431'))
77                      .lineHeight($r('app.integer.layout_size_19'))
78                      .fontWeight(400)
79                      .margin({ top: $r('app.integer.layout_size_4') })
80                      .fontFamily('HarmonyHeiTi')
81                    Text($r('app.string.fans'))
82                      .fontSize($r('app.integer.layout_size_14'))
83                      .fontColor($r('app.color.font_color_182431'))
84                      .lineHeight($r('app.integer.layout_size_19'))
85                      .fontWeight(400)
86                      .margin({ left: $r('app.integer.layout_size_10'), top: $r('app.integer.layout_size_4') })
87                      .fontFamily('HarmonyHeiTi')
88                  }
89                  .opacity($r('app.float.opacity'))
90                }
91                .alignItems(HorizontalAlign.Start)
92                .margin({ left: $r('app.integer.layout_size_16') })
93              }
94              .width('100%')
95
96              Row() {
97                Image($r('app.media.right_arrow'))
98                  .height($r('app.integer.layout_size_20'))
99                  .width($r('app.integer.layout_size_10'))
100                  .opacity($r('app.float.opacity_3'))
101                  .objectFit(ImageFit.Contain)
102              }
103              .width('100%')
104              .justifyContent(FlexAlign.End)
105            }
106          }
107          .borderRadius($r('app.integer.layout_size_24'))
108          .backgroundColor($r('app.color.font_color_FFFFFF'))
109          .width('90%')
110          .height($r('app.integer.layout_size_87'))
111          .margin({ bottom: $r('app.integer.layout_size_12') })
112          .justifyContent(FlexAlign.Center)
113          .padding({
114            left: $r('app.integer.layout_size_22'),
115            right: $r('app.integer.layout_size_12')
116          })
117        }
118        .width('100%')
119
120        //会员中心设置
121        ListItem() {
122          Row() {
123            List() {
124              ForEach(this.vipCenter,
125                (item: SettingMenu) => {
126                  ListItem() {
127                    SettingItemView({ image: item.image, text: item.text, des: item.des })
128                  }
129                },
130                (item: SettingMenu) => item.id.toString())
131            }
132          }
133          .height($r('app.integer.tabbar_height'))
134          .borderRadius($r('app.integer.layout_size_24'))
135          .width('90%')
136          .margin({ bottom: $r('app.integer.layout_size_12') })
137          .backgroundColor($r('app.color.font_color_FFFFFF'))
138        }
139        .width('100%')
140
141        //设置具体条目
142        ListItem() {
143          Row() {
144            List() {
145              ForEach(this.menuGroup,
146                (item: SettingMenu) => {
147                  ListItem() {
148                    SettingItemView({ image: item.image, text: item.text, des: item.des })
149                  }
150                  .width('100%')
151                },
152                (item: SettingMenu) => item.id.toString())
153            }
154            .divider({
155              strokeWidth: $r('app.float.stroke_width'),
156              color: $r('app.color.font_color_00000'),
157              startMargin: $r('app.integer.layout_size_46'),
158              endMargin: $r('app.integer.layout_size_24')
159            })
160          }
161          .padding({ bottom: $r('app.integer.layout_size_5'), top: $r('app.integer.layout_size_5') })
162          .width('90%')
163          .borderRadius($r('app.integer.layout_size_24'))
164          .alignItems(VerticalAlign.Center)
165          .margin({ bottom: $r('app.integer.layout_size_12') })
166          .backgroundColor($r('app.color.font_color_FFFFFF'))
167        }
168        .width('100%')
169
170
171        //深色模式+toggle
172        ListItem() {
173          Row() {
174            Image($r('app.media.mine_dark'))
175              .width($r('app.integer.layout_size_22'))
176              .height($r('app.integer.layout_size_32'))
177              .objectFit(ImageFit.Contain)
178
179            Text($r('app.string.deppcolormode'))
180              .fontSize($r('app.integer.layout_size_16'))
181              .fontWeight(400)
182              .fontFamily('HarmonyHeiTi')
183              .fontColor($r('app.color.font_color_182431'))
184              .margin({ left: $r('app.integer.layout_size_12') })
185              .layoutWeight(1)
186              .lineHeight($r('app.integer.layout_size_22'))
187            Column() {
188              Toggle({ type: ToggleType.Switch, isOn: false })
189            }
190            .justifyContent(FlexAlign.End)
191          }
192          .width('90%')
193          .borderRadius($r('app.integer.layout_size_24'))
194          .backgroundColor($r('app.color.font_color_FFFFFF'))
195          .height($r('app.integer.tabbar_height'))
196          .padding({
197            left: $r('app.integer.layout_size_22'),
198            right: $r('app.integer.layout_size_12')
199          })
200          .alignItems(VerticalAlign.Center)
201        }
202        .width('100%')
203        .borderRadius($r('app.integer.layout_size_24'))
204      }
205    }
206    .height('100%')
207    .backgroundColor($r('app.color.tabbar_background'))
208  }
209}
210
211@Component
212  //设置条目布局
213export struct SettingItemView {
214  private image: string | Resource = ''; // 图标
215  private text: string | Resource = ''; // 设置名称
216  private des: string | Resource = ''; //后面的文本
217
218  build() {
219    Row() {
220      Row() {
221        Image(this.image)
222          .width($r('app.integer.layout_size_22'))
223          .height($r('app.integer.layout_size_32'))
224          .objectFit(ImageFit.Contain)
225        Text(this.text)
226          .fontSize($r('app.integer.layout_size_16'))
227          .fontWeight(400)
228          .fontFamily('HarmonyHeiTi')
229          .fontColor($r('app.color.font_color_182431'))
230          .margin({ left: $r('app.integer.layout_size_12') })
231          .layoutWeight(1)
232          .lineHeight($r('app.integer.layout_size_22'))
233
234        Text(this.des)
235          .opacity($r('app.float.opacity'))
236          .fontSize($r('app.integer.layout_size_14'))
237          .fontWeight(400)
238          .fontFamily('HarmonyHeiTi')
239          .fontColor($r('app.color.font_color_182431'))
240          .lineHeight($r('app.integer.layout_size_19'))
241      }
242      .width('100%')
243      .height($r('app.integer.tabbar_height'))
244      .padding({
245        left: $r('app.integer.layout_size_22'),
246        right: $r('app.integer.layout_size_12')
247      })
248      .alignItems(VerticalAlign.Center)
249    }
250    .width('100%')
251    .height($r('app.integer.layout_size_48'))
252    .alignSelf(ItemAlign.Center)
253  }
254}