个人中心弹窗封装

assets/data/oldimages.json

@@ -26,7 +26,7 @@
   "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/RadioButton/radiobutton_unselect.png",
   "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/ScrollBar/roundthumb.png",
   "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Slider/thumb.png",
-  "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Slider/track.pn",
+  "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Slider/track.png",
   "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Slider/tracklight.png",
   "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/ToggleSwitch/handle.png",
   "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/ToggleSwitch/off.png",
@@ -82,7 +82,6 @@
   "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/qizi/qizi3.png",
   "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Rectangle.png",
   "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_filter_06.png",
-  "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_filter_06brig",
   "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_filter_07.png",
   "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/ic_filter_07bright.png",
   "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/filter_01bright%20.png",

components/common/header/index.vue

@@ -27,7 +27,7 @@
         </div>
       </div>
       <div class="center-bg"/>
-      <div class="profile">
+      <div class="profile btn" @click="click().profile()">
         <img v-if="userInfo.avatar" :src="userInfo.avatar | img" alt="" class="profile-img">
         <img v-else src="./static/profile/profile-pic.png" alt="" class="profile-img">
         <template v-if="userInfo.id">
@@ -51,8 +51,6 @@
       title="退出游戏"
       message="机器中所有剩余的积分将自动转回您的钱包。"
       @confirm="() => quitGame()"/>
-    <!-- 个人中心弹窗 -->
-    <UserDialog/>
   </div>
 </template>
 
@@ -62,7 +60,6 @@ import dayjs from 'dayjs'
 import screenfull from 'screenfull'
 import { mapState } from 'vuex'
 import Confirm from '@/components/dialog/confirm'
-import UserDialog from '@/components/dialog/user-dialog/index'
 export default {
   filters: {
     filterData(time) {
@@ -74,7 +71,6 @@ export default {
   },
   components: {
     Confirm,
-    UserDialog,
   },
   data() {
     // 卡片
@@ -132,6 +128,10 @@ export default {
             screenfull.exit()
           }
         },
+        // 个人中心
+        profile: () => {
+          this.$parent.showUserDialog() // 调用父级弹出个人中心
+        },
       }
     },
     network() {

components/dialog/user-dialog/index.vue

 <template>
-  <div v-show="show">
+  <div v-show="visible" class="dialog-layout" >
     <div class="mark"/>
-    <div>
+    <div class="dlalog">
+      <img class="close btn" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rectangle%201175%20copy.png" alt="" @click="visible = false">
       个人中心
+      <Load>
+        个人中心
+      </Load>
     </div>
   </div>
 </template>
 
 <script>
+import Load from '@/components/layout/load'
 export default {
+  components: {
+    Load,
+  },
   data() {
     const imagesList = [
       'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/big-sel.png',
@@ -17,20 +25,56 @@ export default {
       'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%2018.png', // 滑块
     ]
     return {
-      show: false,
+      visible: false,
     }
   },
+  methods: {
+    show() {
+      this.visible = true
+    },
+  },
 }
 </script>
 
-<style scoped>
-.mark {
-  position: fixed;
+<style lang="scss" scoped>
+
+.dialog-layout {
+  position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  background: black;
-  opacity: 0.3;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999;
+  .mark {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: black;
+    opacity: 0.3;
+  }
+
+  .dlalog {
+    background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%201131.png);
+    background-size: 100% 100%;
+    width: 620px;
+    height: 350px;
+    position: relative;
+    .close {
+      width: 34px;
+      height: 34px;
+      position: absolute;
+      right: -17px;
+      top: -17px;
+      z-index: 1;
+      border-radius: 100px;
+      border: 3px solid white;
+    }
+  }
 }
+
 </style>

components/layout/load.vue

+<template>
+  <div>
+    <div v-if="!complete">
+      loading...
+    </div>
+    <slot v-else/>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    iamges: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+  },
+  data() {
+    return {
+      loading: true,
+      downloadTotal: 0,
+    }
+  },
+  computed: {
+    // 总共完成加载数量
+    completeDownload() {
+      const { downloadImage, downloadAudio } = this
+      return (downloadImage + downloadAudio)
+    },
+    complete() {
+      const { completeDownload, downloadTotal } = this
+      return completeDownload === downloadTotal
+    },
+  },
+  watch: {},
+  methods: {
+    loadResources() {
+      const { imagesSrcList, audioSrcList } = this
+      const imagesLength = imagesSrcList.length
+      const audioLength = 0 // audioSrcList.length // 先不判断音频数量
+      this.downloadTotal = imagesLength + audioLength
+      imagesSrcList.forEach(src => {
+        const img = new Image()
+        img.src = src
+        if (img.complete) {
+          this.downloadImage++
+        } else {
+          img.onload = () => {
+            this.downloadImage++
+          }
+          img.onerror = () => {
+            this.downloadImage++
+          }
+        }
+      })
+      audioSrcList.forEach(src => {
+        const audio = new Audio()
+        audio.src = src
+        // audio.addEventListener('canplay', () => {
+        //   this.downloadAudio++
+        // })
+      })
+    },
+  },
+}
+</script>

pages/index.vue

@@ -6,6 +6,8 @@
       />
     </div>
     <Footer/>
+    <!-- 个人中心弹窗 -->
+    <UserDialog ref="userDialog"/>
   </div>
 </template>
 
@@ -16,10 +18,12 @@ import { mapActions, mapMutations, mapState, } from 'vuex'
 import { Message } from 'element-ui'
 import openIM from '@/plugins/openIM'
 import { CbEvents } from 'open-im-sdk'
+import UserDialog from '@/components/dialog/user-dialog/index'
 export default {
   components: {
     Header,
     Footer,
+    UserDialog,
   },
   data() {
     return {
@@ -204,6 +208,10 @@ export default {
         },
       }
     },
+    showUserDialog() {
+      console.log('showUserDialog')
+      this.$refs.userDialog.show()
+    },
   },
 }
 </script>

pages/loading/data/images.json

@@ -41,5 +41,7 @@
   "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Full%20Screen%20Button.png",
   "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/headBg.png",
   "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/Bar%20Background.png",
-  "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/logo.png"
+  "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/logo.png",
+  "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%201131.png",
+  "https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rectangle%201175%20copy.png"
 ]

pages/test.vue

 <template>
   <div class="main">
-    <div v-clipboard:copy="src" v-clipboard:success="onCopy" v-for="(src, index) in imagesJson" :key="index" class="box">
+    <div v-for="(src, index) in imagesJson" :key="index" class="box">
       <!-- {{ src }} -->
-      <img :src="src" width="200px" class="img" >
+      <!-- <img :src="src" width="200px" class="img" >
+      <div class="text" @click="showImg">原图</div> -->
+      <el-image
+        :src="src"
+        :preview-src-list="[src]"
+        :fit="'contain'"
+        style="width: 100px; height: 100px"
+      />
+      <div v-clipboard:copy="src" v-clipboard:success="onCopy" class="text btn">
+        copy
+      </div>
     </div>
   </div>
 </template>
@@ -10,10 +20,12 @@
 <script>
 import {
   Message,
+  Image,
 } from 'element-ui'
 import imagesJson from '@/assets/data/oldimages.json'
 export default {
   components: {
+    ElImage: Image,
   },
   data() {
     return {
@@ -29,6 +41,7 @@ export default {
         type: 'success',
       })
     },
+    showImg() {},
   },
 }
 </script>
@@ -41,6 +54,27 @@ export default {
 }
 .box {
   display: inline-block;
+  position: relative;
+  &:hover {
+    .text {
+      display: block;
+    }
+  }
+  .text {
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    font-size: 12px;
+    background: #ccc;
+    border-radius: 4px;
+    padding: 2px 4px;
+    color: rgb(30, 30, 30);
+    opacity: 0.8;
+    &:hover {
+      opacity: 1;
+    }
+  }
 }
 .img {
   display: inline-block;