no message

package-lock.json

@@ -8,11 +8,13 @@
       "version": "0.1.0",
       "dependencies": {
         "@rongcloud/imlib-v4": "^4.4.1",
+        "agora-rtc-sdk-ng": "^4.5.0",
         "ant-design-vue": "^2.1.6",
         "axios": "^0.21.1",
         "core-js": "^3.6.5",
+        "easemob-websdk": "^3.5.2",
         "recorder-js": "^1.0.7",
-        "swiper": "^6.6.2",
+        "swiper": "^5.4.5",
         "vue": "^3.0.0",
         "vue-class-component": "^8.0.0-0",
         "vue-router": "^4.0.0-0",
@@ -2661,6 +2663,11 @@
         "node": ">= 0.12.0"
       }
     },
+    "node_modules/agora-rtc-sdk-ng": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/agora-rtc-sdk-ng/-/agora-rtc-sdk-ng-4.5.0.tgz",
+      "integrity": "sha512-A93m5xkPkqnCx4J768FSj6mcgeaKkDCDUJVi+nnOSANlJ9GN75Bn6SleNwkbEB47PuecBnWqNBwrzuII2fDIkw=="
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.nlark.com/ajv/download/ajv-6.12.6.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fajv%2Fdownload%2Fajv-6.12.6.tgz",
@@ -5660,11 +5667,11 @@
       "dev": true
     },
     "node_modules/dom7": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/dom7/-/dom7-3.0.0.tgz",
-      "integrity": "sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==",
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
       "dependencies": {
-        "ssr-window": "^3.0.0-alpha.1"
+        "ssr-window": "^2.0.0"
       }
     },
     "node_modules/domain-browser": {
@@ -5747,6 +5754,11 @@
         "stream-shift": "^1.0.0"
       }
     },
+    "node_modules/easemob-websdk": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/easemob-websdk/-/easemob-websdk-3.5.2.tgz",
+      "integrity": "sha512-8JxHDQfNrKyVK1Wckd3pfrU4P9niColMFXqbvN8wNuPGWgJBj8bm8roWvdIy4uniHR5Ade6HhWHiDOaTXJEwsw=="
+    },
     "node_modules/easy-stack": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/easy-stack/download/easy-stack-1.0.1.tgz",
@@ -13560,9 +13572,9 @@
       }
     },
     "node_modules/ssr-window": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-3.0.0.tgz",
-      "integrity": "sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA=="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
     },
     "node_modules/ssri": {
       "version": "8.0.1",
@@ -13961,26 +13973,20 @@
       }
     },
     "node_modules/swiper": {
-      "version": "6.6.2",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-6.6.2.tgz",
-      "integrity": "sha512-l9ICRsPtK92fF1nzR/r56bNE9A8ufz99yr810+IgQTfnKWVDIE/DD/uQKtIRpbFAIeuesU/J4F1ziIC/jBug7g==",
-      "funding": [
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/vladimirkharlampidi"
-        },
-        {
-          "type": "open_collective",
-          "url": "http://opencollective.com/swiper"
-        }
-      ],
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
+      "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
       "hasInstallScript": true,
       "dependencies": {
-        "dom7": "^3.0.0",
-        "ssr-window": "^3.0.0"
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
       },
       "engines": {
         "node": ">= 4.7.0"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/vladimirkharlampidi"
       }
     },
     "node_modules/tapable": {
@@ -18681,6 +18687,11 @@
       "integrity": "sha1-vxEWycdYxRt6kz0pa3LCIe2UKLY=",
       "dev": true
     },
+    "agora-rtc-sdk-ng": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/agora-rtc-sdk-ng/-/agora-rtc-sdk-ng-4.5.0.tgz",
+      "integrity": "sha512-A93m5xkPkqnCx4J768FSj6mcgeaKkDCDUJVi+nnOSANlJ9GN75Bn6SleNwkbEB47PuecBnWqNBwrzuII2fDIkw=="
+    },
     "ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.nlark.com/ajv/download/ajv-6.12.6.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fajv%2Fdownload%2Fajv-6.12.6.tgz",
@@ -21177,11 +21188,11 @@
       }
     },
     "dom7": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/dom7/-/dom7-3.0.0.tgz",
-      "integrity": "sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==",
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
       "requires": {
-        "ssr-window": "^3.0.0-alpha.1"
+        "ssr-window": "^2.0.0"
       }
     },
     "domain-browser": {
@@ -21254,6 +21265,11 @@
         "stream-shift": "^1.0.0"
       }
     },
+    "easemob-websdk": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/easemob-websdk/-/easemob-websdk-3.5.2.tgz",
+      "integrity": "sha512-8JxHDQfNrKyVK1Wckd3pfrU4P9niColMFXqbvN8wNuPGWgJBj8bm8roWvdIy4uniHR5Ade6HhWHiDOaTXJEwsw=="
+    },
     "easy-stack": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/easy-stack/download/easy-stack-1.0.1.tgz",
@@ -27582,9 +27598,9 @@
       }
     },
     "ssr-window": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-3.0.0.tgz",
-      "integrity": "sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA=="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
     },
     "ssri": {
       "version": "8.0.1",
@@ -27911,12 +27927,12 @@
       }
     },
     "swiper": {
-      "version": "6.6.2",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-6.6.2.tgz",
-      "integrity": "sha512-l9ICRsPtK92fF1nzR/r56bNE9A8ufz99yr810+IgQTfnKWVDIE/DD/uQKtIRpbFAIeuesU/J4F1ziIC/jBug7g==",
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
+      "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
       "requires": {
-        "dom7": "^3.0.0",
-        "ssr-window": "^3.0.0"
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
       }
     },
     "tapable": {

package.json

@@ -8,11 +8,13 @@
   },
   "dependencies": {
     "@rongcloud/imlib-v4": "^4.4.1",
+    "agora-rtc-sdk-ng": "^4.5.0",
     "ant-design-vue": "^2.1.6",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "easemob-websdk": "^3.5.2",
     "recorder-js": "^1.0.7",
-    "swiper": "^6.6.2",
+    "swiper": "^5.4.5",
     "vue": "^3.0.0",
     "vue-class-component": "^8.0.0-0",
     "vue-router": "^4.0.0-0",

src/App.vue

@@ -5,6 +5,7 @@
 </template>
 <script>
 import {layoutEntry} from '$layout';
+import config from '$config/config';
 export default {
 
   components:{
@@ -12,8 +13,7 @@ export default {
   },
 
   created() {
-    this.$store.dispatch('initializationUserPromise');
-    this.$store.dispatch('initializationPayPromise');
+    return config.register(this);
   }
 
 }

src/components/button/src/main.vue

@@ -5,7 +5,7 @@
           'button-disabled-active': buttonStatus === constStatus.success
        }"
     :style="{width: width}"
-    @click="trigger"
+    @click.stop="trigger"
   >
     <!--  加载状态   -->
     <div class="v-button-loading screen center"

src/components/empty-item/index.ts

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

src/components/empty-item/props.ts

@@ -0,0 +1,25 @@
+export default {
+
+    size:{
+        type: Number,
+        default: 80
+    },
+
+    color:{
+        type:String,
+        default:'rgba(255,255,255,0.5)'
+    },
+
+    // 文字和 size的比例
+    ratio:{
+       type:Number,
+       default:0.2
+    },
+
+    // 为空的提示文本
+    emptyText:{
+        type:String,
+        default:'暂无数据'
+    }
+
+}

src/components/empty-item/src/main.vue

@@ -0,0 +1,31 @@
+<template>
+  <section class="screen center">
+    <svg
+         :style="{height:svgSize,width:svgSize}"
+         viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7927" width="200" height="200"><path d="M544 0C281.6 0 64 217.6 64 480S281.6 960 544 960 1024 742.4 1024 480 806.4 0 544 0z m0 896C313.6 896 128 710.4 128 480S313.6 64 544 64 960 249.6 960 480 774.4 896 544 896z m-128-512h-128c-19.2 0-32-12.8-32-32s12.8-32 32-32h128c19.2 0 32 12.8 32 32s-12.8 32-32 32z m416-32c0 19.2-12.8 32-32 32h-128c-19.2 0-32-12.8-32-32s12.8-32 32-32h128c19.2 0 32 12.8 32 32z m-128 384c0 19.2-12.8 32-32 32s-32-12.8-32-32c0-51.2-44.8-96-96-96S448 684.8 448 736c0 19.2-12.8 32-32 32s-32-12.8-32-32C384 646.4 454.4 576 544 576s160 70.4 160 160z" :fill="color" p-id="7928"></path></svg>
+    <div class="empty-title"
+      :style="{fontSize:fontSize,color:color}"
+    >{{emptyText}}</div>
+  </section>
+</template>
+
+<script>
+import props from '../props';
+import unit from '$utils/unit/unit';
+export default {
+  name: "empty-item",
+
+  computed:{
+    svgSize(){
+      return unit.unitRem(this.size);
+    },
+    fontSize(){
+      return unit.unitRem(this.size * this.ratio);
+    }
+  },
+
+  props,
+}
+</script>
+
+<style scoped lang="scss" src="../style.scss"></style>

src/components/empty-item/style.scss

@@ -0,0 +1,6 @@
+/* 空视图 */
+.empty-title{
+  text-align: center;
+  margin-top: 10px;
+}
+/* 空视图 */

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

@@ -8,6 +8,16 @@ export default <LibMixins>{
 
     methods:{
 
+        flat_clear_to_start(){
+          if (this.data.length > 0) {
+              // 控制为 无状态
+              this.status = this.constStatus.none;
+              this._status = this.constStatus.none;
+              this.setStart(true);
+              return this.setData([],true);
+          }
+        },
+
         flat_delete(id:number | string){
             id = this.flat_get_index(id);
             if (id >= 0) {

src/components/flat-list/src/main.vue

@@ -14,10 +14,7 @@
         </path>
       </svg>
 
-      <section v-else-if="status === constStatus.none" class="screen center">
-        <svg class="flat-empty-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7927" width="200" height="200"><path d="M544 0C281.6 0 64 217.6 64 480S281.6 960 544 960 1024 742.4 1024 480 806.4 0 544 0z m0 896C313.6 896 128 710.4 128 480S313.6 64 544 64 960 249.6 960 480 774.4 896 544 896z m-128-512h-128c-19.2 0-32-12.8-32-32s12.8-32 32-32h128c19.2 0 32 12.8 32 32s-12.8 32-32 32z m416-32c0 19.2-12.8 32-32 32h-128c-19.2 0-32-12.8-32-32s12.8-32 32-32h128c19.2 0 32 12.8 32 32z m-128 384c0 19.2-12.8 32-32 32s-32-12.8-32-32c0-51.2-44.8-96-96-96S448 684.8 448 736c0 19.2-12.8 32-32 32s-32-12.8-32-32C384 646.4 454.4 576 544 576s160 70.4 160 160z" fill="rgba(255,255,255,0.5)" p-id="7928"></path></svg>
-        <div class="flat-empty-title">{{emptyText}}</div>
-      </section>
+      <empty-item v-else-if="status === constStatus.none" :empty-text="emptyText"></empty-item>
 
     </aside>
     <scroll-view
@@ -59,6 +56,7 @@
 import {
   scrollView
 } from '$components';
+import emptyItem from '$components/empty-item';
 import props from '../props';
 import mixins from '../mixins';
 export default {
@@ -66,7 +64,8 @@ export default {
   props,
   mixins,
   components:{
-    scrollView
+    scrollView,
+    emptyItem
   }
 }
 </script>

src/components/index.ts

@@ -24,4 +24,6 @@ export { default as FlatList } from './flat-list';
 
 export { default as  stepper} from './stepper';
 
-export { default as  radio} from './radio';
+export { default as  radio} from './radio';
+
+export { default as emptyItem } from './empty-item';

src/components/popup/props.ts

@@ -8,7 +8,7 @@ export default {
     // 点击其他位置隐藏
     trigger:{
         type:Boolean,
-        default: true
+        default: false
     },
 
     // 是否启用居中

src/components/popup/src/main.vue

@@ -1,9 +1,9 @@
 <template>
   <section v-show="vValue" class="popup-screen center"
-           @click="trigger && changeValue"
+           @click.stop="trigger && changeValue(false)"
            :class="{'center':center}"
   >
-    <section @click.stop :class="['popup-content-'+contentAnimate]" class="relative popup-content flex overflow">
+    <section @click.stop :class="['popup-content-'+contentAnimate]" class="relative popup-content flex">
       <header v-if="headerTitle" class="absolute popup-header center">
         <div class="popup-header-background center"
           :style="{background:'url('+background[headerStyle]+') 0 0'}"

src/components/popup/style.scss

@@ -42,9 +42,11 @@
 @keyframes animateScale {
   0%{
     transform: scale(0);
+    opacity: 0;
   }
   100%{
     transform: scale(1);
+    opacity: 1;
   }
 }
 /* 内部动画 scale */

src/components/radio/src/main.vue

@@ -26,7 +26,7 @@ export default {
 
     value:{
       handler(){
-        return this.changeValue(this.value);
+        return this.changeValue(this.value,true);
       },
       immediate:true
     }
@@ -39,17 +39,16 @@ export default {
       return this.changeValue(!this.vValue);
     },
 
-    changeValue(value){
-
-
+    changeValue(value,must=false){
 
       if(this.vValue !== value) {
 
-        if (!this.disabled) {
+        if (!this.disabled || must) {
           this.vValue = value;
         }
 
         if (this.value !== value) {
+          this.$emit('change',value);
           return this.$emit('update:value',value);
         }
       }

src/components/scroll-view/index.scss

@@ -19,22 +19,18 @@
 /* 滚动容器 */
 
 /* 滚动条样式 */
-$scroll-type-main-radius: 10px;
+$scroll-type-main-radius: 4px;
 .scroll-type-main::-webkit-scrollbar {/*滚动条整体样式*/
-  width: 15px;     /*高宽分别对应横竖滚动条的尺寸*/
-  background-color: #fff;
+  width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+  background-color: transparent !important;
   border-radius: $scroll-type-main-radius;
 }
 
 .scroll-type-main::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
   border-radius: $scroll-type-main-radius;
-  background: #CECECE;
+  background: rgba(255,255,255,0.1);
 }
 
-.scroll-type-main::-webkit-scrollbar-track {/*滚动条里面轨道*/
-  border-radius: $scroll-type-main-radius;
-  background: #fff;
-}
 /* 滚动条样式 */
 
 /* 滚动条样式 */

src/components/scroll-view/mixins/style.ts

@@ -26,8 +26,8 @@ export default <LibMixins>{
                 overflowY: this.scrollY ? 'auto':'hidden',
                 overflowX: this.scrollX ? 'auto':'hidden',
                 width: this.securitySize ? 'auto': '',
-                paddingRight: unit.unitPx(this.securitySize)  + 'px',
                 marginRight: unit.unitPx(this.securitySize) * -1  + 'px',
+                paddingRight: unit.unitPx(this.securitySize)  + 'px',
             }
         }
     }

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

@@ -7,7 +7,7 @@
     <div class="scrollContainer"
       :style="scrollContainer"
       ref="scroll"
-
+      :class="['scroll-type-'+scrollType]"
     >
       <!--  视图收容器   -->
       <section class="scrollContainerTake" ref="scrollTake">

src/components/stepper/src/main.vue

@@ -10,7 +10,7 @@
     >
       <icon type="reduce" class="stepper-control-icon stepper-control-reduce-icon"></icon>
     </aside>
-    <aside class="flex-1 overflow stepper-content">{{vValue}}</aside>
+    <aside class="flex-1 overflow center stepper-content">{{vValue}}</aside>
     <aside class="center stepper-control"
       :class="{
         'cursor-pointer': vValue < max

src/components/stepper/style.scss

@@ -8,10 +8,10 @@
 .stepper-content{
   border-left: 1px solid #999;
   border-right: 1px solid #999;
-  height: 26px;
   text-align: center;
   font-size: 14px;
   color: #999;
+  height: 100%;
 }
 .stepper-control{
   width: 24px;
@@ -36,4 +36,37 @@
 .steeper-order .stepper-content{
   color: #fff;
 }
-/* 订单类型的 */
+/* 订单类型的 */
+
+/* 聊天类型 */
+.steeper-chat{
+  height: 30px;
+}
+.steeper-chat,.steeper-chat .stepper-content{
+  border-color: #fff;
+}
+.steeper-chat .stepper-content{
+  color: #fff;
+}
+/* 聊天类型 */
+
+/* 纯净类型 */
+.steeper-pure {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  padding: 0 3px;
+}
+.steeper-pure,.steeper-pure .stepper-content {
+  border: none;
+}
+.steeper-pure .stepper-content{
+  font-size: 12px;
+}
+.steeper-pure .stepper-content,.steeper-pure .stepper-control{
+  color: #333;
+}
+.steeper-pure .stepper-control{
+  width: 12px;
+}
+/* 纯净类型 */

src/components/swiper/props.ts

@@ -7,6 +7,11 @@ export default {
     value:{
         type: [Number,String],
         default: 0
+    },
+
+    pagination:{
+        type:Boolean,
+        default: false
     }
 
 }

src/components/swiper/src/main.vue

@@ -3,11 +3,12 @@
     <div class="swiper-wrapper">
         <slot></slot>
     </div>
+    <div ref="pagination" v-if="pagination" class="swiper-pagination" ></div>
   </div>
 </template>
 
 <script>
-import 'swiper/swiper.min.css';
+import 'swiper/css/swiper.min.css';
 import props from '../props';
 import Swiper from 'swiper';
 export default {
@@ -36,6 +37,13 @@ export default {
           }
         };
 
+        if (this.pagination) {
+          if (options.pagination === undefined) options.pagination = {};
+
+          options.pagination.el = this.$refs.pagination;
+        }
+
+
         return new Swiper(this.$refs.swiper,options);
       } else {
         return  undefined;

src/components/tab/src/main.vue

@@ -1,5 +1,7 @@
 <template>
-  <section class="tab-container flex">
+  <section class="tab-container flex"
+
+  >
 
     <!--   头部组件   -->
     <slot name="header" :data="vTabData" :trigger="triggerTo" :select="vTabSelect">

src/components/v-image/api/calculation.ts

@@ -17,12 +17,12 @@ export default {
 
     // 获取左侧间距
     getLeft(width:number,container: Size):number {
-        return (container.width - width) / 2;
+        return (container.width - width - (container.margin || 0)) / 2;
     },
 
     // 获取上侧间距
     getTop(height:number,container: Size):number {
-        return (container.height - height) / 2;
+        return (container.height - height - (container.margin || 0)) / 2;
     },
 
 }

src/components/v-image/mixins/size.ts

@@ -1,3 +1,4 @@
+import globalUnit from '$utils/unit/unit';
 export default <LibMixins> {
 
     data(){
@@ -28,7 +29,11 @@ export default <LibMixins> {
         },
         useContainerSize(): Size | undefined {
             if (this.containerSize && this.containerSize.width > 0 || this.containerSize && this.containerSize.height > 0) {
-                return this.containerSize;
+                return {
+                    width: this.containerSize.width + (this.borderWidth ? globalUnit.unitPx(this.borderWidth) * 2 : 0),
+                    height: this.containerSize.height+ (this.borderWidth ? globalUnit.unitPx(this.borderWidth) * 2 : 0),
+                    margin: this.borderWidth * 2
+                };
             } else {
                 return undefined;
             }
@@ -90,8 +95,10 @@ export default <LibMixins> {
             if(el){
 
                 let size:Size = {
-                    width: el.clientWidth,
-                    height: el.clientHeight
+                    // @ts-ignore
+                    width: el.offsetWidth,
+                    // @ts-ignore
+                    height: el.offsetHeight
                 };
 
                 // 如果都不可见触发

src/components/v-image/mixins/style.ts

@@ -2,6 +2,8 @@ import image from '../api/image';
 
 import unit from '../api/unit';
 
+import globalUnit from '$utils/unit/unit';
+
 import containerMode from '../const/container';
 
 export default <LibMixins> {
@@ -13,7 +15,8 @@ export default <LibMixins> {
             if (this.useImageSize && this.useContainerSize) {
                 return unit.unit(image[this.mode]({
                     image: this.useImageSize,
-                    container: this.useContainerSize
+                    container: this.useContainerSize,
+
                 }));
             }
         },
@@ -68,6 +71,10 @@ export default <LibMixins> {
                 style.backgroundColor = this.containerIconStyle.backgroundColor;
             }
 
+            if (this.borderWidth) {
+                style.border = globalUnit.unitRem(this.borderWidth)+' solid '+this.borderColor
+            }
+
             return style;
 
         },

src/components/v-image/props.ts

@@ -180,6 +180,18 @@ export default {
     display:{
         type: Boolean,
         default:undefined
+    },
+
+    /* 描边 */
+    borderWidth:{
+        type: Number,
+        default:0
+    },
+
+    /* 描边颜色 */
+    borderColor:{
+        type:String,
+        default:''
     }
 
 }

src/components/v-image/types/size.d.ts

@@ -2,6 +2,8 @@ interface Size {
 
     width:number,
 
-    height:number
+    height:number,
+
+    margin?:number,
 
 }

src/config/cate.ts

@@ -33,6 +33,30 @@ export default {
                 }
             ]
         }
+    },
+
+    roomCate:{
+        config:{
+            size:10,
+            header:[
+                {
+                    label:'收藏',
+                    image:require('../views/view-cate/images/cate/1.png'),
+                    tid:-999,
+                    options:{
+                        collect:2,
+                        sort_type:'desc'
+                    }
+                }
+            ],
+            footer:[
+                {
+                    label:'更多',
+                    image:require('../views/view-cate/images/cate/10.png'),
+                    cateMore:true
+                }
+            ]
+        }
     }
 
 }

src/config/config.ts

@@ -2,6 +2,16 @@ export default <Config>{
 
     baseApiURL:'/api',
 
-    baseURL:'http://newqiaoyu.lanmaonet.com/',
+    // baseURL:'http://newqiaoyu.lanmaonet.com/',
+    baseURL:'http://newqiaoyu.com/',
+
+    app:undefined,
+
+    register(vm){
+        vm.$store.dispatch('initializationUserPromise');
+        vm.$store.dispatch('initializationPayPromise');
+        vm.$store.dispatch('initializationGiftPromise');
+        this.app = vm;
+    }
 
 }

src/config/user.ts

@@ -20,6 +20,11 @@ export default {
         return this.user && this.user.login_token;
     },
 
+    // 获取用户id
+    uid(){
+      return this.user && this.user.uid;
+    },
+
     // 校验登录
     verificationLogin(){
 

src/layout/layout-dot/index.ts

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

src/layout/layout-dot/props.ts

@@ -0,0 +1,23 @@
+export default {
+
+    value:{
+        type:Number,
+        default:17
+    },
+
+    min:{
+        type:Number,
+        default:1
+    },
+
+    max:{
+        type:Number,
+        default:99
+    },
+
+    maxFormat:{
+        type:String,
+        default:'+'
+    }
+
+}

src/layout/layout-dot/src/main.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="layout-dot center">{{numberFormat}}</div>
+</template>
+
+<script>
+import props from '../props';
+export default {
+  name: "layout-dot",
+
+  computed:{
+
+    numberFormat(){
+      if (this.value >= this.max) {
+        return this.max+this.maxFormat
+      } else {
+        return this.value;
+      }
+    }
+
+  },
+  props
+}
+</script>
+
+<style scoped lang="scss" src="../style.scss"></style>

src/layout/layout-dot/style.scss

@@ -0,0 +1,14 @@
+$dot-size:16px;
+.layout-dot{
+  height: $dot-size;
+  min-width: $dot-size;
+  border: 1px solid #fff;
+  border-radius: $dot-size/2;
+  padding: 0 4px;
+  background-color: #FF7D7D;
+  font-size: 12px;
+  line-height: $dot-size;
+  top: -4px;
+  right: 0;
+  z-index: 99;
+}

src/layout/layout-entry/style.scss

@@ -5,7 +5,6 @@
 }
 .user-container-modules{
   padding-bottom: 62.15%;
-  background-color: #27234A;
 }
 .user-absolute-screen{
   top: 0;

src/layout/layout-order/src/main.vue

@@ -3,6 +3,7 @@
     <flat-list :ref="flatListRefName"
       @fetch="fetch"
       indexes="oid"
+      :security-size="20"
     >
 
       <template v-slot:item="{item}">

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

@@ -1,10 +1,8 @@
 import audio, {TriggerAudioListener,PlayStatus} from "$utils/tool/audio";
 
 import popup from "$utils/tool/popup";
-import {InstructionsCacheType} from "$utils/request";
-import {PopupExportComponent} from "$popup/popup-export/const";
 
-import user from '$config/user';
+import personalDetail from '$utils/control/personal-detail';
 
 export default <LibMixins>{
 
@@ -79,133 +77,138 @@ export default <LibMixins>{
 
         triggerDetail(){
 
-            if (!user.verificationLogin()) return;
-
-            this.clearTargetDetail();
-
-            this.detailTime = setTimeout(()=>{
-                popup.$loading('获取中');
-            },500);
-
-            Promise.all([this.getPlayInfo(),this.getPlayList(),this.getDetail()]).then(([info,playData,detail])=>{
-                this.clearTargetDetail();
-
-                playData = playData.data.palyer_game_list || [];
-
-                let unshiftData;
-
-                let resultData = [];
-
-                playData.map((item,index)=>{
-
-                    let resultItem = {
-                        label: item.game_name,
-                        slot: 'tab-'+index,
-                        pid: item.pid,
-                        price: item.price
-                    }
-
-                    if (item.pid === this.item.pid) {
-                        unshiftData = resultItem;
-                    } else {
-                        resultData.push(resultItem);
-                    }
-
-                });
-
-                unshiftData && resultData.unshift(unshiftData);
-
-                info = info.data || {};
-
-                info.gameList = resultData;
-
-                if (detail) {
-                    info.gameInfo = {
-                        [this.item.pid]:detail
-                    }
-                }
-
-
-                // info
-                if (!info.images) {
-                    info.images = [this.item.cover_image];
-                } else {
-                    info.images = info.images.split(',');
-                }
-
-                popup.$popup.open(PopupExportComponent.detail,{
-                    option: info
-                });
-
-            }).catch(()=> this.clearTargetDetail('服务繁忙'));
-
-        },
-
-        clearTargetDetail(fail?:string){
-          clearTimeout(this.detailTime);
-          popup.hideLoading();
-
-          if (fail) {
-              popup.$toast(fail);
-          }
-
-        },
-
-        // 获取陪玩基本信息
-        getPlayInfo() {
-            return this.$request({
-                url:'hxuser/get_base_user_info',
-                data:{
-                    uid: this.item.uid
-                },
-                cache:{
-                    type: InstructionsCacheType.memory
-                },
-                token:true
+            console.log(this.item);
+            return personalDetail.openDetail({
+                uid: this.item.uid,
+                pid: this.item.pid
             });
-        },
+            // if (!user.verificationLogin()) return;
+            //
+            // this.clearTargetDetail();
+            //
+            // popup.$loading({
+            //     title:'获取中',
+            //     delay:1000
+            // });
+            //
+            // Promise.all([this.getPlayInfo(),this.getPlayList(),this.getDetail()]).then(([info,playData,detail])=>{
+            //     this.clearTargetDetail();
+            //
+            //     playData = playData.data.palyer_game_list || [];
+            //
+            //     let unshiftData;
+            //
+            //     let resultData = [];
+            //
+            //     playData.map((item,index)=>{
+            //
+            //         let resultItem = {
+            //             label: item.game_name,
+            //             slot: 'tab-'+index,
+            //             pid: item.pid,
+            //             price: item.price
+            //         }
+            //
+            //         if (item.pid === this.item.pid) {
+            //             unshiftData = resultItem;
+            //         } else {
+            //             resultData.push(resultItem);
+            //         }
+            //
+            //     });
+            //
+            //     unshiftData && resultData.unshift(unshiftData);
+            //
+            //     info = info.data || {};
+            //
+            //     info.gameList = resultData;
+            //
+            //     if (detail) {
+            //         info.gameInfo = {
+            //             [this.item.pid]:detail
+            //         }
+            //     }
+            //
+            //
+            //     // info
+            //     if (!info.images) {
+            //         info.images = [this.item.cover_image];
+            //     } else {
+            //         info.images = info.images.split(',');
+            //     }
+            //
+            //     popup.$popup.open(PopupExportComponent.detail,{
+            //         option: info
+            //     });
+            //
+            // }).catch(()=> this.clearTargetDetail('服务繁忙'));
 
-        // 获取陪玩下的游戏列表
-        getPlayList(){
-            return this.$request({
-                url:'player/get_player_game_lists',
-                data:{
-                    pid: this.item.pid
-                },
-                cache:{
-                    type: InstructionsCacheType.memory
-                },
-                token:true
-            })
         },
 
-        // 获取陪玩当前游戏的详情
-        getDetail(){
-
-            return new Promise((resolve)=>{
-                this.$request({
-                    url:'player/get_player_info',
-                    data:{
-                        pid: this.item.pid
-                    },
-                    cache:{
-                        type: InstructionsCacheType.memory
-                    },
-                    token:true
-                }).then((data)=>{
-                    data = data.data || {};
-
-                    data.game_info.skill_level_list.map((item)=>{
-                        if (item.lid === data.lid) {
-                            data.game_level_name = item.game_level_name;
-                        }
-                    });
-
-                    resolve(data);
-
-                }).catch(()=> resolve(undefined));
-            });
-        }
+        // clearTargetDetail(fail?:string){
+        //   popup.hideLoading();
+        //   if (fail) {
+        //       popup.$toast(fail);
+        //   }
+        //
+        // },
+        //
+        // // 获取陪玩基本信息
+        // getPlayInfo() {
+        //     return this.$request({
+        //         url:'hxuser/get_base_user_info',
+        //         data:{
+        //             uid: this.item.uid
+        //         },
+        //         cache:{
+        //             type: InstructionsCacheType.memory,
+        //             id: 'get_base_user_info-'+this.item.uid
+        //         },
+        //         token:true
+        //     });
+        // },
+        //
+        // // 获取陪玩下的游戏列表
+        // getPlayList(){
+        //     return this.$request({
+        //         url:'player/get_player_game_lists',
+        //         data:{
+        //             pid: this.item.pid
+        //         },
+        //         cache:{
+        //             type: InstructionsCacheType.memory
+        //         },
+        //         token:true
+        //     })
+        // },
+        //
+        // // 获取陪玩当前游戏的详情
+        // getDetail(){
+        //
+        //     return new Promise((resolve)=>{
+        //         this.$request({
+        //             url:'player/get_player_info',
+        //             data:{
+        //                 pid: this.item.pid
+        //             },
+        //             cache:{
+        //                 type: InstructionsCacheType.memory
+        //             },
+        //             token:true
+        //         }).then((data)=>{
+        //             data = data.data || {};
+        //
+        //             data.game_info.skill_level_list.map((item)=>{
+        //                 if (item.lid === data.lid) {
+        //                     data.game_level_name = item.game_level_name;
+        //                 }
+        //             });
+        //
+        //             resolve(data);
+        //
+        //         }).catch(()=> resolve(undefined));
+        //     });
+        // }
 
     },
 

src/layout/layout-sex/const/sex.ts

@@ -0,0 +1,9 @@
+enum Sex {
+
+    boy=1,
+
+    girl=2
+
+}
+
+export default Sex;

src/layout/layout-sex/data/config.ts

@@ -0,0 +1,14 @@
+import Sex from '../const/sex';
+export default {
+
+    [Sex.boy]:{
+        color:'#5C88E0',
+        icon:'boy'
+    },
+
+    [Sex.girl]:{
+        color:'#FE75CC',
+        icon:'girl'
+    }
+
+}

src/layout/layout-sex/index.ts

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

src/layout/layout-sex/props.ts

@@ -0,0 +1,16 @@
+import Sex from './const/sex';
+export default {
+
+    // 男女类型
+    type:{
+        type:[Number,String],
+        default:Sex.boy
+    },
+
+    // 年龄
+    age:{
+        type:Number,
+        default:18
+    }
+
+}

src/layout/layout-sex/src/main.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="row">
+    <div v-if="config" :style="{backgroundColor:config.color}" class="layout-sex rowACenter">
+      <icon :type="config.icon" class="layout-sex-icon"></icon>
+      <span>{{age}}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  icon
+} from '$components';
+import config from '../data/config';
+import props from '../props';
+export default {
+  name: "layout-sex",
+
+  computed:{
+    config(){
+      return config[this.type];
+    }
+  },
+
+  props,
+
+  components:{
+    icon
+  }
+}
+</script>
+
+<style scoped lang="scss" src="../style.scss"></style>

src/layout/layout-sex/style.scss

@@ -0,0 +1,16 @@
+.layout-sex{
+  height: 16px;
+  width: auto;
+  padding: 0 5px;
+  border-radius: 8px;
+}
+
+.layout-sex,.layout-sex-icon{
+  font-size: 12px;
+  margin-right: 2px;
+}
+
+
+.layout-sex{
+  line-height: 14px;
+}

src/layout/layout-status/const/status.ts

@@ -0,0 +1,11 @@
+enum PlayStatus {
+
+    // 在线
+    onLine,
+
+    // 离线
+    offLine,
+
+}
+
+export default PlayStatus;

src/layout/layout-status/index.ts

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

src/layout/layout-status/props.ts

@@ -0,0 +1,22 @@
+import PlayStatus from './const/status';
+
+export default {
+
+    /*
+    * 显示的状态
+    * */
+    status:{
+        type: Number,
+        default:PlayStatus.offLine
+    },
+
+    /*
+    * 样式类型
+    *  default 默认
+    * */
+    style:{
+        type:String,
+        default:'default'
+    }
+
+}

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

@@ -0,0 +1,36 @@
+<template>
+  <section class="layout-status"
+    :class="['layout-status-'+style]"
+  >
+    <div v-if="status === PlayStatus.onLine"
+      class="status-onLine rowACenter"
+    >
+      <div class="status-onLine-icon"></div>
+      <div>在线</div>
+    </div>
+    <div v-else-if="status === PlayStatus.offLine"
+         class="status-offLine rowACenter"
+    >离线</div>
+  </section>
+
+</template>
+
+<script>
+import props from '../props';
+
+import PlayStatus from "../const/status";
+
+export default {
+  name: "layout-status",
+
+  data(){
+    return {
+      PlayStatus
+    }
+  },
+
+  props
+}
+</script>
+
+<style scoped lang="scss" src="../style.scss"></style>

src/layout/layout-status/style.scss

@@ -0,0 +1,21 @@
+/* 外层 */
+.layout-status{
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+}
+/* 外层 */
+/* 在线状态 */
+.status-onLine-icon{
+  background-color: #2EC254;
+  border-radius: 50%;
+  @include square(8px);
+  margin-right: 8px;
+}
+/* 在线状态 */
+
+/* 离线状态 */
+.status-offLine{
+  color: rgba(255,255,255,0.3);
+}
+/* 离线状态 */

src/layout/layout-talking/index.ts

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

src/layout/layout-talking/props.ts

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

src/layout/layout-talking/src/main.vue

@@ -0,0 +1,30 @@
+<template>
+  <aside class="layout-talking-item center cursor-pointer">
+    <div class="layout-talking-width row">
+      <div class="layout-talking-button center line-1">{{item.category_name}}</div>
+    </div>
+    <v-image class="layout-talking-avatar" backgroundColor="transparent" :src="item.room_cover" radius="50%"></v-image>
+    <div class="layout-talking-title line-1">{{item.room_name}}</div>
+    <div class="rowACenter layout-talking-message">
+      <img src="../images/icon.gif" class="layout-talking-icon" />
+      <div class="layout-talking-number">{{item.visitor_num}}</div>
+      <div>人正在语聊中</div>
+    </div>
+  </aside>
+</template>
+
+<script>
+import {
+  vImage
+} from '$components';
+import props from '../props';
+export default {
+  name: "layout-talking",
+  components: {
+    vImage
+  },
+  props
+}
+</script>
+
+<style scoped lang="scss" src="../style.scss"></style>

src/layout/layout-talking/style.scss

@@ -0,0 +1,59 @@
+/* 容器 */
+.layout-talking-item{
+  width: 206px;
+  height: 265px;
+  background-color: rgba(255,255,255,0.1);
+  border-radius: 10px;
+  padding: 0 20px;
+  margin-right: 15px;
+  margin-bottom: 20px;
+  transition: .3s;
+}
+.layout-talking-item:hover{
+  transform: translateY(10px);
+}
+.layout-talking-item:nth-of-type(5n){
+  margin-right: 0;
+}
+/* 容器 */
+
+/* 内容 */
+.layout-talking-width{
+  width: 100%;
+}
+.layout-talking-button{
+  border-radius: 15px 15px 15px 0;
+  height: 30px;
+  background: $main-linear;
+  min-width: 70px;
+  width: auto !important;
+  max-width: 100%;
+  font-size: 14px;
+  line-height: 18px;
+  margin-bottom: 14px;
+}
+.layout-talking-avatar{
+  @include square(120px);
+}
+.layout-talking-title{
+  font-size: 16px;
+  line-height: 20px;
+  margin-top: 25px;
+}
+.layout-talking-message{
+  width: 100%;
+  font-size: 12px;
+  line-height: 16px;
+  color: rgba(255,255,255,0.4);
+  margin-top: 10px;
+}
+.layout-talking-icon{
+  width: 12px;
+  height: 10px;
+}
+.layout-talking-number{
+  color: #3AFFE5;
+  font-size: 14px;
+  margin: 0 3px;
+}
+/* 内容 */

src/mixins/cate.ts

@@ -6,6 +6,8 @@ export default {
         gameStatusCate: state => state.cate.gameStatusCate,
         gameCate: state => state.cate.gameCate,
         recommendGameCate: state => state.cate.recommendGameCate,
+        roomCate:state=>state.cate.roomCate,
+        recommendRoomCate:state => state.cate.recommendRoomCate
     })
 
 }

src/mixins/params.ts

@@ -0,0 +1,22 @@
+import params from "$utils/tool/params";
+
+export default {
+
+    created(){
+
+        if (this.$route) {
+
+            let resultParams = Object.assign({},this.$route.query,this.$route.params);
+
+            if (resultParams.u) {
+                resultParams = Object.assign(resultParams,params.decodeParams(resultParams.u));
+                delete resultParams.u;
+            }
+
+            this.$params =resultParams;
+
+        }
+
+    }
+
+}

src/pages/home/data/tabData.ts

@@ -1,12 +1,12 @@
 export default [
     {
+        label:'语聊厅',
+        component:'view-talking',
+        slot:'tab-1'
+    },
+    {
         label:'找陪玩',
         component:'view-play-with',
         slot:'tab-0'
-    },
-    {
-        label:'语聊厅',
-        // component:'view-play-with',
-        slot:'tab-1'
     }
 ] as LibDataArray

src/pages/home/src/main.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="screen flex">
+  <section class="screen flex home-container" >
     <view-header></view-header>
     <section class="flex-1 row container">
       <article class="flex-1 content-container">
@@ -31,7 +31,8 @@ import {
   viewHeader,
   viewFooter,
   viewMenu,
-  viewPlayWith
+  viewPlayWith,
+  viewTalking
 } from '$views';
 
 import tabData from "../data/tabData";
@@ -48,7 +49,8 @@ export default {
     viewFooter,
     tab,
     viewMenu,
-    viewPlayWith
+    viewPlayWith,
+    viewTalking
   }
 }
 </script>

src/pages/home/style.scss

@@ -1,4 +1,7 @@
 /* 最外层容器 */
+.home-container {
+  background-color: #27234A;
+}
 .container{
   padding-right: 15px;
   padding-top: 20px;

src/pages/talking/components/room-footer/index.ts

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

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

@@ -0,0 +1,13 @@
+<template>
+  <footer class="room-footer">
+
+  </footer>
+</template>
+
+<script>
+export default {
+  name: "room-footer"
+}
+</script>
+
+<style scoped lang="scss" src="../style.scss"></style>

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

@@ -0,0 +1,5 @@
+.room-footer{
+  height: 40px;
+  background-color: rgba(0,0,0,0.2);
+  margin: 10px -10px 0;
+}

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

@@ -0,0 +1,14 @@
+export default [
+    {
+        label:'一心一意',
+        value:1
+    },
+    {
+        label: '五福临门',
+        value:5
+    },
+    {
+        label: '十全十美',
+        value:10
+    }
+]

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

@@ -0,0 +1,8 @@
+export default [
+    {
+        label:'全部麦序',
+        icon:require('../images/gift.png'),
+        custom:true,
+        uid:'all'
+    }
+]

src/pages/talking/components/room-gift/components/room-gift-item/global.scss

@@ -0,0 +1,13 @@
+.talking-gift-dropdown{
+  background-color: #1B1839;
+  width: 184px !important;
+  border-radius: 10px !important;
+}
+
+.talking-gift-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled),.ant-select-item-option-selected:not(.ant-select-item-option-disabled){
+  background-color: transparent !important;
+}
+
+.talking-gift-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) .talking-gift-number-item{
+  color: #539CFF !important;
+}

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

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

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

@@ -0,0 +1,41 @@
+import popup from "$utils/tool/popup";
+import {PopupExportComponent} from "$popup/popup-export/const";
+import unit from "$utils/unit/unit";
+
+export default <LibMixins>{
+
+    data(){
+        return {
+            giftSelect:0,
+            useOffsetWidth: unit.unitPx(30)
+        }
+    },
+
+    methods:{
+
+        changeGiftSelect(index:number){
+
+            if (this.giftSelect !== index) {
+                this.giftSelect = index;
+            }
+
+        },
+
+        openIntroduce(item,event){
+            return popup.$popup.open(PopupExportComponent.giftIntroduce,{
+                value:true,
+                x: event.clientX - event.offsetX + this.useOffsetWidth,
+                y: event.clientY - event.offsetY,
+                item
+            });
+        },
+
+        closeIntroduce(event){
+            return popup.$popup.open(PopupExportComponent.giftIntroduce,{
+                value:false
+            });
+        },
+
+    }
+
+}

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

@@ -0,0 +1,16 @@
+
+export default <LibMixins>{
+
+    methods:{
+
+        bannerPrev(){
+            return this.$refs.banner && this.$refs.banner.swiper && this.$refs.banner.swiper.slidePrev();
+        },
+        bannerNext(){
+            return this.$refs.banner && this.$refs.banner.swiper && this.$refs.banner.swiper.slideNext();
+        },
+
+    }
+
+
+}

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

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

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

@@ -0,0 +1,12 @@
+export default <LibMixins>{
+
+    data(){
+        return {
+            // 选择的数量
+            number:1,
+            // 赠送的用户
+            giveUser:undefined
+        }
+    }
+
+}

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

@@ -0,0 +1,157 @@
+<template>
+  <section class="screen talking-gift-container">
+
+    <section class="rowACenter talking-gift-list"
+             @mouseleave="closeIntroduce"
+    >
+      <div @click="bannerPrev" class="talking-gift-trigger center cursor-pointer">
+        <svg t="1623035534357" class="talking-gift-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>
+      <aside class="flex-1 overflow talking-gift-banner-margin">
+        <swiper
+            :swiperOption="swiperOption"
+            class="screen"
+            ref="banner"
+        >
+          <swiper-item
+              v-for="(item,index) in giftData"
+              class="talking-gift-banner center cursor-pointer relative"
+              :class="{
+                'talking-gift-banner-active': index === giftSelect
+              }"
+              :key="'image-item-'+index"
+              @click="changeGiftSelect(index)"
+          >
+            <div class="absolute talking-gift-banner-container"
+              @mouseover="openIntroduce(item,$event)"
+            ></div>
+            <div class="talking-gift-image-warp center">
+              <v-image
+                  class="talking-gift-image"
+                  :src="item.base_image"
+                  backgroundColor="transparent"
+              ></v-image>
+            </div>
+
+            <div class="talking-gift-title overflow">{{item.gift_name}}</div>
+          </swiper-item>
+        </swiper>
+      </aside>
+      <div @click="bannerNext" class="talking-gift-trigger center cursor-pointer">
+        <svg t="1623035654891" class="talking-gift-trigger-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1920" width="200" height="200"><path d="M671.5392 512L332.1344 172.544a32 32 0 0 1 45.2608-45.2096l358.4 358.4a37.12 37.12 0 0 1 0 52.5312l-358.4 358.4a32 32 0 0 1-45.2608-45.2608L671.5904 512z" fill="#ffffff" p-id="1921"></path></svg>
+      </div>
+    </section>
+
+    <footer class="talking-gift-footer rowACenter">
+      <div class="talking-gift-footer-icon overflow center">
+        <v-image v-if="giftData[giftSelect]" backgroundColor="transparent" :src="giftData[giftSelect].base_image" class="talking-gift-give-icon"></v-image>
+      </div>
+      <div class="talking-gift-footer-margin">数量</div>
+      <div class="relative">
+        <a-select v-model:value="number" class="talking-gift-number talking-gift-select" dropdownClassName="talking-gift-dropdown">
+          <a-select-option
+              v-for="(item,index) in numberData"
+              :key="'options-'+item.pid"
+              :value="item.value"
+          >
+            <div class="rowACenter talking-gift-number-item">
+              <div class="talking-select-value">{{item.value}}</div>
+              <div class="talking-select-label">{{item.label}}</div>
+            </div>
+          </a-select-option>
+        </a-select>
+        <div class="absolute talking-gift-select-modal jCenter aEnd">
+          <icon type="down" class="talking-gift-select-icon"></icon>
+        </div>
+      </div>
+      <div class="talking-gift-footer-margin">给</div>
+      <div class="relative">
+        <a-select class="talking-gift-user talking-gift-select"
+                  dropdownClassName="talking-gift-dropdown"
+                  placeholder="送给TA"
+                  v-model:value="giveUser"
+        >
+          <a-select-option
+              v-for="(item,index) in useUserData"
+              :key="'options-'+item.uid"
+              :value="item.uid"
+          >
+            <div class="rowACenter talking-gift-user-item">
+              <div v-if="item.custom" class="talking-gift-custom-avatar center">
+                <v-image mode="center" backgroundColor="transparent" :src="item.icon" class="gift-user-custom-icon" radius="50%"></v-image>
+              </div>
+              <v-image v-else :src="item.icon" class="talking-gift-user-icon" radius="50%"></v-image>
+              <div class="flex-1 talking-gift-select-margin">
+                <div class="talking-select-label line-1">{{item.label}}</div>
+              </div>
+            </div>
+          </a-select-option>
+        </a-select>
+        <div class="absolute talking-gift-select-modal jCenter aEnd">
+          <icon type="down" class="talking-gift-select-icon"></icon>
+        </div>
+      </div>
+      <!--  赠送   -->
+      <div class="room-gift-give button">赠送</div>
+
+    </footer>
+
+  </section>
+</template>
+
+<script>
+import {
+  swiper,
+  swiperItem,
+  vImage,
+  icon
+} from '$components';
+import unit from "$utils/unit/unit";
+import mixins from '../mixins/index';
+import {Select} from "ant-design-vue";
+import numberData from '../data/number';
+import userAppendData from '../data/user';
+export default {
+  name: "room-gift-item",
+
+  data(){
+    return {
+      swiperOption:{
+        slidesPerView:'auto',
+        spaceBetween:unit.unitPx(20),
+        threshold:unit.unitPx(10)
+      },
+
+      numberData,
+      userData:[]
+    }
+  },
+
+  computed:{
+    useUserData(){
+      return [...this.userData,{
+        label: this.$store.state.user.user.nick_name,
+        icon: this.$store.state.user.user.head_pic
+      },...userAppendData];
+    },
+    giftData(){
+      return this.$store.state.gift.giftData;
+    }
+  },
+
+  mixins,
+
+  components:{
+    swiper,
+    swiperItem,
+    vImage,
+    [Select.name]:Select,
+    [Select.Option.displayName]:Select.Option,
+    icon
+  }
+}
+</script>
+
+<style scoped lang="scss" src="../style.scss"></style>
+
+<style lang="scss" src="../global.scss"></style>

src/pages/talking/components/room-gift/components/room-gift-item/style.scss

@@ -0,0 +1,166 @@
+/* 容器 */
+.talking-gift-container{
+  padding: 0 20px 10px;
+}
+/* 容器 */
+
+/* 礼物模块 */
+.talking-gift-list{
+  height: 100px;
+  margin-top: 0;
+  padding-top: 10px;
+}
+.talking-gift-trigger{
+  width: 20px;
+  height: 50px;
+  border-radius: 10px;
+  background-color: rgba(255,255,255,0.05);
+}
+.talking-gift-banner-margin{
+  margin: 0 25px;
+}
+.talking-gift-trigger-icon{
+  @include square(20px);
+}
+.talking-gift-banner{
+  width: 63px;
+  height: 90px;
+  font-size: 16px;
+  line-height: 20px;
+}
+.talking-gift-image-warp{
+  @include square(60px);
+  border-radius: 5px;
+  background-color: rgba(255,255,255,0.05);
+}
+.talking-gift-image{
+  @include square(50px);
+}
+.talking-gift-title{
+  white-space: nowrap;
+  margin-top: 5px;
+  width: 63px;
+  text-align: center;
+}
+.talking-gift-banner:last-of-type{
+  margin-right: 0 !important;
+}
+/* 礼物模块 */
+
+/* 底部模块 */
+.talking-gift-footer{
+  justify-content: flex-end;
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  margin-top: 8px;
+}
+.talking-gift-footer-icon{
+  @include square(32px);
+  background-color: rgba(255,255,255,0.05);
+  border-radius: 5px;
+}
+.talking-gift-footer-margin{
+  margin: 0 10px;
+}
+.talking-gift-number{
+  width: 160px;
+}
+.talking-gift-banner-container{
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99;
+}
+.talking-gift-select::v-deep .ant-select-selector {
+  background-color: rgba(255,255,255,0.05) !important;
+  height: 32px;
+  border-radius: 16px;
+  border: none !important;
+  outline: none !important;
+  box-shadow: none !important;
+  padding: 0 20px;
+}
+
+.talking-gift-select::v-deep .ant-select-arrow{
+  display: none;
+}
+
+.talking-gift-select::v-deep .ant-select-selection-placeholder{
+  color: #fff;
+}
+.talking-gift-select::v-deep .ant-select-selection-item{
+  padding-right: 22px;
+}
+
+.talking-gift-banner-active .talking-gift-title{
+  background: $main-linear;
+  -webkit-background-clip:text;
+  -webkit-text-fill-color:transparent;
+  color: #629CFF;
+}
+
+.talking-gift-banner-active .talking-gift-image-warp{
+  background: $main-linear;
+}
+
+.talking-gift-number-item,.talking-gift-user-item{
+  font-size: 14px;
+  line-height: 18px;
+  color: #fff !important;
+  font-weight: 400;
+  height: 100%;
+}
+.talking-gift-select-margin{
+  margin-left: 8px;
+}
+.talking-gift-select::v-deep .talking-gift-select-margin{
+  margin-left: 0;
+}
+.talking-gift-user-icon,.talking-gift-custom-avatar{
+  @include square(26px);
+}
+.talking-gift-custom-avatar{
+  background-color: rgba(255,255,255,0.1);
+  border-radius: 50%;
+}
+
+.talking-gift-select::v-deep .talking-gift-custom-avatar,.talking-gift-select::v-deep .talking-gift-user-icon{
+  display: none;
+}
+.talking-gift-select-icon{
+  font-size: 14px;
+  font-weight: bold;
+  transform: rotate(180deg);
+}
+.gift-user-custom-icon{
+  @include square(18px);
+}
+.talking-gift-select-modal{
+  width: 20px;
+  top: 0;
+  bottom: 0;
+  right: 20px;
+  pointer-events: none;
+}
+.talking-select-value {
+  width: 30px;
+}
+.talking-gift-user{
+  width: 130px;
+}
+.talking-gift-give-icon{
+  @include square(25px);
+}
+.room-gift-give{
+  margin-left: 10px;
+  width: 70px;
+  height: 32px;
+  background: #FF6969;
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  border-radius: 16px;
+}
+/* 底部模块 */

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

@@ -0,0 +1,11 @@
+export default [
+    {
+        label:'热门',
+        slot:'0'
+    },
+    {
+        label:'我的背包',
+        align:'right',
+        slot:'1'
+    }
+] as LibDataArray

src/pages/talking/components/room-gift/index.ts

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

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

@@ -0,0 +1,60 @@
+<template>
+  <section class="room-gift-container">
+    <tab
+      :data="tabData"
+    >
+      <template v-slot:header="{data,select,trigger}">
+        <header class="room-gift-tab-header rowACenter" >
+          <template
+              v-for="(item,index) in data"
+              :key="'gift-tab-'+index"
+          >
+            <div class="flex-1" v-if="item.align === 'right'"></div>
+            <aside
+                @click="trigger(index)"
+                :class="{
+                  'cursor-pointer': index !== select,
+                  'room-gift-active': index === select
+                }"
+            >{{item.label}}</aside>
+          </template>
+        </header>
+      </template>
+
+      <template
+        v-for="(item,index) in tabData"
+        v-slot:[item.slot]
+      >
+        <room-gift-item
+          :key="'room-gift-item-'+index"
+        ></room-gift-item>
+      </template>
+
+    </tab>
+  </section>
+</template>
+
+<script>
+import tabData from '../data/tab';
+import {
+  tab
+} from '$components';
+import roomGiftItem from '../components/room-gift-item';
+export default {
+  name: "room-gift",
+
+  data(){
+    return {
+      tabData
+    }
+  },
+
+  components:{
+    tab,
+    roomGiftItem
+  }
+
+}
+</script>
+
+<style scoped lang="scss" src="../style.scss"></style>

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

@@ -0,0 +1,28 @@
+/* 容器 */
+.room-gift-container{
+  height: 181px;
+  background-color: rgba(0,0,0,0.2);
+  border-radius: 5px;
+}
+/* 容器 */
+
+/* 容器头部 */
+.room-gift-tab-header{
+  font-size: 16px;
+  line-height: 20px;
+  padding: 10px 20px 0;
+  font-weight: 400;
+}
+.room-gift-tab-header aside{
+  margin-left: 10px;
+}
+.room-gift-tab-header aside:first-child{
+  margin-left: 0;
+}
+.room-gift-active{
+  background: $main-linear;
+  -webkit-background-clip:text;
+  -webkit-text-fill-color:transparent;
+  color: #629CFF;
+}
+/* 容器头部 */

src/pages/talking/components/room-info/components/room-audience/index.ts

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

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

@@ -0,0 +1,15 @@
+export default <LibMixins>{
+
+    methods:{
+
+        fetch(obj){
+
+            setTimeout(()=>{
+                obj.success([{},{},{},{},{},{},{},{}]);
+            });
+
+        }
+
+    }
+
+}

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

@@ -0,0 +1,48 @@
+<template>
+  <section class="room-audience screen">
+    <flat-list
+      @fetch="fetch"
+      :security-size="10"
+    >
+      <template v-slot:item="{item,index}">
+        <aside class="room-audience-item rowACenter">
+          <v-image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F20%2F20200520024521_zkkfs.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626509828&t=81e25fe8173beb185db59bae74085b10" radius="50%"
+                   class="room-audience-avatar"
+                   :border-width="2"
+                   borderColor="#fff"
+          ></v-image>
+          <section class="flex-1 room-audience-content">
+            <div class="line-1">昵称昵称</div>
+            <section class="row">
+              <div class="room-audience-sex rowCenter">
+                <icon type="girl" class="room-audience-sex-icon"></icon>
+                <span>18</span>
+              </div>
+            </section>
+          </section>
+        </aside>
+      </template>
+    </flat-list>
+
+  </section>
+</template>
+
+<script>
+import {
+  vImage,
+  icon,
+  FlatList
+} from "$components";
+import mixins from '../mixins';
+export default {
+  name: "room-audience",
+  components: {
+    vImage,
+    icon,
+    FlatList
+  },
+  mixins
+}
+</script>
+
+<style scoped lang="scss" src="../style.scss"></style>

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

@@ -0,0 +1,56 @@
+.room-audience{
+  padding: 5px 10px 0;
+}
+
+.room-audience-item:first-child{
+  margin-top: 0;
+}
+
+.room-audience-item{
+  height: 54px;
+  margin-top: 20px;
+}
+
+.room-audience-avatar-wrap{
+  @include square(54px);
+  border: 2px solid #fff;
+  border-radius: 50%;
+}
+.room-audience-avatar{
+  @include square(54px);
+}
+
+
+.room-audience-content{
+  margin-left: 10px;
+  font-size: 16px;
+  line-height: 20px;
+}
+
+.room-audience-sex{
+  margin-top: 8px;
+  height: 16px;
+  min-width: 36px;
+  width: auto;
+  border-radius: 8px;
+  background-color: #FE75CC;
+  font-size: 12px;
+  line-height: 16px;
+  padding: 0 5px;
+}
+
+.room-audience-sex-icon{
+  font-weight: bold;
+  font-size: 12px;
+  transform: scale(0.8);
+  margin-left: -2px;
+  margin-right: 2px;
+}
+
+.room-audience-sex span{
+  white-space: nowrap;
+}
+
+.room-audience-boy {
+  background-color: #5497F2;
+}

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

@@ -0,0 +1,11 @@
+export default [
+    {
+        label:'现场观众',
+        slot:'0',
+        key:'visitor_num'
+    },
+    {
+        label: '排麦',
+        slot:'1'
+    }
+]

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

@@ -0,0 +1,29 @@
+import { RowWheat } from '../../../const';
+export default {
+    user:{
+        [RowWheat.none]:{
+            label:'申请上麦'
+        },
+
+        [RowWheat.queuing]:{
+            label:'取消排麦'
+        },
+
+        [RowWheat.wheat]:{
+            label:'下麦'
+        }
+    },
+    admin:{
+        [RowWheat.none]:{
+            label:'上麦'
+        },
+
+        [RowWheat.queuing]:{
+            label:'排麦中'
+        },
+
+        [RowWheat.wheat]:{
+            label:'下麦'
+        }
+    }
+}

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

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

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

@@ -0,0 +1,74 @@
+import Throttle from '$utils/tool/throttle';
+import user from "$config/user";
+export default <LibMixins>{
+
+    data(){
+        return {
+            collect:0
+        }
+    },
+
+    watch:{
+      'info.is_collect':function () {
+          return this.setCollect(this.info.is_collect,false);
+      }
+    },
+
+    methods:{
+
+        // 触发更改关注
+        triggerFollow(){
+            return this.setCollect(this.collect?0:1,true);
+        },
+
+        // 设置是否关注
+        setCollect(collect,update:boolean=true){
+            if (user.verificationLogin()) {
+                if (this.info.room_background_id !== undefined) {
+                    if(this.collect !== collect){
+                        this.collect = collect;
+                        if (this._collect === undefined) {
+                            this._collect = collect;
+                        }
+                        return this.triggerCollect();
+                    }
+                }
+            }
+        },
+
+        // 请求接口设置
+        triggerCollect(){
+            if (this._collect !== this.collect) {
+                this._collect = this.collect;
+
+                this.$request({
+                    url: this._collect ? 'Usercollectroom/collect_room':'Usercollectroom/un_collect_room',
+                    data:{
+                        rid: this.info.rid
+                    },
+                    token:true
+                });
+
+
+
+            }
+        }
+
+    },
+
+    created(){
+        this.triggerCollectThrottle = new Throttle({
+           call:this,
+            first:false,
+            handle:this.triggerCollect,
+            delay:500
+        });
+        this.triggerCollect = this.triggerCollectThrottle.supper;
+    },
+
+    beforeUnmount() {
+        this.triggerCollectThrottle && this.triggerCollectThrottle.destroy();
+    }
+
+
+}

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

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

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

@@ -0,0 +1,18 @@
+export default {
+
+    info:{
+        type:Object,
+        default:function (){
+            return {}
+        }
+    },
+
+    status:{
+        type:Number
+    },
+
+    admin:{
+        type:Boolean,
+        default: false
+    }
+}

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

@@ -0,0 +1,157 @@
+<template>
+  <section class="room-info-container flex">
+    <header class="room-info-header rowACenter">
+      <v-image :src="info.room_cover" radius="0.05rem" class="room-info-avatar"></v-image>
+      <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>
+          <div 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>
+          <div class="room-info-span cursor-pointer" @click="copy(info.room_number)">复制</div>
+        </div>
+        <div class="rowACenter">
+          <div class="rowACenter cursor-pointer"
+            :class="{
+              'room-info-collect-active': collect
+            }"
+               @click="triggerFollow"
+          >
+            <svg t="1624583826920" v-if="collect" class="room-info-love-icon room-info-love-checked-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2467" width="200" height="200"><path d="M705.403848 64.46829c-76.854389 0-148.311861 38.554084-195.34506 102.123912-47.007617-63.587224-118.448716-102.123912-195.344037-102.123912-138.54031 0-251.251348 123.228579-251.251348 274.711665 0 90.369194 40.368406 153.767106 72.820516 204.702172 94.311992 147.95268 331.443761 332.071048 341.487511 339.834872 9.676383 7.479345 20.989033 11.222599 32.275077 11.222599 11.31265 0 22.607904-3.744277 32.270984-11.222599 10.057053-7.763824 247.205195-191.882192 341.488535-339.834872 32.466436-50.939159 72.849168-114.332978 72.849168-204.702172C956.655196 187.69687 843.939041 64.46829 705.403848 64.46829L705.403848 64.46829zM837.929164 508.917802" p-id="2468" ></path></svg>
+            <svg t="1623911018767" v-else class="room-info-love-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2626" width="200" height="200"><path d="M921.088 194.56c-50.176-50.176-116.736-77.824-188.416-77.824-71.168 0-138.24 27.648-188.416 77.824l-34.304 34.304L476.16 194.56c-103.936-103.936-272.896-103.936-376.832 0-103.936 103.936-103.936 272.896 0 376.832L486.4 957.952c6.144 6.144 14.848 10.24 24.064 10.24 9.216 0 17.92-3.584 24.064-10.24l386.56-386.56c103.936-103.936 103.936-272.896 0-376.832z m-48.128 328.192L510.464 885.76l-362.496-362.496c-77.312-77.312-77.312-202.752 0-280.064 38.4-38.4 89.088-57.856 140.288-57.856S389.12 204.288 427.52 242.688L486.4 301.056c12.8 12.8 35.328 12.8 48.128 0l58.368-58.368c37.376-37.376 87.04-57.856 140.288-57.856 53.248 0 102.912 20.48 140.288 57.856 76.8 77.312 76.8 202.752-0.512 280.064z" p-id="2627"></path></svg>
+            <div class="room-info-id">{{collect?'已收藏':'收藏'}}</div>
+          </div>
+        </div>
+      </div>
+    </header>
+    <article class="room-info-notice flex">
+      <header class="rowACenter">
+        <svg t="1623911615616" class="room-info-notice-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3623" width="200" height="200"><path d="M549.1 103.136a76 76 0 0 1 30.412 30.107l0.367 0.672L658.732 280H855c35.346 0 64 28.654 64 64v506c0 35.346-28.654 64-64 64H170c-35.346 0-64-28.654-64-64V344c0-35.346 28.654-64 64-64h197.267l78.854-146.085c19.937-36.936 66.042-50.717 102.979-30.78zM855 344H170v506h685V344zM522 652.172c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H306c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32h216z m209-174c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H295c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32h436zM506.087 165.99l-0.127 0.226L444.54 280h136.917L520.04 166.215a8 8 0 0 0-2.969-3.087l-0.271-0.153a8 8 0 0 0-10.713 3.014z" p-id="3624" fill="#ffffff"></path></svg>
+        <div class="room-notice-title">房间公告</div>
+      </header>
+      <section class="flex-1 room-notice-content">
+        <scroll-view
+          :security-size="10"
+        >
+          <div>{{info.room_intro}}</div>
+        </scroll-view>
+      </section>
+    </article>
+    <section class="flex-1 flex">
+      <div class="flex-1">
+        <tab
+            :data="tabData"
+        >
+
+          <template v-slot:header="{data,select,trigger}">
+            <header class="rowACenter room-info-tab-header relative">
+              <aside
+                  v-for="(item,index) in data"
+                  :key="'room-info-tab-header-'+index"
+                  class="room-info-tab-item row flex-1 center"
+                  :class="{
+                'cursor-pointer': index !== select,
+                'room-info-tab-item-active': index===select
+              }"
+                  @click="trigger(index)"
+              >{{item.label}}<span v-if="item.key && info[item.key] >0">({{info[item.key]>=99?'99+':info[item.key]}})</span></aside>
+              <div class="room-info-line absolute center"
+                   :style="{width:avg+'%',left:avg * select +'%'}"
+              >
+                <div></div>
+              </div>
+            </header>
+          </template>
+
+          <template
+              v-for="(item,index) in tabData"
+              v-slot:[item.slot]
+          >
+            <room-audience
+                :key="'room-audience-'+index"
+            ></room-audience>
+          </template>
+        </tab>
+      </div>
+      <div @click="triggerWheat" class="room-info-apply button">{{wheatItem.label}}</div>
+    </section>
+  </section>
+</template>
+<script>
+import {
+  vImage,
+  icon,
+  scrollView,
+  tab
+} from '$components';
+
+import roomAudience from '../components/room-audience';
+
+import props from '../props';
+
+import tabData from '../data/tab';
+
+import wheatData from '../data/wheat';
+import {RowWheat} from "@/pages/talking/const";
+
+// import html from '$utils/tool/html';
+
+import extend from '$utils/tool/extend';
+
+import mixins from '../mixins';
+
+export default {
+  name: "room-info",
+
+  data(){
+    return {
+      tabData,
+      wheatData
+    }
+  },
+
+  computed:{
+    avg(){
+      return 100 / this.tabData.length;
+    },
+    wheatItem(){
+      return wheatData[this.admin ? 'admin':'user'][this.status];
+    }
+  },
+
+  inject:['applyForWheat','exitForWheat'],
+
+  methods:{
+
+    // 复制文本
+    copy(text){
+      extend.copy(text,true);
+    },
+
+    triggerWheat(){
+
+      if (this.status === RowWheat.none) {
+        this.applyForWheat();
+      } else if (this.status === RowWheat.wheat) {
+        this.exitForWheat();
+      }
+    }
+
+  },
+
+  components:{
+    vImage,
+    icon,
+    scrollView,
+    tab,
+    roomAudience
+  },
+  props,
+  mixins
+}
+</script>
+
+<style scoped lang="scss" src="../style.scss"></style>

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

@@ -0,0 +1,109 @@
+/* 容器 */
+.room-info-container{
+  width: 260px;
+  height: 100%;
+  background-color: rgba(0,0,0,0.2);
+  border-radius: 5px;
+}
+/* 容器 */
+
+/* 头部介绍 */
+.room-info-header{
+  padding: 13px 10px 10px;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+}
+.room-info-avatar{
+  @include square(70px);
+}
+.room-info-span{
+  font-size: 12px;
+  line-height: 18px;
+  color: rgba(255,255,255,0.5);
+}
+.room-info-user{
+  margin-left: 10px;
+}
+.room-info-name{
+  font-size: 18px;
+  line-height: 22px;
+  margin-right: 5px;
+}
+.room-info-id-container{
+  margin-top: 7px;
+  margin-bottom: 7px;
+}
+.room-info-id{
+  font-size: 14px;
+  line-height: 18px;
+  margin-right: 15px;
+}
+.room-info-love-icon{
+  @include square(14px);
+  margin-right: 5px;
+}
+.room-info-love-icon path{
+  fill: #fff;
+}
+.room-info-collect-active path {
+  fill: #FF8D60;
+}
+.room-info-collect-active div{
+  color: #FF8D60;
+}
+/* 头部介绍 */
+
+/* 房间公告 */
+.room-info-notice{
+  height: 171px;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+  padding: 10px;
+  font-size: 14px;
+  line-height: 16px;
+}
+.room-info-notice-icon{
+  @include square(15px);
+}
+.room-info-notice-icon path {
+  fill: rgba(255,255,255,0.3);
+}
+.room-notice-title{
+  color: rgba(255,255,255,0.3);
+  margin-left: 5px;
+  position: relative;
+  top: 1px;
+}
+.room-notice-content{
+  margin-top: 6px;
+  line-height: 22px;
+}
+/* 房间公告 */
+
+/* 底部现场观众介绍 */
+.room-info-tab-header{
+  height: 45px;
+  padding-bottom: 5px;
+}
+.room-info-tab-item{
+  font-size: 14px;
+  line-height: 18px;
+}
+.room-info-tab-item-active{
+}
+.room-info-line{
+  bottom: 10px;
+  left: 0;
+  transition: .3s;
+}
+.room-info-line div{
+  width: 30px;
+  height: 4px;
+  border-radius: 2px;
+  background: $main-linear;
+}
+.room-info-apply{
+  margin: 10px;
+  height: 40px;
+  background: rgba(255,255,255,0.1);
+  border-radius: 5px;
+}
+/* 底部现场观众介绍 */

src/pages/talking/components/room-ranking/components/room-chat/components/const.ts

@@ -0,0 +1,7 @@
+enum RoomMessageType{
+    system='room-chat-system'
+}
+
+export {
+    RoomMessageType
+}

src/pages/talking/components/room-ranking/components/room-chat/components/index.ts

@@ -0,0 +1,10 @@
+// 系统消息组件
+import roomChatSystem from './room-chat-system';
+
+
+export default {
+    roomChatSystem
+}
+
+// 导出常量
+export { RoomMessageType } from './const';

src/pages/talking/components/room-ranking/components/room-chat/components/room-chat-system/index.ts

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

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

@@ -0,0 +1,11 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "room-chat-system"
+}
+</script>
+
+<style scoped lang="scss" src="../style.scss"></style>

src/pages/talking/components/room-ranking/components/room-chat/data/control.ts

@@ -0,0 +1,5 @@
+export default [
+    {
+        icon:require('../images/expression.png')
+    }
+]