feat: add reward grant record page

src/api/activity.js

@@ -61,6 +61,15 @@ export function pageRoomContribution(params) {
   })
 }
 
+// 奖励发放记录
+export function pageRewardGrantRecord(params) {
+  return request({
+    url: '/reward-grant-record/page',
+    method: 'get',
+    params
+  })
+}
+
 // ////////////////////// 代理活动 //////////////////////////////////
 // 代理活动历史记录
 export function pageAgentActivity(params) {

src/lang/messages/base/menu-en.js

@@ -69,6 +69,7 @@ export default {
   '红包发送记录': 'Red Packet Send Records',
   '退款扣除目标': 'Refund Deduction Targets',
   '房间支持活动': 'Room Support Activities',
+  '奖励发放记录': 'Reward Grant Records',
   '代理活动历史': 'Agent Activity History',
   '现金邀请用户': 'Cash Invite Users',
   '邀请配置': 'Invite Configuration',

src/lang/messages/en.js

@@ -140,6 +140,7 @@ export default {
   '自定义名人堂': 'Custom Hall of Fame',
   '喇叭列表': 'Trumpet List',
   '房间支持活动': 'Room Support Activities',
+  '奖励发放记录': 'Reward Grant Records',
   '审批管理': 'Approval Management',
   '头像审核': 'Avatar Approval',
   '昵称审核': 'Nickname Approval',

src/router/index.js

@@ -914,6 +914,12 @@ export const mockRouters = [
         component: () => import('@/views/game/trumpet/index'),
         meta: { title: '喇叭列表', icon: 'form' }
       },
+      {
+        path: '/activity/reward-grant-record',
+        name: 'RewardGrantRecord',
+        component: () => import('@/views/activity/reward-grant-record/index'),
+        meta: { title: '奖励发放记录', icon: 'form' }
+      },
       {
         path: '/activity/room/contribution',
         name: 'ActivityRoomContribution',

src/views/activity/reward-grant-record/index.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="app-container reward-grant-record">
+    <div class="filter-container">
+      <el-select
+        v-model="listQuery.rewardType"
+        class="filter-item reward-type-select"
+        placeholder="奖励类型"
+        clearable
+      >
+        <el-option label="房间周流水奖励" value="ROOM_WEEKLY_CONTRIBUTION" />
+      </el-select>
+      <el-input
+        v-model.trim="listQuery.userAccount"
+        class="filter-item user-account-input"
+        clearable
+        placeholder="用户短ID或靓号"
+        @keyup.enter.native="handleSearch"
+      />
+      <el-button
+        :loading="searchLoading"
+        class="filter-item"
+        type="primary"
+        icon="el-icon-search"
+        @click="handleSearch"
+      >
+        搜索
+      </el-button>
+    </div>
+
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      element-loading-text="Loading"
+      fit
+      highlight-current-row
+    >
+      <el-table-column label="奖励类型" min-width="140" align="center">
+        <template slot-scope="scope">
+          {{ rewardTypeName(scope.row.rewardType) }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="用户信息" min-width="240">
+        <template slot-scope="scope">
+          <div v-if="scope.row.userProfile" class="profile-cell">
+            <avatar
+              :url="scope.row.userProfile.userAvatar"
+              :gender="scope.row.userProfile.userSex"
+              size="small"
+            />
+            <div class="profile-detail">
+              <div class="profile-name" :title="scope.row.userProfile.userNickname">
+                {{ scope.row.userProfile.userNickname || '-' }}
+              </div>
+              <div>短ID：{{ scope.row.userProfile.account || '-' }}</div>
+              <div>靓号：{{ specialAccount(scope.row.userProfile) }}</div>
+            </div>
+          </div>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="所属房间" min-width="240">
+        <template slot-scope="scope">
+          <div v-if="scope.row.roomProfile" class="profile-cell">
+            <el-image
+              class="room-cover"
+              :src="scope.row.roomProfile.roomCover"
+              :preview-src-list="scope.row.roomProfile.roomCover ? [scope.row.roomProfile.roomCover] : []"
+            >
+              <div slot="error" class="image-slot">
+                <i class="el-icon-picture-outline" />
+              </div>
+            </el-image>
+            <div class="profile-detail">
+              <div class="profile-name" :title="scope.row.roomProfile.roomName">
+                {{ scope.row.roomProfile.roomName || '-' }}
+              </div>
+              <div>房间ID：{{ scope.row.roomProfile.roomAccount || '-' }}</div>
+              <div>内部ID：{{ scope.row.roomProfile.id || '-' }}</div>
+            </div>
+          </div>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="房间流水" min-width="130" align="right">
+        <template slot-scope="scope">
+          {{ formatNumber(scope.row.roomContribution) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="发放金币数量" min-width="140" align="right">
+        <template slot-scope="scope">
+          {{ formatNumber(scope.row.rewardCoins) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="奖励周期" min-width="190" align="center">
+        <template slot-scope="scope">
+          {{ formatWeek(scope.row.dateNumber) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="发放时间" min-width="170" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.grantTime | parseTime }}
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="listQuery.cursor"
+      :limit.sync="listQuery.limit"
+      @pagination="renderData"
+    />
+  </div>
+</template>
+
+<script>
+import { pageRewardGrantRecord } from '@/api/activity'
+import Pagination from '@/components/Pagination'
+
+export default {
+  name: 'RewardGrantRecord',
+  components: { Pagination },
+  data() {
+    return {
+      list: [],
+      total: 0,
+      listLoading: false,
+      searchLoading: false,
+      listQuery: {
+        cursor: 1,
+        limit: 20,
+        rewardType: 'ROOM_WEEKLY_CONTRIBUTION',
+        userAccount: ''
+      }
+    }
+  },
+  created() {
+    this.renderData(true)
+  },
+  methods: {
+    renderData(isReset) {
+      if (isReset === true) {
+        this.listQuery.cursor = 1
+      }
+      this.listLoading = true
+      pageRewardGrantRecord(this.listQuery).then(res => {
+        const body = res.body || {}
+        this.total = body.total || 0
+        this.list = body.records || []
+      }).finally(() => {
+        this.listLoading = false
+        this.searchLoading = false
+      })
+    },
+    handleSearch() {
+      this.searchLoading = true
+      this.renderData(true)
+    },
+    rewardTypeName(type) {
+      return type === 'ROOM_WEEKLY_CONTRIBUTION' ? '房间周流水奖励' : type
+    },
+    specialAccount(userProfile) {
+      const specialId = userProfile && userProfile.ownSpecialId
+      return specialId && specialId.account ? specialId.account : '-'
+    },
+    formatNumber(value) {
+      if (value === null || value === undefined || value === '') {
+        return '-'
+      }
+      return Number(value).toLocaleString('en-US', { maximumFractionDigits: 2 })
+    },
+    formatWeek(dateNumber) {
+      const text = String(dateNumber || '')
+      if (!/^\d{8}$/.test(text)) {
+        return '-'
+      }
+      const monday = new Date(`${text.slice(0, 4)}-${text.slice(4, 6)}-${text.slice(6, 8)}T00:00:00`)
+      const sunday = new Date(monday.getTime())
+      sunday.setDate(sunday.getDate() + 6)
+      const format = date => [
+        date.getFullYear(),
+        String(date.getMonth() + 1).padStart(2, '0'),
+        String(date.getDate()).padStart(2, '0')
+      ].join('-')
+      return `${format(monday)} ~ ${format(sunday)}`
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.reward-type-select {
+  width: 210px;
+}
+
+.user-account-input {
+  width: 240px;
+}
+
+.profile-cell {
+  display: flex;
+  align-items: center;
+  min-height: 56px;
+}
+
+.profile-detail {
+  min-width: 0;
+  padding-left: 10px;
+  color: #606266;
+  font-size: 12px;
+  line-height: 19px;
+}
+
+.profile-name {
+  overflow: hidden;
+  color: #303133;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.room-cover {
+  flex: 0 0 48px;
+  width: 48px;
+  height: 48px;
+  border-radius: 4px;
+}
+</style>