developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangliang_wd
5aff95e9 1 parent 02246e96

feat：优化预约列表

Inline Side-by-side
Showing 3 changed files with 149 additions and 142 deletions
@@ -115,7 +115,6 @@ export struct WdWebLocalComponent { @@ -115,7 +115,6 @@ export struct WdWebLocalComponent {
115 } 115 }
116 .width(this.positionWidth) 116 .width(this.positionWidth)
117 .height(this.positionHeight) 117 .height(this.positionHeight)
118 - .backgroundColor(Color.Red)  
119 .alignRules({ 118 .alignRules({
120 top: { anchor: "__container__", align: VerticalAlign.Top }, 119 top: { anchor: "__container__", align: VerticalAlign.Top },
121 }) 120 })
@@ -9,7 +9,9 @@ import { MyCustomDialog } from '../../reusable/MyCustomDialog' @@ -9,7 +9,9 @@ import { MyCustomDialog } from '../../reusable/MyCustomDialog'
9 export struct AppointmentListChildComponent { 9 export struct AppointmentListChildComponent {
10 @ObjectLink item: MineAppointmentItem 10 @ObjectLink item: MineAppointmentItem
11 @State loadImg: boolean = false; 11 @State loadImg: boolean = false;
  12 + confirmCallback: (item: MineAppointmentItem) => void = () => {
12 13
  14 + }
13 async aboutToAppear(): Promise<void> { 15 async aboutToAppear(): Promise<void> {
14 this.loadImg = await onlyWifiLoadImg(); 16 this.loadImg = await onlyWifiLoadImg();
15 } 17 }
@@ -29,161 +31,163 @@ export struct AppointmentListChildComponent { @@ -29,161 +31,163 @@ export struct AppointmentListChildComponent {
29 }) 31 })
30 32
31 build() { 33 build() {
32 - Column() {  
33 - Stack() {  
34 - Image(this.loadImg ? this.item?.imageUrl[0] : '')  
35 - .backgroundColor(this.loadImg ? $r('app.color.color_B0B0B0') : 0xf5f5f5)  
36 - .width('100%')  
37 - .aspectRatio(16 / 9)  
38 - .objectFit(ImageFit.Auto)  
39 - .interpolation(ImageInterpolation.High) 34 + // if (this.item.isAppointment){
  35 + Column() {
  36 + Stack() {
  37 + Image(this.loadImg ? this.item?.imageUrl[0] : '')
  38 + .backgroundColor(this.loadImg ? $r('app.color.color_B0B0B0') : 0xf5f5f5)
  39 + .width('100%')
  40 + .aspectRatio(16 / 9)
  41 + .objectFit(ImageFit.Auto)
  42 + .interpolation(ImageInterpolation.High)
40 43
41 44
42 - if (this.item.status == "wait") { 45 + if (this.item.status == "wait") {
  46 + Row() {
  47 + Row() {
  48 + Image($r('app.media.reserve_icon'))
  49 + .width('27lpx')
  50 + .height('27lpx')
  51 + .objectFit(ImageFit.Auto)
  52 + .interpolation(ImageInterpolation.High)
  53 + .margin({right:"6lpx"})
  54 +
  55 + Text("预约")
  56 + .fontWeight(400)
  57 + .fontSize('23lpx')
  58 + .textShadow({
  59 + radius: 2,
  60 + color: `rgba(0,0,0,0.3)`,
  61 + offsetY:2,
  62 + offsetX:0
  63 + })
  64 + .fontColor($r('app.color.white'))
  65 + .lineHeight('31lpx')
  66 + .layoutWeight(1)
  67 + .textAlign(TextAlign.Start)
  68 + }.width('94lpx')
  69 + .margin({ bottom: '15lpx', right: '15lpx' })
  70 + .alignItems(VerticalAlign.Center)
  71 + }.width('100%')
  72 + .height('100%')
  73 + .alignItems(VerticalAlign.Bottom)
  74 + .justifyContent(FlexAlign.End)
  75 + }
  76 + }.width('100%')
  77 + .height('376lpx')
  78 +
  79 + Column() {
  80 + Text(this.item.title)
  81 + .fontWeight('400lpx')
  82 + .fontSize('33lpx')
  83 + .fontColor($r('app.color.color_222222'))
  84 + .lineHeight('48lpx')
  85 + .maxLines(2)
  86 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  87 + .margin({ bottom: '23lpx' })
  88 + .textAlign(TextAlign.Start)
  89 + .width('100%')
43 Row() { 90 Row() {
44 Row() { 91 Row() {
45 - Image($r('app.media.reserve_icon'))  
46 - .width('27lpx')  
47 - .height('27lpx')  
48 - .objectFit(ImageFit.Auto)  
49 - .interpolation(ImageInterpolation.High)  
50 - .margin({right:"6lpx"}) 92 + if (this.item.status == "end") {
  93 + Image($r('app.media.play_status_history_icon'))
  94 + .objectFit(ImageFit.Auto)
  95 + .interpolation(ImageInterpolation.High)
  96 + .width('38lpx')
  97 + .height('38lpx')
  98 + .margin({ right: '12lpx' })
  99 + Text('已结束').fontColor($r('app.color.color_999999'))
  100 + .fontWeight('500lpx')
  101 + .fontSize('23lpx')
  102 + }else if(this.item.status == "running"){
  103 + Image($r('app.media.play_status_icon'))
  104 + .objectFit(ImageFit.Auto)
  105 + .interpolation(ImageInterpolation.High)
  106 + .width('38lpx')
  107 + .height('38lpx')
  108 + .margin({ right: '12lpx' })
  109 + Text('已开始').fontColor($r('app.color.color_999999'))
  110 + .fontWeight('500lpx')
  111 + .fontSize('23lpx')
  112 + } else {
  113 + Image($r('app.media.play_status_icon'))
  114 + .objectFit(ImageFit.Auto)
  115 + .interpolation(ImageInterpolation.High)
  116 + .width('38lpx')
  117 + .height('38lpx')
  118 + .margin({ right: '12lpx' })
  119 + Text(this.item.timePre).fontColor($r('app.color.color_ED2800'))
  120 + .fontWeight('500lpx')
  121 + .fontSize('23lpx')
  122 + Image($r('app.media.point_icon'))
  123 + .objectFit(ImageFit.Auto)
  124 + .interpolation(ImageInterpolation.High)
  125 + .width('12lpx')
  126 + .height('31lpx')
  127 + .margin({ right: '4lpx' })
  128 + Text(`${this.item.timeBack}开始`).fontColor($r('app.color.color_ED2800'))
  129 + .fontWeight('500lpx')
  130 + .fontSize('23lpx')
  131 + .lineHeight('31lpx')
  132 + }
  133 + }
  134 + .padding({ left: '19lpx', right: '19lpx' })
  135 + .height('46lpx')
  136 + .alignItems(VerticalAlign.Center)
  137 + .backgroundColor($r('app.color.color_F5F5F5'))
  138 + .borderRadius('4lpx')
51 139
52 - Text("预约") 140 + Blank()
  141 + .layoutWeight(1)
  142 + if (this.item.status === "wait") {
  143 + Text(this.item.isAppointment ? "已预约" : "预约")
53 .fontWeight(400) 144 .fontWeight(400)
54 .fontSize('23lpx') 145 .fontSize('23lpx')
55 - .textShadow({  
56 - radius: 2,  
57 - color: `rgba(0,0,0,0.3)`,  
58 - offsetY:2,  
59 - offsetX:0  
60 - })  
61 - .fontColor($r('app.color.white')) 146 + .backgroundColor(this.item.isAppointment ? $r('app.color.color_F5F5F5') : $r('app.color.color_ED2800'))
  147 + .fontColor(this.item.isAppointment ? $r('app.color.color_CCCCCC') : $r('app.color.white'))
62 .lineHeight('31lpx') 148 .lineHeight('31lpx')
63 - .layoutWeight(1)  
64 - .textAlign(TextAlign.Start)  
65 - }.width('94lpx')  
66 - .margin({ bottom: '15lpx', right: '15lpx' })  
67 - .alignItems(VerticalAlign.Center)  
68 - }.width('100%')  
69 - .height('100%')  
70 - .alignItems(VerticalAlign.Bottom)  
71 - .justifyContent(FlexAlign.End)  
72 - }  
73 - }.width('100%')  
74 - .height('376lpx')  
75 -  
76 - Column() {  
77 - Text(this.item.title)  
78 - .fontWeight('400lpx')  
79 - .fontSize('33lpx')  
80 - .fontColor($r('app.color.color_222222'))  
81 - .lineHeight('48lpx')  
82 - .maxLines(2)  
83 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
84 - .margin({ bottom: '23lpx' })  
85 - .textAlign(TextAlign.Start)  
86 - .width('100%')  
87 - Row() {  
88 - Row() {  
89 - if (this.item.status == "end") {  
90 - Image($r('app.media.play_status_history_icon'))  
91 - .objectFit(ImageFit.Auto)  
92 - .interpolation(ImageInterpolation.High)  
93 - .width('38lpx')  
94 - .height('38lpx')  
95 - .margin({ right: '12lpx' })  
96 - Text('已结束').fontColor($r('app.color.color_999999'))  
97 - .fontWeight('500lpx')  
98 - .fontSize('23lpx') 149 + .textAlign(TextAlign.Center)
  150 + .width('100lpx')
  151 + .height('46lpx')
  152 + .borderRadius('6lpx')
  153 + .onClick(() => {
  154 + this.dialogController.open()
  155 + })
99 }else if(this.item.status == "running"){ 156 }else if(this.item.status == "running"){
100 - Image($r('app.media.play_status_icon'))  
101 - .objectFit(ImageFit.Auto)  
102 - .interpolation(ImageInterpolation.High)  
103 - .width('38lpx')  
104 - .height('38lpx')  
105 - .margin({ right: '12lpx' })  
106 - Text('已开始').fontColor($r('app.color.color_999999'))  
107 - .fontWeight('500lpx') 157 + Text("去观看" )
  158 + .fontWeight(400)
108 .fontSize('23lpx') 159 .fontSize('23lpx')
  160 + .backgroundColor($r('app.color.color_ED2800'))
  161 + .fontColor($r('app.color.white'))
  162 + .lineHeight('31lpx')
  163 + .textAlign(TextAlign.Center)
  164 + .width('100lpx')
  165 + .height('46lpx')
  166 + .borderRadius('6lpx')
109 } else { 167 } else {
110 - Image($r('app.media.play_status_icon'))  
111 - .objectFit(ImageFit.Auto)  
112 - .interpolation(ImageInterpolation.High)  
113 - .width('38lpx')  
114 - .height('38lpx')  
115 - .margin({ right: '12lpx' })  
116 - Text(this.item.timePre).fontColor($r('app.color.color_ED2800'))  
117 - .fontWeight('500lpx')  
118 - .fontSize('23lpx')  
119 - Image($r('app.media.point_icon'))  
120 - .objectFit(ImageFit.Auto)  
121 - .interpolation(ImageInterpolation.High)  
122 - .width('12lpx')  
123 - .height('31lpx')  
124 - .margin({ right: '4lpx' })  
125 - Text(`${this.item.timeBack}开始`).fontColor($r('app.color.color_ED2800'))  
126 - .fontWeight('500lpx') 168 + Text("看回放")
  169 + .fontWeight(400)
127 .fontSize('23lpx') 170 .fontSize('23lpx')
  171 + .backgroundColor($r('app.color.color_ED2800'))
  172 + .fontColor($r('app.color.white'))
128 .lineHeight('31lpx') 173 .lineHeight('31lpx')
  174 + .textAlign(TextAlign.Center)
  175 + .width('100lpx')
  176 + .height('46lpx')
  177 + .borderRadius('6lpx')
129 } 178 }
130 } 179 }
131 - .padding({ left: '19lpx', right: '19lpx' })  
132 - .height('46lpx')  
133 - .alignItems(VerticalAlign.Center)  
134 - .backgroundColor($r('app.color.color_F5F5F5'))  
135 - .borderRadius('4lpx')  
136 -  
137 - Blank()  
138 - .layoutWeight(1)  
139 - if (this.item.status === "wait") {  
140 - Text(this.item.isAppointment ? "已预约" : "预约")  
141 - .fontWeight(400)  
142 - .fontSize('23lpx')  
143 - .backgroundColor(this.item.isAppointment ? $r('app.color.color_F5F5F5') : $r('app.color.color_ED2800'))  
144 - .fontColor(this.item.isAppointment ? $r('app.color.color_CCCCCC') : $r('app.color.white'))  
145 - .lineHeight('31lpx')  
146 - .textAlign(TextAlign.Center)  
147 - .width('100lpx')  
148 - .height('46lpx')  
149 - .borderRadius('6lpx')  
150 - .onClick(() => {  
151 - this.dialogController.open()  
152 - })  
153 - }else if(this.item.status == "running"){  
154 - Text("去观看" )  
155 - .fontWeight(400)  
156 - .fontSize('23lpx')  
157 - .backgroundColor($r('app.color.color_ED2800'))  
158 - .fontColor($r('app.color.white'))  
159 - .lineHeight('31lpx')  
160 - .textAlign(TextAlign.Center)  
161 - .width('100lpx')  
162 - .height('46lpx')  
163 - .borderRadius('6lpx')  
164 - } else {  
165 - Text("看回放")  
166 - .fontWeight(400)  
167 - .fontSize('23lpx')  
168 - .backgroundColor($r('app.color.color_ED2800'))  
169 - .fontColor($r('app.color.white'))  
170 - .lineHeight('31lpx')  
171 - .textAlign(TextAlign.Center)  
172 - .width('100lpx')  
173 - .height('46lpx')  
174 - .borderRadius('6lpx')  
175 - }  
176 } 180 }
177 - }  
178 - .padding({  
179 - left: '23lpx',  
180 - right: '23lpx',  
181 - top: '15lpx',  
182 - bottom: '23lpx'  
183 - })  
184 - }.margin({ left: 10, right: 10 })  
185 - .backgroundColor($r('app.color.white'))  
186 - .borderRadius('8lpx') 181 + .padding({
  182 + left: '23lpx',
  183 + right: '23lpx',
  184 + top: '15lpx',
  185 + bottom: '23lpx'
  186 + })
  187 + }.margin({ left: 10, right: 10 })
  188 + .backgroundColor($r('app.color.white'))
  189 + .borderRadius('8lpx')
  190 + // }
187 } 191 }
188 192
189 onCancel() { 193 onCancel() {
@@ -200,8 +204,9 @@ export struct AppointmentListChildComponent { @@ -200,8 +204,9 @@ export struct AppointmentListChildComponent {
200 MinePageDatasModel.getAppointmentOperation(item, getContext(this)).then((value) => { 204 MinePageDatasModel.getAppointmentOperation(item, getContext(this)).then((value) => {
201 if (value != null) { 205 if (value != null) {
202 if (value.code === 0 || value.code.toString() === "0") { 206 if (value.code === 0 || value.code.toString() === "0") {
203 - this.item.isAppointment = !this.item.isAppointment 207 + // this.item.isAppointment = !this.item.isAppointment
204 208
  209 + this.confirmCallback(this.item)
205 if(!this.item.isAppointment){ 210 if(!this.item.isAppointment){
206 TrackingButton.click("mySavedLivePageUnSubscribe",TrackConstants.PageName.My_Saved_Live,TrackConstants.PageName.My_Saved_Live) 211 TrackingButton.click("mySavedLivePageUnSubscribe",TrackConstants.PageName.My_Saved_Live,TrackConstants.PageName.My_Saved_Live)
207 } 212 }
@@ -101,7 +101,10 @@ export struct AppointmentListUI { @@ -101,7 +101,10 @@ export struct AppointmentListUI {
101 List({ space:6,scroller: this.scroller }) { 101 List({ space:6,scroller: this.scroller }) {
102 LazyForEach(this.data, (item: MineAppointmentItem, index: number) => { 102 LazyForEach(this.data, (item: MineAppointmentItem, index: number) => {
103 ListItem() { 103 ListItem() {
104 - AppointmentListChildComponent({ item: item }) 104 + AppointmentListChildComponent({ item: item,confirmCallback:((deleteItem) =>{
  105 + this.data.deleteItem(this.data.getIndexOf(deleteItem))
  106 + this.count = this.data.totalCount()
  107 + })})
105 } 108 }
106 .onClick(() => { 109 .onClick(() => {
107 let contentDTO = getParams(item) 110 let contentDTO = getParams(item)