feat: 新增角色礼包列表及展示功能

src/api/works.js

@@ -300,3 +300,11 @@ export function getMemberInfoApi(data) {
     data,
   });
 }
+// 角色礼包列表
+export function getRoleSendingCodeList(data) {
+  return request({
+    url: returnApi('/corp_gift_package_list/getRoleSendingCodeList'),
+    method: 'post',
+    data,
+  });
+}
\ No newline at end of file

src/views/components/giftRecord/roleGift.vue

+<template>
+  <div v-loading="loading" class="role-gift-container">
+    <div ref="giftList" class="gift-list" @scroll="handleScroll">
+      <div v-for="item in giftList" :key="item._id" class="gift-item">
+        <div class="gift-info">
+          <div v-if="item.gift_package_group_name ">分组: {{ item.gift_package_group_name }}</div>
+          <div>礼包名称: {{ item.gift_package_name }}</div>
+          <div>发送时间: {{ item.send_time }}</div>
+          <div>礼包码: {{ item.code }}</div>
+          <div>领取角色: <span v-if="item.role_name">{{ item.role_name }}</span> <span v-else>-</span> </div>
+          <div>W 账号: {{ item.username || '-' }}</div>
+          <div class="rowFlex spaceBetween columnCenter gift-sender">
+            <div>发送客服: {{ item.cser_name || '自助链接' }}</div>
+            <i class="el-icon-document-copy" style="cursor: pointer;" @click="handleCopy(item.code)"></i>
+          </div>
+        </div>
+      </div>
+      <div v-if="loading" class="loading-more">加载中...</div>
+      <div v-if="!hasMore && giftList.length > 0" class="no-more">没有更多数据了</div>
+      <div v-if="giftList.length == 0" class="noContent rowFlex allCenter">
+        <svg-icon icon-class="noContent" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getRoleSendingCodeList } from '@/api/works'
+import { debounce } from '@/utils/index'
+import { mapState } from 'vuex'
+export default {
+  name: 'roleGift',
+  data() {
+    return {
+      loading: false,
+      giftList: [],
+      page: 1,
+      pageSize: 20,
+      hasMore: true
+    }
+  },
+  computed: {
+    ...mapState('game', ['accountSelect'])
+  },
+  created() {
+    if(this.accountSelect && this.accountSelect !== ''){
+      this.fetchGiftList()
+    } else {
+      this.$message.warning('请先关联W账号!')
+    }
+  },
+  methods: {
+    async fetchGiftList() {
+      if (this.loading || !this.hasMore) return
+      this.loading = true
+      try {
+        const params = {
+          page: this.page,
+          page_size: this.pageSize,
+          member_id: this.accountSelect
+        }
+        const res = await getRoleSendingCodeList(params)
+        if (res.data && res.data.data) {
+          this.giftList = this.page === 1 ? res.data.data : [...this.giftList, ...res.data.data]
+          this.hasMore = res.data.data.length === this.pageSize
+          this.page++
+        }
+      } catch (error) {
+        console.error('获取礼包列表失败：', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleScroll: debounce(function(e) {
+      const { scrollHeight, scrollTop, clientHeight } = e.target
+      if (scrollHeight - scrollTop - clientHeight < 50) {
+        this.fetchGiftList()
+      }
+    }, 500),
+    handleCopy(code) {
+      this.$copyText(code).then(() => {
+        this.$message.success('复制成功')
+      }).catch(() => {
+        this.$message.error('复制失败')
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.role-gift-container {
+    height: calc(100vh - 70px);
+    width: 100%;
+    background-color: #fff;
+
+    .gift-list {
+        height: 100%;
+        overflow-y: auto;
+        padding: 10px;
+
+        .gift-item {
+            padding: 16px;
+            background: #F7F8FA;
+            border-radius: 12px;
+            border: 1px solid #E5E6EB;
+            margin-bottom:12px;
+            .gift-info {
+              div{
+                line-height: 26px;
+              }
+                .gift-name {
+                    font-weight: 400;
+                    font-size: 14px;
+                    color: #4E5969;
+                    text-align: left;
+                    font-style: normal;
+                }
+                .gift-code {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    border-radius: 4px;
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 500;
+                    font-size: 14px;
+                    color: #323335;
+                    text-align: justify;
+                    font-style: normal;
+                    span {
+                        color: #323335;
+                        font-size: 14px;
+                        font-family: PingFangSC-Medium;
+                    }
+
+                    .el-button {
+                        padding: 5px 12px;
+                        border: 1px solid #dcdfe6;
+                        border-radius: 4px;
+                        font-size: 13px;
+                        color: #606266;
+
+                        &:hover {
+                            color: #409eff;
+                            border-color: #c6e2ff;
+                            background-color: #ecf5ff;
+                        }
+                    }
+                }
+
+                .gift-sender {
+                    font-family: PingFangSC, PingFang SC;
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: #4E5969;
+                    line-height: 18px;
+                    text-align: justify;
+                    font-style: normal;
+                    i{
+                        color: #00BF8A;
+                        font-size: 14px;
+                    }
+                }
+            }
+        }
+
+        .loading-more,
+        .no-more,
+        .empty-data {
+            text-align: center;
+            padding: 16px;
+            color: #999999;
+            font-size: 13px;
+        }
+    }
+}
+</style>
\ No newline at end of file

src/views/giftRecord.vue

+<!--
+ * @Author: 金多虾 937667504@qq.com
+ * @Date: 2025-09-08 10:15:29
+ * @LastEditors: 金多虾 937667504@qq.com
+ * @LastEditTime: 2025-12-10 14:52:24
+ * @FilePath: /company_app/src/views/giftRecord.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
   <div class="gift-tab-container-apply-gift">
     <el-tabs v-model="activeTab">
@@ -7,18 +15,23 @@
       <el-tab-pane label="企微礼包" name="wx">
         <wx-gift v-if="activeTab == 'wx'"></wx-gift>
       </el-tab-pane>
+      <el-tab-pane label="角色礼包" name="role">
+        <role-gift v-if="activeTab === 'role'"></role-gift>
+      </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 <script>
 import EmailGift from './components/giftRecord/emailGift.vue'
 import WxGift from './components/giftRecord/wxGift.vue'
+import RoleGift from './components/giftRecord/roleGift.vue'
 import { mapActions } from 'vuex'
 export default {
   name: 'giftRecord',
   components: {
     EmailGift,
-    WxGift
+    WxGift,
+    RoleGift
   },
   created() {
     this.initializeWecom()