1326 lines
38 KiB
Vue
1326 lines
38 KiB
Vue
<template>
|
||
<div class="navbar" style="background-color: white;color: white!important;">
|
||
<div class="logo" v-if="isShowKbossCharge">
|
||
<img @click="$router.push('/product/productHome')" src="./img/img.png" alt="" class="img">
|
||
<span style="color: #423f3f;font-size: 20px;margin-left: 15px">平台充值中心</span>
|
||
</div>
|
||
|
||
<hamburger v-if="false" style="display: flex;justify-content: center;align-items: center;color: white!important;"
|
||
id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||
<breadcrumb style="color:white!important;display: flex;justify-content: center;align-items: center;height: 100%;"
|
||
id="breadcrumb-container" class="breadcrumb-container" />
|
||
|
||
<div class="right-menu"
|
||
style="display:flex;justify-content: flex-end!important;align-items: center!important;margin-right: 10px;">
|
||
<template style="justify-content: center;align-items: center;transform: translate(0,-30px)!important;">
|
||
<span v-if="isShowKbossCharge" @click="$router.push('/product/productHome')"
|
||
class="right-menu-item hover-effect "
|
||
style="font-size: 16px;display: flex;justify-content: center;align-items: center">
|
||
<b style="display: flex;justify-content: center;align-items: center">
|
||
回到首页
|
||
</b>
|
||
</span>
|
||
|
||
<el-tooltip v-if="role.includes('客户')" class="item" effect="dark" content="查询产品" placement="bottom">
|
||
<span class="right-menu-item hover-effect"
|
||
style="font-size: 26px;display: flex;justify-content: center;align-items: center">
|
||
<i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-search" @click="showSearch" />
|
||
</span>
|
||
</el-tooltip>
|
||
|
||
<!-- 信息图标 - 使用封装后的组件 -->
|
||
<el-tooltip class="item" effect="dark" content="信息" placement="bottom">
|
||
<span class="right-menu-item hover-effect"
|
||
style="font-size: 26px;display: flex;justify-content: center;align-items: center">
|
||
<el-badge :value="messageCount == 0 ? '' : messageCount" :max="9" class="badge"
|
||
style="height: 35px;display: flex;justify-content: center;align-items: center">
|
||
<i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-message" @click="handleMessageClick" />
|
||
</el-badge>
|
||
</span>
|
||
</el-tooltip>
|
||
|
||
<el-tooltip v-if="!role.includes('客户')" class="item" effect="dark" content="可视化大屏" placement="bottom">
|
||
<span class="right-menu-item hover-effect"
|
||
style="font-size: 26px;display: flex;justify-content: center;align-items: center">
|
||
<i style="color: #262626;font-weight: bold;font-size: 16px" class="el-icon-s-data" @click="goScreen" />
|
||
</span>
|
||
</el-tooltip>
|
||
</template>
|
||
|
||
<el-dropdown @visible-change="handleShow" class="avatar-container right-menu-item hover-effect nick-name-style"
|
||
style="margin-right: 0" trigger="click">
|
||
<div class="avatar-wrapper">
|
||
<i
|
||
style="font-size: 18px; color: #262626;font-weight: 400;display: flex;justify-content: flex-start;align-items: center">
|
||
<div class="imgUser">{{ nick_name.charAt(0) }}</div>
|
||
{{ nick_name }}
|
||
<i id="resverIcon" class="el-icon-arrow-up el-icon--right resverIcon"></i>
|
||
</i>
|
||
</div>
|
||
<el-dropdown-menu slot="dropdown" style="width: 230px;font-size: 16px;" divided>
|
||
<div style="display: flex;flex-direction: column;padding:15px 15px;background-color: #f0f2f5">
|
||
<span style="font-weight: bold;font-size: 20px;margin-bottom: 5px;color: #333333">{{ nick_name }}</span>
|
||
<span style="font-size: 12px;color:#666;display: flex;justify-content:flex-start;align-items: center"> ID:
|
||
<span ref="contentToCopy">
|
||
{{ userId }}
|
||
</span>
|
||
<svg @click="copyBtn" class="copy-btn" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"
|
||
width="12" height="12" style="fill: #1019ab;">
|
||
<path
|
||
d="M394.666667 106.666667h448a74.666667 74.666667 0 0 1 74.666666 74.666666v448a74.666667 74.666667 0 0 1-74.666666 74.666667H394.666667a74.666667 74.666667 0 0 1-74.666667-74.666667V181.333333a74.666667 74.666667 0 0 1 74.666667-74.666666z m0 64a10.666667 10.666667 0 0 0-10.666667 10.666666v448a10.666667 10.666667 0 0 0 10.666667 10.666667h448a10.666667 10.666667 0 0 0 10.666666-10.666667V181.333333a10.666667 10.666667 0 0 0-10.666666-10.666666H394.666667z m245.333333 597.333333a32 32 0 0 1 64 0v74.666667a74.666667 74.666667 0 0 1-74.666667 74.666666H181.333333a74.666667 74.666667 0 0 1-74.666666-74.666666V394.666667a74.666667 74.666667 0 0 1 74.666666-74.666667h74.666667a32 32 0 0 1 0 64h-74.666667a10.666667 10.666667 0 0 0-10.666666 10.666667v448a10.666667 10.666667 0 0 0 10.666666 10.666666h448a10.666667 10.666667 0 0 0 10.666667-10.666666v-74.666667z"
|
||
p-id="1521"></path>
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
<el-divider style="margin: 0!important;"></el-divider>
|
||
<div v-if="role.includes('客户')"
|
||
style="padding: 0 18px; width: 100%;height: 60px;display: flex;justify-content: space-between;align-items: center">
|
||
<span style="color:#666;display: block;font-size: 14px;" class="moneyNow">
|
||
<span style="display: block;margin-bottom: 5px">余额</span>
|
||
{{ mybalance ? mybalance : initMybalance() }} ￥
|
||
</span>
|
||
<el-button v-if="!isShowKbossCharge" type="primary" @click="$router.push('/kbossCharge')" plain
|
||
style="padding: 8px; ">
|
||
充值
|
||
</el-button>
|
||
</div>
|
||
<el-dropdown-item v-if="role.includes('客户')" @click.native="$router.push('/customer/customerInformation')">
|
||
<span style="display: block">个人中心</span>
|
||
</el-dropdown-item>
|
||
<el-dropdown-item @click.native="edituserPassword()">
|
||
<span style="display: block">修改密码</span>
|
||
</el-dropdown-item>
|
||
<el-dropdown-item @click.native="logout">
|
||
<span style="display: block">退出登录</span>
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
</div>
|
||
|
||
<!-- 消息中心组件 -->
|
||
<message-center
|
||
ref="messageCenter"
|
||
:userId="userId"
|
||
:visible.sync="messageCenterVisible"
|
||
@unread-count-update="handleUnreadCountUpdate"
|
||
/>
|
||
|
||
<!-- 修改密码弹窗 -->
|
||
<el-dialog title="修改密码" :visible.sync="passwordDialog" width="45%" :before-close="handleClose1"
|
||
custom-class="password-dialog" class="password-dialog-wrapper">
|
||
<el-form ref="passwordForm" :model="passwordForm" label-width="120px" style="width: 80%" :rules="rules">
|
||
<el-form-item label="旧密码:" prop="password">
|
||
<el-input v-model="passwordForm.password" placeholder="请输入旧密码" show-password></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="新密码:" prop="newpassword">
|
||
<el-input v-model="passwordForm.newpassword" placeholder="请输入新密码" show-password></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="新密码:" prop="configPassword">
|
||
<el-input v-model="passwordForm.configPassword" placeholder="请确认新密码" show-password></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="cancelPassword()" size="small">取 消</el-button>
|
||
<el-button size="small" type="primary" @click="onsubmit()">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<!-- 修改个人信息弹窗 -->
|
||
<el-dialog title="修改个人信息" :visible.sync="editUserInfoDialog" width="45%" :before-close="handleClose2"
|
||
style="width: 80%" class="userInfoDialog">
|
||
<el-form ref="editUserInfoForm" :model="editUserInfoForm" label-width="120px" style="width: 70%"
|
||
:rules="editRules">
|
||
<el-form-item label="昵称:" prop="">
|
||
<el-input v-model="editUserInfoForm.nick_name" placeholder="请输入昵称"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="邮件地址:" prop="">
|
||
<el-input v-model="editUserInfoForm.email" placeholder="请输入邮件地址"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="地址:" prop="">
|
||
<el-input v-model="editUserInfoForm.address" placeholder="请输入地址"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="手机号:" prop="mobile">
|
||
<el-input v-model="editUserInfoForm.mobile" placeholder="请输入手机号"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="二维码名片:" prop="">
|
||
<div class="upload-box">
|
||
<el-upload style="height: 60px; width: 60px;" class="avatar-uploader" action="#" :show-file-list="false"
|
||
:auto-upload="false" :on-change="handleAvatarSuccess">
|
||
<img style="height: 60px; width: 60px" v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||
<i style="height: 60px; width: 60px" v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||
</el-upload>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="cancelEdit()" size="small">取 消</el-button>
|
||
<el-button size="small" type="primary" @click="editOnsubmit()">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<!-- 主题设置 -->
|
||
<el-button type="text" @click="dialogFormVisible = true" v-if="this.$store.state.operationAnalysis.themeStates"
|
||
class="themeBtn">
|
||
<img src="../../icons/svg/主题.png" alt="" style="width: 26px;height: 26px;">
|
||
</el-button>
|
||
|
||
<el-dialog title="图表主题设置" :visible.sync="dialogFormVisible" class="themeStyle">
|
||
<el-form :model="form">
|
||
<el-form-item label="柱状图:" :label-width="formLabelWidth">
|
||
<div class="gridForm">
|
||
图表的颜色:
|
||
<el-color-picker v-model="newGridObj.bar.color"></el-color-picker>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="同比折线图:" :label-width="formLabelWidth">
|
||
<div class="gridForm">
|
||
折线的颜色:
|
||
<el-color-picker v-model="newGridObj.lineTong.color"></el-color-picker>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="环比折线图:" :label-width="formLabelWidth">
|
||
<div class="gridForm">
|
||
折线的颜色:
|
||
<el-color-picker v-model="newGridObj.lineHuan.color"></el-color-picker>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="changeColor">确 定</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 促销邀请码 -->
|
||
<el-dialog title="促销邀请码" :visible.sync="cuxiaoIsShow" custom-class="cuxiao-style">
|
||
<promotional-invitation-code @acceptSonMessage="acceptSonMessage"></promotional-invitation-code>
|
||
</el-dialog>
|
||
|
||
<!-- 渠道管理 -->
|
||
<el-dialog title="渠道管理信息提示" :visible.sync="channelManagementShow" custom-class="channel-dialog-style">
|
||
<span
|
||
class="indent">开元云公司作为一级分销商面对直接客户，售出设备产品。产品由供应商上传平台，设置产品价格配置，及设备账号密码等配置信息，开元云进行审核，审核通过产品上线，客户可直接购买。开元云可以将产品分配给各供应商销售，分配时配置给供应商的折扣，供应商得到产品及开元云的折扣后，设置折扣面向客户，客户通过kboss进行购买，分销商的客户如自己上传产品，也可以成为开元云的供应商。</span>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="channelManagementShow = false">取 消</el-button>
|
||
<el-button type="primary" @click="ChannelConfirmBtn">我已知晓，并进行后续操作</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<!-- 搜索对话框 -->
|
||
<el-dialog title="全站搜索" :visible.sync="searchDialogVisible" width="800px" :close-on-click-modal="false"
|
||
:before-close="handleClose">
|
||
<el-input placeholder="请输入搜索关键字" v-model="searchValue" class="input-with-select">
|
||
<el-button @click="searchBtn" :loading="searchLoading" slot="append" icon="el-icon-search"></el-button>
|
||
</el-input>
|
||
|
||
<ul v-loading="searchLoading" class="searchUl" v-if="searchResultList.length > 0">
|
||
<li v-for="(item, index) in searchResultList" :key="index">
|
||
<span class="title" @click="goProductPage(item)">
|
||
<div style="margin-right: 5px">{{ item.product_name }}</div> <img v-if="item.type == 'jd'"
|
||
src="./images/京东云.svg" alt="">
|
||
<img v-else-if="item.type == 'bd'" src="./images/百度智能云.svg" alt="">
|
||
</span>
|
||
<span class="description">{{ item.description }}</span>
|
||
</li>
|
||
</ul>
|
||
<div v-loading="searchLoading" class="searchEmpty" v-else>
|
||
<img style="width: 200px;height: 200px;" src="./images/empty.svg" alt="">
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
</span>
|
||
</el-dialog>
|
||
|
||
<el-drawer direction="ltr" style="z-index: 1000;width: 1205px" title="" custom-class="myDrawer"
|
||
:visible.sync="drawerPro" :with-header="false">
|
||
<div style="width: 100%;height: 100%;background: white">
|
||
<ul class="allProStyle">
|
||
<li @click="goHomePage"><img src="./img/a.svg" alt=""> 阿里云</li>
|
||
<li @click="goHomePage"><img src="./img/b.svg" alt="">百度智能云</li>
|
||
</ul>
|
||
</div>
|
||
</el-drawer>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters, mapState } from "vuex";
|
||
import Breadcrumb from "@/components/Breadcrumb";
|
||
import Hamburger from "@/components/Hamburger";
|
||
import Screenfull from "@/components/Screenfull";
|
||
import SizeSelect from "@/components/SizeSelect";
|
||
import Search from "@/components/HeaderSearch";
|
||
import InForm from "@/components/Inform";
|
||
import barObj from "@/views/operation/variable";
|
||
import {
|
||
getUserInfoAPI,
|
||
editUserInfoAPI,
|
||
logoutAPI,
|
||
editPasswordAPI,
|
||
getTimeAPI,
|
||
addPictureAPI,
|
||
getPictureAPI,
|
||
getOpictureAPI,
|
||
addOpictureAPI
|
||
} from "@/api/login";
|
||
import messagedrawer from "@/layout/components/inFram/message";
|
||
import store from "@/store";
|
||
import PromotionalInvitationCode from "@/views/customer/promotionalInvitationCode/index.vue";
|
||
import { reqApplyChannel } from "@/api/customer/channel";
|
||
import { reqSearchProductList } from "@/api/product/product";
|
||
import { bdProducts, jdProducts } from "@/views/product/productionData";
|
||
import { getHomePath } from "@/views/setting/tools";
|
||
|
||
// 导入消息中心组件
|
||
import MessageCenter from '@/components/MessageCenter/MessageCenter.vue'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
messageCenterVisible: false, // 控制消息中心显示
|
||
drawerPro: false,
|
||
searchLoading: false,
|
||
searchResultList: [],
|
||
searchValue: '',
|
||
searchDialogVisible: false,
|
||
channelManagementShow: false,
|
||
isMobileScreen: false,
|
||
cuxiaoIsShow: false,
|
||
isShowKbossCharge: false,
|
||
isLocalhost: false,
|
||
userAgent: window.navigator.userAgent,
|
||
imageUrl: '',
|
||
messageCount: 0, // 未读消息数量
|
||
userInfoList: [],
|
||
editUserInfoForm: {
|
||
nick_name: "",
|
||
email: "",
|
||
address: "",
|
||
mobile: "",
|
||
},
|
||
passwordForm: {
|
||
password: "",
|
||
newpassword: "",
|
||
configPassword: "",
|
||
},
|
||
rules: {
|
||
password: [
|
||
{ required: true, message: "请输入旧密码", trigger: "blur" },
|
||
],
|
||
newpassword: [
|
||
{ required: true, message: "请输入新密码", trigger: "blur" },
|
||
],
|
||
configPassword: [
|
||
{ required: true, message: "请确认新密码", trigger: "blur" },
|
||
],
|
||
},
|
||
editRules: {
|
||
mobile: [
|
||
{
|
||
pattern:
|
||
/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
|
||
message: "请输入有效的手机号",
|
||
},
|
||
{ message: "请输入有效的手机号", trigger: "change" },
|
||
],
|
||
},
|
||
squareUrl:
|
||
"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
|
||
passwordDialog: false,
|
||
editUserInfoDialog: false,
|
||
nick_name: JSON.parse(localStorage.getItem('user_info'))?.username || '用户',
|
||
userId: sessionStorage.getItem("userId") || '',
|
||
org_type: sessionStorage.getItem("org_type"),
|
||
role: sessionStorage.getItem("jueseNew") == "admin" ? [] : sessionStorage.getItem("jueseNew"),
|
||
dialogTableVisible: false,
|
||
dialogFormVisible: false,
|
||
form: {
|
||
name: '',
|
||
region: '',
|
||
date1: '',
|
||
date2: '',
|
||
delivery: false,
|
||
type: [],
|
||
resource: '',
|
||
desc: ''
|
||
},
|
||
formLabelWidth: '120px',
|
||
color1: '#409EFF',
|
||
color2: null,
|
||
themeState: '',
|
||
newGridObj: {
|
||
bar: {
|
||
color: '#0798DB'
|
||
},
|
||
lineTong: {
|
||
color: '#D2EB2D'
|
||
},
|
||
lineHuan: {
|
||
color: '#F51515'
|
||
},
|
||
},
|
||
currentFile: null
|
||
};
|
||
},
|
||
components: {
|
||
MessageCenter, // 注册消息中心组件
|
||
PromotionalInvitationCode,
|
||
Breadcrumb,
|
||
Hamburger,
|
||
Screenfull,
|
||
SizeSelect,
|
||
Search,
|
||
InForm,
|
||
messagedrawer,
|
||
},
|
||
computed: {
|
||
...mapGetters(["sidebar", "avatar", "device"]),
|
||
...mapState({
|
||
gridObj: state => state.operationAnalysis.gridObj,
|
||
mybalance: state => state.user.mybalance,
|
||
logoutUrl: state => state.login.logoutUrl,
|
||
})
|
||
},
|
||
created() {
|
||
this.getUserInfo();
|
||
this.themeState = sessionStorage.getItem('themeState')
|
||
this.handleResize()
|
||
},
|
||
methods: {
|
||
// 处理消息点击
|
||
handleMessageClick() {
|
||
const userId = sessionStorage.getItem('userId');
|
||
if (!userId) {
|
||
this.$message.warning('请先登录');
|
||
this.$router.push('/login');
|
||
return;
|
||
}
|
||
this.messageCenterVisible = true;
|
||
if (this.$refs.messageCenter) {
|
||
this.$refs.messageCenter.open();
|
||
}
|
||
},
|
||
|
||
// 处理未读消息数量更新
|
||
handleUnreadCountUpdate(count) {
|
||
this.messageCount = count;
|
||
},
|
||
|
||
goHomePage() {
|
||
this.$router.push('/homePage/index')
|
||
this.$store.commit('setShowHomeNav', true)
|
||
},
|
||
openChou() {
|
||
this.drawerPro = true
|
||
},
|
||
handleClose() {
|
||
this.searchDialogVisible = false
|
||
this.searchValue = ''
|
||
this.searchResultList = []
|
||
},
|
||
goProductPage(item) {
|
||
this.searchValue = ''
|
||
this.searchResultList = []
|
||
this.searchDialogVisible = false
|
||
console.log(item)
|
||
if (item.type === "bd") {
|
||
if (bdProducts['网络'].includes(item.product_name)) {
|
||
console.log("对等连接~~")
|
||
this.$router.push({
|
||
path: '/product/baiduProduct',
|
||
query: { product_name: '网络' }
|
||
})
|
||
} else if (bdProducts['存储'].includes(item.product_name)) {
|
||
this.$router.push({
|
||
path: 'baiduProduct',
|
||
query: { product_name: '存储' }
|
||
})
|
||
} else if (bdProducts['云与业务安全'].includes(item.product_name)) {
|
||
this.$router.push({
|
||
path: 'baiduProduct',
|
||
query: { product_name: '云与业务安全' }
|
||
})
|
||
} else if (bdProducts['计算'].includes(item.product_name)) {
|
||
console.log("跳转了")
|
||
this.$router.push({
|
||
path: 'baiduProduct',
|
||
query: { product_name: '计算' }
|
||
})
|
||
} else if (bdProducts['数据库'].includes(item.product_name)) {
|
||
this.$router.push({
|
||
path: 'baiduProduct',
|
||
query: { product_name: '数据库' }
|
||
})
|
||
} else {
|
||
this.$router.push({
|
||
path: 'baiduProduct',
|
||
query: { product_name: 'AI能力引擎' }
|
||
})
|
||
}
|
||
} else if (item.type === "jd") {
|
||
if (jdProducts['网络与CDN'].includes(item.product_name)) {
|
||
this.$router.push({
|
||
name: 'jdProduct',
|
||
params: { product_name: '网络与CDN' }
|
||
})
|
||
} else if (jdProducts['存储'].includes(item.product_name)) {
|
||
this.$router.push({
|
||
name: 'jdProduct',
|
||
params: { product_name: '存储' }
|
||
})
|
||
} else if (jdProducts['安全'].includes(item.product_name)) {
|
||
this.$router.push({
|
||
name: 'jdProduct',
|
||
params: { product_name: '安全' }
|
||
})
|
||
} else if (jdProducts['弹性计算'].includes(item.product_name)) {
|
||
this.$router.push({
|
||
name: 'jdProduct',
|
||
params: { product_name: '弹性计算' }
|
||
})
|
||
} else if (jdProducts['数据库'].includes(item.product_name)) {
|
||
this.$router.push({
|
||
name: 'jdProduct',
|
||
params: { product_name: '数据库' }
|
||
})
|
||
} else {
|
||
this.$router.push('/product/jdProduct')
|
||
}
|
||
} else if (item.type === "sdzx") {
|
||
this.$router.push('/gpu/createGpu')
|
||
} else if (item.type === "ucloud") {
|
||
this.$router.push('/product/ucloudProduct/createCloudHost')
|
||
}
|
||
},
|
||
searchBtn() {
|
||
if (!this.searchValue) {
|
||
return
|
||
}
|
||
this.searchLoading = true
|
||
reqSearchProductList({ name: this.searchValue }).then(res => {
|
||
this.searchLoading = false
|
||
if (res.status) {
|
||
this.searchResultList = res.data
|
||
} else {
|
||
this.searchResultList = []
|
||
}
|
||
})
|
||
},
|
||
showSearch() {
|
||
this.searchDialogVisible = true
|
||
},
|
||
goScreen() {
|
||
window.open('https://www.opencomputing.cn/#/screen/k8sRescource', '_blank');
|
||
},
|
||
channelFirstBtn() {
|
||
reqApplyChannel({ user_id: this.userId }).then(res => {
|
||
if (res.code == "100" || res.code == "210") {
|
||
this.$message.success(res.msg)
|
||
} else if (res.code == "300") {
|
||
this.channelManagementShow = true
|
||
} else if (res.code == "200") {
|
||
this.$router.push('/customer/channelMangement')
|
||
}
|
||
})
|
||
},
|
||
ChannelConfirmBtn() {
|
||
reqApplyChannel({ user_id: this.userId, code: '200' }).then(res => {
|
||
if (res.status) {
|
||
this.$message.success("申请渠道成功，后续会有相关人员和您沟通~")
|
||
this.channelManagementShow = false
|
||
} else {
|
||
this.$message.error("申请渠道失败~")
|
||
}
|
||
})
|
||
},
|
||
handleResize() {
|
||
if (window.matchMedia('(max-width: 760px)').matches) {
|
||
this.isMobileScreen = true;
|
||
} else {
|
||
this.isMobileScreen = false;
|
||
}
|
||
},
|
||
beforeDestroy() {
|
||
window.removeEventListener('resize', this.handleResize);
|
||
},
|
||
acceptSonMessage(value) {
|
||
this.cuxiaoIsShow = value
|
||
},
|
||
showCode() {
|
||
this.cuxiaoIsShow = true
|
||
},
|
||
handleShow(isShow) {
|
||
let resverNode = document.getElementById('resverIcon')
|
||
if (isShow) {
|
||
if (this.role.includes('客户')) {
|
||
this.$store.dispatch('user/getCustmoersMoney')
|
||
}
|
||
resverNode.style.transform = 'rotate(180deg)'
|
||
} else {
|
||
resverNode.style.transform = 'rotate(0)'
|
||
}
|
||
},
|
||
initMybalance() {
|
||
return sessionStorage.getItem('mybalance')
|
||
},
|
||
copyBtn() {
|
||
const textToCopy = this.$refs.contentToCopy.innerText;
|
||
navigator.clipboard.writeText(textToCopy).then(() => {
|
||
this.$message.success('复制成功！')
|
||
}).catch((error) => {
|
||
console.error('复制失败', error);
|
||
});
|
||
},
|
||
handleAvatarSuccess(file, fileList) {
|
||
this.imageUrl = URL.createObjectURL(file.raw);
|
||
this.currentFile = file;
|
||
},
|
||
personalMessage() {
|
||
this.$router.push('/customer/customerInformation')
|
||
},
|
||
async getUserInfo() {
|
||
if (!this.userId) return;
|
||
|
||
getUserInfoAPI({ id: this.userId }).then((res) => {
|
||
if (res.status == true) {
|
||
this.userInfoList = res.data;
|
||
sessionStorage.setItem("orgid", res.data[0].orgid);
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
},
|
||
goShopping() {
|
||
this.$router.push("/product/shoppingCart");
|
||
},
|
||
toggleSideBar() {
|
||
this.$store.dispatch("app/toggleSideBar");
|
||
},
|
||
edituserPassword() {
|
||
this.passwordDialog = true;
|
||
},
|
||
onsubmit() {
|
||
this.$refs.passwordForm.validate((valid) => {
|
||
if (valid) {
|
||
if (
|
||
this.passwordForm.newpassword == this.passwordForm.configPassword
|
||
) {
|
||
let params = {
|
||
id: this.userId,
|
||
password: this.passwordForm.password,
|
||
newpassword: this.passwordForm.newpassword,
|
||
};
|
||
editPasswordAPI(params).then((res) => {
|
||
if (res.status == true) {
|
||
this.$message({
|
||
message: "密码修改成功",
|
||
type: "success",
|
||
});
|
||
this.passwordDialog = false;
|
||
this.$router.push({ name: "Login" });
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
});
|
||
} else {
|
||
this.$message({
|
||
message: "新旧密码不一致",
|
||
type: "error",
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
async edituser() {
|
||
this.editUserInfoDialog = true;
|
||
if (this.role == '运营') {
|
||
this.getOpicture()
|
||
} else {
|
||
this.getPicture()
|
||
}
|
||
await this.getUserInfo();
|
||
this.editUserInfoForm.email = this.userInfoList[0].email;
|
||
this.editUserInfoForm.address = this.userInfoList[0].address;
|
||
this.editUserInfoForm.mobile = this.userInfoList[0].mobile;
|
||
},
|
||
getPicture() {
|
||
if (!this.userId) return;
|
||
|
||
let params = {
|
||
userid: this.userId
|
||
}
|
||
getPictureAPI(params).then(res => {
|
||
this.imageUrl = res.picture_url ? res.picture_url : null;
|
||
})
|
||
},
|
||
getOpicture() {
|
||
if (!this.userId) return;
|
||
|
||
let params = {
|
||
userid: this.userId
|
||
}
|
||
getOpictureAPI(params).then(res => {
|
||
this.imageUrl = res.data ? res.data : null;
|
||
})
|
||
},
|
||
editOnsubmit() {
|
||
this.editUserInfoForm.contactor_phone = this.editUserInfoForm.mobile;
|
||
editUserInfoAPI({ ...this.editUserInfoForm, id: this.userId, }).then(
|
||
(res) => {
|
||
if (res.status == true) {
|
||
this.$message({
|
||
message: "修改成功",
|
||
type: "success",
|
||
});
|
||
this.getUserInfo();
|
||
this.editUserInfoDialog = false;
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
}
|
||
);
|
||
let params = {
|
||
userid: this.userId
|
||
}
|
||
let formData = this.getFormData(params);
|
||
formData.append("picture", this.currentFile.raw);
|
||
if (this.role == '运营') {
|
||
addOpictureAPI(formData).then(res => {
|
||
if (res.status) {
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
})
|
||
} else {
|
||
addPictureAPI(formData).then(res => {
|
||
if (res.status) {
|
||
} else {
|
||
this.$message({
|
||
message: res.msg,
|
||
type: "error",
|
||
});
|
||
}
|
||
})
|
||
}
|
||
},
|
||
handleClose1() {
|
||
this.$refs.passwordForm.resetFields();
|
||
this.passwordDialog = false;
|
||
},
|
||
handleClose2() {
|
||
this.$refs.editUserInfoForm.resetFields();
|
||
this.editUserInfoDialog = false;
|
||
},
|
||
cancelPassword() {
|
||
this.passwordDialog = false;
|
||
},
|
||
cancelEdit() {
|
||
this.$refs.editUserInfoForm.resetFields();
|
||
this.editUserInfoDialog = false;
|
||
},
|
||
async logout() {
|
||
store.commit('tagsView/resetBreadcrumbState');
|
||
store.commit('permission/RESET_ROUTES');
|
||
sessionStorage.removeItem("auths");
|
||
sessionStorage.removeItem("routes");
|
||
sessionStorage.removeItem("user");
|
||
sessionStorage.removeItem("userId");
|
||
sessionStorage.removeItem("org_type")
|
||
sessionStorage.removeItem("userType");
|
||
sessionStorage.removeItem("orgType");
|
||
sessionStorage.removeItem("roles");
|
||
sessionStorage.removeItem("juese");
|
||
sessionStorage.removeItem("jueseNew");
|
||
localStorage.removeItem('userId')
|
||
localStorage.removeItem("auths");
|
||
localStorage.removeItem("routes");
|
||
localStorage.removeItem("user");
|
||
localStorage.removeItem("userId");
|
||
localStorage.removeItem("org_type")
|
||
sessionStorage.removeItem('userId')
|
||
this.$store.commit('setLoginState', false)
|
||
await this.$router.push(getHomePath());
|
||
},
|
||
async logout1() {
|
||
logoutAPI().then((res) => {
|
||
});
|
||
let url = window.location.href;
|
||
await this.$router.push(`/login`);
|
||
store.commit('tagsView/resetBreadcrumbState');
|
||
store.commit('permission/RESET_ROUTES');
|
||
sessionStorage.removeItem("auths");
|
||
sessionStorage.removeItem("routes");
|
||
sessionStorage.removeItem("user");
|
||
sessionStorage.removeItem("userId");
|
||
sessionStorage.removeItem("userType");
|
||
sessionStorage.removeItem("orgType");
|
||
sessionStorage.removeItem("roles");
|
||
sessionStorage.removeItem("juese");
|
||
sessionStorage.removeItem("jueseNew");
|
||
},
|
||
changeColor() {
|
||
this.dialogFormVisible = false
|
||
this.$store.commit('operationAnalysis/setGridObj', this.newGridObj)
|
||
localStorage.setItem('gridObj', JSON.stringify(this.newGridObj))
|
||
},
|
||
getFormData(object) {
|
||
const formData = new FormData();
|
||
Object.keys(object).forEach((key) => {
|
||
const value = object[key];
|
||
if (Array.isArray(value)) {
|
||
value.forEach((subValue, i) => {
|
||
formData.append(key + `[${i}]`, subValue);
|
||
});
|
||
} else {
|
||
formData.append(key, object[key]);
|
||
}
|
||
});
|
||
return formData;
|
||
},
|
||
},
|
||
watch: {
|
||
gridObj: {
|
||
handler(newValue, oldValue) {
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.role = sessionStorage.getItem("jueseNew")
|
||
if (this.role.includes('客户')) {
|
||
}
|
||
if (window.location.href.includes('kbossCharge')) {
|
||
this.isShowKbossCharge = true
|
||
}
|
||
if (JSON.parse(localStorage.getItem('gridObj')) != {}) {
|
||
}
|
||
this.isLocalhost = window.location.href.includes('localhost') || window.location.href.includes('xterm')
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less">
|
||
::v-deep .password-dialog {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.el-dialog {
|
||
margin: 0 auto !important;
|
||
position: relative;
|
||
top: 0;
|
||
|
||
@media screen and (max-width: 1200px) {
|
||
width: 70% !important;
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
width: 90% !important;
|
||
}
|
||
}
|
||
|
||
.el-dialog__header {
|
||
text-align: center;
|
||
}
|
||
|
||
.el-dialog__body {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
|
||
.password-dialog-wrapper {
|
||
::v-deep .el-dialog {
|
||
margin-top: 0 !important;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
.channel-dialog-style {
|
||
position: relative;
|
||
width: 700px;
|
||
height: 350px;
|
||
|
||
.indent {
|
||
line-height: 35px;
|
||
}
|
||
|
||
.el-dialog__footer {
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
|
||
.indent {
|
||
display: block;
|
||
/* 将 span 元素转换为块级元素 */
|
||
text-indent: 2em;
|
||
/* 设置首行缩进的大小为 2 个字符 */
|
||
line-height: 25px;
|
||
}
|
||
|
||
.el-divider--horizontal {
|
||
margin: 0;
|
||
}
|
||
|
||
.navbar {
|
||
.userInfoDialog {
|
||
.avatar-uploader .el-upload {
|
||
border: 1px dashed #d9d9d9;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.avatar-uploader .el-upload:hover {
|
||
border-color: #409eff;
|
||
}
|
||
|
||
.avatar-uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
height: 60px;
|
||
width: 60px;
|
||
line-height: 60px;
|
||
text-align: center;
|
||
border: 1px solid #d9d9d9;
|
||
}
|
||
}
|
||
|
||
.drawer {
|
||
.el-table .readColor {
|
||
color: rgb(146, 192, 146) !important;
|
||
}
|
||
|
||
.el-table .unReadColor {
|
||
color: rgb(175, 179, 175) !important;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
.logo {
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 15px;
|
||
transform: translate(0, -50%);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
img {
|
||
width: 45px;
|
||
height: 45px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
}
|
||
|
||
//.resverIcon:hover {
|
||
// transform: rotate(180deg);
|
||
// border: 1px solid red;
|
||
//}
|
||
|
||
//.nick-name-style:hover .resverIcon {
|
||
//transition: transform 250ms ease; /* 设置初始过渡时间为250毫秒 */
|
||
//transform: rotate(180deg);
|
||
//transform: rotate(180deg);
|
||
//}
|
||
|
||
|
||
.navbar {
|
||
|
||
overflow: hidden;
|
||
position: relative;
|
||
background: #fff;
|
||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||
|
||
.hamburger-container {
|
||
line-height: 46px;
|
||
height: 100%;
|
||
float: left;
|
||
cursor: pointer;
|
||
transition: background 0.3s;
|
||
-webkit-tap-highlight-color: transparent;
|
||
|
||
&:hover {
|
||
background: rgba(0, 0, 0, 0.025);
|
||
}
|
||
}
|
||
|
||
.breadcrumb-container {
|
||
float: left;
|
||
}
|
||
|
||
.errLog-container {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.right-menu {
|
||
// float: right;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100%;
|
||
padding: 10px;
|
||
|
||
//.shopCar {
|
||
// padding-top: 19px;
|
||
//}
|
||
|
||
&:focus {
|
||
outline: none;
|
||
}
|
||
|
||
.right-menu-item {
|
||
display: inline-block;
|
||
padding: 0 8px;
|
||
height: 100%;
|
||
font-size: 18px;
|
||
color: #5a5e66;
|
||
vertical-align: text-bottom;
|
||
|
||
//.badge {
|
||
// margin-top: 10px;
|
||
//margin-right: 10px;
|
||
//}
|
||
|
||
&.hover-effect {
|
||
|
||
cursor: pointer;
|
||
transition: background 0.3s;
|
||
|
||
&:hover {
|
||
background: rgba(0, 0, 0, 0.025);
|
||
}
|
||
}
|
||
}
|
||
|
||
.avatar-container {
|
||
margin-right: 30px;
|
||
|
||
.avatar-wrapper {
|
||
// margin-top: 5px;
|
||
position: relative;
|
||
|
||
.user-avatar {
|
||
cursor: pointer;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.el-icon-caret-bottom {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
right: -20px;
|
||
top: 25px;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.drawerMobile {
|
||
.container {
|
||
height: 100vh;
|
||
|
||
.aside {
|
||
.header {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.title {
|
||
.info {
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content_box {
|
||
.header {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.content {
|
||
.allinfo {
|
||
.button {
|
||
display: flex;
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.readinfo {
|
||
.button {
|
||
display: flex;
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.noreadinfo {
|
||
.button {
|
||
display: flex;
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//通知框样式
|
||
//tatle背景色设置
|
||
::v-deep .el-drawer {
|
||
background: #d9dee4;
|
||
color: black;
|
||
}
|
||
|
||
.aside {
|
||
padding: 0;
|
||
margin: 0;
|
||
|
||
.header {
|
||
padding-left: 20px;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
font-weight: 600;
|
||
background-color: #d9dee4;
|
||
}
|
||
|
||
.title div {
|
||
padding-left: 35px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
}
|
||
|
||
.title div:hover {
|
||
background-color: #f4f6f8;
|
||
}
|
||
}
|
||
|
||
.content_box {
|
||
background-color: #fff;
|
||
padding: 0 10px;
|
||
|
||
.header {
|
||
font-size: 22px;
|
||
line-height: 60px;
|
||
border-bottom: 1px solid rgb(65, 65, 65);
|
||
}
|
||
|
||
//.msgtext {
|
||
// height: 100px;
|
||
//}
|
||
|
||
.button {
|
||
padding-bottom: 10px;
|
||
}
|
||
}
|
||
|
||
.themeStyle {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.themeBtn {
|
||
position: absolute;
|
||
right: 250px;
|
||
top: 0;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.gridForm {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.el-dropdown-menu__item--divided {
|
||
border-top: 0;
|
||
}
|
||
|
||
.copy-btn {
|
||
margin-left: 5px;
|
||
|
||
&:hover {
|
||
fill: #7f7dda !important;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.moneyNow {
|
||
&:hover {
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 760px) {
|
||
.logo {
|
||
display: none;
|
||
}
|
||
|
||
.hamburger-container {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.el-dropdown-menu {
|
||
background-color: #ffffff;
|
||
padding-top: 0;
|
||
}
|
||
|
||
::v-deep .el-popper .popper__arrow::after {
|
||
top: 1px;
|
||
margin-left: -6px;
|
||
border-top-width: 0;
|
||
border-bottom-color: #255fd5 !important;
|
||
}
|
||
|
||
.searchUl,
|
||
.searchEmpty {
|
||
|
||
height: 250px;
|
||
width: 100%;
|
||
|
||
* {
|
||
padding: 0;
|
||
margin: 0;
|
||
list-style: none;
|
||
}
|
||
}
|
||
|
||
.searchEmpty {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.searchUl {
|
||
overflow-y: auto;
|
||
padding-top: 10px;
|
||
|
||
li {
|
||
list-style: none;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
margin-bottom: 10px;
|
||
|
||
.title {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
font-weight: 700;
|
||
font-size: 15px;
|
||
transition: all .3s ease-in-out;
|
||
|
||
&:hover {
|
||
transition: all .3s ease-in-out;
|
||
color: blue;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.description {
|
||
color: #949498;
|
||
display: inline-block;
|
||
font-size: 13px;
|
||
margin-top: 3px;
|
||
line-height: 18px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
.cuxiao-style {
|
||
width: 500px;
|
||
height: 250px;
|
||
|
||
}
|
||
|
||
@media screen and (max-width: 760px) {
|
||
.logo {
|
||
display: none;
|
||
}
|
||
|
||
.cuxiao-style {
|
||
width: 95% !important;
|
||
}
|
||
}
|
||
|
||
.allProStyle {
|
||
padding: 15px;
|
||
|
||
li {
|
||
width: fit-content;
|
||
margin: 15px 0;
|
||
font-size: 18px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
transition: all .3s ease-in-out;
|
||
|
||
&:hover {
|
||
color: #1b5bff;
|
||
}
|
||
|
||
img {
|
||
margin-right: 5px;
|
||
width: 25px;
|
||
height: 25px;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
::v-deep .ltr {
|
||
width: 100% !important;
|
||
}
|
||
|
||
.imgUser {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 20px;
|
||
height: 20px;
|
||
border-radius: 50%;
|
||
background: #081020;
|
||
color: white;
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
::v-deep .myDrawer {
|
||
width: 100% !important;
|
||
}
|
||
</style>
|