个人中心

components/dialog/user-dialog/index.vue

@@ -3,14 +3,14 @@
     <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">
-      <div class="dialog-content">
+      <div class="box">
         <Tab @on-change="(index) => { tabIndex = index}"/>
-        <div style="padding: 2px;">
+        <div class="dialog-content" style="padding: 2px; flex: 1; overflow: auto;">
           <Load>
             <!-- 个人资料 -->
             <Info v-show="tabIndex === 0" :level-current="levelCurrent" :latest-achievement="latestAchievement" />
             <!-- 游戏记录 -->
-            <Record v-show="tabIndex === 1" />
+            <Record v-show="tabIndex === 1" :data="lastGame" />
             <!-- 分数转账表 -->
             <ScoreLog v-show="tabIndex === 2" />
           </Load>
@@ -47,9 +47,15 @@ export default {
       visible: false,
       tabIndex: 0,
       levelCurrent: {},
-      latestAchievement: {},
+      latestAchievement: {}, // 个人功绩
+      lastGame: [], // 游戏记录
     }
   },
+  watch: {
+    tabIndex() {
+      this.network().lastGame()
+    },
+  },
   methods: {
     show() {
       this.visible = true
@@ -74,6 +80,14 @@ export default {
             this.latestAchievement = data
           })
         },
+        lastGame: () => {
+          this.$request({
+            url: '/api/player/user/lastGame',
+            method: 'get',
+          }).then(({ rows }) => {
+            this.lastGame = rows
+          })
+        },
       }
     },
   },
@@ -119,11 +133,16 @@ export default {
       border-radius: 100px;
       border: 3px solid white;
     }
-    .dialog-content {
+    .box {
       margin: 0 22px 00px 24px;
       height: 100%;
+      display: flex;
+      flex-direction: column;
+      .dialog-content {
         background-color: #003649;
         background-image: linear-gradient(#004156, #00212e);
+        background-image: linear-gradient(#00212e, #004156);
+      }
     }
   }
 }

components/dialog/user-dialog/info.vue

@@ -2,7 +2,11 @@
   <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
+          class="edit btn"
+          src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/edit_button.png"
+          alt=""
+          @click="click().edit()">
         <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">
@@ -100,6 +104,18 @@ export default {
       'userInfo',
     ]),
   },
+  methods: {
+    click() {
+      return {
+        edit: () => {
+          this.$message({
+            message: '功能维护中...',
+            type: 'warning'
+          })
+        },
+      }
+    },
+  },
 }
 </script>
 

components/dialog/user-dialog/record-item.vue

+<template>
+  <div class="record">
+    <div class="info-block">
+      <div class="time">
+        <div style="font-size: 16px;">最后登入机器</div>
+        <div>2023-07-06</div>
+        <div>23:23:23</div>
+      </div>
+      <div class="game-img">
+        <div class="box">
+          <img :src="data.gameImg | img" alt="">
+        </div>
+      </div>
+      <div class="info">
+        <!-- 空闲 -->
+        <img v-show="data.deviceStatus === 1" class="state-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/chinese/Available_zh.png" alt="">
+        <!-- 异常 -->
+        <img v-show="data.deviceStatus === 2" class="state-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/In%20Service.png" alt="">
+        <!-- 游戏中 -->
+        <img v-show="data.deviceStatus === 3" class="state-img" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/Occupied.png" alt="">
+        <div>游戏名称：{{ data.gameNameEn }}</div>
+        <div>机台号：{{ data.egmId }}</div>
+        <div>最高投注额：{{ data.maxBet }}</div>
+        <div>多选注额：{{ data.multidenom }}</div>
+      </div>
+    </div>
+    <div class="data">
+      <div class="column">
+        <div>下注</div>
+        <div>输/赢</div>
+        <div>游戏</div>
+        <div>彩金记录</div>
+        <div>总游戏时间</div>
+      </div>
+      <div class="row">
+        <div>0.00</div>
+        <div>0.00</div>
+        <div>{{ data.gameNameEn }}</div>
+        <div>0.00</div>
+        <div>{{ data.sessionLengthDisplay }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.record {
+  color: #14afbb;
+  border-bottom: 1px solid #cccccc17;
+  margin-top: 6px;
+  margin-bottom: 12px;
+  .info-block {
+    display: flex;
+    .time {
+      flex: 1;
+      text-align: right;
+      padding: 6px 12px;
+      font-size: 14px;
+      line-height: 20px;
+    }
+    .game-img{
+      padding: 6px 12px;
+      flex: 1;
+      .box {
+        border: 1px solid #006643;
+        border-radius: 10px;
+        overflow: hidden;
+        img {
+          height: 106px;
+          display: block;
+          margin: auto;
+        }
+      }
+    }
+    .info {
+      flex: 1;
+      padding: 6px 12px;
+      font-size: 14px;
+      font-size: 12px;
+      .state-img {
+        height: 30px;
+      }
+    }
+  }
+  .data{
+    text-align: center;
+    font-size: 12px;
+    padding: 10px;
+    .column {
+      display: flex;
+      background-image: linear-gradient(#004156, #00212e);
+      > div {
+        flex: 1;
+        padding: 3px;
+        color: #f8d140;
+      }
+    }
+    .row {
+      display: flex;
+      > div {
+        flex: 1;
+        padding: 3px;
+      }
+    }
+  }
+}
+</style>

components/dialog/user-dialog/record.vue

 <template>
-  <div>
-    <span style="padding: 8px;">开发中...</span>
+  <div class="list">
+    <RecordItem v-for="(item, index) in data" ref="item" :key="index" :data="item" />
   </div>
 </template>
+
+<script>
+import RecordItem from './record-item'
+export default {
+  components: {
+    RecordItem,
+  },
+  props: {
+    data: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+  },
+  data() {
+    return {}
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.list {
+  overflow: auto;
+}
+</style>

plugins/plugins.js

@@ -6,6 +6,12 @@ Vue.mixin(indexMixins)
 import VueClipboard from 'vue-clipboard2' // 复制组件
 Vue.use(VueClipboard) // 复制组件
 
+import {
+  Message,
+} from 'element-ui'
+
+Vue.prototype.$message = Message
+
 Vue.filter('img', function(value) {
   return `${process.env.img_domain}${value}`
 })