头像框动态显示

build.android.md

@@ -1,10 +1,12 @@
 # 安装
-  - cnpm install
+  - npm install
   - 配置好java SKD 环境
   - 配置好Android 环境(adb命令正常)
 # cap打包
   ## 一、打包web资源到www文件内
-  - ionic build --project=live-app//默认打包 或者 ng build live-app --output-path=www/live-app
+  - ng build live-app --output-path=www //默认打包
+    或者 ionic build --project=live-app
+  - 打包好后把所有文件放到www子目录
   ## 二、添加 Android 平台
   - npx cap add android 添加 Android 平台
   - npx cap sync android  同步你的项目配置到Android平台（如果尚未添加）
@@ -60,11 +62,12 @@
     <uses-permission android:name="android.permission.READ_PHONE_STATE"/>
     <uses-permission android:name="android.permission.BLUETOOTH_SCAN"/>
   ```
-
-  ## 三、打包 Android 平台
+  ## 三、生成密钥签名
+   - keytool -genkey -v -keystore heychat.keystore -alias heychat -keyalg RSA -keysize 2048 -validity 10000 （最外根目录已生成heychat.keystore文件，直接复制到android根目录）
+  ## 四、打包 Android 平台
    - npx cap build android 构建 Android 应用
    
-  ##  四、打开 Android Studio（可选）
+  ##  五、打开 Android Studio（可选）
   - npx cap open android 这将自动启动 Android Studio 并打开 android 文件夹中的项目
 # cordova打包（弃用）
   - ionic cordova build android --release

projects/live-app/src/app/app.routes.ts

@@ -9,10 +9,6 @@ import { GoodsRoutingModule } from '../modules/goods/goods.modules.routes';
 import { LiveRoutingModule } from '../modules/live/live.modules.routes';
 export const routes: Routes = [
   { path: '', redirectTo:'tabs', pathMatch: "full",}, // 默认跳转到 ''
-  // {
-  //   path: 'test',
-  //   loadComponent:()=> import('../modules/test/page-test/page-test.component').then((mod) => mod.PageTestComponent),
-  // },
   {
     path: 'login',
     loadComponent:()=> import('../modules/login/login.component').then((mod) => mod.LoginComponent),

projects/live-app/src/app/components/avatar/avatar.component.ts

@@ -9,7 +9,7 @@ import SVGA from 'svgaplayerweb';
 export class AvatarComponent implements OnInit {
   @Input('avatar') avatar: string =
     'https://file-cloud.fmode.cn/DXNgcD6zo6/20221202/j6p8kb034039.png'; //头像
-  @Input('frame') frame: string = '/svga/头像框001.svga'; //头像框
+  @Input('frame') frame?: string; //头像框
   @Input('frameId') frameId: string = 'avatar-frame'; //头像框id
 
   @Input('size') size: number = 80; //外框大小
@@ -26,10 +26,12 @@ export class AvatarComponent implements OnInit {
     }, 0);
   }
   ngOnDestroy(): void {
-    this.player.clearDynamicObjects();
+    this.player?.clearDynamicObjects();
     delete this.player;
   }
   initSVGA() {
+    if(!this.frame) return
+    let path = `/svga/头像框${this.frame}.svga`
     this.player = new SVGA.Player(`#${this.frameId}`);
     this.player.clearsAfterStop = false;
     this.player.onFinished(() => {
@@ -38,7 +40,7 @@ export class AvatarComponent implements OnInit {
     // this.player.onPercentage((val:any)=> console.log(val))
     let parser = new SVGA.Parser(); // 如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。
     parser.load(
-      this.frame,
+      path,
       (videoItem) => {
         console.log('load success');
         this.player.setVideoItem(videoItem);

projects/live-app/src/modules/goods/vip/vip.component.html

@@ -4,11 +4,14 @@
   <div class="combo_index">
     <div class="combo-info">
       <!-- <img class="img" [src]="user?.get('avatar')" mode="aspectFill" /> -->
-      <app-avatar
-        [avatar]="user?.get('avatar')"
-        style="z-index: 99"
-        frameId="vip-avatar-frame"
-      />
+      @if(!loading){
+        <app-avatar
+          [avatar]="user?.get('avatar')"
+          style="z-index: 99"
+          frameId="vip-avatar-frame"
+          [frame]="myVip['rights']['avatar']"
+        />
+      }
       <div class="name">
         {{ user.get("nickname") || user.get("name") || user.get("mobile") }}
       </div>
@@ -44,6 +47,9 @@
           <img src="img/VIP.png" alt="" />
         </div>
         <div class="price">
+          @if (item?.get("originalPrice") > item?.get("price")) {
+          <span class="original-price">￥{{item?.get("originalPrice")}}</span>
+          }
           ￥{{ item?.get("price") }}
           <span class="duration"
             >{{ item?.get("services")[0]?.get("duration") }}天</span
@@ -52,7 +58,9 @@
       </div>
       <div class="title-info">
         <div class="list">
-          @if (item?.get("services")[0]?.get("rights")['view-profile']) {
+          @if (item?.get("services")[0]?.get("rights")['avatar']) {
+          <div class="label">专属头像框</div>
+          } @if (item?.get("services")[0]?.get("rights")['view-profile']) {
           <div class="label">查看主播全部信息</div>
           } @if (item?.get("services")[0]?.get("rights")['vip-service']) {
           <div class="label">专属客服</div>

projects/live-app/src/modules/goods/vip/vip.component.scss

@@ -91,6 +91,12 @@
           font-size: 5.641vw;
           color: #d50b15;
           font-weight: 600;
+          .original-price{
+            font-weight: 400;
+            font-size: 16px;
+            color: #acacac;
+            text-decoration: line-through;
+          }
           .duration {
             // color: #ffca22;
             font-weight: 500;

projects/live-app/src/modules/goods/vip/vip.component.ts

@@ -41,6 +41,7 @@ export class VipComponent implements OnInit {
   price: number = 0;
   tradeNo: string = ''; //支付单号
   orderId?: string;
+  loading: boolean = true;
   constructor(
     private modalController: ModalController,
     public toastController: ToastController,
@@ -52,15 +53,15 @@ export class VipComponent implements OnInit {
   ngOnInit() {
     this.refresh();
   }
-  refresh() {
-    this.getGoods();
-    this.getUserVip();
+  async refresh() {
+    await this.getGoods();
+    await this.getUserVip();
     this.getAgreement();
+    this.loading = false;
   }
   //获取当前VIP等级
   async getUserVip() {
     this.myVip = await this.accServ.getVip()
-    console.log(this.myVip);
   }
   async getGoods() {
     let goods = new Parse.Query('ShopGoods');

projects/live-app/src/modules/live/link-page/link-page.component.html

@@ -6,13 +6,16 @@
         [src]="room?.get('user')?.get('avatar')"
         alt="avatar"
       /> -->
+      @if(!loading){
       <app-avatar
         [avatar]="room?.get('user')?.get('avatar')"
         style="z-index: 99"
         frameId="live-avatar-frame"
         [size]="42"
         [avatarSize]="30"
+        [frame]="userVip['rights']['avatar']"
       />
+      }
       <div class="profile-title">
         <div class="profile-name">{{ room?.get("user")?.get("nickname") }}</div>
         <div class="level">LV:1</div>

projects/live-app/src/modules/live/link-page/link-page.component.ts

@@ -19,6 +19,7 @@ import {
 import { MessageService } from '../../../services/message.service';
 import { FlutterCompComponent } from '../../../app/components/flutter-comp/flutter-comp.component';
 import { AvatarComponent } from '../../../app/components/avatar/avatar.component';
+import { AccountService } from '../../../services/account.service';
 @Component({
   selector: 'app-link-page',
   templateUrl: './link-page.component.html',
@@ -47,13 +48,15 @@ export class LinkPageComponent implements OnInit {
   text: string = '';
   disabled: boolean = false;
   showEmoji: boolean = false;
-
+  loading: boolean = true;
+  userVip:any
   constructor(
     public toastController: ToastController,
     private loadingCtrl: LoadingController,
     private alertController: AlertController,
     private activateRoute: ActivatedRoute,
     public aiServ: AiChatService,
+    private accServ: AccountService,
     public msgServe: MessageService,
     public liveService: LiveService
   ) {
@@ -90,8 +93,10 @@ export class LinkPageComponent implements OnInit {
     });
     loading.present();
     await this.getRoom();
+    this.userVip = await this.accServ.getVip(this.room?.get('user').id)
     this.initSwiperTimeEvent();
     loading.dismiss();
+    this.loading = false;
   }
   async getRoom() {
     let query = new Parse.Query('Room');

projects/live-app/src/modules/tabs/home/home.component.ts

@@ -38,7 +38,7 @@ export class HomeComponent implements OnInit {
       color: 'primary',
     },
     {
-      label: '推荐',
+      label: '热门',
       value: 'recommend',
       icon: 'home-outline',
       color: 'primary',

projects/live-app/src/modules/tabs/my/my.component.html

@@ -1,7 +1,12 @@
 <ion-content class="content">
   <div class="header" [style.background-image]="'url(img/bg.png)'">
     <div class="user-dateil">
-      <app-avatar [avatar]="user.get('avatar')" />
+      @if(!loading){
+      <app-avatar
+        [avatar]="user.get('avatar')"
+        [frame]="userObj.vip?.rights['avatar']"
+      />
+      }
       <div class="user-right">
         <div class="user-name">
           {{
@@ -24,7 +29,7 @@
                 src="https://file-cloud.fmode.cn/Qje9D4bqol/20241109/pctmvt110807052.png"
                 alt=""
               />
-              {{profile?.get('birthdate') || "未知"}}
+              {{ profile?.get("birthdate") || "未知" }}
             </div>
             <div class="id">ID:{{ user.id }}</div>
           </div>
@@ -49,7 +54,7 @@
       <div class="vip-date" (click)="toUrl('goods/vip')">
         <!-- 到期时间：{{ userObj.vip?.expiredAt | date : "yyyy-MM-dd"
         }} -->
-        剩余天数：{{userObj.vip?.daysLeft}}
+        剩余天数：{{ userObj.vip?.daysLeft }}
         <ion-icon name="chevron-forward"></ion-icon>
       </div>
     </div>
@@ -94,7 +99,12 @@
         <div class="top1">
           <div class="user-block">
             <div class="user-avatar">
-              <img src="img/1.png" alt="" class="tag" style="transform: rotate(90deg);" />
+              <img
+                src="img/1.png"
+                alt=""
+                class="tag"
+                style="transform: rotate(90deg)"
+              />
               <img [src]="orderList[0]?.avatar" class="avatar" alt="" />
             </div>
             <div class="user-name">

projects/live-app/src/modules/tabs/my/my.component.ts

@@ -69,6 +69,7 @@ export class MyComponent implements OnInit {
     vip: null,
   };
   orderList: Array<any> = [];
+  loading: boolean = true;
   ngOnInit() {
     this.activateRoute.paramMap.subscribe(async (params) => {
       this.refresh();
@@ -93,6 +94,7 @@ export class MyComponent implements OnInit {
       this.userObj.vip = await this.accServ.getVip();
     }
     loading.dismiss();
+    this.loading = false;
   }
   // 获取用户信息
   async getProfile() {

projects/live-app/src/modules/test/page-test/page-test.component.html

@@ -1,2 +0,0 @@
-<p>page-test works!</p>
-<h1>test</h1>

projects/live-app/src/modules/test/page-test/page-test.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PageTestComponent } from './page-test.component';
-
-describe('PageTestComponent', () => {
-  let component: PageTestComponent;
-  let fixture: ComponentFixture<PageTestComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PageTestComponent]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(PageTestComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

projects/live-app/src/modules/test/page-test/page-test.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-page-test',
-  standalone: true,
-  imports: [],
-  templateUrl: './page-test.component.html',
-  styleUrl: './page-test.component.scss'
-})
-export class PageTestComponent {
-
-}

projects/live-app/src/modules/user/profile/profile.component.html

@@ -20,11 +20,14 @@
               alt=""
             />
           </div> -->
-          <app-avatar
-            [avatar]="profile?.get('user')?.get('avatar')"
-            style="z-index: 99"
-            frameId="profile-avatar-frame"
-          />
+          @if(!loading){
+            <app-avatar
+              [avatar]="profile?.get('user')?.get('avatar')"
+              style="z-index: 99"
+              frameId="profile-avatar-frame"
+              [frame]="userVip['rights']['avatar']"
+            />
+          }
           <div class="top-right-block">
             <div class="top-left-title">{{ profile?.get("name") }}</div>
             @if (user?.get('sex') == '男') {

projects/live-app/src/modules/user/profile/profile.component.ts

@@ -65,6 +65,9 @@ export class ProfileComponent implements OnInit {
   // iscall: boolean = false;
   // isLiveing: boolean = false; // 是否在直播通话中
   userStatus: string = 'OFFLINE';
+  loading: boolean = true;
+  userVip:any
+
   constructor(
     private activateRoute: ActivatedRoute,
     private router: Router,
@@ -130,6 +133,7 @@ export class ProfileComponent implements OnInit {
       message: '加载中',
     });
     loading.present();
+    this.userVip = await this.accServ.getVip(this.uid)
     await this.getFriends();
     await this.getProfile();
     await this.getFollwState();
@@ -142,6 +146,7 @@ export class ProfileComponent implements OnInit {
     this.browseLog()
     // this.getRoom();
     loading.dismiss();
+    this.loading = false;
   }
   async getFriends() {
     let query1 = new Parse.Query('Friends');

projects/live-app/src/services/account.service.ts

@@ -395,10 +395,10 @@ export class AccountService {
     return accountLog;
   }
 
-  async getVip():Promise<any>{
+  async getVip(uid?:string):Promise<any>{
     const url = 'https://server.fmode.cn/api/user/vip'
-    let data = await this.httpSver.httpRequst(url,{uid: Parse.User.current()?.id},'POST');
-    this.userVip = data.data
+    let data = await this.httpSver.httpRequst(url,{uid: uid ?? Parse.User.current()?.id},'POST');
+    if(!uid) this.userVip = data.data
     return data.data
   }
 }

projects/live-app/src/styles.scss

@@ -13,6 +13,7 @@ body{
   height: 100%;
   max-height: 100%;
   font-size: 16px;
+  overflow-x: hidden;
 }
 @import "@ionic/angular/css/core.css";
 @import "@ionic/angular/css/normalize.css";