个人中心

components/dialog/user-dialog/index.vue

@@ -5,14 +5,16 @@
       <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">
       <div class="dialog-content">
         <Tab @on-change="(index) => { tabIndex = index}"/>
-        <Load>
-          <!-- 个人资料 -->
-          <Info v-show="tabIndex === 0" :level-current="levelCurrent" />
-          <!-- 游戏记录 -->
-          <Record v-show="tabIndex === 1" />
-          <!-- 分数转账表 -->
-          <ScoreLog v-show="tabIndex === 2" />
-        </Load>
+        <div style="padding: 2px;">
+          <Load>
+            <!-- 个人资料 -->
+            <Info v-show="tabIndex === 0" :level-current="levelCurrent" :latest-achievement="latestAchievement" />
+            <!-- 游戏记录 -->
+            <Record v-show="tabIndex === 1" />
+            <!-- 分数转账表 -->
+            <ScoreLog v-show="tabIndex === 2" />
+          </Load>
+        </div>
       </div>
     </div>
   </div>
@@ -45,12 +47,14 @@ export default {
       visible: false,
       tabIndex: 0,
       levelCurrent: {},
+      latestAchievement: {},
     }
   },
   methods: {
     show() {
       this.visible = true
       this.network().levelCurrent()
+      this.network().latestAchievement()
     },
     network() {
       return {
@@ -62,6 +66,14 @@ export default {
             this.levelCurrent = data
           })
         },
+        latestAchievement: () => {
+          this.$request({
+            url: '/api/player/user/latestAchievement',
+            method: 'get',
+          }).then(({ data }) => {
+            this.latestAchievement = data
+          })
+        },
       }
     },
   },
@@ -110,6 +122,8 @@ export default {
     .dialog-content {
       margin: 0 22px 00px 24px;
       height: 100%;
+      background-color: #003649;
+      background-image: linear-gradient(#004156, #00212e);
     }
   }
 }

components/dialog/user-dialog/info-data.vue

+<template>
+  <div class="info-data">
+    <div class="header">个人功绩表</div>
+    <div class="list">
+      <div class="row">
+        <div class="label">总旋转数</div>
+        <div class="value">{{ data.totalSpins }}</div>
+      </div>
+      <div class="row">
+        <div class="label">总赢奖金</div>
+        <div class="value" style="color: #78b316;">{{ data.totalWinnings }}</div>
+      </div>
+      <div class="row">
+        <div class="label">大奖赢奖金</div>
+        <div class="value" style="color: #4c8fd3;">{{ data.jackpotEarned }}</div>
+      </div>
+      <div class="row">
+        <div class="label">最大中奖</div>
+        <div class="value" style="color: #d9d32f;">{{ data.maxSingleHighestStrike }}</div>
+      </div>
+    </div>
+    <img class="jian" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/gameMore/jian_01.png" alt="">
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    // 个人功绩
+    data: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+  },
+  data() {
+    return {}
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.info-data {
+  position: relative;
+}
+.header {
+  /* height: 26px; */
+  padding: 6px 18px;
+  font-size: 18px;
+  font-weight: bold;
+  color: #ffd540;
+  background-image: linear-gradient(#004156, #00212e);
+}
+.label {
+  width: 80px;
+}
+.list {
+  .row {
+    display: flex;
+    &:nth-child(odd) {
+      background-color: #002e3f;
+    }
+    &:nth-child(even) {
+      background-color: #184054;
+    }
+    padding: 6px 18px;
+    .label {
+      width: 150px;
+      font-size: 14px;
+    }
+    .value {
+    }
+  }
+}
+.jian {
+  position: absolute;
+  right: 80px;
+  top: 46px;
+  width: 70px;
+}
+</style>

components/dialog/user-dialog/info.vue

@@ -29,23 +29,45 @@
           </div>
         </div>
         <div class="gold-box">
-          <div>
-            <img src="" alt="">
-            <div>9.00</div>
+          <div class="box">
+            <UiInput
+              :value="9.00"
+              bg="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/other-sel.png"
+              icon="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/sign/coins_counter.png" />
           </div>
-          <div>
-            <img src="" alt="">
-            <div>9.00</div>
+          <div class="box">
+            <UiInput
+              :value="9.00"
+              bg="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/other-sel.png"
+              icon="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/bi_01.png" />
           </div>
         </div>
       </div>
+      <div class="country">
+        <CountryIcon :name="userInfo.playerCountry" style="width: 34px; display: block;"/>
+        <span style="font-size: 12px; margin-left: 4px;">{{ userInfo.playerCountry }}</span>
+      </div>
+      <div class="login-time">
+        最后登入：{{ userInfo.loginDate }}
+      </div>
+    </div>
+    <div class="data">
+      <InfoData :data="latestAchievement"/>
     </div>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
+import UiInput from '@/components/ui/ui-input'
+import CountryIcon from '@/components/ui/country-icon'
+import InfoData from './info-data'
 export default {
+  components: {
+    UiInput,
+    CountryIcon,
+    InfoData,
+  },
   props: {
     levelCurrent: {
       type: Object,
@@ -53,6 +75,13 @@ export default {
         return {}
       },
     },
+    // 个人功绩
+    latestAchievement: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
   },
   data() {
     // 卡片
@@ -79,6 +108,8 @@ export default {
   width: 100%;
   height: 120px;
   display: flex;
+  background-color: #031e28;
+  position: relative;
   .avatar-block {
     width: 80px;
     height: 90px;
@@ -163,8 +194,37 @@ export default {
       }
     }
     .gold-box{
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      .box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 140px;
+      }
     }
   }
+  .country {
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    padding: 4px;
+    align-items: center;
+    color: #1e7d94;
+  }
+  .login-time {
+    color: #1e7d94;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    font-size: 12px;
+    zoom: 0.9;
+    padding: 2px;
+  }
 }
 
 </style>

components/dialog/user-dialog/record.vue

 <template>
-  <div>record</div>
+  <div>
+    <span style="padding: 8px;">开发中...</span>
+  </div>
 </template>

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

 <template>
-  <div>ScoreLog</div>
+  <span style="padding: 8px;">开发中...</span>
 </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 style="height: 40px;">
+    <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>
   </div>
 </template>
@@ -32,7 +34,8 @@ export default {
 <style lang="scss" scoped>
 .tab-block {
   display: flex;
-  margin-top: -10px;
+  position: relative;
+  top: -10px;
   .tab-box {
     position: relative;
     color: #16bcc7;

components/ui/country-icon.vue

+<template>
+  <img :src="src" alt="" class="country-img">
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    const countryData = [
+      {
+        name: 'Korea',
+        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/Korea.jpg',
+      },
+      {
+        name: 'Laos',
+        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/Laos.jpg',
+      },
+      {
+        name: 'malaysla',
+        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/malaysla.jpg',
+      },
+      {
+        name: 'philippines',
+        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/philippines.jpg',
+      },
+      {
+        name: 'others',
+        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/others.jpg',
+      },
+      {
+        name: 'srllanka',
+        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/srllanka.jpg',
+      },
+      {
+        name: 'Thailand',
+        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/Thailand.jpg',
+      },
+      {
+        name: 'vietnam',
+        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/vietnam.jpg',
+      },
+      {
+        name: 'Cambodla',
+        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/Cambodla.jpg',
+      },
+      {
+        name: 'china',
+        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/china.png',
+      },
+      {
+        name: 'Japan',
+        img: 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/Japan.jpg',
+      },
+    ]
+    return {
+      countryData,
+    }
+  },
+  computed: {
+    src() {
+      const { name, countryData } = this
+      let src = 'https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/flag/others.jpg'
+      countryData.forEach(item => {
+        if (item.name === name) {
+          src = item.img
+        }
+      })
+      return src
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.country-img {
+  display: block;
+}
+</style>

components/ui/ui-input.vue

+<template>
+  <div class="ui-input">
+    <img :src="icon" class="icon" alt="">
+    <div :style="valueStyle" class="value">{{ value | filterValue }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  filters: {
+    filterValue(value) {
+      return value.toFixed(2)
+    },
+  },
+  props: {
+    icon: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: [String, Number],
+      default: 0,
+    },
+    bg: { // value背景图
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    valueStyle() {
+      const { bg } = this
+      const style = {}
+      style.backgroundImage = `url(${bg})`
+      return style
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.ui-input {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  .icon {
+    width: 40px;
+    position: relative;
+    z-index: 1;
+  }
+  .value {
+    text-align: right;
+    flex: 1;
+    background-size: 100% 100%;
+    padding: 4px 12px;
+    margin-left: -14px;
+  }
+}
+</style>

pages/index.vue

@@ -128,7 +128,9 @@ export default {
             method: 'get',
           }).then(({ data }) => {
             if (!data) {
-              this.$router.replace('/device')
+              if (this.$route.name !== 'index-device') {
+                this.$router.replace('/device')
+              }
               return
             }
             const { id } = data

pages/loading/index.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import { getToken } from '@/utils/auth' // 验权
+import { getToken, setToken } from '@/utils/auth' // 验权
 import _images from './data/images.json'
 import _audio from './data/audio.json'
 import { mapActions } from 'vuex'
@@ -90,6 +90,12 @@ export default {
       }
     },
   },
+  created() {
+    const token = this.$route.query.token
+    if (token) {
+      setToken(token)
+    }
+  },
   mounted() {
     this.loadPageImgState() // 加载loading页的图片
   },