主页import prompt from '@ohos.prompt';import Prompt from '@system.prompt';import router from '@ohos.router';/** * Main page */@Entry@Componentstruct MainPage { @State currentIndex: number = 0; private tabsController: TabsController = new TabsController(); private swiperController: SwiperController = new SwiperController(); @State pictures: any[] = [ { Simg1:$r('app.media.fig1')}, { Simg2:$r('app.media.fig2')}, { Simg3:$r('app.media.fig3')}, { Simg4:$r('app.media.fig4')} ] @State othersItems:any[]=[ {title:'我的最爱',img:$r('app.media.love')}, {title:'历史记录',img:$r('app.media.record')}, {title:'消息通知',img:$r('app.media.message')}, {title:'回收站',img:$r('app.media.recycle')}, {title:' 收藏',img:$r('app.media.favorite')}, {title:'购物清单',img:$r('app.media.shopping')}, {title:'动态',img:$r('app.media.circle')}, {title:'计划目标',img:$r('app.media.target')}, ] @State listItems: any[] = [ {title:'排行榜', img:$r('app.media.top'), text: '并肩于雪上之巅'}, {title:'新品首发', img:$r('app.media.new'), text: '新品抢先购!'}, {title:'大牌闪购', img:$r('app.media.brand'), text: '不存在中间商赚差价'}, {title:'发现好物', img:$r('app.media.found'), text: '你想要的这里都有'} ] @State setItems: any[] = [ {title:'推送通知', img:$r('app.media.news'), textF:'开关'}, {title:'数据管理', img:$r('app.media.data')}, {title:'菜单设置', img:$r('app.media.menu')}, {title:'关于', img:$r('app.media.about')}, {title:'清除缓存', img:$r('app.media.storage')}, {title:'隐私协议', img:$r('app.media.privacy')} ] @Builder TabBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) { Column() { Image(this.currentIndex === index ? selectedImg : normalImg) .width(25) .height(25) Text(title) .margin({ top: 4 }) .fontSize(10) .fontColor(this.currentIndex === index ? '#1698CE' : '#6B6B6B') } .justifyContent(FlexAlign.Center) .height(56) .width('100%') .onClick(() => { this.currentIndex = index; this.tabsController.changeIndex(this.currentIndex); }) } @Builder settingCell(sI) { Row() { Row({ space: 12 }) { Image(sI.img) .width(22) .height(22) Text(sI.title) .fontSize(16) } if (sI.textF === null) { Image($r('app.media.right_grey')) .width(12) .height(24) } else { Toggle({ type: ToggleType.Switch, isOn: false }) } } .justifyContent(FlexAlign.SpaceBetween) .width('100%') .padding({ left: 8, right: 22 }) } build() { Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) { TabContent() { Scroll() { Column({ space: 12 }) { Column() { Text('首页') .fontWeight(FontWeight.Medium) .fontSize(24) .margin({ top: 12 }) .padding({ left: 12 }) } .width('100%') .alignItems(HorizontalAlign.Start) Swiper(this.swiperController) { ForEach(this.pictures, (img) => { Image(img.Simg1) .borderRadius(16) Image(img.Simg2) .borderRadius(16) Image(img.Simg3) .borderRadius(16) Image(img.Simg4) .borderRadius(16) }, (img: Resource) => JSON.stringify(img.id)) } .margin({ top: 24 }) .autoPlay(true) Grid() { ForEach(this.othersItems, (oI) => { GridItem() { Column() { Image(oI.img) .width(24) .height(24) Text(oI.title) .fontSize(12) .margin({ top: 4 }) } } }) } .columnsTemplate('1fr 1fr 1fr 1fr') .rowsTemplate('1fr 1fr') .columnsGap(8) .rowsGap(12) .padding({ top: 12, bottom: 12 }) .height(124) .backgroundColor(Color.White) .borderRadius(24) Text('列表') .fontSize(16) .fontWeight(FontWeight.Medium) .width('100%') .margin({ top: 12 }) Grid() { ForEach(this.listItems, (lI) => { GridItem() { Column() { Text(lI.title) .fontSize(16) .fontWeight(FontWeight.Medium) Text(lI.text) .margin({ top: 4 }) .fontSize(12) .fontColor('"#99182431"') } .alignItems(HorizontalAlign.Start) } .padding({ top: 8, left: 8 }) .borderRadius(12) .align(Alignment.TopStart) .backgroundImage(lI.img) .backgroundImageSize(ImageSize.Cover) .width('100%') .height('100%') }) } .width('100%') .height(260) .columnsTemplate('1fr 1fr') .rowsTemplate('1fr 1fr') .columnsGap(8) .rowsGap(12) .margin({ bottom: 55 }) } } .height('100%') } .padding({ left: 12, right: 12 }) .backgroundColor('#F1F3F5') .tabBar(this.TabBuilder('首页', 0, $r('app.media.home_selected'), $r('app.media.home_normal'))) TabContent() { Scroll() { Column({ space: 12 }) { Column(){ Text('我的') .fontWeight(FontWeight.Medium) .fontSize(24) .margin({ top: 12 }) .padding({ left: 12 }) } .width('100%') .alignItems(HorizontalAlign.Start) Row() { Image($r('app.media.account')) .width(48) .height(48) Column() { Text('Mr.Xie') .fontSize(20) Text('2521885390@qq.com') .fontSize(12) .margin({ top: 4 }) } .alignItems(HorizontalAlign.Start) .margin({ left: 24 }) } .margin({ top: 24 }) .alignItems(VerticalAlign.Center) .width('100%') .height(96) .backgroundColor(Color.White) .padding({ left: 24 }) .borderRadius(16) List() { ForEach(this.setItems, (sI) => { ListItem() { this.settingCell(sI) } .height(48) }) } .backgroundColor(Color.White) .width('100%') .height('42%') .divider({ strokeWidth: 0.25, color: Color.Grey, startMargin: 42, endMargin: 24 }) .borderRadius(16) .padding({ top: 4, bottom: 4 }) Blank() Button('退出登录', { type: ButtonType.Capsule }) .width('90%') .height(40) .fontSize(16) .fontColor('#FA2A2D') .fontWeight(FontWeight.Medium) .backgroundColor('#E5E8EA') .margin({ bottom: 55}) .onClick(() => { AlertDialog.show({ title:'提示消息', message: '确定退出登录吗?', offset:{ dx:0, dy: -20}, alignment: DialogAlignment.Bottom, gridCount:4, autoCancel:true, primaryButton:{ value:'取消', action:() => { //取消操作 } }, secondaryButton:{ value:'确定', action:() => { router.back({ url: 'pages/LoginPage'}) } }, cancel:() => { //取消操作 } }) }) } .height('100%') } } .padding({ left: 12, right: 12 }) .backgroundColor('#F1F3F5') .tabBar(this.TabBuilder('我的', 1, $r('app.media.mine_selected'), $r('app.media.mine_normal'))) } .width('100%') .backgroundColor(Color.White) .barHeight(56) .barMode(BarMode.Fixed) .onChange((index: number) => { this.currentIndex = index; }) }}登录import router from '@ohos.router'import prompt from '@ohos.promptAction';@Extend(TextInput) function InputStyle(){//输入框统一样式 .width('90%').height('25%') .backgroundColor('#f1f3f5') .placeholderColor('#99182431')}@Extend(Line)function linestyle(){//直线统一样式 .height(1) .width('100%') .backgroundColor(Color.Gray)}@Extend(Button)function buttonstyle(){//按钮统一样式 .type(ButtonType.Circle) .width(65) .height(65) .backgroundColor('#d7eef8f7')}@Entry@Componentstruct denglu { @State account:string='' @State password:string='' @State caccount:string=(router.getParams()as Record<string,string>)['account'] @State cpassword:string=(router.getParams()as Record<string,string>)['password'] denglu():void{ if(this.account==''||this.password=='') { prompt.showToast({ message:'账户或密码不能为空!' }) }else { if( (this.account!= this.caccount) ||(this.password!=this.cpassword)){ prompt.showToast({ message: '账号或密码错误,请重新输入' }) } else { router.pushUrl({ url:'pages/zhuye', }) } } } build() { // 根组件 Column({space:10}){ // logo Column(){ Row(){ Image($r("app.media.icon")) .width(70) .height(70) .margin({top:25}) } Row(){ Text('登录界面') .fontSize(30) .fontWeight(FontWeight.Bold) .margin({top:12}) } Row(){ Text('登录已享受更多服务') .fontColor(Color.Gray) .fontSize(17) .fontWeight(FontWeight.Regular) .margin({top:10}) } } .height('20%') .width('100%') .margin({top:35}) // 输入框 Column(){ Column({space:17}){ TextInput({placeholder:'账号'}) .InputStyle() .type(InputType.Number) .maxLength(15) .onChange((value:string)=>{ this.account=value }) Line() .linestyle() TextInput({placeholder:'密码'} ).InputStyle() .type(InputType.Password) .maxLength(8) .onChange((value:string)=>{ this.password=value }) Line() .linestyle() } Row(){ Row(){ Text('发送短信验证码') .fontSize(16) .fontColor('#ff137cf1') .margin(10) }.justifyContent(FlexAlign.Start) .width('50%') Row(){ Text('重置') .fontSize(16) .fontColor('#ff137cf1') .margin(10) }.justifyContent(FlexAlign.End) .width('50%') }.width('100%') .margin({top:15}) } .height('30%') .width('100%') .margin({top:45}) // 登录方式 Column() { Row() { Button('登录') .width('70%') .height('14%') .fontColor(Color.White) .fontWeight(FontWeight.Bold) .fontSize(30) .onClick(()=>{ this.denglu() }) }.margin({ bottom: 20 }) Row() { Text('注册账号') .fontSize(27) .fontWeight(FontWeight.Bold) .fontColor('#007dff') }.justifyContent(FlexAlign.Center) .width('30%') .onClick(()=>{ router.pushUrl({url:'pages/zhuce'}) }) Row() { Text('其他登录方式') .fontSize(16) .fontColor('#99182431') .fontWeight(400) }.margin({top:25}) Row(){ Button() { Image($r('app.media.weixin')) .width(60) .height(60) }.buttonstyle() Button() { Image($r('app.media.qq')) .width(60) .height(60) }.buttonstyle() Button() { Image($r('app.media.douyin')) .width(60) .height(60) }.buttonstyle() } .margin({top:25}) .justifyContent(FlexAlign.SpaceAround) .width('100%') } .height('60%') .width('100%') } .width('100%') .height('100%') .backgroundColor('#d7b1e2f0') }}注册import router from '@ohos.router'import prompt from '@ohos.promptAction';@Extend(TextInput) function InputStyle(){//输入框统一样式 .width('90%').height('16%') .backgroundColor('#f1f3f5') .placeholderColor('#99182431')}@Extend(Line)function linestyle(){//直线统一样式 .height(1) .width('100%') .backgroundColor(Color.Gray)}@Extend(Button)function buttonstyle(){//按钮统一样式 .type(ButtonType.Circle) .width(65) .height(65) .backgroundColor('#d7eef8f7')}@Entry@Componentstruct zhhuce { @State account:string='' @State password:string='' @State rpassword:string=''@State isShowProgress:boolean=false private timeOutId=-1; zhuce():void{ if(this.account==''||this.password==''||this.rpassword=='') { prompt.showToast({ message:'注册信息不能为空,请重新输入' }) }else { if (this.password != this.rpassword) { prompt.showToast({ message: '密码不一致,请重新核对后输入' }) } else { this.isShowProgress=true if(this.timeOutId===-1){ this.timeOutId=setTimeout(()=>{ prompt.showToast({ message:'注册成功!' }) this.isShowProgress=false this.timeOutId=-1 router.pushUrl({ url:'pages/denglu', params:{ account:this.account, password:this.password } }) },2000) } } } } aboutToDisappear(){ clearTimeout(this.timeOutId) this.timeOutId=-1 } build() { // 根组件 Column({space:10}){ // logo Column(){ Row(){ Image($r("app.media.icon")) .width(70) .height(70) .margin({top:25}) } Row(){ Text('注册界面') .fontSize(30) .fontWeight(FontWeight.Bold) .margin({top:12}) } Row(){ Text('注册新用户') .fontColor(Color.Gray) .fontSize(17) .fontWeight(FontWeight.Regular) .margin({top:10}) } } .height('30%') .width('100%') .margin({top:25}) // 输入框 Column(){ Column({space:17}){ TextInput({placeholder:'账号'}) .InputStyle() .type(InputType.Number) .maxLength(15) .onChange((value:string)=>{ this.account=value }) Line() .linestyle() TextInput({placeholder:'密码'} ).InputStyle() .type(InputType.Password) .maxLength(8) .onChange((value:string)=>{ this.password=value }) Line() .linestyle() TextInput({placeholder:'确认密码'}) .InputStyle() .type(InputType.Password) .maxLength(8) .onChange((value:string)=>{ this.rpassword=value }) Line() .linestyle() } Row(){ Row(){ Text('发送短信验证码') .fontSize(16) .fontColor('#ff137cf1') .margin(10) }.justifyContent(FlexAlign.Start) .width('50%') Row(){ Text('重置') .fontSize(16) .fontColor('#ff137cf1') .margin(10) }.justifyContent(FlexAlign.End) .width('50%') }.width('100%') .margin({top:15}) } .height('40%') .width('100%') .margin({top:-40}) if(this.isShowProgress){ LoadingProgress() .margin({top:-50}) .backgroundColor('#182431') .width(60) .height(60) } // 登录方式 Column() { Row() { Button('注册') .width('90%') .height('11%') .fontColor(Color.White) .fontWeight(FontWeight.Bold) .fontSize(25) .onClick(()=>{ this.zhuce() }) }.margin({top:-18}) Row() { Text('登录') .fontSize(25) .fontWeight(FontWeight.Bold) .fontColor('#007dff') .onClick(()=>{ router.pushUrl({ url:'pages/denglu', params:{ account:this.account, password:this.password } }) }) }.justifyContent(FlexAlign.Center) .width('30%') .margin({ top: 10 }) Row() { Text('其他登录方式') .fontSize(16) .fontColor('#99182431') .fontWeight(400) }.margin({top:25}) Row(){ Button() { Image($r('app.media.weixin')) .width(60) .height(60) }.buttonstyle() Button() { Image($r('app.media.qq')) .width(60) .height(60) }.buttonstyle() Button() { Image($r('app.media.douyin')) .width(60) .height(60) }.buttonstyle() } .margin({top:25}) .justifyContent(FlexAlign.SpaceAround) .width('100%') } .height('60%') .width('100%') } .width('100%') .height('100%') .backgroundColor('#d7eef8f7') }}
用户
发表于2024-11-09 00:20:34
2024-11-09 00:20:34
最后回复
53