Skip to content

C
company_app
提交 d06bcbbc 作者: 毛细亚
操作

更新代码

上级 aca54f16
正在显示 包含 435 行增加 和 4 行删除
src/assets/icon/svg/vip.svg 0 → 100644
<svg t="1678332723840" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2801" width="200" height="200"><path d="M897 47 122 47c-28.667 0-53.167 10-73.5 30S18 121.333 18 150l0 724c0 28.667 10.167 53 30.5 73s44.833 30 73.5 30l775 0c28.667 0 53-10 73-30s30-44.333 30-73L1000 150c0-18.667-4.5-36-13.5-52S965 69.5 949 60.5 915.667 47 897 47zM949 874c0 9.333-2.333 18-7 26s-11 14.333-19 19-16.667 7-26 7L122 926c-14.667 0-27-5.167-37-15.5S70 888 70 874L70 150c0-9.333 2.333-18 7-26s11-14.167 19-18.5 16.667-6.5 26-6.5l775 0c9.333 0 18 2.167 26 6.5s14.333 10.5 19 18.5 7 16.667 7 26L949 874zM256 678 138 377c-1.333-5.333-2-11.667-2-19 1.333-24 14.667-37.333 40-40 16 1.333 28 10.333 36 27l85 224 82-224c10-18 22.667-27 38-27 25.333 2.667 39.333 16 42 40-1.333 7.333-2.667 13.667-4 19L337 678c-10 18.667-23.333 28-40 28C277 706 263.333 696.667 256 678zM480 668 480 360c0-26.667 13.333-40.667 40-42 25.333 1.333 38.667 15.333 40 42l0 308c-1.333 25.333-14.667 38-40 38C493.333 706 480 693.333 480 668zM609 668 609 365c0-26.667 13.333-40.667 40-42l97 0c85.333 5.333 131 48 137 128-6 80-51 123-135 129l-59 0 0 88c-2 25.333-15.333 38-40 38C622.333 706 609 693.333 609 668zM689 394l0 114 54 0c34-1.333 52.333-20.333 55-57-2.667-35.333-21-54.333-55-57L689 394z" p-id="2802" ></path></svg>
\ No newline at end of file
src/store/modules/game.js
...@@ -16,7 +16,6 @@ const state = { ...@@ -16,7 +16,6 @@ const state = {
chatUserInfo: {}, // 当前选中的用户的详情 chatUserInfo: {}, // 当前选中的用户的详情
viewLoading:false, // 查看用户详情的时候 加载状态 viewLoading:false, // 查看用户详情的时候 加载状态
taskDetails: {}, // 任务详情 taskDetails: {}, // 任务详情
vipRoleInfo: {}, // VIP等级信息
// 任务数据 // 任务数据
taskData: { taskData: {
user_task: 0, user_task: 0,
...@@ -54,9 +53,6 @@ const mutations = { ...@@ -54,9 +53,6 @@ const mutations = {
...data, ...data,
lastUpdateTime: Date.now() lastUpdateTime: Date.now()
} }
},
set_vipRoleInfo(state, data) {
state.vipRoleInfo = data
} }
} }
......
src/views/components/quickSendGame/sendGame.vue
...@@ -253,6 +253,7 @@ export default { ...@@ -253,6 +253,7 @@ export default {
showLayer: false, showLayer: false,
showSendChannel: false, showSendChannel: false,
channelInfoList: {}, channelInfoList: {},
sendChatMessage:sendChatMessage,
transMemberStatus: true transMemberStatus: true
} }
}, },
......
src/views/components/quickSendGame/sendVipLevelPoster.vue 0 → 100644
<!--
* @Author: maoxiya 937667504@qq.com
* @Date: 2025-09-13 17:51:18
* @LastEditors: maoxiya 937667504@qq.com
* @LastEditTime: 2025-09-17 16:59:21
* @FilePath: /company_wx_frontend/src/views/works/component/chat/sendVipLevelPoster.vue
* @Description: VIP等级海报发送组件
-->
<template>
<div class="vipLevelPosterContainer">
<div class="vipLevelPosterIcon" v-if="currentLevel > 0">
<div class="vipLevelPosterContent">
<div class="poster-header">
<h4 class="poster-title">选择VIP等级海报</h4>
<p class="poster-subtitle">当前等级：SVIP{{ currentLevel }}，可发送SVIP{{ allowMaxLevel }}及以下等级海报</p>
</div>
<div class="vip-level-list">
<div
v-for="level in levelList"
:key="level"
class="vip-level-item"
:class="{
'disabled': level > allowMaxLevel
}"
@click="handleLevelClick(level)"
>
<div class="level-icon">
<svg-icon icon-class="vip" class="vip-icon" />
</div>
<div class="level-content">
<div class="level-text">SVIP{{ level }}</div>
<div class="level-desc" v-if="level <= allowMaxLevel">点击发送海报</div>
<div class="level-desc disabled-desc" v-else>等级不足</div>
</div>
<div class="level-action" v-if="level <= allowMaxLevel">
<div class="send-text" v-if="!sendLoading || currentSendingLevel !== level">发送</div>
<div class="loading-icon" v-if="sendLoading && currentSendingLevel === level">
<i class="el-icon-loading"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<noContent v-else />
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { marketingRoleGradeUrl,marketingMemberRoleGrade } from '@/api/game'
import noContent from '@/components/noContent.vue'
import { sendChatMessage } from '@/utils/index'
export default {
name: 'sendVipLevelPoster',
components: {
noContent
},
data() {
return {
visible: false,
sendLoading: false,
currentSendingLevel: null,
vipRoleInfo: {},
}
},
mounted() {
this.marketingMemberRoleGrade()
},
computed: {
...mapState('game', ['accountSelect']),
/**
* 获取当前用户的VIP等级
* @returns {number} 当前VIP等级，默认为0
*/
currentLevel() {
return Number(this.vipRoleInfo?.vip_level) || 0
},
/**
* 获取允许发送的最大等级（当前等级+1）
* @returns {number} 允许发送的最大等级
*/
allowMaxLevel() {
return Math.min(Number(this.currentLevel) + 1, 10)
},
/**
* 获取排序后的等级列表（从大到小）
* @returns {Array} 等级数组，从10到1
*/
levelList() {
const levels = []
for (let i = 10; i >= 1; i--) {
levels.push(i)
}
return levels
}
},
watch: {
accountSelect(newVal, oldVal) {
if(newVal && newVal !== ''){
this.marketingMemberRoleGrade()
}
}
},
methods: {
/**
* 处理等级点击事件 - 直接发送海报
* @param {number} level - 点击的等级
*/
async handleLevelClick(level) {
// 由于CSS的pointer-events: none已经阻止了禁用项的点击
// 这里只需要检查是否正在发送
if (this.sendLoading) {
return
}
try {
await this.sendPoster(level)
} catch (error) {
console.error('发送海报失败:', error)
// 确保在异常情况下也能重置状态
this.resetSendingState()
}
},
async marketingMemberRoleGrade() {
if(this.accountSelect && this.accountSelect !== ''){
const res = await marketingMemberRoleGrade({ member_id: this.accountSelect })
console.log(res, 'res')
if(res.data.data.role_id){
this.vipRoleInfo = res.data.data
// 将VIP信息存储到Vuex中，供其他组件使用
}else{
this.vipRoleInfo = {}
}
}
},
/**
* 重置发送状态
*/
resetSendingState() {
this.sendLoading = false
this.currentSendingLevel = null
},
/**
* 发送VIP等级海报
* @param {number} level - 要发送的等级
*/
async sendPoster(level) {
console.log(this.vipRoleInfo, 'this.vipRoleInfo')
if (!this.vipRoleInfo?.main_game_id || !this.vipRoleInfo?.weixin_blongs_id) {
this.$message.error('缺少必要的用户信息，无法发送海报')
return
}
// 设置发送状态
this.sendLoading = true
this.currentSendingLevel = level
try {
const params = {
main_game_id: this.vipRoleInfo.main_game_id,
weixin_blongs_id: this.vipRoleInfo.weixin_blongs_id,
vip_level: level
}
const res = await marketingRoleGradeUrl(params)
if (res.status_code === 1 && res?.data?.data?.url) {
this.$message({
message: res.msg || `SVIP${level}等级海报发送成功`,
type: 'success'
})
sendChatMessage(res.data.data.url || '', 'image')
// 发送成功后关闭弹窗
this.visible = false
} else {
// 处理接口返回失败的情况
this.$message({
message: res.msg || res.msg || 'VIP等级海报发送失败',
type: 'error'
})
}
} catch (error) {
console.error('发送VIP等级海报失败:', error)
// 处理不同类型的错误
let errorMessage = '发送失败，请稍后重试'
if (error && error.message) {
errorMessage = error.message
} else if (typeof error === 'string') {
errorMessage = error
}
this.$message({
message: errorMessage,
type: 'error'
})
} finally {
// 无论成功还是失败，都重置状态
this.resetSendingState()
}
}
},
}
</script>
<style scoped lang="scss">
.vipLevelPosterContainer{
width: 100%;
height: 100%;
}
.vipLevelPosterIcon {
width: 100%;
height: 100%;
font-size: 20px;
&__icon {
font-size: 23px;
margin-left: 20px;
position: relative;
top: 2px;
cursor: pointer;
color: #8CA4BA;
transition: color 0.3s ease;
&:hover {
color: #3491FA;
}
}
}
.vipLevelPosterContent {
padding: 0;
width: 100%;
height: 100%;
.poster-header {
padding: 16px 16px 12px;
border-bottom: 1px solid #f0f0f0;
background: linear-gradient(135deg, #f8faff 0%, #f0f7ff 100%);
.poster-title {
margin: 0 0 8px 0;
font-size: 16px;
font-weight: 600;
color: #333;
display: flex;
align-items: center;
&::before {
content: '';
width: 4px;
height: 16px;
background: #3491FA;
border-radius: 2px;
margin-right: 8px;
}
}
.poster-subtitle {
margin: 0;
font-size: 12px;
color: #666;
line-height: 1.4;
}
}
.vip-level-list {
padding: 8px 0;
height: 100%;
overflow-y: auto;
.vip-level-item {
display: flex;
align-items: center;
padding: 8px 16px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
background: #fff;
border-bottom: 1px solid #f5f5f5;
position: relative;
min-height: 48px;
overflow: hidden;
&:last-child {
border-bottom: none;
}
// 禁用状态 - 优先级最高
&.disabled {
cursor: not-allowed !important;
opacity: 0.5 !important;
background: #fafafa !important;
pointer-events: none !important; // 阻止所有鼠标事件
.level-text {
color: #999 !important;
}
.level-desc.disabled-desc {
color: #999 !important;
}
.vip-icon {
color: #999 !important;
}
// 禁用状态下的伪元素
&::before {
display: none !important;
}
}
// 正常状态的悬停效果 - 只在非禁用状态下生效
&:not(.disabled):hover {
background: linear-gradient(135deg, #e8f8f3 0%, #d4f1e3 100%);
.level-icon .vip-icon {
transform: scale(1.05);
}
.send-text {
font-weight: 600;
}
&::before {
opacity: 1;
width: 3px;
}
}
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0;
background: #3491FA;
transition: all 0.3s ease;
opacity: 0;
}
.level-icon {
margin-right: 12px;
flex-shrink: 0;
.vip-icon {
font-size: 25px;
color: #3491FA;
transition: all 0.3s ease;
}
}
.level-content {
flex: 1;
.level-text {
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 2px;
transition: color 0.3s ease;
}
.level-desc {
font-size: 11px;
color: #999;
transition: color 0.3s ease;
line-height: 1.2;
&.disabled-desc {
color: #ccc;
}
}
}
.level-action {
margin-left: 8px;
flex-shrink: 0;
min-width: 32px;
display: flex;
align-items: center;
justify-content: center;
.send-text {
font-size: 12px;
color: #3491FA;
font-weight: 500;
transition: all 0.3s ease;
white-space: nowrap;
}
.loading-icon {
.el-icon-loading {
font-size: 14px;
color: #3491FA;
animation: rotating 2s linear infinite;
}
}
}
}
}
}
@keyframes rotating {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<style lang="scss">
.vip-level-popover {
padding: 0 !important;
border-radius: 12px !important;
box-shadow: 0 8px 32px rgba(0, 191, 138, 0.15) !important;
border: 1px solid #e8e8e8 !important;
}
</style>
\ No newline at end of file
src/views/quickSendGame.vue
...@@ -20,6 +20,12 @@ ...@@ -20,6 +20,12 @@
> >
<sendQrCode v-if="activeName === 'sendQrCode'"/> <sendQrCode v-if="activeName === 'sendQrCode'"/>
</el-tab-pane> --> </el-tab-pane> -->
<el-tab-pane
label="发送 SVIP 海报"
name="sendVipPoster"
>
<sendVipPoster v-if="activeName === 'sendVipPoster'"/>
</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</div> </div>
...@@ -30,12 +36,14 @@ import vipTools from './components/quickSendGame/vipTools.vue' ...@@ -30,12 +36,14 @@ import vipTools from './components/quickSendGame/vipTools.vue'
import sendGame from './components/quickSendGame/sendGame.vue' import sendGame from './components/quickSendGame/sendGame.vue'
import { mapActions } from 'vuex' import { mapActions } from 'vuex'
import sendQrCode from './components/quickSendGame//ServiceMessageDialog.vue' import sendQrCode from './components/quickSendGame//ServiceMessageDialog.vue'
import sendVipPoster from './components/quickSendGame/sendVipLevelPoster.vue'
export default { export default {
name: 'quickSendGame', name: 'quickSendGame',
components: { components: {
vipTools, vipTools,
sendGame, sendGame,
sendQrCode, sendQrCode,
sendVipPoster,
}, },
data() { data() {
return { return {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论