developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
liyubing
e1c14eb6 1 parent fe57160c

feat：直播预告和直播列表，默认图

Inline Side-by-side
Showing 5 changed files with 129 additions and 81 deletions
import MinePageDatasModel from '../../../model/MinePageDatasModel'
import { onlyWifiLoadImg } from '../../../utils/lazyloadImg'
import { AppointmentOperationRequestItem } from '../../../viewmodel/AppointmentOperationRequestItem'
import { MineAppointmentItem } from '../../../viewmodel/MineAppointmentItem'
import { MyCustomDialog } from '../../reusable/MyCustomDialog'
@Component
export struct AppointmentListChildComponent{
export struct AppointmentListChildComponent {
@ObjectLink item: MineAppointmentItem
@State loadImg: boolean = false;
async aboutToAppear(): Promise<void> {
this.loadImg = await onlyWifiLoadImg();
}
dialogController: CustomDialogController = new CustomDialogController({
builder: MyCustomDialog({
cancel: this.onCancel,
... ... @@ -20,18 +27,20 @@ export struct AppointmentListChildComponent{
customStyle: true
})
build() {
Column(){
Stack(){
Image(this.item?.imageUrl[0])
Column() {
Stack() {
Image(this.loadImg ? this.item?.imageUrl[0] : '')
.backgroundColor(this.loadImg ? $r('app.color.color_B0B0B0') : 0xf5f5f5)
.width('100%')
.aspectRatio(16 / 9)
.objectFit(ImageFit.Auto)
.interpolation(ImageInterpolation.High)
if(this.item.relType === 1){
Row(){
Row(){
if (this.item.relType === 1) {
Row() {
Row() {
Image($r('app.media.reserve_icon'))
.width('42lpx')
.height('35lpx')
... ... @@ -47,7 +56,7 @@ export struct AppointmentListChildComponent{
.layoutWeight(1)
.textAlign(TextAlign.Center)
}.width('94lpx')
.margin({bottom:'15lpx',right:'15lpx'})
.margin({ bottom: '15lpx', right: '15lpx' })
}.width('100%')
.height('100%')
.alignItems(VerticalAlign.Bottom)
... ... @@ -56,7 +65,7 @@ export struct AppointmentListChildComponent{
}.width('100%')
.height('376lpx')
Column(){
Column() {
Text(this.item.title)
.fontWeight('400lpx')
.fontSize('33lpx')
... ... @@ -64,28 +73,28 @@ export struct AppointmentListChildComponent{
.lineHeight('48lpx')
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.margin({bottom:'23lpx'})
.margin({ bottom: '23lpx' })
.textAlign(TextAlign.Start)
.width('100%')
Row(){
Row(){
if(this.item.relType === 2){
Row() {
Row() {
if (this.item.relType === 2) {
Image($r('app.media.play_status_history_icon'))
.objectFit(ImageFit.Auto)
.interpolation(ImageInterpolation.High)
.width('38lpx')
.height('38lpx')
.margin({right:'12lpx'})
.margin({ right: '12lpx' })
Text('已结束').fontColor($r('app.color.color_999999'))
.fontWeight('500lpx')
.fontSize('23lpx')
}else {
} else {
Image($r('app.media.play_status_icon'))
.objectFit(ImageFit.Auto)
.interpolation(ImageInterpolation.High)
.width('38lpx')
.height('38lpx')
.margin({right:'12lpx'})
.margin({ right: '12lpx' })
Text(this.item.timePre).fontColor($r('app.color.color_ED2800'))
.fontWeight('500lpx')
.fontSize('23lpx')
... ... @@ -94,35 +103,37 @@ export struct AppointmentListChildComponent{
.interpolation(ImageInterpolation.High)
.width('12lpx')
.height('31lpx')
.margin({right:'4lpx'})
.margin({ right: '4lpx' })
Text(`${this.item.timeBack}开始`).fontColor($r('app.color.color_ED2800'))
.fontWeight('500lpx')
.fontSize('23lpx')
.lineHeight('31lpx')
}
}.padding({left:'19lpx',right:'19lpx'})
}
.padding({ left: '19lpx', right: '19lpx' })
.height('46lpx')
.alignItems(VerticalAlign.Center)
.backgroundColor($r('app.color.color_F5F5F5'))
.borderRadius('4lpx')
Blank()
.layoutWeight(1)
if(this.item.relType === 1){
Text(this.item.isAppointment?"已预约":"预约")
.fontWeight(400)
.fontSize('23lpx')
.backgroundColor(this.item.isAppointment?$r('app.color.color_F5F5F5'):$r('app.color.color_ED2800'))
.fontColor(this.item.isAppointment?$r('app.color.color_CCCCCC'):$r('app.color.white'))
.lineHeight('31lpx')
.textAlign(TextAlign.Center)
.width('100lpx')
.height('46lpx')
.borderRadius('6lpx')
.onClick(()=>{
this.dialogController.open()
})
}else {
Text(this.item.relType === 2?"去观看":"看回放")
.layoutWeight(1)
if (this.item.relType === 1) {
Text(this.item.isAppointment ? "已预约" : "预约")
.fontWeight(400)
.fontSize('23lpx')
.backgroundColor(this.item.isAppointment ? $r('app.color.color_F5F5F5') : $r('app.color.color_ED2800'))
.fontColor(this.item.isAppointment ? $r('app.color.color_CCCCCC') : $r('app.color.white'))
.lineHeight('31lpx')
.textAlign(TextAlign.Center)
.width('100lpx')
.height('46lpx')
.borderRadius('6lpx')
.onClick(() => {
this.dialogController.open()
})
} else {
Text(this.item.relType === 2 ? "去观看" : "看回放")
.fontWeight(400)
.fontSize('23lpx')
.backgroundColor($r('app.color.color_ED2800'))
... ... @@ -135,7 +146,12 @@ export struct AppointmentListChildComponent{
}
}
}
.padding({left:'23lpx',right:'23lpx',top:'15lpx',bottom:'23lpx'})
.padding({
left: '23lpx',
right: '23lpx',
top: '15lpx',
bottom: '23lpx'
})
}.margin({ left: 10, right: 10 })
.backgroundColor($r('app.color.white'))
.borderRadius('8lpx')
... ... @@ -145,20 +161,19 @@ export struct AppointmentListChildComponent{
console.info('Callback when the first button is clicked')
}
onAccept(){
onAccept() {
console.info('Callback when the second button is clicked')
this.appointmentOperation()
}
appointmentOperation(){
let item = new AppointmentOperationRequestItem(this.item.relId,this.item.liveId+"",!this.item.isAppointment)
MinePageDatasModel.getAppointmentOperation(item,getContext(this)).then((value)=>{
if(value!=null){
appointmentOperation() {
let item = new AppointmentOperationRequestItem(this.item.relId, this.item.liveId + "", !this.item.isAppointment)
MinePageDatasModel.getAppointmentOperation(item, getContext(this)).then((value) => {
if (value != null) {
if (value.code === 0 || value.code.toString() === "0") {
this.item.isAppointment = !this.item.isAppointment
}
}
})
}
}
\ No newline at end of file
... ...
... ... @@ -12,6 +12,7 @@ import LoadMoreLayout from '../page/LoadMoreLayout';
import { LottieView } from '../../components/lottie/LottieView';
import dataPreferences from '@ohos.data.preferences';
import { BusinessError } from '@ohos.base';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
const TAG: string = 'LiveMorePage';
... ... @@ -45,8 +46,12 @@ struct LiveMorePage {
// 点击过的数据
@State clickDatas: Array<string> = []
async aboutToAppear() {
@State loadImg: boolean = false;
async aboutToAppear() : Promise<void>{
await this.getPreferencesFromStorage()
this.loadImg = await onlyWifiLoadImg();
this.getLivMoreClickPreference()
Logger.debug(TAG, '数据：' + JSON.stringify(this.clickDatas))
this.currentPage = 1
... ... @@ -155,9 +160,10 @@ struct LiveMorePage {
.fontColor(this.isClicked(item.objectId) ? $r('app.color.color_848484') : $r('app.color.color_222222'))
Stack() {
if (item.fullColumnImgUrls && item.fullColumnImgUrls.length > 0) {
Image(item.fullColumnImgUrls[0].url)
Image(this.loadImg?item.fullColumnImgUrls[0].url:'')
.backgroundColor(this.loadImg ? $r('app.color.color_B0B0B0') : 0xf5f5f5)
.width('100%')
.height(196)
.aspectRatio(16 / 9)
.borderRadius(4)
}
this.LiveImage(item)
... ...
import { ContentDTO, ReserveBean, ReserveItemBean } from 'wdBean/Index';
import { ProcessUtils } from 'wdRouter/Index';
import PageViewModel from '../../viewmodel/PageViewModel';
import { Logger, EmitterEventId, EmitterUtils, ToastUtils } from 'wdKit/Index';
import { Logger, EmitterEventId, EmitterUtils, ToastUtils } from 'wdKit/Index';
import { router } from '@kit.ArkUI';
import { LiveModel } from '../../viewmodel/LiveModel';
import { ViewType } from 'wdConstant/src/main/ets/enum/ViewType';
... ... @@ -9,10 +9,11 @@ import { EmptyComponent } from '../view/EmptyComponent';
import { ErrorComponent } from '../view/ErrorComponent';
import { CustomPullToRefresh } from '../reusable/CustomPullToRefresh';
import { PeopleShipNoMoreData } from '../reusable/PeopleShipNoMoreData';
import { HttpUtils } from 'wdNetwork/Index';
import { HttpUtils } from 'wdNetwork/Index';
import { WDRouterPage, WDRouterRule } from 'wdRouter'
import { LazyDataSource } from 'wdKit/Index';
import { LazyDataSource } from 'wdKit/Index';
import LoadMoreLayout from '../page/LoadMoreLayout'
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
const TAG: string = 'ReserveMorePage';
... ... @@ -43,11 +44,12 @@ struct ReserveMorePage {
private scroller: Scroller = new Scroller()
@State reservedIds: string[] = []
@State isShow: boolean = false
@State private liveId: string = ''
@State private liveId: string = ''
@State isLoadingAttention: boolean = false
@State loadImg: boolean = false;
build() {
Column(){
Column() {
this.TabbarNormal()
if (this.viewType == ViewType.LOADING) {
this.LoadingLayout()
... ... @@ -85,7 +87,7 @@ struct ReserveMorePage {
@Builder
ListLayout() {
List({scroller: this.scroller}) {
List({ scroller: this.scroller }) {
// 下拉刷新
LazyForEach(this.data, (contentDTO: ContentDTO, index: number) => {
ListItem() {
... ... @@ -110,7 +112,7 @@ struct ReserveMorePage {
.height('calc(100% - 44vp)')
.onReachEnd(() => {
Logger.debug(TAG, "触底了");
if(!this.isLoading && this.hasMore){
if (!this.isLoading && this.hasMore) {
//加载分页数据
this.currentPage++;
this.getData()
... ... @@ -127,9 +129,13 @@ struct ReserveMorePage {
buildItem(item: ContentDTO, index: number) {
Column() {
Stack() {
Image(item.fullColumnImgUrls[0]?.url)
Image(this.loadImg ? item.fullColumnImgUrls[0]?.url : '')
.width('100%')
.aspectRatio(16 / 9)
.backgroundColor(this.loadImg ? $r('app.color.color_B0B0B0') : $r('app.color.color_33A3A3A3'))
.objectFit(ImageFit.Contain)
.borderWidth(0.5)
.borderColor($r('app.color.color_0D000000'))
.borderRadius({
topLeft: '4vp',
topRight: '4vp'
... ... @@ -152,7 +158,12 @@ struct ReserveMorePage {
Image($r('app.media.reserve_play_icon'))
.width(20)
.height(20)
.margin({ left: 10, top: 2, bottom: 2, right: 6 })
.margin({
left: 10,
top: 2,
bottom: 2,
right: 6
})
Text(this.getReserveDate(item.liveInfo.liveStartTime, 1))
.fontSize(12)
... ... @@ -190,7 +201,8 @@ struct ReserveMorePage {
.width(20)
.height(20)
.color(!this.isReserved(item) ? $r('app.color.color_fff') : $r('app.color.color_CCCCCC'))
.visibility((this.isLoadingAttention && this.liveId == item.objectId) ? Visibility.Visible : Visibility.None)
.visibility((this.isLoadingAttention && this.liveId == item.objectId) ? Visibility.Visible :
Visibility.None)
Text(!this.isReserved(item) ? '预约' : '已预约')
.fontSize($r('app.float.vp_12'))
... ... @@ -199,14 +211,21 @@ struct ReserveMorePage {
.width('100%')
.height('100%')
.textAlign(TextAlign.Center)
.visibility((this.isLoadingAttention && this.liveId == item.objectId) ? Visibility.None : Visibility.Visible)
.visibility((this.isLoadingAttention && this.liveId == item.objectId) ? Visibility.None :
Visibility.Visible)
.margin({
right: '10vp'
})
.textShadow({
radius: 2,
color: 'rgba(0,0,0,0.3)',
offsetY: 2
})
.backgroundColor(!this.isReserved(item) ? $r('app.color.color_ED2800') : $r('app.color.color_F5F5F5'))
.borderRadius(3)
}.onClick(() => {
}
.onClick(() => {
this.bookAndCancel(item)
})
.justifyContent(FlexAlign.Center)
... ... @@ -214,7 +233,7 @@ struct ReserveMorePage {
.borderRadius(3)
.width('52vp')
.height('24vp')
.margin({right: 12})
.margin({ right: 12 })
}
.width('100%')
... ... @@ -285,12 +304,18 @@ struct ReserveMorePage {
.fontSize('12vp')
.fontWeight(400)
.fontColor(Color.White)
.textShadow({
radius: 2,
color: 'rgba(0,0,0,0.3)',
offsetY: 2
})
}
.backgroundColor(Color.Transparent)
.margin({ right: 8, bottom: 8 })
}
async aboutToAppear(): Promise<void> {
this.loadImg = await onlyWifiLoadImg();
// PageViewModel.get
this.currentPage = 1
this.getData()
... ... @@ -301,24 +326,24 @@ struct ReserveMorePage {
})
// 获取预约
EmitterUtils.receiveEvent(EmitterEventId.LIVE_ROOM_SUBSCRIBE, (str?: string) => {
EmitterUtils.receiveEvent(EmitterEventId.LIVE_ROOM_SUBSCRIBE, (str?: string) => {
Logger.debug(TAG, 'receiveEvent LIVE_ROOM_SUBSCRIBE: ' + str)
if (str) {
// 跳转指定频道场景，传参底导id、频道id
const model: ReserveItemBean = JSON.parse(str)
Logger.debug(TAG,'是否关注元数据0：' +` ${model.liveId}`)
if (model && model.liveId && this.reserveList) {
Logger.debug(TAG, '是否关注元数据0：' + ` ${model.liveId}`)
if (model && model.liveId && this.reserveList) {
// 修改源数据
this.reserveList.forEach((element) => {
if (element.liveId == model.liveId) {
if (element && element.subscribe != model.subscribe) {
Logger.debug(TAG,'是否关注元数据2：' +` ${JSON.stringify(element.subscribe)}`)
Logger.debug(TAG, '是否关注元数据2：' + ` ${JSON.stringify(element.subscribe)}`)
element.subscribe = !element.subscribe
Logger.debug(TAG,'是否关注元数据3：' +` ${JSON.stringify(element.subscribe)}`)
Logger.debug(TAG, '是否关注元数据3：' + ` ${JSON.stringify(element.subscribe)}`)
this.isShow = true
if (element.subscribe) {
this.reservedIds.push(element.liveId.toString())
}else {
} else {
const num = this.reservedIds.indexOf(element.liveId.toString())
if (num >= 0 && num < this.reservedIds.length) {
this.reservedIds.splice(num, 1)
... ... @@ -364,14 +389,14 @@ struct ReserveMorePage {
this.data.push(...liveReviewDTO.list)
//批量查询关注状态
this.getAppointmentInfo(liveReviewDTO.list)
} else {
} else {
this.hasMore = false;
}
this.resolveEnd(true, resolve)
if (liveReviewDTO.list.length == 0 && this.currentPage == 1) {
this.viewType = ViewType.EMPTY
}
}catch (exception) {
} catch (exception) {
this.resolveEnd(false, resolve)
}
// PageViewModel.getLiveMoreUrl(this.type, this.currentPage, this.pageSize).then(async (liveReviewDTO) => {
... ... @@ -387,7 +412,7 @@ struct ReserveMorePage {
if (resolve) {
if (this.currentPage == 1 && isTop) {
resolve('已更新至最新')
}else {
} else {
resolve('')
}
}
... ... @@ -402,9 +427,9 @@ struct ReserveMorePage {
async getAppointmentInfo(list: ContentDTO[]) {
if (HttpUtils.getUserId()) {
const reserveBean = this.transformToLiveDetailsBeans(list)
Logger.debug(TAG,'是否预约数据：' +` ${JSON.stringify(reserveBean)}`)
Logger.debug(TAG, '是否预约数据：' + ` ${JSON.stringify(reserveBean)}`)
LiveModel.getAppointmentStatus(reserveBean).then((result) => {
Logger.debug(TAG,'是否预约数据：' +` ${JSON.stringify(result)}`)
Logger.debug(TAG, '是否预约数据：' + ` ${JSON.stringify(result)}`)
if (result && result.length > 0) {
this.reserveList.push(...result)
// this.reserveStatus = res;
... ... @@ -414,10 +439,10 @@ struct ReserveMorePage {
}
})
}
}).catch(() =>{
}).catch(() => {
// this.data.push(...list)
})
}else {
} else {
// this.data.push(...list)
}
... ... @@ -463,18 +488,19 @@ struct ReserveMorePage {
this.isLoadingAttention = true
this.liveId = reserveItem.liveId.toString()
try {
const res = await LiveModel.liveAppointment(reserveItem.relationId, reserveItem.liveId.toString(), !reserveItem.subscribe);
const res = await LiveModel.liveAppointment(reserveItem.relationId, reserveItem.liveId.toString(),
!reserveItem.subscribe);
if (res.code == 0) {
ToastUtils.shortToast(!reserveItem.subscribe ? '预约成功' : '取消预约成功')
// 修改源数据
this.reserveList.forEach((element) => {
if (element.liveId.toString() == item.objectId) {
Logger.debug(TAG,'是否关注元数据：' +` ${JSON.stringify(element.subscribe)}`)
Logger.debug(TAG, '是否关注元数据：' + ` ${JSON.stringify(element.subscribe)}`)
element.subscribe = !element.subscribe
Logger.debug(TAG,'是否关注元数据1：' +` ${JSON.stringify(element.subscribe)}`)
Logger.debug(TAG, '是否关注元数据1：' + ` ${JSON.stringify(element.subscribe)}`)
if (element.subscribe) {
this.reservedIds.push(element.liveId.toString())
}else {
} else {
const num = this.reservedIds.indexOf(element.liveId.toString())
if (num >= 0 && num < this.reservedIds.length) {
this.reservedIds.splice(num, 1)
... ... @@ -490,7 +516,7 @@ struct ReserveMorePage {
this.liveId = ''
this.isLoadingAttention = false
}
}else {
} else {
this.liveId = ''
this.isLoadingAttention = false
}
... ... @@ -509,7 +535,7 @@ struct ReserveMorePage {
if (type === 1) {
// 如果是今天
if (eventDateTime.setHours(0,0,0,0) === currentDateTime.setHours(0,0,0,0)) {
if (eventDateTime.setHours(0, 0, 0, 0) === currentDateTime.setHours(0, 0, 0, 0)) {
return `今天`;
} else {
// 如果事件不在今天
... ... @@ -521,6 +547,4 @@ struct ReserveMorePage {
return `${eventTimeStr}`;
}
}
}
\ No newline at end of file
... ...
... ... @@ -409,6 +409,8 @@ export class PageHelper {
// 批查直播观看人数
this.getLiveRoomDataInfo(compList)
//
// 测试数据
// setTimeout(() => {
... ...
... ... @@ -177,6 +177,7 @@
{
"name": "color_848484",
"value": "#848484"
}
},
{"name": "color_33A3A3A3","value": "#33A3A3A3"}
]
}
\ No newline at end of file
... ...