优化评分弹窗铺屏问题

android/app/build.gradle

@@ -8,7 +8,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 2
-        versionName "1.0.2"
+        versionName "1.0.3"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

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

@@ -1,4 +1,4 @@
-<ion-modal
+<!-- <ion-modal
   #modal
   trigger="open-modal"
   [isOpen]="liveService.isOpenEvaluate"
@@ -53,4 +53,56 @@
       </ion-buttons>
     </ion-toolbar>
   </ng-template>
-</ion-modal>
+</ion-modal> -->
+@if (liveService.isOpenEvaluate) {
+<div class="custom-modal">
+  <div class="custom-modal-box">
+    <div class="modal-content">
+      <div class="title">评价</div>
+      <ion-segment
+        [scrollable]="true"
+        (ionChange)="segmentChanged($event)"
+        layout="icon-bottom"
+        value="positiveTags"
+        mode="md"
+      >
+        <ion-segment-button
+          value="positiveTags"
+          class="tabs"
+          content-id="positiveTags"
+        >
+          <ion-label>喜欢</ion-label>
+        </ion-segment-button>
+        <ion-segment-button
+          value="negativeTags"
+          class="tabs"
+          content-id="negativeTags"
+        >
+          <ion-label>无感</ion-label>
+        </ion-segment-button>
+      </ion-segment>
+      <div class="list">
+        @for (tag of list; track $index) {
+        <span
+          (click)="onCheck(tag)"
+          [ngClass]="{
+        'action': checkTags.has(tag),
+      }"
+          >{{ tag }}</span
+        >
+        }
+      </div>
+    </div>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button (click)="liveService.isOpenEvaluate = false"
+          >取消</ion-button
+        >
+      </ion-buttons>
+      <ion-buttons slot="end">
+        <ion-button (click)="confirm()">确认</ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </div>
+</div>
+}

projects/live-app/src/app/components/appraise/appraise.component.scss

@@ -5,25 +5,45 @@ ion-modal {
   --box-shadow: 0 2.5641vw 3.8462vw -0.7692vw rgb(0 0 0 / 0.1),
     0 1.0256vw 1.5385vw -1.0256vw rgb(0 0 0 / 0.1);
 }
-.title{
+.title {
   text-align: center;
   font-size: 16px;
   margin: 10px auto;
   font-weight: bold;
 }
-.list{
+.list {
   display: flex;
   flex-wrap: wrap;
   padding: 4px;
-  span{
+  span {
     margin-right: 4px;
     margin-bottom: 10px;
-    background-color: #d1d1d1; 
+    background-color: #d1d1d1;
     color: #fff;
     padding: 2px 6px;
     font-size: 14px;
   }
-  .action{
-    background-color: #a065ee; 
+  .action {
+    background-color: #a065ee;
   }
-}
+}
+.custom-modal {
+  position: fixed;
+  top: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgb(0 0 0 / 55%);
+  .custom-modal-box {
+    background: white;
+    height: 280px;
+    width: 89.7436vw;
+    border-radius: 4.1026vw;
+    overflow: hidden;
+    box-shadow: 0 2.5641vw 3.8462vw -0.7692vw rgb(0 0 0 / 0.1),
+      0 1.0256vw 1.5385vw -1.0256vw rgb(0 0 0 / 0.1);
+  }
+}

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

@@ -4,13 +4,18 @@
     <div class="tips">版本：{{app?.get('version')}}</div>
   </div>
   <div class="block">
-    <div class="li" (click)="downImg(app.get('apkUrl'))">
+    <div class="li" (click)="downUrl(app.get('apkUrl'))">
       <div class="h3">下载</div>
       <img class="android" src="img/android.png" alt="" />
     </div>
-    <div class="li" (click)="downImg(app.get('itunesUrl'))">
+    <div class="li" (click)="downUrl(app.get('itunesUrl'))">
       <div class="h3">下载</div>
       <img class="android" src="img/ios.png" alt="" />
     </div>
   </div>
-</ion-content>
+</ion-content>
+@if (overflow) {
+  <div class="post_fxd" (click)="overflow = false">
+    <img src="/img/引导.png" alt="">
+  </div>
+}

projects/live-app/src/modules/download/download.component.scss

@@ -39,4 +39,11 @@
       // height: 50px;
     }
   }
-}
+}
+.post_fxd {
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgb(0 0 0 / 51%);
+  height: 100%;
+}

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

@@ -8,21 +8,24 @@ import { CommonModule } from '@angular/common';
   templateUrl: './download.component.html',
   styleUrls: ['./download.component.scss'],
   standalone: true,
-  imports: [
-    ...ionicStandaloneModules,CommonModule
-  ],
+  imports: [...ionicStandaloneModules, CommonModule],
 })
 export class DownloadComponent implements OnInit {
-  app:Parse.Object
-
-  constructor(private authServ: AuthService) { }
+  app: Parse.Object;
+  overflow: boolean = false;
+  constructor(private authServ: AuthService) {}
 
   async ngOnInit() {
     let App = new Parse.Query('App');
     App.equalTo('company', this.authServ.company);
     this.app = await App.first();
   }
-  downImg(url:string) {
+  downUrl(url: string) {
+    let ua = navigator.userAgent.toLowerCase();
+    if (ua.indexOf('micromessenger') !== -1) {
+      this.overflow = true;
+      return;
+    }
     let dlLink: any = document.createElement('a');
     if ('download' in dlLink) {
       dlLink.style.visibility = 'hidden';

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

@@ -123,6 +123,7 @@
     <div class="ladder">
       <div class="top-block">
         <div class="top2">
+          @if (orderList[1]) {
           <div class="user-block">
             <div class="user-avatar">
               <img src="img/2.png" alt="" class="tag" />
@@ -132,31 +133,36 @@
               {{ orderList[1]?.nickname }}
             </div>
           </div>
+          }@else {
+          <p style="color: #999">暂无</p>
+          }
           <div class="user-detail user-detail2">
             <!-- <div class="num">{{ orderList[1]?.credit }}</div> -->
             <div class="pm">TOP2</div>
           </div>
         </div>
         <div class="top1">
+          @if (orderList[0]) {
           <div class="user-block">
             <div class="user-avatar">
-              <img
-                src="img/1.png"
-                alt=""
-                class="tag"
-              />
+              <img src="img/1.png" alt="" class="tag" />
               <img [src]="orderList[0]?.avatar" class="avatar" alt="" />
             </div>
             <div class="user-name">
               {{ orderList[0]?.nickname }}
             </div>
           </div>
+          }@else {
+          <p style="color: #999">暂无</p>
+          }
           <div class="user-detail user-detail1">
             <!-- <div class="num">{{ orderList[0]?.credit }}</div> -->
             <div class="pm">TOP1</div>
           </div>
         </div>
         <div class="top3">
+          @if (orderList[0]) {
+
           <div class="user-block">
             <div class="user-avatar">
               <img src="img/3.png" alt="" class="tag" />
@@ -166,6 +172,9 @@
               {{ orderList[2]?.nickname }}
             </div>
           </div>
+          }@else {
+          <p style="color: #999">暂无</p>
+          }
           <div class="user-detail user-detail3">
             <!-- <div class="num">{{ orderList[2]?.credit }}</div> -->
             <div class="pm">TOP3</div>
@@ -176,7 +185,7 @@
     @for (item of orderList.slice(3,11); track $index) {
     <div class="row">
       <div class="row-left">
-        <span class="row-index">{{$index + 4}}</span>
+        <span class="row-index">{{ $index + 4 }}</span>
         <img [src]="item.avatar" alt="" class="row-avatar" />
         <div class="row-name">
           {{ item?.nickname }}

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

@@ -27,6 +27,7 @@
     <div class="ladder">
       <div class="top-block">
         <div class="top2">
+          @if (orderList[1]) {
           <div class="user-block">
             <div class="user-avatar">
               <img src="img/2.png" alt="" class="tag" />
@@ -36,31 +37,36 @@
               {{ orderList[1]?.nickname }}
             </div>
           </div>
+          }@else {
+          <p style="color: #999">暂无</p>
+          }
           <div class="user-detail user-detail2">
             <!-- <div class="num">{{ orderList[1]?.credit }}</div> -->
             <div class="pm">TOP2</div>
           </div>
         </div>
         <div class="top1">
+          @if (orderList[0]) {
           <div class="user-block">
             <div class="user-avatar">
-              <img
-                src="img/1.png"
-                alt=""
-                class="tag"
-              />
+              <img src="img/1.png" alt="" class="tag" />
               <img [src]="orderList[0]?.avatar" class="avatar" alt="" />
             </div>
             <div class="user-name">
               {{ orderList[0]?.nickname }}
             </div>
           </div>
+          }@else {
+          <p style="color: #999">暂无</p>
+          }
           <div class="user-detail user-detail1">
             <!-- <div class="num">{{ orderList[0]?.credit }}</div> -->
             <div class="pm">TOP1</div>
           </div>
         </div>
         <div class="top3">
+          @if (orderList[0]) {
+
           <div class="user-block">
             <div class="user-avatar">
               <img src="img/3.png" alt="" class="tag" />
@@ -70,6 +76,9 @@
               {{ orderList[2]?.nickname }}
             </div>
           </div>
+          }@else {
+          <p style="color: #999">暂无</p>
+          }
           <div class="user-detail user-detail3">
             <!-- <div class="num">{{ orderList[2]?.credit }}</div> -->
             <div class="pm">TOP3</div>