个人中心

components/dialog/user-dialog/index.vue

@@ -6,7 +6,7 @@
       <div class="box">
         <Tab @on-change="(index) => { tabIndex = index}"/>
         <div class="dialog-content">
-          <Load>
+          <Load style="height: 100%;">
             <!-- 个人资料 -->
             <Info v-show="tabIndex === 0" :level-current="levelCurrent" :latest-achievement="latestAchievement" />
             <!-- 游戏记录 -->

components/dialog/user-dialog/score-data-row.vue

+<template>
+  <div :class="{ deep: index % 2 === 0, }" class="flex-box">
+    <div class="left-box">
+      <div class="date">{{ data.createTime | filterData }}</div>
+      <div class="time">{{ data.createTime | filterTime }}</div>
+    </div>
+    <div class="data-box">
+      <div class="value-box">
+        <div class="row">
+          <img class="icon" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/coin.png" alt="">
+          {{ data.beginningCashBalance }}
+        </div>
+        <div class="row">
+          <img class="icon" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/coin.png" alt="">
+          {{ data.cashableInAmount }}
+        </div>
+        <div class="row">
+          <img class="icon" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/coin.png" alt="">
+          {{ data.endingCashBalance }}
+        </div>
+      </div>
+      <div class="line"/>
+      <div class="value-box">
+        <div class="row">
+          <img class="icon" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_bi.png" alt="">
+          {{ data.beginningRestrictedBalance }}
+        </div>
+        <div class="row">
+          <img class="icon" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_bi.png" alt="">
+          0
+        </div>
+        <div class="row">
+          <img class="icon" src="https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/ic_bi.png" alt="">
+          0
+        </div>
+      </div>
+    </div>
+    <div class="right-box">
+      {{ data.detail }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  filters: {
+    filterData(value) {
+      return value.split(' ')[0]
+    },
+    filterTime(value) {
+      return value.split(' ')[1]
+    },
+  },
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+    index: {
+      type: Number,
+      default: 0,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.flex-box {
+  display: flex;
+  height: 80px;
+  &.deep {
+    background: #004156;
+  }
+  .left-box, .right-box {
+    width: 130px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    .date {
+      font-size: 12px;
+    }
+  }
+  .right-box {
+    width: 140px;
+  }
+  .data-box {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    .value-box {
+      display: flex;
+      // justify-content: space-around;
+      line-height: 32px;
+      .row {
+        display: flex;
+        // justify-content: center;
+        align-items: center;
+        width: 33%;
+        font-size: 12px;
+        .icon {
+          display: block;
+          height: 24px;
+          margin-right: 4px;
+        }
+      }
+    }
+    .line {
+      flex: none;
+      height: 1px;
+      background: color(srgb 0.0303 0.3369 0.47);
+    }
+  }
+}
+</style>

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

@@ -13,62 +13,109 @@
       <div class="end">结束金额</div>
       <div class="remark">备注</div>
     </div>
+    <div class="table">
+      <ScoreRow v-for="(item, index) in list" :key="index" :data="item" :index="index"/>
+    </div>
   </div>
 </template>
 
 <script>
 import SoreBtn from './score-log-btn'
+import ScoreRow from './score-data-row'
 export default {
   components: {
     SoreBtn,
+    ScoreRow,
   },
   data() {
     return {
       index: 0,
+      list: [], // 消息列表
     }
   },
+  watch: {
+    index() {
+      this.network().getData(this.index)
+    },
+  },
+  created() {
+    this.network().getData(this.index)
+  },
+  methods: {
+    network() {
+      return {
+        getData: (type) => {
+          const params = {}
+          if (type) {
+            params.filterType = type
+          }
+          this.list = []
+          this.$request({
+            url: '/api/player/user/creditTransferLog',
+            method: 'get',
+            params,
+          }).then(({ rows }) => {
+            console.log('creditTransferLog data', { ...rows[0] })
+            this.list = rows
+          })
+        },
+      }
+    },
+  },
 }
 </script>
 
 <style lang="scss" scoped>
-.btn-block {
+.score-block {
   display: flex;
-  position: relative;
-  z-index: 100;
-  flex: 1;
-  gap: 4px;
-  .btn {
+  flex-direction: column;
+  overflow: auto;
+  height: 100%;
+  .btn-block {
+    display: flex;
+    position: relative;
+    z-index: 100;
     flex: 1;
-    &.active {
-      border-color: #25f4e3;
+    gap: 4px;
+    flex: none;
+    .btn {
+      flex: 1;
+      &.active {
+        border-color: #25f4e3;
+      }
     }
   }
-}
-.header {
-  display: flex;
-  text-align: center;
-  background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/%E7%9F%A9%E5%BD%A2%202.png);
-  background-size: 100% 100%;
-  height: 24px;
-  line-height: 24px;
-  font-size: 14px;
-  color: #102829;
-  font-weight: bold;
-  margin-top: 4px;
-  .date {
-    width: 200px;
-  }
-  .start {
-    width: 200px;
-  }
-  .change {
-    width: 160px;
-  }
-  .end {
-    width: 160px;
+  .header {
+    display: flex;
+    text-align: center;
+    background-image: url(https://kuawai.s3.ap-east-1.amazonaws.com/resource/assets/Textures/second/%E7%9F%A9%E5%BD%A2%202.png);
+    background-size: 100% 100%;
+    height: 24px;
+    line-height: 24px;
+    font-size: 14px;
+    color: #102829;
+    font-weight: bold;
+    margin-top: 4px;
+    .date {
+      width: 180px;
+    }
+    .start {
+      width: 160px;
+    }
+    .change {
+      width: 160px;
+    }
+    .end {
+      width: 160px;
+    }
+    .remark {
+      width: 160px;
+    }
   }
-  .remark {
-    width: 160px;
+  .table {
+    flex: 1;
+    overflow: auto;
   }
 }
+
 </style>