Skip to content

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

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

上级 a21e58e2
正在显示 包含 209 行增加 和 149 行删除
public/index.html
......@@ -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"> -->
<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
<!-- 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>
<body>
<noscript>
......
src/App.vue
<template>
<div id="app" class="mobile-app-wrapper">
<Debug />
<div class="mobile-content">
<router-view></router-view>
<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>
</div>
</div>
<div
class="mobile-menu-bar w-[40px] overflow-hidden"
......@@ -40,8 +47,11 @@
<el-tooltip
class="item"
effect="dark"
:disabled="item.path !== '/agentStatusManagement'"
:content="'客服状态：' + csStatusInfo.text"
:content="
item.path === '/agentStatusManagement'
? '客服状态：' + csStatusInfo.text
: item.label
"
placement="left"
>
<div
......@@ -63,18 +73,22 @@
</div>
<!-- 普通菜单项 -->
<!-- <span >{{ item.label }}</span> -->
<iconpark-icon
<el-tooltip
v-else
class="w-[14px] h-[14px]"
:name="item.icon"
></iconpark-icon>
class="item"
effect="dark"
:content="item.label"
placement="left"
>
<iconpark-icon
class="w-[14px] h-[14px]"
:name="item.icon"
></iconpark-icon>
</el-tooltip>
</div>
</el-menu-item>
</el-menu>
</div>
<!-- 绑定的 w 账号 -->
<bindUserList />
</div>
</div>
</template>
......@@ -85,6 +99,7 @@ import { mapState, mapMutations, mapActions } from "vuex";
import Cookies from "js-cookie";
import { getParams } from "@/utils/index";
import Debug from "@/components/debug.vue";
import { getClientStatus } from "@/api/user";
export default {
name: "App",
......@@ -174,6 +189,7 @@ export default {
"token",
"userInfo",
"client_online_status",
"userid",
]),
...mapState("game", ["taskData"]),
// 计算任务列表是否需要显示红点
......@@ -198,6 +214,10 @@ export default {
};
return statusMap[this.client_online_status] || "未知";
},
title() {
return this.menuList.find((item) => item.path === this.$route.path)
?.label;
},
},
watch: {
"$route.path"(val) {
......@@ -258,6 +278,7 @@ export default {
this.set_token(cookieToken);
console.log("从 Cookie 恢复 token:", cookieToken);
}
// 初始化时处理路径
const currentPath = this.$route.path;
if (
......@@ -277,6 +298,10 @@ export default {
this.$nextTick(() => {
this.checkMenuOverflow();
this.initVuexValue();
// 获取客服状态和相关信息
if (this.userid && this.token) {
this.getInitialData();
}
});
},
beforeDestroy() {
......@@ -291,6 +316,7 @@ export default {
"set_cser_id",
"set_cser_name",
"set_userInfo",
"set_client_online_status",
]),
...mapMutations("game", ["set_accountSelect"]),
...mapActions("game", ["getTaskUnReadData"]),
......@@ -320,6 +346,25 @@ export default {
handleSelect(key, keyPath) {
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() {
......@@ -442,8 +487,7 @@ export default {
.mobile-content > div {
background: #fff;
border-radius: 8px;
min-height: 60vh;
padding: 10px;
padding: 10px 0px;
}
.el-menu--horizontal > .el-menu-item {
......@@ -484,4 +528,7 @@ body {
align-items: center;
justify-content: center;
}
.p-common {
padding: 0 10px;
}
</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
<template>
<div class="newPage rowFlex allCenter">
<el-pagination
:total="Number(pageInfo.total)"
:current-page.sync="pageInfo.page"
:page-size="Number(pageInfo.page_size)"
background
layout="total,prev, pager, next, jumper"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
</template>
<script type="text/javascript">
export default {
name: 'pageNum',
props: ['pageInfo'],
data() {
return {}
<div class="newPage rowFlex allCenter">
<el-pagination
:total="Number(pageInfo.total)"
:current-page.sync="pageInfo.page"
:page-size="Number(pageInfo.page_size)"
background
layout="prev, pager, next"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
</template>
<script type="text/javascript">
export default {
name: "pageNum",
props: ["pageInfo"],
data() {
return {};
},
mounted() {},
methods: {
handleCurrentChange(newPage) {
this.pageInfo.page = newPage;
this.$emit("requestNextPage", this.pageInfo);
},
mounted() {
},
methods: {
handleCurrentChange(newPage) {
this.pageInfo.page = newPage
this.$emit('requestNextPage', this.pageInfo)
}
}
}
</script>
<style lang="scss" scoped>
.newPage {
width: 100%;
height: 60px;
background: #fff;
border-radius: 0 0 5px 5px;
padding-bottom: 20px;
}
</style>
\ No newline at end of file
},
};
</script>
<style lang="scss" scoped>
.newPage {
width: 100%;
height: 60px;
background: #fff;
border-radius: 0 0 5px 5px;
padding-bottom: 20px;
}
</style>
src/store/modules/user.js
......@@ -80,6 +80,8 @@ const mutations = {
state.isWecomSDKReady = status
},
set_client_online_status(state, status) {
console.log('设置客服休息状态', status);
state.client_online_status = status
}
}
......
src/views/agentStatusManagement/index.vue
<template>
<div class="p-3 h-full">
<div class="text-[13px] text-[#131920] font-medium">在线客服</div>
<div class="!p-[12px] h-full">
<div class="px-[9px] pt-[60px] flex flex-col items-center justify-center">
<div class="h-[80px] w-[80px]">
<img :src="avatar" alt="" class="h-full w-full rounded-[6px]" />
......@@ -141,44 +140,11 @@ export default {
return this.client_online_status;
},
},
mounted() {
// 获取客服状态和相关信息
this.$nextTick(() => {
if (this.userid && this.token) {
this.getInitialData();
}
});
},
mounted() {},
methods: {
...mapMutations("user", ["set_client_online_status"]),
...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() {
if (this.client_online_status === "rest") {
......
src/views/components/bindGameAccount/bindUserList.vue
<template>
<div class="bindUserList rowFlex columnCenter">
<div class="bindUserList rowFlex columnCenter !pt-0 !px-[10px]">
<div class="select">
<el-select
v-model="bindAccount"
placeholder="请选择关联账号"
:clearable="false"
class="w-[258px]"
:class="{ 'show-number': bindGameUserList.length > 0 }"
:style="{ '--number': `'${bindGameUserList.length}'` }"
@change="handleChange"
>
<el-option label="新增关联账号" value="add" @click="addNewUser">
</el-option>
<!-- <el-option label="新增关联账号" value="add" @click="addNewUser">
</el-option> -->
<el-option
v-for="(item, index) in bindGameUserList"
:key="index"
......@@ -34,9 +37,15 @@
</el-option>
</el-select>
</div>
<p v-if="bindGameUserList.length > 0" class="num">
<!-- <p v-if="bindGameUserList.length > 0" class="num">
总共{{ 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
:show.sync="showLayer"
title="选择玩家"
......@@ -102,11 +111,7 @@ export default {
...mapMutations("user", ["set_avatar"]),
...mapActions("game", ["gameBindUser"]),
handleChange(value) {
if (value == "add") {
this.showLayer = true;
} else {
this.set_accountSelect(value);
}
this.set_accountSelect(value);
},
close() {
this.bindAccount = this.accountSelect;
......@@ -137,7 +142,7 @@ export default {
}
},
addNewUser() {
console.log(11);
this.showLayer = true;
},
async requestDetails() {
const data = {
......@@ -186,53 +191,24 @@ export default {
</script>
<style lang="scss" scoped>
.bindUserList {
margin: 10px;
.select {
::v-deep .el-input--small .el-input__inner {
border-radius: 4px;
border: 1px solid #e4e7ed;
min-width: 200px;
height: 32px;
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 {
.show-number ::v-deep .el-input {
position: relative;
&:after {
display: flex;
justify-content: center;
align-items: center;
content: var(--number);
height: 20px;
width: 20px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 600;
margin-left: 10px;
white-space: nowrap;
color: #f53f3f;
}
::v-deep .el-button--danger {
background-color: #f56c6c;
border-color: #f56c6c;
color: #267ef0;
background: #e7f1fd;
border-radius: 50%;
&:hover,
&:focus {
background-color: #f78989;
border-color: #f78989;
}
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 30px;
}
}
</style>
src/views/userInfo/components/Info.vue
<template>
<div class="info-tab-content">
<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">
<p>高风险玩家,请立即通知组长！！！！</p>
<p>
......
tailwind.config.js
......@@ -11,7 +11,9 @@ module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false,
theme: {
extend: {}
extend: {
}
},
variants: {
extend: {}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论