|
|
@@ -0,0 +1,172 @@
|
|
|
+import { BasicType, DiaLogSheetControl, YTAvoid, YtDatePicker, YTHeader, yTRouter } from 'basic'
|
|
|
+import { AddressItemComp } from '../../components/AddressItemComp'
|
|
|
+import { buttonComp } from '../../components/BuilderIndex'
|
|
|
+import { CustomTextStyle } from '../../style/CustomTextStyle'
|
|
|
+
|
|
|
+// 预约还书
|
|
|
+@ComponentV2
|
|
|
+struct ReserveReturnPage {
|
|
|
+ @Param isComplete: boolean = false
|
|
|
+
|
|
|
+ @Local selectTime: string = ''
|
|
|
+
|
|
|
+ safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number
|
|
|
+ forEach: Array<BasicType> = [
|
|
|
+ {text: '快递公司', message: '京东快递'},
|
|
|
+ {text: '取件时间', message: '请选择', type: 'Time', click: () => { this.openTimePickerBuilder() }},
|
|
|
+ {text: '付款方式', message: '到付'},
|
|
|
+ ]
|
|
|
+
|
|
|
+ // 提交预约取件
|
|
|
+ editAddress() {
|
|
|
+ yTRouter.router2CenterDialog({
|
|
|
+ param: { text: '确认提交', message: '确定提交预约还书？提交后不可取消' }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 选择时间弹窗
|
|
|
+ openTimePickerBuilder() {
|
|
|
+ let control = new DiaLogSheetControl(this.getUIContext(), false, false)
|
|
|
+ yTRouter.router2BottomDialog({
|
|
|
+ control: control,
|
|
|
+ builder: () => {
|
|
|
+ this.DatePickerBuilder(control, this.selectTime)
|
|
|
+ }
|
|
|
+ }, (info: PopInfo) => {
|
|
|
+ let ans = info.result as string
|
|
|
+ this.selectTime = ans
|
|
|
+ console.log(`时间 => ${ans}`)
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ build() {
|
|
|
+ NavDestination() {
|
|
|
+ Column() {
|
|
|
+ YTHeader({defaultStyle: {title: '预约还书'}, bgc: Color.White})
|
|
|
+
|
|
|
+ Column({space: 16}){
|
|
|
+ Column({space: 5}){
|
|
|
+ if(this.isComplete) {
|
|
|
+ Text(`归还图书数量（${10}本）`)
|
|
|
+ .attributeModifier(new CustomTextStyle({size: 14, weight: 500}))
|
|
|
+ } else {
|
|
|
+ Text('预约成功！')
|
|
|
+ .attributeModifier(new CustomTextStyle({size: 15, weight: 500, color: '#333333'}))
|
|
|
+ Text('请保存手机畅通，等待快递员上门取件。')
|
|
|
+ .attributeModifier(new CustomTextStyle({size: 15, weight: 500, color: '#333333'}))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .width('100%')
|
|
|
+ .padding(16)
|
|
|
+ .borderRadius(8)
|
|
|
+ .border({width: 2})
|
|
|
+ .backgroundColor(Color.White)
|
|
|
+ .alignItems(HorizontalAlign.Start)
|
|
|
+
|
|
|
+ AddressItemComp({ type: 3, isLocation: false, align_: VerticalAlign.Top })
|
|
|
+
|
|
|
+ Column(){
|
|
|
+ ForEach(this.forEach, (item: BasicType, index) => {
|
|
|
+ Row(){
|
|
|
+ Text(item.text)
|
|
|
+ .attributeModifier(new CustomTextStyle({size: 14, weight: 500}))
|
|
|
+
|
|
|
+ if(item.type == 'Time') {
|
|
|
+ Row({space: 2}){
|
|
|
+ Text(this.selectTime || item.message)
|
|
|
+ .attributeModifier(new CustomTextStyle({
|
|
|
+ size: 14, weight: 500,
|
|
|
+ color: this.selectTime ? '#FF000000' : '#C1C1C1'
|
|
|
+ }))
|
|
|
+ Image($r('[basic].media.ic_public_arrow_left'))
|
|
|
+ .width(22)
|
|
|
+ .aspectRatio(1)
|
|
|
+ .rotate({angle: 180})
|
|
|
+ }.onClick(item.click)
|
|
|
+ } else {
|
|
|
+ Text(item.message)
|
|
|
+ .attributeModifier(new CustomTextStyle({size: 14, weight: 500}))
|
|
|
+ }
|
|
|
+ }.width('100%').justifyContent(FlexAlign.SpaceBetween)
|
|
|
+ .padding({top: 15, bottom: 15})
|
|
|
+
|
|
|
+ if (this.forEach.length - 1 != index) {
|
|
|
+ Divider()
|
|
|
+ .width('100%').height(1)
|
|
|
+ .backgroundColor('#ffd4d0d0')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ .padding(15)
|
|
|
+ .width('100%')
|
|
|
+ .borderRadius(8)
|
|
|
+ .border({width: 2})
|
|
|
+
|
|
|
+ this.textBuilder()
|
|
|
+ }
|
|
|
+ .padding(15)
|
|
|
+ .width('100%')
|
|
|
+ .layoutWeight(1)
|
|
|
+
|
|
|
+ if(this.isComplete){
|
|
|
+ Row(){
|
|
|
+ buttonComp('提交', '100%', 10, new CustomTextStyle({size: 18, weight: 500}), () => {
|
|
|
+ this.editAddress()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ .backgroundColor(Color.White)
|
|
|
+ .padding({left: 15, right: 15, bottom: this.safeBottom, top: 10})
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .width('100%')
|
|
|
+ .height('100%')
|
|
|
+ .backgroundColor('#F7F9FA')
|
|
|
+ }
|
|
|
+ .hideTitleBar(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 时间选择器
|
|
|
+ @Builder
|
|
|
+ DatePickerBuilder(control: DiaLogSheetControl, date: string){
|
|
|
+ YtDatePicker({
|
|
|
+ selectDateBack: (date?: Date): boolean => {
|
|
|
+ if(!date) return control._onBackPress()
|
|
|
+ // 转换为 YY-MM-DD HH:mm:ss 格式
|
|
|
+ const year = date.getFullYear().toString();
|
|
|
+ const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
|
+ const day = date.getDate().toString().padStart(2, '0');
|
|
|
+
|
|
|
+ const result = `${year}-${month}-${day}`;
|
|
|
+ return control._onBackPress(result)
|
|
|
+ },
|
|
|
+ selectedDate: date ? new Date(date) : new Date(),
|
|
|
+ linearInfo: { colors: [['#FFF6F6F6', 1]] },
|
|
|
+ needCancel: true
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ @Builder
|
|
|
+ textBuilder(){
|
|
|
+ Column({space: 3}){
|
|
|
+ Text('温馨提示')
|
|
|
+ .attributeModifier(new CustomTextStyle({size: 15, weight: 500, color: '#C1C1C1'}))
|
|
|
+
|
|
|
+ Text('1、整单图书需要整借整还，如漏还、错还，后续产生的邮费需用户自理。')
|
|
|
+ .attributeModifier(new CustomTextStyle({size: 15, weight: 500, color: '#C1C1C1'}))
|
|
|
+
|
|
|
+ Text('2、为了方便下一位小朋友借阅，请使用原包装避免运输途中损坏图书。如原包装丢失，请自行准备纸箱包装。')
|
|
|
+ .attributeModifier(new CustomTextStyle({size: 15, weight: 500, color: '#C1C1C1'}))
|
|
|
+
|
|
|
+ Text('3、还书运费已包邮或支付，请勿额外支付运费给快递小哥。如有疑问请及时联系长颈鹿客服：0592-236223。')
|
|
|
+ .attributeModifier(new CustomTextStyle({size: 15, weight: 500, color: '#C1C1C1'}))
|
|
|
+
|
|
|
+ }
|
|
|
+ .width('100%')
|
|
|
+ .alignItems(HorizontalAlign.Start)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@Builder
|
|
|
+function ReserveReturnBuilder() {
|
|
|
+ ReserveReturnPage()
|
|
|
+}
|
