save

components/dialog/user-dialog/index.vue

@@ -7,7 +7,7 @@
         <Tab @on-change="(index) => { tabIndex = index}"/>
         <Load>
           <!-- 个人资料 -->
-          <Info v-show="tabIndex === 0" />
+          <Info v-show="tabIndex === 0" :level-current="levelCurrent" />
           <!-- 游戏记录 -->
           <Record v-show="tabIndex === 1" />
           <!-- 分数转账表 -->
@@ -44,11 +44,25 @@ export default {
     return {
       visible: false,
       tabIndex: 0,
+      levelCurrent: {},
     }
   },
   methods: {
     show() {
       this.visible = true
+      this.network().levelCurrent()
+    },
+    network() {
+      return {
+        levelCurrent: () => {
+          this.$request({
+            url: '/api/player/level/current',
+            method: 'get',
+          }).then(({ data }) => {
+            this.levelCurrent = data
+          })
+        },
+      }
     },
   },
 }

components/dialog/user-dialog/info.vue

@@ -21,7 +21,12 @@
       </div>
       <div class="gold-block">
         <div class="card-box">
-          card
+          <template v-if="userInfo.id">
+            <img :src="cardImg[userInfo.playerLevelName]" alt="" class="card-img">
+          </template>
+          <div class="level">
+            {{ levelCurrent.current }} / {{ levelCurrent.needs }}
+          </div>
         </div>
         <div class="gold-box">
           <div>
@@ -41,9 +46,26 @@
 <script>
 import { mapState } from 'vuex'
 export default {
-  data() {
+  props: {
+    levelCurrent: {
+      type: Object,
+      default: () => {
         return {}
       },
+    },
+  },
+  data() {
+    // 卡片
+    const cardImg = {
+      Red: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Red.png',
+      Gold: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Gold.png',
+      Silver: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Silver.png',
+      Diamond: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/card-Diamond.png',
+    }
+    return {
+      cardImg,
+    }
+  },
   computed: {
     ...mapState([
       'userInfo',
@@ -125,6 +147,20 @@ export default {
       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;
+      .card-img {
+        width: 84px;
+        margin: 4px auto;
+        display: block;
+      }
+      .level {
+        background: #0000007a;
+        border-radius: 4px;
+        text-align: center;
+        margin: 4px auto;
+        width: 100px;
+        padding: 4px 0;
+        font-size: 14px;
+      }
     }
     .gold-box{
     }