Skip to content

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

🌈 style: 新增关联账号样式修改

上级 a21e58e2
正在显示 包含 184 行增加 和 124 行删除
public/index.html
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no,user-scalable=no"> --> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no,user-scalable=no"> -->
<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script> <script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
<!-- iconpark CDN链接 --> <!-- iconpark CDN链接 -->
<script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_27278_168.abab0e7be76224e5929cf4315f14d58c.es5.js"></script> <script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_27278_169.71fe6b5f95ef2c1f5cb5bd7e2398c9dd.es5.js"></script>
</head> </head>
<body> <body>
<noscript> <noscript>
......
src/App.vue
<template> <template>
<div id="app" class="mobile-app-wrapper"> <div id="app" class="mobile-app-wrapper">
<Debug /> <Debug />
<div class="mobile-content"> <div class="mobile-content flex flex-col">
<div class="!p-[10px] !min-h-auto text-[13px] text-[#131920] font-medium">
{{ title }}
</div>
<!-- 绑定的 w 账号 -->
<bindUserList class="!min-h-auto" />
<div class="flex-1 w-full h-full overflow-hidden">
<router-view></router-view> <router-view></router-view>
</div> </div>
</div>
<div <div
class="mobile-menu-bar w-[40px] overflow-hidden" class="mobile-menu-bar w-[40px] overflow-hidden"
v-if="token && external_userid && showMemberId" v-if="token && external_userid && showMemberId"
...@@ -40,8 +47,11 @@ ...@@ -40,8 +47,11 @@
<el-tooltip <el-tooltip
class="item" class="item"
effect="dark" effect="dark"
:disabled="item.path !== '/agentStatusManagement'" :content="
:content="'客服状态：' + csStatusInfo.text" item.path === '/agentStatusManagement'
? '客服状态：' + csStatusInfo.text
: item.label
"
placement="left" placement="left"
> >
<div <div
...@@ -63,18 +73,22 @@ ...@@ -63,18 +73,22 @@
</div> </div>
<!-- 普通菜单项 --> <!-- 普通菜单项 -->
<!-- <span >{{ item.label }}</span> --> <!-- <span >{{ item.label }}</span> -->
<iconpark-icon <el-tooltip
v-else v-else
class="item"
effect="dark"
:content="item.label"
placement="left"
>
<iconpark-icon
class="w-[14px] h-[14px]" class="w-[14px] h-[14px]"
:name="item.icon" :name="item.icon"
></iconpark-icon> ></iconpark-icon>
</el-tooltip>
</div> </div>
</el-menu-item> </el-menu-item>
</el-menu> </el-menu>
</div> </div>
<!-- 绑定的 w 账号 -->
<bindUserList />
</div> </div>
</div> </div>
</template> </template>
...@@ -85,6 +99,7 @@ import { mapState, mapMutations, mapActions } from "vuex"; ...@@ -85,6 +99,7 @@ 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";
import { getClientStatus } from "@/api/user";
export default { export default {
name: "App", name: "App",
...@@ -174,6 +189,7 @@ export default { ...@@ -174,6 +189,7 @@ export default {
"token", "token",
"userInfo", "userInfo",
"client_online_status", "client_online_status",
"userid",
]), ]),
...mapState("game", ["taskData"]), ...mapState("game", ["taskData"]),
// 计算任务列表是否需要显示红点 // 计算任务列表是否需要显示红点
...@@ -198,6 +214,10 @@ export default { ...@@ -198,6 +214,10 @@ export default {
}; };
return statusMap[this.client_online_status] || "未知"; return statusMap[this.client_online_status] || "未知";
}, },
title() {
return this.menuList.find((item) => item.path === this.$route.path)
?.label;
},
}, },
watch: { watch: {
"$route.path"(val) { "$route.path"(val) {
...@@ -258,6 +278,7 @@ export default { ...@@ -258,6 +278,7 @@ export default {
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 ( if (
...@@ -277,6 +298,10 @@ export default { ...@@ -277,6 +298,10 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.checkMenuOverflow(); this.checkMenuOverflow();
this.initVuexValue(); this.initVuexValue();
// 获取客服状态和相关信息
if (this.userid && this.token) {
this.getInitialData();
}
}); });
}, },
beforeDestroy() { beforeDestroy() {
...@@ -291,6 +316,7 @@ export default { ...@@ -291,6 +316,7 @@ export default {
"set_cser_id", "set_cser_id",
"set_cser_name", "set_cser_name",
"set_userInfo", "set_userInfo",
"set_client_online_status",
]), ]),
...mapMutations("game", ["set_accountSelect"]), ...mapMutations("game", ["set_accountSelect"]),
...mapActions("game", ["getTaskUnReadData"]), ...mapActions("game", ["getTaskUnReadData"]),
...@@ -320,6 +346,25 @@ export default { ...@@ -320,6 +346,25 @@ export default {
handleSelect(key, keyPath) { handleSelect(key, keyPath) {
console.log("菜单选择:", key, keyPath, window.location.href); console.log("菜单选择:", key, keyPath, window.location.href);
}, },
// 获取初始数据
async getInitialData() {
try {
// 获取客服休息状态
const statusRes = await getClientStatus();
if (statusRes.status_code === 1) {
if (statusRes.data.client_online_status === "offline") {
removeToken();
window.location.href =
window.location.origin +
"/company_app/index.html?corp_id=" +
this.corp_id;
}
this.set_client_online_status(statusRes.data.client_online_status);
}
} catch (error) {
console.error("获取初始数据失败:", error);
}
},
// 检查菜单是否需要换行 // 检查菜单是否需要换行
checkMenuOverflow() { checkMenuOverflow() {
...@@ -442,8 +487,7 @@ export default { ...@@ -442,8 +487,7 @@ export default {
.mobile-content > div { .mobile-content > div {
background: #fff; background: #fff;
border-radius: 8px; border-radius: 8px;
min-height: 60vh; padding: 10px 0px;
padding: 10px;
} }
.el-menu--horizontal > .el-menu-item { .el-menu--horizontal > .el-menu-item {
...@@ -484,4 +528,7 @@ body { ...@@ -484,4 +528,7 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.p-common {
padding: 0 10px;
}
</style> </style>
src/components/common/Drawer.vue 0 → 100644
<template>
<el-drawer
:visible="visible"
:title="title"
:size="size"
:append-to-body="true"
@close="$emit('close')"
:show-close="false"
>
<template #title>
<div class="flex items-center">
<iconpark-icon
@click="$emit('close')"
name="icon-fanhui"
class="mr-[8px] w-[20px] text-[20px] cursor-pointer"
></iconpark-icon>
<span class="text-[13px] text-[#131920] leading-[13px]">{{
title
}}</span>
</div>
</template>
<slot></slot>
<span class="dialog-footer rowFlex">
<slot name="footer">
<el-button class="btn" size="small" @click="$emit('close')">
取 消
</el-button>
<el-button
class="btn"
type="primary"
size="small"
:disabled="okDisabled"
@click="this.$emit('ok')"
>
确 定
</el-button>
</slot>
</span>
</el-drawer>
</template>
<script>
export default {
name: "Ui-Drawer",
props: ["visible", "size", "title", "okDisabled"],
};
</script>
<style scoped>
::v-deep .el-drawer__header {
padding: 12px 0px;
margin: 0 12px;
}
.dialog-footer {
width: 100%;
position: absolute;
bottom: 0;
padding-top: 20px;
padding-bottom: 20px;
border-top: 0;
justify-content: flex-end;
background: #fff;
z-index: 10;
.btn {
width: 60px;
height: 32px;
border-radius: 6px;
}
}
</style>
src/components/page/pageNum.vue
...@@ -5,38 +5,36 @@ ...@@ -5,38 +5,36 @@
:current-page.sync="pageInfo.page" :current-page.sync="pageInfo.page"
:page-size="Number(pageInfo.page_size)" :page-size="Number(pageInfo.page_size)"
background background
layout="total,prev, pager, next, jumper" layout="prev, pager, next"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
> >
</el-pagination> </el-pagination>
</div> </div>
</template> </template>
<script type="text/javascript"> <script type="text/javascript">
export default { export default {
name: 'pageNum', name: "pageNum",
props: ['pageInfo'], props: ["pageInfo"],
data() { data() {
return {} return {};
},
mounted() {
}, },
mounted() {},
methods: { methods: {
handleCurrentChange(newPage) { handleCurrentChange(newPage) {
this.pageInfo.page = newPage this.pageInfo.page = newPage;
this.$emit('requestNextPage', this.pageInfo) this.$emit("requestNextPage", this.pageInfo);
} },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.newPage { .newPage {
width: 100%; width: 100%;
height: 60px; height: 60px;
background: #fff; background: #fff;
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
padding-bottom: 20px; padding-bottom: 20px;
} }
</style> </style>
\ No newline at end of file
src/store/modules/user.js
...@@ -80,6 +80,8 @@ const mutations = { ...@@ -80,6 +80,8 @@ const mutations = {
state.isWecomSDKReady = status state.isWecomSDKReady = status
}, },
set_client_online_status(state, status) { set_client_online_status(state, status) {
console.log('设置客服休息状态', status);
state.client_online_status = status state.client_online_status = status
} }
} }
......
src/views/agentStatusManagement/index.vue
<template> <template>
<div class="p-3 h-full"> <div class="!p-[12px] h-full">
<div class="text-[13px] text-[#131920] font-medium">在线客服</div>
<div class="px-[9px] pt-[60px] flex flex-col items-center justify-center"> <div class="px-[9px] pt-[60px] flex flex-col items-center justify-center">
<div class="h-[80px] w-[80px]"> <div class="h-[80px] w-[80px]">
<img :src="avatar" alt="" class="h-full w-full rounded-[6px]" /> <img :src="avatar" alt="" class="h-full w-full rounded-[6px]" />
...@@ -141,44 +140,11 @@ export default { ...@@ -141,44 +140,11 @@ export default {
return this.client_online_status; return this.client_online_status;
}, },
}, },
mounted() { mounted() {},
// 获取客服状态和相关信息
this.$nextTick(() => {
if (this.userid && this.token) {
this.getInitialData();
}
});
},
methods: { methods: {
...mapMutations("user", ["set_client_online_status"]), ...mapMutations("user", ["set_client_online_status"]),
...mapActions("user", ["initWecom"]), ...mapActions("user", ["initWecom"]),
// 获取初始数据
async getInitialData() {
console.log(this.userInfo, 1111111);
// 如果userInfo.id存在，说明已经获取过客服状态，直接返回
if (this.userInfo.id) return;
try {
// 获取客服休息状态
const statusRes = await getClientStatus();
if (statusRes.status_code === 1) {
if (statusRes.data.client_online_status === "offline") {
removeToken();
window.location.href =
window.location.origin +
"/company_app/index.html?corp_id=" +
this.corp_id;
}
console.log(statusRes.data, 123131231);
this.set_client_online_status(statusRes.data.client_online_status);
}
} catch (error) {
console.error("获取初始数据失败:", error);
}
},
// 下线确认 // 下线确认
logout() { logout() {
if (this.client_online_status === "rest") { if (this.client_online_status === "rest") {
......
src/views/components/bindGameAccount/bindUserList.vue
<template> <template>
<div class="bindUserList rowFlex columnCenter"> <div class="bindUserList rowFlex columnCenter !pt-0 !px-[10px]">
<div class="select"> <div class="select">
<el-select <el-select
v-model="bindAccount" v-model="bindAccount"
placeholder="请选择关联账号" placeholder="请选择关联账号"
:clearable="false" :clearable="false"
class="w-[258px]"
:class="{ 'show-number': bindGameUserList.length > 0 }"
:style="{ '--number': `'${bindGameUserList.length}'` }"
@change="handleChange" @change="handleChange"
> >
<el-option label="新增关联账号" value="add" @click="addNewUser"> <!-- <el-option label="新增关联账号" value="add" @click="addNewUser">
</el-option> </el-option> -->
<el-option <el-option
v-for="(item, index) in bindGameUserList" v-for="(item, index) in bindGameUserList"
:key="index" :key="index"
...@@ -34,9 +37,15 @@ ...@@ -34,9 +37,15 @@
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<p v-if="bindGameUserList.length > 0" class="num"> <!-- <p v-if="bindGameUserList.length > 0" class="num">
总共{{ bindGameUserList.length }}个账号 总共{{ bindGameUserList.length }}个账号
</p> </p> -->
<el-button
icon="el-icon-plus "
size="small"
class="!h-[32px] ml-[8px] !w-[32px] text-[16px] flex items-center justify-center"
@click="addNewUser"
></el-button>
<addUser <addUser
:show.sync="showLayer" :show.sync="showLayer"
title="选择玩家" title="选择玩家"
...@@ -102,11 +111,7 @@ export default { ...@@ -102,11 +111,7 @@ export default {
...mapMutations("user", ["set_avatar"]), ...mapMutations("user", ["set_avatar"]),
...mapActions("game", ["gameBindUser"]), ...mapActions("game", ["gameBindUser"]),
handleChange(value) { handleChange(value) {
if (value == "add") {
this.showLayer = true;
} else {
this.set_accountSelect(value); this.set_accountSelect(value);
}
}, },
close() { close() {
this.bindAccount = this.accountSelect; this.bindAccount = this.accountSelect;
...@@ -137,7 +142,7 @@ export default { ...@@ -137,7 +142,7 @@ export default {
} }
}, },
addNewUser() { addNewUser() {
console.log(11); this.showLayer = true;
}, },
async requestDetails() { async requestDetails() {
const data = { const data = {
...@@ -186,53 +191,24 @@ export default { ...@@ -186,53 +191,24 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.bindUserList { .show-number ::v-deep .el-input {
margin: 10px; position: relative;
&:after {
.select { display: flex;
::v-deep .el-input--small .el-input__inner { justify-content: center;
border-radius: 4px; align-items: center;
border: 1px solid #e4e7ed; content: var(--number);
min-width: 200px; height: 20px;
height: 32px; width: 20px;
line-height: 32px;
background-color: #e8f7ff;
color: #3491fa;
font-size: 14px;
&:hover,
&:focus {
border-color: #3491fa;
}
}
::v-deep .el-input__suffix {
color: #3491fa;
}
::v-deep .el-select-dropdown__item.selected {
color: #3491fa;
}
}
.num {
font-size: 12px; font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC; color: #267ef0;
font-weight: 600; background: #e7f1fd;
margin-left: 10px; border-radius: 50%;
white-space: nowrap;
color: #f53f3f;
}
::v-deep .el-button--danger { position: absolute;
background-color: #f56c6c; top: 50%;
border-color: #f56c6c; transform: translateY(-50%);
right: 30px;
&:hover,
&:focus {
background-color: #f78989;
border-color: #f78989;
}
} }
} }
</style> </style>
src/views/userInfo/components/Info.vue
<template> <template>
<div class="info-tab-content"> <div class="info-tab-content">
<div class="userDetailsPanel columnFlex"> <div class="userDetailsPanel columnFlex">
<div class="content" v-loading="viewLoading"> <div class="content px-[10px]" v-loading="viewLoading">
<div v-if="chatUserDetails.is_phishing_account == 1" class="warnText"> <div v-if="chatUserDetails.is_phishing_account == 1" class="warnText">
<p>高风险玩家,请立即通知组长！！！！</p> <p>高风险玩家,请立即通知组长！！！！</p>
<p> <p>
......
tailwind.config.js
...@@ -11,7 +11,9 @@ module.exports = { ...@@ -11,7 +11,9 @@ module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, darkMode: false,
theme: { theme: {
extend: {} extend: {
}
}, },
variants: { variants: {
extend: {} extend: {}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论