#HarmonyOS NEXT 体验官#电话拨打 原创

import promptAction from '@ohos.promptAction'
import router from '@ohos.router'
import call from '@ohos.telephony.call';
import observer from '@ohos.telephony.observer';
import { listData,dataType} from "../common/phoneNumData"

@Entry
@Component
struct contactsPage {
  @State listArr: dataType[] = listData //联系人数据
  @State isObserver: boolean = false // 是否拨打电话

  aboutToAppear(){

  }

  @Builder setMenu() {
    Menu() {
      MenuItem({ startIcon: $r("app.media.ic_public_delete"), content: "删除全部" })
        .onClick(()=>this.delListData())
    }
  }

  //删除全部电话数据
  delListData():void {
    promptAction.showDialog({
      message:"数据不可恢复，确认全部删除？",
      buttons:[
        {
          text:"否",
          color:"#191919"
        },
        {
          text:"是",
          color:"red"
        }
      ]
    }).then((idx)=>{
      if (idx.index == 1) {
        listData.length = 0
        this.listArr = []
        return
      }
      return
    })
  }

  //拨打电话
  callPhone(currentNum:string):void {
    let isP = call.hasVoiceCapability();
    console.log(`hasVoiceCapability: ${JSON.stringify(isP)}`);
    if (isP){
      this.isObserver = true
      call.makeCall(currentNum, err => {
        console.log(`makeCall callback: err->${JSON.stringify(err)}`);
      });
    }else {
      promptAction.showToast({
        message:"当前设备不支持通话"
      })
    }
  }

  //监听通话状态
  listenTel(){
    // 订阅通话业务状态变化
    if (this.isObserver) {
      observer.on("callStateChange", (data) => {
        if (data.state == 0||data.state == -1) {
          this.isObserver = false
          this.listenOff() //取消订阅状态
        }
        console.log("call state change, data is:" + JSON.stringify(data.state));
      });
    }
  }

  listenOff(){
    observer.off('callStateChange');
  }


  build() {
    Column() {
      Row() {
        Text(this.listArr.length.toString() + "个联系人").fontSize(20)
          .fontColor(0x0091FF)
          .height(26)
        Blank()
        Image($r('app.media.ic_public_add')).width(24).height(24)
          .margin({right:10})
          .onClick(() => {
            router.pushUrl({
              url: "viewPhone/addContactPage"
            })
          })

        Image($r('app.media.ic_public_more')).width(24).height(24)
          .bindMenu(this.setMenu)

      }.width("100%")
      .height(40)
      .padding({ left: 15, right: 10 })

      List() {
        if (this.listArr.length != 0) {
          ForEach(this.listArr, (item: dataType, index: number) => {
            ListItem() {
              Row() {
                Row(){
                  if (item.phoneName.length ==11) {
                    Image($r('app.media.ic_public_contacts_filled')).width(32).height(32)
                      .margin({ left: 15, right: 10 })
                  }else {
                    Column(){
                      Text(item.phoneName.charAt(0)).fontColor(0xffffff)
                    }.width(36).height(36)
                    .borderRadius(20)
                    .backgroundColor(0x999999)
                    .margin({ left: 15, right: 10 })
                    .justifyContent(FlexAlign.Center)
                  }

                  Text(item.phoneName)
                    .height(60).fontSize(20)
                    .textAlign(TextAlign.Center)
                }.width("74%")
                .stateStyles({
                  pressed: {.backgroundColor(0xdfdfdf)
                  },
                  normal: {.backgroundColor(0xFFFFFF)
                  }
                })
                Blank()
                Row(){
                  Text("|").height(30)
                    .fontSize(18)
                    .textAlign(TextAlign.Center)
                    .borderRadius(4)
                  Text("拨打").height(30)
                    .textAlign(TextAlign.Center)
                    .borderRadius(4)
                    .margin({  left: 5 })
                  Image($r('app.media.ic_contacts_set_aside_filled')).width(16).height(16)
                    .margin({  right: 15,left:4 })
                }
                .height(60)
                .justifyContent(FlexAlign.Center)
                .onClick(()=>this.callPhone(item.phoneNum))
                .stateStyles({
                  pressed: {.backgroundColor(0xdfdfdf)
                  },
                  normal: {.backgroundColor(0xFFFFFF)
                  }
                })

              }.width('100%')
              .backgroundColor(0xFFFFFF)
              .onClick(() => {
                router.pushUrl({
                  url:"viewPhone/contactDetailsPage",
                  params:{
                    phoneName:item.phoneName,
                    phoneNum:item.phoneNum,
                    notesInfo:item.notesInfo,
                    companyName:item.companyName,
                    idx:index
                  }
                })
              })
              // .gesture(
              //   LongPressGesture({repeat:false,fingers:1,duration:1000})
              //     .onAction(()=>{
              //       this.delMenu()
              //     })
              // )
            }
          }, (item:string) => item)

        }else {
          ListItem(){
            Column(){
              Text("暂无联系人").fontColor(24)
            }.width("100%")
            .height("50%")
            .justifyContent(FlexAlign.Center)
            .alignItems(HorizontalAlign.Center)
          }
        }
      }
      .padding({ top: 15 })
      .listDirection(Axis.Vertical) // 排列方向
      .divider({ strokeWidth: 2, color: 0xeeeeee, startMargin: 0, endMargin: 0 }) // 每行之间的分界线
      .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果
      .onScrollIndex((firstIndex: number, lastIndex: number) => {
        console.info('first' + firstIndex)
        console.info('last' + lastIndex)
      })
      .width('100%')

    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xeeeeee)
    .padding({ top: 5 })
  }
}

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.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.