新增页面

projects/live-app/src/moduls/login/agreement/agreement.component.html

@@ -5,5 +5,5 @@
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
-<ion-content class="ion-padding" [innerHTML]="agreement && agreement.content">
+<ion-content class="ion-padding" [innerHTML]="agreement?.get('content')">
 </ion-content>

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

@@ -383,8 +383,7 @@ export class LoginComponent implements OnInit {
     Agreement.equalTo('type', 'register');
     Agreement.first().then((res) => {
       console.log(res);
-      let item = res && res.toJSON();
-      this.registerAgreement = item;
+      this.registerAgreement = res;
     });
   }
   async showAgreement() {

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

@@ -14,7 +14,7 @@ import { Swiper } from 'swiper';
   // schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class HomeComponent implements OnInit {
-  active: String = 'recommend';
+  active: string = 'recommend';
   banner: Array<Parse.Object> = [];
   roomList:Array<Parse.Object> = []
   pageSwiper: Swiper | undefined | any;

projects/live-app/src/moduls/tabs/live-review/live-review.component.html

@@ -0,0 +1,3 @@
+<p>
+  live-review works!
+</p>

projects/live-app/src/moduls/tabs/live-review/live-review.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { LiveReviewComponent } from './live-review.component';
+
+describe('LiveReviewComponent', () => {
+  let component: LiveReviewComponent;
+  let fixture: ComponentFixture<LiveReviewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LiveReviewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LiveReviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/live-app/src/moduls/tabs/live-review/live-review.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import * as Parse from 'parse';
+@Component({
+  selector: 'app-live-review',
+  templateUrl: './live-review.component.html',
+  styleUrls: ['./live-review.component.scss'],
+  standalone: true,
+  imports: [IonicModule],
+})
+export class LiveReviewComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -141,7 +141,49 @@
       </div>
     </div>
     <div class="list">
-      @for (item of settings; track $index) {
+      <div class="li">
+        <div class="li-lable">
+          <img src="/img/成为主播.png" alt="" class="icon" />
+          成为主播
+        </div>
+        <ion-icon name="chevron-forward-outline"></ion-icon>
+      </div>
+      <div class="li" (click)="showAgreement('registerAgreement')">
+        <div class="li-lable">
+          <img src="/img/隐私.png" alt="" class="icon" />
+          隐私协议
+        </div>
+        <ion-icon name="chevron-forward-outline"></ion-icon>
+      </div>
+      <div class="li">
+        <div class="li-lable">
+          <img src="/img/意见反馈.png" alt="" class="icon" />
+          意见反馈
+        </div>
+        <ion-icon name="chevron-forward-outline"></ion-icon>
+      </div>
+      <div class="li">
+        <div class="li-lable">
+          <img src="/img/在线客服.png" alt="" class="icon" />
+          在线客服
+        </div>
+        <ion-icon name="chevron-forward-outline"></ion-icon>
+      </div>
+      <div class="li" (click)="showAgreement('liveAgreement')">
+        <div class="li-lable">
+          <img src="/img/直播协议.png" alt="" class="icon" />
+          直播协议
+        </div>
+        <ion-icon name="chevron-forward-outline"></ion-icon>
+      </div>
+      <div class="li">
+        <div class="li-lable">
+          <img src="/img/退出登录.png" alt="" class="icon" />
+          退出登录
+        </div>
+        <ion-icon name="chevron-forward-outline"></ion-icon>
+      </div>
+      <!-- @for (item of settings; track $index) {
       <div class="li">
         <div class="li-lable">
           <img [src]="item.icon" alt="" class="icon" />
@@ -149,7 +191,7 @@
         </div>
         <ion-icon name="chevron-forward-outline"></ion-icon>
       </div>
-      }
+      } -->
     </div>
   </div>
 </ion-content>

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

@@ -2,7 +2,9 @@ import { Component, OnInit } from '@angular/core';
 import { IonicModule } from '@ionic/angular';
 
 import * as Parse from 'parse';
-
+import { AgreementComponent } from '../../login/agreement/agreement.component';
+import { AlertController, ModalController } from '@ionic/angular';
+import { Router } from '@angular/router';
 @Component({
   selector: 'app-my',
   templateUrl: './my.component.html',
@@ -12,58 +14,72 @@ import * as Parse from 'parse';
 })
 export class MyComponent implements OnInit {
   user?: Parse.Object = Parse.User.current();
-  constructor() {}
-  tools: Array<{ icon: string; title: string }> = [
+  constructor(
+    private modalController: ModalController,
+    private alertController: AlertController,
+    private router: Router
+  ) {}
+  tools: Array<{ icon: string; title: string; path: string }> = [
     {
       icon: '/img/钱包.png',
       title: '钱包',
+      path: '',
     },
     {
       icon: '/img/相册.png',
       title: '相册',
+      path: '',
     },
     {
       icon: '/img/邀请.png',
       title: '邀请',
+      path: '',
     },
     {
       icon: '/img/设置.png',
       title: '设置',
-    },
-  ];
-  settings: Array<{ icon: string; title: string; path: string }> = [
-    {
-      icon: '/img/成为主播.png',
-      title: '成为主播',
-      path: '',
-    },
-    {
-      icon: '/img/隐私.png',
-      title: '隐私协议',
-      path: '',
-    },
-    {
-      icon: '/img/意见反馈.png',
-      title: '意见反馈',
-      path: '',
-    },
-    {
-      icon: '/img/在线客服.png',
-      title: '在线客服',
-      path: '',
-    },
-    {
-      icon: '/img/直播协议.png',
-      title: '直播协议',
-      path: '',
-    },
-    {
-      icon: '/img/退出登录.png',
-      title: '退出登录',
       path: '',
     },
   ];
+  registerAgreement: any; //用户协议
+  liveAgreement: any; //直播协议
+  company: string | null = localStorage?.getItem('company');
   ngOnInit() {
-    console.log(this.user);
+    this.getAgreement();
+  }
+  getAgreement() {
+    let Agreement = new Parse.Query('ContractAgreement');
+    Agreement.equalTo('company', this.company);
+    Agreement.equalTo('type', 'register');
+    Agreement.first().then((res) => {
+      console.log(res);
+      this.registerAgreement = res;
+    });
+    let Agreement2 = new Parse.Query('ContractAgreement');
+    Agreement2.equalTo('company', this.company);
+    Agreement2.equalTo('type', 'live');
+    Agreement2.first().then((res) => {
+      console.log(res);
+      this.liveAgreement = res;
+    });
+  }
+  toUrl(url: string, params?: Object) {
+    if (params) {
+      this.router.navigate([url, Object]);
+    } else {
+      this.router.navigate([url]);
+    }
+  }
+  async showAgreement(type: string) {
+    if (type == 'liveAgreement' || type == 'registerAgreement') {
+      const modal = await this.modalController.create({
+        component: AgreementComponent,
+        cssClass: 'my-custom-class',
+        componentProps: {
+          agreement: this[type],
+        },
+      });
+      return await modal.present();
+    }
   }
 }

projects/live-app/src/moduls/tabs/notice/notice.component.html

@@ -0,0 +1,66 @@
+<ion-header [translucent]="true" class="header">
+  <div class="top">
+    <div class="more"></div>
+    <ion-segment
+      [scrollable]="true"
+      (ionChange)="segmentChanged($event)"
+      layout="icon-bottom"
+      value="notice"
+      mode="md"
+    >
+      <ion-segment-button value="notice" class="tabs" content-id="notice">
+        <ion-label>消息</ion-label>
+      </ion-segment-button>
+      <ion-segment-button value="friends" class="tabs" content-id="friends">
+        <ion-label>好友</ion-label>
+      </ion-segment-button>
+    </ion-segment>
+    <div class="more">
+      <!-- <img src="/img/more.png" alt="" /> -->
+      <ion-button id="click-trigger"
+        ><ion-icon name="ellipsis-horizontal-outline"></ion-icon
+      ></ion-button>
+    </div>
+  </div>
+</ion-header>
+<ion-content class="content">
+  <ion-searchbar animated="true" placeholder="搜索"></ion-searchbar>
+
+  <ion-popover trigger="click-trigger" triggerAction="click">
+    <ng-template>
+      <div class="pro">123</div>
+    </ng-template>
+  </ion-popover>
+  <ion-segment-view>
+    <ion-segment-content id="notice">
+      <div class="notice-list">
+        @for (item of noticeList; track $index) {
+        <div
+          class="li"
+          (touchstart)="startPress()"
+          (mousemove)="stopPress()"
+        >
+          <ion-avatar>
+            <img
+              alt="Silhouette of a person's head"
+              src="https://ionicframework.com/docs/img/demos/avatar.svg"
+            />
+          </ion-avatar>
+          <div class="li-right">
+            <div class="name">
+              系统消息
+              <span class="time">20:20:18</span>
+            </div>
+            <div class="message-content">
+              12554444444
+            </div>
+          </div>
+        </div>
+      }
+      </div>
+    </ion-segment-content>
+    <ion-segment-content id="friends"
+      >Second</ion-segment-content
+    ></ion-segment-view
+  >
+</ion-content>

projects/live-app/src/moduls/tabs/notice/notice.component.scss

@@ -0,0 +1,81 @@
+.header {
+  padding: 10px;
+  border-bottom: 1px solid #dfdfdf;
+  background: white;
+  .top {
+    display: flex;
+    justify-content: space-between;
+    ion-segment {
+      justify-content: start;
+      padding: 0 3.2vw;
+      position: sticky;
+      top: 0;
+      // background: #fd6f6a;
+    }
+    // ion-segment-button {
+    //   color: #fd6f6a;
+    //   --indicator-color: #fd6f6a;
+    // }
+    .more {
+      width: 50px;
+      margin: 0 10px;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      img {
+        width: 20px;
+        height: 20px;
+      }
+      ion-button{
+        --background:white;
+        --background-hover: white;
+        --background-activated: white;
+        --background-focused: white;
+        --color: #000;
+      }
+    }
+  }
+}
+.content{
+  --padding-bottom: 100px;
+  --background: #f8f8f8;
+  ion-segment-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .notice-list{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    .li{
+      display: flex;
+      margin-bottom: 10px;
+      ion-avatar{
+        margin-right: 10px;
+        flex-shrink: 0;
+      }
+      .li-right{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        border-bottom: 1px solid #e5e5e5;
+        padding-bottom: 6px;
+        .name{
+          display: flex;
+          justify-content: space-between;
+          .time{
+            color: #676767;
+            font-size: 12px;
+          }
+        }
+        .message-content{
+          color: #676767;
+          margin-top: 6px;
+        }
+      }
+    }
+  }
+}

projects/live-app/src/moduls/tabs/notice/notice.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { NoticeComponent } from './notice.component';
+
+describe('NoticeComponent', () => {
+  let component: NoticeComponent;
+  let fixture: ComponentFixture<NoticeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NoticeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NoticeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/live-app/src/moduls/tabs/notice/notice.component.ts

@@ -0,0 +1,58 @@
+import { Component, OnInit } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import * as Parse from 'parse';
+
+@Component({
+  selector: 'app-notice',
+  templateUrl: './notice.component.html',
+  styleUrls: ['./notice.component.scss'],
+  standalone: true,
+  imports: [IonicModule],
+})
+export class NoticeComponent implements OnInit {
+  active: string = 'notice';
+  noticeList: Array<Object> = [
+    {
+      avatar: '',
+      name: '系统消息',
+      content: '',
+      createdAt: new Date(),
+    },
+    {
+      avatar: '',
+      name: '系统消息',
+      content: '',
+      createdAt: new Date(),
+    },
+    {
+      avatar: '',
+      name: '系统消息',
+      content: '',
+      createdAt: new Date(),
+    },
+  ];
+  friends: Array<Object> = [];
+  constructor() {}
+
+  ngOnInit() {}
+  segmentChanged(e: any) {
+    let { value } = e.detail;
+    this.active = value;
+  }
+  times: number = 0;
+  timer: any;
+  startPress() {
+    this.times += 100;
+    if (this.times >= 500) {
+      console.log(this.times);
+      return;
+    }
+    this.timer = setTimeout(() => {
+      this.startPress();
+    }, 100);
+  }
+  stopPress() {
+    clearTimeout(this.timer);
+    this.times = 0;
+  }
+}

projects/live-app/src/moduls/tabs/ranking/ranking.component.html

@@ -0,0 +1,3 @@
+<p>
+  ranking works!
+</p>

projects/live-app/src/moduls/tabs/ranking/ranking.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { RankingComponent } from './ranking.component';
+
+describe('RankingComponent', () => {
+  let component: RankingComponent;
+  let fixture: ComponentFixture<RankingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RankingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RankingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/live-app/src/moduls/tabs/ranking/ranking.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
+import * as Parse from 'parse';
+
+@Component({
+  selector: 'app-ranking',
+  templateUrl: './ranking.component.html',
+  styleUrls: ['./ranking.component.scss'],
+  standalone: true,
+  imports: [IonicModule],
+})
+export class RankingComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

projects/live-app/src/moduls/tabs/tabs.modules.routes.ts

@@ -1,7 +1,10 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
+import { LiveReviewComponent } from './live-review/live-review.component';
 import { MyComponent } from './my/my.component';
+import { NoticeComponent } from './notice/notice.component';
+import { RankingComponent } from './ranking/ranking.component';
 const routes: Routes = [
   {
     path: '',
@@ -12,6 +15,18 @@ const routes: Routes = [
     path: 'home', //首页
     component: HomeComponent,
   },
+  {
+    path: 'notice', //消息
+    component: NoticeComponent,
+  },
+  {
+    path: 'live-review', //预览直播
+    component: LiveReviewComponent,
+  },
+  {
+    path: 'ranking', //排名
+    component: RankingComponent,
+  },
   {
     path: 'my', //我的
     component: MyComponent,

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

@@ -28,31 +28,31 @@ export class TabsComponent implements OnInit {
   option: any = [
     {
       src: '/img/首页.png',
-      active: '/img/首页.png',
+      active: '/img/首页_active.png',
       url: 'tabs/home',
       name: '首页',
     },
     {
       src: '/img/消息.png',
       active: '/img/消息.png',
-      url: 'tabs/home',
+      url: 'tabs/notice',
       name: '消息',
     },
     {
       src: '/img/live.png',
       active: '/img/live.png',
-      url: 'tabs/home',
+      url: 'tabs/live-review',
       name: '直播',
     },
     {
       src: '/img/排名.png',
       active: '/img/排名.png',
-      url: 'tabs/center',
+      url: 'tabs/ranking',
       name: '排名',
     },
     {
       src: '/img/我的.png',
-      active: '/img/我的.png',
+      active: '/img/我的_active.png',
       url: 'tabs/my',
       name: '我的',
     },