import http from '@ohos.net.http';
import NewItem from '../Component/NewItem';
import New from '../pojo/New';
import router from '@ohos.router';

@Entry
@Component
struct NewsPage {
  @State news: New[] = []
  @State content: string = ''
  @State flag: boolean = false
  @State types: string[] = ['生活', '明星', 'NBA', '经济', '商业', '趣闻', '游戏', '文学', '专栏']
  token: string = 'PpDpYWLcFLBIwYgu'
  type: number = 1
  page: number = 1
  startIndex: number = 0
  endIndex: number = 0
  downY: number = 0

  // 获取新闻
  async getNews(type: number, page: number) {
    let httpRequest: http.HttpRequest = http.createHttp()
    httpRequest.request('https://v2.alapi.cn/api/new/toutiao', {
      method: http.RequestMethod.POST,
      extraData: `type=${type}&page=${page}&token=${this.token}`

    }).then((res: http.HttpResponse) => {
      let code: string = JSON.parse(`${res.result}`).code
      let msg: string = JSON.parse(`${res.result}`).msg
      if (code == '200') {
        let n: New[] = JSON.parse(`${res.result}`).data
        // if (type == this.type) {
        //   this.news.concat(n)
        // }
        this.news = n
        this.flag = true
        console.log(`[Response SUCCESS] => CODE: ${code} MSG: ${msg}`)
      } else {
        this.content = '<h1 style="text-align: center;">出错了, 找不到资源</h1>'
        this.flag = true
        console.error(`[Response ERROR] => CODE: ${code}  MSG: ${msg}`)
      }
    }).catch((err: Error) => {
      this.content = '<h1 style="text-align: center;">出错了, 找不到资源</h1>'
      this.flag = true
      console.error('[Response ERROR] => CODE: ' + JSON.stringify(err))
    })
  }

  // 下拉刷新 => 获取下一页数据
  refreshNews(event: TouchEvent, index: number) {

    const refreshY = vp2px(100)
    switch(event.type) {
      case TouchType.Down:
        this.downY = event.touches[0].y
        break
      case TouchType.Move:
        if (this.startIndex == 0) {
          let offsetY = event.touches[0].y - this.downY
          if (offsetY > refreshY) {
            this.flag = false
            this.page ++
            this.getNews(index +1, this.page)
          }
        }
        break
    }
  }

  aboutToAppear() {
    this.getNews(1, 1)
  }

  build() {
    Column() {
      Text('今日头条').font({size: 22, weight: FontWeight.Bold}).width(100)
      Tabs() {
        ForEach(this.types, (item: string, index: number) => {
          TabContent() {
            if (this.flag) {
              List() {
                ForEach(this.news, (item: New, index: number) => {
                  ListItem() {
                    NewItem({ new: item })
                  }
                  .margin({top: 5})
                  .onClick(() => {
                    console.log(`EVENT_CLICK ON ${index}`)
                    router.pushUrl({
                      url: 'pages/DetailsPage',
                      params: item
                    })
                  })
                })
              }
              .width('90%')
              .height('90%')
              .onScrollIndex((start, end) => {
                this.startIndex = start
                this.endIndex = end
              })
              .onTouch((event: TouchEvent) => {
                this.refreshNews(event, index)
              })
            } else {
              LoadingProgress().width(100)
            }
          }
          .tabBar(item)
        })
      }.onChange((index: number) => {
        this.flag = false
        this.page = 1
        this.type = index + 1
        this.getNews(index + 1, 1)
      })
    }
    .backgroundImage($r('app.media.background01'))
    .backgroundImageSize({width: '100%', height: '100%'})
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.

import New from '../pojo/New'

@Preview
@Component
export default struct NewItem {

  new: New = new New('', '', '', '', '', '', '', '', '')


  build() {
    Column() {
      Text(this.new.title)
        .font({size: 20})
        .fontColor('#ff050f6d')
        .maxLines(1)
        .textOverflow({overflow: TextOverflow.Ellipsis})
        .width('100%')
      Row({space: 2}) {
        Text(this.new.digest).maxLines(3).width('80%')
        Image(this.new.imgsrc)
          .width('20%')
          //.alt($r('app.media.icon'))
      }.width('100%').margin({top: 2})
      Row({space: 5}) {
        Text(this.new.source).fontSize(12).fontColor('#ffb7b4b4')
        Text(this.new.time).fontSize(12).fontColor('#ffb7b4b4')
      }.width('95%').justifyContent(FlexAlign.End)
      Divider()
        .strokeWidth(1)
        .lineCap(LineCapStyle.Round)
        .linearGradient({direction: GradientDirection.Right, colors: [['#fff89cff', 0], ['#fff4ff8a', 0.25], ['#ff13f8f1', 0.5], ['#ffff8849', 0.75], ['#ff18a1fd', 1]]})

    }.width('100%')
  }
}         
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

@Observed
export default class New {
  title: string
  type: string
  digest: string
  docid: string
  pc_url: string
  m_url: string
  imgsrc: string
  source: string
  time: string

  constructor(title: string, type: string, digest: string, docid: string, pc_url: string, m_url: string, imgsrc: string, source: string, time: string) {
    this.title = title
    this.type = type
    this.digest = digest
    this.docid = docid
    this.pc_url = pc_url
    this.m_url = m_url
    this.imgsrc = imgsrc
    this.source = source
    this.time = time
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.