Skip to content

C
company_app
提交 7c63f26a 作者: 毛细亚
操作

保存代码

上级 199d2c9a
正在显示 包含 2073 行增加 和 78 行删除
src/api/pigeon.js 0 → 100644
import request from "@/utils/request";
// 游戏业务所属的接口信息
// 所属分组下拉
export function cross_systemRequest(data) {
data.api = "/api" + data.api;
data.params
? (data.params.corp_id = window.localStorage.getItem("corp_id") || "")
: "";
return request({
url: "/admin/cross_system/request",
method: "post",
data,
});
}
// 搜索下拉
export function searchcondition(data) {
return new Promise((resovle, reject) => {
cross_systemRequest({
system: "pigeon",
api: "/api/searchcondition/index",
params: data,
}).then((res) => {
resovle(res);
});
});
}
\ No newline at end of file
src/components/mainGame.vue 0 → 100644
<template>
<div class="search-item">
<div class="item-label">{{ label }}</div>
<div class="item-content">
<el-select v-model.trim="main_game_id" filterable remote clearable :style="{ 'width': width || '' }"
reserve-keyword placeholder="请输入主游戏名" :remote-method="remoteMethod" :loading="loading" :disabled='disabled'
@change="returnSelectResult" @focus="gameNameList = optionsList">
<el-option v-for="item in gameNameList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</div>
</template>
<script>
import { selectSearch } from '@/api/game'
import { searchcondition } from '@/api/pigeon'
export default {
// gameType:存在的时候取信鸽的游戏列表接口 gameDefaultList 编辑的时候 如果没有当前的游戏 id 主动加上去
props: ['defaultValue', 'width', 'label', 'disabled','gameType','gameDefaultList','isResize'],
data() {
return {
loading: false,
main_game_id: '',
gameNameList: [],
optionsList: []
}
},
watch: {
defaultValue(newVal) {
if (newVal) {
this.gameType?this.main_game_id = newVal:this.main_game_id = Number(newVal)
} else {
return ''
}
},
isResize(newVal, oldVal) {
if (newVal) {
this.main_game_id = ''
this.$emit('result', this.main_game_id, '')
}
},
},
mounted() {
this.defaultValue && this.gameType ? this.main_game_id = Number(this.defaultValue) : this.main_game_id = this.defaultValue
this.switchGameList()
},
methods: {
switchGameList() {
if(this.gameType){
this.requestPigeonGameList()
}else{
this.requestGameList()
}
},
requestGameList() {
const data = {
type: 'mainGameList',
value: '',
weixin_blong_id: ''
}
selectSearch(data).then(res => {
this.loading = false
if (res.status_code == 1) {
this.gameNameList = this.optionsList = res.data.data
}
})
},
requestPigeonGameList() {
const data = {
corp_gift_package_main_games:1,
}
searchcondition(data).then(res => {
this.loading = false
if (res.status_code == 1 && res.data.corp_gift_package_main_games?.length > 0) {
this.gameNameList = this.optionsList = res.data.corp_gift_package_main_games
if(this.gameDefaultList.length > 0){
const gameItem = this.gameNameList.find(item=>item.value === this.gameDefaultList[0].value)
if(!gameItem){
this.gameNameList = this.optionsList = this.gameNameList.concat(this.gameDefaultList)
}
}
}
})
},
remoteMethod(query) {
if (query !== '') {
this.gameNameList = this.optionsList.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1
})
} else {
this.gameNameList = []
}
},
returnSelectResult(value) {
const label = this.gameNameList.find(item => item.value == this.main_game_id)
label ? this.$emit('result', this.main_game_id, label.label) : this.$emit('result', this.main_game_id, '')
}
}
}
</script>
<style lang="scss" scoped>
.newPage {
width: 100%;
height: 100%;
.el-select {
width: 100%;
}
}
</style>
\ No newline at end of file
src/components/noContent.vue 0 → 100644
<template>
<div class="no-content-container">
<div class="no-content-box">
<!-- 自定义 SVG 图标 -->
<div class="icon-wrapper">
<svg class="no-data-icon" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- 文件夹图标 -->
<path
d="M40 60h35l10-15h75c8.28 0 15 6.72 15 15v90c0 8.28-6.72 15-15 15H40c-8.28 0-15-6.72-15-15V75c0-8.28 6.72-15 15-15z"
fill="url(#gradient1)"
stroke="url(#gradient2)"
stroke-width="2"
/>
<!-- 虚线效果 -->
<circle cx="100" cy="120" r="25" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="4 4" opacity="0.3"/>
<circle cx="100" cy="120" r="35" fill="none" stroke="currentColor" stroke-width="1.5" stroke-dasharray="6 6" opacity="0.2"/>
<!-- 渐变定义 -->
<defs>
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#f8f9fa;stop-opacity:1" />
<stop offset="100%" style="stop-color:#e9ecef;stop-opacity:1" />
</linearGradient>
<linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#dee2e6;stop-opacity:1" />
<stop offset="100%" style="stop-color:#ced4da;stop-opacity:1" />
</linearGradient>
</defs>
</svg>
<!-- 装饰圆点 -->
<div class="decorative-dots">
<span class="dot dot-1"></span>
<span class="dot dot-2"></span>
<span class="dot dot-3"></span>
</div>
</div>
<!-- 文字内容 -->
<div class="content">
<h3 class="title">{{ title }}</h3>
<p class="description">{{ description }}</p>
<div class="action-area" v-if="showAction">
<slot name="action">
<el-button type="primary" @click="handleRefresh" v-if="showRefresh">
<i class="el-icon-refresh"></i>
刷新数据
</el-button>
</slot>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'NoContent',
props: {
// 主标题
title: {
type: String,
default: '暂无数据'
},
// 描述文字
description: {
type: String,
default: '当前没有任何数据，请稍后再试或联系管理员'
},
// 是否显示操作区域
showAction: {
type: Boolean,
default: false
},
// 是否显示刷新按钮
showRefresh: {
type: Boolean,
default: false
},
// 图标颜色主题
iconTheme: {
type: String,
default: 'default', // default, primary, success, warning, danger
validator: (value) => ['default', 'primary', 'success', 'warning', 'danger'].includes(value)
}
},
methods: {
handleRefresh() {
this.$emit('refresh');
}
}
}
</script>
<style lang="scss" scoped>
.no-content-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
padding: 40px 20px;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border-radius: 12px;
position: relative;
overflow: hidden;
// 背景装饰
&::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(0, 191, 138, 0.05) 0%, transparent 50%);
pointer-events: none;
}
}
.no-content-box {
text-align: center;
max-width: 400px;
position: relative;
z-index: 1;
}
.icon-wrapper {
position: relative;
margin-bottom: 32px;
display: inline-block;
}
.no-data-icon {
width: 120px;
height: 120px;
color: #6c757d;
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.1));
animation: float 3s ease-in-out infinite;
}
// 图标主题色
.no-content-container[data-theme="primary"] .no-data-icon {
color: #00BF8A;
}
.no-content-container[data-theme="success"] .no-data-icon {
color: #67c23a;
}
.no-content-container[data-theme="warning"] .no-data-icon {
color: #e6a23c;
}
.no-content-container[data-theme="danger"] .no-data-icon {
color: #f56c6c;
}
// 装饰圆点
.decorative-dots {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.dot {
position: absolute;
width: 6px;
height: 6px;
background: #00BF8A;
border-radius: 50%;
opacity: 0.6;
}
.dot-1 {
top: 20%;
left: 15%;
animation: pulse 2s ease-in-out infinite;
}
.dot-2 {
top: 30%;
right: 20%;
animation: pulse 2s ease-in-out infinite 0.5s;
}
.dot-3 {
bottom: 25%;
left: 25%;
animation: pulse 2s ease-in-out infinite 1s;
}
// 文字内容
.content {
.title {
font-size: 24px;
font-weight: 600;
color: #2c3e50;
margin: 0 0 12px 0;
line-height: 1.3;
}
.description {
font-size: 14px;
color: #6c757d;
line-height: 1.6;
margin: 0 0 24px 0;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
}
.action-area {
margin-top: 32px;
.el-button {
padding: 12px 24px;
border-radius: 6px;
font-weight: 500;
box-shadow: 0 4px 12px rgba(0, 191, 138, 0.3);
transition: all 0.3s ease;
&:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 191, 138, 0.4);
}
i {
margin-right: 6px;
}
}
}
// 动画效果
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
@keyframes pulse {
0%, 100% {
opacity: 0.6;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}
// 响应式设计
@media (max-width: 768px) {
.no-content-container {
min-height: 250px;
padding: 30px 15px;
}
.no-data-icon {
width: 80px;
height: 80px;
}
.content {
.title {
font-size: 20px;
}
.description {
font-size: 13px;
}
}
.action-area {
margin-top: 24px;
.el-button {
padding: 10px 20px;
font-size: 14px;
}
}
}
// 暗色主题支持
@media (prefers-color-scheme: dark) {
.no-content-container {
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
&::before {
background: radial-gradient(circle, rgba(0, 191, 138, 0.1) 0%, transparent 50%);
}
}
.content {
.title {
color: #ecf0f1;
}
.description {
color: #bdc3c7;
}
}
}
</style>
\ No newline at end of file
src/components/textEditor.vue 0 → 100644
<template>
<!-- 简单版的图文编辑器 可以上传 截图上传图片 能实现简单的图文编辑功能 -->
<div class="textEditor">
<div
class="rowFlex columnCenter textEditorTitle"
@click.stop="watchImage"
>
<el-image
class="watchImage"
src="https://wanxiaomeng-1255977238.cos.ap-shanghai.myqcloud.com/mxy/web/eye.png"
> </el-image>
<p class="watchImageText">查看大图</p>
</div>
<!-- 只展示不编辑 -->
<div
v-if="!contenteditable"
:id="domid"
class="qualityRemark noActive"
>
<div v-html="remark"></div>
</div>
<!-- 可以编辑 -->
<div
v-else
:id="domid"
class="qualityRemark"
:class="contenteditable ? 'active' : 'noActive'"
:contenteditable="contenteditable"
@blur.stop="handleBlurEvent"
@input="handleInputEvent"
></div>
<!-- 查看大图 -->
<el-dialog
title="查看大图"
append-to-body
center
:visible.sync="showScoleImage"
>
<div class="showScoleImageContent columnFlex allCenter" v-html="remark"></div>
</el-dialog>
</div>
</template>
<script>
import { base64toFile } from '@/utils/index'
export default {
props: ['remark', 'contenteditable', 'domid'], // remark 原来的图文内容 contenteditable 是否可编辑 domid 编辑器的 DomId resultReamrk 方法吐出最后的编辑好的内容
data() {
return {
srcList: [],
chatMessage: {},
imgList: [],
htmlContent: '',
showScoleImage: false
}
},
mounted() {
this.$nextTick(() => {
this.chatMessage = document.getElementById(`${this.domid}`)
this.remark && this.remark.length > 0 && this.contenteditable ? this.chatMessage.innerHTML = this.remark : ''
})
},
methods: {
handleBlurEvent() {
// this.handleImage()
},
handleInputEvent() {
this.handleImage()
},
async watchImage() {
if (this.remark.trim().length > 0) {
this.chatMessage.innerHTML = this.remark
this.srcList = []
const imgList = this.chatMessage.querySelectorAll('img')
if (imgList && imgList.length > 0) {
for (let index = 0; index < imgList.length; index++) {
this.srcList.push(imgList[index].src)
}
}
this.showScoleImage = true
} else {
this.$message.warning('内容为空')
}
},
async handleImage() {
this.srcList = []
const imgListElement = this.chatMessage.querySelectorAll('img')
let imgList = []
if (imgListElement.length > 0) {
for (let i = 0; i < imgListElement.length; i++) {
const nodeItem = imgListElement[i]
if (nodeItem.src.indexOf('data:image') !== -1) {
imgList.push(nodeItem)
}
}
} else {
imgList = []
}
if (imgList && imgList.length > 0) {
for (let index = 0; index < imgList.length; index++) {
if (imgList[index].src.indexOf('http:') !== -1) {
this.srcList.push(imgList[index].src)
} else {
const img = base64toFile(imgList[index].src)
const uploadConfig = {
dir: '/company_wx/service/avatars/'
}
this.srcList.push(imgList[index].src)
const result = await this.uploading(img, uploadConfig)
imgList[index].src = result.data
}
}
this.$emit('resultReamrk', this.chatMessage.innerHTML)
this.$emit('update:remark', this.chatMessage.innerHTML)
} else {
this.$emit('resultReamrk', this.chatMessage.innerHTML)
this.$emit('update:remark', this.chatMessage.innerHTML)
}
}
}
}
</script>
<style lang="scss" scoped>
.watchImage {
width: 20px;
height: 20px;
margin-right: 5px;
cursor: pointer;
}
.textEditorTitle{
width: 100px;
}
.watchImageText{
color: #00bf8a;
cursor: pointer;
}
.noActive {
background: #f5f7fa;
color: #c0c4cc;
}
.active {
background: #fff;
color: #333;
}
.showScoleImageContent{
width: 100%;
line-height: 16px;
margin-top: 30px;
img{
max-width: 80%;
}
}
</style>
<style>
.qualityRemark {
width: 100%;
height: 150px;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 10px;
overflow: auto;
line-height: 20px;
}
.qualityRemark img {
width: 80px !important;
height: auto !important;
margin-right: 5px;
margin-top:10px;
margin-right: 10px;
}
.showScoleImageContent{
width: 100%;
overflow: auto;
line-height: 16px;
}
.showScoleImageContent img{
max-width: 100%;
margin-bottom: 20px;
}
</style>
\ No newline at end of file
src/main.js
...@@ -2,22 +2,41 @@ import Vue from 'vue' ...@@ -2,22 +2,41 @@ import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import store from './store' import store from './store'
import ElementUI from 'element-ui'; // import ElementUI from 'element-ui';
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
import _ from 'lodash'; import _ from 'lodash';
import 'lib-flexible/flexible.js' import 'lib-flexible/flexible.js'
Vue.use(ElementUI); // Vue.use(ElementUI);
import '@/styles/element-theme-colors.css'; import '@/styles/element-theme-colors.css';
import '@/styles/index.scss'; import '@/styles/index.scss';
Vue.config.productionTip = false import moment from 'moment'
import VConsole from 'vconsole'; import VConsole from 'vconsole';
new VConsole(); import 'bi-element-ui/lib/bi-element-ui.css'
import Element from 'bi-eleme'
import 'bi-eleme/lib/theme-chalk/index.css'
import BiElementUi from 'bi-element-ui'
import 'bi-element-ui/lib/bi-element-ui.css'
if(process.env.NODE_ENV !== 'production'){
new VConsole();
}
Vue.use(BiElementUi, {
dev: process.env.NODE_ENV !== 'production',
env: process.env.NODE_ENV,
system: null
})
Vue.use(Element, {
size: Cookies.get('size') || 'small' // set element-ui default size
// locale: enLang, // 如果使用中文，无需设置，请删除
})
new Vue({ new Vue({
router, router,
store, store,
render: h => h(App) render: h => h(App)
}).$mount('#app') }).$mount('#app')
Vue.config.productionTip = false
Vue.prototype.$cookies = Cookies; Vue.prototype.$cookies = Cookies;
Vue.prototype.$lodash = _; Vue.prototype.$lodash = _;
Vue.prototype.$moment = moment;
src/store/modules/game.js
...@@ -6,6 +6,7 @@ const state = { ...@@ -6,6 +6,7 @@ const state = {
accountSelect: '', // 当前选中的用户的member_id accountSelect: '', // 当前选中的用户的member_id
bindGameUserList: [], // 用户绑定的游戏角色 bindGameUserList: [], // 用户绑定的游戏角色
changeSelectWindow: false, // 切换客服窗口的时候 下发通知 changeSelectWindow: false, // 切换客服窗口的时候 下发通知
gameUserInfo:{},
chatUserInfo: {}, // 当前选中的用户的详情 chatUserInfo: {}, // 当前选中的用户的详情
} }
const mutations = { const mutations = {
...@@ -17,6 +18,9 @@ const mutations = { ...@@ -17,6 +18,9 @@ const mutations = {
}, },
set_chatUserInfo(state, data) { set_chatUserInfo(state, data) {
state.chatUserInfo = data state.chatUserInfo = data
},
set_gameUserInfo(state, data) {
state.gameUserInfo = data
} }
} }
......
src/store/modules/user.js
import Cookies from 'js-cookie'
const state = { const state = {
userInfo: { userInfo: {
"userid": "JinDuoXia", "userid": "JinDuoXia",
...@@ -8,7 +9,7 @@ const state = { ...@@ -8,7 +9,7 @@ const state = {
"time": 1747726636, "time": 1747726636,
external_userid:'' external_userid:''
}, },
userid:'JinDuoXia', userid:Cookies.get('userid'),
corp_id:'', corp_id:'',
external_userid:'', external_userid:'',
token:'', token:'',
...@@ -16,13 +17,15 @@ const state = { ...@@ -16,13 +17,15 @@ const state = {
cser_id:'', cser_id:'',
cser_name:'' cser_name:''
}, },
cser_id:'',
cser_name:'',
signData:{ signData:{
corp_id:'', corp_id:'',
agent_signature:'', agent_signature:'',
corp_signature:'', corp_signature:'',
time:'' time:''
}, },
external_userid:'wm5rUgMgAAjqjOcqp8i3lEhFZDQieWug' external_userid:Cookies.get('external_userid')
// 六子的 用户id wm5rUgMgAAjqjOcqp8i3lEhFZDQieWug // 六子的 用户id wm5rUgMgAAjqjOcqp8i3lEhFZDQieWug
// 我的 userid JinDuoXia cser_id 4090 corp_id wweaefe716636df3d1 cser_id 4090 token token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. eyJpc3MiOjQwOTAsImlhdCI6MTc0NzgxMjMxMiwiZXhwIjoxNzQ4NDE3MTEyLCJuYmYiOjE3NDc4MTIzMTIsInN1YiI6InRva2Vu6K6k6K-BIiwianRpIjoiMjBkOTY3MDZiYzI1MDdmY2MxOWI2MjU1YTM0YWQ3M2YifQ.yX7E7QHV7x2ubpa8iK3Avy794EiHNCaW2CtB4A4UQWo // 我的 userid JinDuoXia cser_id 4090 corp_id wweaefe716636df3d1 cser_id 4090 token token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9. eyJpc3MiOjQwOTAsImlhdCI6MTc0NzgxMjMxMiwiZXhwIjoxNzQ4NDE3MTEyLCJuYmYiOjE3NDc4MTIzMTIsInN1YiI6InRva2Vu6K6k6K-BIiwianRpIjoiMjBkOTY3MDZiYzI1MDdmY2MxOWI2MjU1YTM0YWQ3M2YifQ.yX7E7QHV7x2ubpa8iK3Avy794EiHNCaW2CtB4A4UQWo
} }
...@@ -49,6 +52,12 @@ const mutations = { ...@@ -49,6 +52,12 @@ const mutations = {
set_signData(state,signData){ set_signData(state,signData){
state.signData = signData state.signData = signData
}, },
set_cser_id(state,cser_id){
state.cser_id = cser_id
},
set_cser_name(state,cser_name){
state.cser_name = cser_name
}
} }
const actions = { const actions = {
......
src/styles/element-theme-colors.css
...@@ -102,39 +102,6 @@ ...@@ -102,39 +102,6 @@
z-index: 99999 !important; /* 最高层级，确保不被任何元素遮挡 */ z-index: 99999 !important; /* 最高层级，确保不被任何元素遮挡 */
} }
/* 其他需要高层级的组件 */
.el-notification {
z-index: 99998 !important; /* 通知组件 */
}
.el-loading-mask {
z-index: 99997 !important; /* 加载遮罩 */
}
.el-dialog__wrapper {
z-index: 99996 !important; /* 对话框 */
}
.el-drawer__wrapper {
z-index: 99995 !important; /* 抽屉 */
}
.el-popover.el-popper {
z-index: 99994 !important; /* 弹出框 */
}
.el-tooltip__popper {
z-index: 99993 !important; /* 工具提示 */
}
.el-select-dropdown {
z-index: 99992 !important; /* 下拉选择框 */
}
.el-picker-panel {
z-index: 99991 !important; /* 日期时间选择器 */
}
/* ================================ /* ================================
组件样式重写示例 - 翠绿色主题 组件样式重写示例 - 翠绿色主题
================================ */ ================================ */
......
src/utils/request.js
...@@ -78,8 +78,8 @@ service.interceptors.response.use( ...@@ -78,8 +78,8 @@ service.interceptors.response.use(
}) })
if (res.status_code === -1) { if (res.status_code === -1) {
// 登录 过期 重新去登录 // 登录 过期 重新去登录
removeToken() // removeToken()
window.location.href = window.location.origin +'/company_app/index.html?corp_id='+Cookies.get('corp_id') // window.location.href = window.location.origin +'/company_app/index.html?corp_id='+Cookies.get('corp_id')
return res return res
} }
......
src/views/components/bindGameAccount/bindUserList.vue
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
<script type="text/javascript"> <script type="text/javascript">
import { detailsInfoRequest } from '@/api/works' import { detailsInfoRequest } from '@/api/works'
import {memberView} from '@/api/game'
import { mapState, mapMutations, mapActions } from 'vuex' import { mapState, mapMutations, mapActions } from 'vuex'
import addUser from './addUser.vue' import addUser from './addUser.vue'
// 更新代码 // 更新代码
...@@ -41,6 +42,8 @@ export default { ...@@ -41,6 +42,8 @@ export default {
computed: { computed: {
...mapState('game', [ ...mapState('game', [
'bindGameUserList', 'bindGameUserList',
'accountSelect',
'gameUserInfo'
]), ]),
...mapState('user', [ ...mapState('user', [
'userid', 'userid',
...@@ -48,8 +51,12 @@ export default { ...@@ -48,8 +51,12 @@ export default {
]), ]),
}, },
watch: { watch: {
accountSelect(val) { accountSelect(newVal,oldVal) {
this.bindAccount = val if(newVal){
console.log(newVal,'hahhaha')
this.gameMemberView()
this.bindAccount = newVal
}
} }
}, },
async mounted() { async mounted() {
...@@ -59,7 +66,8 @@ export default { ...@@ -59,7 +66,8 @@ export default {
methods: { methods: {
...mapMutations('game', [ ...mapMutations('game', [
'set_accountSelect', 'set_accountSelect',
'set_chatUserInfo' 'set_chatUserInfo',
'set_gameUserInfo'
]), ]),
...mapActions('game', ['gameBindUser']), ...mapActions('game', ['gameBindUser']),
handleChange(value) { handleChange(value) {
...@@ -69,6 +77,21 @@ export default { ...@@ -69,6 +77,21 @@ export default {
this.set_accountSelect(value) this.set_accountSelect(value)
} }
}, },
gameMemberView(item) {
if (this.accountSelect && this.accountSelect !== '') {
const data = { member_id: this.accountSelect, need_channel: 1, need_roleInfo: 1, need_banned: 1 }
memberView(data).then((res) => {
if (res.status_code === 1) {
this.set_gameUserInfo(res.data)
} else {
this.set_gameUserInfo({})
}
}, (err) => {
this.set_gameUserInfo({})
})
}
},
addNewUser() { addNewUser() {
console.log(11) console.log(11)
}, },
......
src/views/login.vue
...@@ -100,7 +100,7 @@ export default { ...@@ -100,7 +100,7 @@ export default {
...mapState('user',['corp_id']) ...mapState('user',['corp_id'])
}, },
methods: { methods: {
...mapMutations('user',['set_corp_id','set_userid','set_external_userid','set_userInfo','set_token','set_cser_info','set_signData']), ...mapMutations('user',['set_corp_id','set_userid','set_external_userid','set_userInfo','set_token','set_cser_info','set_signData','set_cser_id','set_cser_name']),
// 设置缓存 // 设置缓存
cacheCorp_id(corp_id){ cacheCorp_id(corp_id){
Cookies.set('corp_id',corp_id, { expires: 7 }) Cookies.set('corp_id',corp_id, { expires: 7 })
...@@ -121,6 +121,8 @@ export default { ...@@ -121,6 +121,8 @@ export default {
cser_id:cser_id, cser_id:cser_id,
cser_name:cser_name cser_name:cser_name
}) })
this.set_cser_id(cser_id)
this.set_cser_name(cser_name)
}, },
cacheExternal_userid(external_userid){ cacheExternal_userid(external_userid){
Cookies.set('external_userid',external_userid, { expires: 7 }) Cookies.set('external_userid',external_userid, { expires: 7 })
......
src/views/userInfo/components/RoleInfo.vue
<template> <template>
<div class="roleInfo-tab-content"> <div class="roleTab">
角色信息 <el-tabs v-model="roleActive" @tab-click="handleClick">
<el-tab-pane label="角色信息" name="role">
<userInfo v-if="roleActive==='role'" />
</el-tab-pane>
<!-- <el-tab-pane label="举报记录" name="report">
<report v-show="roleActive==='report'" />
</el-tab-pane>
-->
<el-tab-pane label="申诉记录" name="approval">
<approval v-if="roleActive==='approval'" />
</el-tab-pane>
</el-tabs>
</div> </div>
</template> </template>
<script>
export default { <script>
name: 'RoleInfoTabContent', import userInfo from './roleInfo/userInfo.vue'
// import report from './roleInfo/report.vue'
import approval from './roleInfo/approval.vue'
export default {
components: {
userInfo,
approval,
// report
},
props: {
// report_is_send: {
// type: Boolean,
// default: false
// }
},
data() {
return {
roleActive: 'role'
} }
</script> },
<style lang="scss" scoped> watch: {
.roleInfo-tab-content{ // // 监听到变化
// report_is_send(newVal, oldVal) {
// this.roleActive = 'report'
// }
},
methods: {
handleClick(value) {
}
}
}
</script>
<style lang="scss" scoped>
.roleTab{
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #fff; background: #fff;
} }
</style>
\ No newline at end of file </style>
\ No newline at end of file
src/views/userInfo/components/ViolationRecord.vue
<template> <template>
<div class="violationRecord-tab-content"> <div class="details columnFlex">
违规记录 <div class="detailsTitle rowFlex spaceBetween columnCenter">
<p>违规记录</p>
<!-- <el-button type="primary" size="small" @click="showAddMember = true">自定义列</el-button> -->
</div> </div>
<el-form
v-loading="loading"
class="content"
label-width="100px"
>
<div v-if="violationList.length > 0">
<div
v-for="(item, index) in violationList"
:key="index"
class="contentItem"
>
<el-form-item label="违规时间:">
<p>{{ item.violation_time }}</p>
</el-form-item>
<el-form-item label="违规操作:">
<p>{{ item.violation_type_name || "" }}</p>
</el-form-item>
<el-form-item label="封禁时间:">
<p>{{ item.create_time }}</p>
</el-form-item>
<el-form-item label="角色名称:">
<p>{{ item.server_name }} - {{ item.role_name }}</p>
</el-form-item>
<el-form-item label="封禁方式:">
<p :class="item.banned_time_type == 3 ? 'error' : ''">
{{ item.banned_type_text }}
</p>
</el-form-item>
<el-form-item label="是否允许申诉:">
<p class="error">{{ item.appeal_name }}</p>
</el-form-item>
<el-form-item
v-if="item.remake != ''"
label="详情:"
>
<!-- AI自动封禁 -->
<div
class="remarkType"
v-if="item.information_type === 6"
>
<p>
<span class="label">所属项目:</span><span>{{ item.newRemake.project || "" }}</span>
</p>
<p>
<span class="label">角色ID:</span><span>{{ item.newRemake.cp_role_id || "" }}</span>
</p>
<p>
<span class="label">名单类型:</span><span>{{ item.newRemake.list_type || "" }}</span>
</p>
<p>
<span class="label">当前命中:</span><span>{{ item.newRemake.current_hit || "" }}</span>
</p>
<p>
<span class="label">累计命中:</span><span>{{ item.newRemake.hit_total || "" }}</span>
</p>
<p>
<span class="label">释放时间:</span><span>{{ item.newRemake.release_time || "" }}</span>
</p>
<p>
<span class="label">操作用户:</span><span>{{ item.newRemake.handel_user || "" }}</span>
</p>
<p>
<span class="label">备注信息:</span><span>{{ item.newRemake.remark || "" }}</span>
</p>
</div>
<!-- 其他类型 -->
<div
class="remarkType"
v-else
>
<div
v-if="item.remake.indexOf('src=') !== -1"
class="remakeImage"
>
<p class="watchDetails">
<el-button
type="text"
icon="el-icon-view"
size="medium"
style="z-index: 1; position: relative; margin-left: 5px"
@click="showRemake(item.remake)"
>查看大图</el-button>
</p>
<p v-html="item.remake"></p>
</div>
<div
v-else
class="remakeImage"
>
<p v-html="item.remake"></p>
</div>
</div>
</el-form-item>
<div>
<div
class="title"
style="font-weight: 600; margin-bottom: 10px"
>
命中统计
</div>
<BiTable
v-if="item && item.newRemake && item.newRemake.hit"
:data="item.newRemake.hit"
size="medium"
:column="tableColums"
>
<template v-slot:main_playlet="{ row }">
<p>{{ $moment(row.time).format("YYYY-MM-DD HH:mm:ss") }}</p>
</template> </template>
<script> </BiTable>
export default { </div>
name: 'ViolationRecordTabContent', </div>
</div>
<div
v-if="!loading && violationList.length == 0"
class="noContent rowFlex allCenter"
>
<svg-icon icon-class="noContent" />
</div>
</el-form>
<el-dialog
title="查看大图"
:visible.sync="imageLayer"
width="50%"
append-to-body
fit="contain"
@close="imageLayer = false"
>
<div
v-html="imageSrc"
class="layerImage"
></div>
</el-dialog>
</div>
</template>
<script>
import { mapState } from "vuex";
import { violationList } from "@/api/game";
export default {
components: {},
data() {
return {
imageSrc: [],
violationList: [],
tableColums: [
{
label: "文本内容",
prop: "content",
},
{
label: "命中类型",
prop: "type",
},
{
label: "关键字",
prop: "key",
},
{
label: "时间",
prop: "time",
width: 120,
slotScope: true
// render: (h, { row }) => {
// if (row.time) {
// return (
// <p>
// {
// this.$moment(row.time)
// .format("YYYY-MM-DD HH:mm:ss")
// }
// </p>
// );
// }
// },
},
],
loading: false,
imageLayer: false,
};
},
computed: {
...mapState("game", ["accountSelect", "gameTabActive"]),
},
watch: {
accountSelect(newVal, oldVal) {
console.log(11, "newVal");
if (newVal && newVal !== "" && this.gameTabActive == 5) {
this.requestViolationList();
} }
</script> },
<style lang="scss" scoped> },
.violationRecord-tab-content{ mounted() {
width: 100%; this.requestViolationList();
},
methods: {
handleRemark(remark) {
try {
const remarkObj = JSON.parse(JSON.parse(remark.replace(/\r\n\t/g, "")));
console.log(remarkObj, "remarkObj");
return remarkObj;
} catch (error) {
return remark;
}
},
showRemake(remake) {
this.imageSrc = remake;
this.imageLayer = true;
},
requestViolationList() {
const data = {
account_type: 1,
member_id: this.accountSelect,
};
this.loading = true;
violationList(data).then(
(res) => {
if (res.status_code == 1 && res.data.data.length > 0) {
this.violationList = res.data.data;
this.violationList.map((item) => {
if (item.information_type == 6) {
item.newRemake = this.handleRemark(item.remake);
}
});
} else {
this.violationList = [];
}
this.loading = false;
},
(err) => {
this.loading = false;
}
);
},
},
};
</script>
<style lang="scss">
.remakeImage {
img {
max-width: 200px;
height: auto;
border-radius: 5px;
margin-top: 10px;
}
}
.layerImage {
img {
max-width: 800px;
}
}
</style>
<style lang="scss" scoped>
.details {
width: vw(444);
height: 100%; height: 100%;
background: #fff; background: #fff;
margin-left: 2px;
.detailsTitle {
width: 100%;
padding: 0 vw(20);
height: 60px;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
border-bottom: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
p {
color: #333333;
}
}
.content {
width: 100%;
padding: vw(20);
height: 100%;
overflow: auto;
}
.contentMain {
}
.contentItem {
border-bottom: 1px dashed #ebeef5;
}
.remarkType {
width: auto;
margin-top: 4px;
p {
line-height: 25px;
}
.label {
color: #99a3b4;
margin-right: 5px;
}
.value {
}
}
.error {
color: #ff5959;
}
.foulImage {
max-width: 300px;
height: auto;
}
::v-deep .el-collapse-item {
margin-bottom: 20px;
}
::v-deep .el-collapse-item__content {
padding-bottom: 10px;
}
::v-deep .el-collapse {
border: none;
}
::v-deep .el-collapse-item__header {
width: 100%;
height: 44px;
background: #f9faff;
color: #333333;
padding-left: 80px;
font-size: 14px;
font-weight: 400;
}
::v-deep .el-form-item {
margin-bottom: 10px;
}
}
.remakeDetails {
::v-deep img {
max-width: 200px;
max-height: 200px;
} }
</style> }
\ No newline at end of file </style>
src/views/userInfo/components/changePhone.vue 0 → 100644
<template>
<el-drawer :lock-scroll="true" :title="title" :visible="show" :size="width" :append-to-body="body" @close="close">
<el-form ref="ruleForm" :model="webForm" label-width="80px" class="uploadLink">
<el-form-item label="手机号">
<el-input v-model="webForm.phone" type="text" maxlength="50" placeholder="请输入手机号"></el-input>
</el-form-item>
</el-form>
<span class="dialog-footer rowFlex">
<el-button class="btn" size="small" type="primary" @click="submit">保 存</el-button>
<el-button class="btn" size="small" @click="close">取 消</el-button>
</span>
</el-drawer>
</template>
<script type="text/javascript">
import { bindMobile } from '@/api/game'
import { mapState } from 'vuex'
export default {
components: {
},
props: ['show', 'width', 'title', 'body', 'phone'],
data() {
return {
webForm: {
phone: ''
}
}
},
computed: {
...mapState('game', ['accountSelect'])
},
watch: {
show(newVal, oldVal) {
if (newVal) {
// this.handleInfo()
this.webForm.phone = this.phone
}
}
},
mounted() {
},
methods: {
close() {
this.$emit('update:show', false)
},
submit() {
if (!/^1((3[0-9])|(4[1579])|(5[0-9])|(6[6])|(7[0-9])|(8[0-9])|(9[0-9]))\d{8}$/.test(this.webForm.phone)) {
this.$message.warning('请填写正确的手机号')
return false
}
const data = {
member_id: this.accountSelect,
mobile: this.webForm.phone
}
bindMobile(data).then((res) => {
if (res.status_code == 1) {
this.$message.success(res.msg)
}
})
this.$emit('update:phone', this.webForm.phone)
this.$emit('update:show', false)
this.$emit('update:phone', this.webForm.phone)
}
}
}
</script>
<style lang="scss" scoped>
.dialog-footer {
width: calc(100% - 20px);
height: 52px;
position: absolute;
right: 20px;
bottom: 20px;
padding-top: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
justify-content: flex-end;
.btn {
width: 84px;
height: 32px;
}
}
.createLink {
position: relative;
top: -8px;
left: 8px;
}
// 添加网页
.uploadLink {
padding:20px;
}
</style>
\ No newline at end of file
src/views/userInfo/components/roleInfo/appeal.vue 0 → 100644
<template>
<el-drawer
:lock-scroll="true"
title="玩家申诉"
:visible="show"
size="400px"
:append-to-body="true"
@close="close"
>
<div class="drawer-content">
<el-form
ref="appealForm"
:model="appealForm"
:rules="appealRules"
label-position="top"
class="appealForm"
label-width="100px"
>
<el-form-item
label="主游戏"
prop="main_game_id"
>
<mainGameSelect
label=""
:default-value="appealForm.main_game_id"
style="width: 100%"
width="100%"
@result="mainGameResult"
/>
</el-form-item>
<el-form-item label="">
<el-radio-group v-model="appealForm.role_id_type">
<el-radio label="cp_role_id">CP角色ID</el-radio>
<el-radio label="role_id">掌游角色ID</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="CP角色ID" prop="cp_role_id">
<el-input
v-model="appealForm.cp_role_id"
style="width: 100%"
placeholder="请输入CP角色ID"
@change="change_cp_role_id"
></el-input>
</el-form-item>
<el-form-item
label="角色名"
prop="role_name"
>
<el-input
v-model="appealForm.role_name"
placeholder="请先选择主游戏和输入CP角色ID"
disabled
></el-input>
</el-form-item>
<el-form-item
label="区服"
prop="server_name"
>
<el-input
v-model="appealForm.server_name"
placeholder="请先选择主游戏和输入CP角色ID"
disabled
></el-input>
</el-form-item>
<el-form-item
label="申诉类型"
prop="appeal_type"
>
<el-select
v-model="appealForm.appeal_type"
style="width:100%;"
clearable
placeholder="请选择"
>
<el-option
v-for="item in appeal_type_list"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item
label="详情"
prop="content"
style="margin-top:-10px;"
>
<textEditor
:remark.sync="appealForm.remark"
domid="appeal_content"
:contenteditable="true"
@resultReamrk="resultReamrk"
/>
</el-form-item>
</el-form>
<span class="dialog-footer rowFlex">
<el-button
class="btn"
type="primary"
:loading="loading"
@click="submit"
>确 定</el-button>
<el-button
class="btn"
@click="close"
>取 消</el-button>
</span>
</div>
</el-drawer>
</template>
<script type="text/javascript">
import textEditor from '@/components/textEditor.vue'
import { searchcondition, appealAdd } from '@/api/game'
import { mapState } from 'vuex'
import mainGameSelect from '@/components/mainGame.vue'
export default {
components: {
textEditor,
mainGameSelect
},
computed: {
...mapState('user', ['userInfo'])
},
props: ['show', 'appealInfo'],
data() {
return {
appealRules: {
main_game_id: [
{ required: true, message: '请选择主游戏', trigger: 'change' }
],
cp_role_id: [
{ required: true, message: '请选择cp角色id', trigger: 'change' }
],
role_id: [
{ required: true, message: '请选择角色名', trigger: 'change' }
],
server_info: [
{ required: true, message: '请选择区服', trigger: 'change' }
],
appeal_type: [
{ required: true, message: '请选择违规操作', trigger: 'change' }
]
},
appealForm: {
main_game_id: '',
role_id_type: 'cp_role_id',
role_id: '',
cp_role_id: '',
appeal_type: '',
remark: '',
role_name: '',
server_name: '',
user_id: '',
user_name: ''
},
appeal_type_list: [],
loading: false,
serverNameList: []
}
},
mounted() {
this.searchcondition()
if (this.appealInfo && this.appealInfo.id) {
const {
appeal_type = '',
remark = '',
role_id = ''
} = this.appealInfo
this.appealForm.appeal_type = Number(appeal_type)
this.appealForm.remark = remark
}
},
methods: {
searchcondition() {
const data = {
type: 'dictionaries',
table_name: 'zs_appeal_request',
field_name: 'appeal_type'
}
searchcondition(data).then(res => {
this.appeal_type_list = res.data.data
})
},
async change_cp_role_id() {
if (
!!this.appealForm.cp_role_id &&
!!this.appealForm.main_game_id
) {
const res = await searchcondition({
type: 'role',
cp_role_id: this.appealForm.cp_role_id,
main_game_id: this.appealForm.main_game_id
})
if (res.status_code == 1 && res.data.data.length > 0) {
this.appealForm.role_id = res.data.data[0]
? res.data.data[0].value
: ''
this.appealForm.role_name = res.data.data[0]
? res.data.data[0].label
: ''
this.appealForm.server_name = res.data.data[0]
? res.data.data[0].server_name
: ''
} else {
this.$message.warning('角色信息不存在')
}
} else {
this.$message.warning('请先选择主游戏')
this.appealForm.cp_role_id = ''
}
},
mainGameResult(data) {
this.appealForm.main_game_id = data
this.appealForm.cp_role_id = ''
this.appealForm.role_id = ''
this.appealForm.role_name = ''
this.appealForm.server_name = ''
},
resultReamrk(text) {
// console.log(text, '最后编辑器的内容')
},
close() {
this.$emit('update:show', false)
},
submit() {
this.$refs['appealForm'].validate(async valid => {
if (valid) {
this.loading = true
await this.appealAdd()
} else {
return false
}
})
},
async appealAdd() {
const { id, username } = this.userInfo
const { role_id, appeal_type, remark, main_game_id, cp_role_id, role_name, server_name, role_id_type } = this.appealForm
const data = {
user_id: id,
user_name: username,
role_id,
appeal_type,
remark,
main_game_id,
cp_role_id,
role_name,
role_id_type,
server_name
}
try {
const res = await appealAdd(data)
if (res.status_code === 1) {
this.$message.success(res.msg)
this.close()
this.$emit('updateReportList')
}
this.loading = false
} catch (error) {
this.loading = false
}
setTimeout(() => {
this.loading = false
}, 2000)
}
}
}
</script>
<style lang="scss" scoped>
// ::v-deep .el-drawer {
// height: 100%;
// overflow: auto;
// overflow-x: hidden;
// }
.drawer-content {
width: 100%;
height: 100%;
overflow: auto;
padding: 20px;
padding-bottom: 100px;
margin-top: -20px;
}
.dialog-footer {
width: 100%;
height: auto;
position: absolute;
right: 0px;
bottom: 0px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
justify-content: flex-end;
background: #fff;
.btn {
width: 84px;
height: 32px;
}
}
</style>
\ No newline at end of file
src/views/userInfo/components/roleInfo/userInfo.vue 0 → 100644
<template>
<div class="details-user-info-role columnFlex">
<div
v-loading="loading"
class="detailsContent"
>
<div v-if="roleList.length>0">
<p class="textInfo">角色充值金额信息会有5-10分钟延迟，请以订单信息为准</p>
<el-collapse
v-model="collapseActive"
@change="handleChange"
>
<div
v-for="(items,indexs) in roleList"
:key="indexs"
class="contentItem"
>
<div class="title"></div>
<el-collapse-item :name="items.id">
<template slot="title">
<div class="collapseTitle rowFlex columnCenter spaceBetween">
<p class="hidden">
{{ items.role_name }} - {{ items.server_name }} - {{ items.recharge_total?items.recharge_total+'元':'0元' }}
</p>
<el-button
type="primary"
size="mini"
class="collapseTitleBtn"
@click.stop="appealLayer(items)"
>申诉</el-button>
</div>
</template>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">区服:</span>
<p class="text">{{ items.server_name }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">合区区服:</span>
<p class="text">{{ items.merge_server_name }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">角色名称:</span>
<p class="text">{{ items.role_name }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">等级:</span>
<p class="text">{{ items.role_level }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">战力:</span>
<p class="text">{{ items.combat_num }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">充值金额:</span>
<p class="text">{{ items.recharge_total }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">转端审核:</span>
<p class="text">{{ items.trans_status_name || '无' }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">CP角色ID:</span>
<p class="text">{{ items.cp_role_id }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">最近活跃时间:</span>
<p class="text">{{ $moment( items.last_login_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">创建时间:</span>
<p class="text">{{ $moment( items.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">创角天数:</span>
<p class="text">{{ items.create_role_day }}天</p>
</div>
</div>
</el-collapse-item>
</div>
</el-collapse>
</div>
<div
v-else-if="!loading && roleList.length==0"
class="noContent rowFlex allCenter"
>
<noContent/>
</div>
</div>
<appeal
v-if="showAppeal"
:show.sync="showAppeal"
:appeal-info="appealInfo"
/>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex'
import { getRoleHoLo } from '@/api/game'
import noContent from '@/components/noContent.vue'
import appeal from './appeal.vue'
export default {
components: {
noContent,
appeal
},
data() {
return {
collapseActive: [],
roleList: [],
nowTime: '',
loading: false,
showAppeal: false,
appealInfo: {},
pageInfo: {
page_size: 100,
page: 1,
total: 0
},
infoList: []
}
},
computed: {
...mapState('game', ['accountSelect', 'gameTabActive'])
},
watch: {
accountSelect(newVal, oldVal) {
if (newVal && newVal !== '' && this.gameTabActive == 2) {
this.requestRoleList()
}
}
},
mounted() {
this.requestRoleList()
this.nowTime = new Date().getTime()
},
methods: {
handleChange() {
},
// 申诉
appealLayer(item) {
this.appealInfo = item
this.showAppeal = true
},
requestRoleList() {
if (this.accountSelect === '') {
this.$message.warning('暂无关联的账号，请先去关联账号!')
return false
}
this.loading = true
const data = {
api_search_name: '',
member_id: this.accountSelect,
search_type: 'list',
...this.pageInfo
}
getRoleHoLo(data).then(res => {
this.loading = false
if (res.status_code == 1) {
if (res.data.data.length > 0) {
this.roleList = res.data.data.sort((a, b) => { return Number(b.recharge_total) - Number(a.recharge_total) })
} else {
this.roleList = []
}
}
}, err => {
this.loading = false
})
}
}
}
</script>
<style lang="scss" scoped>
.details-user-info-role {
width: 100%;
height: 100%;
background: #fff;
margin-left: 2px;
.detailsTitle {
width: 100%;
padding: 0 vw(20);
height: 60px;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
border-bottom: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
p {
color: #333333;
}
}
.detailsContent {
width: 100%;
height: calc(100vh - 100px);
overflow: auto;
.textInfo {
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
font-size: 12px;
margin-bottom: 10px;
}
.contentItem {
position: relative;
.title {
position: absolute;
left: 10px;
top: 14px;
font-size: 14px;
color: #999999;
}
.collapseTitle {
width: 90%;
}
}
.item {
width: 100%;
height: auto;
font-size: 14px;
font-weight: 400;
color: #333333;
padding: 5px 0;
transition: all 0.5s;
position: relative;
padding-left: 10px;
cursor: pointer;
.tableImage {
width: 40px;
height: 40px;
border-radius: 6px;
margin-right: vw(10);
}
.label {
color: #999999;
}
.text {
color: #333333;
margin-left: 10px;
word-break: break-all;
max-width: 80%;
}
.icon {
display: none;
position: absolute;
right: 0;
top: 12px;
}
.tags {
width: vw(300);
margin-left: 10px;
.tagsItem {
width: vw(300);
}
.tag {
height: 22px;
line-height: 22px;
padding: 0 8px;
background: #ffffff;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.2);
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
margin-right: 10px;
margin-bottom: 10px;
}
}
}
.item:hover .icon {
display: block;
}
}
::v-deep .el-collapse-item {
margin-bottom: 20px;
}
::v-deep .el-collapse-item__content {
padding-bottom: 10px;
}
::v-deep .el-collapse {
border: none;
}
::v-deep .el-collapse-item__header {
width: 100%;
height: 44px;
background: #f9faff;
color: #333333;
padding-left: 10px;
font-size: 14px;
font-weight: 400;
}
}
</style>
\ No newline at end of file
src/views/userInfo/components/shareInfo.vue 0 → 100644
<template>
<div class="newPage">
<!-- 共享信息 -->
<div v-if="userList.length > 0" class="item columnFlex spaceBetween">
<!-- <div class="rowFlex columnCenter">
<span class="label">共享信息:</span>
<i style="margin-left: 10px; font-size: 20px; color: #0ac358; cursor: pointer" class="el-icon-circle-plus-outline" type="primary" @click="addGroupText"></i>
</div> -->
<div v-for="(i,k) in userList" :key="k" class="userList rowFlex ">
<p class="label hidden">{{ i.zq_user_name }} -- {{ i.name }}</p>
<div style="margin-bottom:10px;" class="columnFlex ">
<div v-for="(item,index) in i.text" :key="index+'1'" class="keyWordsItem rowFlex columnCenter">
<el-input v-model="item.text" type="textarea" :disabled="chatUserDetails.userid !== i.userid || i.zq_user_id!== userInfo.id" placeholder="请输入共享信息" @change="inputBlur(k,index)"> </el-input>
<div v-if="chatUserDetails.userid == i.userid && i.zq_user_id=== userInfo.id">
<i v-if="index==0" style="margin-left:10px;font-size:20px;color:#0AC358;cursor: pointer;" class="el-icon-circle-plus-outline" type="primary" @click="addInputItem(k,index)"></i>
<i v-else style="margin-left:10px;font-size:20px;color:#0AC358;cursor: pointer;" class="el-icon-remove-outline" type="primary" @click="removeInput(k,index)"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { shareInfoUpsert, shareInfoDel } from '@/api/works'
import { mapState } from 'vuex'
export default {
name: 'ShareInfo',
props: ['chatUserDetails'],
data() {
return {
inputList: [],
userList: []
}
},
computed: {
...mapState('user', ['userInfo'])
},
watch: {
chatUserDetails(newVal, oldVal) {
this.handleUserList()
}
},
mounted() {
this.handleUserList()
},
methods: {
handleUserList() {
if (this.chatUserDetails.share_info && this.chatUserDetails.share_info.length > 0) {
const item = this.chatUserDetails.share_info.find(item => item.userid === this.chatUserDetails.userid && item.zq_user_id === this.userInfo.id)
if (!item) {
this.userList = [...this.chatUserDetails.share_info, { zq_user_name: this.userInfo.username, zq_user_id: this.userInfo.id, userid: this.chatUserDetails.userid, name: this.chatUserDetails?.user?.name || '', text: [{ id: '', text: '' }] }]
} else {
this.userList = this.chatUserDetails.share_info
}
} else {
this.userList = [{ zq_user_name: this.userInfo.username, zq_user_id: this.userInfo.id, userid: this.chatUserDetails.userid, name: this.chatUserDetails?.user?.name || '', text: [{ id: '', text: '' }] }]
}
},
addGroupText() {
if (this.userList.length > 0) {
const user = this.userList.find(item => {
if (this.chatUserDetails.user.name === item.zq_user_name) {
return item
}
})
if (user !== -1) {
this.$message.warning(user.zq_user_name + '共享信息已存在')
} else {
this.userList.push({ zq_user_name: this.chatUserDetails.user.name, text: [{ _id: '', text: '' }] })
}
} else {
this.userList.push({ zq_user_name: this.chatUserDetails.user.name, text: [{ _id: '', text: '' }] })
}
},
shareInfoUpsert(_id, text) {
if (text && text.trim() == '') {
this.$message.warning('请输入内容')
return false
}
const data = {
_id: _id || '',
userid: this.chatUserDetails.userid,
external_userid: this.chatUserDetails.external_userid,
text: text.trim()
}
shareInfoUpsert(data).then(res => {
if (res.status_code == 1) {
this.$message.success('保存成功')
}
})
},
inputBlur(k, index) {
// 修改信息
this.shareInfoUpsert(this.userList[k]?.text[index]._id, this.userList[k]?.text[index].text)
},
removeInput(k, index) {
if (this.userList[k]?.text[index]?._id !== '') {
this.shareInfoDel({ _id: this.userList[k].text[index]._id, userid: this.chatUserDetails.userid })
// 请求删除接口
} else {
}
this.userList[k].text.splice(index, 1)
},
// 删除共享信息
shareInfoDel(data) {
shareInfoDel(data).then(res => {
if (res.status_code == 1) {
this.$message.success(res.msg)
}
})
},
// 添加时间点
addInputItem(index) {
this.userList[index].text.push({ _id: '', text: '' })
this.inputList.push({ text: '' })
}
}
}
</script>
<style lang="scss" scoped>
.newPage {
width: 100%;
height: auto;
.item {
width: 100%;
height: auto;
font-size: 14px;
font-weight: 400;
color: #333333;
padding: 10px 0;
transition: all 0.5s;
position: relative;
cursor: pointer;
.tableImage {
width: 40px;
height: 40px;
border-radius: 6px;
margin-right: vw(10);
}
.showInputRemarkInput {
width: vw(220);
margin-left: 10px;
}
.label {
color: #999999;
width: vw(125);
}
.text {
color: #333333;
margin-left: 10px;
word-break: break-all;
max-width: 100%;
}
.icon {
display: none;
position: absolute;
right: 0;
top: 12px;
}
.noBind {
width: 44px;
height: 22px;
border-radius: 4px;
border: 1px solid #00bf8a;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #00bf8a;
margin-left: 30px;
cursor: pointer;
}
.tags {
width: vw(300);
margin-left: 10px;
.tagsItem {
width: vw(300);
}
.tag {
height: 22px;
line-height: 22px;
padding: 0 8px;
background: #ffffff;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.2);
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
margin-right: 10px;
margin-bottom: 10px;
}
}
}
.item:hover .icon {
display: block;
}
.userList{
width: 100%;
height: auto;
margin-top: 20px;
.label{
margin-right: 10px;
margin-top: 8px;
}
.keyWordsItem{
margin-bottom: 20px;
}
}
}
</style>
\ No newline at end of file
src/views/userInfo/userInfo.vue
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
<!-- 用 el-tabs 有三个 tab 分别是 客户资料 角色信息 违规记录 用 v-for 循环 --> <!-- 用 el-tabs 有三个 tab 分别是 客户资料 角色信息 违规记录 用 v-for 循环 -->
<el-tabs v-model="activeTab" > <el-tabs v-model="activeTab" >
<el-tab-pane v-for="item in tabList" :key="item.name" :label="item.name" :name="item.value"> <el-tab-pane v-for="item in tabList" :key="item.name" :label="item.name" :name="item.value">
<Info v-if="item.value === 'userInfo'"/> <Info v-if="activeTab === 'userInfo'" :chatUserDetails="chatUserInfo"/>
<RoleInfo v-if="item.value === 'roleInfo'"/> <RoleInfo v-if="activeTab === 'roleInfo'"/>
<ViolationRecord v-if="item.value === 'violationRecord'"/> <ViolationRecord v-if="activeTab === 'violationRecord'"/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
...@@ -14,6 +14,8 @@ ...@@ -14,6 +14,8 @@
import Info from './components/Info.vue' import Info from './components/Info.vue'
import RoleInfo from './components/RoleInfo.vue' import RoleInfo from './components/RoleInfo.vue'
import ViolationRecord from './components/ViolationRecord.vue' import ViolationRecord from './components/ViolationRecord.vue'
import { mapState,mapMutations } from 'vuex'
import Cookies from 'js-cookie'
export default { export default {
name: 'UserInfo', name: 'UserInfo',
components:{ components:{
...@@ -22,7 +24,9 @@ export default { ...@@ -22,7 +24,9 @@ export default {
ViolationRecord ViolationRecord
}, },
mounted() { mounted() {
},
computed: {
...mapState('game', ['chatUserInfo']),
}, },
data() { data() {
return { return {
...@@ -44,14 +48,25 @@ export default { ...@@ -44,14 +48,25 @@ export default {
} }
}, },
created(){ created(){
console.log(window.location.href,'window.location.href') // 初始化 vuex 中的值
}, this.initVuexValue()
computed: {
}, },
methods: { methods:{
...mapMutations('game',['set_chatUserInfo']),
...mapMutations('user',['set_userid','set_corp_id','set_external_userid','set_token','set_cser_info','set_cser_id','set_cser_name']),
initVuexValue(){
this.set_userid(Cookies.get('userid'))
this.set_corp_id(Cookies.get('corp_id'))
this.set_external_userid(Cookies.get('external_userid'))
this.set_token(Cookies.get('token'))
this.set_cser_id(Cookies.get('cser_id'))
this.set_cser_name(Cookies.get('cser_name'))
const cser_info = Cookies.get('cser_info')
console.log(Cookies.get('cser_id'),'cser_info',Cookies.get('cser_name'))
cser_info?this.set_cser_info(JSON.parse(cser_info)):this.set_cser_info({})
} }
}
} }
</script> </script>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论