礼物对接

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

@@ -1,11 +1,11 @@
 <div
   class="pendant"
-  [style.height]="frameWt + 'px'"
-  [style.width]="frameWt + 'px'"
+  [style.height]="size + 'px'"
+  [style.width]="size + 'px'"
 >
   <img
-    [style.height]="avatarWt + 'px'"
-    [style.width]="avatarWt + 'px'"
+    [style.height]="avatarSize + 'px'"
+    [style.width]="avatarSize + 'px'"
     class="avatar"
     [src]="avatar"
     alt=""

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

@@ -9,11 +9,11 @@ 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/102599头像框.svga'; //头像框
+  @Input('frame') frame: string = '/svga/头像框001.svga'; //头像框
   @Input('frameId') frameId: string = 'avatar-frame'; //头像框id
 
-  @Input('frameWt') frameWt: number = 80; //外框大小
-  @Input('avatarWt') avatarWt: number = 48; //头像大小
+  @Input('size') size: number = 80; //外框大小
+  @Input('avatarSize') avatarSize: number = 48; //头像大小
 
   player: any; //头像框动画
 

projects/live-app/src/app/components/gift-modal/gift-modal.component.html

@@ -84,4 +84,4 @@
   <img [src]="currentGift?.imgUrl" alt="" />
 </div>
 } -->
-<div class="vap-warp" id="vap-warp"></div>
+<div class="vap-warp" [id]="domId"></div>

projects/live-app/src/app/components/gift-modal/gift-modal.component.ts

@@ -22,7 +22,7 @@ declare const Vap: any;
 })
 export class GiftModalComponent implements OnInit {
   @Input('toUid') toUid!: string; // 接收礼物的uid
-
+  @Input('domId') domId: string = 'vap-warp'
   isOpenGift: boolean = false; // 是否显示礼物弹窗
   giftList: Array<any> = [];
   tabs: Array<any> = [
@@ -129,9 +129,9 @@ export class GiftModalComponent implements OnInit {
 
   
   initPlayer(){
-    console.log('emit 送出礼物');
+    console.log('送出礼物',this.currentGift);
     let json = this.currentGift.config
-    let dom = document.getElementById('vap-warp');
+    let dom = document.getElementById(this.domId);
     let vapPlayer = new Vap.default({
       container: dom, // 要渲染的载体，dom元素
       src: this.currentGift.video, // vap动画地址

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

@@ -3,8 +3,15 @@
   @if (goodsList.length > 0) {
   <div class="combo_index">
     <div class="combo-info">
-      <img class="img" [src]="user?.get('avatar')" mode="aspectFill" />
-      <div class="name">{{ user.get("nickname") || user.get("name") || user.get("mobile") }}</div>
+      <!-- <img class="img" [src]="user?.get('avatar')" mode="aspectFill" /> -->
+      <app-avatar
+        [avatar]="user?.get('avatar')"
+        style="z-index: 99"
+        frameId="vip-avatar-frame"
+      />
+      <div class="name">
+        {{ user.get("nickname") || user.get("name") || user.get("mobile") }}
+      </div>
       <div class="text-info">
         @if (myVip?.expiredAt) {
         <div class="text-top">
@@ -12,11 +19,13 @@
             {{ myVip.name }}<img src="img/VIP.png" alt="" />
           </div>
           <div class="text-span">
-            <div class="date">有效期至：{{ myVip.expiredAt | date:"yyyy年MM月dd日" }}</div>
+            <div class="date">
+              有效期至：{{ myVip.expiredAt | date : "yyyy年MM月dd日" }}
+            </div>
           </div>
         </div>
         } @else{
-        <div class="text-top" style="color:#fff">到期或未开通</div>
+        <div class="text-top" style="color: #fff">到期或未开通</div>
         }
       </div>
       <div class="alink" (click)="toUrl('account/order')">开通记录</div>
@@ -67,7 +76,8 @@
     <div class="member-title">会员服务说明</div>
     <div class="detail-title">关于虚拟产品说明</div>
     <div class="detail-text">
-      购买即表示同意<span (click)="showAgreement()">《{{registerAgreement?.get('title')}}》</span
+      购买即表示同意<span (click)="showAgreement()"
+        >《{{ registerAgreement?.get("title") }}》</span
       >，会员服务为虚拟产品，因此购买之后无法进行退换货。
     </div>
     <div class="detail-title">会员购买期限</div>

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

@@ -10,6 +10,7 @@ import { PayCompComponent } from '../../../app/components/pay-comp/pay-comp.comp
 import { AccountService } from '../../../services/account.service';
 import { ionicStandaloneModules } from '../../ionic-standalone.modules';
 import { Router } from '@angular/router';
+import { AvatarComponent } from '../../../app/components/avatar/avatar.component';
 
 @Component({
   selector: 'app-vip',
@@ -22,6 +23,7 @@ import { Router } from '@angular/router';
     CommonModule,
     FormsModule,
     PayCompComponent,
+    AvatarComponent
   ],
   providers: [DatePipe],
 })

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

@@ -1,10 +1,17 @@
 <ion-content class="content">
   <div class="nav-data">
     <div class="room-data">
-      <img
+      <!-- <img
         class="avatar"
         [src]="room?.get('user')?.get('avatar')"
         alt="avatar"
+      /> -->
+      <app-avatar
+        [avatar]="room?.get('user')?.get('avatar')"
+        style="z-index: 99"
+        frameId="live-avatar-frame"
+        [size]="42"
+        [avatarSize]="30"
       />
       <div class="profile-title">
         <div class="profile-name">{{ room?.get("user")?.get("nickname") }}</div>
@@ -108,7 +115,7 @@
           </div>
         </div>
         <div class="swiper-slide chat-template">
-          <div 
+          <div
             [ngClass]="{
               'chat-list': true,
               'langh': !liveService.isAnchor,
@@ -186,8 +193,9 @@
 @if (this.room?.id) {
 <app-gift-modal
   #gift
+  [domId]="'live-vap-warp'"
   (sendEmit)="onSendGift()"
   [toUid]="this.room?.get('user').id"
 ></app-gift-modal>
 }
-<app-flutter-comp/>
+<app-flutter-comp />

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

@@ -20,10 +20,10 @@
       border-radius: 10.2564vw;
       padding: 1.0256vw;
       border: 0.2564vw solid rgb(255 255 255 / 30%);
-      .avatar {
-        width: 9.2308vw;
-        height: 9.2308vw;
-      }
+      // .avatar {
+      //   width: 9.2308vw;
+      //   height: 9.2308vw;
+      // }
       .profile-title {
         display: flex;
         flex-direction: column;

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

@@ -18,6 +18,7 @@ import {
 } from '../../ionic-standalone.modules';
 import { MessageService } from '../../../services/message.service';
 import { FlutterCompComponent } from '../../../app/components/flutter-comp/flutter-comp.component';
+import { AvatarComponent } from '../../../app/components/avatar/avatar.component';
 @Component({
   selector: 'app-link-page',
   templateUrl: './link-page.component.html',
@@ -30,7 +31,8 @@ import { FlutterCompComponent } from '../../../app/components/flutter-comp/flutt
     CommonModule,
     SharedModule,
     GiftModalComponent,
-    FlutterCompComponent
+    FlutterCompComponent,
+    AvatarComponent
   ],
 })
 export class LinkPageComponent implements OnInit {

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

@@ -33,10 +33,10 @@
       <ion-label>直播</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="order">
+    <!-- <ion-tab-button tab="order">
       <ion-icon name="order-outline"></ion-icon>
       <ion-label>排名</ion-label>
-    </ion-tab-button>
+    </ion-tab-button> -->
 
     <ion-tab-button tab="my">
       <ion-icon name="my-outline"></ion-icon>

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

@@ -59,12 +59,12 @@ export class TabsComponent implements OnInit {
       url: 'tabs/space',
       name: '种花',
     },
-    {
-      src: 'img/排名.png',
-      active: 'img/排名_active.png',
-      url: 'tabs/ranking',
-      name: '排名',
-    },
+    // {
+    //   src: 'img/排名.png',
+    //   active: 'img/排名_active.png',
+    //   url: 'tabs/ranking',
+    //   name: '排名',
+    // },
     {
       src: 'img/我的.png',
       active: 'img/我的_active.png',

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

@@ -407,7 +407,7 @@ export class LiveService {
     this.timer_countdown = setInterval(() => {
       if (this.countdown > 0) {
         this.countdown--;
-        console.log(this.countdown);
+        // console.log(this.countdown);
       } else {
         clearInterval(this.timer_countdown);
         this.alertTips('通话时间结束');