diff --git a/AppSample/Shopping/build-profile.json5 b/AppSample/Shopping/build-profile.json5 index 152bbe633177df28419d87a6103322534dbd0c54..ec1e0557218c8efda7f3776e95876cb1e57d3283 100644 --- a/AppSample/Shopping/build-profile.json5 +++ b/AppSample/Shopping/build-profile.json5 @@ -7,7 +7,7 @@ "name": "default", "signingConfig": "default" } - ] + ], }, "modules": [ { diff --git a/AppSample/Shopping/entry/package.json b/AppSample/Shopping/entry/package.json index 48ec2fafedd2f00943b4ddeaa293c8f00b60ffe6..459f5f8dcc042c375df256a5ea921752f18e782c 100644 --- a/AppSample/Shopping/entry/package.json +++ b/AppSample/Shopping/entry/package.json @@ -11,4 +11,4 @@ "repository": {}, "version": "1.0.0", "dependencies": {} -} +} \ No newline at end of file diff --git a/AppSample/Shopping/entry/src/main/config.json b/AppSample/Shopping/entry/src/main/config.json index c712e94b88c638af0728e28009f5143411c099c9..8994402fba2f8265934d0fda9a6f05e4e05d1dbb 100644 --- a/AppSample/Shopping/entry/src/main/config.json +++ b/AppSample/Shopping/entry/src/main/config.json @@ -1,7 +1,7 @@ { "app": { "vendor": "example", - "bundleName": "ohos.sample.myapplication", + "bundleName": "ohos.sample.shopping", "version": { "code": 1000000, "name": "1.0.0" @@ -36,7 +36,7 @@ "formsEnabled": false, "label": "$string:MainAbility_label", "type": "page", - "launchType": "standard" + "launchType": "singleton" } ], "distro": { diff --git a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/collect/collected.ets b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/collect/collected.ets index 4f996bd72ba2a817f33ff745d33e4a430b6a713b..3846c032868eba379232f574b42325e5da107772 100644 --- a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/collect/collected.ets +++ b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/collect/collected.ets @@ -14,7 +14,7 @@ */ import mediaQuery from '@ohos.mediaquery' -import router from '@system.router' +import router from '@ohos.router' import { NullPage } from './nullPage' import { SinglePage1 } from './singlePage1' import { SinglePage2 } from './singlePage2' @@ -25,8 +25,8 @@ let portraitCollected = null @Entry @Component struct CollectedPage { - @State width: number = parseInt(router.getParams().num as string, 10) - @State ratio: number = parseInt(router.getParams().ratio as string, 10) + @State width: number = router.getParams()['num'] + @State ratio: number = router.getParams()['ratio'] @State opacity: number = 1 @State num: number = 1 @State layoutId: number = 0 @@ -51,7 +51,7 @@ struct CollectedPage { build() { Column() { Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + Row() { Image('/resources/icon/arrow_left.png') .width(30 * this.ratio) .aspectRatio(1) @@ -76,6 +76,9 @@ struct CollectedPage { .fontSize(18 * this.ratio) } } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) .padding({ top: 10, left: 10, right: 10 }) Tabs() { @@ -145,16 +148,13 @@ struct CollectedPage { } .width('100%') .backgroundColor('#F9F9F9') + .border({ width: this.width === 45 ? 1 : 0, color: '#10000000' }) } PageTransition() { - PageTransitionExit({ duration: 0, curve: Curve.Linear }) - .onExit((type: RouteType, progress: number) => { - this.opacity = 1 - }) - PageTransitionEnter({ duration: 0, curve: Curve.Linear }) - .onEnter((type: RouteType, progress: number) => { - this.opacity = 1 - }) + PageTransitionEnter({ duration: 0 }) + .opacity(1) + PageTransitionExit({ duration: 0 }) + .opacity(1) } } \ No newline at end of file diff --git a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/collect/nullPage.ets b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/collect/nullPage.ets index a483c444cf3303b68fe57265cfd0fffb7c5145b1..6100ad4921660ef1fda2edd8894890a0b883fb62 100644 --- a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/collect/nullPage.ets +++ b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/collect/nullPage.ets @@ -19,7 +19,7 @@ export struct NullPage { @Prop str: string build() { - Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + Column() { Text(this.str) .fontSize(15 * this.ratio) .fontColor(Color.Grey) @@ -28,5 +28,7 @@ export struct NullPage { .width('100%') .height('40%') .backgroundColor('#dfe5e3') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(HorizontalAlign.Center) } } \ No newline at end of file diff --git a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/collect/singlePage1.ets b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/collect/singlePage1.ets index 87bd6f2d6f00e49f352ab30e1f204bb0bf759dfc..5d6e97eed2b0ec104758e031ebb977b3172030fe 100644 --- a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/collect/singlePage1.ets +++ b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/collect/singlePage1.ets @@ -35,9 +35,9 @@ export struct SinglePage1 { build() { Column() { if (this.collected) { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Flex({ alignItems: ItemAlign.Center }) { + Row() { + Row() { + Row() { Text('宝贝状态') .fontSize(13 * this.ratio) Image('/resources/icon/sort-down.png') @@ -45,8 +45,9 @@ export struct SinglePage1 { .aspectRatio(1) .objectFit(ImageFit.Contain) } + .alignItems(VerticalAlign.Center) - Flex({ alignItems: ItemAlign.Center }) { + Row() { Text('收藏时间') .fontSize(13 * this.ratio) Image('/resources/icon/sort-down.png') @@ -54,8 +55,9 @@ export struct SinglePage1 { .aspectRatio(1) .objectFit(ImageFit.Contain) } + .alignItems(VerticalAlign.Center) - Flex({ alignItems: ItemAlign.Center }) { + Row() { Text('运动出行') .fontSize(13 * this.ratio) Image('/resources/icon/sort-down.png') @@ -63,9 +65,15 @@ export struct SinglePage1 { .aspectRatio(1) .objectFit(ImageFit.Contain) } + .alignItems(VerticalAlign.Center) } + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) .width('75%') } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) .backgroundColor(Color.White) .border({ radius: 5 }) .padding(10) diff --git a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/collect/singlePage2.ets b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/collect/singlePage2.ets index a4733c8a0b0fa663de412fdf95eadd70535010a6..a77eecd160aec01666372f3ec1b6fe1fef1aff95 100644 --- a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/collect/singlePage2.ets +++ b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/collect/singlePage2.ets @@ -32,9 +32,9 @@ export struct SinglePage2 { build() { Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Flex({ alignItems: ItemAlign.Center }) { + Row() { + Row() { + Row() { Text('宝贝状态') .fontSize(12 * this.ratio) Image('/resources/icon/sort-down.png') @@ -42,8 +42,9 @@ export struct SinglePage2 { .aspectRatio(1) .objectFit(ImageFit.Contain) } + .alignItems(VerticalAlign.Center) - Flex({ alignItems: ItemAlign.Center }) { + Row() { Text('收藏时间') .fontSize(12 * this.ratio) Image('/resources/icon/sort-down.png') @@ -51,9 +52,15 @@ export struct SinglePage2 { .aspectRatio(1) .objectFit(ImageFit.Contain) } + .alignItems(VerticalAlign.Center) } + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) .width('45%') } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) .backgroundColor(Color.White) .border({ radius: 5 }) .padding(10) @@ -74,7 +81,7 @@ export struct SinglePage2 { .padding({ left: 10 }) Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + Row() { Column() { Image(this.collectData.src) .width('20%') @@ -91,6 +98,9 @@ export struct SinglePage2 { .alignItems(HorizontalAlign.Start) .padding(10) } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) } .width('75%') .height('100%') diff --git a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/collect/singlePage3.ets b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/collect/singlePage3.ets index 3d4088ee14a06e4bd701b708cf3b701b719e6bd2..e1989a440f82ade355e7c44b1db0b32eebe03b8a 100644 --- a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/collect/singlePage3.ets +++ b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/collect/singlePage3.ets @@ -32,9 +32,9 @@ export struct SinglePage3 { build() { Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Flex({ alignItems: ItemAlign.Center }) { + Row() { + Row() { + Row() { Text('宝贝状态') .fontSize(12 * this.ratio) Image('/resources/icon/sort-down.png') @@ -42,8 +42,9 @@ export struct SinglePage3 { .aspectRatio(1) .objectFit(ImageFit.Contain) } + .alignItems(VerticalAlign.Center) - Flex({ alignItems: ItemAlign.Center }) { + Row() { Text('收藏时间') .fontSize(12 * this.ratio) Image('/resources/icon/sort-down.png') @@ -51,8 +52,9 @@ export struct SinglePage3 { .aspectRatio(1) .objectFit(ImageFit.Contain) } + .alignItems(VerticalAlign.Center) - Flex({ alignItems: ItemAlign.Center }) { + Row() { Text('运动出行') .fontSize(12 * this.ratio) Image('/resources/icon/sort-down.png') @@ -60,20 +62,29 @@ export struct SinglePage3 { .aspectRatio(1) .objectFit(ImageFit.Contain) } + .alignItems(VerticalAlign.Center) } + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) .width('75%') } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) .backgroundColor(Color.White) .border({ radius: 5 }) .padding(10) - Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { + Row() { Image(this.collectData.src) .width('32%') .height('16%') .objectFit(ImageFit.Contain) .border({ radius: 10 }) } + .width('100%') + .justifyContent(FlexAlign.Start) + .alignItems(VerticalAlign.Center) .margin({ top: 10 }) } } diff --git a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/detailPage/detail.ets b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/detailPage/detail.ets index 679b0ec52ffa1d00535b212f8c5b5b5b6ce12e82..9a4cb7f0ddbbd3093877c51f8ac69c475f8ca4e8 100644 --- a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/detailPage/detail.ets +++ b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/detailPage/detail.ets @@ -14,19 +14,73 @@ */ import mediaQuery from '@ohos.mediaquery'; -import router from '@system.router'; +import router from '@ohos.router'; import { SwiperModel, PhoneTypeModel, ShowImgModel, RecommendDataModel, GoodsInfoModel, ListDataModel } from "../../model/detailModel" import { swiperData, phoneTypeData, showImgData, recommendData, goodsInfoData, listData } from '../../data/detailData' let portraitDetail = null +class DataSourceDetail1 implements IDataSource { + totalCount(): number { + return this.num + } + + getData(index: number): any { + return index + } + + registerDataChangeListener(listener: DataChangeListener) { + if (this.listeners.indexOf(listener) < 0) { + this.listeners.push(listener) + } + } + + unregisterDataChangeListener(listener: DataChangeListener) { + const pos = this.listeners.indexOf(listener) + if (pos >= 0) { + this.listeners.splice(pos, 1) + } + } + + num: number = 23 + listeners: DataChangeListener[] = [] +} + +class DataSourceDetail2 implements IDataSource { + totalCount(): number { + return this.num + } + + getData(index: number): any { + return index + } + + registerDataChangeListener(listener: DataChangeListener) { + if (this.listeners.indexOf(listener) < 0) { + this.listeners.push(listener) + } + } + + unregisterDataChangeListener(listener: DataChangeListener) { + const pos = this.listeners.indexOf(listener) + if (pos >= 0) { + this.listeners.splice(pos, 1) + } + } + + num: number = 23 + listeners: DataChangeListener[] = [] +} + @Entry @Component struct Detail { - @State width: number = parseInt(router.getParams().num as string, 10) - @State ratio: number = parseInt(router.getParams().ratio as string, 10) + @State width: number = router.getParams()['num'] + @State ratio: number = router.getParams()['ratio'] @State active: boolean = false + dataSourceDetail1: DataSourceDetail1 = new DataSourceDetail1() + dataSourceDetail2: DataSourceDetail2 = new DataSourceDetail2() @State swiper: Array = swiperData @State phoneType: Array = phoneTypeData @State showImg: Array = showImgData @@ -52,236 +106,272 @@ struct Detail { } build() { - Scroll() { - Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + Column() { + List() { + ListItem() { Row() { - Navigator() { - Image('/resources/icon/back.png') + Row() { + Navigator() { + Image('/resources/icon/back.png') + .objectFit(ImageFit.Contain) + .width(25 * this.ratio) + .aspectRatio(1) + } + .active(this.active) + .onClick(() => { + this.active = true + }) + } + + Row() { + Image('/resources/icon/search.png') .objectFit(ImageFit.Contain) - .width(25 * this.ratio) - .aspectRatio(1) + .width(50 * this.ratio) + .height(30 * this.ratio) + Image('/resources/icon/attention.png') + .objectFit(ImageFit.Contain) + .width(50 * this.ratio) + .height(30 * this.ratio) + Image('/resources/icon/more.png') + .objectFit(ImageFit.Contain) + .width(50 * this.ratio) + .height(30 * this.ratio) } - .active(this.active) - .onClick(() => { - this.active = true - }) } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + .height(40 * this.ratio) + .backgroundColor(Color.White) + } - Row() { - Image('/resources/icon/search.png') + ListItem() { + Swiper() { + Image(this.swiper[0].src) .objectFit(ImageFit.Contain) - .width(50 * this.ratio) - .height(30 * this.ratio) - Image('/resources/icon/attention.png') + Image(this.swiper[1].src) .objectFit(ImageFit.Contain) - .width(50 * this.ratio) - .height(30 * this.ratio) - Image('/resources/icon/more.png') + Image(this.swiper[2].src) .objectFit(ImageFit.Contain) - .width(50 * this.ratio) - .height(30 * this.ratio) } + .index(0) + .width('100%') + .height('40%') } - .height(40 * this.ratio) - .backgroundColor(Color.White) - Swiper() { - ForEach(this.swiper, item => { - Image(item.src) - .objectFit(ImageFit.Contain) - }, item => item.toString()) - } - .index(0) - .width('100%') - .height('40%') - - Column() { - Text('卖家促销') - .fontSize(12 * this.ratio) - .fontColor(Color.Red) - .margin({ top: 10, bottom: 5 }) - Text() { - Span('￥') - .fontSize(10 * this.ratio) + ListItem() { + Column() { + Text('卖家促销') + .fontSize(12 * this.ratio) .fontColor(Color.Red) + .margin({ top: 10, bottom: 5 }) + Text() { + Span('￥') + .fontSize(10 * this.ratio) + .fontColor(Color.Red) + Span('4500') + .fontSize(13 * this.ratio) + .fontColor(Color.Red) + } + .margin({ top: 5, bottom: 5 }) } - .margin({ top: 5, bottom: 5 }) + .alignItems(HorizontalAlign.Start) + .width('100%') } - .alignItems(HorizontalAlign.Start) - .width('100%') - - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Text('购物金币可抵56.60元') - .fontSize(15 * this.ratio) - .fontColor('#d2691e') - .backgroundColor('#10d2691e') - .border({ radius: 10 * this.ratio }) - .padding({ left: 3, right: 3 }) - Text('商品券满500减50') - .fontSize(15 * this.ratio) - .fontColor('#d2691e') - .backgroundColor('#10d2691e') - .border({ radius: 10 * this.ratio }) - .padding({ left: 3, right: 3 }) + ListItem() { Row() { - Text('领券>') + Text('购物金币可抵56.60元') .fontSize(15 * this.ratio) .fontColor('#d2691e') - } - } - .margin({ top: 5, bottom: 5 }) - - Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Text('【首降600+12期免息】XX/XXMate 40 Pro 5G 全网通 (亮黑色) 超大内存 极快网速 全球n多人的选择，你值得拥有') - .fontSize(14 * this.ratio) - .maxLines(2) - .textOverflow({ overflow: TextOverflow.Ellipsis }) - .width('83%') - Image('/resources/icon/arrow_right.png') - .objectFit(ImageFit.Contain) - .width(20 * this.ratio) - .height(15 * this.ratio) - } - - Row() { - Text('Mate 40') - .fontSize(12 * this.ratio) - Text('|') - .fontSize(12) - .fontColor(Color.Grey) - .margin({ left: 5, right: 5 }) - Text('内存:256G') - .fontSize(12 * this.ratio) - Text('|') - .fontSize(12) - .fontColor(Color.Grey) - .margin({ left: 5, right: 5 }) - Text('多功能') - .fontSize(12 * this.ratio) - Text('|') - .fontSize(12) - .fontColor(Color.Grey) - .margin({ left: 5, right: 5 }) - Text('性价比高') - .fontSize(12 * this.ratio) + .backgroundColor('#10d2691e') + .border({ radius: 10 * this.ratio }) + .padding({ left: 3, right: 3 }) + Text('商品券满500减50') + .fontSize(15 * this.ratio) + .fontColor('#d2691e') + .backgroundColor('#10d2691e') + .border({ radius: 10 * this.ratio }) + .padding({ left: 3, right: 3 }) + Row() { + Text('领券>') + .fontSize(15 * this.ratio) + .fontColor('#d2691e') + } } - .margin({ top: 10, bottom: 5 }) - + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + .margin({ top: 5, bottom: 5 }) } - .alignItems(HorizontalAlign.Start) - .margin({ top: 10 }) - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Column() { - Image('/resources/icon/attention.png') - .width(25 * this.ratio) - .aspectRatio(1) + ListItem() { + Column() { + Row() { + Text('【首降600+12期免息】XX/XXMate 40 Pro 5G 全网通 (亮黑色) 超大内存 极快网速 全球n多人的选择，你值得拥有') + .fontSize(14 * this.ratio) + .maxLines(2) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .width('83%') + Image('/resources/icon/arrow_right.png') .objectFit(ImageFit.Contain) - Text('进店') - .fontSize(12 * this.ratio) + .width(20 * this.ratio) + .height(15 * this.ratio) } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) - Column() { - Image(`${this.collected ? '/resources/icon/hearted.png' : '/resources/icon/heart.png'}`) - .width(25 * this.ratio) - .aspectRatio(1) - .objectFit(ImageFit.Contain) - Text('收藏') + Row() { + Text('Mate 40') .fontSize(12 * this.ratio) - }.onClick(() => { - this.collected = !this.collected - }) - - Column() { - Image('/resources/icon/comments.png') - .width(25 * this.ratio) - .aspectRatio(1) - .objectFit(ImageFit.Contain) - Text('评价') + Text('|') + .fontSize(12) + .fontColor(Color.Grey) + .margin({ left: 5, right: 5 }) + Text('内存:256G') .fontSize(12 * this.ratio) - } - - Column() { - Image('/resources/icon/share.png') - .width(25 * this.ratio) - .aspectRatio(1) - .objectFit(ImageFit.Contain) - Text('分享') + Text('|') + .fontSize(12) + .fontColor(Color.Grey) + .margin({ left: 5, right: 5 }) + Text('多功能') .fontSize(12 * this.ratio) + Text('|') + .fontSize(12) + .fontColor(Color.Grey) + .margin({ left: 5, right: 5 }) + Text('性价比高') + .fontSize(12 * this.ratio) + } - }.width('55%') + .margin({ top: 10, bottom: 5 }) + .width('100%') + } + .alignItems(HorizontalAlign.Start) + .margin({ top: 10 }) + } + + ListItem() { Row() { Row() { - Image('/resources/icon/highlight.png') - .width(30 * this.ratio) - .aspectRatio(1) - .objectFit(ImageFit.Contain) - .padding(3) + Column() { + Image('/resources/icon/attention.png') + .width(25 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + Text('进店') + .fontSize(12 * this.ratio) + } + + Column() { + Image(`${this.collected ? '/resources/icon/hearted.png' : '/resources/icon/heart.png'}`) + .width(25 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + Text('收藏') + .fontSize(12 * this.ratio) + }.onClick(() => { + this.collected = !this.collected + }) + + Column() { + Image('/resources/icon/comments.png') + .width(25 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + Text('评价') + .fontSize(12 * this.ratio) + } + + Column() { + Image('/resources/icon/share.png') + .width(25 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + Text('分享') + .fontSize(12 * this.ratio) + } } - .backgroundColor('#f4af08') - .padding({ left: 7, right: 7 }) + .width('55%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) Row() { - Text('购买') - .fontSize(15 * this.ratio) - .fontColor(Color.White) + Row() { + Image('/resources/icon/highlight.png') + .width(30 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + .padding(3) + } + .backgroundColor('#f4af08') + .padding({ left: 7, right: 7 }) + + Row() { + Text('购买') + .fontSize(15 * this.ratio) + .fontColor(Color.White) + } + .backgroundColor('#ed4704') + .height(30 * this.ratio) + .padding({ left: 13, right: 23 }) } - .backgroundColor('#ed4704') .height(30 * this.ratio) - .padding({ left: 13, right: 23 }) + .clip(true) + .border({ radius: 20 * this.ratio }) } - .height(30 * this.ratio) - .clip(true) - .border({ radius: 20 * this.ratio }) + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + .margin({ top: 10, bottom: 5 }) } - .margin({ top: 10, bottom: 5 }) - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Text('发货') - .fontSize(15 * this.ratio) - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + ListItem() { + Row() { + Text('发货') + .fontSize(15 * this.ratio) Row() { - Image('/resources/icon/local.png') - .objectFit(ImageFit.Contain) - .width(25 * this.ratio) - .aspectRatio(1) - .margin({ right: 5 }) - Text('广东深圳') - .fontSize(15 * this.ratio) + Row() { + Image('/resources/icon/local.png') + .objectFit(ImageFit.Contain) + .width(25 * this.ratio) + .aspectRatio(1) + .margin({ right: 5 }) + Text('广东深圳') + .fontSize(15 * this.ratio) - } + } - Row() { - Text('快递:') - .fontSize(15 * this.ratio) - Text('0.00') - .fontSize(15 * this.ratio) - } + Row() { + Text('快递:') + .fontSize(15 * this.ratio) + Text('0.00') + .fontSize(15 * this.ratio) + } - Text('月销2.0万+') - .fontSize(15 * this.ratio) + Text('月销2.0万+') + .fontSize(15 * this.ratio) + } + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + .width('85%') } - .width('85%') + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + .margin({ top: 10, bottom: 5 }) } - .margin({ top: 10, bottom: 5 }) - - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Text('活动') - .fontSize(15 * this.ratio) - Flex({ - justifyContent: FlexAlign.SpaceAround, - alignItems: ItemAlign.Center, - direction: FlexDirection.Column - }) { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Navigator({ target: 'pages/performmance/performance' }) { + + ListItem() { + Row() { + Text('活动') + .fontSize(15 * this.ratio) + Column() { + Row() { Row() { Image('/resources/detailImg/deliver/deliver_logo3.png') .objectFit(ImageFit.Contain) @@ -291,16 +381,17 @@ struct Detail { Text('旧机回收，以旧换新') .fontSize(15 * this.ratio) } - } - Image('/resources/icon/arrow_right.png') - .objectFit(ImageFit.Contain) - .width(20 * this.ratio) - .height(15 * this.ratio) - } + Image('/resources/icon/arrow_right.png') + .objectFit(ImageFit.Contain) + .width(20 * this.ratio) + .height(15 * this.ratio) + } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Navigator({ target: 'pages/performance' }) { + Row() { Row() { Image('/resources/detailImg/deliver/deliver_logo3.png') .objectFit(ImageFit.Contain) @@ -311,354 +402,526 @@ struct Detail { .fontSize(15 * this.ratio) } - } - - Image('/resources/icon/arrow_right.png') - .objectFit(ImageFit.Contain) - .width(20 * this.ratio) - .height(15 * this.ratio) - } - }.width('85%') - .height(70 * this.ratio) - } - .margin({ top: 5 }) - - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Text('保障') - .fontSize(15 * this.ratio) - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Text('假一赔十·免举证退换货·全国联保·极速退款') - .maxLines(1) - .textOverflow({ overflow: TextOverflow.Ellipsis }) - .width('70%') - .fontSize(15 * this.ratio) - Image('/resources/icon/arrow_right.png') - .objectFit(ImageFit.Contain) - .width(20 * this.ratio) - .height(15 * this.ratio) - } - .width('85%') - }.margin({ top: 5, bottom: 10 }) - Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Text('选择') - .fontSize(15 * this.ratio) - Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Text('配送至：昌平区，选择，存储量，机身颜色，网络') - .maxLines(1) - .textOverflow({ overflow: TextOverflow.Ellipsis }) - .width('70%') - .fontSize(15 * this.ratio) Image('/resources/icon/arrow_right.png') .objectFit(ImageFit.Contain) .width(20 * this.ratio) .height(15 * this.ratio) } - .width('85%') - } - } - .margin({ top: 5, bottom: 5 }) - - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Text() - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - ForEach(this.phoneType, item => { - Image(`${item.uri}`) - .objectFit(ImageFit.Contain) - .width(35 * this.ratio) - }, item => item.toString()) - Text('共6种机身颜色可选') - .fontSize(13 * this.ratio) + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) } .width('85%') - + .height(70 * this.ratio) + .justifyContent(FlexAlign.SpaceAround) + .alignItems(HorizontalAlign.Center) } - .height(50 * this.ratio) + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + .margin({ top: 5 }) } - Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Text('宝贝评价(48088)') + ListItem() { + Row() { + Text('保障') .fontSize(15 * this.ratio) Row() { - Text('查看全部') + Text('假一赔十·免举证退换货·全国联保·极速退款') + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .width('70%') .fontSize(15 * this.ratio) - .fontColor('#d2691e') Image('/resources/icon/arrow_right.png') .objectFit(ImageFit.Contain) .width(20 * this.ratio) .height(15 * this.ratio) - .margin({ left: 10 }) } + .width('85%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) } + .width('100%') .margin({ top: 5, bottom: 10 }) + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + } - Text('购买过该商品的用户认为') - .fontSize(15 * this.ratio) - .margin({ bottom: 10 }) - + ListItem() { Column() { Row() { - Image('/resources/common/user.png') - .objectFit(ImageFit.Contain) - .width(30 * this.ratio) - .aspectRatio(1) - .margin({ right: 10 }) - .border({ radius: 50 * this.ratio }) - Text('user') + Text('选择') .fontSize(15 * this.ratio) + Column() { + Row() { + Text('配送至：昌平区，选择，存储量，机身颜色，网络') + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .width('70%') + .fontSize(15 * this.ratio) + Image('/resources/icon/arrow_right.png') + .objectFit(ImageFit.Contain) + .width(20 * this.ratio) + .height(15 * this.ratio) + } + .width('85%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + } } .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + .margin({ top: 5, bottom: 5 }) - Text('相对而言，XX手机有着更高的网速，更高的内存，更清晰的画质以及更少的耗电量') - .fontSize(15 * this.ratio) + Row() { + Text() + Row() { + Image(this.phoneType[0].uri) + .objectFit(ImageFit.Contain) + .width(35 * this.ratio) + Image(this.phoneType[1].uri) + .objectFit(ImageFit.Contain) + .width(35 * this.ratio) + Image(this.phoneType[2].uri) + .objectFit(ImageFit.Contain) + .width(35 * this.ratio) + Image(this.phoneType[3].uri) + .objectFit(ImageFit.Contain) + .width(35 * this.ratio) + Image(this.phoneType[4].uri) + .objectFit(ImageFit.Contain) + .width(35 * this.ratio) + Text('共5种机身颜色可选') + .fontSize(13 * this.ratio) + } + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + .width('95%') + } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + .height(50 * this.ratio) } - .width('100%') - .padding({ left: 10, right: 10 }) - } - .alignItems(HorizontalAlign.Start) - .margin({ top: 3, bottom: 3 }) - - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Text('参数') - .fontSize(15 * this.ratio) - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Text('网络类型 XX型号种类') + + ListItem() { + Column() { + Row() { + Text('宝贝评价(48088)') + .fontSize(15 * this.ratio) + Row() { + Text('查看全部') + .fontSize(15 * this.ratio) + .fontColor('#d2691e') + Image('/resources/icon/arrow_right.png') + .objectFit(ImageFit.Contain) + .width(20 * this.ratio) + .height(15 * this.ratio) + .margin({ left: 10 }) + } + } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + .margin({ top: 5, bottom: 10 }) + + Text('购买过该商品的用户认为') .fontSize(15 * this.ratio) - Image('/resources/icon/arrow_right.png') - .objectFit(ImageFit.Contain) - .width(20 * this.ratio) - .height(15 * this.ratio) + .margin({ bottom: 10 }) + + Column() { + Row() { + Image('/resources/common/user.png') + .objectFit(ImageFit.Contain) + .width(30 * this.ratio) + .aspectRatio(1) + .margin({ right: 10 }) + .border({ radius: 50 * this.ratio }) + Text('user') + .fontSize(15 * this.ratio) + } + .width('100%') + + Text('相对而言，XX手机有着更高的网速，更高的内存，更清晰的画质以及更少的耗电量') + .fontSize(15 * this.ratio) + + } + .width('100%') + .padding({ left: 10, right: 10 }) + } - .width('85%') + .alignItems(HorizontalAlign.Start) + .margin({ top: 3, bottom: 3 }) } - .margin({ top: 5, bottom: 5 }) - Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Text('XX手机买家秀(91)') + ListItem() { + Row() { + Text('参数') .fontSize(15 * this.ratio) Row() { - Text('查看全部') + Text('网络类型 XX型号种类') .fontSize(15 * this.ratio) - .fontColor('#d2691e') Image('/resources/icon/arrow_right.png') .objectFit(ImageFit.Contain) .width(20 * this.ratio) .height(15 * this.ratio) - .margin({ left: 10 }) } + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + .width('85%') } - .margin({ top: 10, bottom: 10 }) + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + .margin({ top: 5, bottom: 5 }) + } - Row() { - ForEach(this.showImg, item => { - Image(item.uri) + ListItem() { + Column() { + Row() { + Text('XX手机买家秀(91)') + .fontSize(15 * this.ratio) + Row() { + Text('查看全部') + .fontSize(15 * this.ratio) + .fontColor('#d2691e') + Image('/resources/icon/arrow_right.png') + .objectFit(ImageFit.Contain) + .width(20 * this.ratio) + .height(15 * this.ratio) + .margin({ left: 10 }) + } + } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + .margin({ top: 10, bottom: 10 }) + + Row() { + Image(this.showImg[0].uri) + .objectFit(ImageFit.Cover) + .width('25%') + .height(100 * this.ratio) + Image(this.showImg[1].uri) + .objectFit(ImageFit.Cover) + .width('25%') + .height(100 * this.ratio) + Image(this.showImg[2].uri) + .objectFit(ImageFit.Cover) + .width('25%') + .height(100 * this.ratio) + Image(this.showImg[3].uri) .objectFit(ImageFit.Cover) .width('25%') .height(100 * this.ratio) - }, item => item.toString()) + } } - .backgroundColor(Color.Red) } - Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Text('购机回访(1643)') - .fontSize(15 * this.ratio) + ListItem() { + Column() { Row() { - Text('查看全部') + Text('购机回访(1643)') .fontSize(15 * this.ratio) - .fontColor('#d2691e') - Image('/resources/icon/arrow_right.png') + Row() { + Text('查看全部') + .fontSize(15 * this.ratio) + .fontColor('#d2691e') + Image('/resources/icon/arrow_right.png') + .objectFit(ImageFit.Contain) + .width(20 * this.ratio) + .height(15 * this.ratio) + .margin({ left: 10 }) + } + } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + .margin({ top: 10, bottom: 10 }) + + Row() { + Image('/resources/icon/phoneCall.png') .objectFit(ImageFit.Contain) .width(20 * this.ratio) - .height(15 * this.ratio) - .margin({ left: 10 }) + .height(20 * this.ratio) + .margin({ right: 5 }) + + Row() { + Text('5G手机是双卡吗，5G手机可以用一张...') + .fontSize(15 * this.ratio) + Text('3个回答') + .fontSize(15 * this.ratio) + } + .flexGrow(1) + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + .margin({ top: 5, bottom: 5 }) + + Row() { + Image('/resources/icon/phoneCall.png') + .objectFit(ImageFit.Contain) + .width(20 * this.ratio) + .aspectRatio(1) + .margin({ right: 5 }) + Row() { + Text('有没有用5G套餐的 一个月最低...') + .fontSize(15 * this.ratio) + Text('1个回答') + .fontSize(15 * this.ratio) + } + .flexGrow(1) + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + .margin({ top: 5, bottom: 5 }) } - .margin({ top: 10, bottom: 10 }) + .margin({ top: 10 }) + } - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Image('/resources/icon/phoneCall.png') - .objectFit(ImageFit.Contain) - .width(20 * this.ratio) - .height(20 * this.ratio) - .margin({ right: 5 }) + ListItem() { + Column() { + Row() { + Row() { + Image('/resources/detailImg/evaluation/evaluation_logo.jpg') + .objectFit(ImageFit.Contain) + .width(40 * this.ratio) + .aspectRatio(1) + .margin({ right: 10 }) + Column() { + Text('XX官方旗舰店') + .fontSize(17 * this.ratio) + Row() { + Image('/resources/detailImg/evaluation/evaluation_logo2.png') + .objectFit(ImageFit.Contain) + .width('20%') + .height(15 * this.ratio) + Image('/resources/detailImg/evaluation/evaluation_logo3.png') + .objectFit(ImageFit.Contain) + .width('20%') + .height(15 * this.ratio) + } + } + .alignItems(HorizontalAlign.Start) + .margin({ top: 5, bottom: 5 }) + } - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Text('5G手机是双卡吗，5G手机可以用一张...') - .fontSize(15 * this.ratio) - Text('3个回答') - .fontSize(15 * this.ratio) + Row() { + Image('/resources/detailImg/evaluation/evaluation_logo3.png') + .objectFit(ImageFit.Contain) + .width('45%') + .margin({ right: 10 }) + + Image('/resources/detailImg/evaluation/evaluation_logo3.png') + .objectFit(ImageFit.Contain) + .width('45%') + } + .width('45%') } - } - .margin({ top: 5, bottom: 5 }) + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Image('/resources/icon/phoneCall.png') - .objectFit(ImageFit.Contain) - .width(20 * this.ratio) - .aspectRatio(1) - .margin({ right: 5 }) - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Text('有没有用5G套餐的 一个月最低...') + Row() { + Text('宝贝描述 4.8 高') .fontSize(15 * this.ratio) - Text('1个回答') + Text('宝贝描述 4.8 高') + .fontSize(15 * this.ratio) + Text('宝贝描述 4.8 高') .fontSize(15 * this.ratio) } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + .margin({ top: 5 }) } - .margin({ top: 5, bottom: 5 }) } - .margin({ top: 10 }) - Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + ListItem() { + Column() { Row() { - Image('/resources/detailImg/evaluation/evaluation_logo.jpg') - .objectFit(ImageFit.Contain) - .width(40 * this.ratio) - .aspectRatio(1) - .margin({ right: 10 }) - Column() { - Text('XX官方旗舰店') - .fontSize(17 * this.ratio) - Row() { - Image('/resources/detailImg/evaluation/evaluation_logo2.png') + Text('店铺推荐(48088)') + .fontSize(15 * this.ratio) + Row() { + Text('查看全部') + .fontSize(15) + .fontColor('#d2691e') + Image('/resources/icon/arrow_right.png') + .objectFit(ImageFit.Contain) + .width(20 * this.ratio) + .height(15 * this.ratio) + .margin({ left: 10 }) + + } + } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + .margin({ top: 10, bottom: 10 }) + + Column() { + Row() { + Column() { + Image(this.recommendData[0].img) .objectFit(ImageFit.Contain) - .width('20%') - .height(15 * this.ratio) - Image('/resources/detailImg/evaluation/evaluation_logo3.png') + .width('100%') + .height('55%') + .margin({ bottom: 5 }) + + Text(this.recommendData[0].title) + .fontSize(15 * this.ratio) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .maxLines(2) + Text(this.recommendData[0].price) + .fontSize(15 * this.ratio) + .fontColor(Color.Red) + } + .width('33%') + .height('48%') + .alignItems(HorizontalAlign.Start) + + Column() { + Image(this.recommendData[1].img) .objectFit(ImageFit.Contain) - .width('20%') - .height(15 * this.ratio) + .width('100%') + .height('55%') + .margin({ bottom: 5 }) + + Text(this.recommendData[1].title) + .fontSize(15 * this.ratio) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .maxLines(2) + Text(this.recommendData[1].price) + .fontSize(15 * this.ratio) + .fontColor(Color.Red) } - } - .alignItems(HorizontalAlign.Start) - .margin({ top: 5, bottom: 5 }) - } + .width('33%') + .height('48%') + .alignItems(HorizontalAlign.Start) - Row() { - Image('/resources/detailImg/evaluation/evaluation_logo3.png') - .objectFit(ImageFit.Contain) - .width('45%') - .margin({ right: 10 }) + Column() { + Image(this.recommendData[2].img) + .objectFit(ImageFit.Contain) + .width('100%') + .height('55%') + .margin({ bottom: 5 }) - Image('/resources/detailImg/evaluation/evaluation_logo3.png') - .objectFit(ImageFit.Contain) - .width('45%') - } - .width('45%') - } + Text(this.recommendData[2].title) + .fontSize(15 * this.ratio) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .maxLines(2) + Text(this.recommendData[2].price) + .fontSize(15 * this.ratio) + .fontColor(Color.Red) + } + .width('33%') + .height('48%') + .alignItems(HorizontalAlign.Start) + } - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Text('宝贝描述 4.8 高') - .fontSize(15 * this.ratio) - Text('宝贝描述 4.8 高') - .fontSize(15 * this.ratio) - Text('宝贝描述 4.8 高') - .fontSize(15 * this.ratio) - } - .margin({ top: 5 }) - } + Row() { + Column() { + Image(this.recommendData[3].img) + .objectFit(ImageFit.Contain) + .width('100%') + .height('55%') + .margin({ bottom: 5 }) - Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Text('店铺推荐(48088)') - .fontSize(15 * this.ratio) - Row() { - Text('查看全部') - .fontSize(15) - .fontColor('#d2691e') - Image('/resources/icon/arrow_right.png') - .objectFit(ImageFit.Contain) - .width(20 * this.ratio) - .height(15 * this.ratio) - .margin({ left: 10 }) + Text(this.recommendData[3].title) + .fontSize(15 * this.ratio) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .maxLines(2) + Text(this.recommendData[3].price) + .fontSize(15 * this.ratio) + .fontColor(Color.Red) + } + .width('33%') + .height('48%') + .alignItems(HorizontalAlign.Start) - } - } - .margin({ top: 10, bottom: 10 }) + Column() { + Image(this.recommendData[4].img) + .objectFit(ImageFit.Contain) + .width('100%') + .height('55%') + .margin({ bottom: 5 }) - Flex({ justifyContent: FlexAlign.Center, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start }) { - ForEach(this.recommendData, item => { - Column() { - Image(`${item.img}`) - .objectFit(ImageFit.Contain) - .width('100%') - .height('55%') - .margin({ bottom: 5 }) + Text(this.recommendData[4].title) + .fontSize(15 * this.ratio) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .maxLines(2) + Text(this.recommendData[4].price) + .fontSize(15 * this.ratio) + .fontColor(Color.Red) + } + .width('33%') + .height('48%') + .alignItems(HorizontalAlign.Start) - Text(`${item.title}`) - .fontSize(15 * this.ratio) - .textOverflow({ overflow: TextOverflow.Ellipsis }) - .maxLines(2) - Text(`${item.price}`) - .fontSize(15 * this.ratio) - .fontColor(Color.Red) + Column() { + Image(this.recommendData[5].img) + .objectFit(ImageFit.Contain) + .width('100%') + .height('55%') + .margin({ bottom: 5 }) + Text(this.recommendData[5].title) + .fontSize(15 * this.ratio) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + .maxLines(2) + Text(this.recommendData[5].price) + .fontSize(15 * this.ratio) + .fontColor(Color.Red) + } + .width('33%') + .height('48%') + .alignItems(HorizontalAlign.Start) } - .width('33%') - .height('48%') - .alignItems(HorizontalAlign.Start) - }, item => item.toString()) + } + .justifyContent(FlexAlign.Center) + .height('45%') } - .height('45%') - } - .margin({ top: 10 }) - - Column() { - ForEach(this.goodsList, item => { - Image(`${item.img}`) - .width('100%') - .objectFit(ImageFit.Cover) - }, item => item.toString()) + .margin({ top: 10 }) } - Flex({ justifyContent: FlexAlign.Start, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start }) { - ForEach(this.listImg, item => { - Column() { - Image(`${item.img}`) - .objectFit(ImageFit.Contain) - .width('100%') - .height('80%') - Text(`${item.title}`) - .fontSize(14 * this.ratio) - .textOverflow({ overflow: TextOverflow.Ellipsis }) - .maxLines(2) - .width('100%') - .padding({ left: 10 }) + ListItem() { + Column() { + List() { + LazyForEach(this.dataSourceDetail1, item => { + ListItem() { + Image(this.goodsList[item].img) + .width('100%') + .objectFit(ImageFit.Cover) + } + }, item => item.img.toString()) } - .width('45%') - .height('32%') - .margin(5) - .alignItems(HorizontalAlign.Center) - }, item => item.toString()) + .width('100%') + } } - } .padding({ bottom: 10, left: 10, right: 10 }) .width(`${this.width}%`) .backgroundColor(Color.White) } .width('100%') - .scrollBar(BarState.Off) - .backgroundColor('#10000000') + .backgroundColor('#FFFFFF') } - pageTransition() { - PageTransitionEnter({ duration: 0, curve: Curve.Linear, delay: 0 }) - .onEnter((type: RouteType, progress: number) => { - this.opacity = 1 - }) - PageTransitionExit({ duration: 0, curve: Curve.Linear, delay: 0 }) - .onExit((type: RouteType, progress: number) => { - this.opacity = 1 - }) + PageTransition() { + PageTransitionEnter({ duration: 0 }) + .opacity(1) + PageTransitionExit({ duration: 0 }) + .opacity(1) } } \ No newline at end of file diff --git a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/User.ets b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/User.ets index 07272ece839484bd9dc0d37a70800501ffea75e2..5708128f8798473b8dd6c6e0a192680cc261635d 100644 --- a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/User.ets +++ b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/User.ets @@ -41,7 +41,7 @@ export struct User { .border({ radius: 45 * this.ratio }) .margin(10) Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + Row() { Text(this.cardName) .fontSize(15 * this.ratio) .fontWeight(FontWeight.Bold) @@ -58,6 +58,9 @@ export struct User { .objectFit(ImageFit.Contain) } } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) .padding({ right: 20 }) Row() { @@ -92,30 +95,61 @@ export struct User { .width('70%') } - Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { - ForEach(this.record, item => { - Column() { - Image(item.img) - .width(30 * this.ratio) - .aspectRatio(1) - .objectFit(ImageFit.Contain) - .margin({ bottom: 5 }) - Text(item.title) - .fontSize(10 * this.ratio) - } - .onClick(() => { - router.push({ - url: item.uri, - params: { - num: this.num, - ratio: this.ratio - } - }) + Row() { + Column() { + Image(this.record[0].img) + .width(30 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + .margin({ bottom: 5 }) + Text(this.record[0].title) + .fontSize(10 * this.ratio) + } + .onClick(() => { + router.push({ + url: 'pages/collect/collected', + params: { + num: this.num, + ratio: this.ratio + } }) - }, item => item.toString()) + }) + + Column() { + Image(this.record[1].img) + .width(30 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + .margin({ bottom: 5 }) + Text(this.record[1].title) + .fontSize(10 * this.ratio) + } + + Column() { + Image(this.record[2].img) + .width(30 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + .margin({ bottom: 5 }) + Text(this.record[2].title) + .fontSize(10 * this.ratio) + } + + Column() { + Image(this.record[3].img) + .width(30 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + .margin({ bottom: 5 }) + Text(this.record[3].title) + .fontSize(10 * this.ratio) + } } + .width('100%') + .justifyContent(FlexAlign.SpaceAround) + .alignItems(VerticalAlign.Center) - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + Row() { Row() { Text('活动') .fontSize(12 * this.ratio) @@ -138,13 +172,16 @@ export struct User { .objectFit(ImageFit.Contain) } } + .width('100%') .margin({ top: 10 }) .padding(10) .backgroundColor(Color.White) .border({ radius: 10 * this.ratio }) + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + Row() { Text('我的订单') .fontSize(14 * this.ratio) .fontWeight(FontWeight.Bolder) @@ -158,36 +195,83 @@ export struct User { .objectFit(ImageFit.Contain) } } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - ForEach(this.orderData, item => { - Column() { - Image(item.img) - .width(30 * this.ratio) - .aspectRatio(1) - .objectFit(ImageFit.Contain) - .margin({ bottom: 5 }) - Text(item.title) - .fontSize(12 * this.ratio) - } - }, item => item.toString()) + Row() { + Column() { + Image(this.orderData[0].img) + .width(30 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + .margin({ bottom: 5 }) + Text(this.orderData[0].title) + .fontSize(12 * this.ratio) + } + + Column() { + Image(this.orderData[1].img) + .width(30 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + .margin({ bottom: 5 }) + Text(this.orderData[1].title) + .fontSize(12 * this.ratio) + } + + Column() { + Image(this.orderData[2].img) + .width(30 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + .margin({ bottom: 5 }) + Text(this.orderData[2].title) + .fontSize(12 * this.ratio) + } + + Column() { + Image(this.orderData[3].img) + .width(30 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + .margin({ bottom: 5 }) + Text(this.orderData[3].title) + .fontSize(12 * this.ratio) + } + + Column() { + Image(this.orderData[4].img) + .width(30 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + .margin({ bottom: 5 }) + Text(this.orderData[4].title) + .fontSize(12 * this.ratio) + } } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) .margin({ top: 10 }) - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + Row() { Image('/resources/homeImg/imgLoads/product006.png') .width(55 * this.ratio) .aspectRatio(1) .objectFit(ImageFit.Cover) .border({ radius: 5 * this.ratio }) - Flex({ justifyContent: FlexAlign.SpaceAround, direction: FlexDirection.Column }) { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + Column() { + Row() { Text('已签收') .fontSize(13 * this.ratio) Text('12-17') .fontSize(12 * this.ratio) .fontColor(Color.Grey) } + .width('90%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) .margin({ left: 8 }) Text('派送成功') @@ -195,13 +279,18 @@ export struct User { .fontColor(Color.Grey) .margin({ left: 8 }) } + .height(55 * this.ratio) + .justifyContent(FlexAlign.SpaceAround) + .alignItems(HorizontalAlign.Start) .backgroundColor('#f8f8fa') - .width('90%') + .width('85%') .padding({ right: 10 }) .border({ radius: 10 }) } .height(55 * this.ratio) + .width('100%') .margin({ top: 10 }) + .alignItems(VerticalAlign.Center) } .margin({ top: 10 }) .padding(10) @@ -209,23 +298,66 @@ export struct User { .border({ radius: 10 * this.ratio }) Column() { - Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { - ForEach(this.discountData, item => { - Column() { - Image(item.img) - .width(35 * this.ratio) - .aspectRatio(1) - .objectFit(ImageFit.Contain) - .margin({ bottom: 5 }) - Text(item.name) - .fontSize(12 * this.ratio) - .margin(5) - Text(item.text) - .fontSize(12 * this.ratio) - .fontColor(Color.Grey) - } - }, item => item.toString()) + Row() { + Column() { + Image(this.discountData[0].img) + .width(35 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + .margin({ bottom: 5 }) + Text(this.discountData[0].name) + .fontSize(12 * this.ratio) + .margin(5) + Text(this.discountData[0].text) + .fontSize(12 * this.ratio) + .fontColor(Color.Grey) + } + + Column() { + Image(this.discountData[1].img) + .width(35 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + .margin({ bottom: 5 }) + Text(this.discountData[1].name) + .fontSize(12 * this.ratio) + .margin(5) + Text(this.discountData[1].text) + .fontSize(12 * this.ratio) + .fontColor(Color.Grey) + } + + Column() { + Image(this.discountData[2].img) + .width(35 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + .margin({ bottom: 5 }) + Text(this.discountData[2].name) + .fontSize(12 * this.ratio) + .margin(5) + Text(this.discountData[2].text) + .fontSize(12 * this.ratio) + .fontColor(Color.Grey) + } + + Column() { + Image(this.discountData[3].img) + .width(35 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + .margin({ bottom: 5 }) + Text(this.discountData[3].name) + .fontSize(12 * this.ratio) + .margin(5) + Text(this.discountData[3].text) + .fontSize(12 * this.ratio) + .fontColor(Color.Grey) + } } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) .margin({ top: 10 }) } .margin({ top: 10 }) @@ -234,19 +366,50 @@ export struct User { .border({ radius: 10 * this.ratio }) Column() { - Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { - ForEach(this.serviceData, item => { - Column() { - Image(item.img) - .width(30 * this.ratio) - .aspectRatio(1) - .objectFit(ImageFit.Contain) - .margin({ bottom: 5 }) - Text(item.title) - .fontSize(12 * this.ratio) - } - }, item => item.toString()) + Row() { + Column() { + Image(this.serviceData[0].img) + .width(30 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + .margin({ bottom: 5 }) + Text(this.serviceData[0].title) + .fontSize(12 * this.ratio) + } + + Column() { + Image(this.serviceData[1].img) + .width(30 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + .margin({ bottom: 5 }) + Text(this.serviceData[1].title) + .fontSize(12 * this.ratio) + } + + Column() { + Image(this.serviceData[2].img) + .width(30 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + .margin({ bottom: 5 }) + Text(this.serviceData[2].title) + .fontSize(12 * this.ratio) + } + + Column() { + Image(this.serviceData[3].img) + .width(30 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + .margin({ bottom: 5 }) + Text(this.serviceData[3].title) + .fontSize(12 * this.ratio) + } } + .width('100%') + .justifyContent(FlexAlign.SpaceAround) + .alignItems(VerticalAlign.Center) .margin({ top: 10 }) } .margin({ top: 10 }) diff --git a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/boutique.ets b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/boutique.ets index 5bea711c3bffd19e909a753468646c7d15fc95be..8d4cfe25f4dec91860f43bc69b4e7e90ec0e5827 100644 --- a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/boutique.ets +++ b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/boutique.ets @@ -23,31 +23,146 @@ export struct Boutique { build() { Column() { - Flex({ wrap: FlexWrap.Wrap, direction: FlexDirection.Row }) { - ForEach(this.boutiqueData, item => { - Column() { - Text(item.text1) - .fontSize(15 * this.ratio) - .fontWeight(item.text2) - Text(item.text2) - .fontSize(15 * this.ratio) - .margin(5) - Row() { - Image(item.img1) - .width('45%') - .aspectRatio(0.8) - .objectFit(ImageFit.Contain) - Image(item.img2) - .width('45%') - .aspectRatio(0.8) - .objectFit(ImageFit.Contain) - } - .width('100%') + Row() { + Column() { + Text(this.boutiqueData[0].text1) + .fontSize(15 * this.ratio) + .fontWeight(FontWeight.Bold) + Text(this.boutiqueData[0].text2) + .fontSize(15 * this.ratio) + .margin(5) + Row() { + Image(this.boutiqueData[0].img1) + .width('45%') + .aspectRatio(0.8) + .objectFit(ImageFit.Contain) + Image(this.boutiqueData[0].img2) + .width('45%') + .aspectRatio(0.8) + .objectFit(ImageFit.Contain) } - .width('50%') - .alignItems(HorizontalAlign.Start) - }, item => item.toString()) + .width('100%') + } + .width('50%') + .alignItems(HorizontalAlign.Start) + + Column() { + Text(this.boutiqueData[1].text1) + .fontSize(15 * this.ratio) + .fontWeight(FontWeight.Bold) + Text(this.boutiqueData[1].text2) + .fontSize(15 * this.ratio) + .margin(5) + Row() { + Image(this.boutiqueData[1].img1) + .width('45%') + .aspectRatio(0.8) + .objectFit(ImageFit.Contain) + Image(this.boutiqueData[1].img2) + .width('45%') + .aspectRatio(0.8) + .objectFit(ImageFit.Contain) + } + .width('100%') + } + .width('50%') + .alignItems(HorizontalAlign.Start) + } + .width('100%') + + Row() { + Column() { + Text(this.boutiqueData[2].text1) + .fontSize(15 * this.ratio) + .fontWeight(FontWeight.Bold) + Text(this.boutiqueData[2].text2) + .fontSize(15 * this.ratio) + .margin(5) + Row() { + Image(this.boutiqueData[2].img1) + .width('45%') + .aspectRatio(0.8) + .objectFit(ImageFit.Contain) + Image(this.boutiqueData[2].img2) + .width('45%') + .aspectRatio(0.8) + .objectFit(ImageFit.Contain) + } + .width('100%') + } + .width('50%') + .alignItems(HorizontalAlign.Start) + + Column() { + Text(this.boutiqueData[3].text1) + .fontSize(15 * this.ratio) + .fontWeight(FontWeight.Bold) + Text(this.boutiqueData[3].text2) + .fontSize(15 * this.ratio) + .margin(5) + Row() { + Image(this.boutiqueData[3].img1) + .width('45%') + .aspectRatio(0.8) + .objectFit(ImageFit.Contain) + Image(this.boutiqueData[3].img2) + .width('45%') + .aspectRatio(0.8) + .objectFit(ImageFit.Contain) + } + .width('100%') + } + .width('50%') + .alignItems(HorizontalAlign.Start) + } + .width('100%') + + Row() { + Column() { + Text(this.boutiqueData[4].text1) + .fontSize(15 * this.ratio) + .fontWeight(FontWeight.Bold) + Text(this.boutiqueData[4].text2) + .fontSize(15 * this.ratio) + .margin(5) + Row() { + Image(this.boutiqueData[4].img1) + .width('45%') + .aspectRatio(0.8) + .objectFit(ImageFit.Contain) + Image(this.boutiqueData[4].img2) + .width('45%') + .aspectRatio(0.8) + .objectFit(ImageFit.Contain) + } + .width('100%') + } + .width('50%') + .alignItems(HorizontalAlign.Start) + + Column() { + Text(this.boutiqueData[5].text1) + .fontSize(15 * this.ratio) + .fontWeight(FontWeight.Bold) + Text(this.boutiqueData[5].text2) + .fontSize(15 * this.ratio) + .margin(5) + Row() { + Image(this.boutiqueData[5].img1) + .width('45%') + .aspectRatio(0.8) + .objectFit(ImageFit.Contain) + Image(this.boutiqueData[5].img2) + .width('45%') + .aspectRatio(0.8) + .objectFit(ImageFit.Contain) + } + .width('100%') + } + .width('50%') + .alignItems(HorizontalAlign.Start) } + .width('100%') } .width('92%') } diff --git a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/cart.ets b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/cart.ets index 802c1913d0a4d0b4e9c6552c9d819a0011349940..dd2b8cdf58fa3759513c4bd6eb4658b0f9750af3 100644 --- a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/cart.ets +++ b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/cart.ets @@ -18,31 +18,32 @@ export struct Cart { @State flag: boolean = true @State value: number = 1 @Prop ratio: number + @State checked: boolean = false build() { Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + Row() { Row() { Image('/resources/homeImg/imgLoads/product004.png') .width(130 * this.ratio) .aspectRatio(1) .objectFit(ImageFit.Contain) .border({ radius: 10 * this.ratio }) - Flex({ justifyContent: FlexAlign.SpaceBetween, direction: FlexDirection.Column }) { + Column() { Column() { Text('功能手机5G网速') .fontSize(15 * this.ratio) .fontWeight(FontWeight.Bolder) .width('52%') .margin({ bottom: 20 }) - Text('12GB+GB 官方精品') + Text('12GB+8GB 官方精品') .fontSize(12 * this.ratio) .margin({ top: 10 }) } .alignItems(HorizontalAlign.Start) .margin({ bottom: 20 }) - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + Row() { Row() { Text('￥') .fontSize(12 * this.ratio) @@ -80,13 +81,25 @@ export struct Cart { } } .width('60%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) } + .justifyContent(FlexAlign.SpaceBetween) } - Toggle({ type: ToggleType.Checkbox }) + Toggle({ type: ToggleType.Checkbox, isOn: this.checked }) .width(20) .aspectRatio(1) + .onChange((isOn) => { + if (isOn.toString() === '1') { + this.checked = true + } else { + this.checked = false + } + }) } + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) } .margin({ bottom: 10 }) } diff --git a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/core1.ets b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/core1.ets index 0360b1415f42b232d036041e3039932123518cc7..89e0c9cc65d6e8c596fdbdb966866c2ca36253cc 100644 --- a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/core1.ets +++ b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/core1.ets @@ -16,33 +16,69 @@ import { CoreDataModel } from '../../model/homeModel' import { coreData } from '../../data/homeData' +class CoreNum1 implements IDataSource { + totalCount(): number { + return this.num + } + + getData(index: number): any { + return index + } + + registerDataChangeListener(listener: DataChangeListener) { + if (this.listeners.indexOf(listener) < 0) { + this.listeners.push(listener) + } + } + + unregisterDataChangeListener(listener: DataChangeListener) { + const pos = this.listeners.indexOf(listener) + if (pos >= 0) { + this.listeners.splice(pos, 1) + } + } + + num: number = 10 + listeners: DataChangeListener[] = [] +} + @Component export struct Core1 { @Prop ratio: number - @State cols: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] - @State rows: number[] = [0, 1] + coreNum: CoreNum1 = new CoreNum1() @State coreData: Array = coreData build() { Column() { List() { - ForEach(this.cols, item1 => { + LazyForEach(this.coreNum, item1 => { ListItem() { Grid() { - ForEach(this.rows, item2 => { - GridItem() { - Column() { - Image(`${this.coreData[item1 * 2 + item2].uri}`) - .width(40 * this.ratio) - .aspectRatio(1) - .objectFit(ImageFit.Contain) - Text(`${this.coreData[item1 * 2 + item2].title}`) - .fontSize(15 * this.ratio) - .margin({ top: 5 }) - } + GridItem() { + Column() { + Image(`${this.coreData[item1 * 2].uri}`) + .width(40 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + Text(`${this.coreData[item1 * 2 + 1].title}`) + .fontSize(15 * this.ratio) + .margin({ top: 5 }) + } + } + .width('100%') + + GridItem() { + Column() { + Image(`${this.coreData[item1 * 2].uri}`) + .width(40 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + Text(`${this.coreData[item1 * 2 + 1].title}`) + .fontSize(15 * this.ratio) + .margin({ top: 5 }) } - .width('100%') - }, item => item.toString()) + } + .width('100%') } .rowsTemplate('1fr 1fr') .columnsTemplate('1fr') @@ -51,6 +87,7 @@ export struct Core1 { }, item => item.toString()) } .listDirection(Axis.Horizontal) + .width('100%') .height(160 * this.ratio) } } diff --git a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/core2.ets b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/core2.ets index a66e525922f19d6b44f8c521fadbc0a3b8c86aa8..4f67395f882aa86028c6c52f055dcd657b2b4bc7 100644 --- a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/core2.ets +++ b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/core2.ets @@ -13,37 +13,73 @@ * limitations under the License. */ -import router from '@system.router'; +import router from '@ohos.router'; import { CoreDataModel } from '../../model/homeModel' import { coreData } from '../../data/homeData' +class CoreNum2 implements IDataSource { + totalCount(): number { + return this.num + } + + getData(index: number): any { + return index + } + + registerDataChangeListener(listener: DataChangeListener) { + if (this.listeners.indexOf(listener) < 0) { + this.listeners.push(listener) + } + } + + unregisterDataChangeListener(listener: DataChangeListener) { + const pos = this.listeners.indexOf(listener) + if (pos >= 0) { + this.listeners.splice(pos, 1) + } + } + + num: number = 10 + listeners: DataChangeListener[] = [] +} + @Component export struct Core2 { - @State cols: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] - @State rows: number[] = [0, 1] + coreNum: CoreNum2 = new CoreNum2() @State coreData: Array = coreData @Prop ratio: number build() { Column() { List() { - ForEach(this.cols, item1 => { + LazyForEach(this.coreNum, item1 => { ListItem() { Grid() { - ForEach(this.rows, item2 => { - GridItem() { - Column() { - Image(`${this.coreData[item1 * 2 + item2].uri}`) - .width(40 * this.ratio) - .aspectRatio(1) - .objectFit(ImageFit.Contain) - Text(`${this.coreData[item1 * 2 + item2].title}`) - .fontSize(15 * this.ratio) - .margin({ top: 5 }) - } + GridItem() { + Column() { + Image(`${this.coreData[item1 * 2].uri}`) + .width(40 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + Text(`${this.coreData[item1 * 2 + 1].title}`) + .fontSize(15 * this.ratio) + .margin({ top: 5 }) + } + } + .width('100%') + + GridItem() { + Column() { + Image(`${this.coreData[item1 * 2].uri}`) + .width(40 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + Text(`${this.coreData[item1 * 2 + 1].title}`) + .fontSize(15 * this.ratio) + .margin({ top: 5 }) } - .width('100%') - }, item => item.toString()) + } + .width('100%') } .rowsTemplate('1fr 1fr') .columnsTemplate('1fr') @@ -52,7 +88,7 @@ export struct Core2 { }, item => item.toString()) } .listDirection(Axis.Horizontal) - .height('20%') + .height(160 * this.ratio) .width('100%') } } diff --git a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/find.ets b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/find.ets index ba66119b7db29debe85da9f298c89118289e4975..68106638a4bc30ac044b37c1ff6883acdcee4ce6 100644 --- a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/find.ets +++ b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/find.ets @@ -17,10 +17,36 @@ import { SearchTextModel, FindTitleTextModel } from '../../model/homeModel' import { findSearchTextData, findTitleTextData } from '../../data/homeData' import { ImageItem } from './imageItem' +class ImageItems implements IDataSource { + totalCount(): number { + return this.num + } + + getData(index: number): any { + return index + } + + registerDataChangeListener(listener: DataChangeListener) { + if (this.listeners.indexOf(listener) < 0) { + this.listeners.push(listener) + } + } + + unregisterDataChangeListener(listener: DataChangeListener) { + const pos = this.listeners.indexOf(listener) + if (pos >= 0) { + this.listeners.splice(pos, 1) + } + } + + num: number = 10 + listeners: DataChangeListener[] = [] +} @Component export struct FindPage { @Link bgColor: string @Link ratio: number + imageItems: ImageItems = new ImageItems() @State searchText: Array = findSearchTextData @State titleText: Array = findTitleTextData @@ -28,22 +54,25 @@ export struct FindPage { Column() { List() { ListItem() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + Row() { Image('/resources/icon/search.png') .width(25 * this.ratio) .aspectRatio(1) .objectFit(ImageFit.Contain) - .fillColor(Color.Orange) .margin({ left: 10 }) Divider() .vertical(true) .height('8%') Swiper() { - ForEach(this.searchText, item => { - Text(item.searchText) - .fontSize(15 * this.ratio) - .fontColor(Color.Grey) - }, item => item.toString()) + Text(this.searchText[0].searchText) + .fontSize(15 * this.ratio) + .fontColor(Color.Grey) + Text(this.searchText[1].searchText) + .fontSize(15 * this.ratio) + .fontColor(Color.Grey) + Text(this.searchText[2].searchText) + .fontSize(15 * this.ratio) + .fontColor(Color.Grey) } .width('65%') .autoPlay(false) @@ -64,22 +93,35 @@ export struct FindPage { .backgroundColor(Color.Orange) .padding(0) } - .height('5%') + .height('6%') .clip(true) .border({ width: 2, color: Color.Orange, radius: 20 }) .width('100%') .backgroundColor(Color.White) + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) } .padding({ left: 10, right: 10 }) .margin({ bottom: 10 }) ListItem() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - ForEach(this.titleText, item => { - Text(item.titleText) - .fontSize(15 * this.ratio) - }, item => item.toString()) + Row() { + Text(this.titleText[0].titleText) + .fontSize(15 * this.ratio) + Text(this.titleText[1].titleText) + .fontSize(15 * this.ratio) + Text(this.titleText[2].titleText) + .fontSize(15 * this.ratio) + Text(this.titleText[3].titleText) + .fontSize(15 * this.ratio) + Text(this.titleText[4].titleText) + .fontSize(15 * this.ratio) + Text(this.titleText[5].titleText) + .fontSize(15 * this.ratio) } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) .padding({ left: 15, right: 15 }) } .sticky(Sticky.Normal) @@ -89,7 +131,7 @@ export struct FindPage { ListItem() { Column() { - ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], item => { + LazyForEach(this.imageItems, item => { Row() { Column() { ImageItem({ ratio: this.ratio }) @@ -112,6 +154,8 @@ export struct FindPage { .backgroundColor(Color.White) .offset({ x: 0, y: -10 }) } + .width('100%') + .height('100%') .backgroundColor('#dfe5e3') .onScrollIndex((e) => { if (e != 0) { diff --git a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/imageItem.ets b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/imageItem.ets index e18249479573e8afb1c4296899db59f8c98d1e2d..4e3f1cc07677a21168d7c935a02a3bd1babb0ee0 100644 --- a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/imageItem.ets +++ b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/imageItem.ets @@ -13,7 +13,7 @@ * limitations under the License. */ -import router from '@system.router'; +import router from '@ohos.router'; import { FindImgSrcModel, FindImgIntroModel, FindImgNameModel, FindIconSrcModel } from '../../model/homeModel' import { findImgSrcData, findImgIntroData, findImgNameData, findIconSrcData } from '../../data/homeData' @@ -41,7 +41,7 @@ export struct ImageItem { .textOverflow({ overflow: TextOverflow.Ellipsis }) .height('15%') Row() { - Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { + Row() { Image(this.iconSrc[this.itemNum].iconSrc) .width(20 * this.ratio) .aspectRatio(1) @@ -54,6 +54,8 @@ export struct ImageItem { .textOverflow({ overflow: TextOverflow.Ellipsis }) .width('70%') } + .justifyContent(FlexAlign.Start) + .alignItems(VerticalAlign.Center) .width('66%') .height('100%') diff --git a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/informance.ets b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/informance.ets index dc91b67231f30196beef800c99d720f3accd79cf..597dc62e114631b667ad8c34cd56202b87f3b4ec 100644 --- a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/informance.ets +++ b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/informance.ets @@ -16,15 +16,41 @@ import { InformationModel } from '../../model/homeModel' import { informationData } from '../../data/homeData' +class informationNum implements IDataSource { + totalCount(): number { + return this.num + } + + getData(index: number): any { + return index + } + + registerDataChangeListener(listener: DataChangeListener) { + if (this.listeners.indexOf(listener) < 0) { + this.listeners.push(listener) + } + } + + unregisterDataChangeListener(listener: DataChangeListener) { + const pos = this.listeners.indexOf(listener) + if (pos >= 0) { + this.listeners.splice(pos, 1) + } + } + + num: number = 16 + listeners: DataChangeListener[] = [] +} @Component export struct Information { @State information: Array = informationData + informationNum: informationNum = new informationNum() @Prop ratio: number build() { Column() { Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + Row() { Text('消息') .fontSize(20 * this.ratio) .fontWeight(FontWeight.Bolder) @@ -40,15 +66,18 @@ export struct Information { .margin({ left: 20 }) } } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) .padding({ left: 10, right: 10 }) .margin({ top: 10, bottom: 10 }) } .backgroundColor('#dfe5e3') - Flex({ justifyContent: FlexAlign.Center }) { + Row() { Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + Row() { + Row() { Text('@') .fontSize(15 * this.ratio) .fontColor('#40000000') @@ -65,6 +94,8 @@ export struct Information { .aspectRatio(1) .objectFit(ImageFit.Contain) } + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) .width('40%') Image('/resources/icon/more.png') @@ -72,14 +103,17 @@ export struct Information { .aspectRatio(1) .objectFit(ImageFit.Contain) } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) .margin({ bottom: 10 }) Grid() { - ForEach(this.information, item => { + LazyForEach(this.informationNum, item => { GridItem() { - Flex({ alignItems: ItemAlign.Center }) { + Row() { Column() { - Image(item.uri) + Image(this.information[item].uri) .width(55 * this.ratio) .aspectRatio(1) .objectFit(ImageFit.Contain) @@ -87,15 +121,17 @@ export struct Information { } Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Text(item.title) + Row() { + Text(this.information[item].title) .fontSize(14 * this.ratio) Text(item.time) .fontSize(13 * this.ratio) .fontColor(Color.Gray) } + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) - Text(item.notice) + Text(this.information[item].notice) .fontSize(13 * this.ratio) .fontColor(Color.Grey) .margin({ top: 5, bottom: 10 }) @@ -107,6 +143,7 @@ export struct Information { .padding({ left: 10, top: 10, bottom: 10 }) .alignItems(HorizontalAlign.Start) } + .alignItems(VerticalAlign.Center) } }, item => item.toString()) } @@ -115,6 +152,7 @@ export struct Information { .padding(10) .backgroundColor(Color.White) } + .justifyContent(FlexAlign.SpaceBetween) .width('100%') } .width('100%') diff --git a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/main.ets b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/main.ets index d3f686b0267fc4f9e4022905b79a7583724bd809..b5eba49dc2aca917bfbc219ee627e61098adf403 100644 --- a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/main.ets +++ b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/main.ets @@ -13,28 +13,83 @@ * limitations under the License. */ -import router from '@system.router'; +import router from '@ohos.router'; import { NavDataModel, SearchTextModel, SwiperModel, TitleBarModel } from '../../model/homeModel' import { navData, findSearchTextData, swiperData, titleBarData } from '../../data/homeData' import { Core1 } from './core1' import { Boutique } from './boutique' import { GoodsList } from './goodsList' +class navNum implements IDataSource { + totalCount(): number { + return this.num + } + + getData(index: number): any { + return index + } + + registerDataChangeListener(listener: DataChangeListener) { + if (this.listeners.indexOf(listener) < 0) { + this.listeners.push(listener) + } + } + + unregisterDataChangeListener(listener: DataChangeListener) { + const pos = this.listeners.indexOf(listener) + if (pos >= 0) { + this.listeners.splice(pos, 1) + } + } + + num: number = 19 + listeners: DataChangeListener[] = [] +} + +class mainTabsTitle implements IDataSource { + totalCount(): number { + return this.num + } + + getData(index: number): any { + return index + } + + registerDataChangeListener(listener: DataChangeListener) { + if (this.listeners.indexOf(listener) < 0) { + this.listeners.push(listener) + } + } + + unregisterDataChangeListener(listener: DataChangeListener) { + const pos = this.listeners.indexOf(listener) + if (pos >= 0) { + this.listeners.splice(pos, 1) + } + } + + num: number = 4 + listeners: DataChangeListener[] = [] +} + @Component export struct MainPage { @State navData: Array = navData @State searchData: Array = findSearchTextData @State tabsIndex: number = 0 @State swiperData: Array = swiperData + navNum: navNum = new navNum() + mainTabsTitle: mainTabsTitle = new mainTabsTitle() controller: TabsController = new TabsController() @State titleBarData: Array = titleBarData @State ListIndex: number = 0 @Prop num: number @Prop ratio: number + @Prop swiperWidth: number build() { Column() { - Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { + Row() { Column() { Image('/resources/icon/scan.png') .width(30 * this.ratio) @@ -43,32 +98,71 @@ export struct MainPage { } .padding({ top: 5, bottom: 5 }) - Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { + Row() { Image('/resources/icon/search.png') .width(25 * (this.ratio + 0.2)) .aspectRatio(1) .objectFit(ImageFit.Contain) Swiper() { - ForEach(this.searchData, item => { - Column() { - Text(item.searchText) - .fontSize(14 * (this.ratio + 0.2)) - .lineHeight(23 * (this.ratio + 0.2)) - } - .height(25 * (this.ratio + 0.2)) - .width('100%') - .alignItems(HorizontalAlign.Start) - .onClick(() => { - router.push({ - uri: 'pages/search/searchPage', - params: { - message: item.searchText, - num: this.num, - ratio: this.ratio - } - }) + Column() { + Text(this.searchData[0].searchText) + .fontSize(14 * (this.ratio + 0.2)) + .lineHeight(23 * (this.ratio + 0.2)) + } + .height(25 * (this.ratio + 0.2)) + .width('100%') + .alignItems(HorizontalAlign.Start) + .onClick(() => { + router.push({ + url: 'pages/search/searchPage', + params: { + message: this.searchData[0].searchText, + num: this.num, + ratio: this.ratio, + swiperWidth: this.swiperWidth + } }) - }, item => item.toString()) + }) + + Column() { + Text(this.searchData[1].searchText) + .fontSize(14 * (this.ratio + 0.2)) + .lineHeight(23 * (this.ratio + 0.2)) + } + .height(25 * (this.ratio + 0.2)) + .width('100%') + .alignItems(HorizontalAlign.Start) + .onClick(() => { + router.push({ + url: 'pages/search/searchPage', + params: { + message: this.searchData[1].searchText, + num: this.num, + ratio: this.ratio, + swiperWidth: this.swiperWidth + } + }) + }) + + Column() { + Text(this.searchData[2].searchText) + .fontSize(14 * (this.ratio + 0.2)) + .lineHeight(23 * (this.ratio + 0.2)) + } + .height(25 * (this.ratio + 0.2)) + .width('100%') + .alignItems(HorizontalAlign.Start) + .onClick(() => { + router.push({ + url: 'pages/search/searchPage', + params: { + message: this.searchData[2].searchText, + num: this.num, + ratio: this.ratio, + swiperWidth: this.swiperWidth + } + }) + }) } .width('65%') .autoPlay(true) @@ -85,6 +179,8 @@ export struct MainPage { .border({ width: 2, color: Color.Orange, radius: 20 }) .width('70%') .padding(5) + .justifyContent(FlexAlign.SpaceAround) + .alignItems(VerticalAlign.Center) Column() { Image('/resources/icon/barcode.png') @@ -94,17 +190,20 @@ export struct MainPage { } .padding({ top: 5, bottom: 5 }) } + .width('100%') .padding(5) + .justifyContent(FlexAlign.SpaceAround) + .alignItems(VerticalAlign.Center) Scroll() { Column() { Row() { List() { - ForEach(this.navData, item => { + LazyForEach(this.navNum, item => { ListItem() { - Text(item.navData) - .fontColor(`${item.navData == '首页' ? Color.Blue : Color.Black}`) - .fontWeight(`${item.navData == '首页' ? FontWeight.Bold : FontWeight.Normal}`) + Text(this.navData[item].navData) + .fontColor(this.navData[item].navData == '首页' ? Color.Blue : Color.Black) + .fontWeight(this.navData[item].navData == '首页' ? FontWeight.Bold : FontWeight.Normal) .fontSize(19 * this.ratio) .margin({ left: 5, right: 8 }) .lineHeight(30 * this.ratio) @@ -116,7 +215,7 @@ export struct MainPage { .width('85%') .listDirection(Axis.Horizontal) - Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { + Row() { Image('/resources/icon/nav_classification.png') .width(20 * this.ratio) .aspectRatio(1) @@ -124,30 +223,43 @@ export struct MainPage { Text('分类') .fontSize(15 * this.ratio) } + .justifyContent(FlexAlign.SpaceAround) + .alignItems(VerticalAlign.Center) .height(30 * this.ratio) .width('15%') } .margin({ bottom: 0, left: 5, right: 5 }) Swiper() { - ForEach(this.swiperData, item => { - Navigator({ target: 'pages/detailPage/detail' }) { - Image(item.img) - .width('100%') - .height('100%') - .objectFit(ImageFit.Contain) - .border({ radius: 10 * this.ratio }) - } - .params({ - num: this.num, - ratio: this.ratio - }) - }, item => item.toString()) + Image(this.swiperData[0].img) + .width('100%') + .height('100%') + .objectFit(ImageFit.Contain) + .border({ radius: 10 * this.ratio }) + Image(this.swiperData[1].img) + .width('100%') + .height('100%') + .objectFit(ImageFit.Contain) + .border({ radius: 10 * this.ratio }) + Image(this.swiperData[2].img) + .width('100%') + .height('100%') + .objectFit(ImageFit.Contain) + .border({ radius: 10 * this.ratio }) } .autoPlay(true) .loop(true) .width('93%') .aspectRatio(2.6) + .onClick(() => { + router.push({ + url: 'pages/detailPage/detail', + params: { + num: this.num, + ratio: this.ratio + } + }) + }) Column() { Core1({ ratio: this.ratio }) @@ -158,22 +270,24 @@ export struct MainPage { } .margin({ top: 10 }) - Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { - ForEach(this.titleBarData, item => { + Row() { + LazyForEach(this.mainTabsTitle, item => { Column() { - Text(item.title) + Text(this.titleBarData[item].title) .fontSize(15 * this.ratio) .margin(3) - .fontColor(this.tabsIndex == item.id ? Color.Orange : Color.Black) + .fontColor(this.tabsIndex == item ? Color.Orange : Color.Black) } .width('20%') .padding({ top: 5, bottom: 5 }) .onClick(() => { - this.tabsIndex = item.id - this.controller.changeIndex(item.id) + this.tabsIndex = item + this.controller.changeIndex(item) }) }, item => item.toString()) } + .justifyContent(FlexAlign.SpaceAround) + .alignItems(VerticalAlign.Center) .height('7%') .zIndex(2) .backgroundColor(Color.White) diff --git a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/other.ets b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/other.ets index 4920849caca91c675a0d3ff8ef700c73fd4661b0..2e711071425534e34119328d3a9115190fcc0864 100644 --- a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/other.ets +++ b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/other.ets @@ -34,7 +34,7 @@ export struct Other { .maxLines(2) .padding({ left: 10, right: 10 }) .textOverflow({ overflow: TextOverflow.Ellipsis }) - Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Row() { Row() { Text() { Span('￥') @@ -56,6 +56,9 @@ export struct Other { .aspectRatio(1) .margin({ left: 5 }) } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) .margin({ top: 5, bottom: 10 }) } .width('50%') diff --git a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/shopCart.ets b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/shopCart.ets index d33e06781a5216d86df2efbb9be409dd8b5c52d8..85dc6c15e1877230ec2cbb5cf5fcdbabb31abb53 100644 --- a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/shopCart.ets +++ b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/shopCart.ets @@ -16,24 +16,49 @@ import { Cart } from './cart' import { Other } from './other' +class cartNum implements IDataSource { + totalCount(): number { + return this.num + } + + getData(index: number): any { + return index + } + + registerDataChangeListener(listener: DataChangeListener) { + if (this.listeners.indexOf(listener) < 0) { + this.listeners.push(listener) + } + } + + unregisterDataChangeListener(listener: DataChangeListener) { + const pos = this.listeners.indexOf(listener) + if (pos >= 0) { + this.listeners.splice(pos, 1) + } + } + + num: number = 10 + listeners: DataChangeListener[] = [] +} + @Component export struct ShopCart { - @State cartNum: number[] = [...Array(10).keys()] + cartNum: cartNum = new cartNum() @State isSelected1: boolean = false @State isSelected2: boolean = false - @State isOn: boolean = false @Prop ratio: number build() { Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + Row() { Row() { Text('购物车') .fontSize(15 * this.ratio) .fontWeight(FontWeight.Bold) } - Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { + Row() { Text('降价') .fontSize(14 * this.ratio) Text('经常购') @@ -41,15 +66,20 @@ export struct ShopCart { Text('管理') .fontSize(14 * this.ratio) } + .justifyContent(FlexAlign.SpaceAround) + .alignItems(VerticalAlign.Center) .width('45%') } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) .backgroundColor('#dfe5e3') .padding({ top: 8, bottom: 8 }) Scroll() { Column() { Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + Row() { Row() { Image('/resources/icon/smile.png') .width(30 * this.ratio) @@ -59,6 +89,9 @@ export struct ShopCart { .margin({ left: 10 }) } } + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) .padding({ top: 5, bottom: 5 }) Cart({ ratio: this.ratio }) @@ -69,7 +102,7 @@ export struct ShopCart { .backgroundColor(Color.White) .border({ radius: 10 * this.ratio }) - Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + Row() { Text('- - - -') .fontSize(15 * this.ratio) .fontColor('#80FF0000') @@ -93,11 +126,13 @@ export struct ShopCart { .fontColor('#80FF0000') .margin({ right: 10 }) } + .justifyContent(FlexAlign.Center) + .alignItems(VerticalAlign.Center) .margin({ top: 10, bottom: 10 }) Row() { Column() { - ForEach(this.cartNum, item => { + LazyForEach(this.cartNum, item => { Column() { Other({ item: item % 6, ratio: this.ratio }) } @@ -106,7 +141,7 @@ export struct ShopCart { .margin(2) Column() { - ForEach(this.cartNum, item => { + LazyForEach(this.cartNum, item => { Column() { Other({ item: item % 6, ratio: this.ratio }) } diff --git a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/visitPage.ets b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/visitPage.ets index f8ea6f6cf1096cb758eef991eefc98c5692ac0d0..330deb960b5d2276547b37323f4763f3b1bddf83 100644 --- a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/visitPage.ets +++ b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/homePage/visitPage.ets @@ -24,7 +24,7 @@ export struct VisitPage { build() { Column() { - Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { + Row() { Image('/resources/icon/camera.png') .width(30 * this.ratio) .aspectRatio(1) @@ -39,12 +39,14 @@ export struct VisitPage { .objectFit(ImageFit.Contain) .border({ radius: 15 * this.ratio }) } + .width('100%') .padding({ top: 10 }) .backgroundColor(this.bgColor) + .justifyContent(FlexAlign.SpaceAround) + .alignItems(VerticalAlign.Center) Tabs({ controller: this.controller, index: 1 }) { TabContent() { - } TabContent() { diff --git a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/index.ets b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/index.ets index 3992feb84baefbfaeb5f2a4e27d5a5128255030d..bb4da958f896298cb1c530c2121c5e624c94ea99 100644 --- a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/index.ets +++ b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/index.ets @@ -24,6 +24,33 @@ import { ShopCart } from './homePage/shopCart' import { User } from './homePage/User' let portraitIndex = null +let timer = null + +class tabTitle implements IDataSource { + totalCount(): number { + return this.num + } + + getData(index: number): any { + return index + } + + registerDataChangeListener(listener: DataChangeListener) { + if (this.listeners.indexOf(listener) < 0) { + this.listeners.push(listener) + } + } + + unregisterDataChangeListener(listener: DataChangeListener) { + const pos = this.listeners.indexOf(listener) + if (pos >= 0) { + this.listeners.splice(pos, 1) + } + } + + num: number = 5 + listeners: DataChangeListener[] = [] +} @Entry @Component @@ -32,17 +59,19 @@ struct Index { @State tabsIndex: number = 0 @State tabTittleData: Array = tabTitleData @State idx: number = 0 + tabTitle: tabTitle = new tabTitle() controller: TabsController = new TabsController() @State opacity: number = 1 @State width: number = 100 @State ratio: number = 1 + @State swiperWidth: number = 60 listener = mediaQuery.matchMediaSync('(orientation:landscape)') aboutToAppear() { display.getAllDisplay((err, data) => { let aspect = data[0].width / data[0].height if (aspect == 0.5625) { - this.ratio = 1.4 + this.ratio = 1 } }) portraitIndex = this.onPortrait.bind(this) @@ -53,8 +82,10 @@ struct Index { let result = mediaQueryResult.matches if (result) { this.width = 45 + this.swiperWidth = 30 } else { this.width = 100 + this.swiperWidth = 60 } } @@ -63,7 +94,7 @@ struct Index { Column() { Tabs({ barPosition: BarPosition.Start, controller: this.controller, index: this.tabsIndex }) { TabContent() { - MainPage({ num: this.width, ratio: this.ratio }) + MainPage({ num: this.width, ratio: this.ratio, swiperWidth: this.swiperWidth }) }.tabBar({ text: this.tabTittleData[0].title }) TabContent() { @@ -89,48 +120,48 @@ struct Index { .height('92%') Column() { - Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { - ForEach(this.tabTittleData, item => { - Flex({ - direction: FlexDirection.Column, - justifyContent: FlexAlign.Center, - alignItems: ItemAlign.Center - }) { - Image(this.tabsIndex == item.id ? item.selectedUri : item.uri) + Row() { + LazyForEach(this.tabTitle, item => { + Column() { + Image(this.tabsIndex == item ? this.tabTittleData[item].selectedUri : this.tabTittleData[item].uri) .width(25 * this.ratio) .aspectRatio(1) .objectFit(ImageFit.Contain) - Text(item.title) + Text(this.tabTittleData[item].title) .fontSize(15 * this.ratio) .margin(1) - .fontColor(this.tabsIndex == item.id ? Color.Orange : Color.Black) + .fontColor(this.tabsIndex == item ? Color.Orange : Color.Black) } .width('20%') + .alignItems(HorizontalAlign.Center) + .justifyContent(FlexAlign.Center) .onClick(() => { - this.tabsIndex = item.id - this.controller.changeIndex(item.id) + clearTimeout(timer) + timer = setTimeout(() => { + this.tabsIndex = item + this.controller.changeIndex(item) + }, 200) }) }, item => item.toString()) } .height('8%') + .justifyContent(FlexAlign.SpaceAround) + .alignItems(VerticalAlign.Center) } .width('100%') } .width(`${this.width}%`) .backgroundColor(Color.White) + .border({ width: this.width === 45 ? 1 : 0 }) } .width('100%') - .backgroundColor('#10000000') + .backgroundColor('#FFFFFF') } PageTransition() { - PageTransitionEnter({ duration: 0, curve: Curve.Linear, delay: 0 }) - .onEnter((type: RouteType, progress: number) => { - this.opacity = 1 - }) - PageTransitionExit({ duration: 0, curve: Curve.Linear, delay: 0 }) - .onExit((type: RouteType, progress: number) => { - this.opacity = 1 - }) + PageTransitionEnter({ duration: 0 }) + .opacity(1) + PageTransitionExit({ duration: 0 }) + .opacity(1) } } \ No newline at end of file diff --git a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/search/searchPage.ets b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/search/searchPage.ets index 782d94a6feff6a84ad6bce7f0158d8442257d295..d63c3ed2d482ed04b87fea69af625be795684599 100644 --- a/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/search/searchPage.ets +++ b/AppSample/Shopping/entry/src/main/ets/MainAbility/pages/search/searchPage.ets @@ -14,18 +14,73 @@ */ import mediaQuery from '@ohos.mediaquery'; -import router from '@system.router'; +import router from '@ohos.router'; import { ExampleDataModel, SearchDataModel } from '../../model/searchModel'; import { exampleData, searchData } from '../../data/searchData' let portraitSearch = null +class newsNum implements IDataSource { + totalCount(): number { + return this.num + } + + getData(index: number): any { + return index + } + + registerDataChangeListener(listener: DataChangeListener) { + if (this.listeners.indexOf(listener) < 0) { + this.listeners.push(listener) + } + } + + unregisterDataChangeListener(listener: DataChangeListener) { + const pos = this.listeners.indexOf(listener) + if (pos >= 0) { + this.listeners.splice(pos, 1) + } + } + + num: number = 6 + listeners: DataChangeListener[] = [] +} + +class newsItem implements IDataSource { + totalCount(): number { + return this.num + } + + getData(index: number): any { + return index + } + + registerDataChangeListener(listener: DataChangeListener) { + if (this.listeners.indexOf(listener) < 0) { + this.listeners.push(listener) + } + } + + unregisterDataChangeListener(listener: DataChangeListener) { + const pos = this.listeners.indexOf(listener) + if (pos >= 0) { + this.listeners.splice(pos, 1) + } + } + + num: number = 10 + listeners: DataChangeListener[] = [] +} + @Entry @Component struct SearchPage { - @State placeholder: string = (router.getParams().message).toString() - @State width: number = parseInt(router.getParams().num as string, 10) - @State ratio: number = parseInt(router.getParams().ratio as string, 10) + @State placeholder: string = router.getParams()['message'] + @State width: number = router.getParams()['num'] + @State ratio: number = router.getParams()['ratio'] + @State swiperWidth: number = router.getParams()['swiperWidth'] + newsNum: newsNum = new newsNum() + newsItem: newsItem = new newsItem() @State value: string = '' @State flag: boolean = true @State isShow: boolean = true @@ -35,7 +90,6 @@ struct SearchPage { @State searchData: Array = searchData @State searched: string[] = [] @State isFlag: boolean = false - @State swiperWidth: number = 30 @State opacity: number = 1 listener = mediaQuery.matchMediaSync('(orientation:landscape)'); @@ -58,7 +112,7 @@ struct SearchPage { build() { Column() { Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + Row() { Navigator() { Image('/resources/icon/back.png') .width(25 * this.ratio) @@ -70,7 +124,7 @@ struct SearchPage { this.active = true }) - Flex({ justifyContent: FlexAlign.SpaceBetween }) { + Row() { Column() { TextInput({ placeholder: this.placeholder, text: this.value }) .placeholderFont({ size: 10 * this.ratio }) @@ -86,6 +140,7 @@ struct SearchPage { .aspectRatio(1) .objectFit(ImageFit.Contain) } + .justifyContent(FlexAlign.SpaceBetween) .width('65%') .padding({ left: 10, right: 10 }) .border({ width: 1, color: Color.Orange, radius: 20 * this.ratio }) @@ -102,14 +157,17 @@ struct SearchPage { .border({ radius: 50 * this.ratio }) .padding({ left: 5, right: 5, top: 10, bottom: 10 }) } + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) .padding({ left: 10, right: 10 }) .margin({ top: 10, bottom: 10 }) .height(35 * this.ratio) + .width('100%') Stack({ alignContent: Alignment.Top }) { if (!this.isFlag) { Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { + Row() { Text('搜索发现') .fontSize(15 * this.ratio) .fontWeight(FontWeight.Bold) @@ -121,23 +179,101 @@ struct SearchPage { this.flag = !this.flag }) } - .margin(10) + .width('100%') + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + .padding(10) if (this.flag) { - Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) { - ForEach(this.exampleText, item => { - Button() { - Text(item.exampleText) - .fontSize(12 * this.ratio) - .fontColor(Color.Black) - .margin({ left: 10, right: 10 }) - } - .margin(3) - .height(30 * this.ratio) - .backgroundColor('#f8f8f8') - }, item => item.toString()) + Row() { + Button() { + Text(this.exampleText[0].exampleText) + .fontSize(12 * this.ratio) + .fontColor(Color.Black) + .margin({ left: 10, right: 10 }) + } + .margin(3) + .height(30 * this.ratio) + .backgroundColor('#f8f8f8') + + Button() { + Text(this.exampleText[1].exampleText) + .fontSize(12 * this.ratio) + .fontColor(Color.Black) + .margin({ left: 10, right: 10 }) + } + .margin(3) + .height(30 * this.ratio) + .backgroundColor('#f8f8f8') + + Button() { + Text(this.exampleText[2].exampleText) + .fontSize(12 * this.ratio) + .fontColor(Color.Black) + .margin({ left: 10, right: 10 }) + } + .margin(3) + .height(30 * this.ratio) + .backgroundColor('#f8f8f8') + + Button() { + Text(this.exampleText[3].exampleText) + .fontSize(12 * this.ratio) + .fontColor(Color.Black) + .margin({ left: 10, right: 10 }) + } + .margin(3) + .height(30 * this.ratio) + .backgroundColor('#f8f8f8') + + Button() { + Text(this.exampleText[4].exampleText) + .fontSize(12 * this.ratio) + .fontColor(Color.Black) + .margin({ left: 10, right: 10 }) + } + .margin(3) + .height(30 * this.ratio) + .backgroundColor('#f8f8f8') } .margin({ left: 10, right: 10 }) + .justifyContent(FlexAlign.Start) + .alignItems(VerticalAlign.Center) + + Row() { + Button() { + Text(this.exampleText[5].exampleText) + .fontSize(12 * this.ratio) + .fontColor(Color.Black) + .margin({ left: 10, right: 10 }) + } + .margin(3) + .height(30 * this.ratio) + .backgroundColor('#f8f8f8') + + Button() { + Text(this.exampleText[6].exampleText) + .fontSize(12 * this.ratio) + .fontColor(Color.Black) + .margin({ left: 10, right: 10 }) + } + .margin(3) + .height(30 * this.ratio) + .backgroundColor('#f8f8f8') + + Button() { + Text(this.exampleText[7].exampleText) + .fontSize(12 * this.ratio) + .fontColor(Color.Black) + .margin({ left: 10, right: 10 }) + } + .margin(3) + .height(30 * this.ratio) + .backgroundColor('#f8f8f8') + } + .margin({ left: 10, right: 10 }) + .justifyContent(FlexAlign.Start) + .alignItems(VerticalAlign.Center) } else { Column() { Text('当前搜索发现隐藏') @@ -174,112 +310,100 @@ struct SearchPage { .margin({ bottom: 10 }) .alignItems(HorizontalAlign.Start) - List() { - ForEach([1, 2, 3, 4, 5, 6], item => { - ListItem() { - Column() { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { - Image('/resources/common/activity.png') - .width(30 * this.ratio) - .aspectRatio(1) - .objectFit(ImageFit.Contain) - Text('XX热搜') - .fontSize(15 * this.ratio) - .fontColor('#995528') - .fontWeight(FontWeight.Bold) - .margin({ left: 10, right: 10 }) - Text('今日最新消息全知道') - .fontSize(10 * this.ratio) - .fontColor('#8b5b2f') - } - .width('100%') - } - .padding({ left: 5, right: 5 }) - - ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, 10], item => { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Flex({ alignItems: ItemAlign.Center }) { - Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { - Text(`${item}`) - .fontSize(10 * this.ratio) - .fontColor(Color.White) + Column() { + if (this.isShow) { + List() { + LazyForEach(this.newsNum, item => { + ListItem() { + Column() { + Row() { + Row() { + Image('/resources/common/activity.png') + .width(30 * this.ratio) + .aspectRatio(1) + .objectFit(ImageFit.Contain) + Text('XX热搜') + .fontSize(15 * this.ratio) + .fontColor('#995528') .fontWeight(FontWeight.Bold) + .margin({ left: 10, right: 10 }) + Text('今日最新消息全知道') + .fontSize(10 * this.ratio) + .fontColor('#8b5b2f') } - .width(15 * this.ratio) - .aspectRatio(1) - .border({ radius: 3 * this.ratio }) - .margin({ right: 5 }) - .backgroundColor('#ceb198') - - Text('XX公司5G手机发布会议于xx日开始') - .fontSize(12 * this.ratio) + .width('100%') + .justifyContent(FlexAlign.Start) + .alignItems(VerticalAlign.Center) } + .padding({ left: 5, right: 5 }) + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + + LazyForEach(this.newsItem, item => { + Row() { + Row() { + Row() { + Text(`${item}`) + .fontSize(10 * this.ratio) + .fontColor(Color.White) + .fontWeight(FontWeight.Bold) + } + .width(15 * this.ratio) + .aspectRatio(1) + .border({ radius: 3 * this.ratio }) + .margin({ right: 5 }) + .backgroundColor('#ceb198') + .justifyContent(FlexAlign.Center) + .alignItems(VerticalAlign.Center) - Image(`${Math.round(Math.random()) ? '/resources/icon/up.png' : '/resources/icon/down.png'}`) - .width(10 * this.ratio) - .height(15 * this.ratio) - .objectFit(ImageFit.Contain) + Text('XX公司5G手机发布会议于xx日开始') + .fontSize(12 * this.ratio) + .maxLines(1) + .textOverflow({ overflow: TextOverflow.Ellipsis }) + } + .alignItems(VerticalAlign.Center) + + Image(`${Math.round(Math.random()) ? '/resources/icon/up.png' : '/resources/icon/down.png'}`) + .width(10 * this.ratio) + .height(15 * this.ratio) + .objectFit(ImageFit.Contain) + } + .padding({ left: 5, right: 5 }) + .width('100%') + .height(40 * this.ratio) + .justifyContent(FlexAlign.SpaceBetween) + .alignItems(VerticalAlign.Center) + }, item => item.toString()) } - .padding({ left: 5, right: 5 }) .width('100%') - .height(40 * this.ratio) - }, item => item.toString()) - } - .width('100%') + } + .border({ radius: 15 * this.ratio }) + .margin({ left: 5, right: 5 }) + .padding({ top: 5 }) + .backgroundColor(Color.White) + .width(`${this.swiperWidth}%`) + }, item => item.toString()) } - .border({ radius: 15 * this.ratio }) - .margin({ left: 5, right: 5 }) - .padding({ top: 5 }) - .backgroundColor(Color.White) - .width(`${this.swiperWidth}%`) - }, item => item.toString()) + .width('100%') + .height('100%') + .listDirection(Axis.Horizontal) + .padding({ left: 5, right: 5 }) + } } - .listDirection(Axis.Horizontal) .height('70%') - .width('95%') - .margin({ left: 5, right: 5 }) - .visibility(this.isShow ? Visibility.Visible : Visibility.Hidden) + .width('100%') } .padding({ top: 10, bottom: 0 }) - .alignItems(HorizontalAlign.Start) + .alignItems(HorizontalAlign.Center) .width('100%') } .alignItems(HorizontalAlign.Start) .width('100%') } - if (this.isFlag) { - Column() { - ForEach(this.searched, item => { - Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) { - Row() { - Image('/resources/icon/search.png') - .width(25 * this.ratio) - .aspectRatio(1) - .objectFit(ImageFit.Contain) - Text(item) - .fontSize(18 * this.ratio) - .margin({ left: 15 }) - } - - Image('/resources/icon/leftTop.png') - .width(25 * this.ratio) - .aspectRatio(1) - .objectFit(ImageFit.Contain) - } - .width('100%') - .height(50 * this.ratio) - .padding({ left: 10, right: 10 }) - .onClick(() => { - this.isFlag = false - this.value = item - }) - }, item => item.toString()) - } - } } } .width(`${this.width}%`) + .border({ width: this.width === 45 ? 1 : 0, color: '#10000000' }) } .width('100%') .backgroundColor('#F9F9F9') @@ -287,14 +411,10 @@ struct SearchPage { .backgroundImageSize({ width: '100%', height: '100%' }) } - pageTransition() { - PageTransitionExit({ duration: 0, curve: Curve.Linear }) - .onExit((type: RouteType, progress: number) => { - this.opacity = 1 - }) - PageTransitionEnter({ duration: 0, curve: Curve.Linear }) - .onEnter((type: RouteType, progress: number) => { - this.opacity = 1 - }) + PageTransition() { + PageTransitionEnter({ duration: 0 }) + .opacity(1) + PageTransitionExit({ duration: 0 }) + .opacity(1) } } \ No newline at end of file diff --git "a/AppSample/Shopping/entry/src/main/ets/MainAbility/resources/detailImg/deliver/deliver_type4 - \345\211\257\346\234\254.png" b/AppSample/Shopping/entry/src/main/ets/MainAbility/resources/detailImg/deliver/deliver_type4.png similarity index 100% rename from "AppSample/Shopping/entry/src/main/ets/MainAbility/resources/detailImg/deliver/deliver_type4 - \345\211\257\346\234\254.png" rename to AppSample/Shopping/entry/src/main/ets/MainAbility/resources/detailImg/deliver/deliver_type4.png