直播中充值

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

@@ -50,6 +50,7 @@
         <div class="left">
           <img src="img/credit.png" alt="" class="credit" />
           <span class="credit-num">{{ wallet.balance }}</span>
+          <div class="recharge" (click)="showRechargeModal = true">充值</div>
         </div>
         <div class="btns">
           @if (currentGift?.id) {
@@ -65,14 +66,15 @@
             (blur)="onChange()"
             [disabled]="!currentGift?.id"
           />
-          @if (currentGift?.type == 'vip' && !accServ.userVip?.rights?.['exclusive-gift']) {
-            <div class="btn-item btn-disabled">
-              <span>会员专享</span>
-            </div>
+          @if (currentGift?.type == 'vip' &&
+          !accServ.userVip?.rights?.['exclusive-gift']) {
+          <div class="btn-item btn-disabled">
+            <span>会员专享</span>
+          </div>
           }@else {
-            <div class="btn-item" (click)="sendGift()">
-              <span>赠送</span>
-            </div>
+          <div class="btn-item" (click)="sendGift()">
+            <span>赠送</span>
+          </div>
           }
         </div>
       </div>
@@ -84,4 +86,20 @@
   <img [src]="currentGift?.imgUrl" alt="" />
 </div>
 } -->
-<div class="vap-warp" [id]="domId"></div>
+<div class="vap-warp" [id]="domId"></div>
+
+<ion-modal
+  #modal
+  [isOpen]="showRechargeModal"
+  [initialBreakpoint]="1"
+  [breakpoints]="[0, 1]"
+  (didDismiss)="showRechargeModal = false"
+  class="recharge-modal"
+>
+  <ng-template>
+    <app-recharge
+      [isComp]="true"
+      (complete)="onRecharge($event)"
+    ></app-recharge>
+  </ng-template>
+</ion-modal>

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

@@ -90,6 +90,13 @@
         height: 2.5641vw;
         margin-right: 1.5385vw;
       }
+      .recharge{
+        background: #0054e9;
+        color: white;
+        padding: 2px 4px;
+        border-radius: 4px;
+        margin-left: 4px;
+      }
     }
     .btns {
       display: flex;
@@ -133,6 +140,10 @@
     bottom: 0;
   }
 }
+.recharge-modal{
+  --height: 80%;
+
+}
 @keyframes scaleUp {
   0% {
     transform: scale(0.1); /* 从0.1倍大小开始 */

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

@@ -12,18 +12,24 @@ import {
 } from '../../../modules/ionic-standalone.modules';
 import { AccountService } from '../../../services/account.service';
 import { MessageService } from '../../../services/message.service';
-import {VapInit} from '../../../lib/vap-player/index'
+import { VapInit } from '../../../lib/vap-player/index';
+import { RechargeComponent } from '../../../modules/account/recharge/recharge.component';
 
 @Component({
   selector: 'app-gift-modal',
   templateUrl: './gift-modal.component.html',
   styleUrls: ['./gift-modal.component.scss'],
   standalone: true,
-  imports: [...ionicStandaloneModules, CommonModule, FormsModule],
+  imports: [
+    ...ionicStandaloneModules,
+    CommonModule,
+    FormsModule,
+    RechargeComponent,
+  ],
 })
 export class GiftModalComponent implements OnInit {
   @Input('toUid') toUid!: string; // 接收礼物的uid
-  @Input('domId') domId: string = 'vap-warp'
+  @Input('domId') domId: string = 'vap-warp';
   isOpenGift: boolean = false; // 是否显示礼物弹窗
   giftList: Array<any> = [];
   tabs: Array<any> = [
@@ -48,6 +54,13 @@ export class GiftModalComponent implements OnInit {
   times: any;
   @Output() sendEmit: EventEmitter<any> = new EventEmitter<any>();
 
+  showRechargeModal: boolean = false;
+  options: Array<number> = [30, 50, 100, 200, 500, 1000, 2000, 5000];
+  company = localStorage.getItem('company');
+  account?: Parse.Object;
+  loading: any;
+  tradeNo: string = ''; //支付单号
+
   constructor(
     private aiServ: AiChatService,
     private alertController: AlertController,
@@ -56,13 +69,12 @@ export class GiftModalComponent implements OnInit {
     public accServ: AccountService,
     public toastController: ToastController,
     public msgSerrvice: MessageService
-  ) {
-  }
+  ) {}
   async ngOnInit() {
     this.giftList = this.msgSerrvice.giftList;
-    setTimeout(()=>{
-      this.selectTab("all")
-    },200)
+    setTimeout(() => {
+      this.selectTab('all');
+    }, 200);
   }
   async openModal() {
     let uid: any = Parse.User.current()?.id;
@@ -82,7 +94,10 @@ export class GiftModalComponent implements OnInit {
 
   async sendGift() {
     let _this = this;
-    if(!this.wallet?.balance || this.wallet.balance < this.currentGift.price * this.giftCount){
+    if (
+      !this.wallet?.balance ||
+      this.wallet.balance < this.currentGift.price * this.giftCount
+    ) {
       const toast = await this.toastController.create({
         message: '余额不足',
         color: 'danger',
@@ -114,7 +129,7 @@ export class GiftModalComponent implements OnInit {
               .putGift(_this.toUid, _this.currentGift.id, _this.giftCount)
               .then((data) => {
                 console.log(data);
-                // _this.liveService.get_duration();
+                _this.liveService.get_duration();
                 loading.dismiss();
                 _this.sendEmit.emit(); //触发父组件的sendEmit事件
                 _this.isOpenGift = false;
@@ -126,7 +141,7 @@ export class GiftModalComponent implements OnInit {
                 //   console.log('5s后关闭');
                 // }, 5000);
                 setTimeout(() => {
-                  this.initPlayer()
+                  this.initPlayer();
                 }, 0);
               })
               .catch((err) => {
@@ -141,12 +156,11 @@ export class GiftModalComponent implements OnInit {
     await alert.present();
   }
 
-  
-  initPlayer(){
-    console.log('送出礼物',this.currentGift);
-    let json = this.currentGift.config
-    let dom:any = document.getElementById(this.domId);
-    let vapPlayer:any = VapInit({
+  initPlayer() {
+    console.log('送出礼物', this.currentGift);
+    let json = this.currentGift.config;
+    let dom: any = document.getElementById(this.domId);
+    let vapPlayer: any = VapInit({
       container: dom, // 要渲染的载体，dom元素
       src: this.currentGift.video, // vap动画地址
       config: json, // 播放vap动画需要的 json文件。必填
@@ -167,7 +181,9 @@ export class GiftModalComponent implements OnInit {
       vapPlayer = null;
       console.log('play end');
     });
-    vapPlayer.on('playering', function() { console.log('playering'); })
+    vapPlayer.on('playering', function () {
+      console.log('playering');
+    });
   }
 
   onCloseGiftModal() {
@@ -184,4 +200,15 @@ export class GiftModalComponent implements OnInit {
       this.toUid
     );
   }
+
+  /* 充值返回结果 */
+  async onRecharge(e: any) {
+    console.log(e);
+    if (e) {
+      let uid: any = Parse.User.current()?.id;
+      this.wallet = await this.aiServ.getWallet(uid);
+      this.liveService.get_duration();
+    }
+    this.showRechargeModal = false;
+  }
 }

projects/live-app/src/modules/account/recharge/recharge.component.html

@@ -1,4 +1,18 @@
-<nav title="充值"></nav>
+@if (!isComp) {
+  <nav title="充值"></nav>
+}@else {
+  <ion-header [translucent]="true" class="header">
+    <ion-toolbar class="toolbar">
+        <ion-buttons slot="start" (click)="complete.emit()">
+          <ion-icon
+            name="chevron-back-outline"
+            style="width: 6.4vw; height: 6.4vw; color: #000000"
+          ></ion-icon>
+        </ion-buttons>
+      <ion-title class="title">充值</ion-title>
+    </ion-toolbar>
+  </ion-header>
+}
 <div class="recharge-content">
   <div class="options">
     @for (val of options; track $index) {

projects/live-app/src/modules/account/recharge/recharge.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import * as Parse from 'parse';
 import { HttpClient } from '@angular/common/http';
@@ -24,6 +24,9 @@ import {
   ],
 })
 export class RechargeComponent implements OnInit {
+  @Input('isComp') isComp: boolean = false; // 是否作为组件显示
+  @Output() complete: EventEmitter<any> = new EventEmitter<any>(); //完成触发
+
   @ViewChild('paycomp') paycomp!: PayCompComponent;
   options: Array<number> = [30, 50, 100, 200, 500, 1000, 2000, 5000];
   price: any = 0;
@@ -88,5 +91,6 @@ export class RechargeComponent implements OnInit {
   onComplete(evet: any) {
     console.log(evet);
     this.tradeNo = evet.tradeNo;
+    if(evet?.code) this.complete.emit(true);
   }
 }

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

@@ -376,7 +376,8 @@ export class LiveService {
     if (this.liveLog?.id) {
       this.liveLog?.set('isLive', true);
       await this.liveLog?.save();
-      this.get_duration();
+      await this.get_duration();
+      this.getCallDuration()
       return;
     }
     this.timer = setTimeout(() => {
@@ -394,11 +395,11 @@ export class LiveService {
     console.log(data);
     this.surplusNumber = data.data ?? 0;
     this.countdown = this.surplusNumber; // 初始化倒计时
-    if (this.countdown <= 120) {
-      this.alertTips('剩余通话时间不足2分钟，请及时充值');
-    }
     let arr = ['RECONNECTING', 'DISCONNECTED', 'DISCONNECTING'];
     if (!arr.includes(this.connection_state as any)) {
+      if (this.countdown <= 120) {
+        this.alertTips('剩余通话时间不足2分钟，请及时充值');
+      }
       this.startCountdown();
     }
   }
@@ -436,6 +437,14 @@ export class LiveService {
       this.computeDuration();
     }, num ?? 10000);
   }
+  /* 主播每10s获取一次对方可通话时长 */
+  getCallDuration(){
+    this.timer && clearTimeout(this.timer);
+    this.timer = setTimeout(async() => {
+      await this.get_duration();
+      this.getCallDuration();
+    });
+  }
   /* 监听音视频设备插拔 */
   monitorDevices() {
     AgoraRTC.onMicrophoneChanged = async (changedDevice: any) => {