优化客户端展示

This commit is contained in:
龙运模 2024-11-25 22:45:06 +08:00
parent c9ea49826c
commit feb5693789
8 changed files with 464 additions and 97 deletions

View File

@ -5,15 +5,15 @@ NODE_ENV = production
VUE_APP_TITLE = 象纬云科
# 测试环境
VUE_APP_API_BASEURL = https://dev.api.linkwing.com/api/v1
VUE_APP_API_DEV = https://dev.api.linkwing.com/api/v1
VUE_APP_WS_URL = wss://dev.api.linkwing.com/wss
VUE_APP_WSS_URL = wss://dev.api.linkwing.com/wss
# VUE_APP_API_BASEURL = https://dev.api.linkwing.com/api/v1
# VUE_APP_API_DEV = https://dev.api.linkwing.com/api/v1
# VUE_APP_WS_URL = wss://dev.api.linkwing.com/wss
# VUE_APP_WSS_URL = wss://dev.api.linkwing.com/wss
# 线上环境
# 接口地址 # WS地址
# VUE_APP_API_BASEURL = https://prod.api.linkwing.com/api/v1
# VUE_APP_API_DEV = https://prod.api.linkwing.com/api/v1
# VUE_APP_WS_URL = wss://prod.api.linkwing.com/wss
# VUE_APP_WSS_URL = wss://prod.api.linkwing.com/wss
VUE_APP_API_BASEURL = https://prod.api.linkwing.com/api/v1
VUE_APP_API_DEV = https://prod.api.linkwing.com/api/v1
VUE_APP_WS_URL = wss://prod.api.linkwing.com/wss
VUE_APP_WSS_URL = wss://prod.api.linkwing.com/wss

View File

@ -47,8 +47,14 @@ router.beforeEach(async (to, from, next) => {
next();
return false;
}
// console.log(routes,to,6999)
if(routes.findIndex(r => r.path === to.path) >= 0){
// if(to.toShow && !token){
// next({
// path: '/login'
// });
// return false;
// }
next();
return false;
}

View File

@ -21,7 +21,7 @@ const routes = [
component:()=>import(/* webpackChunkName: "bindWechat" */ '@/views/login/bindWechat'),
meta:{
title:'绑定微信'
}
},
},
{
path:"/bind_dingtalk",
@ -56,21 +56,24 @@ const routes = [
component: () => import(/* webpackChunkName: "serveView" */ '@/views/serveView'),
meta: {
title: "信息服务"
}
},
tokenShow:true
},
{
path: "/maintenance",
component: () => import(/* webpackChunkName: "serveView" */ '@/views/maintenance'),
meta: {
title: "维保服务"
}
},
tokenShow:true
},
{
path: "/personalCenter",
component: () => import(/* webpackChunkName: "personalCenter" */ '@/views/personalCenter'),
meta: {
title: "个人中心"
}
},
tokenShow:true
},
]

View File

@ -26,8 +26,70 @@
<el-button type="primary" @click="save" :size="size" :loading="isSave"> </el-button>
</el-form-item>
</el-form>
<div class="bindBxo">
<div class="title" style="margin-top: 5px;">账号绑定</div>
<div class="boxView">
<div class="leftImg">
<div class="leftIcon wechat" v-if="wechat.open_id=='' || wechat.avatar==''"><i class="el-icon"><sc-icon-WechartRound/></i></div>
<div class="leftIcon" v-else>
<el-avatar :size="38" :src="wechat.avatar" />
</div>
<div class="nameBox">
<div class="titleName nameRed" v-if="wechat.open_id==''">绑定微信</div>
<div class="titleName" v-else>{{wechat.nick_name==""?'-':wechat.nick_name}}</div>
<div class="msg">绑定微信用于账号登录,客服咨询及其它消息提醒</div>
</div>
</div>
<div class="rightBtn">
<el-button type="primary" :size="size" v-if="wechat.open_id==''" @click="bindWechat"> </el-button>
<el-button type="primary" :size="size" v-else plain @click="secureDingTalk(1)"> </el-button>
</div>
</div>
<div class="boxView">
<div class="leftImg">
<div class="leftIcon alipay" v-if="dingTalk.open_id=='' || dingTalk.avatar==''"><i class="el-icon"><sc-icon-DingTalk/></i></div>
<div class="leftIcon" v-else>
<el-avatar :size="38" :src="dingTalk.avatar" />
</div>
<div class="nameBox">
<div class="titleName nameRed" v-if="dingTalk.open_id==''">绑定钉钉</div>
<div class="titleName" v-else>{{dingTalk.nick_name==""?'-':dingTalk.nick_name}}</div>
<div class="msg">绑定钉钉用于账号登录</div>
</div>
</div>
<div class="rightBtn">
<el-button type="primary" :size="size" v-if="dingTalk.open_id==''" @click="bindDingTalk"> </el-button>
<el-button type="primary" :size="size" v-else plain @click="secureDingTalk(2)"> </el-button>
</div>
</div>
</div>
</el-main>
</el-container>
<el-dialog
v-model="showWechatLogin"
title="微信绑定"
:width="500"
destroy-on-close
>
<div class="qrCodeLogin">
<div class="code_container">
<object :data="WechatLoginCode" width="430" height="430" type="text/html"></object>
</div>
<p class="error" v-if="bind_wechat_error!=''">{{bind_wechat_error}}请先解绑原账号绑定</p>
<p class="msg">
请使用微信扫一扫绑定
</p>
<div class="qrCodeLogin-result" v-if="isWechatLoginResult">
<el-result
icon="success"
title="绑定成功"
sub-title="您可以使用微信扫码登录了"
></el-result>
</div>
</div>
</el-dialog>
</template>
<script>
@ -55,13 +117,103 @@ export default {
email:[
{required:true,message:"邮箱不能为空"}
]
},
wechat:{
avatar:'',
nick_name:'',
open_id:''
},
dingTalk:{
avatar:'',
nick_name:'',
open_id:'',
},
WechatLoginCode:'',
showWechatLogin:false,
isWechatLoginResult: false,
bind_wechat_error:'',
}
}
},
created() {
// addEventListener
window.addEventListener('storage',this.wechatStorageChange);
},
mounted() {
// const userInfo = this.$TOOL.data.get("USER_INFO");
// this.userInfo = userInfo;
// this.getUserInfo();
},
methods:{
async bindWechat(){
this.isWechatLoginResult = false;
const res = await this.$API.auth.bindWechat.post();
if(res.code == 200){
const url = JSON.parse(JSON.stringify(res.data.qrcode));
localStorage.setItem('bindWechat','2');
this.WechatLoginCode = url;
this.showWechatLogin = true;
}
},
async bindDingTalk(){
const res = await this.$API.auth.bindDingTalk.post();
if(res.code == 200){
const url = JSON.parse(JSON.stringify(res.data.redirect));
localStorage.setItem('bindDingTalk','2');
window.open(url);
}
},
wechatStorageChange(e){
let dingTalk = localStorage.getItem('bindDingTalk');
let wechat = localStorage.getItem('bindWechat');
if(e.key == 'DINGTALK_LOGIN_MESSAGE'){
if(dingTalk == 2 && typeof e.newValue =="string" && e.newValue!=''){
this.dingTalkBind(e.newValue)
}
localStorage.removeItem("DINGTALK_LOGIN_MESSAGE");
}
if(e.key == 'WECHAT_LOGIN_MESSAGE'){
if(wechat == 2 && typeof e.newValue =="string" && e.newValue!=''){
this.wechatBind(e.newValue);
}
localStorage.removeItem("WECHAT_LOGIN_MESSAGE");
}
},
async secureDingTalk(num){
let params = {app_type:num}
const res = await this.$API.auth.unbindUser.post(params);
if(res.code == 200){
await this.getUserInfo();
}
},
async getUserInfo(){
const res = await this.$API.user.getInfo.post();
if(res.code == 200){
this.wechat={
avatar:'',
nick_name:'',
open_id:''
}
this.dingTalk={
avatar:'',
nick_name:'',
open_id:''
}
if(res.data && res.data.length){
res.data.forEach(em=>{
if(em.app_type == 1){
this.wechat = em;
}
if(em.app_type ==2){
this.dingTalk = em;
}
})
}
}
},
// parentParams(item){
// this.form.avatar = item;
// },
@ -139,4 +291,46 @@ export default {
align-items: center;
justify-content: space-between;
}
.bindBxo{
padding: 10px 0;
.title{
font-size: 14px;
font-weight: 500;
margin: 25px 0 10px 0;
}
}
.boxView{
width: 460px;
display: flex;
align-items: end;
justify-content: space-between;
margin-top: 10px;
margin-left: 5px;
.leftImg{
display: flex;
align-items: center;
.leftIcon{
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-items: center;
margin-right: 10px;
.el-icon{
font-size: 34px;
}
}
.titleName{
margin-bottom: 5px;
font-size: var(--el-font-size-base);
}
.nameRed{
color: var(--el-color-danger);
}
.msg{
font-size: var(--el-font-size-extra-small);
color: #837e7e;
}
}
}
</style>

View File

@ -1,8 +1,40 @@
<template>
<el-container class="mainNoBack userBox">
<el-main>
问题反馈
<el-container class="mainBox mainHeaderNoBorderPadding">
<div class="header">问题反馈</div>
<div class="content">
<el-main class="nopadding">
<div class="faqMain">
<div class="mainBack">
<div class="describe">
<span class="name">问题描述</span>
<span class="text">这是一个问题描述这是一个问题描述这是一个问题描述</span>
</div>
<div class="imgList">
<el-image class="img" v-for="(em,index) in imgList" :key="index" preview-teleported :preview-src-list="[em.url]" :src="em.url" fit="cover"></el-image>
</div>
<div class="btnBox">
<el-button :size="size" type="primary">回复</el-button>
</div>
</div>
<div class="faqCardBox" v-for="(item,index) in cardList" :key="index">
<div class="leftView avatar">
<el-avatar :size="36" :src="item.avatar" fit="contain">
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
</el-avatar>
</div>
<div class="rightView">
<div class="msgTitle">
{{item.name}}
<span class="time">{{item.time}}</span>
</div>
<div class="textCom">
<div v-html="item.message"></div>
</div>
</div>
</div>
</div>
</el-main>
</div>
</el-container>
</template>
@ -14,7 +46,49 @@ export default {
},
data(){
return{
size:"small",
imgList:[
{url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/8bcb8f0a-878d-437f-b583-d574261fbff1.jpg'},
{url:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/fca9e7f6-0cb4-434f-9c88-50b8fe2e6580.jpg'}
],
cardList:[
{
avatar:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/67b071a4e2a5430ef06fce968332c86fd596a1ec.jpg',
name:"智能客服",
time:"11月11号 13:24",
message:"工程师将为您处理"
},
{
avatar:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/0535000066601D782037570F58C33857.jpeg',
name:"售后客服",
time:"06月21号 13:24",
message:"马上为您处理"
},
{
avatar:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/67b071a4e2a5430ef06fce968332c86fd596a1ec.jpg',
name:"智能客服",
time:"11月11号 13:24",
message:"工程师将为您处理"
},
{
avatar:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/0535000066601D782037570F58C33857.jpeg',
name:"售后客服",
time:"06月21号 13:24",
message:"马上为您处理"
},
{
avatar:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/67b071a4e2a5430ef06fce968332c86fd596a1ec.jpg',
name:"智能客服",
time:"11月11号 13:24",
message:"工程师将为您处理"
},
{
avatar:'https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/0535000066601D782037570F58C33857.jpeg',
name:"售后客服",
time:"06月21号 13:24",
message:"马上为您处理"
}
]
}
},
created() {
@ -30,5 +104,72 @@ export default {
</script>
<style scoped lang="scss">
.mainBox{
display: flex;flex-direction: column;
.header{
flex-basis: 48px;
display: flex;align-items: center;justify-content: flex-start;
font-size: 14px;font-weight: bold;
border-bottom: 1px solid #f4f4f4;
margin: 0 -10px;
padding: 0 10px;
}
.content{
flex: 1;
overflow: hidden;
padding: 10px 0;
}
}
.faqMain{
.mainBack{
background: #f6f6f6;
padding: 10px;
border-radius: 6px;
position: relative;
.describe{
margin-bottom: 10px;
.name{
color: #222;
margin-right: 20px;
}
.text{
color: #222;font-weight: 500;
}
}
.imgList{
display: flex;align-items: center;flex-wrap: wrap;
.img{
width: 88px;
height: 88px;
border-radius: 4px;
margin-right: 10px;
}
}
.btnBox{
position: absolute;
right: 10px;
top: 10px;
z-index: 10;
}
}
.faqCardBox{
border-bottom: 1px solid #f4f4f4;
padding: 15px 0;
display: flex;align-items: flex-start;
.avatar{
margin-right: 8px;
}
.rightView{
.msgTitle{
color: #555;
.time{
margin-left: 8px;
}
}
.textCom{
margin-top: 4px;
}
}
}
}
</style>

View File

@ -28,7 +28,7 @@
</el-select>
</el-form-item>
<el-form-item label="公司地址" prop="address">
<el-input v-model="form.address" placeholder="请输入部门名称" clearable></el-input>
<el-input v-model="form.address" placeholder="请输入公司地址" clearable></el-input>
</el-form-item>
<el-form-item label="公司LOGO" prop="logo">
<ossImgUpload @parentParams="parentParams" :url="form.logo" />

View File

@ -11,11 +11,11 @@
<div class="cardBoxForm">
<div class="title">用户信息</div>
<div class="comBox">
<el-form-item label="姓名/工号" required>
<el-form-item label="昵称/工号" required>
<el-row :gutter="24" justify="space-between">
<el-col :span="12">
<el-form-item prop="name">
<el-input v-model="form.name" placeholder="请填写真实姓名" disabled clearable></el-input>
<el-input v-model="form.name" placeholder="请填写昵称" disabled clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="12">

View File

@ -1,5 +1,6 @@
<template>
<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" draggable destroy-on-close @closed="$emit('closed')">
<el-scrollbar max-height="500" style="padding: 0 20px;">
<el-form class="form" :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="right">
<div class="cardBoxForm">
<div class="comBox">
@ -12,14 +13,14 @@
<div class="cardBoxForm">
<div class="title">用户信息</div>
<div class="comBox">
<el-form-item label="姓名/工号" required>
<el-row :gutter="24" justify="space-between">
<el-col :span="12">
<el-form-item label="昵称/工号" required>
<el-row :gutter="24" justify="space-between" style="margin: 0;">
<el-col :span="12" style="padding-left: 0;">
<el-form-item prop="name">
<el-input v-model="form.name" placeholder="请填写真实姓名" clearable></el-input>
<el-input v-model="form.name" placeholder="请填写昵称" clearable></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="12" style="padding-right: 0;">
<el-form-item prop="emp_id">
<el-input v-model="form.emp_id" placeholder="请填写工号" clearable></el-input>
</el-form-item>
@ -33,6 +34,11 @@
<el-form-item label="登录密码" prop="password" v-if="mode == 'add'">
<el-input type="password" v-model="form.password" placeholder="请填写密码" clearable show-password></el-input>
</el-form-item>
<el-form-item label="公司名称" prop="company_full_name">
<el-select v-model="form.company_full_name" placeholder="请填写公司名称" clearable>
<el-option v-for="(item,index) in companyList" :key="index" :label="item.full_name" :value="item.full_name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="联系电话" prop="mobile">
<el-input v-model="form.mobile" placeholder="请填写联系电话" clearable></el-input>
</el-form-item>
@ -56,6 +62,7 @@
</div>
</div>
</el-form>
</el-scrollbar>
<template #footer>
<el-button @click="visible=false" > </el-button>
<el-button v-if="mode!='show'" type="primary" :loading="isSave" @click="submit()"> </el-button>
@ -87,7 +94,8 @@
avatar: "",
password:"",
dept_id: "",
role_ids: []
role_ids: [],
company_full_name:""
},
//
rules: {
@ -98,7 +106,7 @@
{required: true, message: '请输入登录账号'}
],
name: [
{required: true, message: '请输入真实姓名'}
{required: true, message: '请输入昵称'}
],
emp_id:[
{required: true, message: '请输入工号'}
@ -147,14 +155,29 @@
value: "id",
checkStrictly: false,
emitPath:false
}
},
companyList:[]
}
},
mounted() {
this.getGroup()
this.getDept()
this.getCompanyList();
},
methods: {
async getCompanyList() {
let params = {
field:"full_name",
id:{
operator:"in",
value:[]
}
}
const res = await this.$API.system.user.userCompanyField.post(params);
if(res.code == 200){
this.companyList = res.data;
}
},
//
open(mode='add'){
this.mode = mode;
@ -206,7 +229,7 @@
this.form.dept_id = data.dept_id
this.form.group = data.group
this.form.role_ids = data.user_roles && data.user_roles.role_ids?data.user_roles.role_ids:[]
this.form.company_full_name = data.company_info?data.company_info.full_name:''
}
}
}