update vip

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

@@ -1,42 +1,42 @@
 import { Routes,mapToCanActivate } from '@angular/router';
-import { TabsComponent } from '../moduls/tabs/tabs/tabs.component';
+import { TabsComponent } from '../modules/tabs/tabs/tabs.component';
 import { AuthGuard } from '../services/auth.guard';
 
 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: 'test',
+  //   loadComponent:()=> import('../modules/test/page-test/page-test.component').then((mod) => mod.PageTestComponent),
+  // },
   {
     path: 'login',
-    loadComponent:()=> import('../moduls/login/login.component').then((mod) => mod.LoginComponent),
+    loadComponent:()=> import('../modules/login/login.component').then((mod) => mod.LoginComponent),
   },
   {
     path: 'tabs', //首页tabs
     component: TabsComponent,
     canActivate: mapToCanActivate([AuthGuard]),
-    loadChildren: () =>import('../moduls/tabs/tabs.modules.routes').then((mod) => mod.TabsRoutingModule),
+    loadChildren: () =>import('../modules/tabs/tabs.modules.routes').then((mod) => mod.TabsRoutingModule),
   },
   {
     path: 'user', 
     canActivate: mapToCanActivate([AuthGuard]),
-    loadChildren: () =>import('../moduls/user/user.modules.routes').then((mod) => mod.UserRoutingModule),
+    loadChildren: () =>import('../modules/user/user.modules.routes').then((mod) => mod.UserRoutingModule),
   },
   {
     path: 'account', 
     canActivate: mapToCanActivate([AuthGuard]),
-    loadChildren: () =>import('../moduls/account/account.modules.routes').then((mod) => mod.AccountRoutingModule),
+    loadChildren: () =>import('../modules/account/account.modules.routes').then((mod) => mod.AccountRoutingModule),
   },
   {
     path: 'goods', 
     canActivate: mapToCanActivate([AuthGuard]),
-    loadChildren: () =>import('../moduls/goods/goods.modules.routes').then((mod) => mod.GoodsRoutingModule),
+    loadChildren: () =>import('../modules/goods/goods.modules.routes').then((mod) => mod.GoodsRoutingModule),
   },
   {
     path: 'live', 
     canActivate: mapToCanActivate([AuthGuard]),
-    loadChildren: () =>import('../moduls/live/live.modules.routes').then((mod) => mod.LiveRoutingModule),
+    loadChildren: () =>import('../modules/live/live.modules.routes').then((mod) => mod.LiveRoutingModule),
   },
   
 ];

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

@@ -0,0 +1,114 @@
+<nav title="会员购买"></nav>
+<ion-content class="content">
+  @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("mobile") }}</div>
+      <div class="text-info">
+        <div class="text-top">
+          @if (myVip) {
+          <div class="text1">
+            {{ myVip.validity ? myVip.grade : "会员已过期" }}
+          </div>
+          } @else{
+          <div class="text1">未开通</div>
+          }
+          <!-- <div class="text2">
+            钥匙：{{ account.seeKeys ? account.seeKeys : 0 }}
+          </div>
+          <div class="text3">
+            牵线次数：{{ account.together ? account.together : 0 }}
+          </div>
+          <div class="text3">
+            金币余额：{{ account.credit ? account.credit : 0 }}
+          </div> -->
+        </div>
+        <div class="text-bot">
+          @if (myVip) {
+          <div class="date">有效期至：{{ myVip.expiredAt }}</div>
+          }
+        </div>
+      </div>
+    </div>
+    @for (item of goodsList; track $index) {
+    <div
+      [ngClass]="{
+        'combo_box1-currentGoods': item.id == currentGoods?.id,
+        combo_box1: true
+      }"
+      (click)="onchang(item)"
+    >
+      <div class="title">
+        <div class="title-top">
+          {{ item?.get("name") }}
+          <img src="img/VIP.png" alt="" />
+        </div>
+        <div class="price">
+          ￥{{ item?.get("price") }}
+          <span class="duration"
+            >{{ item?.get("services")[0]?.get("duration") }}天</span
+          >
+        </div>
+      </div>
+      <div class="title-info">
+        <div class="list">
+          @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>
+          } @if (item?.get("services")[0]?.get("rights")['red-envelope']) {
+          <div class="label">世界频道抢红包</div>
+          } @if (item?.get("services")[0]?.get("rights")['all-chat']) {
+          <div class="label">世界频道聊天</div>
+          } @if (item?.get("services")[0]?.get("rights")['invisible']) {
+          <div class="label">在线隐身</div>
+          } @if (item?.get("services")[0]?.get("rights")['privacy']) {
+          <div class="label">隐私模式</div>
+          } @if (item?.get("services")[0]?.get("rights")['exclusive-gift']) {
+          <div class="label">专属礼物购买权益</div>
+          }
+        </div>
+        <div style="width: 100%" [innerHTML]="item?.get('details')"></div>
+      </div>
+    </div>
+    }
+
+    <div class="member-title">会员服务说明</div>
+    <div class="detail-title">关于虚拟产品说明</div>
+    <div class="detail-text">
+      购买即表示同意<span (click)="showAgreement()">《购买协议条款》</span>，会员服务为虚拟产品，因此购买之后无法进行退换货。
+    </div>
+    <div class="detail-title">会员购买期限</div>
+    <div class="detail-text">
+      所有权益都将在购买期限内生效，如果购买期限到期，请及时续费以免影响使用。
+    </div>
+    <div class="detail-title">会员权益说明</div>
+    <div class="detail-text">
+      所有产品权益已在上方会员简介说明，请按需购买。
+    </div>
+
+    <div class="price-info">
+      <div class="price-tab">
+        <div class="price-info-sum">
+          <div class="text">总计：</div>
+          <div class="price">￥{{ currentGoods?.get("price") }}</div>
+          <div class="vip-tag">
+            {{ currentGoods?.get("name") }} <img src="img/VIP.png" alt="" />
+            {{currentGoods?.get("services")[0]?.get("duration")}}天
+          </div>
+        </div>
+        <!-- <div class="agreement">
+          <ion-checkbox color="primary" [(ngModel)]="isCheck"></ion-checkbox>
+          <div class="agreement-content">
+            阅读且同意<span (click)="showAgreement()">《购买协议》</span>
+          </div>
+        </div> -->
+      </div>
+      <div class="price-btn" (click)="openpay()">
+        <div class="open-pay">确认支付</div>
+      </div>
+    </div>
+  </div>
+  }
+</ion-content>

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

@@ -10,6 +10,7 @@
       align-items: center;
       padding: 10px;
       background: linear-gradient(#ffffff, #f96464);
+      border-radius: 0 0 14px 14px;
       .img {
         width: 70px;
         height: 70px;
@@ -46,37 +47,59 @@
     .combo_box1 {
       width: 345px;
       // height: 380px;
-      border: 1px solid #ff5c64;
+      border: 1px solid #fff;
       border-radius: 12px;
       margin: 10px auto;
       padding: 10px;
-
+      box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
       .title {
         display: flex;
         justify-content: space-between;
         align-items: center;
 
         .title-top {
-          font-size: 18px;
+          font-size: 16px;
           color: #222222;
-          font-weight: 700;
+          font-weight: 600;
           // margin: 22px;
+          display: flex;
+          align-items: center;
+          img {
+            margin-left: 2px;
+            width: 30px;
+            height: 30px;
+          }
         }
 
         .price {
-          font-size: 24px;
-          color: #ff5c64;
-          font-weight: 700;
+          font-size: 22px;
+          color: #d50b15;
+          font-weight: 600;
+          .duration {
+            // color: #ffca22;
+            font-weight: 500;
+            font-size: 18px;
+          }
+        }
+      }
+      .title-info {
+        .list {
+          .label {
+            font-size: 12px;
+            margin-bottom: 4px;
+          }
         }
       }
     }
-
+    .combo_box1-currentGoods {
+      background-color: #ffe5e7;
+    }
     .combo_box1-active {
       background-color: #ffe5e7;
     }
 
     .member-title {
-      font-size: 18px;
+      font-size: 14px;
       color: #222222;
       font-weight: bold;
       width: 345px;
@@ -88,7 +111,7 @@
       margin: 0px auto 10px;
       color: #222222;
       line-height: 18px;
-      font-size: 12x;
+      font-size: 12px;
     }
 
     .member-tab1 {
@@ -100,91 +123,110 @@
       }
     }
 
-    .time-limit {
+    .detail-title {
       width: 345px;
       background-color: #ff5c64;
       margin: 10px auto;
-      font-size: 14px;
+      font-size: 12px;
       padding: 10px;
     }
 
-    .limit-text {
+    .detail-text {
       width: 345px;
       margin: 1px auto;
       color: #222222;
       line-height: 18px;
       font-size: 12px;
-    }
-
-    .refund {
-      width: 345px;
-      background-color: #ff5c64;
-      margin: 10px auto;
-      font-size: 14px;
-      padding: 8px 10px;
-    }
-
-    .refund-text {
-      width: 345px;
-      margin: 10px auto;
-      color: #222222;
-      line-height: 18px;
-      font-size: 12px;
-    }
-
-    .violation {
-      width: 345px;
-      background-color: #ff5c64;
-      margin: 10px auto;
-      font-size: 14px;
-      padding: 8px 10px;
-    }
-
-    .violation-text {
-      width: 345px;
-      margin: 10px auto;
-      color: #222222;
-      line-height: 18px;
-      font-size: 12px;
+      span {
+        color: #3f51b5;
+      }
     }
   }
   .price-info {
     position: fixed;
     bottom: 0;
     display: flex;
+    align-items: end;
     width: 100%;
-    height: 48px;
-    margin-top: 50px;
-
+    // height: 48px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+    overflow: hidden;
+    background: white;
+    padding: 6px 2px;
     .price-tab {
       width: 250px;
-      height: 48px;
+      // height: 48px;
       display: flex;
+      flex-direction: column;
       background-color: #ffffff;
       flex: 1;
-      .text {
-        font-size: 18px;
-        padding: 16px;
-        color: #222222;
-        font-weight: 500;
+      padding:0 4px;
+      .agreement {
+        // width: 84vw;
+        /* height: 13.333vw; */
+        display: flex;
+        align-items: flex-start;
+        // justify-content: center;
+        font-size: 14px;
+        font-weight: 400;
+        color: #9f9f9f;
+        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;
+        }
       }
 
-      .price {
-        font-size: 18px;
-        color: #ff5c64;
-        padding-top: 18px;
+      .price-info-sum {
+        display: flex;
+        align-items: end;
+        margin: 4px 0;
+        .text {
+          font-size: 16px;
+          // padding: 16px;
+          color: #222222;
+          font-weight: 500;
+        }
+
+        .price {
+          font-size: 18px;
+          color: #d50b15;
+          // padding-top: 18px;
+        }
+        .vip-tag{
+          margin-left: 6px;
+          display: flex;
+          font-size: 12px;
+          align-items: center;
+          img{
+            width: 20px;
+            height: 20px;
+          }
+        }
       }
     }
 
-    .comfirm {
+    .price-btn {
       width: 120px;
-      height: 48px;
-      background-color: #ff5c64;
-      font-size: 18px;
-      color: #ffffff;
+      // height: 48px;
+      font-size: 16px;
       display: flex;
       justify-content: center;
       align-items: center;
+      .open-pay{
+        background-color: #0054e9;
+        color: #ffffff;
+        padding: 8px 16px;
+        border-radius: 4px;
+      }
     }
   }
 }

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

@@ -1,36 +1,41 @@
 import { Component, OnInit } from '@angular/core';
-import { IonicModule } from '@ionic/angular';
+import { IonicModule, ModalController } from '@ionic/angular';
 import { NavComponent } from '../../../app/components/nav/nav.component';
+import { FormsModule } from '@angular/forms';
 import * as Parse from 'parse';
 import { AuthService } from '../../../services/auth.service';
-import { DatePipe } from '@angular/common';
+import { DatePipe,CommonModule } from '@angular/common';
+import { AgreementComponent } from '../../login/agreement/agreement.component';
 
 @Component({
   selector: 'app-vip',
   templateUrl: './vip.component.html',
   styleUrls: ['./vip.component.scss'],
   standalone: true,
-  imports: [IonicModule, NavComponent],
+  imports: [IonicModule, NavComponent, CommonModule,FormsModule],
   providers: [DatePipe],
 })
 export class VipComponent implements OnInit {
   user: any = Parse.User.current();
-  vips: Array<Parse.Object> = [];
   profile?: Parse.Object;
-  account?: Parse.Object;
+  goodsList: Array<Parse.Object> = [];
   myVip: any;
+  registerAgreement: any;
+  isCheck:boolean = false;
   currentGoods?: Parse.Object; //当前选择的会员
-  tips: Array<string> = [
-    ' ：会员承诺书本人自愿参加“心上人”线上高端单身俱乐部活动。遵守言责自负、文责自负的原则，另本人自愿做出如下承诺：一、严格遵守国家法律法规，遵守社会公德，承诺本人无违法犯罪行为。若有隐瞒，后果自负。二、恪守诚信，保证我所提供的报名内容真实、准确、无欺诈成份。否则，愿意接受法律的制裁。',
-  ];
-  constructor(private authSer: AuthService, private datePipe: DatePipe) {}
+  constructor(
+    private modalController: ModalController,
+    private authSer: AuthService,
+    private datePipe: DatePipe
+  ) {}
 
   ngOnInit() {
-    this.refresh()
+    this.refresh();
   }
   refresh() {
     this.getGoods();
     this.getUserVip();
+    this.getAgreement();
   }
   //获取当前VIP等级
   async getUserVip() {
@@ -58,18 +63,38 @@ export class VipComponent implements OnInit {
     goods.equalTo('type', 'vip');
     goods.equalTo('status', true);
     goods.ascending('top');
-    let res = await goods.find();
-    this.vips = res;
-    this.currentGoods = this.vips[0];
+    goods.notEqualTo('isDeleted', true);
+    goods.include('services');
+    this.goodsList = await goods.find();
+    this.currentGoods = this.goodsList[0];
   }
-  //获取用户账户信息
-  async getAccount() {
-    let queryAccount = new Parse.Query('Account');
-    queryAccount.equalTo('user', Parse.User.current()?.id);
-    let res = await queryAccount.first();
-    this.account = res;
+  getAgreement() {
+    let Agreement = new Parse.Query('ContractAgreement');
+    Agreement.equalTo('company', this.authSer.company);
+    Agreement.equalTo('type', 'register');
+    Agreement.first().then((res) => {
+      console.log(res);
+      this.registerAgreement = res;
+    });
+  }
+  async showAgreement() {
+    const modal = await this.modalController.create({
+      component: AgreementComponent,
+      cssClass: 'my-custom-class',
+      componentProps: {
+        agreement: this.registerAgreement,
+      },
+    });
+    return await modal.present();
   }
   onchang(data: Parse.Object) {
     this.currentGoods = data;
   }
+  openpay(){
+    if(this.isCheck){
+      // this.authSer.openPay(this.currentGoods);
+    }else{
+      this.showAgreement();
+    }
+  }
 }

projects/live-app/src/moduls/tabs/my/my.component.scss → projects/live-app/src/modules/tabs/my/my.component.scss

@@ -2,7 +2,7 @@
   --padding-bottom: 100px;
   --background: #f8f8f8;
   .header {
-    padding:20px 10px 10px;
+    padding: 20px 10px 10px;
     background-image: url(/img/bg.png);
     background-size: 100% 100%;
     height: 140px;
@@ -134,7 +134,8 @@
     }
   }
   .tool {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(5, 70px);
     align-items: center;
     padding: 6px 10px;
     font-size: 12px;
@@ -270,51 +271,51 @@
       }
     }
   }
-  .setting{
+  .setting {
     width: 360px;
     margin: 0 auto;
     font-size: 14px;
-    .setting-tabs{
+    .setting-tabs {
       background: white;
       border-radius: 10px;
-      .row{
+      .row {
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding: 4px 10px;
-        .tabs-left{
+        .tabs-left {
           display: flex;
           align-items: center;
-          ion-icon{
+          ion-icon {
             font-size: 22px;
             color: #e7435c;
           }
         }
       }
-      ion-toggle{
-        --handle-height:14px;
-        --handle-width:14px;
+      ion-toggle {
+        --handle-height: 14px;
+        --handle-width: 14px;
       }
     }
-    .list{
+    .list {
       background: white;
       border-radius: 10px;
       padding: 4px 10px 10px;
       margin: 10px auto;
-      .li{
+      .li {
         display: flex;
         justify-content: space-between;
         margin-top: 10px;
-        .li-lable{
+        .li-lable {
           display: flex;
           align-items: center;
-          .icon{
+          .icon {
             width: 18px;
             height: 16px;
             margin-right: 10px;
           }
         }
-        ion-icon{
+        ion-icon {
           color: #666666;
         }
       }

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

@@ -33,22 +33,27 @@ export class MyComponent implements OnInit {
   ) {}
   tools: Array<{ icon: string; title: string; path: string }> = [
     {
-      icon: '/img/钱包.png',
+      icon: 'img/钱包.png',
       title: '钱包',
       path: 'account/wattle',
     },
     {
-      icon: '/img/相册.png',
+      icon: 'img/相册.png',
       title: '相册',
       path: 'user/album',
     },
     {
-      icon: '/img/邀请.png',
+      icon: 'img/邀请.png',
       title: '邀请',
       path: 'user/share',
     },
     {
-      icon: '/img/设置.png',
+      icon: 'img/访客.png',
+      title: '访客',
+      path: 'user/browse',
+    },
+    {
+      icon: 'img/设置.png',
       title: '设置',
       path: 'user/setting',
     },
@@ -153,7 +158,7 @@ export class MyComponent implements OnInit {
   }
   /* 进入直播间 */
   async goRoom() {
-    if (!this.profile?.get('isCross')) {
+    if (!this.profile?.get('isCross') || this.profile?.get('identyType') !== 'anchor') {
       const alert = await this.alertController.create({
         header: '提示',
         message: '你还未认证主播身份，请认证后再进入直播间',
@@ -168,7 +173,7 @@ export class MyComponent implements OnInit {
             text: '去认证',
             handler: () => {
               console.log('Confirm Cancel: blah');
-              this.toUrl('/user/auchor');
+              this.toUrl('/user/anchor');
             },
           },
         ],

projects/live-app/src/moduls/user/album/album.component.ts → projects/live-app/src/modules/user/album/album.component.ts

@@ -36,9 +36,11 @@ export class AlbumComponent implements OnInit {
     query.select('attachment');
     let p = await query.first();
     this.profile = p;
-    this.files = p?.get('attachment')?.map((item: String) => {
-      return { url: item };
-    });
+    if (p?.get('attachment')?.length > 0) {
+      this.files = p?.get('attachment')?.map((item: String) => {
+        return { url: item };
+      });
+    }
     this.loading = true;
   }
   async onSave(e: any) {

projects/live-app/src/moduls/user/anchor/anchor.component.html → projects/live-app/src/modules/user/anchor/anchor.component.html

@@ -83,7 +83,7 @@
   <div class="agreement">
     <ion-checkbox color="primary" [(ngModel)]="agreement"></ion-checkbox>
     <div class="agreement-content">
-      注册即代表同意<span (click)="showAgreement()"
+      阅读且同意<span (click)="showAgreement()"
         >《爱聊直播平台隐私协议》</span
       >
     </div>

projects/live-app/src/moduls/user/anchor/anchor.component.scss → projects/live-app/src/modules/user/anchor/anchor.component.scss

@@ -70,5 +70,5 @@
   // background-color: #fe4d54;
   background: #0054e9;
   border-radius: 10px;
-  z-index: 9;
+  z-index: 2;
 }

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

@@ -0,0 +1,17 @@
+<nav title="访客记录"></nav>
+<ion-content class="content">
+  <ion-segment
+    [scrollable]="true"
+    (ionChange)="segmentChanged($event)"
+    layout="icon-bottom"
+    value="notice"
+    mode="md"
+  >
+    <ion-segment-button value="notice" class="tabs" content-id="0">
+      <ion-label>我看过谁</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="friends" class="tabs" content-id="1">
+      <ion-label>谁看过我</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+</ion-content>

projects/live-app/src/modules/user/browse/browse.component.scss

@@ -0,0 +1,15 @@
+.content {
+  padding-bottom: 50px;
+  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;
+  ion-segment {
+    // justify-content: start;
+    // padding: 0 3.2vw;
+    // position: sticky;
+    // top: 0;
+    border: 1px solid #e5e5e5;
+  }
+}

projects/live-app/src/modules/user/browse/browse.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 { BrowseComponent } from './browse.component';
+
+describe('BrowseComponent', () => {
+  let component: BrowseComponent;
+  let fixture: ComponentFixture<BrowseComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BrowseComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BrowseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { NavComponent } from '../../../app/components/nav/nav.component';
+import { IonicModule, ToastController } from '@ionic/angular';
+import * as Parse from 'parse';
+
+@Component({
+  selector: 'app-browse',
+  templateUrl: './browse.component.html',
+  styleUrls: ['./browse.component.scss'],
+  standalone: true,
+  imports: [IonicModule, NavComponent],
+})
+export class BrowseComponent implements OnInit {
+  active: number = 0;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+  segmentChanged(e: any) {
+    let { value } = e.detail;
+    this.active = value;
+  }
+}

projects/live-app/src/moduls/user/certification/certification.component.html → projects/live-app/src/modules/user/certification/certification.component.html

@@ -51,7 +51,7 @@
   <div class="agreement">
     <ion-checkbox color="primary" [(ngModel)]="agreement"></ion-checkbox>
     <div class="content">
-      注册即代表同意<span (click)="showAgreement()"
+      阅读且同意<span (click)="showAgreement()"
         >《爱聊直播平台隐私协议》</span
       >
     </div>