添加素材库页面，添加钻石充值页面

entry/src/main/ets/common/EventConstants.ets

@@ -8,6 +8,7 @@ export class EventConstants {
   static readonly MediaActionEvent = "MediaActionEvent"
   static readonly JumpToRecordEvent = "JumpToRecordEvent"
   static readonly DownloadHistoryRefreshEvent = "DownloadHistoryRefreshEvent"
+  static readonly MaterialListRefreshEvent = "MaterialListRefreshEvent"
 
 
   /*-------------------------------------------客户端上报事件-------------------------------------------*/

entry/src/main/ets/dialog/DiamondRuleDialog.ets

@@ -54,6 +54,6 @@ export struct DiamondRuleDialog {
     }
     .width('100%')
     .height('auto')
-    .backgroundColor('#F6F6F6')
+    .backgroundColor(Color.White)
   }
 }

entry/src/main/ets/dialog/LoadingDialog.ets

@@ -4,12 +4,12 @@ import { ComponentContent } from '@kit.ArkUI';
 function defaultBuilder() {
   Column() {
     LoadingProgress()
-      .color(Color.White)
+      .color($r('app.color.color_466afd'))
       .width(50)
       .height(50)
 
     Text('加载中')
-      .fontColor(Color.White)
+      .fontColor($r('app.color.color_466afd'))
       .fontSize(12)
       .margin({ top: 5 })
       .width('auto')
@@ -17,7 +17,7 @@ function defaultBuilder() {
   }
   .justifyContent(FlexAlign.Center)
   .borderRadius(6)
-  .backgroundColor('#CC000000')
+  .backgroundColor(Color.White)
   .width(86)
   .height(86)
 }

entry/src/main/ets/entity/MaterialCateEntity.ets

@@ -0,0 +1,11 @@
+export class MaterialCateEntity {
+  id: string = '';
+  name: string = '';
+  create_time: string = ''
+
+  constructor(id: string, name: string, createTime: string) {
+    this.id = id
+    this.name = name
+    this.create_time = createTime
+  }
+}

entry/src/main/ets/entity/MenuEntity.ets

@@ -1,4 +1,5 @@
 import { ArrayList } from "@kit.ArkTS";
+import { LoginManager } from "../manager/LoginGlobalManager";
 
 export class MenuEntity {
   icon: Resource | null = null;
@@ -25,7 +26,9 @@ export function homeMenuList(): ArrayList<MenuEntity> {
 export function mineMenuList(): ArrayList<MenuEntity> {
   let list = new ArrayList<MenuEntity>()
   list.add(new MenuEntity($r('app.media.ic_mine_icon1'), "提取记录", "history"))
-  list.add(new MenuEntity($r('app.media.ic_mine_icon2'), "次数兑换", "diamond"))
+  if (LoginManager.getUserInfo()?.vip !== 1) {
+    list.add(new MenuEntity($r('app.media.ic_mine_icon2'), "次数兑换", "diamond"))
+  }
   list.add(new MenuEntity($r('app.media.ic_mine_icon3'), "意见反馈", "feedback"))
   list.add(new MenuEntity($r('app.media.ic_mine_icon4'), "联系客服", "service"))
   return list;

entry/src/main/ets/net/ApiService.ets

@@ -377,9 +377,9 @@ class ApiService {
    * 获取素材分类列表
    * @returns
    */
-  getMaterialCateList(page: string): Promise<HttpResult> {
+  getMaterialCateList(): Promise<HttpResult> {
     const params: Record<string, string> = {
-      'page': page,
+      'page': '1',
       'size': '50'
     }
     return AxiosRequest.get<HttpResult>(Api.MATERIAL_CATE_LIST, params)

entry/src/main/ets/net/AxiosRequest.ets

@@ -67,7 +67,7 @@ instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {
     paramsMap.forEach((value, key) => {
       sortQueryString += key + "=" + value + "&"
     })
-    sortQueryString = sortQueryString.substring(0, sortQueryString.length - 1)
+    sortQueryString = encodeURI(sortQueryString.substring(0, sortQueryString.length - 1))
     let signature = MD5.digestSync(sortQueryString + '&' + MD5.digestSync(Constants.SIGNATURE));
     let method = config.method?.toLowerCase();
     if (method === "post" || method === "put") {

entry/src/main/ets/pages/main/MainPage.ets

@@ -13,6 +13,7 @@ import { TipDialog } from '../../dialog/TipDialog';
 import { ConfigManager } from '../../manager/UserConfigManager';
 import { EventReportGlobalManager } from '../../manager/EventReportGlobalManager';
 import { PasteboardUtils } from '../../utils/PasteboardUtils';
+import { MaterialPage } from './material/MaterialPage';
 
 @Entry
 @ComponentV2
@@ -106,7 +107,7 @@ struct MainPage {
       .tabBar(this.tabBuilder(this.titles[0], 0, $r('app.media.ic_home_select'), $r('app.media.ic_home_default')))
 
       TabContent() {
-
+        MaterialPage()
       }
       .tabBar(this.tabBuilder(this.titles[1], 1, $r('app.media.ic_material_select'), $r('app.media.ic_material_default')))
 

entry/src/main/ets/pages/main/home/HomePage.ets

@@ -260,7 +260,7 @@ export struct HomePage {
                   Text('视频号').fontColor('#113100').fontSize(16).fontFamily('almmsht')
                   Image($r('app.media.ic_home_top_menu_arrow2')).width(12).height(12).margin({left: 2})
                 }
-                Text('支持微信视频号').fontColor($r('app.color.color_666666')).fontSize(11)
+                Text('支持微信视频号').fontColor($r('app.color.color_666666')).fontSize(11).margin({top: 3})
                 Blank().layoutWeight(1)
                 Row() {
                   Image($r('app.media.yq_3')).width(14).height(14).borderRadius(7)
@@ -287,7 +287,7 @@ export struct HomePage {
                   Text('直播回放').fontColor('#4A0006').fontSize(16).fontFamily('almmsht')
                   Image($r('app.media.ic_home_top_menu_arrow3')).width(12).height(12).margin({left: 2})
                 }
-                Text('支持微信直播回放').fontColor($r('app.color.color_666666')).fontSize(11)
+                Text('支持微信直播回放').fontColor($r('app.color.color_666666')).fontSize(11).margin({top: 3})
                 Blank().layoutWeight(1)
                 Row() {
                   Image($r('app.media.yq_6')).width(14).height(14).borderRadius(7)
@@ -380,7 +380,7 @@ export struct HomePage {
             .alignSelf(ItemAlign.Start)
             .margin({left: 12, top: 27})
 
-            WaterFlow({footer: this.itemFoot()}) {
+            WaterFlow() {
               ForEach(this.materialList, (item: MaterialEntity, index: number) => {
                 FlowItem() {
                   ImageKnifeComponent({

entry/src/main/ets/pages/main/home/material/MaterialDetailPage.ets

@@ -193,6 +193,7 @@ struct MaterialDetailPage {
               right: {anchor: 'image', align: HorizontalAlign.End}
             })
             .margin({top: 12, right: 12})
+            .height('auto')
           }
           .height('auto')
         }

entry/src/main/ets/pages/main/material/MaterialListPage.ets

@@ -0,0 +1,122 @@
+import { DownSamplingStrategy, ImageKnifeComponent, ImageKnifeOption } from "@ohos/imageknifepro"
+import { AppUtil } from "@pura/harmony-utils"
+import { EventConstants } from "../../../common/EventConstants"
+import { RouterUrls } from "../../../common/RouterUrls"
+import { MaterialEntity } from "../../../entity/MaterialEntity"
+import { EmptyView, PageStatus } from "../../../view/EmptyView"
+import { MaterialViewModel } from "../../../viewModel/MaterialViewModel"
+
+@ComponentV2
+export struct MaterialListPage {
+  @Param cateId: string = ''
+  @Param initKeywords: string = ''
+
+  @Local materialList: Array<MaterialEntity> = []
+  @Local keywords: string = this.initKeywords
+  @Local isRefreshing: boolean = false
+  @Local isLoading: boolean = false
+  @Local canLoadMore: boolean = false
+
+  private viewModel: MaterialViewModel = new MaterialViewModel(this.getUIContext())
+  private page: number = 1;
+
+  @Monitor('viewModel.materialList')
+  onMaterialListChange(monitor: IMonitor) {
+    const list = monitor.value()?.now as Array<MaterialEntity>
+    if (this.page === 1) {
+      this.materialList = list
+      this.isRefreshing = false
+    } else {
+      this.materialList.push(...list)
+      this.isLoading = false
+    }
+    this.canLoadMore = list.length === 20
+  }
+
+  aboutToAppear(): void {
+    this.initObserver()
+    this.viewModel.getMaterialList(this.page, this.cateId, this.keywords)
+  }
+
+  aboutToDisappear(): void {
+    AppUtil.getContext().eventHub.off(EventConstants.MaterialListRefreshEvent);
+  }
+
+  initObserver() {
+    AppUtil.getContext().eventHub.on(EventConstants.MaterialListRefreshEvent, (keywords: string) => {
+      this.keywords = keywords
+      this.page = 1
+      this.isRefreshing = true
+      this.viewModel.getMaterialList(this.page, this.cateId, this.keywords)
+    })
+  }
+
+  createImageOption(item: MaterialEntity): ImageKnifeOption {
+    const option:ImageKnifeOption = {
+      loadSrc: item.pic ? item.pic.url : '',
+      placeholderSrc: $r('app.media.ic_placeholder'),
+      thumbnailSrc: $r('app.media.ic_placeholder'),
+      errorSrc: $r('app.media.ic_placeholder'),
+      objectFit: ImageFit.Cover,
+      border: {radius: 6},
+      downSampling: DownSamplingStrategy.FIT_CENTER_QUALITY,
+      onLoadListener:{
+        onLoadSuccess: (imageInfo) => {
+          item.pic_size = `${imageInfo.imageWidth}:${imageInfo.imageHeight}`
+        }
+      }
+    }
+    return option
+  }
+
+  build() {
+    Refresh({refreshing: this.isRefreshing}) {
+      Stack() {
+        WaterFlow() {
+          ForEach(this.materialList, (item: MaterialEntity, index: number) => {
+            FlowItem() {
+              ImageKnifeComponent({
+                imageKnifeOption:this.createImageOption(item)
+              })
+                .width('100%')
+                .height('100%')
+                .borderRadius(6)
+                .backgroundColor($r('app.color.color_ededed'))
+                .onClick(() => {
+                  if (item.pic?.url) {
+                    this.getUIContext().getRouter().pushUrl({url: RouterUrls.MATERIAL_DETAIL_PAGE, params: {material: item}})
+                  }
+                })
+            }
+            .width('100%')
+            .height(500 / (index % 2 === 0 ? 2 : 3))
+          })
+        }
+        .columnsTemplate('1fr 1fr')
+        .columnsGap(7)
+        .rowsGap(7)
+        .width('100%')
+        .height('100%')
+        .padding({left: 12, right: 12})
+        .onReachEnd(() => {
+          this.page++
+          this.isLoading = true
+          this.viewModel.getMaterialList(this.page, this.cateId, this.keywords)
+        })
+
+        EmptyView({
+          status: this.materialList.length > 0 ? PageStatus.GONE : PageStatus.NO_DATA,
+          noDataImage: $r('app.media.ic_empty_data'),
+          noDataText: '暂无数据'
+        })
+      }
+    }
+    .width('100%')
+    .height('100%')
+    .onRefreshing(() => {
+      this.page = 1
+      this.isRefreshing = true
+      this.viewModel.getMaterialList(this.page, this.cateId, this.keywords)
+    })
+  }
+}

entry/src/main/ets/pages/main/material/MaterialPage.ets

@@ -0,0 +1,102 @@
+import { AppUtil, KeyboardUtil, StrUtil } from '@pura/harmony-utils';
+import { EventConstants } from '../../../common/EventConstants';
+import { MaterialCateEntity } from '../../../entity/MaterialCateEntity';
+import { MaterialViewModel } from '../../../viewModel/MaterialViewModel';
+import { MaterialListPage } from './MaterialListPage';
+
+@ComponentV2
+export struct MaterialPage {
+  @Local currentIndex: number = 0;
+  @Local cateList: Array<MaterialCateEntity> = []
+  @Local inputText: string = '';
+
+  private viewModel: MaterialViewModel = new MaterialViewModel(this.getUIContext())
+  private tabController: TabsController = new TabsController();
+
+  @Monitor('viewModel.cateList')
+  onCateListChange(monitor: IMonitor) {
+    const list = monitor.value()?.now as Array<MaterialCateEntity>
+    this.cateList = [new MaterialCateEntity('', '推荐', '')].concat(list)
+  }
+
+  aboutToAppear(): void {
+    this.viewModel.getMaterialCaleList()
+  }
+
+  build() {
+    Column() {
+      Row() {
+        Row() {
+          Image($r('app.media.ic_search')).width(18).height(18)
+          TextInput({ placeholder: '请输入关键词搜索素材', text: this.inputText })
+            .layoutWeight(1)
+            .fontColor($r('app.color.color_1a1a1a'))
+            .fontSize(14)
+            .placeholderColor($r('app.color.color_999999'))
+            .placeholderFont({ size: 14 })
+            .backgroundColor(Color.Transparent)
+            .onChange((value: string) => {
+              this.inputText = value;
+            })
+          Image($r('app.media.ic_clear_text'))
+            .width(18)
+            .height(18)
+            .padding(2)
+            .margin({right: 5})
+            .visibility(StrUtil.isNotEmpty(this.inputText) ? Visibility.Visible : Visibility.None)
+            .onClick(() => {
+              this.inputText = '';
+            })
+          Button('搜索', {type: ButtonType.Capsule ,stateEffect:true})
+            .fontSize(14)
+            .width(64)
+            .height(32)
+            .margin({right: 4})
+            .backgroundColor($r('app.color.color_466afd'))
+            .onClick(() => {
+              AppUtil.getContext().eventHub.emit(EventConstants.MaterialListRefreshEvent, this.inputText);
+              KeyboardUtil.hide()
+            })
+        }
+        .layoutWeight(1)
+        .height(40)
+        .borderRadius(20)
+        .backgroundColor(Color.White)
+        .margin({ left: 12, right: 12 })
+        .padding({left: 10})
+      }.height(100).padding({ top: 50 })
+
+      Tabs({ controller: this.tabController, barPosition: BarPosition.Start }) {
+        ForEach(this.cateList, (item: MaterialCateEntity, index) => {
+          TabContent() {
+            MaterialListPage({cateId: item.id, initKeywords: this.inputText})
+          }
+          .tabBar(this.tabBuilder(item.name, index))
+        })
+      }
+      .barMode(BarMode.Scrollable)
+      .onSelected((index: number) => {
+        this.currentIndex = index;
+      })
+    }
+    .width('100%')
+    .height('100%')
+    .backgroundColor($r('app.color.window_background'))
+  }
+
+  @Builder
+  tabBuilder(title: string, targetIndex: number) {
+    Stack() {
+      if (this.currentIndex === targetIndex) {
+        Image($r('app.media.ic_tab_indicator')).width(27).height(11).margin({top: 13})
+      }
+      Text(title)
+        .fontColor(this.currentIndex === targetIndex ? $r("app.color.color_212226") : $r('app.color.color_5c5f6c'))
+        .fontSize(this.currentIndex === targetIndex ? 16 : 14)
+        .fontWeight(this.currentIndex === targetIndex ? FontWeight.Medium : FontWeight.Regular)
+    }
+    .width('auto')
+    .height(50)
+    .margin({ left: targetIndex === 0 ? 12 : 20 })
+  }
+}

entry/src/main/ets/pages/main/mine/MinePage.ets

@@ -17,9 +17,9 @@ import * as WxOpenSdk from '@tencent/wechat_open_sdk';
 import { Constants } from '../../../common/Constants';
 import { MenuEntity, mineMenuList } from '../../../entity/MenuEntity';
 import { MediaAction, MediaType } from '../../../manager/MediaManager';
-import { VideoRecordPage } from '../record/VideoRecordPage';
-import { ImageRecordPage } from '../record/ImageRecordPage';
-import { AudioRecordPage } from '../record/AudioRecordPage';
+import { VideoRecordPage } from './record/VideoRecordPage';
+import { ImageRecordPage } from './record/ImageRecordPage';
+import { AudioRecordPage } from './record/AudioRecordPage';
 
 @ComponentV2
 export struct MinePage {

entry/src/main/ets/pages/main/mine/diamond/DiamondPage.ets

@@ -208,169 +208,172 @@ struct DiamondPage {
   }
 
   build() {
-    RelativeContainer() {
-      Image($r('app.media.ic_diamond_top_bg')).width('100%').aspectRatio(1.524)
-
+    Stack({alignContent: Alignment.Top}) {
       Column() {
         Scroll() {
-          Column() {
-            RelativeContainer() {
-              Image(LoginManager.getUserInfo()?.avater)
-                .width(46)
-                .height(46)
-                .borderRadius(25)
-                .margin({ left: 7 })
-                .id('iv_avatar')
-              Text(LoginManager.getUserInfo()?.vip === 1 ? '非会员' : LoginManager.getUserInfo()?.vip === 3 ? '终身会员' : LoginManager.getUserInfo()?.vip_name)
-                .fontColor('#4F59FF')
-                .fontSize(12)
-                .width('auto')
-                .height(22)
-                .padding({ left: 6, right: 6 })
-                .borderRadius(25)
-                .linearGradient({
-                  colors: [['#EFF0FB', 0.0], ['#ABC3FF', 1.0]],
-                  direction: GradientDirection.Right
-                })
-                .alignRules({
-                  top: { anchor: 'iv_avatar', align: VerticalAlign.Bottom },
-                  left: { anchor: 'iv_avatar', align: HorizontalAlign.Start },
-                  right: { anchor: 'iv_avatar', align: HorizontalAlign.End }
-                })
-                .margin({ top: -9 })
-              Text(LoginManager.getUserInfo()?.name)
-                .fontColor('#FFF4D0')
-                .fontSize(15)
-                .alignRules({
-                  top: { anchor: 'iv_avatar', align: VerticalAlign.Top },
-                  bottom: { anchor: 'iv_avatar', align: VerticalAlign.Center },
-                  left: { anchor: 'iv_avatar', align: HorizontalAlign.End }
-                })
-                .margin({ left: 16 })
-                .id('tv_username')
-              Text('ID:' + LoginManager.getUserInfo()?.user_id).fontColor('#FFF4D0').fontSize(12)
-                .alignRules({
-                  left: { anchor: 'tv_username', align: HorizontalAlign.Start },
-                  top: { anchor: 'iv_avatar', align: VerticalAlign.Center },
-                  bottom: { anchor: 'iv_avatar', align: VerticalAlign.Bottom }
-                })
-
-              Text() {
-                Span('剩余总次数 ')
-                Span(`${this.diamondInfo?.remain}`).fontSize(22).fontFamily('ddp500m')
-                Span(' 次')
-              }.fontColor('#FFF4D0').fontSize(12)
-              .alignRules({
-                top: { anchor: 'iv_avatar', align: VerticalAlign.Bottom },
-                right: { anchor: '__container__', align: HorizontalAlign.End }
-              })
-            }
-            .aspectRatio(2.584)
-            .margin({ top: 120, left: 26, right: 26 })
-            .padding({ top: 16, left: 12, right: 12 })
-            .backgroundImage($r('app.media.ic_diamond_vip_bg1'))
-            .backgroundImageSize({ width: '100%' })
-
-            Image($r('app.media.ic_diamond_vip_bg2')).width('100%').aspectRatio(4.866)
-              .margin({ top: -30 })
+          Stack({alignContent: Alignment.Top}) {
+            Image($r('app.media.ic_diamond_top_bg')).width('100%').aspectRatio(1.524)
 
             Column() {
-              Text('M币消耗数量').fontColor('#8F4A2A').fontSize(16).fontWeight(FontWeight.Medium).margin({ top: 4 })
+              RelativeContainer() {
+                Image(StrUtil.isNotEmpty(LoginManager.getUserInfo()?.avater) ? LoginManager.getUserInfo()?.avater : $r('app.media.ic_default_avatar'))
+                  .width(46)
+                  .height(46)
+                  .borderRadius(25)
+                  .margin({ left: 4 })
+                  .id('iv_avatar')
+                Text(LoginManager.getUserInfo()?.vip === 1 ? '非会员' : LoginManager.getUserInfo()?.vip === 3 ? '终身会员' : LoginManager.getUserInfo()?.vip_name)
+                  .fontColor(Color.White)
+                  .fontSize(10)
+                  .textAlign(TextAlign.Center)
+                  .width(46)
+                  .height(16)
+                  .borderRadius(3)
+                  .backgroundColor('#F94747')
+                  .alignRules({
+                    top: { anchor: 'iv_avatar', align: VerticalAlign.Bottom },
+                    left: { anchor: 'iv_avatar', align: HorizontalAlign.Start },
+                    right: { anchor: 'iv_avatar', align: HorizontalAlign.End }
+                  })
+                  .margin({ top: -9 })
+                Text(LoginManager.getUserInfo()?.name)
+                  .fontColor(Color.White)
+                  .fontSize(15)
+                  .fontWeight(FontWeight.Medium)
+                  .alignRules({
+                    top: { anchor: 'iv_avatar', align: VerticalAlign.Top },
+                    bottom: { anchor: 'iv_avatar', align: VerticalAlign.Center },
+                    left: { anchor: 'iv_avatar', align: HorizontalAlign.End }
+                  })
+                  .margin({ left: 12 })
+                  .id('tv_username')
+                Text('ID:' + LoginManager.getUserInfo()?.user_id).fontColor(Color.White).fontSize(12)
+                  .alignRules({
+                    left: { anchor: 'tv_username', align: HorizontalAlign.Start },
+                    top: { anchor: 'iv_avatar', align: VerticalAlign.Center },
+                    bottom: { anchor: 'iv_avatar', align: VerticalAlign.Bottom }
+                  })
+
+                Column() {
+                  Text() {
+                    Span(`${this.diamondInfo?.remain}`).fontSize(22).fontFamily('ddp500m')
+                    Span(' 次').fontSize(12)
+                  }.fontColor(Color.White)
+                  Text('剩余总次数').fontColor(Color.White).fontSize(12)
+                }
+                .alignRules({
+                  top: { anchor: 'iv_avatar', align: VerticalAlign.Top },
+                  right: { anchor: '__container__', align: HorizontalAlign.End },
+                  bottom: { anchor: 'iv_avatar', align: VerticalAlign.Bottom }
+                })
+              }
+              .aspectRatio(2.584)
+              .margin({ top: 120, left: 26, right: 26 })
+              .padding({ top: 16, left: 12, right: 12 })
+              .backgroundImage($r('app.media.ic_diamond_vip_bg1'))
+              .backgroundImageSize({ width: '100%' })
+
+              Image($r('app.media.ic_diamond_vip_bg2')).width('100%').aspectRatio(4.866)
+                .margin({ top: -45 })
 
               Column() {
-                Row() {
-                  Text('本月固定M币数量').fontColor($r('app.color.color_1a1a1a')).fontSize(14)
-                  Text('每月重置')
-                    .textAlign(TextAlign.Center)
-                    .fontColor('#FFA61E')
-                    .fontSize(12)
-                    .height(18)
-                    .padding({ left: 4, right: 4 })
-                    .borderWidth(1)
-                    .borderRadius(4)
-                    .borderColor('#FFA61E')
-                    .margin({left: 8})
-                  Blank().layoutWeight(1)
-                  Text() {
-                    Span(`${this.diamondInfo?.month_used}`).fontColor('#FFA61E').fontSize(20).fontFamily('ddp500m')
-                    Span(`/${this.diamondInfo?.month_total}`).fontColor($r('app.color.color_1a1a1a')).fontSize(14)
+                Text('M币消耗数量').fontColor($r('app.color.color_1a1a1a')).fontSize(16).fontWeight(FontWeight.Medium).margin({ top: 4 })
+
+                Column() {
+                  Row() {
+                    Text('本月固定M币数量').fontColor($r('app.color.color_1a1a1a')).fontSize(14)
+                    Text('每月重置')
+                      .textAlign(TextAlign.Center)
+                      .fontColor('#5B70F6')
+                      .fontSize(12)
+                      .height(18)
+                      .padding({ left: 4, right: 4 })
+                      .borderWidth(1)
+                      .borderRadius(4)
+                      .borderColor('#5B70F6')
+                      .margin({left: 8})
+                    Blank().layoutWeight(1)
+                    Text() {
+                      Span(`${this.diamondInfo?.month_used}`).fontColor('#5B70F6').fontSize(20).fontFamily('ddp500m')
+                      Span(`/${this.diamondInfo?.month_total}`).fontColor($r('app.color.color_1a1a1a')).fontSize(14)
+                    }
                   }
+
+                  Progress({ value: this.diamondInfo?.month_used, total: this.diamondInfo?.month_total, type: ProgressType.Linear })
+                    .width('100%')
+                    .height(10)
+                    .style({ strokeWidth: 10, strokeRadius: 5 })
+                    .color('#5C6FF6')
+                    .borderRadius(5)
+                    .margin({top: 16})
+
+                  Row() {
+                    Text('兑换M币数量').fontColor($r('app.color.color_1a1a1a')).fontSize(14)
+                    Text('用完即止')
+                      .textAlign(TextAlign.Center)
+                      .fontColor('#5B70F6')
+                      .fontSize(12)
+                      .height(18)
+                      .padding({ left: 4, right: 4 })
+                      .borderWidth(1)
+                      .borderRadius(4)
+                      .borderColor('#5B70F6')
+                      .margin({left: 8})
+                    Blank().layoutWeight(1)
+                    Text() {
+                      Span(`${this.diamondInfo?.buy_used}`).fontColor('#5B70F6').fontSize(20).fontFamily('ddp500m')
+                      Span(`/${this.diamondInfo?.buy_total}`).fontColor($r('app.color.color_1a1a1a')).fontSize(14)
+                    }
+                  }.margin({top: 24})
+
+                  Progress({ value: this.diamondInfo?.buy_used, total: this.diamondInfo?.buy_total, type: ProgressType.Linear })
+                    .width('100%')
+                    .height(10)
+                    .style({ strokeWidth: 10, strokeRadius: 5 })
+                    .color('#FF9026')
+                    .borderRadius(5)
+                    .margin({top: 16})
                 }
-
-                Progress({ value: this.diamondInfo?.month_used, total: this.diamondInfo?.month_total, type: ProgressType.Linear })
-                  .width('100%')
-                  .height(10)
-                  .style({ strokeWidth: 10, strokeRadius: 5 })
-                  .color('#FF9026')
-                  .borderRadius(5)
-                  .margin({top: 16})
-
-                Row() {
-                  Text('兑换M币数量').fontColor($r('app.color.color_1a1a1a')).fontSize(14)
-                  Text('用完即止')
-                    .textAlign(TextAlign.Center)
-                    .fontColor('#FFA61E')
-                    .fontSize(12)
-                    .height(18)
-                    .padding({ left: 4, right: 4 })
-                    .borderWidth(1)
-                    .borderRadius(4)
-                    .borderColor('#FFA61E')
-                    .margin({left: 8})
-                  Blank().layoutWeight(1)
-                  Text() {
-                    Span(`${this.diamondInfo?.buy_used}`).fontColor('#FFA61E').fontSize(20).fontFamily('ddp500m')
-                    Span(`/${this.diamondInfo?.buy_total}`).fontColor($r('app.color.color_1a1a1a')).fontSize(14)
-                  }
-                }.margin({top: 24})
-
-                Progress({ value: this.diamondInfo?.buy_used, total: this.diamondInfo?.buy_total, type: ProgressType.Linear })
-                  .width('100%')
-                  .height(10)
-                  .style({ strokeWidth: 10, strokeRadius: 5 })
-                  .color('#FF9026')
-                  .borderRadius(5)
-                  .margin({top: 16})
-              }
-              .backgroundColor(Color.White)
-              .borderRadius(8)
-              .margin({ top: 10 })
-              .padding({
-                left: 12,
-                top: 16,
-                right: 12,
-                bottom: 16
-              })
-            }
-            .alignItems(HorizontalAlign.Start)
-            .height('auto')
-            .padding(10)
-            .margin({ top: -45, left: 16, right: 16 })
-            .backgroundImage($r('app.media.ic_diamond_count_bg'))
-            .backgroundImageSize({ width: '100%' })
-            .borderRadius(10)
-            .clip(true)
-
-            Text('M币套餐').fontColor($r('app.color.color_1a1a1a')).fontSize(16).fontWeight(FontWeight.Medium).margin({left: 16, top: 26})
-              .alignSelf(ItemAlign.Start)
-
-            List({space: 12}) {
-              ForEach(this.diamondList, (item: VipMealEntity) => {
-                ListItem() {
-                  DiamondItemView({ goodInfo: item })
-                }
-                .onClick(() => {
-                  let goodsInfo = this.diamondList.find(item => item.checked) as VipMealEntity
-                  goodsInfo.checked = false
-                  item.checked = true
-                  this.vipMeal = item
-                  this.releasePayType()
+                .backgroundColor(Color.White)
+                .borderRadius(8)
+                .margin({ top: 10 })
+                .padding({
+                  left: 12,
+                  top: 16,
+                  right: 12,
+                  bottom: 16
                 })
-              })
+              }
+              .alignItems(HorizontalAlign.Start)
+              .height('auto')
+              .padding(10)
+              .margin({ top: -45, left: 16, right: 16 })
+              .backgroundImage($r('app.media.ic_diamond_used_count_bg'))
+              .backgroundImageSize({ width: '100%' })
+              .borderRadius(10)
+              .clip(true)
+
+              Text('M币套餐').fontColor($r('app.color.color_1a1a1a')).fontSize(16).fontWeight(FontWeight.Medium).margin({left: 16, top: 26})
+                .alignSelf(ItemAlign.Start)
+
+              List({space: 12}) {
+                ForEach(this.diamondList, (item: VipMealEntity) => {
+                  ListItem() {
+                    DiamondItemView({ goodInfo: item })
+                  }
+                  .onClick(() => {
+                    let goodsInfo = this.diamondList.find(item => item.checked) as VipMealEntity
+                    goodsInfo.checked = false
+                    item.checked = true
+                    this.vipMeal = item
+                    this.releasePayType()
+                  })
+                })
+              }
+              .width('auto')
+              .height('auto')
+              .margin({left: 16, top: 14, right: 16, bottom: 15 })
             }
-            .width('auto')
-            .height('auto')
-            .margin({left: 16, top: 14, right: 16, bottom: 15 })
           }
         }
         .layoutWeight(1)
@@ -382,7 +385,7 @@ struct DiamondPage {
               Image($r('app.media.ic_wx_pay3')).width(26).height(26)
               Text('微信').fontColor($r('app.color.color_1a1a1a')).fontSize(15).margin({left: 10})
               Blank().layoutWeight(1)
-              Image(this.payType === 0 ? $r('app.media.ic_pay_true2') : $r('app.media.ic_pay_false2')).width(18).height(18)
+              Image(this.payType === 0 ? $r('app.media.ic_check_true') : $r('app.media.ic_check_false')).width(18).height(18)
             }.layoutWeight(1)
             .visibility(this.vipMeal?.pay_type.includes('weixin') ? Visibility.Visible : Visibility.None)
             .onClick(() => {
@@ -393,7 +396,7 @@ struct DiamondPage {
               Image($r('app.media.ic_ali_pay3')).width(26).height(26)
               Text('支付宝').fontColor($r('app.color.color_1a1a1a')).fontSize(15).margin({left: 10})
               Blank().layoutWeight(1)
-              Image(this.payType === 1 ? $r('app.media.ic_pay_true2') : $r('app.media.ic_pay_false2')).width(18).height(18)
+              Image(this.payType === 1 ? $r('app.media.ic_check_true') : $r('app.media.ic_check_false')).width(18).height(18)
             }.layoutWeight(1)
             .visibility(this.vipMeal?.pay_type.includes('alipay') ? Visibility.Visible : Visibility.None)
             .onClick(() => {
@@ -407,7 +410,7 @@ struct DiamondPage {
             .fontColor(Color.White)
             .fontSize(16)
             .fontWeight(FontWeight.Medium)
-            .backgroundColor('#FF8D1B')
+            .backgroundColor('#5C6FF6')
             .margin({top: 17})
             .onClick(() => {
               if (this.vipMeal) {
@@ -420,10 +423,10 @@ struct DiamondPage {
       }
 
       TitleBar({
-        title: '素材加油站',
+        title: '次数兑换',
         isDark: false,
         rightText: '规则说明',
-        rightColor: '#6F3A21',
+        rightColor: $r('app.color.color_1a1a1a'),
         onRightClick: () => {
           this.showRuleDialog()
         }

entry/src/main/ets/pages/main/mine/record/AudioRecordPage.ets

@@ -1,13 +1,13 @@
-import { EmptyView, PageStatus } from '../../../view/EmptyView';
-import { AudioRecordItemView, VideoRecordItemView } from '../../../view/RecordItemView';
+import { EmptyView, PageStatus } from '../../../../view/EmptyView';
+import { AudioRecordItemView, VideoRecordItemView } from '../../../../view/RecordItemView';
 import { AppUtil, PermissionUtil } from '@pura/harmony-utils';
-import { ToastUtils } from '../../../utils/ToastUtils';
-import { MediaRecordEntity } from '../../../entity/MediaRecordEntity';
-import { EventConstants } from '../../../common/EventConstants';
-import { MediaAction, MediaManager, MediaType } from '../../../manager/MediaManager';
-import { TipDialog } from '../../../dialog/TipDialog';
+import { ToastUtils } from '../../../../utils/ToastUtils';
+import { MediaRecordEntity } from '../../../../entity/MediaRecordEntity';
+import { EventConstants } from '../../../../common/EventConstants';
+import { MediaAction, MediaManager, MediaType } from '../../../../manager/MediaManager';
+import { TipDialog } from '../../../../dialog/TipDialog';
 import { photoAccessHelper } from '@kit.MediaLibraryKit';
-import { LocalMediaManager } from '../../../manager/LocalMediaManager';
+import { LocalMediaManager } from '../../../../manager/LocalMediaManager';
 import { fileIo } from '@kit.CoreFileKit';
 
 @ComponentV2

entry/src/main/ets/pages/main/mine/record/ImageRecordPage.ets

@@ -1,13 +1,13 @@
-import { EmptyView, PageStatus } from '../../../view/EmptyView';
-import { ImageRecordItemView } from '../../../view/RecordItemView';
+import { EmptyView, PageStatus } from '../../../../view/EmptyView';
+import { ImageRecordItemView } from '../../../../view/RecordItemView';
 import { AppUtil, PermissionUtil } from '@pura/harmony-utils';
-import { ToastUtils } from '../../../utils/ToastUtils';
-import { MediaRecordEntity } from '../../../entity/MediaRecordEntity';
-import { EventConstants } from '../../../common/EventConstants';
-import { MediaAction, MediaManager, MediaType } from '../../../manager/MediaManager';
-import { TipDialog } from '../../../dialog/TipDialog';
+import { ToastUtils } from '../../../../utils/ToastUtils';
+import { MediaRecordEntity } from '../../../../entity/MediaRecordEntity';
+import { EventConstants } from '../../../../common/EventConstants';
+import { MediaAction, MediaManager, MediaType } from '../../../../manager/MediaManager';
+import { TipDialog } from '../../../../dialog/TipDialog';
 import { photoAccessHelper } from '@kit.MediaLibraryKit';
-import { LocalMediaManager } from '../../../manager/LocalMediaManager';
+import { LocalMediaManager } from '../../../../manager/LocalMediaManager';
 
 @ComponentV2
 export struct ImageRecordPage {

entry/src/main/ets/pages/main/mine/record/VideoRecordPage.ets

@@ -1,13 +1,13 @@
-import { EmptyView, PageStatus } from '../../../view/EmptyView';
-import { VideoRecordItemView } from '../../../view/RecordItemView';
+import { EmptyView, PageStatus } from '../../../../view/EmptyView';
+import { VideoRecordItemView } from '../../../../view/RecordItemView';
 import { AppUtil, PermissionUtil } from '@pura/harmony-utils';
-import { ToastUtils } from '../../../utils/ToastUtils';
-import { MediaRecordEntity } from '../../../entity/MediaRecordEntity';
-import { EventConstants } from '../../../common/EventConstants';
-import { MediaAction, MediaManager, MediaType } from '../../../manager/MediaManager';
-import { TipDialog } from '../../../dialog/TipDialog';
+import { ToastUtils } from '../../../../utils/ToastUtils';
+import { MediaRecordEntity } from '../../../../entity/MediaRecordEntity';
+import { EventConstants } from '../../../../common/EventConstants';
+import { MediaAction, MediaManager, MediaType } from '../../../../manager/MediaManager';
+import { TipDialog } from '../../../../dialog/TipDialog';
 import { photoAccessHelper } from '@kit.MediaLibraryKit';
-import { LocalMediaManager } from '../../../manager/LocalMediaManager';
+import { LocalMediaManager } from '../../../../manager/LocalMediaManager';
 
 @ComponentV2
 export struct VideoRecordPage {

entry/src/main/ets/view/DiamondItemView.ets

@@ -7,18 +7,17 @@ export struct DiamondItemView {
 
   build() {
     RelativeContainer() {
-      Image(this.goodInfo?.image).width(24).height(24).id('iv_icon')
-        .margin({left: 16, top: 17})
-      Text() {
-        Span('兑换M币 ').fontSize(15).fontWeight(FontWeight.Medium)
-        Span(this.goodInfo?.value).fontSize(24).fontFamily('ddp500m')
-        Span('个').fontSize(12)
+      Row() {
+        Image(StrUtil.isNotEmpty(this.goodInfo?.image) ? this.goodInfo?.image : $r('app.media.ic_diamond')).width(24).height(24).id('iv_icon')
+        Text() {
+          Span('兑换M币 ').fontSize(15).fontWeight(FontWeight.Medium)
+          Span(this.goodInfo?.value).fontSize(24).fontColor('#FF4529').fontFamily('ddp500m')
+          Span('个').fontSize(12)
+        }
+        .fontColor($r('app.color.color_1a1a1a'))
+        .margin({left: 12})
       }
-      .fontColor($r('app.color.color_1a1a1a'))
-      .alignRules({
-        left: {anchor: 'iv_icon', align: HorizontalAlign.End},
-      })
-      .margin({left: 12, top: 13})
+      .margin({left: 16, top: 16})
       .id('tv_count')
 
       Text(NumberUtil.toNumber(this.goodInfo?.price) / NumberUtil.toNumber(this.goodInfo?.value) + '元一个M币巨优惠')
@@ -39,9 +38,8 @@ export struct DiamondItemView {
       .alignRules({
         top: {anchor: 'tv_desc', align: VerticalAlign.Top},
         right: {anchor: '__container__', align: HorizontalAlign.End},
-        bottom: {anchor: 'tv_desc', align: VerticalAlign.Bottom}
       })
-      .margin({right: 16})
+      .margin({right: 16, top: -5})
 
       if (StrUtil.isNotEmpty(this.goodInfo?.tips)) {
         Text(this.goodInfo?.tips).fontColor('#9E5C0B').fontSize(13)

entry/src/main/ets/view/DiamondRuleItemView.ets

@@ -6,7 +6,7 @@ export struct DiamondRuleItemView {
 
   build() {
     Column() {
-      Text(this.entity?.title).fontColor($r('app.color.color_666666')).fontSize(15)
+      Text(this.entity?.title).fontColor($r('app.color.color_1a1a1a')).fontSize(15).fontWeight(FontWeight.Medium)
       Text(this.entity?.desc).fontColor($r('app.color.color_666666')).fontSize(14).margin({top: 10})
     }
     .width('100%')

entry/src/main/ets/viewModel/MaterialViewModel.ets

@@ -0,0 +1,40 @@
+import { plainToInstance } from 'class-transformer';
+import { MaterialCateEntity } from '../entity/MaterialCateEntity';
+import { MaterialEntity } from '../entity/MaterialEntity';
+import { apiService } from '../net/ApiService';
+import { ToastUtils } from '../utils/ToastUtils';
+import { BaseViewModel } from './BaseViewModel';
+
+@ObservedV2
+export class MaterialViewModel extends BaseViewModel {
+  @Trace cateList?: Array<MaterialCateEntity>;
+  @Trace materialList?: Array<MaterialEntity>;
+
+  async getMaterialCaleList() {
+    try {
+      const result = await apiService.getMaterialCateList();
+      if (result.isSuccess()) {
+        this.cateList = plainToInstance(MaterialCateEntity, result.data!!['items'] as Array<Object>);
+      } else {
+        ToastUtils.show(result.message, true);
+      }
+    } catch (e) {
+      console.log(e);
+      ToastUtils.show(e);
+    }
+  }
+
+  async getMaterialList(page: number, cateId: string, keywords: string) {
+    try {
+      const result = await apiService.getMaterialList(page.toString(), cateId, keywords);
+      if (result.isSuccess()) {
+        this.materialList = plainToInstance(MaterialEntity, result.data!!['items'] as Array<Object>);
+      } else {
+        ToastUtils.show(result.message, true);
+      }
+    } catch (e) {
+      console.log(e);
+      ToastUtils.show(e);
+    }
+  }
+}