Quellcode durchsuchen

update 成为主播

warrior vor 4 Monaten
Ursprung
Commit
bf9854a421

+ 19 - 5
projects/live-app/src/app/components/upload/upload.component.html

@@ -7,7 +7,22 @@
 >
   @for (item of fileList; track $index) {
   <div class="image-content">
-    <img (click)="onPreview(item.url)" [style.height]="fileHeight + 'px'" [src]="item.url" alt="" />
+    @switch (type) { @case ('image') {
+    <img
+      (click)="onPreview(item.url)"
+      [style.height]="fileHeight + 'px'"
+      [src]="item.url"
+      alt=""
+    />
+    } @case ('video') {
+    <video [style.height]="fileHeight + 'px'" [src]="item.url" alt=""></video>
+    } @default {
+    <ion-icon
+      name="document-outline"
+      [style.height]="fileHeight + 'px'"
+      [style.width]="fileWidth + 'px'"
+    ></ion-icon>
+   } }
     <div class="del" (click)="onDelete($index)">
       <ion-icon name="close-outline"></ion-icon>
     </div>
@@ -29,8 +44,7 @@
   }
 </div>
 @if (currentPreviewImg) {
-  <div class="preview" (click)="currentPreviewImg = ''">
-    <img [src]="currentPreviewImg" alt="">
-  </div>
+<div class="preview" (click)="currentPreviewImg = ''">
+  <img [src]="currentPreviewImg" alt="" />
+</div>
 }
-

+ 5 - 2
projects/live-app/src/app/components/upload/upload.component.ts

@@ -22,6 +22,8 @@ export class UploadComponent implements OnInit {
   @Input('maxlenght') maxlenght: number = 1; //文件数量限制
   @Input('type') type: string = 'image';
   @Input('size') size: number = 2048; //上传文件限制大小单位KB
+  @Input('active') active: boolean = false; //选择文件后主动触发上传
+
   @Input('multiple') multiple: boolean = false; //是否允许选择多张
   @Output() onChange: EventEmitter<any> = new EventEmitter<any>();
   showBlockNum: number = 4; //每行显示数量
@@ -83,7 +85,7 @@ export class UploadComponent implements OnInit {
     } else {
       this.showBlockNum = n;
     }
-    this.fileList = this.files.map((item: any) => {
+    this.fileList = this.files?.map((item: any) => {
       console.log(item);
       return {
         url: item?.url,
@@ -114,9 +116,10 @@ export class UploadComponent implements OnInit {
     }
     for (let index = 0; index < files.length; index++) {
       const f = files[index];
-      this.changeFileReader(f);
+      await this.changeFileReader(f);
     }
     console.log(this.fileList);
+    this.active && this.onUpload()
   }
   //转图片格式
   changeFileReader(file: any) {

+ 1 - 1
projects/live-app/src/moduls/login/login.component.ts

@@ -130,7 +130,7 @@ export class LoginComponent implements OnInit {
       const toast = await this.toastController.create({
         message: '请填写正确手机号',
         color: 'warning',
-        duration: 100000,
+        duration: 1000,
       });
       toast.present();
       this.timer = false;

+ 91 - 2
projects/live-app/src/moduls/user/anchor/anchor.component.html

@@ -1,5 +1,94 @@
 <nav title="主播认证"></nav>
-<ion-content class="content"> 
-
+<ion-content class="content">
+  <div class="edit-room">
+    <div class="row">
+      <div class="title">手机号<span style="color: red">*</span></div>
+      <ion-input
+        placeholder="请填写手机号"
+        maxlength="11"
+        type="number"
+        [(ngModel)]="formData.mobile"
+      ></ion-input>
+    </div>
+    <div class="row">
+      <div class="title">真实姓名<span style="color: red">*</span></div>
+      <ion-input
+        placeholder="请填写真实姓名"
+        maxlength="10"
+        [(ngModel)]="formData.name"
+      ></ion-input>
+    </div>
+    <div class="row">
+      <div class="title">昵称<span style="color: red">*</span></div>
+      <ion-input
+        placeholder="请填写昵称"
+        maxlength="20"
+        [(ngModel)]="formData.nickname"
+      ></ion-input>
+    </div>
+    <div class="row">
+      <div class="title">个性签名<span style="color: red">*</span></div>
+      <ion-textarea
+        maxlength="100"
+        placeholder="请填写个性签名"
+        [(ngModel)]="formData.remark"
+      ></ion-textarea>
+    </div>
 
+    <div class="row">
+      <div class="title">头像<span style="color: red">*</span></div>
+      @if (locadingComplete) {
+      <app-upload
+        (onChangeFile)="onChangeFile($event, 'avatar', 'string')"
+        #upload
+        [maxlenght]="1"
+        [files]="formData.avatar ? [{ url: formData.avatar }] : []"
+        [fileWidth]="100"
+        [fileHeight]="100"
+        [boxWidth]="370"
+      ></app-upload>
+      }
+    </div>
+    <div class="row">
+      <div class="title">照片<span style="color: red">*</span></div>
+      @if (locadingComplete) {
+      <app-upload
+        (onChangeFile)="onChangeFile($event, 'avatar', 'array')"
+        #upload
+        [maxlenght]="4"
+        [files]="formData.photo"
+        [fileWidth]="100"
+        [fileHeight]="140"
+        [boxWidth]="370"
+        [active]="true"
+      ></app-upload>
+      }
+    </div>
+    <div class="row">
+      <div class="title">个人视频<span style="color: red">*</span></div>
+      @if (locadingComplete) {
+      <app-upload
+        (onChangeFile)="onChangeFile($event, 'avatar', 'string')"
+        #upload
+        [maxlenght]="1"
+        [files]="formData.video ? [{ url: formData.video }] : []"
+        [fileWidth]="100"
+        [fileHeight]="140"
+        [boxWidth]="370"
+        [type]="'video'"
+      ></app-upload>
+      }
+    </div>
+  </div>
+  <div class="agreement">
+    <ion-checkbox color="primary" [(ngModel)]="agreement"></ion-checkbox>
+    <div class="agreement-content">
+      注册即代表同意<span (click)="showAgreement()"
+        >《爱聊直播平台隐私协议》</span
+      >
+    </div>
+  </div>
+  <button class="submit" (click)="saveEdit()">
+    提交
+  </button>
 </ion-content>

+ 72 - 7
projects/live-app/src/moduls/user/anchor/anchor.component.scss

@@ -1,9 +1,74 @@
 .content {
-  // --background: #f8f8f8;
-  --padding-bottom: 5.3333vw;
+  height: 100vh;
+  width: 100%;
   background-image: url("https://file-cloud.fmode.cn/uiZD6NisQm/20220831/g1bkbm102855.png") !important;
-	background-repeat: no-repeat;
-	background-position: center top;
-	background-size: 100% 100%;
-  --background:#ffffff00;
-}
+  background-repeat: no-repeat;
+  background-position: center top;
+  background-size: 100% 100%;
+  --background: #ffffff00;
+  --padding-bottom: 100px;
+  .edit-room {
+    // padding: 10px;
+    width: 370px;
+    margin: 0 auto;
+    background: white;
+    border-radius: 6px;
+    margin-top: 10px;
+    .row {
+      padding: 6px;
+      margin-bottom: 4px;
+      .title {
+        color: black;
+        margin-bottom: 4px;
+      }
+      ion-input {
+        background-color: #f3f3f3;
+        --padding-end: 4px;
+        --padding-start: 4px;
+      }
+      ion-textarea {
+        background-color: #f3f3f3;
+        --padding-end: 4px;
+        --padding-start: 4px;
+      }
+    }
+  }
+}
+.agreement {
+  width: 84vw;
+  height: 13.333vw;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 400;
+  color: #9f9f9f;
+  margin: auto;
+  margin-top: 6.667vw;
+  span {
+    color: #3f51b5;
+  }
+  .agreement-content {
+    margin-left: 2.667vw;
+    // width: 90%;
+  }
+  ion-checkbox {
+    --background: #108ee9;
+    // --border-color: #fff;
+    // --border-color-checked: #fff;
+    --background-checked: #108ee9;
+  }
+}
+.submit {
+  position: fixed;
+  bottom: 8vw;
+  width: 80%;
+  height: 10.6667vw;
+  font-size: 4.2667vw;
+  color: white;
+  margin: 0 10%;
+  // background-color: #fe4d54;
+  background: #0054e9;
+  border-radius: 10px;
+  z-index: 9;
+}

+ 167 - 17
projects/live-app/src/moduls/user/anchor/anchor.component.ts

@@ -7,44 +7,58 @@ import {
   ModalController,
   ToastController,
 } from '@ionic/angular';
-import { HttpService } from '../../../services/http.service';
-import * as utils from '../../../services/utils';
 import { AgreementComponent } from '../../login/agreement/agreement.component';
 import { NavComponent } from '../../../app/components/nav/nav.component';
 import { LiveService } from '../../../services/live.service';
 import * as Parse from 'parse';
 import { UploadComponent } from '../../../app/components/upload/upload.component';
 import { Router } from '@angular/router';
-
+import { AuthService } from '../../../services/auth.service';
+interface FormGroup {
+  mobile: string;
+  name: string;
+  avatar: string;
+  nickname: string;
+  photo: Array<any>;
+  video: string;
+  sex: string;
+  remark: string;
+}
 @Component({
   selector: 'app-anchor',
   templateUrl: './anchor.component.html',
   styleUrls: ['./anchor.component.scss'],
   standalone: true,
-  imports: [IonicModule, FormsModule, NavComponent,UploadComponent],
+  imports: [IonicModule, FormsModule, NavComponent, UploadComponent],
 })
 export class AnchorComponent implements OnInit {
   @ViewChild('upload') upload!: UploadComponent;
   profile?: Parse.Object; //身份信息
-  formData: any = {
-    avatar: '',
+  user: Parse.Object = Parse.User.current()!;
+  infoCollection?:Parse.Object
+  formData: FormGroup = {
+    mobile: '',
     name: '',
+    avatar: '',
     nickname: '',
+    photo: [],
+    video: '',
     sex: '',
-    age: '',
-    remark:''
+    remark: '',
   };
-  mobile: string = '';
   loading: any;
   agreement: boolean = false;
   registerAgreement: any;
-  company:any
+  company: any;
+  locadingComplete: boolean = false;
   constructor(
     private modalController: ModalController,
     public loadingCtrl: LoadingController,
     public toastController: ToastController,
+    private authServ: AuthService,
+    private alertController: AlertController,
     private router: Router,
-    private liveService: LiveService,
+    private liveService: LiveService
   ) {
     this.company = liveService.company;
   }
@@ -53,18 +67,44 @@ export class AnchorComponent implements OnInit {
     this.getProfile();
   }
   async getProfile() {
-    if(!this.liveService.profile){
-      this.liveService.alertTips('请先完成实名认证','提示',()=>{
-        this.router.navigate(['/user/certification'],{replaceUrl:true});
-      })
-      return
+    this.loading = await this.loadingCtrl.create({
+      message: '加载中',
+    });
+    this.loading.present();
+    if (!this.liveService.profile) {
+      this.liveService.alertTips('请先完成实名认证', '提示', () => {
+        this.router.navigate(['/user/certification'], { replaceUrl: true });
+      });
+      return;
     }
     let uid = Parse.User.current()?.id;
     let query = new Parse.Query('Profile');
     query.equalTo('user', uid);
     query.notEqualTo('isDeleted', true);
     this.profile = await query.first();
-    if (this.profile?.id) {}
+    if (this.profile?.id) {
+      this.user = this.profile.get('user');
+      this.formData.mobile = this.profile?.get('mobile');
+      this.formData.name = this.profile?.get('name');
+      this.formData.nickname = this.user?.get('nickname');
+      this.formData.remark = this.user?.get('remark');
+      this.formData.avatar =
+        this.user?.get('avatar') ||
+        'https://file-cloud.fmode.cn/DXNgcD6zo6/20221202/j6p8kb034039.png';
+    }
+    let queryInfo = new Parse.Query('InfoCollection');
+    queryInfo.equalTo('user', this.user?.id);
+    queryInfo.notEqualTo('isDeleted', true);
+    this.infoCollection = await queryInfo.first();
+    if (this.infoCollection?.id) {
+      this.formData.photo = this.infoCollection?.get('info')?.photo;
+      this.formData.video = this.infoCollection?.get('info')?.video;
+    }
+    this.loading.dismiss();
+    if(this.infoCollection?.get('isVerify') == '200'){
+      this.presentAlert('审核已通过')
+    }
+    this.locadingComplete = true;
   }
   getAgreement() {
     let Agreement = new Parse.Query('ContractAgreement');
@@ -75,6 +115,12 @@ export class AnchorComponent implements OnInit {
       this.registerAgreement = res;
     });
   }
+  onChangeFile(e: any, file: string, type: string) {
+    let urls = e?.map((item: any) => item.url);
+    if(file == 'video' || file == 'photo' || file == 'avatar'){
+      this.formData[file] = type == 'array' ? urls : urls[0];
+    }
+  }
   async showAgreement() {
     const modal = await this.modalController.create({
       component: AgreementComponent,
@@ -85,4 +131,108 @@ export class AnchorComponent implements OnInit {
     });
     return await modal.present();
   }
+
+  async saveEdit() {
+    if(!this.agreement){
+      const toast = await this.toastController.create({
+        message: '请先同意勾选《爱聊直播平台隐私协议》',
+        color: 'warning',
+        duration: 1500,
+      });
+      toast.present();
+      return
+    }
+    this.loading = await this.loadingCtrl.create({
+      message: '正在保存修改',
+    });
+    this.loading.present();
+    let data:any = this.formData;
+    for (const key in data) {
+      if (!data[key] || (key == 'photo' && !data[key].length)) {
+        this.loading.dismiss();
+        const toast = await this.toastController.create({
+          message: '请填写完整信息',
+          color: 'warning',
+          duration: 1500,
+        });
+        toast.present();
+        return
+      }
+    }
+    console.log(this.formData);
+    let user = Parse.User.current();
+    if (!user?.id) {
+      this.loading.dismiss();
+      const alert = await this.alertController.create({
+        header: '提示',
+        message: '登录信息已过期,请重新登录',
+        buttons: [
+          {
+            text: '好的',
+            role: 'confirm',
+            handler: () => {
+              this.authServ.logout();
+            },
+          },
+        ],
+      });
+      await alert.present();
+      return;
+    }
+    user.set('avatar', this.formData.avatar);
+    user.set('nickname', this.formData.nickname);
+    // user.set('sex', this.formData.sex);
+    await user.save();
+    if (!this.profile?.id) {
+      let obj = Parse.Object.extend('Profile');
+      this.profile = new obj();
+      this.profile?.set('user', Parse.User.current()?.toPointer());
+      this.profile?.set('company', {
+        __type: 'Pointer',
+        className: 'Company',
+        objectId: this.authServ.company,
+      });
+    }
+    this.profile?.set('mobile', Parse.User.current()?.get('mobile'));
+    // this.profile?.set('sex', this.formData.sex);
+    this.profile?.set('remark', this.formData.remark);
+    await this.profile?.save();
+    if(!this.infoCollection?.id){
+      let obj = Parse.Object.extend('InfoCollection');
+      this.infoCollection = new obj();
+      this.infoCollection?.set('user', Parse.User.current()?.toPointer());
+      this.infoCollection?.set('company', {
+        __type: 'Pointer',
+        className: 'Company',
+        objectId: this.authServ.company,
+      });
+    }
+    let jsonData = {
+      photo:this.formData.photo,
+      video:this.formData.video,
+    }
+    this.infoCollection?.set('info', jsonData);
+    this.infoCollection?.set('isVerify','101')
+    await this.infoCollection?.save();
+    this.loading.dismiss();
+    this.getProfile();
+    this.presentAlert('提交成功');
+  }
+
+  async presentAlert(msg: string,isBack?:boolean) {
+    const alert = await this.alertController.create({
+      header: '提示',
+      message: msg,
+      buttons: [
+        {
+          text: '好的',
+          role: 'confirm',
+          handler: () => {
+            isBack && history.back();
+          },
+        },
+      ],
+    });
+    await alert.present();
+  }
 }

+ 1 - 1
projects/live-app/src/moduls/user/setting/setting.component.html

@@ -70,7 +70,7 @@
     </ion-item>
     <ion-item>
       <div class="row">
-        <div>签名</div>
+        <div>个性签名</div>
         <div class="right">
           <ion-input
             placeholder="请填写签名"