Skip to content

C
company_app
提交 eeff2a00 作者: 施汉文
操作

🐞 fix: 修复教学视频问题

上级 321919d1
正在显示 包含 164 行增加 和 107 行删除
src/App.vue
<template>
<div id="app" class="mobile-app-wrapper">
<Debug />
<div class="mobile-menu-bar" v-if="token && external_userid && showMemberId">
<div
class="mobile-menu-bar"
v-if="token && external_userid && showMemberId"
>
<!-- 临时调试信息 -->
<div class="menu-container">
<el-menu :default-active="selectedPath" mode="horizontal" class="mobile-el-menu"
:class="{ 'collapsed': !isMenuExpanded && shouldShowToggle }" background-color="#fff" router
@select="handleSelect" ref="menuRef">
<el-menu-item v-for="item in menuList" :key="item.path" :index="item.path" class="mobile-menu-item">
<el-menu
:default-active="selectedPath"
mode="horizontal"
class="mobile-el-menu"
:class="{ collapsed: !isMenuExpanded && shouldShowToggle }"
background-color="#fff"
router
@select="handleSelect"
ref="menuRef"
>
<el-menu-item
v-for="item in menuList"
:key="item.path"
:index="item.path"
class="mobile-menu-item"
>
<!-- 任务列表菜单项显示红点 -->
<div v-if="item.path === '/taskList' && hasTaskRedDot" class="menu-item-with-badge">
<div
v-if="item.path === '/taskList' && hasTaskRedDot"
class="menu-item-with-badge"
>
<div class="task-badge">
<el-badge is-dot>
<span>{{ item.label }}</span>
......@@ -22,9 +40,17 @@
</el-menu>
<!-- 展开收起按钮 -->
<el-button type="text" size="mini" v-if="shouldShowToggle" class="menu-toggle-btn" @click="toggleMenu">
<i :class="isMenuExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
<span>{{ isMenuExpanded ? '收起' : '展开' }}</span>
<el-button
type="text"
size="mini"
v-if="shouldShowToggle"
class="menu-toggle-btn"
@click="toggleMenu"
>
<i
:class="isMenuExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
></i>
<span>{{ isMenuExpanded ? "收起" : "展开" }}</span>
</el-button>
</div>
......@@ -37,25 +63,25 @@
</div>
</template>
<script>
import bindUserList from '@/views/components/bindGameAccount/bindUserList.vue'
import { getToken } from '@/utils/auth'
import { mapState, mapMutations, mapActions } from 'vuex'
import Cookies from 'js-cookie'
import { getParams } from '@/utils/index'
import Debug from '@/components/debug.vue'
import bindUserList from "@/views/components/bindGameAccount/bindUserList.vue";
import { getToken } from "@/utils/auth";
import { mapState, mapMutations, mapActions } from "vuex";
import Cookies from "js-cookie";
import { getParams } from "@/utils/index";
import Debug from "@/components/debug.vue";
export default {
name: 'App',
name: "App",
components: {
bindUserList,
Debug
Debug,
},
data() {
return {
menuList: [
{
label: '客户资料',
path: '/userInfo'
label: "客户资料",
path: "/userInfo",
},
// {
// label: '角色信息',
......@@ -66,16 +92,16 @@ export default {
// path: '/orderList'
// },
{
label: '快捷回复',
path: '/quickReply'
label: "快捷回复",
path: "/quickReply",
},
// {
// label: '违规记录',
// path: '/violationRecord'
// },
{
label: '礼包记录',
path: '/giftRecord'
label: "礼包记录",
path: "/giftRecord",
},
// {
......@@ -83,188 +109,218 @@ export default {
// path: '/taskRecord'
// },
{
label: '申请记录',
path: '/applyRecord'
label: "申请记录",
path: "/applyRecord",
},
{
label: '通讯录',
path: '/addressBook'
label: "通讯录",
path: "/addressBook",
},
{
label: '快捷发送',
path: '/quickSendGame'
label: "快捷发送",
path: "/quickSendGame",
},
{
label: '任务列表',
path: '/taskList',
hasRedDot: false // 红点状态
label: "任务列表",
path: "/taskList",
hasRedDot: false, // 红点状态
},
{
label: '微言助手',
path: '/aiChat'
label: "微言助手",
path: "/aiChat",
},
// {
// label: '通讯录',
// path: '/addressBook'
// },
],
selectedPath: '/userInfo',
selectedPath: "/userInfo",
showMemberId: false,
isMenuExpanded: false, // 菜单展开状态
shouldShowToggle: false, // 是否显示展开收起按钮
}
};
},
computed: {
...mapState('user', ['external_userid', 'token', 'userInfo']),
...mapState('game', ['taskData']),
...mapState("user", ["external_userid", "token", "userInfo"]),
...mapState("game", ["taskData"]),
// 计算任务列表是否需要显示红点
hasTaskRedDot() {
return this.taskData.user_task > 0 || this.taskData.account_task > 0
}
return this.taskData.user_task > 0 || this.taskData.account_task > 0;
},
},
watch: {
'$route.path'(val) {
"$route.path"(val) {
// 处理各种可能的路径情况
if (val === '/' || val === '/index.html') {
this.selectedPath = '/userInfo'
if (val === "/" || val === "/index.html") {
this.selectedPath = "/userInfo";
} else {
this.selectedPath = val
this.selectedPath = val;
}
console.log('路由变化:', val, '选中路径:', this.selectedPath)
console.log("路由变化:", val, "选中路径:", this.selectedPath);
},
// 监听用户信息变化，只在初始化时获取一次任务数据
userInfo: {
handler(newVal, oldVal) {
if (newVal && newVal.id && (!oldVal || !oldVal.id) && this.token) {
console.log('用户信息初始化完成，获取任务数据:', newVal)
console.log("用户信息初始化完成，获取任务数据:", newVal);
// 只在用户信息第一次设置时获取任务数据
this.getTaskUnReadData()
this.getTaskUnReadData();
}
},
deep: true,
immediate: true
immediate: true,
},
// 监听 external_userid 的变化，确保界面及时更新
external_userid: {
handler(newVal) {
if (newVal) {
this.$nextTick(() => {
this.showMemberId = true
console.log('external_userid 已设置:', newVal, window.location.href, this.token, Cookies.get('token'))
this.showMemberId = true;
console.log(
"external_userid 已设置:",
newVal,
window.location.href,
this.token,
Cookies.get("token")
);
// 强制更新组件
this.$forceUpdate()
this.$forceUpdate();
// 检查是否需要显示展开收起按钮
this.checkMenuOverflow()
})
this.checkMenuOverflow();
});
}
},
immediate: true
}
immediate: true,
},
},
created() {
const urlParams = getParams();
// 每次进入页面都缓存corp_id
if (urlParams.corp_id) {
this.cacheCorp_id(urlParams.corp_id) // 缓存 corp_id
this.cacheCorp_id(urlParams.corp_id); // 缓存 corp_id
}
},
mounted() {
// 页面刷新时从 Cookie 恢复 token 到 store
const cookieToken = Cookies.get('token')
// Cookies.set(
// "token",
// "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOjQwOTAsImRhdGEiOnsiY3Nlcl9pZCI6NDA5MCwiY3Nlcl9uYW1lIjoi5q-b57uG5LqaIn0sImlhdCI6MTc2NTE2NDkyMywiZXhwIjoxNzY3NzU2OTIzLCJuYmYiOjE3NjUxNjQ5MjMsInN1YiI6InRva2Vu6K6k6K-BIiwianRpIjoiNTE1NGM4ZTg0N2ViNDZlOWRiZjk3N2UxNjA2ODA4NmEifQ.xaiVKGEawmHSMIzsAyxt-Ea3KeRHkp6jIY_U5Em-yCU"
// );
// Cookies.set("corp_id", "wweaefe716636df3d1");
// Cookies.set("userid", "maoxiya");
// Cookies.set("cser_name", "毛细亚");
// Cookies.set("external_userid", "wm5rUgMgAAG_vfF4AHClsrS1S6MImVsQ");
// Cookies.set("cser_id", 4090);
// Cookies.set("weixin_blongs_id", 2862);
const cookieToken = Cookies.get("token");
if (cookieToken && !this.token) {
this.set_token(cookieToken)
console.log('从 Cookie 恢复 token:', cookieToken)
this.set_token(cookieToken);
console.log("从 Cookie 恢复 token:", cookieToken);
}
// 初始化时处理路径
const currentPath = this.$route.path
if (currentPath === '/' || currentPath === '' || currentPath === '/index.html') {
this.selectedPath = '/userInfo'
const currentPath = this.$route.path;
if (
currentPath === "/" ||
currentPath === "" ||
currentPath === "/index.html"
) {
this.selectedPath = "/userInfo";
} else {
this.selectedPath = currentPath
this.selectedPath = currentPath;
}
console.log('创建时路径:', currentPath, '选中路径:', this.selectedPath)
console.log("创建时路径:", currentPath, "选中路径:", this.selectedPath);
// 监听窗口大小变化
window.addEventListener('resize', this.handleResize)
window.addEventListener("resize", this.handleResize);
// 初始检查
this.$nextTick(() => {
this.checkMenuOverflow()
this.initVuexValue()
})
this.checkMenuOverflow();
this.initVuexValue();
});
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
window.removeEventListener("resize", this.handleResize);
},
methods: {
...mapMutations('user', ['set_userid', 'set_corp_id', 'set_token', 'set_cser_info', 'set_cser_id', 'set_cser_name', 'set_userInfo']),
...mapMutations('game', ['set_accountSelect']),
...mapActions('game', ['getTaskUnReadData']),
...mapMutations("user", [
"set_userid",
"set_corp_id",
"set_token",
"set_cser_info",
"set_cser_id",
"set_cser_name",
"set_userInfo",
]),
...mapMutations("game", ["set_accountSelect"]),
...mapActions("game", ["getTaskUnReadData"]),
// 设置缓存
cacheCorp_id(corp_id) {
Cookies.set('corp_id', corp_id, { expires: 30 })
this.set_corp_id(corp_id)
Cookies.set("corp_id", corp_id, { expires: 30 });
this.set_corp_id(corp_id);
},
initVuexValue() {
this.set_userid(Cookies.get('userid'))
this.set_corp_id(Cookies.get('corp_id'))
this.set_token(Cookies.get('token'))
this.set_cser_id(Cookies.get('cser_id'))
this.set_cser_name(Cookies.get('cser_name'))
this.set_userid(Cookies.get("userid"));
this.set_corp_id(Cookies.get("corp_id"));
this.set_token(Cookies.get("token"));
this.set_cser_id(Cookies.get("cser_id"));
this.set_cser_name(Cookies.get("cser_name"));
const userinfo = {
cser_id: Cookies.get('cser_id'),
cser_name: Cookies.get('cser_name'),
username: Cookies.get('cser_name'),
id: Cookies.get('cser_id'),
}
this.set_userInfo(userinfo)
const cser_info = Cookies.get('cser_info')
cser_info ? this.set_cser_info(JSON.parse(cser_info)) : this.set_cser_info({})
cser_id: Cookies.get("cser_id"),
cser_name: Cookies.get("cser_name"),
username: Cookies.get("cser_name"),
id: Cookies.get("cser_id"),
};
this.set_userInfo(userinfo);
const cser_info = Cookies.get("cser_info");
cser_info
? this.set_cser_info(JSON.parse(cser_info))
: this.set_cser_info({});
},
handleSelect(key, keyPath) {
console.log('菜单选择:', key, keyPath, window.location.href)
console.log("菜单选择:", key, keyPath, window.location.href);
},
// 切换菜单展开收起状态
toggleMenu() {
this.isMenuExpanded = !this.isMenuExpanded
this.isMenuExpanded = !this.isMenuExpanded;
},
// 检查菜单是否需要换行
checkMenuOverflow() {
this.$nextTick(() => {
const menuElement = this.$refs.menuRef?.$el
if (!menuElement) return
const menuElement = this.$refs.menuRef?.$el;
if (!menuElement) return;
// 临时展开菜单来检查实际高度
const wasCollapsed = !this.isMenuExpanded && this.shouldShowToggle
const wasCollapsed = !this.isMenuExpanded && this.shouldShowToggle;
if (wasCollapsed) {
menuElement.classList.remove('collapsed')
menuElement.classList.remove("collapsed");
}
const menuHeight = menuElement.scrollHeight
const singleLineHeight = 50 // 单行高度
const menuHeight = menuElement.scrollHeight;
const singleLineHeight = 50; // 单行高度
// 如果菜单高度超过单行，说明需要换行
this.shouldShowToggle = menuHeight > singleLineHeight + 10 // 加10px容错
this.shouldShowToggle = menuHeight > singleLineHeight + 10; // 加10px容错
// 如果不需要展开收起按钮，则直接展开
if (!this.shouldShowToggle) {
this.isMenuExpanded = true
this.isMenuExpanded = true;
} else if (wasCollapsed) {
// 恢复收起状态
menuElement.classList.add('collapsed')
menuElement.classList.add("collapsed");
}
})
});
},
// 窗口大小变化处理
handleResize() {
clearTimeout(this.resizeTimer)
clearTimeout(this.resizeTimer);
this.resizeTimer = setTimeout(() => {
this.checkMenuOverflow()
}, 150)
}
this.checkMenuOverflow();
}, 150);
},
}
},
};
</script>
<style scoped>
......@@ -352,14 +408,14 @@ export default {
overflow-y: auto;
}
.mobile-content>div {
.mobile-content > div {
background: #fff;
border-radius: 8px;
min-height: 60vh;
padding: 10px;
}
.el-menu--horizontal>.el-menu-item {
.el-menu--horizontal > .el-menu-item {
height: 35px;
line-height: 35px;
}
......
src/views/components/InstructionalVideo/index.vue
......@@ -62,6 +62,7 @@ import {
} from "@/api/game";
import { mapMutations, mapState } from "vuex";
import { sendChatMessage } from "@/utils/index";
import { debounce } from "@/utils";
export default {
name: "InstructionalVideo",
......@@ -71,7 +72,7 @@ export default {
categoryValue: {},
categoryList: [],
videoList: [],
debouncedGetVideoList: null,
debouncedGetVideoList: () => {},
loading: false,
};
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论