Skip to content

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

🐞 fix: 修复教学视频问题

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