Skip to content

C
company_app
提交 7e6be5e2 作者: 毛细亚
操作

更新企微礼包发送记录

上级 d8d822ea
正在显示 包含 162 行增加 和 155 行删除
src/views/components/giftRecord/wxGift.vue
<template>
<div v-loading="loading" class="wx-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 v-loading="loading" class="wx-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>领取角色: {{ item.role_name }}({{ item.rule_id }})</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">
<noContent/>
</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">
<noContent />
</div>
</div>
</template>
<script>
</div>
</template>
<script>
import Clipboard from 'clipboard'
import { getSendingCodeList } from '@/api/works'
import { debounce,copyText,sendChatMessage } from '@/utils/index'
import { mapState } from 'vuex'
export default {
name: 'wxGift',
data() {
return {
loading: false,
giftList: [],
page: 1,
pageSize: 20,
hasMore: true
}
},
computed: {
...mapState('game', ['chatUserInfo'])
},
created() {
console.log(this.chatUserInfo, 'chatUserInfo')
this.fetchGiftList()
},
methods: {
async fetchGiftList() {
if (this.loading || !this.hasMore) return
this.loading = true
try {
const params = {
page: this.page,
page_size: this.pageSize,
corp_id: this.chatUserInfo.corp_id,
userid: this.chatUserInfo.userid || this.chatUserInfo.user.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
import { getSendingCodeList } from '@/api/works'
import { debounce, copyText, sendChatMessage } from '@/utils/index'
import { mapState } from 'vuex'
export default {
name: 'wxGift',
data() {
return {
loading: false,
giftList: [],
page: 1,
pageSize: 20,
hasMore: true
}
},
computed: {
...mapState('game', ['chatUserInfo'])
},
created() {
console.log(this.chatUserInfo, 'chatUserInfo')
this.fetchGiftList()
},
methods: {
async fetchGiftList() {
if (this.loading || !this.hasMore) return
this.loading = true
try {
const params = {
page: this.page,
page_size: this.pageSize,
corp_id: this.chatUserInfo.corp_id,
userid: this.chatUserInfo.userid || this.chatUserInfo.user.userid,
external_userid: this.chatUserInfo.external_userid || this.chatUserInfo.external_user.external_userid
}
},
handleScroll: debounce(function(e) {
const { scrollHeight, scrollTop, clientHeight } = e.target
if (scrollHeight - scrollTop - clientHeight < 50) {
this.fetchGiftList()
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++
}
}, 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()
// })
} 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) {
console.log(code, 'code')
copyText('giftCodeText', this)
sendChatMessage(code, 'text')
// const clipboard = new Clipboard('.')
// clipboard.on('success', e => {
// this.$message.success('复制成功')
// // 释放内存
// clipboard.destroy()
// })
}
}
</script>
<style lang="scss" scoped>
.wx-gift-container {
height: 100%;
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;
}
}
</script>
<style lang="scss" scoped>
.wx-gift-container {
height: 100%;
width: 100%;
background-color: #fff;
.el-button {
padding: 5px 12px;
border: 1px solid #dcdfe6;
border-radius: 4px;
font-size: 13px;
color: #606266;
.gift-list {
height: 100%;
overflow-y: auto;
padding: 10px;
&:hover {
color: #409eff;
border-color: #c6e2ff;
background-color: #ecf5ff;
}
}
}
.gift-item {
padding: 16px;
background: #F7F8FA;
border-radius: 12px;
border: 1px solid #E5E6EB;
margin-bottom: 12px;
.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;
}
}
.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;
}
}
.loading-more,
.no-more,
.empty-data {
text-align: center;
padding: 16px;
color: #999999;
font-size: 13px;
}
.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
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论