提交 7e6be5e2 作者: 毛细亚

更新企微礼包发送记录

上级 d8d822ea
<template> <template>
<div v-loading="loading" class="wx-gift-container"> <div v-loading="loading" class="wx-gift-container">
<div ref="giftList" class="gift-list" @scroll="handleScroll"> <div ref="giftList" class="gift-list" @scroll="handleScroll">
<div v-for="item in giftList" :key="item._id" class="gift-item"> <div v-for="item in giftList" :key="item._id" class="gift-item">
<div class="gift-info"> <div class="gift-info">
<div v-if="item.gift_package_group_name ">分组: {{ item.gift_package_group_name }}</div> <div v-if="item.gift_package_group_name">分组: {{ item.gift_package_group_name }}</div>
<div>礼包名称: {{ item.gift_package_name }}</div> <div>礼包名称: {{ item.gift_package_name }}</div>
<div>发送时间: {{ item.send_time }}</div> <div>发送时间: {{ item.send_time }}</div>
<div>礼包码: {{ item.code }}</div> <div>礼包码: {{ item.code }}</div>
<div>领取角色: {{ item.role_name }}({{ item.rule_id }})</div>
<div>W 账号: {{ item.username || '-' }}</div>
<div class="rowFlex spaceBetween columnCenter gift-sender"> <div class="rowFlex spaceBetween columnCenter gift-sender">
<div>发送客服: {{ item.cser_name }}</div> <div>发送客服: {{ item.cser_name }}</div>
<i class="el-icon-document-copy" style="cursor: pointer;" @click="handleCopy(item.code)"></i> <i class="el-icon-document-copy" style="cursor: pointer;" @click="handleCopy(item.code)"></i>
</div> </div>
</div> </div>
</div> </div>
<div v-if="loading" class="loading-more">加载中...</div> <div v-if="loading" class="loading-more">加载中...</div>
<div v-if="!hasMore && giftList.length > 0" class="no-more">没有更多数据了</div> <div v-if="!hasMore && giftList.length > 0" class="no-more">没有更多数据了</div>
<div v-if="giftList.length == 0" class="noContent rowFlex allCenter"> <div v-if="giftList.length == 0" class="noContent rowFlex allCenter">
<noContent/> <noContent />
</div>
</div> </div>
</div> </div>
</template> </div>
</template>
<script>
<script>
import Clipboard from 'clipboard' import Clipboard from 'clipboard'
import { getSendingCodeList } from '@/api/works' import { getSendingCodeList } from '@/api/works'
import { debounce,copyText,sendChatMessage } from '@/utils/index' import { debounce, copyText, sendChatMessage } from '@/utils/index'
import { mapState } from 'vuex' import { mapState } from 'vuex'
export default { export default {
name: 'wxGift', name: 'wxGift',
data() { data() {
return { return {
loading: false, loading: false,
giftList: [], giftList: [],
page: 1, page: 1,
pageSize: 20, pageSize: 20,
hasMore: true hasMore: true
} }
}, },
computed: { computed: {
...mapState('game', ['chatUserInfo']) ...mapState('game', ['chatUserInfo'])
}, },
created() { created() {
console.log(this.chatUserInfo, 'chatUserInfo') console.log(this.chatUserInfo, 'chatUserInfo')
this.fetchGiftList() this.fetchGiftList()
}, },
methods: { methods: {
async fetchGiftList() { async fetchGiftList() {
if (this.loading || !this.hasMore) return if (this.loading || !this.hasMore) return
this.loading = true this.loading = true
try { try {
const params = { const params = {
page: this.page, page: this.page,
page_size: this.pageSize, page_size: this.pageSize,
corp_id: this.chatUserInfo.corp_id, corp_id: this.chatUserInfo.corp_id,
userid: this.chatUserInfo.userid || this.chatUserInfo.user.userid, userid: this.chatUserInfo.userid || this.chatUserInfo.user.userid,
external_userid: this.chatUserInfo.external_userid || this.chatUserInfo.external_user.external_userid external_userid: this.chatUserInfo.external_userid || this.chatUserInfo.external_user.external_userid
}
const res = await getSendingCodeList(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
} }
}, const res = await getSendingCodeList(params)
handleScroll: debounce(function(e) { if (res.data && res.data.data) {
const { scrollHeight, scrollTop, clientHeight } = e.target this.giftList = this.page === 1 ? res.data.data : [...this.giftList, ...res.data.data]
if (scrollHeight - scrollTop - clientHeight < 50) { this.hasMore = res.data.data.length === this.pageSize
this.fetchGiftList() this.page++
} }
}, 500), } catch (error) {
handleCopy(code) { console.error('获取礼包列表失败:', error)
console.log(code, 'code') } finally {
copyText('giftCodeText', this) this.loading = false
sendChatMessage(code, 'text')
// const clipboard = new Clipboard('.')
// clipboard.on('success', e => {
// this.$message.success('复制成功')
// // 释放内存
// clipboard.destroy()
// })
} }
},
handleScroll: debounce(function (e) {
const { scrollHeight, scrollTop, clientHeight } = e.target
if (scrollHeight - scrollTop - clientHeight < 50) {
this.fetchGiftList()
}
}, 500),
handleCopy(code) {
console.log(code, 'code')
copyText('giftCodeText', this)
sendChatMessage(code, 'text')
// const clipboard = new Clipboard('.')
// clipboard.on('success', e => {
// this.$message.success('复制成功')
// // 释放内存
// clipboard.destroy()
// })
} }
} }
</script> }
</script>
<style lang="scss" scoped>
.wx-gift-container { <style lang="scss" scoped>
height: 100%; .wx-gift-container {
width: 100%; height: 100%;
background-color: #fff; 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 { .gift-list {
padding: 5px 12px; height: 100%;
border: 1px solid #dcdfe6; overflow-y: auto;
border-radius: 4px; padding: 10px;
font-size: 13px;
color: #606266;
&:hover { .gift-item {
color: #409eff; padding: 16px;
border-color: #c6e2ff; background: #F7F8FA;
background-color: #ecf5ff; border-radius: 12px;
} border: 1px solid #E5E6EB;
} margin-bottom: 12px;
}
.gift-sender { .gift-info {
font-family: PingFangSC, PingFang SC; div {
font-weight: 400; line-height: 26px;
font-size: 12px; }
color: #4E5969;
line-height: 18px; .gift-name {
text-align: justify; font-weight: 400;
font-style: normal; font-size: 14px;
i{ color: #4E5969;
color: #00BF8A; text-align: left;
font-size: 14px; 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;
} }
} }
}
.loading-more,
.no-more, .gift-sender {
.empty-data { font-family: PingFangSC, PingFang SC;
text-align: center; font-weight: 400;
padding: 16px; font-size: 12px;
color: #999999; color: #4E5969;
font-size: 13px; 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 </style>
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论