|
|
@@ -1,16 +1,44 @@
|
|
|
-import { DiaLogSheetControl, RouterPage, YTAvoid, YTHeader, yTRouter } from 'basic'
|
|
|
+import { BasicType, BookItem, DiaLogSheetControl, IBestToast, YTAvoid, YTHeader, yTRouter } from 'basic'
|
|
|
+import { OrderApi } from '../../apis/OrderApi'
|
|
|
import { AddressComp } from '../../components/AddressComp'
|
|
|
import { AddressItemComp } from '../../components/AddressItemComp'
|
|
|
import { buttonComp } from '../../components/BuilderIndex'
|
|
|
+import { Address } from '../../model/Address'
|
|
|
+import { OrderValidationData } from '../../model/OrderModelIndex'
|
|
|
import { CustomTextStyle } from '../../style/CustomTextStyle'
|
|
|
|
|
|
@ComponentV2
|
|
|
-@RouterPage
|
|
|
struct OrderDetailPage {
|
|
|
- safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number
|
|
|
+ @Local safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number
|
|
|
+ // 租借的图书 URL
|
|
|
+ @Param bookList: BookItem[] = []
|
|
|
+
|
|
|
+ @Local forEach: Array<BasicType> = []
|
|
|
+ // 总价
|
|
|
+ // todo 默认为邮费
|
|
|
+ @Local totalPrice: number = 9.99
|
|
|
+ // 地址信息
|
|
|
+ @Local address: Address = {}
|
|
|
+
|
|
|
+ // 用户订单备注
|
|
|
+ remark: string = ''
|
|
|
+
|
|
|
+ // 提交订单校验
|
|
|
+ orderValidation: OrderValidationData = {
|
|
|
+ bookIds: [],
|
|
|
+ deliveryMethod: 2,
|
|
|
+ deposit: 0,
|
|
|
+ payWay: 0,
|
|
|
+ postFee: 9.99,
|
|
|
+ userName: '占三峰',
|
|
|
+ phone: '13598728343',
|
|
|
+ address: '高新区火炬园路321号韩菲诗.诚享大厦304室内',
|
|
|
+ region: '福建-厦门-火炬园',
|
|
|
+ }
|
|
|
|
|
|
// 打开选择地址弹窗
|
|
|
openAddressDialog() {
|
|
|
+ // todo 有 地址数据 打开弹窗, 没有进入地址管理页面添加页面添加地址
|
|
|
let control: DiaLogSheetControl = new DiaLogSheetControl(this.getUIContext())
|
|
|
yTRouter.router2BottomDialog({
|
|
|
control: control,
|
|
|
@@ -18,6 +46,48 @@ struct OrderDetailPage {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+ // 提交订单
|
|
|
+ submitOrder() {
|
|
|
+ if(!this.orderValidation?.phone) {
|
|
|
+ IBestToast.show('请填写收件人信息')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // yTRouter.router2BorrowAnsPage()
|
|
|
+
|
|
|
+ this.orderValidation.orderPrice = this.totalPrice
|
|
|
+ this.orderValidation.remark = this.remark
|
|
|
+ OrderApi.checkOrder(this.orderValidation)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ aboutToAppear(): void {
|
|
|
+ // 书本价格计算
|
|
|
+ let total: number = 0.00
|
|
|
+ this.bookList.forEach((item: BookItem, index) => {
|
|
|
+ if(item.rentPerDay) {
|
|
|
+ total += Number.parseFloat(item.rentPerDay)
|
|
|
+ }
|
|
|
+ this.orderValidation.bookIds?.push(item.id!)
|
|
|
+ })
|
|
|
+
|
|
|
+ // 生成明细
|
|
|
+ this.forEach = [
|
|
|
+ { text: '租借期限', message: '30天' },
|
|
|
+ { text: '租借时间', message: '快递签收日起30天' },
|
|
|
+ { text: '租借价格', message: `¥${total.toFixed(2)}` },
|
|
|
+ { text: '往返运费', message: `¥9.99` },
|
|
|
+ { text: '租借期限', message: '30天' },
|
|
|
+ ]
|
|
|
+
|
|
|
+ // todo 在有地址列表 或 默认地址的情况下添加地址信息
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // todo 订单校验数据结构整合
|
|
|
+ this.totalPrice += total
|
|
|
+ this.orderValidation.bookPrice = total
|
|
|
+ }
|
|
|
+
|
|
|
build() {
|
|
|
NavDestination() {
|
|
|
Column() {
|
|
|
@@ -29,7 +99,19 @@ struct OrderDetailPage {
|
|
|
|
|
|
// 地址栏
|
|
|
ListItem(){
|
|
|
- AddressItemComp({type: 0})
|
|
|
+ // todo 订单地址校验
|
|
|
+ if(this.address?.phone) {
|
|
|
+ AddressItemComp({type: 0})
|
|
|
+ } else {
|
|
|
+ Row(){
|
|
|
+ Text('+ 添加收件人信息')
|
|
|
+ .attributeModifier(new CustomTextStyle({ size: 16, weight: 500 }))
|
|
|
+ }.width('100%')
|
|
|
+ .borderRadius(8)
|
|
|
+ .border({width: 2})
|
|
|
+ .padding({top: 30, bottom: 30})
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
+ }
|
|
|
}
|
|
|
.backgroundColor(Color.White)
|
|
|
.onClick(() => { this.openAddressDialog() })
|
|
|
@@ -41,18 +123,19 @@ struct OrderDetailPage {
|
|
|
Text('租借图书')
|
|
|
.attributeModifier(new CustomTextStyle({ size: 16, weight: 500, color: '#FF000000' }))
|
|
|
|
|
|
- Text('共10件')
|
|
|
+ Text(`共${this.bookList.length}件`)
|
|
|
.attributeModifier(new CustomTextStyle({ size: 12, weight: 500, color: '#80000000' }))
|
|
|
}
|
|
|
|
|
|
List({space: 15}){
|
|
|
- ForEach(new Array(8).fill(''), (item: string, index) => {
|
|
|
+ ForEach(this.bookList, (item: BookItem, index) => {
|
|
|
ListItem(){
|
|
|
- Image($r('[basic].media.png_defaultBook'))
|
|
|
+ Image(item.coverUrl)
|
|
|
.width(63)
|
|
|
.height(81)
|
|
|
.borderRadius(6)
|
|
|
.backgroundColor('#FFFECF2F')
|
|
|
+ .alt($r('[basic].media.png_defaultBook'))
|
|
|
}
|
|
|
})
|
|
|
}.width("100%").height(81)
|
|
|
@@ -70,23 +153,24 @@ struct OrderDetailPage {
|
|
|
// 订单信息
|
|
|
ListItem(){
|
|
|
Column({space: 16}){
|
|
|
- ForEach(new Array(5).fill(''), (item: string, index) => {
|
|
|
+ ForEach(this.forEach, (item: BasicType, index) => {
|
|
|
Row(){
|
|
|
- Text('租借期限')
|
|
|
+ Text(item.text)
|
|
|
.attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#FF666666' }))
|
|
|
|
|
|
- Text('30天')
|
|
|
+ Text(item.message)
|
|
|
.attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: '#FF333333' }))
|
|
|
}.width('100%').justifyContent(FlexAlign.SpaceBetween)
|
|
|
})
|
|
|
|
|
|
+
|
|
|
Divider().height(1).width('100%').backgroundColor('#FF666666')
|
|
|
|
|
|
Row(){
|
|
|
Text('小计')
|
|
|
.attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#FF666666' }))
|
|
|
|
|
|
- Text('¥219.80')
|
|
|
+ Text(`¥${this.totalPrice.toFixed(2)}`)
|
|
|
.attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: '#FF333333' }))
|
|
|
}.width('100%').justifyContent(FlexAlign.SpaceBetween)
|
|
|
}
|
|
|
@@ -96,13 +180,47 @@ struct OrderDetailPage {
|
|
|
.border({width: 2})
|
|
|
.backgroundColor(Color.White)
|
|
|
|
|
|
+ // 支付方式
|
|
|
+ ListItem(){
|
|
|
+ Column({space: 16}){
|
|
|
+ Text('支付方式')
|
|
|
+ .attributeModifier(new CustomTextStyle({ size: 16, weight: 500, color: '#000000' }))
|
|
|
+
|
|
|
+ Divider().height(1).width('100%').backgroundColor('#FF666666')
|
|
|
+
|
|
|
+ Row(){
|
|
|
+ Row({space: 5}){
|
|
|
+ Image($r('[basic].media.icon_wx'))
|
|
|
+ .width(20)
|
|
|
+ .aspectRatio(1)
|
|
|
+
|
|
|
+ Text('微信支付')
|
|
|
+ .attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#666666' }))
|
|
|
+ }
|
|
|
+
|
|
|
+ Image($r('[basic].media.icon_selectSvg'))
|
|
|
+ .width(14)
|
|
|
+ .aspectRatio(1)
|
|
|
+ .fillColor('#20BB06')
|
|
|
+ }
|
|
|
+ .width('100%')
|
|
|
+ .justifyContent(FlexAlign.SpaceBetween)
|
|
|
+ }
|
|
|
+ .justifyContent(FlexAlign.Start)
|
|
|
+ .alignItems(HorizontalAlign.Start)
|
|
|
+ .padding({left: 16, right: 16, top: 9, bottom: 9})
|
|
|
+ }
|
|
|
+ .borderRadius(8)
|
|
|
+ .border({width: 2})
|
|
|
+ .backgroundColor(Color.White)
|
|
|
+
|
|
|
// 备注
|
|
|
ListItem(){
|
|
|
Row({space: 20}){
|
|
|
Text('备注')
|
|
|
.attributeModifier(new CustomTextStyle({ size: 14, weight: 500, color: '#FF666666' }))
|
|
|
|
|
|
- TextInput({placeholder: '请输入您的留言'})
|
|
|
+ TextInput({placeholder: '请输入您的留言', text: $$this.remark})
|
|
|
.padding(0)
|
|
|
.borderRadius(0)
|
|
|
.layoutWeight(1)
|
|
|
@@ -115,6 +233,8 @@ struct OrderDetailPage {
|
|
|
.borderRadius(8)
|
|
|
.border({width: 2})
|
|
|
.backgroundColor(Color.White)
|
|
|
+
|
|
|
+ ListItem()
|
|
|
}.width('100%').height('100%')
|
|
|
.scrollBar(BarState.Off)
|
|
|
.padding({left: 15, right: 15})
|
|
|
@@ -123,12 +243,12 @@ struct OrderDetailPage {
|
|
|
Row(){
|
|
|
Text(){
|
|
|
Span('应付:')
|
|
|
- Span(`¥218.8`).fontColor('#FFFF0000').fontSize(20)
|
|
|
+ Span(`¥${this.totalPrice.toFixed(2)}`).fontColor('#FFFF0000').fontSize(20)
|
|
|
}
|
|
|
.attributeModifier(new CustomTextStyle({ size: 14, weight: 400, color: '#FF000000' }))
|
|
|
|
|
|
buttonComp('提交订单', 143, 10, new CustomTextStyle({size: 18}), () => {
|
|
|
- yTRouter.router2BorrowAnsPage()
|
|
|
+ this.submitOrder()
|
|
|
})
|
|
|
}
|
|
|
.width('100%')
|
|
|
@@ -153,6 +273,6 @@ struct OrderDetailPage {
|
|
|
}
|
|
|
|
|
|
@Builder
|
|
|
-function OrderDetailBuilder() {
|
|
|
- OrderDetailPage()
|
|
|
+function OrderDetailBuilder(_: string, param: Array<BookItem>) {
|
|
|
+ OrderDetailPage({bookList: param})
|
|
|
}
|