|
|
@@ -4,6 +4,9 @@ import { SchoolBag } from '../../components/SchoolBag';
|
|
|
import { CustomTextStyle } from '../../style/CustomTextStyle';
|
|
|
import { BookItemDetailViewModel } from '../viewModel/BookItemDetailViewModel';
|
|
|
|
|
|
+/**
|
|
|
+ * 书籍详情页面
|
|
|
+ */
|
|
|
@ComponentV2
|
|
|
@RouterPage
|
|
|
struct BookItemDetailPage {
|
|
|
@@ -11,186 +14,175 @@ struct BookItemDetailPage {
|
|
|
|
|
|
build() {
|
|
|
NavDestination() {
|
|
|
- Column() {
|
|
|
- Column(){
|
|
|
- List(){
|
|
|
- ListItem().height(this.vm.safeTop)
|
|
|
-
|
|
|
- // 书籍封面
|
|
|
- ListItem(){
|
|
|
- Stack({alignContent: Alignment.TopStart}){
|
|
|
+ Stack({alignContent: Alignment.TopStart}){
|
|
|
+ Column() {
|
|
|
+ Column(){
|
|
|
+ List(){
|
|
|
+ // 书籍封面
|
|
|
+ ListItem(){
|
|
|
Row(){
|
|
|
Image(this.vm.book.coverUrl)
|
|
|
.height(344)
|
|
|
}
|
|
|
- .width("100%").height('100%')
|
|
|
+ .width("100%")
|
|
|
.alignItems(VerticalAlign.Center)
|
|
|
.justifyContent(FlexAlign.Center)
|
|
|
- .padding({left: 20, right: 20, top: 10, bottom: 10})
|
|
|
-
|
|
|
- Image($r('[basic].media.ic_back'))
|
|
|
- .width(24).aspectRatio(1)
|
|
|
- .onClick(() => { yTRouter.routerBack() })
|
|
|
+ // .padding({left: 20, right: 20, top: 10, bottom: 10})
|
|
|
}
|
|
|
- .height(344)
|
|
|
- .width("100%")
|
|
|
- .backgroundColor(Color.White)
|
|
|
- .padding({left: 14, right: 14})
|
|
|
- }
|
|
|
|
|
|
- // 借阅价
|
|
|
- ListItem(){
|
|
|
- Row(){
|
|
|
- Column(){
|
|
|
- Text(){
|
|
|
- Span('借阅价 ')
|
|
|
- Span(this.vm.book.rentPerDay)
|
|
|
- .fontSize(24)
|
|
|
- Span(' 元/天')
|
|
|
- }.attributeModifier(new CustomTextStyle({size: 14, weight: 500}))
|
|
|
+ // 借阅价
|
|
|
+ ListItem(){
|
|
|
+ Row(){
|
|
|
+ Column(){
|
|
|
+ Text(){
|
|
|
+ Span('借阅价 ')
|
|
|
+ Span(this.vm.book.rentPerDay)
|
|
|
+ .fontSize(24)
|
|
|
+ Span(' 元/天')
|
|
|
+ }.attributeModifier(new CustomTextStyle({size: 14, weight: 500}))
|
|
|
|
|
|
- Text(`市场售价:¥${Number(this.vm.book.marketPrice).toFixed(2)}`)
|
|
|
- .borderRadius(9)
|
|
|
- .backgroundColor(Color.White)
|
|
|
- .padding({left: 10, right: 10, top: 2, bottom: 2})
|
|
|
- }
|
|
|
- .width("100%")
|
|
|
- .alignItems(HorizontalAlign.Start)
|
|
|
+ Text(`市场售价:¥${Number(this.vm.book.marketPrice).toFixed(2)}`)
|
|
|
+ .borderRadius(9)
|
|
|
+ .backgroundColor(Color.White)
|
|
|
+ .padding({left: 10, right: 10, top: 2, bottom: 2})
|
|
|
+ }
|
|
|
+ .width("100%")
|
|
|
+ .alignItems(HorizontalAlign.Start)
|
|
|
|
|
|
- Column({space: 3}){
|
|
|
- Image($r('[basic].media.icon_book'))
|
|
|
- .width(28).aspectRatio(1)
|
|
|
+ Column({space: 3}){
|
|
|
+ Image($r('[basic].media.icon_book'))
|
|
|
+ .width(28).aspectRatio(1)
|
|
|
|
|
|
- Text(`${1275}人已读`)
|
|
|
- .attributeModifier(new CustomTextStyle({size: 11, weight: 400, color: '#FFFFFF'}))
|
|
|
+ Text(`${1275}人已读`)
|
|
|
+ .attributeModifier(new CustomTextStyle({size: 11, weight: 400, color: '#FFFFFF'}))
|
|
|
+ }
|
|
|
}
|
|
|
+ .width("100%")
|
|
|
+ .backgroundColor('#FED049')
|
|
|
+ .justifyContent(FlexAlign.SpaceBetween)
|
|
|
+ .padding({left: 21, right: 13, top: 10, bottom: 10})
|
|
|
}
|
|
|
- .width("100%")
|
|
|
- .backgroundColor('#FED049')
|
|
|
- .justifyContent(FlexAlign.SpaceBetween)
|
|
|
- .padding({left: 21, right: 13, top: 10, bottom: 10})
|
|
|
- }
|
|
|
|
|
|
- // 书籍介绍
|
|
|
- ListItem(){
|
|
|
- Column({space: 12}){
|
|
|
- Column({space: 8}){
|
|
|
- Text(this.vm.book.bookTitle)
|
|
|
- .attributeModifier(new CustomTextStyle({size: 18, weight: 600}))
|
|
|
+ // 书籍介绍
|
|
|
+ ListItem(){
|
|
|
+ Column({space: 12}){
|
|
|
+ Column({space: 8}){
|
|
|
+ Text(this.vm.book.bookTitle)
|
|
|
+ .attributeModifier(new CustomTextStyle({size: 18, weight: 600}))
|
|
|
|
|
|
- Row({space: 8}){
|
|
|
- tagItemComp('情绪价值', '#4EB1EF', '#EDF7FD')
|
|
|
- tagItemComp('哄娃神器', '#4EB1EF', '#EDF7FD')
|
|
|
- tagItemComp(`${this.vm.book.minAge}-${this.vm.book.maxAge}岁`, '#FC9911', '#FFF5E7')
|
|
|
- }
|
|
|
+ Row({space: 8}){
|
|
|
+ tagItemComp('情绪价值', '#4EB1EF', '#EDF7FD')
|
|
|
+ tagItemComp('哄娃神器', '#4EB1EF', '#EDF7FD')
|
|
|
+ tagItemComp(`${this.vm.book.minAge}-${this.vm.book.maxAge}岁`, '#FC9911', '#FFF5E7')
|
|
|
+ }
|
|
|
|
|
|
- Column(){
|
|
|
- Text(){
|
|
|
- Span(`语言:${this.vm.book.language}` + '\n')
|
|
|
- Span(`作者:${this.vm.book.author}` + '\n')
|
|
|
- Span(`出版社:${this.vm.book.publisher}` + '\n')
|
|
|
- Span(`出版时间:${this.vm.book.publicationDate?.split(' ')[1]}}`)
|
|
|
+ Column(){
|
|
|
+ Text(){
|
|
|
+ Span(`语言:${this.vm.book.language}` + '\n')
|
|
|
+ Span(`作者:${this.vm.book.author}` + '\n')
|
|
|
+ Span(`出版社:${this.vm.book.publisher}` + '\n')
|
|
|
+ Span(`出版时间:${this.vm.book.publicationDate?.split(' ')[1]}}`)
|
|
|
+ }
|
|
|
+ .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#80000000'}))
|
|
|
}
|
|
|
- .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#80000000'}))
|
|
|
+ .width("100%")
|
|
|
+ .borderRadius(10)
|
|
|
+ .backgroundColor('#FFF6F6F6')
|
|
|
+ .justifyContent(FlexAlign.Start)
|
|
|
+ .alignItems(HorizontalAlign.Start)
|
|
|
+ .padding({left: 10, top: 7, right: 10, bottom: 7})
|
|
|
}
|
|
|
+ .padding(12)
|
|
|
.width("100%")
|
|
|
.borderRadius(10)
|
|
|
- .backgroundColor('#FFF6F6F6')
|
|
|
- .justifyContent(FlexAlign.Start)
|
|
|
+ .backgroundColor(Color.White)
|
|
|
.alignItems(HorizontalAlign.Start)
|
|
|
- .padding({left: 10, top: 7, right: 10, bottom: 7})
|
|
|
- }
|
|
|
- .padding(12)
|
|
|
- .width("100%")
|
|
|
- .borderRadius(10)
|
|
|
- .backgroundColor(Color.White)
|
|
|
- .alignItems(HorizontalAlign.Start)
|
|
|
|
|
|
|
|
|
- // 本书书单
|
|
|
- if(false){
|
|
|
- Column({space: 12}){
|
|
|
- Row(){
|
|
|
- Text('本书书单')
|
|
|
- .attributeModifier(new CustomTextStyle({size: 16, weight: 600}))
|
|
|
+ // 本书书单
|
|
|
+ if(false){
|
|
|
+ Column({space: 12}){
|
|
|
+ Row(){
|
|
|
+ Text('本书书单')
|
|
|
+ .attributeModifier(new CustomTextStyle({size: 16, weight: 600}))
|
|
|
|
|
|
- Row({space: 5}){
|
|
|
- Text('更多')
|
|
|
- .attributeModifier(new CustomTextStyle({size: 12, weight: 600, color: '#FF888888'}))
|
|
|
+ Row({space: 5}){
|
|
|
+ Text('更多')
|
|
|
+ .attributeModifier(new CustomTextStyle({size: 12, weight: 600, color: '#FF888888'}))
|
|
|
|
|
|
- Image($r('[basic].media.ic_public_arrow_left'))
|
|
|
- .rotate({angle: 180})
|
|
|
- .fillColor('#FF888888')
|
|
|
- .width(7)
|
|
|
- .height(11)
|
|
|
- }
|
|
|
- }.width("100%")
|
|
|
- .justifyContent(FlexAlign.SpaceBetween)
|
|
|
+ Image($r('[basic].media.ic_public_arrow_left'))
|
|
|
+ .rotate({angle: 180})
|
|
|
+ .fillColor('#FF888888')
|
|
|
+ .width(7)
|
|
|
+ .height(11)
|
|
|
+ }
|
|
|
+ }.width("100%")
|
|
|
+ .justifyContent(FlexAlign.SpaceBetween)
|
|
|
|
|
|
- List({space: 15}){
|
|
|
- ForEach(new Array(5).fill(5), (item: string, index) => {
|
|
|
- ListItem(){
|
|
|
- Column({space: 12}){
|
|
|
- Image($r('[basic].media.png_TopRecommend'))
|
|
|
- .width(120)
|
|
|
- .aspectRatio(1)
|
|
|
- .borderRadius(16)
|
|
|
- .shadow({color: '#f1f1f1', radius: 5})
|
|
|
+ List({space: 15}){
|
|
|
+ ForEach(new Array(5).fill(5), (item: string, index) => {
|
|
|
+ ListItem(){
|
|
|
+ Column({space: 12}){
|
|
|
+ Image($r('[basic].media.png_TopRecommend'))
|
|
|
+ .width(120)
|
|
|
+ .aspectRatio(1)
|
|
|
+ .borderRadius(16)
|
|
|
+ .shadow({color: '#f1f1f1', radius: 5})
|
|
|
|
|
|
- Text('3月书单推荐')
|
|
|
- .attributeModifier(new CustomTextStyle({size: 14, weight: 600, color: '#FF000000'}))
|
|
|
+ Text('3月书单推荐')
|
|
|
+ .attributeModifier(new CustomTextStyle({size: 14, weight: 600, color: '#FF000000'}))
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ .height(160)
|
|
|
+ .width("100%")
|
|
|
+ .scrollBar(BarState.Off)
|
|
|
+ .listDirection(Axis.Horizontal)
|
|
|
}
|
|
|
- .height(160)
|
|
|
- .width("100%")
|
|
|
- .scrollBar(BarState.Off)
|
|
|
- .listDirection(Axis.Horizontal)
|
|
|
+ .borderRadius(10)
|
|
|
+ .padding({left: 15, right: 15, top: 11, bottom: 11})
|
|
|
+ .linearGradient({colors: [['#FFFFF6D9', 0], ['#FFFFFFFF', 1]]})
|
|
|
}
|
|
|
- .borderRadius(10)
|
|
|
- .padding({left: 15, right: 15, top: 11, bottom: 11})
|
|
|
- .linearGradient({colors: [['#FFFFF6D9', 0], ['#FFFFFFFF', 1]]})
|
|
|
- }
|
|
|
|
|
|
|
|
|
- // 图书介绍
|
|
|
- if(true){
|
|
|
- // Column({space: 13}){
|
|
|
- // Column(){
|
|
|
- // Text('图书简介')
|
|
|
- // .zIndex(99)
|
|
|
- // .attributeModifier(new CustomTextStyle({size: 16, weight: 600, color: '#FF000000'}))
|
|
|
- //
|
|
|
- // Image($r('[basic].media.icon_SelectBg'))
|
|
|
- // .width(45)
|
|
|
- // .height(16)
|
|
|
- // .margin({top:-10})
|
|
|
- // }
|
|
|
- //
|
|
|
- // Text('哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈\n' +
|
|
|
- // '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈\n' +
|
|
|
- // '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈\n' +
|
|
|
- // '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈')
|
|
|
- // .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#FF555555'}))
|
|
|
- // }
|
|
|
- // .borderRadius(10)
|
|
|
- // .alignItems(HorizontalAlign.Start)
|
|
|
- // .padding({left: 15, right: 15, top: 11, bottom: 11})
|
|
|
- // .linearGradient({colors: [['#FFFFF6D9', 0], ['#FFFFFFFF', 1]]})
|
|
|
- //富文本
|
|
|
- Web({ src: $rawfile('index.html'), controller: this.vm.webController, renderMode: RenderMode.SYNC_RENDER })
|
|
|
- .margin(5)
|
|
|
- .width('100%')
|
|
|
- .javaScriptAccess(true)
|
|
|
- // .height(this.vm.webHeight).../
|
|
|
- .backgroundColor(Color.Transparent)
|
|
|
- .overScrollMode(OverScrollMode.NEVER) // 禁用弹性回弹
|
|
|
- .onPageEnd(() => {
|
|
|
- this.vm.webController.runJavaScript(`writeHtml(\`${this.vm.book.remark}\`)`).catch(() => {
|
|
|
- console.log('writeHtml error')
|
|
|
+ // 图书介绍
|
|
|
+ if(true){
|
|
|
+ // Column({space: 13}){
|
|
|
+ // Column(){
|
|
|
+ // Text('图书简介')
|
|
|
+ // .zIndex(99)
|
|
|
+ // .attributeModifier(new CustomTextStyle({size: 16, weight: 600, color: '#FF000000'}))
|
|
|
+ //
|
|
|
+ // Image($r('[basic].media.icon_SelectBg'))
|
|
|
+ // .width(45)
|
|
|
+ // .height(16)
|
|
|
+ // .margin({top:-10})
|
|
|
+ // }
|
|
|
+ //
|
|
|
+ // Text('哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈\n' +
|
|
|
+ // '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈\n' +
|
|
|
+ // '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈\n' +
|
|
|
+ // '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈')
|
|
|
+ // .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#FF555555'}))
|
|
|
+ // }
|
|
|
+ // .borderRadius(10)
|
|
|
+ // .alignItems(HorizontalAlign.Start)
|
|
|
+ // .padding({left: 15, right: 15, top: 11, bottom: 11})
|
|
|
+ // .linearGradient({colors: [['#FFFFF6D9', 0], ['#FFFFFFFF', 1]]})
|
|
|
+ //富文本
|
|
|
+ Web({ src: $rawfile('index.html'), controller: this.vm.webController, renderMode: RenderMode.SYNC_RENDER })
|
|
|
+ .margin(5)
|
|
|
+ .width('100%')
|
|
|
+ .javaScriptAccess(true)
|
|
|
+ // .height(this.vm.webHeight).../
|
|
|
+ .backgroundColor(Color.Transparent)
|
|
|
+ .overScrollMode(OverScrollMode.NEVER) // 禁用弹性回弹
|
|
|
+ .onPageEnd(() => {
|
|
|
+ this.vm.webController.runJavaScript(`writeHtml(\`${this.vm.book.remark}\`)`).catch(() => {
|
|
|
+ console.log('writeHtml error')
|
|
|
+ })
|
|
|
})
|
|
|
- })
|
|
|
// .onControllerAttached(() => {
|
|
|
// this.vm.webController.loadData('<!DOCTYPE html>' +
|
|
|
// "<html><body style=\"font-size:16px;color:rgba(0,0,0,0.6);flex-shrink:0;font-style:normal;font-weight:normal;background-color:rgb(255, 255, 255);\">" +
|
|
|
@@ -212,57 +204,66 @@ struct BookItemDetailPage {
|
|
|
// "UTF-8", " ", " ");
|
|
|
// })
|
|
|
|
|
|
- // .layoutMode(WebLayoutMode.FIT_CONTENT)
|
|
|
+ // .layoutMode(WebLayoutMode.FIT_CONTENT)
|
|
|
+ }
|
|
|
}
|
|
|
+ .backgroundColor('#F5F7F8')
|
|
|
+ .padding({ left: 16, right: 16, top: 12})
|
|
|
}
|
|
|
- .backgroundColor('#F5F7F8')
|
|
|
- .padding({ left: 16, right: 16, top: 12})
|
|
|
- }
|
|
|
|
|
|
- // 已经到底啦~
|
|
|
- ListItem(){
|
|
|
- Column(){
|
|
|
- Text('已经到底啦~')
|
|
|
- .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#80000000'}))
|
|
|
+ // 已经到底啦~
|
|
|
+ ListItem(){
|
|
|
+ Column(){
|
|
|
+ Text('已经到底啦~')
|
|
|
+ .attributeModifier(new CustomTextStyle({size: 12, weight: 400, color: '#80000000'}))
|
|
|
+ }
|
|
|
+ .width("100%")
|
|
|
+ .padding({top: 9, bottom: 53})
|
|
|
+ .alignItems(HorizontalAlign.Center)
|
|
|
}
|
|
|
- .width("100%")
|
|
|
- .padding({top: 9, bottom: 53})
|
|
|
- .alignItems(HorizontalAlign.Center)
|
|
|
- }
|
|
|
- }.width("100%").height("100%").scrollBar(BarState.Off)
|
|
|
- }.width("100%").layoutWeight(1)
|
|
|
+ }.width("100%").height("100%").scrollBar(BarState.Off)
|
|
|
+ }.width("100%").layoutWeight(1)
|
|
|
|
|
|
|
|
|
- // 书包 和 底部按钮
|
|
|
- Row({space: 12}){
|
|
|
- SchoolBag().margin({right: 9})
|
|
|
+ // 书包 和 底部按钮
|
|
|
+ Row({space: 12}){
|
|
|
+ SchoolBag().margin({right: 9})
|
|
|
|
|
|
- ForEach(['加入书包', '立刻借阅'], (item: string, index) => {
|
|
|
- Row(){
|
|
|
- Text(index == 0 && this.vm.book.schoolbagFlag == '1' ? '已加入' : item)
|
|
|
- .attributeModifier(new CustomTextStyle({size: 18, weight: 400}))
|
|
|
- }
|
|
|
- .layoutWeight(1)
|
|
|
- .borderRadius(25)
|
|
|
- .border({width: 2})
|
|
|
- .backgroundColor('#FECF2F')
|
|
|
- .padding({top: 10, bottom: 10})
|
|
|
- .justifyContent(FlexAlign.Center)
|
|
|
- .onClick(() => {
|
|
|
- if(index == 0) {
|
|
|
- this.vm.addToBag()
|
|
|
- } else {
|
|
|
- this.vm.borrow()
|
|
|
+ ForEach(['加入书包', '立刻借阅'], (item: string, index) => {
|
|
|
+ Row(){
|
|
|
+ Text(index == 0 && this.vm.book.schoolbagFlag == '1' ? '已加入' : item)
|
|
|
+ .attributeModifier(new CustomTextStyle({size: 18, weight: 400}))
|
|
|
}
|
|
|
+ .layoutWeight(1)
|
|
|
+ .borderRadius(25)
|
|
|
+ .border({width: 2})
|
|
|
+ .backgroundColor('#FECF2F')
|
|
|
+ .padding({top: 10, bottom: 10})
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
+ .onClick(() => {
|
|
|
+ if(index == 0) {
|
|
|
+ this.vm.addToBag()
|
|
|
+ } else {
|
|
|
+ this.vm.borrow()
|
|
|
+ }
|
|
|
+ })
|
|
|
})
|
|
|
- })
|
|
|
+ }
|
|
|
+ .shadow({ color: '#f1f1f1', radius: 5, offsetY: -5})
|
|
|
+ .padding({bottom: this.vm.safeBottom, top: 10, left: 16, right: 16})
|
|
|
}
|
|
|
- .shadow({ color: '#f1f1f1', radius: 5, offsetY: -5})
|
|
|
- .padding({bottom: this.vm.safeBottom, top: 10, left: 16, right: 16})
|
|
|
+ .width('100%')
|
|
|
+ .height('100%')
|
|
|
+ .backgroundColor('#F7F9FA')
|
|
|
+
|
|
|
+ Image($r('[basic].media.ic_back'))
|
|
|
+ .width(24).aspectRatio(1)
|
|
|
+ .onClick(() => { yTRouter.routerBack() })
|
|
|
}
|
|
|
.width('100%')
|
|
|
.height('100%')
|
|
|
.backgroundColor('#F7F9FA')
|
|
|
+ .padding({top: this.vm.safeTop})
|
|
|
}
|
|
|
.hideTitleBar(true)
|
|
|
}
|