developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
yangchenggong1_wd
6c7a9b1c 1 parent feaa5e76

desc: 预约列表 UI 展示 和接口 读取数据

Inline Side-by-side
Showing 20 changed files with 448 additions and 4 deletions
import { AppointmentListUI} from 'wdComponent';
const TAG = "AppointmentListPage"
@Entry
@Component
struct AppointmentListPage {
build() {
Column(){
AppointmentListUI()
}
}
}
\ No newline at end of file
... ...
... ... @@ -3,6 +3,7 @@
"pages/Index",
"pages/MainPage",
"pages/ColumnPage",
"pages/TestPage"
"pages/TestPage",
"pages/AppointmentListPage"
]
}
\ No newline at end of file
... ...
... ... @@ -27,3 +27,5 @@ export { TriPicCardComponent } from "./components/view/TriPicCardComponent"
export { BigPicCardComponent } from "./components/view/BigPicCardComponent"
export { HeadPictureCardComponent } from "./components/view/HeadPictureCardComponent"
export { AppointmentListUI } from "./components/page/mine/AppointmentListUI"
... ...
import { MineAppointmentItem } from '../../../viewmodel/MineAppointmentItem'
@Component
export struct AppointmentListChildComponent{
@ObjectLink item: MineAppointmentItem
build() {
Column(){
Stack(){
Image(this.item?.imageUrl[0])
.objectFit(ImageFit.Auto)
if(this.item.relType === 1){
Row(){
Row(){
Image($r('app.media.reserve_icon'))
.width('42lpx')
.height('35lpx')
.objectFit(ImageFit.Auto)
Text("预约")
.fontWeight(400)
.fontSize('21lpx')
.backgroundColor($r('app.color.color_4D000000'))
.fontColor($r('app.color.white'))
.lineHeight('31lpx')
.layoutWeight(1)
.textAlign(TextAlign.Center)
}.width('94lpx')
.margin({bottom:'15lpx',right:'15lpx'})
}.width('100%')
.height('100%')
.alignItems(VerticalAlign.Bottom)
.justifyContent(FlexAlign.End)
}
}.width('100%')
.height('376lpx')
Column(){
Text(this.item.title)
.fontWeight('400lpx')
.fontSize('33lpx')
.fontColor($r('app.color.color_222222'))
.lineHeight('48lpx')
.maxLines(2)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.margin({bottom:'23lpx'})
.textAlign(TextAlign.Start)
.width('100%')
Row(){
Row(){
if(this.item.relType === 2){
Image($r('app.media.play_status_history_icon'))
.objectFit(ImageFit.Auto)
.width('38lpx')
.height('38lpx')
.margin({right:'12lpx'})
Text('已结束').fontColor($r('app.color.color_999999'))
.fontWeight('500lpx')
.fontSize('23lpx')
}else {
Image($r('app.media.play_status_icon'))
.objectFit(ImageFit.Auto)
.width('38lpx')
.height('38lpx')
.margin({right:'12lpx'})
Text(this.item.timePre).fontColor($r('app.color.color_ED2800'))
.fontWeight('500lpx')
.fontSize('23lpx')
Image($r('app.media.point_icon'))
.objectFit(ImageFit.Auto)
.width('12lpx')
.height('31lpx')
.margin({right:'4lpx'})
Text(`${this.item.timeBack}开始`).fontColor($r('app.color.color_ED2800'))
.fontWeight('500lpx')
.fontSize('23lpx')
.lineHeight('31lpx')
}
}.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.item.isAppointment = !this.item.isAppointment
//TODO 预约动作
})
}else {
Text(this.item.relType === 2?"去观看":"看回放")
.fontWeight(400)
.fontSize('23lpx')
.backgroundColor($r('app.color.color_ED2800'))
.fontColor($r('app.color.white'))
.lineHeight('31lpx')
.textAlign(TextAlign.Center)
.width('100lpx')
.height('46lpx')
.borderRadius('6lpx')
}
}
}
.padding({left:'23lpx',right:'23lpx',top:'15lpx',bottom:'23lpx'})
}.margin({ left: 10, right: 10 })
.backgroundColor($r('app.color.white'))
.borderRadius('8lpx')
}
}
\ No newline at end of file
... ...
import { AppointmentListChildComponent } from '../mine/AppointmentListChildComponent';
import { CustomTitleUI } from '../../reusable/CustomTitleUI'
import { ListHasNoMoreDataUI } from '../../reusable/ListHasNoMoreDataUI';
import { MineAppointmentItem } from '../../../viewmodel/MineAppointmentItem';
import { LazyDataSource, StringUtils } from 'wdKit';
import MinePageDatasModel from '../../../model/MinePageDatasModel';
const TAG = "AppointmentListUI"
@Component
export struct AppointmentListUI{
@State data: LazyDataSource<MineAppointmentItem> = new LazyDataSource();
@State isLoading:boolean = false
@State hasMore:boolean = true
curPageNum:number = 1;
aboutToAppear() {
this.getNewPageData()
}
build() {
Column() {
//标题栏目
CustomTitleUI({titleName:"预约列表"})
//刷新控件 TODO
//List
List({ space: '6lpx' }) {
LazyForEach(this.data, (item: MineAppointmentItem, index: number) => {
ListItem() {
AppointmentListChildComponent({item:item})
}
.onClick(()=>{
//TODO 跳转
})
}, (item: MineAppointmentItem, index: number) => index.toString())
//没有更多数据 显示提示
if(!this.hasMore){
ListItem(){
ListHasNoMoreDataUI()
}
}
}.cachedCount(4)
.margin({top:'23lpx',left:'23lpx',right:'23lpx'})
.layoutWeight(1)
.onReachEnd(()=>{
console.log(TAG,"触底了");
if(!this.isLoading){
//加载分页数据
this.getNewPageData()
}
})
}
.backgroundColor($r('app.color.color_F9F9F9'))
.height('100%')
.width('100%')
}
getNewPageData(){
this.isLoading = true
if(this.hasMore){
MinePageDatasModel.getAppointmentListData("20",`${this.curPageNum}`).then((value)=>{
if (!this.data || value.list.length == 0){
this.hasMore = false
}else{
value.list.forEach((value)=>{
let dealTime = this.DealStartTime(value.planStartTime)
if(dealTime!=null && dealTime.length === 2){
this.data.push(new MineAppointmentItem(value.imageUrl,value.status,value.title,true,dealTime[0],dealTime[1],value.relType))
}else {
this.data.push(new MineAppointmentItem(value.imageUrl,value.status,value.title,true,"","",value.relType))
}
})
this.data.notifyDataReload()
if (this.data.totalCount() < value.totalCount) {
this.curPageNum++
}else {
this.hasMore = false
}
}
})
}
this.isLoading = false
}
DealStartTime(planStartTime:string):string[]{
let dealData:string[] = []
if(!StringUtils.isNotEmpty(planStartTime)){
console.log(TAG,"格式有误")
return dealData
}
if(planStartTime.indexOf(" ") === -1){
console.log(TAG,"格式有误")
return dealData
}
let arr = planStartTime.split(" ")
if(arr!=null && StringUtils.isNotEmpty(arr[0])){ //处理年月日
let time = arr[0].split("-");
if(time.length === 3){
let month = time[1].indexOf("0") === 0 ? time[1].substring(1):time[1]
let day = time[2]
dealData[0] = `${month}月${day}日`
let today = `${new Date().getMonth()+1}月${new Date().getDate()}日`
if(dealData[0] === today){
dealData[0] = "今日"
}
}
}
if(arr!=null && StringUtils.isNotEmpty(arr[1])){ //处理时分
let time = arr[1].split(":");
if(time.length === 3){
dealData[1] = `${time[0]}:${time[1]}`
}
}
console.log(TAG,JSON.stringify(dealData))
return dealData
}
}
\ No newline at end of file
... ...
import RouteManager from '../../../utils/RouteManager'
import MinePagePersonalFunctionsItem from '../../../viewmodel/MinePagePersonalFunctionsItem'
@Component
... ... @@ -34,6 +35,12 @@ export default struct MinePagePersonFunctionUI {
}
}.onClick(()=>{
console.log(index+"")
switch (item.msg){
case "预约":{
RouteManager.jumpNewPage("pages/AppointmentListPage")
break;
}
}
}).width('169lpx')
.height('117lpx')
}, item => item)
... ...
... ... @@ -61,7 +61,6 @@ export default struct MinePageUserSimpleInfoUI {
Row(){
Text("登录注册")
.fontColor($r('app.color.color_222222'))
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.fontSize('33lpx')
... ...
import router from '@ohos.router'
@Component
export struct CustomTitleUI {
imgBack:boolean = true
titleName:string = "默认标题"
build() {
RelativeContainer() {
//标题栏目
if(this.imgBack){
Image($r('app.media.back_icon'))
.width('46lpx')
.height('46lpx')
.objectFit(ImageFit.Auto)
.id("back_icon")
.alignRules({
center: {anchor: "__container__", align: VerticalAlign.Center},
left: {anchor: "__container__", align: HorizontalAlign.Start}
})
.margin({left:'31lpx'})
.onClick(()=>{
router.back()
})
}
Text(this.titleName)
.height('42lpx')
.maxLines(1)
.id("title")
.fontSize('35lpx')
.fontWeight(400)
.fontColor($r('app.color.color_222222'))
.lineHeight('42lpx')
.alignRules({
center: {anchor: "__container__", align: VerticalAlign.Center},
middle: {anchor: "__container__", align: HorizontalAlign.Center}
})
}
.height('84lpx')
.width('100%')
.backgroundColor($r('app.color.white'))
}
}
\ No newline at end of file
... ...
@Component
export struct ListHasNoMoreDataUI{
build(){
Row(){
Text("已显示全部内容")
.fontColor($r('app.color.color_999999'))
.fontWeight('500lpx')
.fontSize('23lpx')
}.justifyContent(FlexAlign.Center)
.width('100%')
.margin({top:'20lpx',bottom:'20lpx'})
}
}
\ No newline at end of file
... ...
... ... @@ -2,6 +2,12 @@
import MinePagePersonalFunctionsItem from '../viewmodel/MinePagePersonalFunctionsItem'
import MinePageCreatorFunctionsItem from '../viewmodel/MinePageCreatorFunctionsItem'
import MinePageMoreFunctionModel from '../viewmodel/MinePageMoreFunctionModel';
import { HttpUrlUtils } from '../network/HttpUrlUtils';
import HashMap from '@ohos.util.HashMap';
import { ResponseDTO, WDHttp } from 'wdNetwork';
import { MineAppointmentListItem } from '../viewmodel/MineAppointmentListItem';
import { Logger } from 'wdKit';
const TAG = "MinePageDatasModel"
/**
* 我的页面 所有数据 获取封装类
... ... @@ -12,7 +18,6 @@ class MinePageDatasModel{
creatorData:MinePageCreatorFunctionsItem[] = []
moreData:MinePageMoreFunctionModel[] = []
private constructor() { }
/**
... ... @@ -64,7 +69,7 @@ class MinePageDatasModel{
}
/**
* 更多功能 扫一扫 我的奖品 等6个数据
* 扫一扫 我的奖品 等5个数据
* 包含名字和图标
*/
getMoreFunctionsData():MinePageCreatorFunctionsItem[]{
... ... @@ -79,6 +84,29 @@ class MinePageDatasModel{
return this.moreData
}
fetchAppointmentListData(pageSize:string,pageNum:string) {
let url = HttpUrlUtils.getAppointmentListDataUrl()+ `?pageSize=${pageSize}&pageNum=${pageNum}`
let headers: HashMap<string, string> = HttpUrlUtils.getYcgCommonHeaders();
return WDHttp.get<ResponseDTO<MineAppointmentListItem>>(url, headers)
};
getAppointmentListData(pageSize:string,pageNum:string): Promise<MineAppointmentListItem> {
return new Promise<MineAppointmentListItem>((success, error) => {
Logger.info(TAG, `getAppointmentList start`);
this.fetchAppointmentListData(pageSize,pageNum).then((navResDTO: ResponseDTO<MineAppointmentListItem>) => {
if (!navResDTO) {
error("page data invalid");
return
}
Logger.info(TAG, "getAppointmentList then,AppointmentResDTO.timeStamp:" + navResDTO.timestamp);
let navigationBean = navResDTO.data
success(navigationBean);
}).catch((err: Error) => {
Logger.error(TAG, `fetchAppointmentListDataApi catch, error.name : ${err.name}, error.message:${err.message}`);
error(err);
})
})
}
}
... ...
... ... @@ -39,6 +39,11 @@ export class HttpUrlUtils {
* 批查接口，查询互动相关数据，如收藏数、评论数等
*/
static readonly INTERACT_DATA_PATH: string = "/api/rmrb-contact/contact/zh/c/content/interactData";
/**
* 个人中心 我的预约列表
*/
static readonly APPOINTMENT_LIST_DATA_PATH: string = "/api/live-center-message/zh/c/live/subscribe";
private static hostUrl: string = HttpUrlUtils.HOST_UAT;
static getCommonHeaders(): HashMap<string, string> {
... ... @@ -78,6 +83,44 @@ export class HttpUrlUtils {
return headers;
}
static getYcgCommonHeaders(): HashMap<string, string> {
let headers: HashMap<string, string> = new HashMap<string, string>()
headers.set('mpassid', 'XGt6jfGUx8ADAKruTyAMdhHj')
headers.set('city', "%E5%90%88%E8%82%A5%E5%B8%82")
headers.set('User-Agent', 'Dalvik/2.1.0 (Linux; U; Android 10; PCT-AL10 Build/HUAWEIPCT-AL10)')
headers.set('channel', "rmrb_china_0000")
headers.set('appCode', "0af1f9085e484c97b2a44704bae72c07")
headers.set('Authorization', "APPCODE 0af1f9085e484c97b2a44704bae72c07")
headers.set('X-Ca-Stage', "TEST")
headers.set('plat', "Phone")
headers.set('Content-Type', 'application/json; charset=utf-8')
headers.set('timestamp', "649773304")
headers.set('RMRB-X-TOKEN', "eyJhbGciOiJIUzI1NiIsImtpZCI6IklFazBGclhfV2RYMEx1ZktDU01iYTVYd0VmUHZ6a043T0F5UTRFLWIwWU0ifQ.eyJpc3MiOiJwZW9wbGVzLWRhaWx5LWZvdXJhIiwic3ViIjoicGVvcGxlcy1kYWlseS1mb3VyYSIsImV4cCI6MTcxMDU4Mzk0MywidXNlcklkIjo1NjczODc0NzcwNjM2MjEsInVzZXJWZXJzaW9uIjoiNTY3Mzg3NDc3MDYzNjIxXzAiLCJ1c2VyTmFtZSI6IiVFNCVCQSVCQSVFNiVCMCU5MSVFNiU5NyVBNSVFNiU4QSVBNSVFNyVCRCU5MSVFNSU4RiU4QmFQcnRxNSIsInVzZXJUeXBlIjoxLCJjcmVhdG9ySWQiOm51bGwsInVzZXJJZFpoIjpudWxsfQ._LTKrUxQozpCj1XMhx1TWOIxn5gjDveoPuMFGpI0g_8")
headers.set('device_id', "5156098c-6c44-3514-af70-04a0139a9327")
headers.set('cookie', 'RMRB-X-TOKEN=eyJhbGciOiJIUzI1NiIsImtpZCI6IklFazBGclhfV2RYMEx1ZktDU01iYTVYd0VmUHZ6a043T0F5UTRFLWIwWU0ifQ.eyJpc3MiOiJwZW9wbGVzLWRhaWx5LWZvdXJhIiwic3ViIjoicGVvcGxlcy1kYWlseS1mb3VyYSIsImV4cCI6MTcxMDU4Mzk0MywidXNlcklkIjo1NjczODc0NzcwNjM2MjEsInVzZXJWZXJzaW9uIjoiNTY3Mzg3NDc3MDYzNjIxXzAiLCJ1c2VyTmFtZSI6IiVFNCVCQSVCQSVFNiVCMCU5MSVFNiU5NyVBNSVFNiU4QSVBNSVFNyVCRCU5MSVFNSU4RiU4QmFQcnRxNSIsInVzZXJUeXBlIjoxLCJjcmVhdG9ySWQiOm51bGwsInVzZXJJZFpoIjpudWxsfQ._LTKrUxQozpCj1XMhx1TWOIxn5gjDveoPuMFGpI0g_8')
headers.set('build_version', "202403112023")
headers.set('adcode', "340000")
headers.set('os_version', "10")
headers.set('city_dode', "340100")
headers.set('userId', "567387477063621")
headers.set('versionCode', "7302")
headers.set('system', "Android")
headers.set('version_name', "7.3.0.2")
headers.set('EagleEye-TraceID', '5C3D0800CF2C4440A43E5B131187629B')
headers.set('imei', "5156098c-6c44-3514-af70-04a0139a9327")
headers.set('userType', "1")
headers.set('Accept-Language', 'zh')
// HttpUrlUtils.addSpecialHeaders(headers);
// Logger.debug("TAG", '******************* commonHeaders headers start ******************************** ');
// headers.forEach((v,k)=>{
// Logger.debug("TAG", 'getCommonHeaders header: ' + k + ': ' + v);
// })
// Logger.debug("TAG", '******************* commonHeaders headers end ******************************** ');
return headers;
}
static getHost() {
return this.hostUrl;
}
... ... @@ -119,6 +162,11 @@ export class HttpUrlUtils {
return url;
}
static getAppointmentListDataUrl() {
let url = this.HOST_SIT + this.APPOINTMENT_LIST_DATA_PATH;
return url;
}
static addSpecialHeaders(headers: HashMap<string, string>) {
switch (this.hostUrl) {
case this.HOST_UAT:
... ...
... ... @@ -30,4 +30,5 @@ export class PageRepository {
let headers: HashMap<string, string> = HttpUrlUtils.getCommonHeaders();
return WDHttp.post<ResponseDTO<InteractDataDTO[]>>(url, param, headers)
};
}
\ No newline at end of file
... ...
@Observed
export class MineAppointmentItem{
appStyle:string //"15"
/*[
"https://sitcontentjdcdn.aikan.pdnews.cn/sjbj-20231204/image/live/563cc8ce1ecc43b288f6cf60da66579c.jpeg?x-oss-process=image/resize,l_550,m_fill,h_450,w_800/quality,q_90/format,jpg"
]*/
imageUrl:string[]
liveId:number //20000007348
planStartTime:string //2023-12-05 15:26:10
timePre:string //12月05日
timeBack:string //15:26
relId:string //"500000017021"
relType:number //1
startTime:string //""
status:string //"wait"
title:string //"视界运营位加权-加权中删除"
isAppointment:boolean
constructor(imageUrl:string[],status:string,title:string,isAppointment:boolean,timePre:string,timeBack:string,relType:number ) {
this.imageUrl=imageUrl
this.status=status
this.title=title
this.isAppointment=isAppointment
this.timePre = timePre
this.timeBack = timeBack
this.relType = relType
}
}
\ No newline at end of file
... ...
import { MineAppointmentItem } from './MineAppointmentItem'
export class MineAppointmentListItem{
list:MineAppointmentItem[]
pageNum: number
pageSize: number
totalCount: number
}
\ No newline at end of file
... ...
... ... @@ -79,6 +79,13 @@
{
"name": "main_red",
"value": "#E84026"
}, {
"name":"color_4D000000",
"value": "#4D000000"
},
{
"name":"color_CCCCCC",
"value": "#CCCCCC"
}
]
}
\ No newline at end of file
... ...