Skip to content

C
company_app
提交 68c68c31 作者: 毛细亚
操作

合并分支 'release' 到 'master' 

发送等级海报成功

查看合并请求 !22
上级 2d5183f3 e33cccf2
正在显示 包含 733 行增加 和 12 行删除
src/api/game.js
......@@ -1338,3 +1338,61 @@ export function getRoleRecentActivityNotPushNumApi(data) {
});
});
}
// 获取 w 账号下的等级最高的角色
export function marketingMemberRoleGrade(data) {
return new Promise((resolve, reject) => {
cross_systemRequest({
system: 'zhangyou',
api: '/api/marketing_role_grade/marketingMemberRoleGrade',
params: data
}).then((res) => {
resolve(res)
}).catch((error) => {
reject(error)
})
})
}
// 获取角色对应的vip等级
export function marketingRoleGrade(data) {
return new Promise((resolve, reject) => {
cross_systemRequest({
system: 'zhangyou',
api: '/api/marketing_role_grade/marketingRoleGrade',
params: data
}).then((res) => {
resolve(res)
}).catch((error) => {
reject(error)
})
})
}
// VIP 等级权益
export function marketingRoleGradeBenefit(data) {
return new Promise((resolve, reject) => {
cross_systemRequest({
system: 'zhangyou',
api: '/api/marketing_role_grade/marketingRoleGradeBenefit',
params: data
}).then((res) => {
resolve(res)
}).catch((error) => {
reject(error)
})
})
}
// 发送vip等级海报链接
export function marketingRoleGradeUrl(data) {
return new Promise((resolve, reject) => {
cross_systemRequest({
system: 'zhangyou',
api: '/api/marketing_role_grade/marketingRoleGradeUrl',
params: data
}).then((res) => {
resolve(res)
}).catch((error) => {
reject(error)
})
})
}
\ No newline at end of file
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/views/components/quickSendGame/sendGame.vue
......@@ -200,7 +200,7 @@ import {
} from '@/api/game'
import { getRecentSendLog, markTransScene, getZqCserGroup, getZqCserWxBelong, getMediaId, send_log_add } from '@/api/works'
import { companyviewConfig } from '@/api/user'
import { throttle, throttleStart, sendChatMessage } from '@/utils/index'
import { throttle, throttleStart } from '@/utils/index'
import createChannel from './sendGame/createChannel'
import sendPage from './sendGame/SendTransPage.vue'
import SendTransWxGame from './sendGame/SendTransWxGame.vue'
......
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 17:24:06
* @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) {
sendChatMessage(res.data.data.url || '', 'image')
setTimeout(() => {
this.$message({
message: res.msg || `SVIP${level}等级海报发送成功`,
type: 'success'
})
}, 2000);
// 发送成功后关闭弹窗
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/components/roleInfo/roleInfoPanel.vue
......@@ -35,6 +35,7 @@
? items.recharge_total + '元'
: '0元'
}}</span>
<vip-level :role-info="items" />
</div>
</div>
<div class="flex-1 h-0 flex justify-end items-start pt-[10px]">
......@@ -143,17 +144,19 @@
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
import { getRoleHoLo } from '@/api/game';
import { getRoleHoLo,marketingRoleGrade } from '@/api/game';
import noContent from '@/components/noContent.vue';
import appeal from './layer/appeal.vue';
import watchMember from '@/mixins/watchMember';
import { createDetails } from '@/views/popup/RecentActivitiesPopup/index.js';
import { createRoleRecentActivityNotPushNum } from '@/views/hooks/useGetCount.js';
import vipLevel from '@/views/userInfo/components/gameInfo/vipLevel.vue';
export default {
name: 'roleInfo',
components: {
noContent,
appeal,
vipLevel,
},
data() {
return {
......@@ -205,6 +208,28 @@ export default {
this
);
},
async handleRoleListLevel(roleList){
try {
const role_id_list = roleList.map((item) => item.role_id)
const res = await marketingRoleGrade({role_id:role_id_list})
if(res.status_code == 1 && res?.data?.data?.length > 0){
const levelList = res.data.data
roleList.forEach((item) => {
const levelItem = levelList.find((level) => level.role_id == item.role_id)
if(levelItem){
item.vip_level = levelItem.vip_level
}
})
}
} catch (error) {
console.log(error)
} finally {
this.roleList = roleList.sort((a, b) => {
return Number(b.recharge_total) - Number(a.recharge_total)
})
}
},
handleChange() { },
memberChange() {
this.requestRoleList();
......@@ -231,9 +256,7 @@ export default {
this.loading = false;
if (res.status_code == 1) {
if (res.data.data.length > 0) {
this.roleList = res.data.data.sort((a, b) => {
return Number(b.recharge_total) - Number(a.recharge_total);
});
this.handleRoleListLevel(res.data.data)
} else {
this.roleList = [];
}
......
src/views/quickSendGame.vue
......@@ -20,6 +20,12 @@
>
<sendQrCode v-if="activeName === 'sendQrCode'"/>
</el-tab-pane> -->
<el-tab-pane
label="发送 SVIP 海报"
name="sendVipPoster"
>
<sendVipPoster v-if="activeName === 'sendVipPoster'"/>
</el-tab-pane>
</el-tabs>
</div>
</div>
......@@ -30,12 +36,14 @@ import vipTools from './components/quickSendGame/vipTools.vue'
import sendGame from './components/quickSendGame/sendGame.vue'
import { mapActions } from 'vuex'
import sendQrCode from './components/quickSendGame//ServiceMessageDialog.vue'
import sendVipPoster from './components/quickSendGame/sendVipLevelPoster.vue'
export default {
name: 'quickSendGame',
components: {
vipTools,
sendGame,
sendQrCode,
sendVipPoster,
},
data() {
return {
......
src/views/userInfo/components/Info.vue
......@@ -53,13 +53,14 @@
chatUserDetails.add_way_text }}</span>
</div>
<!-- 游戏模块特有 -->
<div v-if="accountSelect && accountSelect !== ''" style="margin-top: 3px">
<div v-if="accountSelect && accountSelect !== ''" class="rowFlex columnCenter" style="margin-top: 3px">
<vipLevel :gameUserInfo="gameUserInfo" />
<el-button-group>
<el-button size="mini" @click="zyouUnBindConfirm">解绑</el-button>
<!-- <el-button size="mini" @click="autoResetPassword">修改密码</el-button>
<el-button size="mini" @click="changePhoneClick">修改手机号</el-button> -->
<el-button v-if="!chatUserDetails.bind_cser" size="mini" @click="relationKfh">关联客服</el-button>
<el-button size="mini" v-if="false" @click="errorHandle">误操作</el-button>
<el-button type="text" @click="zyouUnBindConfirm">解绑</el-button>
<!-- <el-button type="text" size="mini" @click="autoResetPassword">修改密码</el-button>
<el-button type="text" size="mini" @click="changePhoneClick">修改手机号</el-button> -->
<el-button v-if="!chatUserDetails.bind_cser" type="text" @click="relationKfh">关联客服</el-button>
<el-button type="text" v-if="false" @click="errorHandle">误操作</el-button>
</el-button-group>
</div>
</div>
......@@ -163,6 +164,7 @@ import selectTag from '@/components/selectTag.vue'
import { getClientStatus, remarkSessionIntelTag, finishRest, client_session_rest, checkSingleAgree, checkUserPermit, sendComment, logout } from '@/api/user.js'
import { sendChatMessage } from '@/utils/index.js'
import { getToken, removeToken } from '@/utils/auth'
import vipLevel from './gameInfo/vipLevel.vue'
import Cookies from 'js-cookie'
export default {
name: 'info',
......@@ -170,7 +172,8 @@ export default {
gameDetails,
changePhone,
shareInfo,
selectTag
selectTag,
vipLevel
},
props: {
// 用户详情
......
src/views/userInfo/components/gameInfo/vipLevel.vue 0 → 100644
<!--
* @Author: maoxiya 937667504@qq.com
* @Date: 2025-09-13 14:05:01
* @LastEditors: maoxiya 937667504@qq.com
* @LastEditTime: 2025-09-17 14:08:37
* @FilePath: /company_wx_frontend/src/views/works/component/gameInfo/vipLevel.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="vipLevel" v-if="vip_role_info.role_id">
<el-popover
v-model="popoverVisible"
placement="top"
:title="vipLevelBenefit.length > 0 ? 'VIP等级权益' : '暂无 vip 等级权益'"
trigger="manual"
:disabled="loading"
>
<!-- 最大宽度 400px -->
<div class="vipLevelContent" style="max-width: 400px;max-height: 300px;overflow: auto;">
<div v-if="loading" class="loading-content">
<i class="el-icon-loading"></i>
<span>加载中...</span>
</div>
<div v-else>
<div class="vipLevelItem rowFlex columnCenter" v-for="(item,index) in vipLevelBenefit" :key="index">
<p class="vipLevelItemRow" v-if="item.num" :style="{color: item.target ? '#333333' : '#c9cdd4'}" >
<span v-if="item.name" class="label">{{item.name}} </span>
<span v-if="item.num" :style="{color: item.target ? '#00bf8a' : '#c9cdd4'}" class="value"> {{item.num }} 次</span>
</p>
</div>
<div v-if="vipLevelBenefit.length === 0" class="no-data">
<span>暂无VIP等级权益</span>
</div>
</div>
</div>
<div slot="reference">
<span class="vipLevelText" v-if="vip_role_info.vip_level" @click.stop="showVipLevel">{{ `SVIP等级${vip_role_info.vip_level}` }}</span>
</div>
</el-popover>
</div>
</template>
<script>
import { marketingRoleGradeBenefit,marketingMemberRoleGrade } from '@/api/game'
import { mapState, mapMutations } from 'vuex'
export default {
name: 'VipLevel',
data() {
return {
vip_role_info: {},
vipLevelBenefit: [],
popoverVisible: false,
loading: false
}
},
props: {
roleInfo: {
type: Object,
default: () => ({})
}
},
mounted() {
if(this.roleInfo && Object.keys(this.roleInfo).length > 0) {
this.vip_role_info = this.roleInfo
// 将VIP信息存储到Vuex中
this.set_vipRoleInfo(this.roleInfo)
} else {
this.marketingMemberRoleGrade()
}
},
watch: {
accountSelect(newVal, oldVal) {
if(newVal && newVal !== ''){
this.marketingMemberRoleGrade()
}
}
},
computed: {
...mapState('game', ['accountSelect'])
},
methods: {
...mapMutations('game', ['set_vipRoleInfo']),
async marketingMemberRoleGrade() {
if(this.accountSelect && this.accountSelect !== ''){
const res = await marketingMemberRoleGrade({ member_id:this.accountSelect})
if(res.data.data.role_id){
this.vip_role_info = res.data.data
// 将VIP信息存储到Vuex中，供其他组件使用
this.set_vipRoleInfo(res.data.data)
}else{
this.vip_role_info = {}
this.set_vipRoleInfo({})
}
}
},
/**
* 获取VIP等级权益数据
*/
async getVipLevel() {
try {
this.loading = true;
const levelBenefitRes = await marketingRoleGradeBenefit({
main_game_id: this.vip_role_info.main_game_id,
role_id: this.vip_role_info.role_id,
weixin_blongs_id: this.vip_role_info.weixin_blongs_id,
vip_level: this.vip_role_info.vip_level
});
if(levelBenefitRes.status_code === 1) {
this.vipLevelBenefit = levelBenefitRes.data.data || [];
// 数据获取成功后显示popover
this.popoverVisible = true;
} else {
this.vipLevelBenefit = [];
this.$message({
message: levelBenefitRes.data.msg || '获取VIP等级权益失败',
type: 'error'
});
}
} catch (error) {
console.error('获取VIP等级权益失败:', error);
this.vipLevelBenefit = [];
this.$message({
message: '获取VIP等级权益失败，请重试',
type: 'error'
});
} finally {
this.loading = false;
}
},
/**
* 显示VIP等级权益弹窗
*/
async showVipLevel() {
// 如果已经显示，则隐藏
if (this.popoverVisible) {
this.popoverVisible = false;
return;
}
// 获取数据并显示popover
await this.getVipLevel();
}
}
}
</script>
<style scoped lang="scss">
.vipLevel{
.vipLevelText{
color: #409EFF;
cursor: pointer;
margin-right: 10px;
font-weight: 600;
position: relative;
top: -1px;
}
.loading-content {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
color: #666;
i {
margin-right: 8px;
font-size: 16px;
}
}
.no-data {
text-align: center;
padding: 20px;
color: #c9cdd4;
}
.vipLevelContent {
.vipLevelItem {
margin-bottom: 8px;
.vipLevelItemRow {
margin: 0;
display: flex;
justify-content: space-between;
align-items: center;
.label {
flex: 1;
}
.value {
font-weight: bold;
}
}
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论