个人中心

components/dialog/user-dialog/index.vue

@@ -3,19 +3,34 @@
     <div class="mark"/>
     <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 class="dialog-content">
+        <Tab @on-change="(index) => { tabIndex = index}"/>
+        <Load>
+          <!-- 个人资料 -->
+          <Info v-show="tabIndex === 0" />
+          <!-- 游戏记录 -->
+          <Record v-show="tabIndex === 1" />
+          <!-- 分数转账表 -->
+          <ScoreLog v-show="tabIndex === 2" />
+        </Load>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import Load from '@/components/layout/load'
+import Tab from './tab' // 选项卡
+import Info from './info' // 个人资料
+import Record from './record' // 个人资料
+import ScoreLog from './score-log' // 个人资料
 export default {
   components: {
     Load,
+    Tab, // 选项卡
+    Info,
+    Record,
+    ScoreLog,
   },
   data() {
     const imagesList = [
@@ -23,9 +38,12 @@ export default {
       'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/small-nor.png',
       'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/big-nor.png',
       'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%2018.png', // 滑块
+      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/last_game%20%E6%8B%B7%E8%B4%9D%202.png', // tabbar背景
+      'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%2019.png', // tabbar背景
     ]
     return {
       visible: false,
+      tabIndex: 0,
     }
   },
   methods: {
@@ -64,6 +82,7 @@ export default {
     width: 620px;
     height: 350px;
     position: relative;
+    color: white;
     .close {
       width: 34px;
       height: 34px;
@@ -74,6 +93,10 @@ export default {
       border-radius: 100px;
       border: 3px solid white;
     }
+    .dialog-content {
+      margin: 0 22px 00px 24px;
+      height: 100%;
+    }
   }
 }
 

components/dialog/user-dialog/info.vue

+<template>
+  <div>
+    <div class="block-1">
+      <div class="avatar-block">
+        <img class="edit btn" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/edit_button.png" alt="">
+        <img v-if="userInfo.avatar" :src="userInfo.avatar | img" alt="" class="avatar">
+        <img v-else class="avatar" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/head2.png" alt="">
+        <div class="name">
+          {{ userInfo.nickName }}
+        </div>
+      </div>
+      <div class="change">
+        <div class="id">
+          ID: {{ userInfo.id && userInfo.id.substring(0, 6) }}
+        </div>
+        <div class="koi-point">
+          <img style="width: 34px;" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/coin_03.png" alt="">
+          {{ userInfo.koiPoint && userInfo.koiPoint.toFixed(2) }}
+        </div>
+        <img class="btn" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/redeem%20credit_button_zh.png" alt="">
+      </div>
+      <div class="gold-block">
+        <div class="card-box">
+          card
+        </div>
+        <div class="gold-box">
+          <div>
+            <img src="" alt="">
+            <div>9.00</div>
+          </div>
+          <div>
+            <img src="" alt="">
+            <div>9.00</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  data() {
+    return {}
+  },
+  computed: {
+    ...mapState([
+      'userInfo',
+    ]),
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.block-1 {
+  width: 100%;
+  height: 120px;
+  display: flex;
+  .avatar-block {
+    width: 80px;
+    height: 90px;
+    position: relative;
+    background: #050505;
+    border: 2px solid #313f32;
+    border-radius: 6px;
+    box-sizing: border-box;
+    .edit {
+      width: 20px;
+      height: 20px;
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+    .avatar {
+      width: 80px;
+      height: 70px;
+      border-radius: 6px;
+      display: block;
+    }
+    .name {
+      line-height: 20px;
+      font-size: 12px;
+      color: #16b6c0;
+      text-align: center;
+    }
+  }
+  .change {
+    background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%204%20copy.png);
+    background-size: 100% 100%;
+    width: 146px;
+    height: 92px;
+    padding: 2px;
+    .id {
+      color: #cca612;
+      text-align: center;
+      padding: 4px;
+      font-size: 13px;
+    }
+    .koi-point {
+      display: flex;
+      padding: 0px 10px;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 13px;
+      font-weight: bold;
+    }
+    .btn {
+      width: 132px;
+      display: block;
+      margin: 6px auto;
+    }
+  }
+  .gold-block {
+    flex: 1;
+    display: flex;
+    padding-top: 4px;
+    height: 102px;
+    background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/juxing1.png);
+    background-size: 100% 100%;
+    border: 1px solid #065a6c;
+    border-radius: 4px;
+    box-sizing: border-box;
+    .card-box {
+      background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%204%20copy%202.png);
+      background-size: 100% 100%;
+      width: 150px;
+    }
+    .gold-box{
+    }
+  }
+}
+
+</style>

components/dialog/user-dialog/record.vue

+<template>
+  <div>record</div>
+</template>

components/dialog/user-dialog/score-log.vue

+<template>
+  <div>ScoreLog</div>
+</template>

components/dialog/user-dialog/tab.vue

+<template>
+  <div class="tab-block">
+    <div v-for="(text, index) in tab" :key="index" :class="{active: tabIndex === index}" class="tab-box btn" @click="tabIndex = index">
+      <img v-if="tabIndex === index" class="tab-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Rounded%20Rectangle%2019.png" alt="">
+      <img v-else class="tab-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/last_game%20%E6%8B%B7%E8%B4%9D%202.png" alt="">
+      <div class="text">{{ text }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tab: [
+        '个人资料',
+        '游戏记录',
+        '分数转账表',
+      ],
+      tabIndex: 0,
+    }
+  },
+  watch: {
+    tabIndex(value) {
+      console.log('value', value)
+      this.$emit('on-change', value)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.tab-block {
+  display: flex;
+  margin-top: -10px;
+  .tab-box {
+    position: relative;
+    color: #16bcc7;
+    text-align: center;
+    line-height: 38px;
+    font-size: 15px;
+    font-weight: bold;
+    flex: 1;
+    height: 50px;
+    $margin-size: -8px;
+    overflow: hidden;
+    transition-duration: 0s;
+    &:nth-child(2) {
+      z-index: 1;
+      margin-left: $margin-size;
+      margin-right: $margin-size;
+    }
+    &:first-child {
+      margin-right: $margin-size;
+    }
+    &:last-child {
+      margin-left: $margin-size;
+    }
+    &.active {
+      .tab-img {
+        position: absolute;
+        height: 50px;
+        z-index: 2;
+      }
+      font-size: 16px;
+      line-height: 30px;
+    }
+    .tab-img {
+      position: absolute;
+      left: 0;
+      height: 100%;
+      bottom: -2px;
+      width: 100%;
+      height: 42px;
+    }
+    .text {
+      position: relative;
+      z-index: 4;
+      margin-top: 10px;
+    }
+  }
+}
+</style>

components/layout/load.vue

@@ -2,6 +2,8 @@
   <div>
     <div v-if="!complete">
       loading...
+      {{ completeDownload }}
+      {{ downloadTotal }}
     </div>
     <slot v-else/>
   </div>
@@ -20,6 +22,8 @@ export default {
   data() {
     return {
       loading: true,
+      downloadImage: 0,
+      downloadAudio: 0,
       downloadTotal: 0,
     }
   },

layouts/default.vue

@@ -57,7 +57,7 @@ export default {
         this.marginSceen = false
       }
       if (process.env.NODE_ENV === 'development') {
-        // return
+        return
       }
       this.SetZoom(zoom)
       // this.SetInnerWidth(innerWidth)