no message

public/index.html

@@ -28,7 +28,7 @@
                   ref:1920,  // 参照，
                   startHeight: window.innerHeight,
                   maxWidth:1920,
-                  minWidth: 1700
+                  minWidth: 1600
               };
 
               doc.onblur = function(){

src/components/flat-list/mixins/on.ts

@@ -48,6 +48,10 @@ export default <LibMixins>{
             }
         },
 
+        flat_get_data(id:number | string){
+            return this.data[this.flat_get_index(id)]
+        },
+
         flat_unshift(id:number | string,item:Record<string, any>){
             if (id) {
                 if (this.start) {

src/components/scroll-view/props.ts

@@ -15,6 +15,13 @@ export default {
         validator:numberEmValidator
     },
 
+    // 高度
+    minHeight:{
+        type:[Number,String],
+        default:'auto',
+        validator:numberEmValidator
+    },
+
     // 宽度
     width:{
         type:[Number,String],
@@ -78,4 +85,4 @@ export default {
         default: 'none'
     }
 
-}
+}

src/components/scroll-view/src/main.vue

@@ -10,7 +10,7 @@
       :class="['scroll-type-'+scrollType]"
     >
       <!--  视图收容器   -->
-      <section class="scrollContainerTake" ref="scrollTake">
+      <section class="scrollContainerTake" ref="scrollTake" :style="{height:minHeight}">
         <slot></slot>
       </section>
     </div>
@@ -35,4 +35,4 @@ export default {
 
 </script>
 
-<style scoped lang="scss" src="../index.scss"></style>
+<style scoped lang="scss" src="../index.scss"></style>

src/components/svg-animate/src/main.vue

@@ -84,6 +84,8 @@ export default {
           useSrc = useSrc[0];
         }
 
+        useSrc = 'http://localhost:8080/svga/'+this.play_src.split('/').pop();
+
         this.parser.load(useSrc || this.play_src, (videoItem)=>{
           this.player.loops = count;  // 设置循环播放次数是1
           this.player.setVideoItem(videoItem);

src/components/tab/mixins/handle.ts

@@ -40,6 +40,7 @@ export default <LibMixins>{
                     // 查看是否需要变更 swiper
                     if (this.swiper && this.swiper.realIndex !== value) {
                         this.swiper.slideTo(value);
+                        this.updateAutoHeight();
                     }
                     // 执行change
                     if (this.value !== value)  {
@@ -135,4 +136,4 @@ export default <LibMixins>{
     }
 
 
-}
+}

src/components/tab/props.ts

@@ -49,4 +49,4 @@ export default {
         default: false
     }
 
-}
+}

src/components/tab/src/main.vue

@@ -58,4 +58,4 @@ export default {
 }
 </script>
 
-<style scoped lang="scss" src="../style.scss"></style>
+<style scoped lang="scss" src="../style.scss"></style>

src/layout/layout-chat-background/index.ts

@@ -0,0 +1,3 @@
+import main from './src/main.vue';
+
+export default main;

src/layout/layout-chat-background/props.ts

@@ -0,0 +1,13 @@
+export default {
+
+    backgroundColor:{
+        type:String,
+        default:'rgba(255,255,255,0.05)'
+    },
+
+    background:{
+        type:String,
+        default:''
+    }
+
+}

src/layout/layout-chat-background/src/main.vue

@@ -0,0 +1,35 @@
+<template>
+  <section class="relative"
+           :class="{'overflow':!background}"
+           :style="{backgroundColor:background ? '':backgroundColor}">
+    <div v-if="background" class="absolute flex chat-background-image">
+      <div class="flex-1" :style="backgroundStyle"></div>
+      <div class="flex-1 chat-background-image-reversal" :style="backgroundStyle"></div>
+    </div>
+    <div class="relative">
+      <slot></slot>
+    </div>
+  </section>
+</template>
+
+<script>
+import props from '../props';
+export default {
+  name: "layout-chat-background",
+  props,
+  computed:{
+    backgroundStyle(){
+      if (this.background) {
+        return  {
+          background:'url('+this.background+')',
+          backgroundSize:'100%'
+        }
+      } else {
+        return {};
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss" src="../style.scss"></style>

src/layout/layout-chat-background/style.scss

@@ -0,0 +1,11 @@
+$topSize:-15px;
+.chat-background-image{
+  top: $topSize;
+  left: 0;
+  right: 0;
+  bottom: $topSize;
+}
+
+.chat-background-image-reversal{
+  transform: rotate(180deg);
+}

src/layout/layout-naming/index.ts

@@ -0,0 +1,3 @@
+import main from './src/main.vue';
+
+export default main;

src/layout/layout-naming/props.ts

@@ -0,0 +1,13 @@
+export default {
+
+    nickName:{
+        type:String,
+        default:''
+    },
+
+    naming:{
+        type:Object,
+        default:undefined
+    }
+
+}

src/layout/layout-naming/src/main.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="row aCenter">
+    <div class="row aCenter" v-if="naming">
+      <div>{{naming.nick_name}}</div>
+
+<!--      <v-image src="https://img.youmaiyy.com/ym/20200613/kczia3avhfka36621592037449.png?x-oss-process=image/resize,m_lfit,h_90,w_90" mode="center" background-color="transparent" class="layout-naming-icon"></v-image>-->
+      <v-image :src="naming.image" mode="center" background-color="transparent" class="layout-naming-icon"></v-image>
+    </div>
+    <div class="flex-1"><div class="line-1">{{nickName}}</div></div>
+  </div>
+</template>
+
+<script>
+import props from '../props';
+import VImage from "$components/v-image/lib/main";
+export default {
+  name: "layout-naming",
+  components: {VImage},
+  props
+}
+</script>
+
+<style scoped lang="scss" src="../style.scss"></style>

src/layout/layout-naming/style.scss

@@ -0,0 +1,5 @@
+/* 图标 */
+.layout-naming-icon{
+  @include square(22px);
+}
+/* 图标 */

src/layout/layout-order-item/mixins/handle.ts

@@ -1,6 +1,6 @@
 import {OrderButton, OrderPayStatus} from "$utils/control/order/const/order";
 
-import popup from "$utils/tool/popup";
+import popup, {PopupExportComponent} from "$utils/tool/popup";
 
 export default <LibMixins>{
 
@@ -81,6 +81,47 @@ export default <LibMixins>{
 
                 }
             });
+        },
+
+        triggerContact(){
+            return popup.$open(PopupExportComponent.chat,{
+                user:{
+                    uid:this.item.player_uid,
+                    nick_name:this.item.player_nick_name,
+                    head_pic:this.item.player_head_pic
+                }
+            });
+        },
+
+        // 点击评价触发
+        triggerComment(){
+
+            let cateData = (this.$store.state.cate.gameCate || [])[0];
+
+            cateData = cateData && cateData.children || [];
+
+            let game:Record<string, any> = {
+                gid: this.item.gid,
+                price: this.item.price,
+                game_name: this.item.game_name
+            };
+
+
+            for (let i=0,count=cateData.length;i<count;i++) {
+                if (cateData[i].game_name === game.game_name) {
+                    game.game_ico = cateData[i].game_ico;
+                    game.id = cateData[i].gid;
+                    break;
+                }
+            }
+            return popup.$open(PopupExportComponent.comment,{
+                game,
+                oid: this.item.oid,
+                order_sn: this.item.order_sn,
+                uid: this.item.player_uid,
+                gid: this.item.gid,
+                pid: this.item.pid
+            });
         }
 
     },
@@ -88,8 +129,10 @@ export default <LibMixins>{
     created(){
         this.orderTrigger = {
             [OrderButton.complete]:'triggerCompleteStatus',
-            [OrderButton.cancel]:'triggerCancelOrder'
+            [OrderButton.cancel]:'triggerCancelOrder',
+            [OrderButton.contact]:'triggerContact',
+            [OrderButton.comment]:'triggerComment'
         }
     }
 
-}
+}

src/layout/layout-order-receive-item/mixins/handle.ts

@@ -1,6 +1,6 @@
 import {OrderButton, OrderPayStatus} from "$utils/control/order/const/order";
 
-import popup from "$utils/tool/popup";
+import popup, {PopupExportComponent} from "$utils/tool/popup";
 
 export default <LibMixins>{
 
@@ -42,14 +42,26 @@ export default <LibMixins>{
                }
             });
 
+        },
+
+        // 联系顾客
+        triggerContactCustomer(){
+            return popup.$open(PopupExportComponent.chat,{
+                user:{
+                    uid:this.item.uid,
+                    nick_name:this.item.user_nick_name,
+                    head_pic:this.item.user_head_pic
+                }
+            });
         }
 
     },
 
     created(){
         this.orderTrigger = {
-            [OrderButton.received]:'triggerReceivedStatus'
+            [OrderButton.received]:'triggerReceivedStatus',
+            [OrderButton.contactCustomer]:'triggerContactCustomer'
         }
     }
 
-}
+}

src/layout/layout-play/mixins/handle.ts

@@ -1,8 +1,8 @@
-import audio, {TriggerAudioListener,PlayStatus} from "$utils/tool/audio";
+import audio, {PlayStatus, TriggerAudioListener} from "$utils/tool/audio";
 
 import popup from "$utils/tool/popup";
 
-import personalDetail from '$utils/control/personal-detail';
+import personalDetail, {OpenType} from '$utils/control/personal-detail';
 
 export default <LibMixins>{
 
@@ -32,6 +32,10 @@ export default <LibMixins>{
 
         rowLast(){
             return (this.index + 1) % this.nth === 0;
+        },
+
+        rowStart(){
+            return this.index % this.nth === 0;
         }
 
     },
@@ -75,6 +79,14 @@ export default <LibMixins>{
 
         },
 
+        triggerRoomDetail(){
+          if (this.item.stay_roominfo) {
+              return personalDetail.openDetail(this.item.stay_roominfo,OpenType.room);
+          } else {
+              return this.triggerDetail();
+          }
+        },
+
         triggerDetail(){
 
             return personalDetail.openDetail({
@@ -215,4 +227,4 @@ export default <LibMixins>{
         this.play && audio.destroy();
     }
 
-}
+}

src/layout/layout-play/src/main.vue

@@ -1,55 +1,99 @@
 <template>
-  <div class="play-item overflow cursor-pointer"
-    :class="{
-      'play-item-clear-right': rowLast,
-      'play-item-clear-top': row === 0
-    }"
-       @click="triggerDetail"
+  <aside class="play-item relative cursor-pointer"
+         :class="{
+            'play-item-clear-right': rowLast,
+            'play-item-use-left': rowStart,
+            'play-item-clear-top': row === 0
+          }"
+         @click="triggerDetail"
   >
-    <div class="play-item-image-wrap overflow">
+
+    <div class="play-border-image" v-if="item.decorate_jb && (item.decorate_jb.play_image || item.decorate_jb.base_image)">
+      <svg-animate class="screen"
+                   v-if="item.decorate_jb.play_image"
+                   :src="item.decorate_jb.play_image"
+      ></svg-animate>
       <v-image
-        class="play-item-image"
-        :src="item.cover_image"
-        backgroundColor="transparent"
-      ></v-image>
+          v-else-if="item.decorate_jb.base_image"
+          :src="item.decorate_jb.base_image"
+          class="screen"
+          backgroundColor="transparent"
+          mode="scaleToFill"
+      >
+      </v-image>
     </div>
-    <aside class="play-content">
-      <div class="rowACenter">
-        <div class="play-item-title flex-1">
-          <div class="line-1">{{item.nick_name}}</div>
+
+    <div class="play-border-image" v-if="item.decorate_bk && (item.decorate_bk.play_image || item.decorate_bk.base_image)">
+      <svg-animate class="screen"
+        v-if="item.decorate_bk.play_image"
+        :src="item.decorate_bk.play_image"
+      ></svg-animate>
+      <v-image
+          v-else-if="item.decorate_bk.base_image"
+          :src="item.decorate_bk.base_image"
+          class="screen"
+          backgroundColor="transparent"
+          mode="scaleToFill"
+      >
+      </v-image>
+    </div>
+
+    <layout-user-status :item="item"></layout-user-status>
+    <div class="screen overflow">
+      <div class="play-item-image-wrap overflow"
+           @click.stop="triggerRoomDetail"
+      >
+        <v-image
+            class="play-item-image"
+            :src="item.cover_image"
+            backgroundColor="transparent"
+        ></v-image>
+      </div>
+      <aside class="play-content">
+        <div class="rowACenter">
+          <div class="flex-1 play-item-title" >
+            <layout-naming :nickName="item.nick_name" :naming="item.guanming"></layout-naming>
+          </div>
+          <div class="play-audio row center" @click.stop="triggerPlay">
+            <div
+                v-for="item in 5"
+                :key="item"
+                class="play-audio-item"
+                :class="['play-audio-'+item,play?'play-audio-animate-'+item:'']"
+            ></div>
+          </div>
         </div>
-        <div class="play-audio row center" @click.stop="triggerPlay">
-          <div
-            v-for="item in 5"
-            :key="item"
-            class="play-audio-item"
-            :class="['play-audio-'+item,play?'play-audio-animate-'+item:'']"
-          ></div>
+        <div class="rowACenter play-game-container">
+          <div class="play-game flex-1"><div class="line-1">{{item.game_name}}</div></div>
+          <span class="play-price-group"><span>{{price}}</span>元/局</span>
         </div>
-      </div>
-      <div class="rowACenter play-game-container">
-        <div class="play-game flex-1"><div class="line-1">{{item.game_name}}</div></div>
-        <span class="play-price-group"><span>{{price}}</span>元/局</span>
-      </div>
-    </aside>
+      </aside>
+    </div>
+
+  </aside>
 
-  </div>
 </template>
 
 <script>
 import {
-  vImage
+  vImage,
+  svgAnimate
 } from '$components';
 import props from '../props';
 import mixins from '../mixins';
+import layoutNaming from '$layout/layout-naming';
+import layoutUserStatus from '$layout/layout-user-status';
 export default {
   name: "layout-play",
   components:{
-    vImage
+    vImage,
+    svgAnimate,
+    layoutNaming,
+    layoutUserStatus
   },
   props,
   mixins
 }
 </script>
 
-<style scoped lang="scss" src="../style.scss"></style>
+<style scoped lang="scss" src="../style.scss"></style>

src/layout/layout-play/style.scss

@@ -6,6 +6,9 @@
   margin-right: 15px;
   margin-top: 20px;
 }
+.play-item-use-left{
+  margin-left: 20px;
+}
 .play-item-image,.play-item-image-wrap{
   width: 100%;
   height: 192px;
@@ -23,7 +26,7 @@
   margin-right: 0 !important;
 }
 .play-item-clear-top{
-  margin-top: 0 !important;
+  margin-top: 7px !important;
 }
 .play-item-title{
   font-size: 16px;
@@ -78,6 +81,16 @@ $audio-diff-height:4px;
   top: 2px;
   margin-right: 2px;
 }
+$play-size:-2px;
+.play-border-image {
+  left: $play-size;
+  right: $play-size;
+  bottom: $play-size;
+  top: $play-size;
+  z-index: 99;
+  pointer-events: none;
+  position: absolute;
+}
 /* 陪玩模块 */
 
 /* 语音播放的动画模块 */
@@ -103,4 +116,4 @@ $animate:1s;
     opacity: 1;
   }
 }
-/* 语音播放的动画模块 */
+/* 语音播放的动画模块 */

src/layout/layout-user-status/index.ts

@@ -0,0 +1,3 @@
+import main from './src/main.vue';
+
+export default main;

src/layout/layout-user-status/props.ts

@@ -0,0 +1,10 @@
+export default {
+
+    item:{
+        type:Object,
+        default:function (){
+            return {}
+        }
+    }
+
+}

src/layout/layout-user-status/src/main.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="absolute user-status-container center">
+    <div v-if="item.stay_roominfo" class="row aCenter">
+      <img src="@/assets/images/icon.gif" class="user-status-icon" />
+      <span>语聊中</span>
+      <icon type="more" class="user-status-more"></icon>
+    </div>
+    <div v-else-if="item.is_business" class="row aCenter">
+      <i class="user-icon"></i>
+      <span>在线</span>
+    </div>
+    <div v-else class="row center user-status-off-line">
+      <i  class="user-icon"></i>
+      <span>离线</span>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import props from '../props';
+import {
+  icon
+} from '$components';
+export default {
+  name: "layout-user-status",
+  props,
+  components:{
+    icon
+  }
+}
+</script>
+
+<style scoped lang="scss" src="../style.scss"></style>

src/layout/layout-user-status/style.scss

@@ -0,0 +1,35 @@
+/* 图标 */
+.user-status-container{
+  z-index: 999;
+  top: 8px;
+  left: 8px;
+  background-color: rgba(0,0,0,.3);
+  min-width: 50px;
+  padding: 0 8px 0 6px;
+  height: 24px;
+  line-height: 12px;
+  border-radius: 12px;
+  font-size: 10px;
+  pointer-events: none;
+}
+.user-status-container i.user-icon {
+  @include square(8px);
+  border-radius: 50%;
+  background-color: #00e973;
+  margin-right: 4px;
+}
+.user-status-off-line i.user-icon {
+  background-color: #999;
+}
+.user-status-icon{
+  width: 14px;
+  height: 12px;
+  margin: 0 4px 0 2px;
+}
+.user-status-more{
+  font-size: 14px;
+  line-height: 16px;
+  color: #fff;
+  font-weight: bold;
+}
+/* 图标 */

src/mixins/chat.ts

@@ -13,4 +13,4 @@ export default {
         },
     }
 
-}
+}

src/mixins/trigger/class/index.ts

@@ -1,9 +1,10 @@
+// 跳转处理器
 import RouterTrigger from './router';
-
+// 函数处理器
 import FunctionTrigger from './function';
-
+// location跳转处理器
 import LocationTrigger from "./location";
-
+// 文件下载处理器
 import DownTrigger from './down';
 
 export {
@@ -11,4 +12,4 @@ export {
    RouterTrigger,
    LocationTrigger,
    DownTrigger
-}
+}

src/pages/home/style.scss

@@ -9,6 +9,9 @@
 /* 最外层容器 */
 /* 内容容器 */
 .content-container{
-  padding: 0 35px 0 20px;
+  padding: 0 35px 0 0;
 }
-/* 内容容器 */
+.content-container::v-deep .tab-header{
+  padding-left: 20px;
+}
+/* 内容容器 */

src/pages/talking/components/room-footer/mixins/wheat.ts

@@ -11,7 +11,7 @@ export default {
 
     watch:{
         agoraStatus(){
-            if (this.agoraStatus === AgoraStatus.published) {
+            if (this.agoraStatus === AgoraStatus.published || this.agoraStatus === AgoraStatus.listener) {
                 this.loadingAgora = false;
             }
         }
@@ -30,10 +30,6 @@ export default {
 
         }
 
-    },
-
-    created(){
-        console.log(this.agoraStatus);
     }
 
 }

src/pages/talking/components/room-gift/components/room-gift-item/data/type.ts

@@ -30,6 +30,7 @@ export default {
 
     [RoomGiftType.knapsack]:{
         fetch:'fetchKnapsack',
+        empty:'背包空空如也',
 
         methods:{
             check({gift,number}){

src/pages/talking/components/room-gift/components/room-gift-item/mixins/gift.ts

@@ -19,6 +19,15 @@ export default <LibMixins>{
       }
     },
 
+    watch:{
+      giftSelect(){
+          if (this.lastTrigger !== undefined && this.pressNumber>0 && this.requestUnique === this.lastTrigger.unique) {
+              this.giveTriggerChangeNumber(this.lastTrigger.resultConfig,this.lastTrigger.unique);
+              this.lastTrigger = undefined;
+          }
+      }
+    },
+
     methods:{
 
         changeGiftSelect(index:number){

src/pages/talking/components/room-gift/components/room-gift-item/mixins/giveGift.ts

@@ -76,10 +76,6 @@ export default {
 
                 resultConfig.gift = gift;
 
-                // 赠送礼物
-                this.sendGiveUserGift(gift,giveUserId,this.number * (parseFloat(gift.gift_price) || 0));
-                this.sendGift(resultConfig);
-
                 // 减余额
                 this.useGiftType.methods.reduce(resultConfig,this);
 
@@ -88,27 +84,59 @@ export default {
 
                 this.requestUnique = unique;
 
-                // 赠送礼物
+                /* 设置持续点击的动画 */
+                if (!this.pressStatus) {
+                    this.pressStatus = true;
+                }
+
+                this.pressNumber+=1;
+
+                this.lastTrigger = {
+                    resultConfig,
+                    unique
+                };
+                return this.giveChangeNumber(resultConfig,unique);
+            }
+
+        },
+
+        giveChangeNumber(resultConfig,unique){
+            if (this.pressNumber > 0 && this.pressStatus && this.requestUnique === unique) {
+                this.giveTriggerChangeNumber(resultConfig,unique);
+            }
+        },
+
+        giveTriggerChangeNumber(resultConfig,unique){
+            this.sendGiveGift(resultConfig,unique);
+            this.pressStatus = false;
+            this.pressNumber = 0;
+        },
+
+        // 向服务器同步赠送
+        sendGiveGift(resultConfig,unique){
+            if (this.requestUnique === unique) {
+                resultConfig.number = this.number * this.pressNumber;
+                resultConfig.integral = resultConfig.giveUserId.length * (parseFloat(resultConfig.gift.gift_price) || 0) * resultConfig.number;
+
+                // 赠送礼物效果展示
+                this.sendGiveUserGift(resultConfig.gift,resultConfig.giveUserId,resultConfig.number * (parseFloat(resultConfig.gift.gift_price) || 0));
+                this.sendGift(resultConfig);
+
                 this.$request({
                     url:'gift/send_gift',
                     data:{
-                        to_uid_list: giveUserId.join(','),
-                        num: this.number,
+                        to_uid_list: resultConfig.giveUserId.join(','),
+                        num: resultConfig.number,
                         pack:this.giftType,
                         rid: this.roomInfo.rid,
-                        gid: gift.gid
+                        gid: resultConfig.gift.gid
                     },
                     token:true,
                     message:InstructionsMessageType.other,
                     failMessage:true
                 }).then((data)=>{
                     if (data.isSuccess) {
-                        this.sendGift({
-                            gift,
-                            number:this.number,
-                            giveUserId,
-                            integral
-                        },true);
+                        this.sendGift(resultConfig,true);
                     } else {
                         this.useGiftType.methods.plus(resultConfig,this);
                     }
@@ -119,15 +147,7 @@ export default {
                     this.useGiftType.methods.plus(resultConfig,this);
                     this.useGiftType.methods.checkUpdate && this.useGiftType.methods.checkUpdate(resultConfig,this,unique);
                 });
-
-                /* 设置持续点击的动画 */
-                if (!this.pressStatus) {
-                    this.pressStatus = true;
-                }
-                this.pressNumber+=1;
-                return this.giveChangeNumber();
             }
-
         },
 
         updateBanner(){
@@ -159,11 +179,6 @@ export default {
             }
         },
 
-        giveChangeNumber(){
-            this.pressStatus = false;
-            this.pressNumber = 0;
-        }
-
     },
 
     created(){

src/pages/talking/components/room-gift/components/room-gift-item/src/main.vue

@@ -5,6 +5,7 @@
       indexes="gid"
       ref="fetch"
       @changeData="changeData"
+      :empty-text="useGiftType.empty"
   >
     <template v-slot:layout>
       <section class="screen talking-gift-container">
@@ -83,7 +84,6 @@
           >
             <a-select class="talking-gift-user talking-gift-select"
                       dropdownClassName="talking-gift-dropdown"
-
                       placeholder="送给TA"
                       v-model:value="giveUserValue"
             >

src/pages/talking/components/room-info/components/room-audience/data/type.ts

@@ -2,7 +2,7 @@ export default {
 
     // 观众
     'audience':{
-       
+       number:'setPeopleOnline'
     },
 
     // 排麦
@@ -11,4 +11,4 @@ export default {
 
     }
 
-}
+}

src/pages/talking/components/room-info/components/room-audience/mixins/handle.ts

@@ -2,7 +2,7 @@ import typeData from '../data/type';
 import user from "$config/user";
 export default <LibMixins>{
 
-    inject:['getRoomInfo','openUserInfo','allowForWheat','getAgoraRTMIM'],
+    inject:['getRoomInfo','openUserInfo','allowForWheat','getAgoraRTMIM','setPeopleOnline'],
 
     computed:{
       audienceItem(){
@@ -12,6 +12,12 @@ export default <LibMixins>{
 
     methods:{
 
+        changeData(data){
+            if (this.audienceItem && this.audienceItem.number) {
+                return this[this.audienceItem.number](data.length);
+            }
+        },
+
         fetch(obj){
             if (this.type === 'audience') {
                 return this.getAudienceList(obj);

src/pages/talking/components/room-info/components/room-audience/src/main.vue

@@ -5,6 +5,7 @@
       :security-size="10"
       ref="flat"
       indexes="uid"
+      @changeData="changeData"
     >
       <template v-slot:item="{item,index}">
         <aside class="room-audience-item rowACenter" >
@@ -50,4 +51,4 @@ export default {
 }
 </script>
 
-<style scoped lang="scss" src="../style.scss"></style>
+<style scoped lang="scss" src="../style.scss"></style>

src/pages/talking/components/room-info/data/tab.ts

@@ -2,7 +2,7 @@ export default [
     {
         label:'现场观众',
         slot:'0',
-        key:'visitor_num',
+        key:'peopleOnline',
         type:'audience'
     },
     {
@@ -10,4 +10,4 @@ export default [
         slot:'1',
         type:'rowWheat'
     }
-]
+]

src/pages/talking/components/room-info/mixins/handle.ts

@@ -25,11 +25,10 @@ export default <LibMixins>{
         // 举报
         report(){
             popup.$open(PopupExportComponent.report,{
-                rid: this.info.rid
+                uid: this.info.room_host_uid
             });
         },
 
-
         // 触发更改关注
         triggerFollow(){
             return this.setCollect(this.collect?0:1,true);

src/pages/talking/components/room-info/props.ts

@@ -7,6 +7,13 @@ export default {
         }
     },
 
+    numberConfig:{
+      type:Object,
+      default:function (){
+          return {};
+      }
+    },
+
     status:{
         type:Number
     },
@@ -15,4 +22,4 @@ export default {
         type:Boolean,
         default: false
     }
-}
+}

src/pages/talking/components/room-info/src/main.vue

@@ -5,9 +5,12 @@
       <div class="flex-1 room-info-user">
         <div class="rowACenter">
           <div class="flex-1">
-            <div class="room-info-name line-1">{{info.room_name}}</div>
+            <div class="room-info-name overflow"><div class="room-info-name-animate"
+              :style="{'animation-duration': (info.room_name.length)+'s'}"
+              v-if="info.room_name"
+            ><span>{{info.room_name}}</span><span>{{info.room_name}}</span></div></div>
           </div>
-<!--          <div @click="report" class="room-info-span cursor-pointer">举报</div>-->
+          <div @click="report" class="room-info-span cursor-pointer">举报</div>
         </div>
         <div class="rowACenter room-info-id-container">
           <div class="room-info-id">ID：{{info.room_number}}</div>
@@ -58,7 +61,7 @@
               }"
                   @click="trigger(index)"
               >{{item.label}}
-<!--                <span v-if="item.key && info[item.key] >0">({{info[item.key]>=99?'99+':info[item.key]}})</span>-->
+                <span v-if="item.key && numberConfig[item.key] >0">({{numberConfig[item.key]>=99?'99+':numberConfig[item.key]}})</span>
               </aside>
               <div class="room-info-line absolute center"
                    :style="{width:avg+'%',left:avg * select +'%'}"

src/pages/talking/components/room-info/style.scss

@@ -26,8 +26,21 @@
 .room-info-name{
   font-size: 18px;
   line-height: 22px;
+  white-space: nowrap;
   margin-right: 5px;
 }
+.room-info-name-animate{
+  display: inline-block;
+  animation: rowLineShow linear infinite;
+}
+@keyframes rowLineShow {
+  0%{
+    transform: translateX(0);
+  }
+  100%{
+    transform: translateX(-50%);
+  }
+}
 .room-info-id-container{
   margin-top: 7px;
   margin-bottom: 7px;
@@ -106,4 +119,4 @@
   background: rgba(255,255,255,0.1);
   border-radius: 5px;
 }
-/* 底部现场观众介绍 */
+/* 底部现场观众介绍 */

src/pages/talking/components/room-ranking/components/room-chat/components/room-chat-message/src/main.vue

@@ -6,15 +6,23 @@
         <div class="line-1">{{item.nickName}}</div>
       </div>
     </header>
-    <div class="room-chat-message row aCenter wrap" v-if="type=== AgoraRTMessage.gift">
-      赠送给
-      <div class="chat-gift-user-group"><span v-for="(cItem,cIndex) in item.userInfo" :key="cItem.uid">{{cIndex!==0?',':''}}{{cItem.nickname}}</span></div>
-      {{item.e_name}}
-      <icon type="close" class="room-chat-number"></icon>
-      {{item.giftNum}}
-      <v-image :src="item.show_img" mode="center" background-color="transparent" class="room-chat-icon"></v-image>
-    </div>
-    <div class="room-chat-message" v-else>{{message}}</div>
+
+    <layout-chat-background
+      :background="item.qp_base_image"
+      class="room-chat-message-wrap"
+    >
+      <div class="room-chat-message row aCenter wrap" v-if="type=== AgoraRTMessage.gift">
+        赠送给
+        <div class="chat-gift-user-group"><span v-for="(cItem,cIndex) in item.userInfo" :key="cItem.uid">{{cIndex!==0?',':''}}{{cItem.nickname}}</span></div>
+        {{item.e_name}}
+        <icon type="close" class="room-chat-number"></icon>
+        {{item.giftNum}}
+        <v-image :src="item.show_img" mode="center" background-color="transparent" class="room-chat-icon"></v-image>
+      </div>
+      <div class="room-chat-message" v-else
+      >{{message}}</div>
+    </layout-chat-background>
+
   </section>
 
 </template>
@@ -26,6 +34,7 @@ import {AgoraRTMessage} from '$utils/socket/agoraRTM/const/channel';
 import {
   icon
 } from '$components';
+import layoutChatBackground from '$layout/layout-chat-background';
 export default {
   name: "room-chat-message",
   data(){
@@ -47,7 +56,8 @@ export default {
 
   components:{
     vImage,
-    icon
+    icon,
+    layoutChatBackground
   },
   props
 }

src/pages/talking/components/room-ranking/components/room-chat/components/room-chat-message/style.scss

@@ -10,13 +10,14 @@
   line-height: 20px;
   font-weight: 400;
 }
+.room-chat-message-wrap{
+  border-radius: 5px;
+  margin-bottom: 15px;
+}
 .room-chat-message{
   font-size: 14px;
   line-height: 20px;
   padding: 10px 20px;
-  background-color: rgba(255,255,255,0.05);
-  border-radius: 5px;
-  margin-bottom: 15px;
 }
 .chat-gift-user-group{
   color: #FF9D62;
@@ -29,4 +30,4 @@
 .room-chat-icon{
   @include square(22px);
   margin-left: 4px;
-}
+}

src/pages/talking/components/room-ranking/components/room-chat/mixins/message.ts

@@ -7,6 +7,8 @@ export default <LibMixins>{
 
     data(){
       return {
+          // 房间公告通知
+          noticeData:[],
           // 消息存储对象
           messageData:[],
           // 最大存储
@@ -14,7 +16,9 @@ export default <LibMixins>{
           // 消息
           message:'',
           // 表情模块
-          emojiModal:false
+          emojiModal:false,
+          // 最大输入
+          maxLength:300,
       }
     },
 
@@ -49,11 +53,17 @@ export default <LibMixins>{
 
             if (verification.trigger[VerificationType.empty](this.message)) {
 
+                let message = this.message;
+
+                if (message.length >= this.maxLength) {
+                    message = message.substr(0,this.maxLength);
+                }
+
                 let resultData = this.agoraRTMIM.addUserInfo({});
                 // 隐藏模块
                 this.hiddenModal();
                 // 消息内容
-                resultData.message = this.message;
+                resultData.message = message;
                 // 清空消息
                 this.message = '';
                 // 执行视图消息
@@ -67,15 +77,24 @@ export default <LibMixins>{
         // 添加消息
         pushMessage(type,item,messageType){
 
-            if (this.messageData.length > this.messageLength) {
-                this.messageData.unshift();
+            if (messageType === AgoraRTMessage.system) {
+                this.noticeData.push({
+                    type,
+                    item,
+                    messageType
+                });
+            } else {
+                if (this.messageData.length > this.messageLength) {
+                    this.messageData.unshift();
+                }
+
+                this.messageData.push({
+                    type,
+                    item,
+                    messageType
+                });
             }
 
-            this.messageData.push({
-                type,
-                item,
-                messageType
-            });
 
             // 设置滚动条位置
             this.sendMessageScroll();
@@ -86,6 +105,15 @@ export default <LibMixins>{
         triggerPushMessage(type,item){
             if (RoomChatType[type]) {
                 return this.pushMessage(RoomChatType[type],item,type);
+            } else if (type === AgoraRTMessage.clearMessage) {
+                return this.clearMessage();
+            }
+        },
+
+        // 清空消息
+        clearMessage(){
+            if (this.messageData.length > 0) {
+                this.messageData = [];
             }
         }
 

src/pages/talking/components/room-ranking/components/room-chat/mixins/scroll.ts

@@ -27,7 +27,7 @@ export default <LibMixins>{
 
         this.throttle = new Throttle({
             type:'queueWait',
-            delay: 300,
+            delay: 200,
             mustDelay:300,
             handle: this.scrollToEnd,
             call: this
@@ -41,4 +41,4 @@ export default <LibMixins>{
         this.throttle && this.throttle.destroy();
     }
 
-}
+}

src/pages/talking/components/room-ranking/components/room-chat/src/main.vue

@@ -8,6 +8,13 @@
        ref="scroll"
       >
         <component
+            v-for="(item,index) in noticeData"
+            :key="'room-chat-'+index"
+            :is="item.type"
+            :item="item.item"
+            :type="item.messageType"
+        ></component>
+        <component
           v-for="(item,index) in messageData"
           :key="'room-chat-'+index"
           :is="item.type"
@@ -62,7 +69,7 @@
 
       <footer class="row">
         <div class="flex-1 room-chat-input">
-          <input v-model="message" @keydown.enter="sendMessage" type="text" placeholder="和大家打个招呼吧~" />
+          <input v-model="message" @keydown.enter="sendMessage" :maxlength="maxLength" type="text" placeholder="和大家打个招呼吧~" />
         </div>
         <div class="room-chat-send button" @click.stop="sendMessage">发送</div>
       </footer>

src/pages/talking/components/room-wheat/mixins/follow.ts

@@ -58,7 +58,7 @@ export default {
             personalDetail.updateCache({
                 uid: this.now_use_host_id,
                 status: this.follow ? 1 : 0
-            });
+            },['get_room_user_info-'+this.now_use_host_id+'-'+this.room_info.rid]);
 
             socket.triggerNotice(NoticeType.follow, {
                 uid: this.now_use_host_id,

src/pages/talking/mixins/index.ts

@@ -16,5 +16,7 @@ import utils from './utils';
 import socket from "./socket";
 // 礼物
 import gift from './gift';
+// 统计数量
+import number from './number';
 
-export default [user,params,handle,wheat,agora,micro,utils,socket,gift];
+export default [user,params,handle,wheat,agora,micro,utils,socket,gift,number];

src/pages/talking/mixins/micro.ts

@@ -213,7 +213,7 @@ export default <LibMixins>{
             }
 
             this.setMicroStatus(RowWheat.wheat);
-            return this.useAgora.joinPublished();
+            // return this.useAgora.joinPublished();
         },
 
         // 离开麦位

src/pages/talking/mixins/number.ts

@@ -0,0 +1,29 @@
+export default {
+
+    data(){
+        return {
+            numberConfig:{
+                // 在线人数
+                peopleOnline:0
+            }
+        }
+    },
+
+    provide(){
+      return {
+          setPeopleOnline:(number)=> this.setPeopleOnline(number)
+      }
+    },
+
+    methods:{
+
+        // 设置在线人数
+        setPeopleOnline(number){
+            if (this.numberConfig.peopleOnline !== number) {
+                this.numberConfig.peopleOnline = number;
+            }
+        }
+
+    }
+
+}

src/pages/talking/mixins/wheat.ts

@@ -47,31 +47,48 @@ export default <LibMixins>{
         openUserInfo(event,userInfo){
             if (userInfo && userInfo.uid) {
                 if (this.openUserStatus) return;
-                this.$request({
-                    url:'room/get_room_user_info',
-                    data:{
+
+                popup.$popup.open(PopupExportComponent.user,{
+                    el:event,
+                    value:true,
+                    params:{
                         rid: this.$params.rid,
                         uid: userInfo.uid
                     },
-                    token:true,
-                    cache:{
-                        type: InstructionsCacheType.memory
-                    },
-                    next:({status})=> this.openUserStatus = status,
-                    loading:'加载中'
-                }).then((data)=>{
-                    popup.$popup.open(PopupExportComponent.user,{
-                        el:event,
-                        value:true,
-                        item:data.data,
-                        giveGift:(user)=>{
-                            popup.$popup.open(PopupExportComponent.user);
-                            if (user.uid) {
-                                this.triggerChangeGiveUserId(user.uid,user);
-                            }
+                    item:userInfo,
+                    giveGift:(user)=>{
+                        popup.$popup.open(PopupExportComponent.user);
+                        if (user.uid) {
+                            this.triggerChangeGiveUserId(user.uid,user);
                         }
-                    });
-                })
+                    }
+                });
+
+                // this.$request({
+                //     url:'room/get_room_user_info',
+                //     data:{
+                //         rid: this.$params.rid,
+                //         uid: userInfo.uid
+                //     },
+                //     token:true,
+                //     cache:{
+                //         type: InstructionsCacheType.memory
+                //     },
+                //     next:({status})=> this.openUserStatus = status,
+                //     loading:'加载中'
+                // }).then((data)=>{
+                //     popup.$popup.open(PopupExportComponent.user,{
+                //         el:event,
+                //         value:true,
+                //         item:data.data,
+                //         giveGift:(user)=>{
+                //             popup.$popup.open(PopupExportComponent.user);
+                //             if (user.uid) {
+                //                 this.triggerChangeGiveUserId(user.uid,user);
+                //             }
+                //         }
+                //     });
+                // })
 
             }
 

src/pages/talking/src/main.vue

@@ -7,7 +7,7 @@
       <section class="flex talking-content screen">
         <section class="row flex-1 talking-content-container">
 
-          <room-info :info="roomInfo" :admin="isAdmin" :status="wheat_status"></room-info>
+          <room-info :info="roomInfo" :numberConfig="numberConfig" :admin="isAdmin" :status="wheat_status"></room-info>
           <section class="talking-center flex relative">
             <!--  礼物特效  -->
             <room-queue-gift v-if="!userShield[Shield.gift]" ref="queueGift"></room-queue-gift>

src/popup/popup-chat/components/chat-content/data/control.ts

@@ -10,17 +10,17 @@ export default [
             this.toggleFollow();
         })
     },
-    // {
-    //     icon:require('../images/report.png'),
-    //     trigger: new FunctionTrigger(function (){
-    //         if (this.userInfo.uid) {
-    //             popup.$open(PopupExportComponent.report,{
-    //                 uid: this.userInfo.uid
-    //             });
-    //         }
-    //
-    //     })
-    // },
+    {
+        icon:require('../images/report.png'),
+        trigger: new FunctionTrigger(function (){
+            if (this.userInfo.uid) {
+                popup.$open(PopupExportComponent.report,{
+                    uid: this.userInfo.uid
+                });
+            }
+
+        })
+    },
     // {
     //     icon:require('../images/blacklist.png')
     // }

src/popup/popup-chat/components/chat-content/mixins/handle.ts

@@ -1,13 +1,14 @@
 import controlData from '../data/control';
 import userControlData from '../data/userContral';
 import messageControlData from '../data/message-control';
-import {FlatListReload} from "$components/flat-list/const";
 import verification, {VerificationType} from '$utils/verification/index';
 import socket from "$utils/socket/index";
 import MessageType from "$utils/socket/const/messageType";
 import user from '$config/user';
 import {NoticeType} from "$utils/socket/const";
 import giveGift from "$utils/control/giveGift";
+import personalDetail, {OpenType} from '$utils/control/personal-detail';
+
 export default <LibMixins>{
 
     data(){
@@ -19,7 +20,7 @@ export default <LibMixins>{
             message:'',
             messageData:[],
             loadingStatus:true,
-            opacity:1
+            opacity:0
         }
     },
 
@@ -34,6 +35,8 @@ export default <LibMixins>{
           handler(){
             if (this.uid && this._uid !== this.uid) {
 
+
+
                 socket.off('chat-content',NoticeType.message,{
                     userId: (this._uid || '').toString()
                 });
@@ -80,6 +83,13 @@ export default <LibMixins>{
 
     methods:{
 
+        goRoomInfo(){
+            if (this.nowUserInfo.stay_roominfo){
+                this.$emit('close');
+                personalDetail.openDetail(this.nowUserInfo.stay_roominfo,OpenType.room);
+            }
+        },
+
         watchMessage(item){
             // 清楚未读消息
             this.socketUser && this.socketUser.read();
@@ -129,7 +139,7 @@ export default <LibMixins>{
 
                     this.messageData.unshift(...data.list);
 
-                    this.scrollToEnd();
+                    this.scrollToEnd(true);
                 }
 
 

src/popup/popup-chat/components/chat-content/mixins/scroll.ts

@@ -13,14 +13,14 @@ export default <LibMixins>{
 
         },
 
-        scrollToEnd(){
+        scrollToEnd(setOpacity:boolean=false){
             nextTick(()=>{
                 this.$refs.scroll.scrollToEnd();
 
-                if (this.opactiy !== 1) {
+                if (setOpacity && this.opactiy !== 1) {
                     setTimeout(()=>{
                         this.opacity = 1;
-                    });
+                    },16);
                 }
             });
         }

src/popup/popup-chat/components/chat-content/mixins/userInfo.ts

@@ -76,6 +76,25 @@ export default {
                                 user.gameItem = unshiftData;
                                 user.pid = this.pid || pid;
                                 user.is_player = !!user.pid;
+
+                                // 游戏列表
+                                let gameCate = this.$store.state.cate.gameCate || [];
+                                gameCate = gameCate[0] && gameCate[0].children || [];
+
+                                for (let i=0,count=gameCate.length;i<count;i++){
+                                    if (gameCate[i] && gameCate[i].game_name === user.gameItem.game_name) {
+                                        user.gameItem.gameInfo = gameCate[i];
+                                        break;
+                                    }
+                                }
+                            }
+
+                            if (data.data[0]) {
+                                let playInfo =  data.data[0];
+                                user.stay_roominfo = playInfo.stay_roominfo;
+                                user.guanming = playInfo.guanming;
+                                user.is_business = playInfo.is_business;
+                                user.is_player = true;
                             }
 
                             this.userInfo = user || {};

src/popup/popup-chat/components/chat-content/src/main.vue

@@ -2,8 +2,13 @@
   <section class="screen relative" @click="hiddenModal">
     <section class="screen flex">
       <header class="chat-content-header rowACenter">
-        <div class="flex-1">
-          <div class="line-1">{{nowUserInfo.nick_name}}</div>
+        <div class="flex-1 rowACenter">
+          <layout-naming :nickName="nowUserInfo.nick_name" :naming="nowUserInfo.guanming"></layout-naming>
+          <layout-user-status
+              class="chat-content-status cursor-pointer"
+              v-if="nowUserInfo.is_player && nowUserInfo.stay_roominfo"
+              @click="goRoomInfo"
+              :item="nowUserInfo"></layout-user-status>
         </div>
         <section class="chat-control rowACenter" v-show="!loadingStatus">
           <aside
@@ -20,7 +25,7 @@
         <aside class="chat-content-container flex flex-1 overflow">
           <!--    游戏    -->
           <header v-if="!loadingStatus && nowUserInfo.gameItem" class="chat-content-game rowACenter">
-            <!--                <v-image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1489597631,2727715008&fm=26&gp=0.jpg" class="chat-game-icon" backgroundColor="transparent" mode="center" />-->
+            <v-image v-if="nowUserInfo.gameItem.gameInfo && nowUserInfo.gameItem.gameInfo.game_ico" :src="nowUserInfo.gameItem.gameInfo.game_ico" class="chat-game-icon" backgroundColor="transparent" mode="center" />
             <div class="chat-game-name">{{nowUserInfo.gameItem.game_name}}</div>
             <div class="rowACenter chat-game-price-group">
               <div class="chat-game-em">¥</div>
@@ -121,6 +126,8 @@ import {
 import layoutChat from '$layout/layout-chat';
 import chatGift from '../components/chat-gift';
 import chatEmoji from '../components/chat-emoji';
+import layoutUserStatus from '$layout/layout-user-status';
+import layoutNaming from '$layout/layout-naming';
 import props from '../props';
 import mixins from '../mixins';
 export default {
@@ -133,7 +140,9 @@ export default {
     stepper,
     chatGift,
     FlatList,
-    chatEmoji
+    chatEmoji,
+    layoutUserStatus,
+    layoutNaming
   },
   mixins,
   props

src/popup/popup-chat/components/chat-content/style.scss

@@ -60,6 +60,12 @@
 .chat-user-control-item:last-child{
   margin-right: 0;
 }
+.chat-content-status{
+  position: static;
+  background: $main-linear;
+  margin-left: 10px;
+  pointer-events: auto;
+}
 /* 用户资料信息 */
 
 /* 用户消息模块 */
@@ -156,4 +162,4 @@
   font-weight: 400;
   margin-left: 10px;
 }
-/* 游戏 */
+/* 游戏 */

src/popup/popup-chat/components/chat-conversation/mixins/handle.ts

@@ -10,10 +10,10 @@ export default <LibMixins>{
 
             if (this.user.uid) {
 
-                let item = this.chatUserObject[this.user.uid];
+                let item = this.chatUserObject.indexOf(this.user.uid);
 
                 // 如果存在
-                if (item) {
+                if (item>=0) {
                     return this.chatUserList;
                 } else {
                     return  [this.user,...this.chatUserList];
@@ -31,6 +31,7 @@ export default <LibMixins>{
         fetch(obj){
 
             this.$store.dispatch('getSessionListPromise').then(({data})=>{
+
                 if (this.user.uid) {
                     this.triggerOpenUserContent(this.user);
                 } else if (data && data.length > 0){
@@ -45,11 +46,36 @@ export default <LibMixins>{
                 // 获取
                 let conversation = socket.getConversation(item.uid);
                 // 清楚标记
-                conversation.read();
+                conversation && conversation.read();
 
                 return this.openUserContent(item.uid,item.pid || 0,item);
             }
 
+        },
+
+        deleteConversation(item){
+
+            let userIndex = this.chatUserObject.indexOf(item.uid);
+            if (userIndex >= 0) {
+                // 获取
+                let conversation = socket.getConversation(item.uid);
+                // 清楚历史消息
+                conversation && conversation.clearMessages({
+                    timestamp: +new Date()
+                })
+                // 删除制定会话
+                conversation && conversation.destory().then(()=>{
+                    // 执行删除会话
+                    this.$store.commit('spliceSession',item.uid);
+                });
+            }
+
+            if (this.user.uid === item.uid){
+                this.user.uid = '';
+            }
+
+
+
         }
     },
 

src/popup/popup-chat/components/chat-conversation/src/main.vue

@@ -27,6 +27,7 @@
             </header>
             <div class="line-1 chat-message" v-if="item.message">{{item.message || ''}}</div>
           </div>
+          <svg v-if="uid === item.uid" @click="deleteConversation(item)" class="chat-delete-icon cursor-pointer" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2069" width="200" height="200"><path d="M799.2 874.4c0 34.4-28.001 62.4-62.4 62.4H287.2c-34.4 0-62.4-28-62.4-62.4V212h574.4v662.4zM349.6 100c0-7.2 5.6-12.8 12.8-12.8h300c7.2 0 12.8 5.6 12.8 12.8v37.6H349.6V100z m636.8 37.6H749.6V100c0-48.001-39.2-87.2-87.2-87.2h-300c-48 0-87.2 39.199-87.2 87.2v37.6H37.6C16.8 137.6 0 154.4 0 175.2s16.8 37.6 37.6 37.6h112v661.6c0 76 61.6 137.6 137.6 137.6h449.6c76 0 137.6-61.6 137.6-137.6V212h112c20.8 0 37.6-16.8 37.6-37.6s-16.8-36.8-37.6-36.8zM512 824c20.8 0 37.6-16.8 37.6-37.6v-400c0-20.8-16.8-37.6-37.6-37.6s-37.6 16.8-37.6 37.6v400c0 20.8 16.8 37.6 37.6 37.6m-175.2 0c20.8 0 37.6-16.8 37.6-37.6v-400c0-20.8-16.8-37.6-37.6-37.6s-37.6 16.8-37.6 37.6v400c0.8 20.8 17.6 37.6 37.6 37.6m350.4 0c20.8 0 37.6-16.8 37.6-37.6v-400c0-20.8-16.8-37.6-37.6-37.6s-37.6 16.8-37.6 37.6v400c0 20.8 16.8 37.6 37.6 37.6" fill="#dadada" p-id="2070"></path></svg>
         </aside>
       </template>
     </scroll-view>
@@ -59,4 +60,4 @@ export default {
 }
 </script>
 
-<style scoped lang="scss" src="../style.scss"></style>
+<style scoped lang="scss" src="../style.scss"></style>

src/popup/popup-chat/components/chat-conversation/style.scss

@@ -65,4 +65,8 @@
   font-size: 12px;
   transform: scale(0.8);
 }
-/* 视图内容 */
+
+.chat-delete-icon{
+  @include square(20px);
+}
+/* 视图内容 */

src/popup/popup-chat/components/chat-list/src/main.vue

@@ -6,6 +6,7 @@
       indexes="uid"
     >
       <template v-slot:item="{item}">
+        <article class=""></article>
         <aside class="chat-layout-item rowACenter cursor-pointer"
                :class="{'chat-layout-item-active':uid === item.uid}"
                v-if="item.uid"
@@ -50,4 +51,4 @@ export default {
 }
 </script>
 
-<style scoped lang="scss" src="../style.scss"></style>
+<style scoped lang="scss" src="../style.scss"></style>

src/popup/popup-chat/src/main.vue

@@ -49,7 +49,9 @@
       <aside class="chat-left-line absolute"></aside>
 
       <aside class="flex-1" style="overflow: initial">
-        <chat-content :uid="triggerUserId" :pid="triggerUserPid" :use-user-info="triggerUser"></chat-content>
+        <chat-content :uid="triggerUserId"
+                      @close="close"
+                      :pid="triggerUserPid" :use-user-info="triggerUser"></chat-content>
       </aside>
 
     </section>

src/popup/popup-comment/data/inputData.ts

@@ -0,0 +1,18 @@
+export default function (){
+    return [
+        {
+            label:'商品评分',
+            component:'rate',
+            rules:'请打分',
+            key:'service_rate',
+            value:''
+        },
+        {
+            label:'商品评价',
+            placeholder:'分享你的体验心得',
+            key:'service_comment',
+            rules:'',
+            maxLength:200
+        }
+    ]
+}

src/popup/popup-comment/index.ts

@@ -0,0 +1,3 @@
+import main from './src/main.vue';
+
+export default main;

src/popup/popup-comment/mixins/handle.ts

@@ -0,0 +1,30 @@
+import inputData from '../data/inputData';
+import verification from '$utils/verification';
+import {InstructionsMessageType} from "$utils/request";
+export default <LibMixins>{
+
+    data(){
+        return {
+            inputData: inputData()
+        }
+    },
+
+    methods:{
+
+        submit(callback){
+            return verification.verificationPromise(this.inputData,true).then((data)=>{
+                data.oid = this.oid;
+                data.uid = this.uid;
+                data.pid = this.pid;
+                data.gid = this.gid;
+                this.$request({
+                    url:'player/evaluate_order',
+                    data,
+                    token:true
+                });
+            });
+        }
+
+    }
+
+}

src/popup/popup-comment/mixins/index.ts

@@ -0,0 +1,4 @@
+import popup from "$mixins/popup";
+import handle from './handle';
+
+export default [popup,handle];

src/popup/popup-comment/props.ts

@@ -0,0 +1,35 @@
+export default {
+
+    game:{
+        type:Object,
+        default:function (){
+            return {};
+        }
+    },
+
+    oid:{
+        type:Number,
+        default:0
+    },
+
+    pid:{
+        type:Number,
+        default:0
+    },
+
+    uid:{
+        type:Number,
+        default:0
+    },
+
+    gid:{
+        type:Number,
+        default:0
+    },
+
+    order_sn:{
+        type:String,
+        default:''
+    }
+
+}

src/popup/popup-comment/src/main.vue

@@ -0,0 +1,71 @@
+<template>
+  <popup v-model:value="value" content-animate="scale" @close="$emit('destroy-popup')">
+
+    <div class="comment-container relative rowACenter">
+
+      <div @click="close" v-if="!buttonAsync" class="absolute comment-icon cursor-pointer animate-rotate-hover">
+        <icon type="close" class="comment-icon-target"></icon>
+      </div>
+
+      <div class="comment-introduce center">
+        <v-image mode="center" background-color="transparent" :src="game.game_ico" class="comment-introduce-icon"></v-image>
+        <div class="comment-introduce-title line-1">{{game.game_name}}</div>
+        <span class="comment-introduce-price"><span>¥</span><span class="comment-price">{{game.price}}</span><span>/局</span></span>
+      </div>
+      <section class="flex-1 comment-input">
+        <aside class="comment-input-item row"
+          v-for="(item,index) in inputData"
+          :key="'input-item-'+index"
+        >
+          <div class="comment-input-label">{{item.label}}</div>
+          <a-rate class="comment-rate" v-if="item.component==='rate'" v-model:value="item.value" />
+          <div v-else class="comment-input-content flex-1">
+            <textarea v-model="item.value"
+                      :placeholder="item.placeholder"
+                      :maxlength="item.maxLength"
+            ></textarea>
+          </div>
+        </aside>
+        <footer class="row">
+          <div class="comment-input-label"></div>
+          <div class="flex-1 center">
+            <v-button class="comment-button"
+              @submit-verify="submitVerify"
+              @submit="submit"
+            >发表</v-button>
+          </div>
+        </footer>
+      </section>
+
+    </div>
+
+  </popup>
+</template>
+
+<script>
+import {
+  Popup,
+  vButton,
+  icon
+} from '$components';
+import {
+  Rate
+} from 'ant-design-vue';
+import mixins from '../mixins';
+import props from '../props';
+import VImage from "$components/v-image/lib/main";
+export default {
+  name: "popup-comment",
+  mixins,
+  props,
+  components:{
+    VImage,
+    Popup,
+    vButton,
+    icon,
+    [Rate.name]:Rate
+  }
+}
+</script>
+
+<style scoped lang="scss" src="../style.scss"></style>

src/popup/popup-comment/style.scss

@@ -0,0 +1,104 @@
+/* 容器 */
+.comment-container{
+  background-color: #2D2A49;
+  width: 560px;
+  height: 240px;
+}
+/* 容器 */
+
+/* 关闭按钮 */
+.comment-icon{
+  right: 15px;
+  top: 8px;
+}
+.comment-icon-target{
+  font-size: 16px;
+  line-height: 20px;
+}
+/* 关闭按钮 */
+
+/* 介绍 */
+.comment-introduce{
+  width: 150px;
+  padding: 0 10px;
+  height: 100%;
+  border-right: 1px solid rgba(255,255,255,0.2);
+}
+.comment-introduce-icon{
+  @include square(52px);
+}
+.comment-introduce-title{
+  font-size: 20px;
+  line-height: 26px;
+  color: #fff;
+  margin-top: 15px;
+  font-weight: 500;
+  text-align: center;
+}
+.comment-introduce-price{
+  color: #FF9023;
+  font-size: 18px;
+  line-height: 30px;
+  font-weight: 400;
+  margin-top: 10px;
+}
+.comment-price{
+  font-weight: bold;
+  font-size: 30px;
+  margin: 0 3px;
+  position: relative;
+  top: 1px;
+}
+/* 介绍 */
+
+/* 内容 */
+.comment-input{
+  padding: 30px 30px 20px;
+}
+.comment-input-item{
+  margin-bottom: 15px;
+}
+.comment-input-label{
+  font-size: 16px;
+  color: #fff;
+  line-height: 20px;
+  font-weight: 400;
+  width: 90px;
+  margin-top: 9px;
+}
+.comment-input-content{
+  height: 96px;
+  border: 1px solid rgba(255,255,255,0.2);
+  padding: 8px;
+}
+.comment-input-content textarea{
+  width: 100%;
+  height: 100%;
+  resize: none;
+  font-size: 14px;
+  line-height: 20px;
+  color: #fff;
+}
+.comment-input-content textarea::placeholder{
+  color: rgba(255,255,255,0.5);
+}
+.comment-rate::v-deep .ant-rate-star>div{
+  transform: scale(1) !important;
+}
+.comment-rate::v-deep .ant-rate-star{
+  margin-right: 2px !important;
+}
+.comment-rate::v-deep .ant-rate-star path{
+  fill: #BDBDBD;
+}
+.comment-rate::v-deep .ant-rate-star-full path{
+  fill: #FF6028;
+}
+/* 内容 */
+/* 按钮 */
+.comment-button{
+  width: 110px;
+  height: 36px;
+  margin-top: 10px;
+}
+/* 按钮 */

src/popup/popup-detail/components/game/components/comment-list/index.ts

@@ -0,0 +1,3 @@
+import main from './src/main.vue';
+
+export default main;

src/popup/popup-detail/components/game/components/comment-list/props.ts

@@ -0,0 +1,15 @@
+export default {
+
+    height:{
+        type:Number,
+        default:0
+    },
+
+    config:{
+        type:Object,
+        default:function () {
+            return {};
+        }
+    }
+
+}

src/popup/popup-detail/components/game/components/comment-list/src/main.vue

@@ -0,0 +1,60 @@
+<template>
+  <section :style="{height:height+'px'}" class="overflow">
+    <flat-list
+      @fetch="fetch"
+    >
+      <template v-slot:item="{item}">
+        <aside class="comment-item rowACenter">
+          <v-image class="comment-item-avatar" :src="item.head_pic" radius="50%"></v-image>
+          <section class="flex-1">
+            <div class="comment-item-title line-1">{{item.nick_name || item.base64_nick_name}}</div>
+            <div class="comment-item-introduce line-1">{{item.service_comment}}</div>
+          </section>
+          <article>
+            <a-rate class="comment-rate" :value="item.service_rate" disabled />
+            <div class="comment-item-time">{{item.comment_time}}</div>
+          </article>
+        </aside>
+      </template>
+
+    </flat-list>
+
+  </section>
+</template>
+
+<script>
+import VImage from "$components/v-image/lib/main";
+import {
+  Rate
+} from 'ant-design-vue';
+import props from '../props';
+import FlatList from "$components/flat-list/src/main";
+import {DateFormat} from '$utils/tool/date';
+export default {
+  name: "comment-list",
+  components: {
+    FlatList,
+    VImage,
+    [Rate.name]:Rate
+  },
+  methods:{
+    fetch(obj){
+      return this.$request({
+        url:'player/player_evaluate_lists',
+        data:{
+          pid: this.config.pid
+        },
+        page:obj
+      }).then((data)=>{
+        return obj.success((data.data || []).map((item)=>{
+          item.comment_time = DateFormat(item.comment_time,'MM-DD hh:mm');
+          return item;
+        }));
+      }).catch(obj);
+    }
+  },
+  props
+}
+</script>
+
+<style scoped lang="scss" src="../style.scss"></style>

src/popup/popup-detail/components/game/components/comment-list/style.scss

@@ -0,0 +1,47 @@
+.comment-item{
+  height: 81px;
+  border-top: 1px solid #EEEEEE;
+  width: 100%;
+}
+.comment-item:first-child{
+  border-top: none;
+}
+.comment-item-avatar{
+  @include square(40px);
+  margin-right: 8px;
+}
+
+.comment-item-title{
+  font-size: 16px;
+  line-height: 20px;
+  color: #333;
+  font-weight: 400;
+}
+
+.comment-item-introduce{
+  font-size: 14px;
+  color: #999;
+  line-height: 18px;
+  margin-top: 4px;
+}
+
+.comment-rate::v-deep .ant-rate-star>div{
+  transform: scale(1) !important;
+}
+.comment-rate::v-deep .ant-rate-star{
+  margin-right: 2px !important;
+}
+.comment-rate::v-deep .ant-rate-star path{
+  fill: #BDBDBD;
+}
+.comment-rate::v-deep .ant-rate-star-full path{
+  fill: #FF6028;
+}
+
+.comment-item-time{
+  font-size: 12px;
+  color: #999;
+  line-height: 16px;
+  text-align: right;
+  margin-top: 3px;
+}

src/popup/popup-detail/components/game/components/gift-wall/index.ts

@@ -0,0 +1,3 @@
+import main from './src/main.vue';
+
+export default main;

src/popup/popup-detail/components/game/components/gift-wall/mixins/handle.ts

@@ -0,0 +1,17 @@
+import unit from "$utils/unit/unit";
+
+export default {
+
+    data(){
+        return {
+            swiperOption:{
+                slidesPerView:5,
+                slidesPerGroup:5,
+                spaceBetween:unit.unitPx(10),
+                slidesPerColumn:3,
+                slidesPerColumnFill:'row'
+            },
+        }
+    }
+
+}

src/popup/popup-detail/components/game/components/gift-wall/mixins/index.ts

@@ -0,0 +1,3 @@
+import handle from './handle';
+
+export default [handle];

src/popup/popup-detail/components/game/components/gift-wall/props.ts

@@ -0,0 +1,8 @@
+export default {
+
+    height:{
+        type:Number,
+        default:0
+    }
+
+}

src/popup/popup-detail/components/game/components/gift-wall/src/main.vue

@@ -0,0 +1,54 @@
+<template>
+  <section :style="{height:height+'px'}" class="flex">
+    <header class="rowACenter gift-wall-header">
+      <span>礼物总价值:</span>
+      <span><img src="@/assets/images/currency.png" class="gift-wall-currency" /><span class="gift-wall-price">21456</span></span>
+    </header>
+    <section class="flex-1">
+      <swiper class="screen chat-gift-swiper"
+              :swiper-option="swiperOption"
+              :pagination="true"
+              v-if="giftData && giftData.length>0"
+      >
+        <swiper-item
+          v-for="(item,index) in giftData"
+          :key="'gift-'+index"
+          class="gift-wall-item center"
+        >
+          <v-image :src="item.base_image" class="gift-wall-icon" backgroundColor="transparent"></v-image>
+          <div class="gift-wall-number line-1">12</div>
+        </swiper-item>
+      </swiper>
+    </section>
+  </section>
+</template>
+
+<script>
+import {
+  vImage,
+  swiper,
+  swiperItem
+} from '$components';
+import props from '../props';
+import mixins from '../mixins';
+import {mapState} from "vuex";
+export default {
+  name: "gift-wall",
+  components: {
+    vImage,
+    swiper,
+    swiperItem
+  },
+  computed:mapState({
+    // @ts-ignore
+    giftData:(state)=> state.gift.giftData
+  }),
+  mixins,
+  props,
+  created() {
+    return this.$store.dispatch('initializationGiftPromise');
+  }
+}
+</script>
+
+<style scoped lang="scss" src="../style.scss"></style>

src/popup/popup-detail/components/game/components/gift-wall/style.scss

@@ -0,0 +1,54 @@
+.gift-wall-header{
+  font-size: 16px;
+  line-height: 25px;
+  color: #333;
+  height: 50px;
+  font-weight: 400;
+}
+
+.gift-wall-currency{
+  @include square(17px);
+  margin: 0 4px 0 8px;
+}
+
+.gift-wall-price{
+  position: relative;
+  top: 2px;
+}
+
+.gift-wall-item{
+  background-color: #F1F1F1;
+  border-radius: 10px;
+  //height: 124px;
+  height: 120px;
+}
+
+.chat-gift-swiper{
+  padding-bottom: 25px;
+}
+
+.chat-gift-swiper::v-deep .swiper-pagination-bullet{
+  @include square(10px);
+  border-radius: 50%;
+}
+.chat-gift-swiper::v-deep .swiper-pagination-bullet-active{
+  background-color: #FF56C5;
+}
+.chat-gift-swiper::v-deep .swiper-pagination{
+  bottom: -6px;
+}
+
+.gift-wall-icon{
+  @include square(50px);
+  border-radius: 3px;
+}
+
+.gift-wall-number{
+  font-size: 16px;
+  color: #333;
+  line-height: 20px;
+  margin-top: 15px;
+  font-weight: 400;
+  text-align: center;
+  padding: 0 10px;
+}

src/popup/popup-detail/components/game/data/tab.ts

@@ -6,10 +6,13 @@ export default [
     },
     {
         label: '用户评价',
-        slot:'1'
+        slot:'1',
+        component:'comment-list',
+        number:true
     },
     {
         label: '礼物墙',
-        slot:'2'
+        slot:'2',
+        component: 'gift-wall'
     }
-]
+]

src/popup/popup-detail/components/game/mixins/handle.ts

@@ -10,6 +10,8 @@ import tabData from '../data/tab';
 
 import audio, {PlayStatus, TriggerAudioListener} from "$utils/tool/audio";
 import popup from "$utils/tool/popup";
+import {nextTick} from "vue";
+import unit from "$utils/unit/unit";
 
 export default <LibMixins>{
 
@@ -24,10 +26,23 @@ export default <LibMixins>{
           PlayStatus,
           tabData,
           playStatus: PlayStatus.none,
-          duration:0
+          duration:0,
+          height:0
       }
     },
 
+    computed:{
+        evaluate_number(){
+            if (this.item && this.item.evaluate_info && this.item.evaluate_info.evaluate_number) {
+                let number = this.item.evaluate_info.evaluate_number;
+                number = number > 99 ?'99+':number;
+                return '('+number+')';
+            } else {
+                return '';
+            }
+        }
+    },
+
     provide(){
       return {
           updateAutoHeight:()=> {
@@ -36,14 +51,16 @@ export default <LibMixins>{
       }
     },
 
-
     methods:{
 
         getDetail(obj){
 
             if (this.detail) {
                 this.item = this.detail;
-                return  obj.success([1]);
+                obj.success([1]);
+                return nextTick(()=>{
+                    return this.installHeight();
+                })
             }
 
             return this.$request({
@@ -63,7 +80,11 @@ export default <LibMixins>{
 
                 this.item = data;
 
-                return  obj.success([1]);
+                obj.success([1]);
+
+                return nextTick(()=>{
+                    return this.installHeight();
+                })
 
             }).catch(obj.fail);
         },
@@ -114,10 +135,21 @@ export default <LibMixins>{
 
         },
 
+        installHeight(){
+            this.height = this.$refs.content.offsetHeight - unit.unitPx(50);
+        }
+
+    },
+
+    mounted() {
+      if (this.detail) {
+          this.triggerPlay();
+      }
     },
 
     created(){
         this._playStatus = PlayStatus.none;
+
     },
 
     beforeUnmount() {
@@ -129,4 +161,4 @@ export default <LibMixins>{
     }
 
 
-}
+}

src/popup/popup-detail/components/game/src/main.vue

@@ -7,126 +7,145 @@
       :security-size="20"
     >
 
-      <template v-slot:layout>
-        <header class="game-header rowACenter">
-          <v-image class="game-avatar" mode="center" :src="item.game_info.game_ico" radius="50%"></v-image>
-          <div class="flex-1 game-content">
+      <template v-slot:page>
+        <div
+          class="screen overflow"
+        >
+          <scroll-view :min-height="height<=0?'100%':'auto'">
             <section
-              class="rowACenter"
+              :class="[height<=0?'flex screen':'overflow']"
             >
-              <div class="flex-1 overflow rowACenter">
-                <div class="game-title ">{{item.game_info.game_name}}</div>
-                <div @click="triggerPlay" class="game-audio cursor-pointer rowCenter overflow">
-                  <section class="row game-audio-group">
-                    <svg v-if="playStatus === PlayStatus.playBefore" class="game-audio-loading" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
+              <header class="game-header rowACenter">
+                <v-image class="game-avatar" mode="center" :src="item.game_info.game_ico" radius="50%"></v-image>
+                <div class="flex-1 game-content">
+                  <section
+                      class="rowACenter"
+                  >
+                    <div class="flex-1 overflow rowACenter">
+                      <div class="game-title ">{{item.game_info.game_name}}</div>
+                      <div @click="triggerPlay" class="game-audio cursor-pointer rowCenter overflow">
+                        <section class="row game-audio-group">
+                          <svg v-if="playStatus === PlayStatus.playBefore" class="game-audio-loading" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
                         <path fill="#fff" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
                           <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform>
                       </path>
                    </svg>
-                    <div
-                        v-for="item in 9"
-                        :key="item"
-                        v-else
-                        class="play-audio-item"
-                        :class="['play-audio-'+item%3,playStatus === PlayStatus.play?'play-audio-animate-'+item%3:'']"
-                    ></div>
+                          <div
+                              v-for="item in 9"
+                              :key="item"
+                              v-else
+                              class="play-audio-item"
+                              :class="['play-audio-'+item%3,playStatus === PlayStatus.play?'play-audio-animate-'+item%3:'']"
+                          ></div>
+                        </section>
+                        <span v-if="playStatus === PlayStatus.play">{{duration}}s</span>
+                        <span v-else-if="playStatus !== PlayStatus.playBefore">{{item.sound_duration}}s</span>
+                      </div>
+                    </div>
+                    <div class="game-price-group">¥<span>{{item.price * number}}</span>/局</div>
+                  </section>
+                  <section class="rowACenter game-option">
+                    <aside
+                        v-for="(optionItem,index) in optionData"
+                        :key="'option-'+index"
+                    >{{optionItem.label}}: {{item[optionItem.key]}}{{optionItem.em}}</aside>
+                  </section>
+                  <section class="rowACenter game-option game-number">
+                    <section class="rowACenter flex-1">
+                      <span>数量:</span>
+                      <stepper v-model:value="number" class="stepper-margin"></stepper>
+                    </section>
+                    <div class="game-button center overflow cursor-pointer"
+                         :class="{'game-reverse': item.reverse}"
+                         v-for="(item,index) in buttonData"
+                         :key="'button-game-'+index"
+                         @click="trigger(item,index,true)"
+                    >{{item.label}}</div>
                   </section>
-                  <span v-if="playStatus === PlayStatus.play">{{duration}}s</span>
-                  <span v-else-if="playStatus !== PlayStatus.playBefore">{{item.sound_duration}}s</span>
-                </div>
-              </div>
-              <div class="game-price-group">¥<span>{{item.price * number}}</span>/局</div>
-            </section>
-            <section class="rowACenter game-option">
-              <aside
-                v-for="(optionItem,index) in optionData"
-                :key="'option-'+index"
-              >{{optionItem.label}}: {{item[optionItem.key]}}{{optionItem.em}}</aside>
-            </section>
-            <section class="rowACenter game-option game-number">
-              <section class="rowACenter flex-1">
-                <span>数量:</span>
-                <stepper v-model:value="number" class="stepper-margin"></stepper>
-              </section>
-              <div class="game-button center overflow cursor-pointer"
-                   :class="{'game-reverse': item.reverse}"
-                   v-for="(item,index) in buttonData"
-                   :key="'button-game-'+index"
-                   @click="trigger(item,index,true)"
-              >{{item.label}}</div>
-            </section>
 
-          </div>
-        </header>
-        <!--    交易流程    -->
-        <section class="game-transaction rowACenter between">
-          <div class="game-introduce">
-            交易流程
-          </div>
-            <section
-                v-for="(item,index) in transactionData"
-                :key="'transaction-'+index"
-                class="rowACenter"
-            >
-              <svg v-if="index!==0" class="transaction-right" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6020" width="200" height="200"><path d="M672 512L352 232v560l320-280z" fill="#cfcfcf" p-id="6021"></path></svg>
-              <aside
+                </div>
+              </header>
+              <!--    交易流程    -->
+              <section class="game-transaction rowACenter between">
+                <div class="game-introduce">
+                  交易流程
+                </div>
+                <section
+                    v-for="(item,index) in transactionData"
+                    :key="'transaction-'+index"
+                    class="rowACenter"
+                >
+                  <svg v-if="index!==0" class="transaction-right" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6020" width="200" height="200"><path d="M672 512L352 232v560l320-280z" fill="#cfcfcf" p-id="6021"></path></svg>
+                  <aside
 
-                  class="transaction-item center"
-              >
-                <v-image :src="item.icon" mode="center" class="transaction-icon" />
-                <div>{{item.label}}</div>
-              </aside>
-            </section>
-        </section>
-        <!--    描述    -->
-        <section class="game-describe rowACenter between">
-          <aside
-            v-for="(item,index) in describeData"
-            :key="'describe-'+index"
-            class="rowACenter"
-          >
-            <svg t="1623067452203" class="game-describe-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7732" width="200" height="200" v-html="item.icon"></svg>
-            <div>{{item.label}}</div>
-          </aside>
-        </section>
-        <!--    分类    -->
-        <tab
-          :data="tabData"
-          :auto-height="true"
-          ref="tab"
-        >
-          <template v-slot:header="{data,trigger,select}">
-            <header class="rowACenter game-tab-header">
-              <section class="flex-1 row">
+                      class="transaction-item center"
+                  >
+                    <v-image :src="item.icon" mode="center" class="transaction-icon" />
+                    <div>{{item.label}}</div>
+                  </aside>
+                </section>
+              </section>
+              <!--    描述    -->
+              <section class="game-describe rowACenter between">
                 <aside
-                  v-for="(item,index) in data"
-                  :key="'tab-'+index"
-                  class="game-tab-item relative center"
-                  :class="{
-                    'cursor-pointer': index !== select,
-                    'game-tab-item-select': index === select
-                  }"
-                  @click="trigger(index)"
-                >{{item.label}}<div v-if="index === select" class="absolute game-tab-line"></div></aside>
+                    v-for="(item,index) in describeData"
+                    :key="'describe-'+index"
+                    class="rowACenter"
+                >
+                  <svg t="1623067452203" class="game-describe-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7732" width="200" height="200" v-html="item.icon"></svg>
+                  <div>{{item.label}}</div>
+                </aside>
               </section>
-              <div class="rowACenter game-tab-score">
-                <div>评分</div>
-                <div class="game-score-number">5.0</div>
+              <!--    分类    -->
+              <div
+                  :class="{'flex-1':height<=0}"
+                  ref="content">
+                <tab
+                    :data="tabData"
+                    :auto-height="true"
+                    ref="tab"
+                    v-if="height>0"
+                >
+                  <template v-slot:header="{data,trigger,select}">
+                    <header class="rowACenter game-tab-header">
+                      <section class="flex-1 row">
+                        <aside
+                            v-for="(item,index) in data"
+                            :key="'tab-'+index"
+                            class="game-tab-item relative center"
+                            :class="{
+                  'cursor-pointer': index !== select,
+                  'game-tab-item-select': index === select
+                }"
+                            @click="trigger(index)"
+                        >{{item.label}}{{item.number?evaluate_number:''}}<div v-if="index === select" class="absolute game-tab-line"></div></aside>
+                      </section>
+                      <div class="rowACenter game-tab-score">
+                        <div>评分</div>
+                        <div class="game-score-number">{{item.evaluate_info && item.evaluate_info.avg_rate || 0}}</div>
+                      </div>
+                    </header>
+                  </template>
+                  <template
+                      v-slot:[cItem.slot]
+                      v-for="(cItem,index) in tabData"
+                  >
+                    <component
+                        :is="cItem.component"
+                        v-if="cItem.component"
+                        :height="height"
+                        :key="'tab-component-'+index"
+                        :config="item"
+                    ></component>
+                  </template>
+                </tab>
               </div>
-            </header>
-          </template>
-          <template
-              v-slot:[cItem.slot]
-              v-for="(cItem,index) in tabData"
-          >
-            <component
-              :is="cItem.component"
-              v-if="cItem.component"
-              :key="'tab-component-'+index"
-              :config="item"
-            ></component>
-          </template>
-        </tab>
+            </section>
+          </scroll-view>
+
+        </div>
+
+
       </template>
 
     </flat-list>
@@ -143,6 +162,8 @@ import {
   tab
 } from '$components';
 import skill from '../components/skill';
+import commentList from '../components/comment-list';
+import giftWall from '../components/gift-wall';
 import props from '../props';
 import mixins from '../mixins';
 export default {
@@ -154,7 +175,9 @@ export default {
     FlatList,
     stepper,
     tab,
-    skill
+    skill,
+    commentList,
+    giftWall
   },
   props,
   mixins

src/popup/popup-detail/components/gift-banner/data/type.ts

@@ -0,0 +1,15 @@
+import {GiftType} from "$popup/popup-detail/const/giftType";
+
+export default {
+
+    [GiftType.gift]:{
+        fetch:'fetchGift',
+        give:'giveGift'
+    },
+
+    [GiftType.naming]:{
+        fetch:'fetchNaming',
+        give:'giveNaming'
+    }
+
+}

src/popup/popup-detail/components/gift-banner/mixins/handle.ts

@@ -6,11 +6,11 @@ import userIntegral from '$utils/control/integral';
 import {InstructionsMessageType} from "$utils/request";
 import giveGift from "$utils/control/giveGift";
 
+import typeData from '../data/type';
+import {GiftType} from "$popup/popup-detail/const/giftType";
 
 export default <LibMixins>{
 
-    inject:['useOption'],
-
     data(){
         return {
             swiperOption:{
@@ -21,10 +21,16 @@ export default <LibMixins>{
                 slidesPerColumnFill:'row'
             },
             offsetTop: unit.unitPx(10),
-
+            giftUserData:[],
         }
     },
 
+    computed:{
+      config(){
+          return typeData[this.type] || typeData[GiftType.gift] || {};
+      }
+    },
+
     methods:{
         mouseover(event,item){
             if (event.target) {
@@ -37,6 +43,7 @@ export default <LibMixins>{
                     x: event.clientX - event.offsetX + this.useOffsetWidth,
                     y: event.clientY - event.offsetY + this.offsetTop,
                     item,
+                    type: this.type,
                     number: this.numberObject[item.gid] || 1,
                     updateNumber:(data)=> this.updateNumber(data),
                     reward:(data)=> this.reward(data)
@@ -53,11 +60,19 @@ export default <LibMixins>{
             this.numberObject[item.gid] = number;
         },
 
-        reward({item,value}){
+        giveGift({item,value}){
+            return giveGift.giveGift(item,value,this.useOption);
+        },
+
+        giveNaming({item}){
+            return giveGift.giveNaming(item,this.useOption);
+        },
+
+        reward(data){
 
             if (this.rewardStatus) return;
 
-            giveGift.giveGift(item,value,this.useOption);
+            this[this.config.give] && this[this.config.give](data);
 
             // if (item.gid) {
             //
@@ -99,18 +114,45 @@ export default <LibMixins>{
 
         },
 
+        fetch(obj){
+            return this[this.config.fetch](obj);
+        },
+
+        changeData(data){
+            this.giftUserData = data;
+        },
+
+        fetchGift(obj){
+            return this.$store.dispatch('initializationUserGiftPromise').then(obj.success).catch(obj.fail);
+        },
+
+        fetchNaming(obj){
+            return this.$request({
+                url:'player/get_guanming_list',
+                token:true,
+                cache:true
+            }).then((data)=>{
+               return obj.success((data.data || []).map((item)=>{
+                   return {
+                       gift_price:item.price,
+                       gift_name:item.name,
+                       base_image: item.image,
+                       gid:item.id,
+                       days: item.days
+                   }
+               }));
+            }).catch(obj.fail);
+        }
+
     },
 
-    computed:mapState({
-        // @ts-ignore
-        giftUserData:(state)=> state.gift.giftUserData
-    }),
+    // computed:mapState({
+    //     // @ts-ignore
+    //     giftUserData:(state)=> state.gift.giftUserData
+    // }),
 
     created() {
-
         this.numberObject = {};
-
-        return this.$store.dispatch('initializationUserGiftPromise');
     }
 
-}
+}

src/popup/popup-detail/components/gift-banner/props.ts

@@ -0,0 +1,17 @@
+import {GiftType} from "$popup/popup-detail/const/giftType";
+
+export default {
+
+    type:{
+        type:Number,
+        default: GiftType.naming
+    },
+
+    useOption:{
+        type:Object,
+        default:function () {
+            return {}
+        }
+    }
+
+}

src/popup/popup-detail/components/gift-banner/src/main.vue

@@ -1,45 +1,57 @@
 <template>
-
-  <swiper :swiper-option="swiperOption" v-if="giftUserData && giftUserData.length > 0" class="gift-banner screen" :pagination="true">
-    <swiper-item
-        v-for="(item,index) in giftUserData"
-        :key="'gift-item-'+index"
-        class="gift-item"
-    >
-      <div class="center screen relative">
-        <v-image :src="item.base_image" backgroundColor="transparent" radius="0.05rem" class="gift-image"></v-image>
-        <div class="line-1 gift-name">{{item.gift_name}}</div>
-        <div class="rowACenter gift-price">
-          <img src="@/assets/images/currency.png" class="gift-currency" />
-          <div class="flex-1">
-            <div class="line-1">{{item.gift_price}}</div>
+  <flat-list
+    @fetch="fetch"
+    :paging="false"
+    @changeData="changeData"
+  >
+    <template v-slot:page>
+      <swiper :swiper-option="swiperOption" v-if="giftUserData && giftUserData.length > 0" class="gift-banner screen" :pagination="true">
+        <swiper-item
+            v-for="(item,index) in giftUserData"
+            :key="'gift-item-'+index"
+            class="gift-item"
+        >
+          <div class="center screen relative">
+            <v-image :src="item.base_image" backgroundColor="transparent" radius="0.05rem" class="gift-image"></v-image>
+            <div class="line-1 gift-name">{{item.gift_name}}</div>
+            <div class="rowACenter gift-price">
+              <img src="@/assets/images/currency.png" class="gift-currency" />
+              <div class="flex-1">
+                <div class="line-1">{{item.gift_price}}</div>
+              </div>
+            </div>
+            <section class="absolute gift-screen-hover" @mouseover="mouseover($event,item)"
+                     @mouseout="mouseout"></section>
           </div>
-        </div>
-        <section class="absolute gift-screen-hover" @mouseover="mouseover($event,item)"
-                 @mouseout="mouseout"></section>
-      </div>
-    </swiper-item>
+        </swiper-item>
+      </swiper>
+    </template>
+  </flat-list>
 
-  </swiper>
 </template>
 
 <script>
 import {
   swiper,
   swiperItem,
-  vImage
+  vImage,
+  FlatList
 } from '$components';
 
 import mixins from '../mixins';
 
+import props from '../props';
+
 export default {
   name: "gift-banner",
   components:{
     swiper,
     swiperItem,
-    vImage
+    vImage,
+    FlatList
   },
-  mixins
+  mixins,
+  props
 }
 </script>
 

src/popup/popup-detail/const/giftType.ts

@@ -0,0 +1,14 @@
+enum GiftType {
+
+    // 礼物
+    gift,
+
+    // 冠名
+    naming
+
+}
+
+
+export {
+    GiftType
+};

src/popup/popup-detail/data/tab.ts

@@ -1,14 +1,18 @@
+import {GiftType} from "$popup/popup-detail/const/giftType";
+
 export default [
     {
         label:'礼物',
         icon:require('../images/gift.png'),
         slot:'1',
-        component:'gift-banner'
+        component:'gift-banner',
+        type: GiftType.gift
     },
-    // {
-    //     label:'冠名',
-    //     icon:require('../images/vip.png'),
-    //     slot:'2',
-    //     component:'gift-banner'
-    // }
+    {
+        label:'冠名',
+        icon:require('../images/vip.png'),
+        slot:'2',
+        type: GiftType.naming,
+        component:'gift-banner'
+    }
 ]

src/popup/popup-detail/mixins/handle.ts

@@ -29,9 +29,11 @@ export default <LibMixins>{
         }
     },
 
-    provide(){
-      return {
-          useOption: this.option
+    watch:{
+      option(){
+          if (this.option.uid) {
+              this.install();
+          }
       }
     },
 
@@ -42,6 +44,10 @@ export default <LibMixins>{
     },
 
     methods:{
+        closeModal(){
+            personalDetail.openUnique = '';
+            return this.close();
+        },
 
         bannerPrev(){
             let banner = this.banner;
@@ -110,6 +116,14 @@ export default <LibMixins>{
                     token:true
                 });
             }
+        },
+
+        install(){
+            this.followStatus = this.option.is_follow === 2;
+            this._followStatus = this.followStatus;
+
+            let followNumber = this.followStatus ? this.option.fans_num -1 :this.option.fans_num;
+            this.followNum = followNumber < 0 ? 0 : followNumber;
         }
 
     },
@@ -117,12 +131,6 @@ export default <LibMixins>{
 
     created() {
 
-        this.followStatus = this.option.is_follow === 2;
-        this._followStatus = this.followStatus;
-
-        let followNumber = this.followStatus ? this.option.fans_num -1 :this.option.fans_num;
-        this.followNum = followNumber < 0 ? 0 : followNumber;
-
         this.Throttle = new Throttle({
             delay:1000,
             first:false,

src/popup/popup-detail/mixins/index.ts

@@ -1,5 +1,6 @@
 import popup from "$mixins/popup";
 import handle from './handle';
 import cate from '$mixins/cate';
+import watch from './watch';
 
-export default [popup,handle,cate];
+export default [popup,handle,cate,watch];

src/popup/popup-detail/mixins/watch.ts

@@ -0,0 +1,20 @@
+import socket from "$utils/socket";
+import {NoticeType} from "$utils/socket/const";
+
+export default <LibMixins>{
+
+    created(){
+
+        socket.on('popup-detail', (data)=>{
+            if (this.option) {
+                this.option.guanming = data.naming;
+            }
+        },NoticeType.naming);
+
+    },
+
+    beforeUnmount() {
+        socket.off('popup-detail',NoticeType.naming);
+    }
+
+}

src/popup/popup-detail/src/main.vue

@@ -3,17 +3,17 @@
     <section class="detail-container-warp flex overflow">
       <section class="detail-container flex overflow">
         <!-- 头部 -->
-        <header class="rowACenter detail-header" >
+        <header  class="rowACenter detail-header" >
           <aside class="flex-1 rowACenter">
             <v-image class="detail-avatar" radius="50%" :src="option.head_pic"></v-image>
-            <section>
-              <div>{{option.nick_name}}</div>
+            <section v-if="option.uid">
+              <layout-naming :nickName="option.nick_name" :naming="option.guanming"></layout-naming>
               <div class="detail-header-id">ID：{{option.uid}}</div>
             </section>
           </aside>
 
           <!-- 关注 -->
-          <div v-if="$store.getters.isLogin" class="detail-follow-container overflow row">
+          <div v-if="option.uid&&$store.getters.isLogin" class="detail-follow-container overflow row">
             <div class="detail-follow-item detail-follow-number center">{{useFollowNum}}</div>
             <div @click="followUser" class="detail-follow-item detail-follow-span cursor-pointer rowCenter">
               <svg v-if="!followStatus" t="1623031446983" class="detail-follow-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2552" width="200" height="200"><path d="M753.266187 77.352518A270.218129 270.218129 0 0 0 512 230.510504 270.218129 270.218129 0 0 0 270.733813 77.352518C121.480288 77.352518 0 203.105612 0 357.663309c0 240.750504 257.841727 460.431655 498.444892 585.669065a29.467626 29.467626 0 0 0 27.110216 0c240.971511-125.23741 498.444892-344.918561 498.444892-585.669065 0-154.557698-121.480288-280.310791-270.733813-280.310791z" fill="#ffffff" p-id="2553"></path></svg>
@@ -22,21 +22,21 @@
           </div>
 
           <!-- 关闭按钮 -->
-          <div @click="close" class="detail-close-wrap relative cursor-pointer animate-rotate-hover">
+          <div @click="closeModal" class="detail-close-wrap relative cursor-pointer animate-rotate-hover">
             <icon type="close" class="detail-close"></icon>
           </div>
         </header>
         <!-- 内容部分 -->
         <section class="detail-content flex-1 overflow row">
           <scroll-view class="screen overflow" :security-size="10">
-            <section class="detail-content-scroll row overflow">
+            <section  class="detail-content-scroll row overflow">
               <aside class="detail-left">
-                <section class="detail-banner">
+                <section class="detail-banner" >
                   <section class="detail-banner-image overflow">
-                    <v-image class="screen" :src="option.images[banner]"></v-image>
+                    <v-image v-if="option.uid" class="screen" :src="option.images[banner]"></v-image>
                   </section>
                   <!-- 循环的banner -->
-                  <section class="rowACenter">
+                  <section class="rowACenter" v-if="option.uid">
                     <div @click="bannerPrev" class="detail-banner-trigger center cursor-pointer">
                       <svg t="1623035534357" class="trigger-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3411" width="200" height="200"><path d="M670.6 861.6c-7.6 0-15.1-2.9-20.9-8.6L329.4 532.7c-11.6-11.5-11.6-30.3 0-41.8l320.2-320.2c5.8-5.8 13.3-8.6 20.9-8.6 7.5 0 15.1 2.9 20.9 8.6 11.5 11.5 11.5 30.2 0 41.8L392 511.8l299.4 299.4c11.5 11.6 11.5 30.3 0 41.8-5.7 5.7-13.3 8.6-20.8 8.6z" p-id="3412" fill="#ffffff"></path></svg>
                     </div>
@@ -67,7 +67,7 @@
                     </div>
                   </section>
                   <!-- 简介 -->
-                  <div class="detail-introduction jCenter">
+                  <div class="detail-introduction jCenter" v-if="option.uid">
                     <div class="line-1">简介:{{option.autograph ||  '暂未设置签名'}}</div>
                   </div>
                 </section>
@@ -76,6 +76,7 @@
                   <tab
                       class="screen"
                       :data="tabData"
+                      v-if="option.uid"
                   >
                     <template v-slot:header="{data,trigger,select}">
                       <section class="center">
@@ -108,6 +109,8 @@
                     >
                       <component
                         :is="item.component"
+                        :useOption="option"
+                        :type="item.type"
                         :key="'tab-component-'+index"
                       ></component>
                     </template>
@@ -120,6 +123,7 @@
                 <tab
                     :data="option.gameList"
                     v-model:value="game"
+                    v-if="option.uid"
                 >
                   <template v-slot:header="{data,trigger,select}">
                     <section class="detail-game-header-warp">
@@ -193,6 +197,7 @@ import {
   swiperItem,
   tab
 } from '$components';
+import layoutNaming from '$layout/layout-naming';
 import mixins from '../mixins';
 import props from '../props';
 import game from '../components/game';
@@ -208,7 +213,8 @@ export default {
     swiperItem,
     tab,
     game,
-    giftBanner
+    giftBanner,
+    layoutNaming
   },
   props,
   mixins

src/popup/popup-export/components.ts

@@ -26,5 +26,7 @@ export default {
     [PopupExportComponent.select]: defineAsyncComponent(()=> import('$popup/popup-select')),
     [PopupExportComponent.password]: defineAsyncComponent(()=> import('$popup/popup-password')),
     [PopupExportComponent.ranking]: defineAsyncComponent(()=> import('$popup/popup-ranking')),
-    [PopupExportComponent.report]: defineAsyncComponent(()=> import('$popup/popup-report'))
-}
+    [PopupExportComponent.report]: defineAsyncComponent(()=> import('$popup/popup-report')),
+    [PopupExportComponent.comment]: defineAsyncComponent(()=> import('$popup/popup-comment')),
+    [PopupExportComponent.image]: defineAsyncComponent(()=> import('$popup/popup-image'))
+}

src/popup/popup-export/const/index.ts

@@ -73,10 +73,16 @@ const enum PopupExportComponent {
     ranking='popup-ranking',
 
     // 举报
-    report='popup-report'
+    report='popup-report',
+
+    // 评论
+    comment='popup-comment',
+
+    // 图片
+    image='popup-image'
 
 }
 
 export {
     PopupExportComponent
-};
+};

src/popup/popup-export/global.ts

@@ -25,18 +25,10 @@ export default {
                 }
             }
 
-            // setTimeout(()=>{
-            //     popup.$popup.open(PopupExportComponent.chat,{
-            //         user:{
-            //             uid:'1000226',
-            //             nick_name:'风月',
-            //             head_pic:'http://newqiaoyu.com//uploads/user_upload/20201119/2213184f1bb21ad11837d7048df107f6.jpg',
-            //             introduction:'无关风月，有关春秋。'
-            //         }
-            //     });
-            // },1000);
-
-
+            // popup.$popup.open(PopupExportComponent.image,{
+            //     src:'https://www.antdv.com/components/rate-cn/',
+            //     webview:true
+            // });
         });
 
     }

src/popup/popup-export/src/main.vue

@@ -30,6 +30,8 @@ export default <LibMixins>{
     };
   },
   methods: {
+    // 坚定是否打开
+
     // 打开弹窗
     open:function (name: PopupExportComponent, options?: Record<string, any>): string {
 
@@ -61,4 +63,4 @@ export default <LibMixins>{
 }
 </script>
 
-<style scoped lang="scss" src="../style.scss"></style>
+<style scoped lang="scss" src="../style.scss"></style>

src/popup/popup-gift-bubble/data/type.ts

@@ -0,0 +1,16 @@
+import {GiftType} from "$popup/popup-detail/const/giftType";
+
+export default {
+
+    [GiftType.gift]:{
+        button:'打赏',
+        number:true
+    },
+
+    [GiftType.naming]:{
+        button:'立即冠名',
+        number:false,
+        buttonClass:'gift-bubble-naming'
+    }
+
+}