优化组件样式与交互

src/components/getRoleList.vue

+<!--
+# getRoleList 传入 member_id 获取角色列表
+
+-->
+
+<template>
+    <el-select v-model="selectedValue" placeholder="请选择" clearable size="small" :style="{ width: width || '100%' }"
+        v-bind="$attrs" :clearable="false" filterable remote :remote-method="remoteMethod" @clear="handleClear"
+        v-on="$listeners" @change="handleChange" @visible-change="handleVisibleChange">
+        <div class="select-dropdown" @scroll="handleScroll">
+            <el-option v-for="item in RuleList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            <div v-if="loading" v-loading="true" class="loading-more">
+                加载中...
+            </div>
+        </div>
+    </el-select>
+</template>
+
+<script lang="jsx">
+import { getRoleHoLo } from '@/api/game'
+import { debounce } from '@/utils'
+export default {
+    name: 'getRoleList',
+    props: {
+        member_id: {
+            type: [String, Number],
+            default: ''
+        },
+        value: {
+            type: [String, Number],
+            default: ''
+        },
+        width: {
+            type: [String, Number],
+            default: ''
+        }
+
+    },
+    data() {
+        return {
+            RuleList: [],
+            loading: false,
+            currentPage: 1,
+            hasMore: true,
+            searchQuery: '',
+            selectedValue: this.value,
+            _debouncedRemote: null
+        }
+    },
+    watch: {
+        value(newVal) {
+            this.selectedValue = newVal
+        },
+        member_id(newVal) {
+            this.getRuleList()
+        }
+    },
+    created() {
+        this.getRuleList()
+    },
+    methods: {
+        async getRuleList(isLoadMore = false, query) {
+            // 仅在加载更多时受 hasMore 限制；新检索应始终允许
+            if (this.loading || (isLoadMore && !this.hasMore)) return
+
+            try {
+                this.loading = true
+                const keyword = typeof query === 'string' ? query : this.searchQuery
+                if (!isLoadMore) {
+                    // 新检索时记录关键字
+                    this.searchQuery = keyword || ''
+                }
+                const res = await getRoleHoLo({
+                    page: isLoadMore ? this.currentPage + 1 : 1,
+                    page_size: 20,
+                    api_search_name: keyword,
+                    search_type: 'list',
+                    member_id: this.member_id
+                })
+                if (res.status_code === 1 && res.data && res.data.data) {
+                    res.data.data.forEach(item => {
+                        item.server_name ? item.label = `${item.role_name} - ${item.server_name}` : item.label = item.role_name
+                        item.value = item.role_id
+                    })
+                    if (isLoadMore) {
+                        this.RuleList = [...this.RuleList, ...res.data.data]
+                        this.currentPage++
+                    } else {
+                        this.RuleList = res.data.data
+                        this.currentPage = 1
+                    }
+                    this.hasMore = res.data.data.length >= 20
+                } else {
+                    this.$message.warning(res.data.msg)
+                }
+            } catch (error) {
+                this.$message.error('获取数据失败')
+            } finally {
+                this.loading = false
+            }
+        },
+        handleScroll(e) {
+            const { scrollTop, scrollHeight, clientHeight } = e.target
+            if (scrollHeight - scrollTop - clientHeight < 50 && this.hasMore) {
+                this.getRuleList(true, this.searchQuery)
+            }
+        },
+
+        handleClear() {
+            this.selectedValue = ''
+            this.searchQuery = ''
+            this.$emit('clear')
+        },
+        handleChange() {
+            const roleInfo = this.RuleList.find(item => item.value === this.selectedValue)
+            this.$emit('selectChange', roleInfo)
+        },
+        handleVisibleChange(visible) {
+            // if (visible) {
+            //   this.getRuleList()
+            // }
+        },
+        remoteMethod(query) {
+            if (!this._debouncedRemote) {
+                this._debouncedRemote = debounce((q) => {
+                    this.getRuleList(false, q)
+                }, 300)
+            }
+            this._debouncedRemote(query)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.select-dropdown {
+    max-height: 300px;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+        width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: #e4e7ed;
+        border-radius: 3px;
+    }
+}
+
+.loading-more {
+    text-align: center;
+    padding: 5px 0;
+}
+</style>
\ No newline at end of file

src/views/components/quickSendGame/giftCodeDialog.vue

+<!--
+ * @Author: maoxiya 937667504@qq.com
+ * @Date: 2025-08-28 15:59:46
+ * @LastEditors: maoxiya 937667504@qq.com
+ * @LastEditTime: 2025-08-30 11:35:36
+ * @FilePath: /company_wx_frontend/src/views/works/component/chat/giftCodeDialog.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+    <el-dialog title="礼包码" :visible="dialogVisible" class="giftCodeDialogForm" width="500px" @close="closeDialog">
+        <el-form :model="form" ref="giftCodeDialogForm" label-width="120px" :rules="rules">
+            <el-form-item label="账号ID" prop="member_id">
+                <el-select style="width: 320px;" :clearable="false" @change="handleMemberIdChange"
+                    v-model="form.member_id" placeholder="请选择账号ID">
+                    <el-option v-for="item in bindGameUserList" :key="item.value" :label="item.label"
+                        :value="item.value" />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="角色ID" prop="role_id">
+                <getRoleList v-model="form.role_id" width="320px" placeholder="请选择角色" :member_id="form.member_id"
+                    @selectChange="handleSelectionChange" />
+            </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button @click="closeDialog">取消</el-button>
+            <el-button type="primary" @click="getGiftCodeSubmit('send')">确定</el-button>
+            <el-button type="text" @click="getGiftCodeSubmit('copy')">仅复制</el-button>
+        </div>
+    </el-dialog>
+</template>
+<script>
+import getRoleList from '@/components/getRoleList.vue'
+import { getRoleHoLo } from '@/api/game'
+import { mapState } from 'vuex'
+export default {
+    props: {
+        dialogVisible: {
+            type: Boolean,
+            default: false
+        }
+    },
+    components: {
+        getRoleList
+    },
+    data() {
+        return {
+            form: {
+                member_id: '',
+                username: '',
+                role_id: '',
+                role_name: '',
+            },
+            rules: {
+                member_id: [{ required: true, message: '请选择账号ID', trigger: 'change' }],
+                role_id: [{ required: true, message: '请选择角色ID', trigger: 'change' }]
+            },
+            getRoleHoLo: getRoleHoLo,
+            gift_code: [],
+            roleList: [],
+            pageInfo: {
+                page: 1,
+                page_size: 10
+            },
+            loading: false
+        }
+    },
+    mounted() {
+        this.form.member_id = this.accountSelect
+        this.form.username = this.bindGameUserList.find(item => item.member_id === this.accountSelect).username
+    },
+    computed: {
+        ...mapState('game', ['accountSelect', 'bindGameUserList'])
+    },
+    methods: {
+        handleMemberIdChange(value) {
+            this.form.role_id = ''
+            this.form.role_name = ''
+            const userInfo = this.bindGameUserList.find(item => item.value === value)
+            this.form.username = userInfo.label || userInfo.username
+            this.form.member_id = value
+        },
+        handleSelectionChange(roleInfo) {
+            console.log(roleInfo, 'roleInfo')
+            this.form.role_name = roleInfo.label || ''
+        },
+        closeDialog() {
+            this.$emit('update:dialogVisible', false)
+        },
+        getGiftCodeSubmit(type) {
+            this.$refs.giftCodeDialogForm.validate((valid) => {
+                if (valid) {
+                    this.$emit('update:dialogVisible', false)
+                    this.$emit('result', this.form, type)
+                }
+            })
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.giftCodeDialogForm {
+    .dialog-footer {
+        border: none;
+        padding: 0;
+    }
+}
+</style>
\ No newline at end of file

src/views/components/quickSendGame/vipTools.vue

@@ -59,12 +59,14 @@
         </el-collapse>
       </el-collapse-transition>
     </div>
+    <giftCodeDialog ref="giftCodeDialog" :dialogVisible="dialogVisible" @result="getGiftCodeSubmit" />
   </div>
 </template>
 <script>
 import { mapState, mapMutations } from 'vuex'
 import { passwardEncryption, createVipUrl } from '@/api/game'
 import { giftCodeList, sendGiftCode, getZyouAuthLink } from '@/api/works'
+import giftCodeDialog from './giftCodeDialog.vue'
 export default {
   name: 'vipTools',
   data() {