developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
zhaojunkai
a78525d6 1 parent 33432bdd

更改

Inline Side-by-side
Showing 6 changed files with 289 additions and 283 deletions
@@ -5,13 +5,13 @@ @@ -5,13 +5,13 @@
5 "name": "default", 5 "name": "default",
6 "type": "HarmonyOS", 6 "type": "HarmonyOS",
7 "material": { 7 "material": {
8 - "certpath": "/Users/jrl/.ohos/config/auto_debug_sight_harmony_com.wondertek.sight_2850086000431478878.cer",  
9 - "storePassword": "0000001B1B59DAB22B389A8BCD25A2C43C89DE581FD6AC3EEE1D3FC227D46727A7763AAE553A50B5E81310", 8 + "certpath": "C:\\Users\\pc\\.ohos\\config\\default_sight_harmony_l75MehGV9G3TUayEtL68-EIWqyYDqfVXfu9D-DPJ7I0=.cer",
  9 + "storePassword": "0000001AB256FAF47AA4D68E4841C95D357490DE9FBB26A3A9161AD3069E31B3623E25CB49409CCA9CF7",
10 "keyAlias": "debugKey", 10 "keyAlias": "debugKey",
11 - "keyPassword": "0000001B2B0EDD642E43906A1B9A6B72A79F40316E908829B79DD96467FE5C3A8D1DF9E40957DA733DF77F",  
12 - "profile": "/Users/jrl/.ohos/config/auto_debug_sight_harmony_com.wondertek.sight_2850086000431478878.p7b", 11 + "keyPassword": "0000001AFB06818C2BC8DC275326668AAC62B91EBF7D3F84E8BE0F156D02623AA0F4F8C6B73F362CB371",
  12 + "profile": "C:\\Users\\pc\\.ohos\\config\\default_sight_harmony_l75MehGV9G3TUayEtL68-EIWqyYDqfVXfu9D-DPJ7I0=.p7b",
13 "signAlg": "SHA256withECDSA", 13 "signAlg": "SHA256withECDSA",
14 - "storeFile": "/Users/jrl/.ohos/config/auto_debug_sight_harmony_com.wondertek.sight_2850086000431478878.p12" 14 + "storeFile": "C:\\Users\\pc\\.ohos\\config\\default_sight_harmony_l75MehGV9G3TUayEtL68-EIWqyYDqfVXfu9D-DPJ7I0=.p12"
15 } 15 }
16 } 16 }
17 ], 17 ],
@@ -53,3 +53,5 @@ export { HeadPictureCardComponent } from "./src/main/ets/components/view/HeadPic @@ -53,3 +53,5 @@ export { HeadPictureCardComponent } from "./src/main/ets/components/view/HeadPic
53 export { ZhGridLayoutComponent } from "./src/main/ets/components/view/ZhGridLayoutComponent" 53 export { ZhGridLayoutComponent } from "./src/main/ets/components/view/ZhGridLayoutComponent"
54 54
55 export { MultiPictureDetailPageComponent } from "./src/main/ets/components/MultiPictureDetailPageComponent" 55 export { MultiPictureDetailPageComponent } from "./src/main/ets/components/MultiPictureDetailPageComponent"
  56 +
  57 +export { AudioDetailComponent } from "./src/main/ets/components/AudioDetailComponent"
  1 +import { Logger } from 'wdKit';
  2 +import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
  3 +import { ContentDetailDTO, PhotoListBean } from 'wdBean';
  4 +import media from '@ohos.multimedia.media';
  5 +import { OperRowListView } from './view/OperRowListView';
  6 +const TAG = 'AudioDetailComponent'
  7 +@Component
  8 +export struct AudioDetailComponent {
  9 + private relId: string = ''
  10 + private contentId: string = ''
  11 + private relType: string = ''
  12 + // private avPlayer:media.AVPlayer
  13 +
  14 + @State contentDetailData: ContentDetailDTO[] = [] as ContentDetailDTO[]
  15 + @State iocClock: string = '定时';
  16 + @State iconTheOriginal: string = '原文';
  17 + @State iconList: string = '列表';
  18 + @State text: string = ''
  19 + @State coverImage:string = 'app.media.audio'
  20 + @State newsTitle:string = '夜读'
  21 +
  22 + @State palyIcon:string = "app.media.playicon"
  23 +
  24 + @State showList: boolean = false
  25 + @State outSetValueOne:number = 40
  26 + //
  27 + // @State @Watch('onIsPlayChanged')isPlay: boolean = false
  28 + // onIsPlayChanged(){
  29 + // if(this.isPlay){
  30 + // this.avPlayer.play()
  31 + // this.palyIcon = "app.media.suspend"
  32 + // }else{
  33 + // this.avPlayer.pause()
  34 + // this.palyIcon = "app.media.playicon"
  35 + // }
  36 + // }
  37 + //
  38 + async aboutToAppear() {
  39 + this.getContentDetailData()
  40 + // // 创建avPlayer实例对象
  41 + // this.avPlayer = await media.createAVPlayer()
  42 + // // 创建状态机变化回调函数
  43 + // this.setAVPlayerCallback()
  44 + }
  45 + //
  46 + // // 注册avplayer回调函数
  47 + // setAVPlayerCallback() {
  48 + // // seek操作结果回调函数
  49 + // this.avPlayer.on('seekDone', (seekDoneTime) => {
  50 + // console.info(`AVPlayer seek succeeded, seek time is ${seekDoneTime}`);
  51 + // })
  52 + // // error回调监听函数,当avPlayer在操作过程中出现错误时调用reset接口触发重置流程
  53 + // this.avPlayer.on('error', (err) => {
  54 + // console.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`);
  55 + // this.avPlayer.reset(); // 调用reset重置资源，触发idle状态
  56 + // })
  57 + // // 状态机变化回调函数
  58 + // this.avPlayer.on('stateChange', async (state, reason) => {
  59 + // switch (state) {
  60 + // case 'idle': // 成功调用reset接口后触发该状态机上报
  61 + // console.info('AVPlayer state idle called.');
  62 + // this.avPlayer.release(); // 调用release接口销毁实例对象
  63 + // this.isPlay = false
  64 + // break;
  65 + // case 'initialized': // avplayer 设置播放源后触发该状态上报
  66 + // console.info('AVPlayerstate initialized called.');
  67 + // this.avPlayer.prepare().then(() => {
  68 + // console.info('AVPlayer prepare succeeded.');
  69 + // })
  70 + // this.isPlay = false
  71 + // break;
  72 + // case 'prepared': // prepare调用成功后上报该状态机
  73 + // console.info('AVPlayer state prepared called.');
  74 + // this.isPlay = false
  75 + // this.avPlayer.play(); // 调用播放接口开始播放
  76 + // break;
  77 + // case 'playing': // play成功调用后触发该状态机上报
  78 + // console.info('AVPlayer state playing called.');
  79 + // this.isPlay = true
  80 + // break;
  81 + // case 'paused': // pause成功调用后触发该状态机上报
  82 + // console.info('AVPlayer state paused called.');
  83 + // this.avPlayer.play(); // 再次播放接口开始播放
  84 + // this.isPlay = false
  85 + // break;
  86 + // case 'completed': // 播放结束后触发该状态机上报
  87 + // console.info('AVPlayer state completed called.');
  88 + // this.avPlayer.stop(); //调用播放结束接口
  89 + // break;
  90 + // case 'stopped': // stop接口成功调用后触发该状态机上报
  91 + // console.info('AVPlayer state stopped called.');
  92 + // this.avPlayer.reset(); // 调用reset接口初始化avplayer状态
  93 + // this.isPlay = false
  94 + // break;
  95 + // case 'released':
  96 + // console.info('AVPlayer state released called.');
  97 + // break;
  98 + // default:
  99 + // console.info('AVPlayer state unknown called.');
  100 + // break;
  101 + // }
  102 + // })
  103 + // }
  104 + // gotoPlay(){
  105 + // this.avPlayer.url = this.contentDetailData[0].audioList[0].audioUrl
  106 + // }
  107 + build() {
  108 + Row() {
  109 + Column() {
  110 + // 封面
  111 + Row() {
  112 + Image($r('app.media.audio'))
  113 + .width(240)
  114 + .height(160)
  115 + .borderRadius('0')
  116 + }
  117 + .justifyContent(FlexAlign.Center)
  118 + .width('100%')
  119 + .margin({ top: 64 })
  120 + // 标题
  121 + Row() {
  122 + Text(this.newsTitle)
  123 + .fontSize(20)
  124 + .fontWeight(FontWeight.Bold)
  125 + .fontColor('#ffffff')
  126 + .textAlign(TextAlign.Center)
  127 + .lineHeight(28)
  128 + .fontFamily('PingFang SC, PingFang SC')
  129 + }
  130 + .padding({ left: 34, right: 34 })
  131 + .margin({ top: 32 })
  132 +
  133 + // 操作矩阵
  134 + Row() {
  135 + // 定时
  136 + Column() {
  137 + Image($r('app.media.clock'))
  138 + .width(28)
  139 + .height(28)
  140 + Text(this.iocClock)
  141 + .fontColor('#fff')
  142 + .fontSize(12)
  143 + .lineHeight(16)
  144 + .margin(2)
  145 + }
  146 +
  147 + // 原文
  148 + Column() {
  149 + Image($r('app.media.theOriginal'))
  150 + .width(28)
  151 + .height(28)
  152 + Text(this.iconTheOriginal)
  153 + .fontColor('#fff')
  154 + .fontSize(12)
  155 + .lineHeight(16)
  156 + .margin(2)
  157 + }
  158 +
  159 + // 列表
  160 + Column() {
  161 + Image($r('app.media.list'))
  162 + .width(28)
  163 + .height(28)
  164 + Text(this.iconList)
  165 + .fontColor('#fff')
  166 + .fontSize(12)
  167 + .lineHeight(16)
  168 + .margin(2)
  169 + }
  170 + .onClick(() => {
  171 + this.showList = !this.showList
  172 + Logger.info(TAG,'这里')
  173 + console.log('列表', this.showList)
  174 + })
  175 + }
  176 + .width('100%')
  177 + .padding({ left: 49, right: 49 })
  178 + .justifyContent(FlexAlign.SpaceBetween)
  179 + .margin({ top: 60 })
  180 +
  181 + Column(){
  182 + // 进度条
  183 + Row(){
  184 + Slider({
  185 + value: this.outSetValueOne,
  186 + min: 0,
  187 + max: 100,
  188 + style: SliderStyle.OutSet
  189 + })
  190 + .trackColor('rgba(0,0,0,0.5)')
  191 + .selectedColor('#ED2800')
  192 + .showTips(true)
  193 + .onChange((value: number, mode: SliderChangeMode) => {
  194 + this.outSetValueOne = value
  195 + console.info('value:' + value + 'mode:' + mode.toString())
  196 + })
  197 + }
  198 + .width('100%')
  199 + .padding({left:24,right:24})
  200 + .margin({top:110})
  201 + // 播放按钮
  202 + Row(){
  203 + Image($r('app.media.loop'))
  204 + .width(24)
  205 + .height(24)
  206 + Image($r('app.media.Backward'))
  207 + .width(24)
  208 + .height(24)
  209 + Stack(){
  210 + Image($r('app.media.playicon'))
  211 + .width(32)
  212 + .height(32)
  213 +
  214 + }
  215 + .backgroundColor('rgba(255,255,255,0.1)')
  216 + .width(60)
  217 + .height(60)
  218 + .borderRadius(50)
  219 + .alignContent(Alignment.Center)
  220 + .onClick(()=>{
  221 + // this.gotoPlay()
  222 + console.log('播放')
  223 + this.getContentDetailData()
  224 + })
  225 +
  226 + Image($r('app.media.fastForward'))
  227 + .width(24)
  228 + .height(24)
  229 + Image($r('app.media.doubleSpeed'))
  230 + .width(24)
  231 + .height(24)
  232 + }
  233 + .width('100%')
  234 + .justifyContent(FlexAlign.SpaceBetween)
  235 + .margin({top:56})
  236 + .padding({left:32,right:32})
  237 + }
  238 + // OperRowListView()
  239 + }
  240 + }
  241 +
  242 + }
  243 +
  244 + private async getContentDetailData() {
  245 + try {
  246 + let data = await MultiPictureDetailViewModel.getDetailData(this.relId, this.contentId, this.relType)
  247 + this.contentDetailData = data;
  248 + this.coverImage = this.contentDetailData[0].audioList[0].fullColumnImgUrls[0].url
  249 + this.newsTitle = this.contentDetailData[0].newsTitle
  250 + Logger.info(TAG, `contentDetailData：${JSON.stringify(this.contentDetailData)}`)
  251 + console.log(JSON.stringify(this.contentDetailData))
  252 + console.log(this.newsTitle)
  253 + console.log(this.coverImage)
  254 +
  255 + } catch (exception) {
  256 +
  257 + }
  258 + }
  259 +}
1 -@Component  
2 -export struct AVPlayer {  
3 - @State outSetValueOne:number = 40  
4 -  
5 - build() {  
6 - Column(){  
7 - // 进度条  
8 - Row(){  
9 - Slider({  
10 - value: this.outSetValueOne,  
11 - min: 0,  
12 - max: 100,  
13 - style: SliderStyle.OutSet  
14 - })  
15 - .trackColor('rgba(0,0,0,0.5)')  
16 - .selectedColor('#ED2800')  
17 - .showTips(true)  
18 - .onChange((value: number, mode: SliderChangeMode) => {  
19 - this.outSetValueOne = value  
20 - console.info('value:' + value + 'mode:' + mode.toString())  
21 - })  
22 - }  
23 - .width('100%')  
24 - .padding({left:24,right:24})  
25 - .margin({top:110})  
26 - // 播放按钮  
27 - Row(){  
28 - Image($r('app.media.loop'))  
29 - .width(24)  
30 - .height(24)  
31 - Image($r('app.media.Backward'))  
32 - .width(24)  
33 - .height(24)  
34 - Stack(){  
35 - Image($r("app.media.playicon"))  
36 - .width(32)  
37 - .height(32)  
38 - }  
39 - .backgroundColor('rgba(255,255,255,0.1)')  
40 - .width(60)  
41 - .height(60)  
42 - .padding(14)  
43 - .borderRadius(50)  
44 - .onClick(()=>{  
45 - // this.avPlayerUrl()  
46 - })  
47 -  
48 - Image($r('app.media.fastForward'))  
49 - .width(24)  
50 - .height(24)  
51 - Image($r('app.media.doubleSpeed'))  
52 - .width(24)  
53 - .height(24)  
54 - }  
55 - .width('100%')  
56 - .justifyContent(FlexAlign.SpaceBetween)  
57 - .margin({top:56})  
58 - .padding({left:32,right:32})  
59 - }  
60 -  
61 - }  
62 -}  
1 -import media from '@ohos.multimedia.media';  
2 -import { Song } from '../viewModel/Song'  
3 -import { AVPlayer } from '../../components/AVPlayer'  
4 - 1 +import { Logger } from 'wdKit';
  2 +import { AudioDetailComponent } from 'wdComponent';
  3 +import router from '@ohos.router';
  4 +import { Params, Action } from 'wdBean';
  5 +const TAG = 'AudioDetail';
5 @Entry 6 @Entry
6 @Component 7 @Component
7 struct AudioDetail { 8 struct AudioDetail {
8 - @State message: string = '大自然的奇迹展览在中国国家博物馆拉开帷幕';  
9 - @State iocClock: string = '定时';  
10 - @State iconTheOriginal: string = '原文';  
11 - @State iconList: string = '列表';  
12 - @State text: string = ''  
13 - @State showList: boolean = false  
14 - controller: TextInputController = new TextInputController()  
15 - // 音频  
16 - @State songs: Song[] = []  
17 -  
18 - // private avPlayer:media.AVPlayer  
19 -  
20 - async aboutToAppear() {  
21 - //加载音乐列表  
22 - // let response = await axios({  
23 - // method:'get',  
24 - // url:''  
25 - // })  
26 - // //创建avPlayer实例对象  
27 - // this.avPlayer = await media.createAVPlayer()  
28 - // //创建状态机变化回调函数  
29 - // this.setAVPlayerCallback()  
30 - // // this.avPlayer.url =  
31 - }  
32 9
33 - // 注册avplayer回调函数  
34 - // setAVPlayerCallback() {  
35 - // // seek操作结果回调函数  
36 - // this.avPlayer.on('seekDone', (seekDoneTime) => {  
37 - // console.info(`AVPlayer seek succeeded, seek time is ${seekDoneTime}`);  
38 - // })  
39 - // // error回调监听函数,当avPlayer在操作过程中出现错误时调用reset接口触发重置流程  
40 - // this.avPlayer.on('error', (err) => {  
41 - // console.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`);  
42 - // this.avPlayer.reset(); // 调用reset重置资源，触发idle状态  
43 - // })  
44 - // // 状态机变化回调函数  
45 - // this.avPlayer.on('stateChange', async (state, reason) => {  
46 - // switch (state) {  
47 - // case 'idle': // 成功调用reset接口后触发该状态机上报  
48 - // console.info('AVPlayer state idle called.');  
49 - // this.avPlayer.release(); // 调用release接口销毁实例对象  
50 - // break;  
51 - // case 'initialized': // avplayer 设置播放源后触发该状态上报  
52 - // console.info('AVPlayerstate initialized called.');  
53 - // this.avPlayer.prepare().then(() => {  
54 - // console.info('AVPlayer prepare succeeded.');  
55 - // })  
56 - // break;  
57 - // case 'prepared': // prepare调用成功后上报该状态机  
58 - // console.info('AVPlayer state prepared called.');  
59 - // this.avPlayer.play(); // 调用播放接口开始播放  
60 - // break;  
61 - // case 'playing': // play成功调用后触发该状态机上报  
62 - // console.info('AVPlayer state playing called.');  
63 - // break;  
64 - // case 'paused': // pause成功调用后触发该状态机上报  
65 - // console.info('AVPlayer state paused called.');  
66 - // this.avPlayer.play(); // 再次播放接口开始播放  
67 - // break;  
68 - // case 'completed': // 播放结束后触发该状态机上报  
69 - // console.info('AVPlayer state completed called.');  
70 - // this.avPlayer.stop(); //调用播放结束接口  
71 - // break;  
72 - // case 'stopped': // stop接口成功调用后触发该状态机上报  
73 - // console.info('AVPlayer state stopped called.');  
74 - // this.avPlayer.reset(); // 调用reset接口初始化avplayer状态  
75 - // break;  
76 - // case 'released':  
77 - // console.info('AVPlayer state released called.');  
78 - // break;  
79 - // default:  
80 - // console.info('AVPlayer state unknown called.');  
81 - // break;  
82 - // }  
83 - // })  
84 - // } 10 + @State relId: string = ''
  11 + @State contentId: string = ''
  12 + @State relType: string = ''
85 13
86 build() { 14 build() {
87 Column() { 15 Column() {
88 - Row() {  
89 - Column() {  
90 - // 封面  
91 - Row() {  
92 - Image($r('app.media.audio'))  
93 - .width(240)  
94 - .height(160)  
95 - .borderRadius('0.00vp')  
96 - }  
97 - .justifyContent(FlexAlign.Center)  
98 - .width('100%')  
99 - .margin({ top: 64 })  
100 -  
101 - // 标题  
102 - Row() {  
103 - Text(this.message)  
104 - .fontSize(20)  
105 - .fontWeight(FontWeight.Bold)  
106 - .fontColor('#ffffff')  
107 - .textAlign(TextAlign.Center)  
108 - .lineHeight(28)  
109 - .fontFamily('PingFang SC, PingFang SC')  
110 - }  
111 - .padding({ left: 34, right: 34 })  
112 - .margin({ top: 32 })  
113 -  
114 - // 操作矩阵  
115 - Row() {  
116 - // 定时  
117 - Column() {  
118 - Image($r('app.media.clock'))  
119 - .width(28)  
120 - .height(28)  
121 - Text(this.iocClock)  
122 - .fontColor('#fff')  
123 - .fontSize(12)  
124 - .lineHeight(16)  
125 - .margin(2)  
126 - }  
127 -  
128 - // 原文  
129 - Column() {  
130 - Image($r('app.media.theOriginal'))  
131 - .width(28)  
132 - .height(28)  
133 - Text(this.iconTheOriginal)  
134 - .fontColor('#fff')  
135 - .fontSize(12)  
136 - .lineHeight(16)  
137 - .margin(2)  
138 - }  
139 -  
140 - // 列表  
141 - Column() {  
142 - Image($r('app.media.list'))  
143 - .width(28)  
144 - .height(28)  
145 - Text(this.iconList)  
146 - .fontColor('#fff')  
147 - .fontSize(12)  
148 - .lineHeight(16)  
149 - .margin(2)  
150 - }  
151 - .onClick(() => {  
152 - this.showList = !this.showList  
153 - console.log('列表', this.showList)  
154 - })  
155 - }  
156 - .width('100%')  
157 - .padding({ left: 49, right: 49 })  
158 - .justifyContent(FlexAlign.SpaceBetween)  
159 - .margin({ top: 60 })  
160 -  
161 - AVPlayer()  
162 - }  
163 - }  
164 - .height('100%-56')  
165 -  
166 - Row() {  
167 - Image($r('app.media.leftArrow'))  
168 - .width(24)  
169 - .height(24)  
170 - TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller })  
171 - .placeholderColor('#999999')  
172 - .placeholderFont({ size: 12, weight: 400 })  
173 - .caretColor(Color.White)  
174 - .height(30)  
175 - .width(115)  
176 - .fontSize(12)  
177 - .fontColor('#999999')  
178 - .backgroundColor('rgba(255,255,255,0.1)')  
179 - .borderRadius(0)  
180 - .backgroundColor('[UIColor colorWithRed:255/255.0 green:255/255.0 blue:255/255.0 alpha:1.0].CGColor')  
181 - .onChange((value: string) => {  
182 - this.text = value  
183 - })  
184 - // 消息  
185 - Badge({  
186 - count: 100,  
187 - style: { fontSize: 12, badgeColor: '#FA2A2D' },  
188 - }) {  
189 - Image($r('app.media.news'))  
190 - .width(24)  
191 - .height(24)  
192 - }  
193 -  
194 - // 点赞  
195 - Badge({  
196 - count: 100,  
197 - style: { fontSize: 12, badgeColor: '#FA2A2D' },  
198 - }) {  
199 - Image($r('app.media.like'))  
200 - .width(24)  
201 - .height(24)  
202 - }  
203 -  
204 - // 收藏  
205 - Image($r('app.media.collection'))  
206 - .width(24)  
207 - .height(24)  
208 - // 分享  
209 - Image($r('app.media.share'))  
210 - .width(24)  
211 - .height(24)  
212 - }  
213 - .height(56)  
214 - .width('100%')  
215 - .padding(13)  
216 - .justifyContent(FlexAlign.SpaceBetween)  
217 -  
218 - // 播放列表 16 + AudioDetailComponent({
  17 + relId: this.relId,
  18 + contentId: this.contentId,
  19 + relType: this.relType
  20 + })
219 } 21 }
220 .height('100%') 22 .height('100%')
  23 + .width('100%')
221 .backgroundColor('#20272E') 24 .backgroundColor('#20272E')
222 - .justifyContent(FlexAlign.SpaceBetween)  
223 - 25 + }
  26 + aboutToAppear() {
  27 + let par:Action = router.getParams() as Action;
  28 + let params = par?.params;
  29 + this.relId = params?.extra?.relId || '';
  30 + this.relType = params?.extra?.relType || '';
  31 + this.contentId = params?.contentID || '';
  32 + Logger.info(TAG, 'aboutToAppear');
  33 + Logger.info(TAG, 'params', JSON.stringify(params));
224 } 34 }
225 } 35 }