liyubing

feat(广告):左右挂角ui绘制

@@ -19,49 +19,80 @@ export interface AdvRuleBean { @@ -19,49 +19,80 @@ export interface AdvRuleBean {
19 /** 19 /**
20 * 广告展示顺序,0:随机展示;1列表循环 20 * 广告展示顺序,0:随机展示;1列表循环
21 */ 21 */
22 - displayMode:number  
23 - 22 + displayMode: number
24 /** 23 /**
25 * 每间隔刷新n次展示广告 24 * 每间隔刷新n次展示广告
26 */ 25 */
27 - refreshFrequency:number  
28 - 26 + refreshFrequency: number
29 /** 27 /**
30 * 广告信息集合 28 * 广告信息集合
31 */ 29 */
32 - advert:AdvertsBean; 30 + advert: AdvertsBean;
33 31
34 } 32 }
35 33
36 /** 34 /**
37 * 广告组件数据 35 * 广告组件数据
38 */ 36 */
39 -export interface CompAdvBean{ 37 +export interface CompAdvBean {
40 38
41 /** 39 /**
42 * 广告订单id 40 * 广告订单id
43 */ 41 */
44 - id:string; 42 + id: string;
45 43
46 /** 44 /**
47 * 投放开始时间 45 * 投放开始时间
48 */ 46 */
49 - startTime:number; 47 + startTime: number;
50 48
51 /** 49 /**
52 * 投放结束时间 50 * 投放结束时间
53 */ 51 */
54 - endTime:number; 52 + endTime: number;
55 53
56 /** 54 /**
57 * 信息流广告素材 55 * 信息流广告素材
58 */ 56 */
59 - matInfo:CompAdvMatInfoBean  
60 - 57 + matInfo: CompAdvMatInfoBean
61 /** 58 /**
62 * 信息流广告位 59 * 信息流广告位
63 */ 60 */
64 - slotInfo:CompAdvSlotInfoBean 61 + slotInfo: CompAdvSlotInfoBean
  62 + /**
  63 + * 展示优先级
  64 + * 广告A,displayPriority=1
  65 + * 广告B,displayPriority=2
  66 + * 则打开页面时,挂角展示顺序 A->B (优先级升序排列)
  67 + */
  68 + displayPriority: number;
65 69
  70 + /**
  71 + * 展示的次数
  72 + */
  73 + showCount: number;
66 74
  75 + /**
  76 + * 页面id
  77 + */
  78 + pageId: String ;
  79 +
  80 + /**
  81 + * 开屏广告-显示时长
  82 + */
  83 + displayDuration: String;
  84 +
  85 + /**
  86 + * 开屏广告-展示轮数
  87 + * 2.launchAdInfo有多个时:
  88 + * 广告A,displayRound=10
  89 + * 广告B,displayRound=5,
  90 + * 每次开机屏展示广告概率
  91 + * 广告A=10/(10+5)
  92 + * 广告B=5/(10+5)
  93 + * 广告A展示10次后,不再展示,
  94 + * 广告B展示5此后,不再展示。
  95 + * 下一轮展示继续上面逻辑。
  96 + */
  97 + displayRound: number;
67 } 98 }
@@ -52,48 +52,56 @@ export struct PageComponent { @@ -52,48 +52,56 @@ export struct PageComponent {
52 52
53 @Builder 53 @Builder
54 ListLayout() { 54 ListLayout() {
55 - List() {  
56 - // 下拉刷新  
57 - ListItem() {  
58 - RefreshLayout({  
59 - refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullDown, this.pageModel.pullDownRefreshImage,  
60 - this.pageModel.pullDownRefreshText, this.pageModel.pullDownRefreshHeight)  
61 - })  
62 - }  
63 55
64 - LazyForEach(this.pageModel.compList, (compDTO: CompDTO, compIndex: number) => { 56 + RelativeContainer() {
  57 + List() {
  58 + // 下拉刷新
65 ListItem() { 59 ListItem() {
66 - Column() {  
67 - CompParser({ compDTO: compDTO, compIndex: compIndex });  
68 - }  
69 - }  
70 - },  
71 - (compDTO: CompDTO, compIndex: number) => compDTO.id + compIndex.toString() + this.pageModel.timestamp  
72 - )  
73 -  
74 - // 加载更多  
75 - ListItem() {  
76 - if (this.pageModel.hasMore) {  
77 - LoadMoreLayout({  
78 - refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullUpLoad, this.pageModel.pullUpLoadImage,  
79 - this.pageModel.pullUpLoadText, this.pageModel.pullUpLoadHeight) 60 + RefreshLayout({
  61 + refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullDown, this.pageModel.pullDownRefreshImage,
  62 + this.pageModel.pullDownRefreshText, this.pageModel.pullDownRefreshHeight)
80 }) 63 })
81 - } else if (!this.pageModel.contentNeedScroll) {  
82 - NoMoreLayout() 64 + }
  65 +
  66 + LazyForEach(this.pageModel.compList, (compDTO: CompDTO, compIndex: number) => {
  67 + ListItem() {
  68 + Column() {
  69 + CompParser({ compDTO: compDTO, compIndex: compIndex });
  70 + }
  71 + }
  72 + },
  73 + (compDTO: CompDTO, compIndex: number) => compDTO.id + compIndex.toString() + this.pageModel.timestamp
  74 + )
  75 +
  76 + // 加载更多
  77 + ListItem() {
  78 + if (this.pageModel.hasMore) {
  79 + LoadMoreLayout({
  80 + refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullUpLoad, this.pageModel.pullUpLoadImage,
  81 + this.pageModel.pullUpLoadText, this.pageModel.pullUpLoadHeight)
  82 + })
  83 + } else if (!this.pageModel.contentNeedScroll) {
  84 + NoMoreLayout()
  85 + }
83 } 86 }
84 } 87 }
  88 + // comp自己处理分页,这里设置EdgeEffect.None
  89 + .edgeEffect(this.pageModel.contentNeedScroll ? EdgeEffect.None : EdgeEffect.Spring)
  90 + .scrollBar(BarState.Off)
  91 + .cachedCount(8)
  92 + .height(CommonConstants.FULL_PARENT)
  93 + .onScrollIndex((start: number, end: number) => {
  94 + // Listen to the first index of the current list.
  95 + this.pageModel.startIndex = start;
  96 + // 包含了 头尾item,判断时需要考虑+2
  97 + this.pageModel.endIndex = end;
  98 + })
  99 + .id('page_list')
  100 +
  101 + // 挂角广告
  102 + this.pageHornAd()
  103 +
85 } 104 }
86 - // comp自己处理分页,这里设置EdgeEffect.None  
87 - .edgeEffect(this.pageModel.contentNeedScroll ? EdgeEffect.None : EdgeEffect.Spring)  
88 - .scrollBar(BarState.Off)  
89 - .cachedCount(8)  
90 - .height(CommonConstants.FULL_PARENT)  
91 - .onScrollIndex((start: number, end: number) => {  
92 - // Listen to the first index of the current list.  
93 - this.pageModel.startIndex = start;  
94 - // 包含了 头尾item,判断时需要考虑+2  
95 - this.pageModel.endIndex = end;  
96 - })  
97 } 105 }
98 106
99 @Builder 107 @Builder
@@ -105,6 +113,111 @@ export struct PageComponent { @@ -105,6 +113,111 @@ export struct PageComponent {
105 // }) 113 // })
106 } 114 }
107 115
  116 + /**
  117 + * 页面挂角广告
  118 + */
  119 + @Builder
  120 + pageHornAd() {
  121 +
  122 +
  123 + if (this.pageModel.pageLeftCornerAdv.matInfo != null) {
  124 +
  125 +
  126 + // 页面左挂角
  127 + Image(this.pageModel.pageLeftCornerAdv.matInfo.matImageUrl[0])
  128 + .width($r('app.float.vp_80'))
  129 + .height($r('app.float.vp_80'))
  130 + .id("left_iv")
  131 + .alignRules({
  132 + bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
  133 + left: { anchor: '__container__', align: HorizontalAlign.Start },
  134 + })
  135 + .margin({ bottom: "65vp", left: $r('app.float.card_comp_pagePadding_lf') })
  136 +
  137 + Image($r('app.media.icon_adv_horn_close')).id('left_close').width($r('app.float.vp_16')).alignRules({
  138 + top: { anchor: 'left_iv', align: VerticalAlign.Top },
  139 + left: { anchor: 'left_iv', align: HorizontalAlign.Start },
  140 + }).offset({
  141 + x: -10,
  142 + y: -10
  143 + })
  144 +
  145 + Text($r('app.string.comp_advertisement'))
  146 + .width($r('app.float.vp_28'))
  147 + .height($r('app.float.vp_16'))
  148 + .fontSize($r('app.float.font_size_10'))
  149 + .fontColor(Color.White)
  150 + .id('left_tag')
  151 + .alignRules({
  152 + bottom: { anchor: 'left_iv', align: VerticalAlign.Bottom },
  153 + left: { anchor: 'left_iv', align: HorizontalAlign.Start },
  154 + })
  155 + .textAlign(TextAlign.Center)
  156 + .backgroundColor($r('app.color.res_color_general_000000_30'))
  157 + .borderRadius({
  158 + topLeft: $r('app.float.vp_2'),
  159 + topRight: $r('app.float.vp_2'),
  160 + bottomLeft: $r('app.float.vp_2'),
  161 + bottomRight: $r('app.float.vp_2')
  162 + })
  163 + }
  164 +
  165 + if (this.pageModel.pageRightCornerAdv.matInfo != null && this.pageModel.isShowRightAds) {
  166 + // 页面右边挂角
  167 + Image(this.pageModel.pageRightCornerAdv.matInfo.matImageUrl[0])
  168 + .width($r('app.float.vp_80'))
  169 + .height($r('app.float.vp_80'))
  170 + .id("right_iv")
  171 + .alignRules({
  172 + bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
  173 + right: { anchor: '__container__', align: HorizontalAlign.End },
  174 + })
  175 + .margin({ bottom: "65vp", right: $r('app.float.card_comp_pagePadding_lf') })
  176 + .onClick(()=>{
  177 +
  178 + // 关闭挂角广告
  179 + this.pageModel.isShowLeftAds = false;
  180 +
  181 + })
  182 +
  183 + Image($r('app.media.icon_adv_horn_close'))
  184 + .id('right_close')
  185 + .width($r('app.float.vp_16'))
  186 + .alignRules({
  187 + top: { anchor: 'right_iv', align: VerticalAlign.Top },
  188 + right: { anchor: 'right_iv', align: HorizontalAlign.End },
  189 + })
  190 + .offset({
  191 + x: 10,
  192 + y: -10
  193 + })
  194 + .onClick(() => {
  195 + // 关闭挂角广告
  196 + this.pageModel.isShowRightAds = false;
  197 +
  198 + })
  199 +
  200 + Text($r('app.string.comp_advertisement'))
  201 + .width($r('app.float.vp_28'))
  202 + .height($r('app.float.vp_16'))
  203 + .fontSize($r('app.float.font_size_10'))
  204 + .fontColor(Color.White)
  205 + .id('right_tag')
  206 + .alignRules({
  207 + bottom: { anchor: 'right_iv', align: VerticalAlign.Bottom },
  208 + right: { anchor: 'right_iv', align: HorizontalAlign.End },
  209 + })
  210 + .textAlign(TextAlign.Center)
  211 + .backgroundColor($r('app.color.res_color_general_000000_30'))
  212 + .borderRadius({
  213 + topLeft: $r('app.float.vp_2'),
  214 + topRight: $r('app.float.vp_2'),
  215 + bottomLeft: $r('app.float.vp_2'),
  216 + bottomRight: $r('app.float.vp_2')
  217 + })
  218 + }
  219 + }
  220 +
108 async aboutToAppear() { 221 async aboutToAppear() {
109 // 选中tab,才请求数据。拦截大量接口请求 222 // 选中tab,才请求数据。拦截大量接口请求
110 if (this.navIndex === this.currentTopNavSelectedIndex) { 223 if (this.navIndex === this.currentTopNavSelectedIndex) {
@@ -5,6 +5,7 @@ import { closeRefresh } from '../utils/PullDownRefresh'; @@ -5,6 +5,7 @@ import { closeRefresh } from '../utils/PullDownRefresh';
5 import PageModel from './PageModel'; 5 import PageModel from './PageModel';
6 import PageViewModel from './PageViewModel'; 6 import PageViewModel from './PageViewModel';
7 import { promptAction } from '@kit.ArkUI'; 7 import { promptAction } from '@kit.ArkUI';
  8 +import { AdvRuleBean } from 'wdBean/src/main/ets/bean/adv/AdvsRuleBean';
8 9
9 const TAG = 'PageHelper'; 10 const TAG = 'PageHelper';
10 11
@@ -45,9 +46,50 @@ export class PageHelper { @@ -45,9 +46,50 @@ export class PageHelper {
45 return; 46 return;
46 } 47 }
47 pageModel.pageInfo = pageInfo; 48 pageModel.pageInfo = pageInfo;
  49 + //解析广告资源
  50 + this.analysisAdvSource(pageModel);
  51 +
48 this.parseGroup(pageModel) 52 this.parseGroup(pageModel)
  53 +
  54 + }
  55 +
  56 + /**
  57 + * 解析广告资源
  58 + * @param pageInfo
  59 + */
  60 + analysisAdvSource(pageModel: PageModel) {
  61 +
  62 + let pageInfo = pageModel.pageInfo
  63 + if (pageInfo.hasAdInfo === 1 && pageInfo.cornersAdv != null) {
  64 + // 优先展示展现中心广告
  65 + let cornersAdv = pageInfo.cornersAdv
  66 +
  67 + } else if (pageInfo.cornersAdv2 != null && pageInfo.cornersAdv2.length > 0) {
  68 + // 广告中心-挂角广告信息
  69 + let cornersAdv2 = pageInfo.cornersAdv2
  70 + // 获取
  71 + let showCompAdvBean = cornersAdv2[0]
  72 +
  73 + //
  74 + let slotInfo = showCompAdvBean.slotInfo;
  75 + let postion = slotInfo.position
  76 +
  77 + if (postion == 0) {
  78 + //左边挂角
  79 + pageModel.pageLeftCornerAdv = showCompAdvBean
  80 + pageModel.isShowLeftAds = true
  81 + } else {
  82 + // 右边挂角
  83 + pageModel.pageRightCornerAdv = showCompAdvBean
  84 + pageModel.isShowRightAds = true
  85 + }
  86 +
  87 + Logger.error("XXX", JSON.stringify(pageInfo.cornersAdv2))
  88 + }
  89 +
49 } 90 }
50 91
  92 +
51 async parseGroup(pageModel: PageModel) { 93 async parseGroup(pageModel: PageModel) {
52 let pageInfo: PageInfoDTO = pageModel.pageInfo 94 let pageInfo: PageInfoDTO = pageModel.pageInfo
53 pageModel.groupList = [] 95 pageModel.groupList = []
@@ -4,6 +4,7 @@ import { ViewType } from 'wdConstant/src/main/ets/enum/ViewType'; @@ -4,6 +4,7 @@ import { ViewType } from 'wdConstant/src/main/ets/enum/ViewType';
4 import { RefreshConstants as Const } from '../utils/RefreshConstants'; 4 import { RefreshConstants as Const } from '../utils/RefreshConstants';
5 import { PageUIReqBean } from '../components/page/bean/PageUIReqBean'; 5 import { PageUIReqBean } from '../components/page/bean/PageUIReqBean';
6 import { GroupInfoDTO, PageInfoDTO } from 'wdBean/src/main/ets/bean/navigation/PageInfoDTO'; 6 import { GroupInfoDTO, PageInfoDTO } from 'wdBean/src/main/ets/bean/navigation/PageInfoDTO';
  7 +import { CompAdvBean } from 'wdBean/src/main/ets/bean/adv/AdvsRuleBean';
7 8
8 /** 9 /**
9 * 页面下拉刷新、上拉加载数据bean。 10 * 页面下拉刷新、上拉加载数据bean。
@@ -50,6 +51,15 @@ export default class PageModel { @@ -50,6 +51,15 @@ export default class PageModel {
50 // keyGenerator相关字符串,用于刷新list布局 51 // keyGenerator相关字符串,用于刷新list布局
51 timestamp: String = '1'; 52 timestamp: String = '1';
52 53
  54 + //左右挂角广告对象
  55 + pageLeftCornerAdv:CompAdvBean = {} as CompAdvBean
  56 + isShowLeftAds : boolean = true;
  57 + pageRightCornerAdv:CompAdvBean = {} as CompAdvBean
  58 + isShowRightAds : boolean = true;
  59 +
  60 +
  61 +
  62 +
53 /** 63 /**
54 * 简单复制业务数据 64 * 简单复制业务数据
55 */ 65 */
@@ -121,11 +121,11 @@ @@ -121,11 +121,11 @@
121 "value": "#99636363" 121 "value": "#99636363"
122 }, 122 },
123 { 123 {
124 - "name":"color_648DF2", 124 + "name": "color_648DF2",
125 "value": "#648DF2" 125 "value": "#648DF2"
126 }, 126 },
127 { 127 {
128 - "name":"color_EEEEEE", 128 + "name": "color_EEEEEE",
129 "value": "#EEEEEE" 129 "value": "#EEEEEE"
130 }, 130 },
131 { 131 {
@@ -151,6 +151,10 @@ @@ -151,6 +151,10 @@
151 { 151 {
152 "name": "color_0D000000", 152 "name": "color_0D000000",
153 "value": "#0D000000" 153 "value": "#0D000000"
  154 + },
  155 + {
  156 + "name": "res_color_general_000000_30",
  157 + "value": "#4D000000"
154 } 158 }
155 ] 159 ]
156 } 160 }
@@ -209,6 +209,10 @@ @@ -209,6 +209,10 @@
209 "value": "3vp" 209 "value": "3vp"
210 }, 210 },
211 { 211 {
  212 + "name": "vp_2",
  213 + "value": "2vp"
  214 + },
  215 + {
212 "name": "vp_55", 216 "name": "vp_55",
213 "value": "55vp" 217 "value": "55vp"
214 }, 218 },
@@ -225,6 +229,14 @@ @@ -225,6 +229,14 @@
225 "value": "16vp" 229 "value": "16vp"
226 }, 230 },
227 { 231 {
  232 + "name": "vp_28",
  233 + "value": "28vp"
  234 + },
  235 + {
  236 + "name": "vp_80",
  237 + "value": "80vp"
  238 + },
  239 + {
228 "name": "card_comp_pagePadding_lf", 240 "name": "card_comp_pagePadding_lf",
229 "value": "16fp" 241 "value": "16fp"
230 }, 242 },
@@ -48,5 +48,10 @@ @@ -48,5 +48,10 @@
48 "name": "reason_read_write_media", 48 "name": "reason_read_write_media",
49 "value": "user_grant" 49 "value": "user_grant"
50 } 50 }
  51 + ,
  52 + {
  53 + "name": "comp_advertisement",
  54 + "value": "广告"
  55 + }
51 ] 56 ]
52 } 57 }