developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
王士厅
e8d699fc 1 parent f0a22287

人民号图集修复bug

Inline Side-by-side
Showing 2 changed files with 132 additions and 92 deletions
@@ -21,7 +21,7 @@ export struct MultiPictureDetailItemComponent { @@ -21,7 +21,7 @@ export struct MultiPictureDetailItemComponent {
21 .alt($r('app.media.picture_loading')) 21 .alt($r('app.media.picture_loading'))
22 .width(this.imageWidth) 22 .width(this.imageWidth)
23 .aspectRatio(this.ratio) 23 .aspectRatio(this.ratio)
24 - .objectFit(ImageFit.Fill) 24 + .objectFit(ImageFit.Contain)
25 .interpolation(ImageInterpolation.High) 25 .interpolation(ImageInterpolation.High)
26 .onComplete(event => { 26 .onComplete(event => {
27 this.imageWidth = '100%' 27 this.imageWidth = '100%'
@@ -12,6 +12,7 @@ import display from '@ohos.display'; @@ -12,6 +12,7 @@ import display from '@ohos.display';
12 import font from '@ohos.font'; 12 import font from '@ohos.font';
13 import { OperRowListView } from './view/OperRowListView'; 13 import { OperRowListView } from './view/OperRowListView';
14 import { MultiPictureDetailItemComponent } from './MultiPictureDetailItemComponent'; 14 import { MultiPictureDetailItemComponent } from './MultiPictureDetailItemComponent';
  15 +import { ImageDownloadComponent } from '../components/ImageDownloadComponent';
15 import { EmptyComponent } from './view/EmptyComponent'; 16 import { EmptyComponent } from './view/EmptyComponent';
16 import { DateTimeUtils } from 'wdKit/Index'; 17 import { DateTimeUtils } from 'wdKit/Index';
17 import { HttpUrlUtils } from 'wdNetwork/Index'; 18 import { HttpUrlUtils } from 'wdNetwork/Index';
@@ -37,9 +38,10 @@ export struct MultiPictureDetailPageComponent { @@ -37,9 +38,10 @@ export struct MultiPictureDetailPageComponent {
37 private swiperController: SwiperController = new SwiperController() 38 private swiperController: SwiperController = new SwiperController()
38 private swiperControllerItem: SwiperController = new SwiperController() 39 private swiperControllerItem: SwiperController = new SwiperController()
39 @State swiperIndex: number = 0; 40 @State swiperIndex: number = 0;
40 - @Provide followStatus: string = '0' // 关注状态 41 + @Provide followStatus: string | undefined = undefined // 关注状态
41 private scroller: Scroller = new Scroller() 42 private scroller: Scroller = new Scroller()
42 @State netStatus: number | undefined = undefined // 存储网络状态用来展示缺省图 43 @State netStatus: number | undefined = undefined // 存储网络状态用来展示缺省图
  44 + @State showDownload: Boolean = false // 控制是否显示下载默认隐藏
43 45
44 //watch监听页码回调 46 //watch监听页码回调
45 onCurrentPageNumUpdated(): void { 47 onCurrentPageNumUpdated(): void {
@@ -146,8 +148,8 @@ export struct MultiPictureDetailPageComponent { @@ -146,8 +148,8 @@ export struct MultiPictureDetailPageComponent {
146 right: 0 148 right: 0
147 }) 149 })
148 150
149 - if (this.followStatus == '0') {  
150 - Row() { 151 + Row() {
  152 + if (this.followStatus == '0') {
151 Button({ type: ButtonType.Normal, stateEffect: true }) { 153 Button({ type: ButtonType.Normal, stateEffect: true }) {
152 Row() { 154 Row() {
153 Text('+关注').fontSize(12).fontColor(0xffffff) 155 Text('+关注').fontSize(12).fontColor(0xffffff)
@@ -160,15 +162,27 @@ export struct MultiPictureDetailPageComponent { @@ -160,15 +162,27 @@ export struct MultiPictureDetailPageComponent {
160 .onClick(() => { 162 .onClick(() => {
161 this.handleAccention() 163 this.handleAccention()
162 }) 164 })
  165 + } else {
  166 + Button({ type: ButtonType.Normal, stateEffect: true }) {
  167 + Row() {
  168 + Text('已关注').fontSize(12).fontColor(0xffffff)
  169 + }.alignItems(VerticalAlign.Center)
  170 + }
  171 + .borderRadius(4)
  172 + .backgroundColor('#B0B0B0')
  173 + .width(48)
  174 + .height(24)
163 } 175 }
164 - .justifyContent(FlexAlign.Center)  
165 - .alignItems(VerticalAlign.Center)  
166 - .width('21.6%')  
167 - .height('100%') 176 +
168 } 177 }
  178 + .justifyContent(FlexAlign.Center)
  179 + .alignItems(VerticalAlign.Center)
  180 + .width('21.6%')
  181 + .height('100%')
169 } 182 }
170 .width('100%') 183 .width('100%')
171 .height(44) 184 .height(44)
  185 + .zIndex(10)
172 .alignRules({ 186 .alignRules({
173 top: { anchor: "__container__", align: VerticalAlign.Top }, 187 top: { anchor: "__container__", align: VerticalAlign.Top },
174 middle: { anchor: "__container__", align: HorizontalAlign.Center } 188 middle: { anchor: "__container__", align: HorizontalAlign.Center }
@@ -195,7 +209,7 @@ export struct MultiPictureDetailPageComponent { @@ -195,7 +209,7 @@ export struct MultiPictureDetailPageComponent {
195 } 209 }
196 .index(this.swiperIndex) 210 .index(this.swiperIndex)
197 .width('100%') 211 .width('100%')
198 - .height(px2vp(this.picHeight) + 32) 212 + .height('100%')
199 .vertical(false) 213 .vertical(false)
200 .autoPlay(false) 214 .autoPlay(false)
201 .cachedCount(3) 215 .cachedCount(3)
@@ -207,77 +221,13 @@ export struct MultiPictureDetailPageComponent { @@ -207,77 +221,13 @@ export struct MultiPictureDetailPageComponent {
207 center: { anchor: "__container__", align: VerticalAlign.Center }, 221 center: { anchor: "__container__", align: VerticalAlign.Center },
208 middle: { anchor: "__container__", align: HorizontalAlign.Center } 222 middle: { anchor: "__container__", align: HorizontalAlign.Center }
209 }) 223 })
  224 + .zIndex(1)
210 .onChange((index: number) => { 225 .onChange((index: number) => {
211 this.swiperIndex = index 226 this.swiperIndex = index
212 }) 227 })
213 -  
214 - Row() {  
215 - Scroll(this.scroller) {  
216 - Row() {  
217 - Flex({  
218 - direction: FlexDirection.Column,  
219 - justifyContent: FlexAlign.Start  
220 - }) {  
221 - Text() {  
222 - Span(`${this.swiperIndex + 1}`)  
223 - .fontSize(24)  
224 - .fontFamily('PingFang SC-Medium')  
225 - .fontWeight(500)  
226 - .lineHeight(28)  
227 - Span(`/${this.contentDetailData.photoList.length}`)  
228 - .fontSize(14)  
229 - .fontFamily('PingFang SC-Medium')  
230 - .fontWeight(500)  
231 - .lineHeight(19)  
232 - }.fontColor(Color.White).margin(4)  
233 -  
234 - Text(`${this.contentDetailData.newsTitle}`)  
235 - .fontColor(Color.White)  
236 - .fontSize(16)  
237 - .fontFamily('PingFang SC-Semibold')  
238 - .fontWeight(600)  
239 - .lineHeight(24)  
240 - .margin({  
241 - top: 4,  
242 - left: 0,  
243 - bottom: 4,  
244 - right: 0  
245 - })  
246 - Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)  
247 - .fontColor(Color.White)  
248 - .fontSize(14)  
249 - .fontFamily('PingFang SC-Regular')  
250 - .fontWeight(400)  
251 - .lineHeight(22)  
252 - .textOverflow({ overflow: TextOverflow.Ellipsis })  
253 - .margin({  
254 - top: 4,  
255 - left: 0,  
256 - bottom: 4,  
257 - right: 18  
258 - })  
259 - .maxLines(16)  
260 - }  
261 - }  
262 - .width('100%')  
263 - .margin({  
264 - top: 8,  
265 - left: 18,  
266 - bottom: 24,  
267 - right: 18  
268 - })  
269 - }  
270 - .scrollable(ScrollDirection.Vertical)  
271 - .scrollBarWidth(0)  
272 - .height(px2vp(this.titleHeight))  
273 - }  
274 - .id('e_swiper_titles')  
275 - .alignRules({  
276 - bottom: { anchor: "__container__", align: VerticalAlign.Bottom },  
277 - middle: { anchor: "__container__", align: HorizontalAlign.Center } 228 + .onClick(() => {
  229 + this.showDownload = !this.showDownload
278 }) 230 })
279 - .height(px2vp(this.titleHeight) + 64)  
280 -  
281 } 231 }
282 if (this.netStatus !== undefined) { 232 if (this.netStatus !== undefined) {
283 EmptyComponent({ 233 EmptyComponent({
@@ -291,23 +241,113 @@ export struct MultiPictureDetailPageComponent { @@ -291,23 +241,113 @@ export struct MultiPictureDetailPageComponent {
291 middle: { anchor: "__container__", align: HorizontalAlign.Center } 241 middle: { anchor: "__container__", align: HorizontalAlign.Center }
292 }) 242 })
293 } 243 }
294 - OperRowListView({  
295 - contentDetailData: this.contentDetailData, 244 + Column(){
  245 + Column(){
  246 + Row() {
  247 + Scroll(this.scroller) {
  248 + Row() {
  249 + Flex({
  250 + direction: FlexDirection.Column,
  251 + justifyContent: FlexAlign.Start
  252 + }) {
  253 + Text() {
  254 + Span(`${this.swiperIndex + 1}`)
  255 + .fontSize(24)
  256 + .fontFamily('PingFang SC-Medium')
  257 + .fontWeight(500)
  258 + .lineHeight(28)
  259 + Span(`/${this.contentDetailData?.photoList?.length}`)
  260 + .fontSize(14)
  261 + .fontFamily('PingFang SC-Medium')
  262 + .fontWeight(500)
  263 + .lineHeight(19)
  264 + }
  265 + .fontColor(Color.White)
  266 + .margin(4)
  267 +
  268 + Text(`${this.contentDetailData.newsTitle}`)
  269 + .fontColor(Color.White)
  270 + .fontSize(16)
  271 + .fontFamily('PingFang SC-Semibold')
  272 + .fontWeight(600)
  273 + .lineHeight(24)
  274 + .margin({
  275 + top: 4,
  276 + left: 0,
  277 + bottom: 4,
  278 + right: 0
  279 + })
  280 + Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)
  281 + .fontColor(Color.White)
  282 + .fontSize(14)
  283 + .fontFamily('PingFang SC-Regular')
  284 + .fontWeight(400)
  285 + .lineHeight(22)
  286 + .textOverflow({ overflow: TextOverflow.Ellipsis })
  287 + .margin({
  288 + top: 4,
  289 + left: 0,
  290 + bottom: 4,
  291 + right: 18
  292 + })
  293 + .maxLines(16)
  294 + }
  295 + }
  296 + .width('100%')
  297 + }
  298 + .scrollable(ScrollDirection.Vertical)
  299 + .scrollBarWidth(0)
  300 + .height(px2vp(this.titleHeight))
  301 + .align(Alignment.Bottom)
  302 + }
  303 + OperRowListView({
  304 + contentDetailData: this.contentDetailData,
  305 + })
  306 + .width('100%')
  307 + .height(56)
  308 + .border({ width: { top: 0.5 }, color: '#FFFFFF' })
  309 + }
  310 + .visibility(!this.showDownload ? Visibility.Visible : Visibility.None)
  311 + Column(){
  312 + Row() {
  313 + Flex({
  314 + direction: FlexDirection.Row,
  315 + justifyContent: FlexAlign.SpaceBetween
  316 + }) {
  317 + Text() {
  318 + Span(`${this.swiperIndex + 1}`)
  319 + .fontSize(24)
  320 + .fontFamily('PingFang SC-Medium')
  321 + .fontWeight(500)
  322 + .lineHeight(28)
  323 + Span(`/${this.contentDetailData?.photoList?.length}`)
  324 + .fontSize(14)
  325 + .fontFamily('PingFang SC-Medium')
  326 + .fontWeight(500)
  327 + .lineHeight(19)
  328 + }
  329 + .fontColor(Color.White)
  330 + .margin(4)
  331 +
  332 + ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })
  333 + .margin({
  334 + top: 8,
  335 + left: 18,
  336 + bottom: 24,
  337 + right: 18
  338 + })
  339 + }
  340 + }
  341 + .width('100%')
  342 + }
  343 + .visibility(this.showDownload ? Visibility.Visible : Visibility.None)
  344 + }
  345 + .zIndex(10)
  346 + .id('e_swiper_bottom')
  347 + .alignRules({
  348 + bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
  349 + middle: { anchor: "__container__", align: HorizontalAlign.Center }
296 }) 350 })
297 - .alignRules({  
298 - bottom: { anchor: "__container__", align: VerticalAlign.Bottom },  
299 - middle: { anchor: "__container__", align: HorizontalAlign.Center }  
300 - })  
301 - .width('100%')  
302 - .height(56)  
303 - .margin({  
304 - top: 16,  
305 - left: 16,  
306 - right: 16,  
307 - bottom: 0  
308 - })  
309 - .border({ width: { top: 0.5 }, color: '#FFFFFF' })  
310 - .id('e_oper_row')  
311 } 351 }
312 352
313 getContentDetailData() { 353 getContentDetailData() {