Skip to content

C
company_app
提交 f0207f9f 作者: 毛细亚
操作

Merge branch '1.1' into 1.2

上级 b768d9b4 89b3ae84
正在显示 包含 2099 行增加 和 1460 行删除
company_app/index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="favicon.ico">
<title>company_app</title>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no,user-scalable=no"> -->
<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
<script defer src="static/js/chunk-vendors.js"></script><script defer src="static/js/app.js"></script></head>
<body>
<noscript>
<strong>We're sorry but company_app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html>
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/><title>company_app</title><script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script><script defer="defer" src="static/js/chunk-vendors.fc0c503d.js"></script><script defer="defer" src="static/js/app.24843ee7.js"></script><link href="static/css/chunk-vendors.8e901099.css" rel="stylesheet"><link href="static/css/app.ea202361.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but company_app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
\ No newline at end of file
public/index.html
......@@ -5,6 +5,13 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- HTTP 1.1 -->
<meta http-equiv="pragma" content="no-cache">
<!-- HTTP 1.0 -->
<meta http-equiv="cache-control" content="no-cache">
<!-- Prevent caching at the proxy server -->
<meta http-equiv="expires" content="0">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no,user-scalable=no"> -->
<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
......
src/directive/scroll/README.md 0 → 100644
# v-scroll 下拉加载更多指令
## 功能概述
`v-scroll` 是一个用于实现无限滚动加载的 Vue 自定义指令。当用户滚动到页面底部或接近底部时，自动触发加载更多数据的函数，适用于列表分页加载场景。
## 特性
- 自动检测滚动容器（支持窗口和自定义滚动容器）
- 使用节流控制滚动事件触发频率，提高性能
- 支持自定义触发距离
- 支持禁用功能
- 支持移动端触摸事件
- 自动处理内容不足一屏的情况
## 参数说明
### 指令值
- **类型**：`Function`
- **必填**：是
- **说明**：滚动到底部时触发的加载更多函数
### 指令参数
- **语法**：`v-scroll:distance`
- **类型**：`Number`
- **默认值**：`30`（单位：px）
- **说明**：距离底部多少像素时触发加载更多函数
### 修饰符
- **disabled**：禁用滚动加载功能
- **语法**：`v-scroll.disabled`
- **说明**：设置后将不会触发加载更多函数
## 使用方法
### 基本用法
```vue
<template>
<div v-scroll="loadMore" class="list-container">
<div v-for="(item, index) in list" :key="index" class="list-item">
{{ item.title }}
</div>
<div v-if="loading" class="loading">加载中...</div>
<div v-if="noMore" class="no-more">没有更多数据</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [],
page: 1,
pageSize: 10,
loading: false,
noMore: false
}
},
mounted() {
// 初始加载第一页数据
this.getList()
},
methods: {
// 加载更多函数，将作为 v-scroll 指令的值
loadMore() {
// 如果正在加载或没有更多数据，则不执行
if (this.loading || this.noMore) return
this.page++
this.getList()
},
async getList() {
this.loading = true
try {
const res = await this.fetchData(this.page, this.pageSize)
if (res.data && res.data.length > 0) {
this.list = [...this.list, ...res.data]
} else {
this.noMore = true
}
} catch (error) {
console.error('加载数据失败', error)
} finally {
this.loading = false
}
},
fetchData(page, pageSize) {
// 实际项目中替换为真实 API 调用
return this.$api.getList({ page, pageSize })
}
}
}
</script>
<style scoped>
.list-container {
height: 500px; /* 设置容器高度以启用滚动 */
overflow-y: auto;
max-width: 360px; /* 适配企业微信侧边栏 */
margin: 0 auto;
}
</style>
```
### 自定义触发距离
通过参数设置距离底部多少像素时触发加载：
```html
<!-- 距离底部 50px 时触发加载更多 -->
<div v-scroll:50="loadMore" class="list-container">
<!-- 列表内容 -->
</div>
```
### 禁用滚动加载
使用 disabled 修饰符禁用滚动加载功能：
```html
<!-- 禁用滚动加载功能 -->
<div v-scroll.disabled="loadMore" class="list-container">
<!-- 列表内容 -->
</div>
```
### 动态控制启用/禁用
结合 Vue 的条件表达式动态控制滚动加载：
```html
<!-- 根据 isLoading 状态动态启用/禁用 -->
<div v-scroll:30="isLoading ? null : loadMore" class="list-container">
<!-- 列表内容 -->
</div>
<!-- 或使用对象语法 -->
<div v-scroll="{ loadMore: loadMoreFn, disabled: isLoading }" class="list-container">
<!-- 列表内容 -->
</div>
```
## 注意事项
1. **滚动容器设置**：
- 确保滚动容器有固定高度或最大高度，并设置 `overflow-y: auto` 或 `overflow-y: scroll`
- 指令会自动检测最近的滚动容器，如果没有找到，则使用 window 作为滚动容器
2. **性能优化**：
- 指令内部已使用节流函数控制滚动事件触发频率，默认为 200ms
- 大数据列表建议使用虚拟滚动结合本指令使用
3. **移动端适配**：
- 已支持触摸事件，在移动端也能正常工作
- 在企业微信环境中，最大宽度建议设置为 360px
4. **加载状态处理**：
- 在 loadMore 函数中应该有加载状态控制，防止重复触发
- 推荐使用 loading 和 noMore 两个状态分别控制加载中和无更多数据
5. **初始内容不足一屏**：
- 指令会在初始化时检查一次是否需要加载更多，处理内容不足一屏的情况
- 初始检查会延迟 50ms 执行，确保 DOM 渲染完成
## 示例场景
### 商品列表无限加载
```vue
<template>
<div class="product-list" v-scroll="loadMoreProducts">
<product-card
v-for="product in products"
:key="product.id"
:product="product"
/>
<div v-if="loading" class="loading-indicator">
<i class="el-icon-loading"></i> 加载中...
</div>
<div v-if="noMore && !loading" class="no-more">
没有更多商品了
</div>
</div>
</template>
```
### 聊天记录上拉加载历史消息
```vue
<template>
<div class="chat-container" v-scroll:50="loadHistoryMessages">
<div class="message-list">
<message-item
v-for="msg in messages"
:key="msg.id"
:message="msg"
/>
</div>
</div>
</template>
```
## 技术实现
该指令基于以下核心实现：
1. 使用 `throttle` 节流函数控制滚动事件触发频率
2. 自动检测并绑定最近的滚动容器
3. 精确计算滚动位置，支持 window 和自定义容器两种情况
4. 完整支持 Vue 指令生命周期（inserted, update, unbind）
\ No newline at end of file
src/directive/scroll/demo.vue 0 → 100644
<template>
<div class="scroll-demo">
<h2 class="demo-title">下拉加载更多示例</h2>
<!-- 使用v-scroll指令的列表容器 -->
<div
v-scroll="loadMore"
class="list-container"
ref="listContainer"
>
<!-- 列表项 -->
<div
v-for="(item, index) in list"
:key="index"
class="list-item"
>
<div class="item-avatar">
<img :src="item.avatar" alt="头像">
</div>
<div class="item-content">
<div class="item-title">{{item.title}}</div>
<div class="item-desc">{{item.desc}}</div>
</div>
</div>
<!-- 加载状态 -->
<div v-if="loading" class="loading-status">
<i class="el-icon-loading"></i> 加载中...
</div>
<!-- 无更多数据提示 -->
<div v-if="noMore && !loading" class="no-more">
— 没有更多数据了 —
</div>
</div>
<!-- 控制面板 -->
<div class="control-panel">
<el-switch
v-model="disabled"
active-text="禁用加载"
inactive-text="启用加载"
/>
<el-button
@click="resetList"
type="primary"
size="small"
>
重置列表
</el-button>
</div>
</div>
</template>
<script>
export default {
name: 'ScrollDemo',
data() {
return {
list: [],
page: 1,
pageSize: 10,
loading: false,
noMore: false,
disabled: false
}
},
computed: {
// 根据disabled状态动态计算加载函数
loadMoreHandler() {
return this.disabled ? null : this.loadMore
}
},
mounted() {
// 初始加载第一页数据
this.getList()
},
methods: {
// 加载更多数据
loadMore() {
// 如果正在加载、已禁用或没有更多数据，则不执行
if (this.loading || this.disabled || this.noMore) return
this.page++
this.getList()
},
// 获取列表数据
async getList() {
this.loading = true
try {
// 模拟API请求延迟
await this.sleep(800)
// 模拟API请求返回数据
const res = await this.mockApi(this.page, this.pageSize)
if (res.data && res.data.length > 0) {
// 追加新数据到列表
this.list = [...this.list, ...res.data]
} else {
// 设置无更多数据标记
this.noMore = true
}
} catch (error) {
console.error('加载数据失败', error)
this.$message.error('加载失败，请重试')
} finally {
this.loading = false
}
},
// 重置列表
resetList() {
this.list = []
this.page = 1
this.noMore = false
this.getList()
},
// 模拟API请求
mockApi(page, pageSize) {
return new Promise(resolve => {
// 假设只有5页数据
const hasMore = page <= 5
const data = hasMore
? Array(pageSize).fill().map((_, i) => ({
id: (page - 1) * pageSize + i + 1,
title: `用户${(page - 1) * pageSize + i + 1}`,
desc: `这是第${page}页的第${i + 1}条数据，总第${(page - 1) * pageSize + i + 1}条`,
avatar: `https://randomuser.me/api/portraits/men/${((page - 1) * pageSize + i) % 100}.jpg`
}))
: []
resolve({ data, total: 50 })
})
},
// 辅助方法：延时
sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
}
}
</script>
<style scoped>
.scroll-demo {
max-width: 360px;
margin: 0 auto;
padding: 10px;
}
.demo-title {
text-align: center;
margin-bottom: 15px;
font-size: 18px;
}
.list-container {
height: 70vh;
overflow-y: auto;
border: 1px solid #ebeef5;
border-radius: 4px;
background-color: #fff;
}
.list-item {
display: flex;
padding: 12px 15px;
border-bottom: 1px solid #f0f0f0;
}
.item-avatar {
width: 40px;
height: 40px;
margin-right: 12px;
}
.item-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.item-content {
flex: 1;
}
.item-title {
font-size: 16px;
font-weight: 500;
margin-bottom: 4px;
}
.item-desc {
font-size: 13px;
color: #606266;
}
.loading-status, .no-more {
text-align: center;
padding: 15px;
color: #909399;
font-size: 14px;
}
.control-panel {
margin-top: 15px;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f7fa;
border-radius: 4px;
}
</style>
\ No newline at end of file
src/directive/scroll/index.js 0 → 100644
// 表格吸顶
import scroll from './scroll'
const install = function(Vue) {
Vue.directive('scroll', scroll)
}
if (window.Vue) {
window.scroll = scroll
Vue.use(install); // eslint-disable-line
}
scroll.install = install
export default scroll
src/directive/scroll/scroll.js 0 → 100644
/*
* 我想封装这样的下拉加载更多的功能指令
* 1. 当页面滚动到底部或者接近底部的时候 触发接口请求请求下一页的数据
* 2.触发的时候 引入 debounce 防抖函数
*/
import { throttle } from '@/utils/index';
const InfiniteScroll = {
name: 'infinite-scroll',
inserted(el, binding, vnode) {
const options = parseOptions(el, binding);
el.__infinite_scroll_options = options;
// 使用节流控制滚动事件触发频率
const scrollHandler = createScrollHandler(el, binding, vnode);
el.__infinite_scroll_handler = throttle(scrollHandler, 200);
// 绑定滚动事件
el.__infinite_scroll_container = bindEvents(el, el.__infinite_scroll_handler);
// 初始检查一次（处理内容不足一屏的情况）
setTimeout(() => {
el.__infinite_scroll_handler();
}, 50);
},
update(el, binding) {
// 更新配置
el.__infinite_scroll_options = parseOptions(el, binding);
},
unbind(el) {
// 解绑事件
if (el.__infinite_scroll_container && el.__infinite_scroll_handler) {
unbindEvents(el, el.__infinite_scroll_container, el.__infinite_scroll_handler);
}
// 清理引用
delete el.__infinite_scroll_container;
delete el.__infinite_scroll_handler;
delete el.__infinite_scroll_options;
}
};
// 解析配置选项
function parseOptions(el, binding) {
return {
// 距离底部多远触发加载，默认30px
distance: binding.arg ? parseInt(binding.arg) : 30,
// 是否禁用
disabled: binding.modifiers.disabled,
// 加载函数
loadMore: binding.value
};
}
// 创建滚动处理函数
function createScrollHandler(el, binding, vnode) {
return function() {
const options = el.__infinite_scroll_options;
// 检查是否禁用
if (options.disabled) return;
const scrollContainer = el.__infinite_scroll_container;
const isBottom = isScrollBottom(scrollContainer, el, options.distance);
if (isBottom) {
// 调用加载函数
options.loadMore();
}
};
}
// 绑定事件
function bindEvents(el, handler) {
const scrollContainer = getScrollContainer(el);
scrollContainer.addEventListener('scroll', handler);
// 移动端支持
if ('ontouchend' in document) {
scrollContainer.addEventListener('touchend', handler);
}
return scrollContainer;
}
// 解绑事件
function unbindEvents(el, container, handler) {
container.removeEventListener('scroll', handler);
if ('ontouchend' in document) {
container.removeEventListener('touchend', handler);
}
}
// 获取滚动容器
function getScrollContainer(el) {
let container = el;
while (container && container !== document.body) {
const { overflowY } = window.getComputedStyle(container);
if (['auto', 'scroll', 'overlay'].includes(overflowY)) {
return container;
}
container = container.parentNode;
}
// 默认返回window
return window;
}
// 判断是否滚动到底部
function isScrollBottom(scrollContainer, el, distance = 30) {
// window情况
if (scrollContainer === window) {
return (
Math.ceil(window.innerHeight + window.pageYOffset) >=
document.documentElement.scrollHeight - distance
);
}
// DOM元素情况
return (
Math.ceil(scrollContainer.scrollTop + scrollContainer.clientHeight) >=
scrollContainer.scrollHeight - distance
);
}
export default InfiniteScroll;
\ No newline at end of file
src/main.js
......@@ -20,21 +20,22 @@ import globalComponent from '@/components/register.js'
import loadmore from '@/directive/loadmore/index.js' // 加载更多
import clickagain from './directive/clickagain'
import permission from '@/directive/permission/index.js' // 权限判断指令
Vue.use(globalComponent).use(permission).use(clickagain).use(loadmore)
import scroll from '@/directive/scroll' // 下拉加载更多指令
Vue.use(globalComponent).use(permission).use(clickagain).use(loadmore).use(scroll)
// 导入 VConsole 清理工具
import '@/utils/vconsoleCleanup'
// 开发环境下初始化 stagewise 工具栏
if (process.env.NODE_ENV === 'development') {
import('@stagewise/toolbar').then(({ initToolbar }) => {
const stagewiseConfig = {
plugins: []
};
initToolbar(stagewiseConfig);
}).catch(err => {
console.error('Failed to initialize stagewise toolbar:', err);
});
}
// if (process.env.NODE_ENV === 'development') {
// import('@stagewise/toolbar').then(({ initToolbar }) => {
// const stagewiseConfig = {
// plugins: []
// };
// initToolbar(stagewiseConfig);
// }).catch(err => {
// console.error('Failed to initialize stagewise toolbar:', err);
// });
// }
// 开发环境不收集日志
if (process.env.NODE_ENV !== 'development') {
......
src/store/modules/game.js
......@@ -16,6 +16,7 @@ const state = {
gameUserInfo:{},
send_game_log: null, // 转游发送渠道新增日志发送信息
chatUserInfo: {}, // 当前选中的用户的详情
viewLoading:false, // 查看用户详情的时候 加载状态
}
const mutations = {
......@@ -39,6 +40,9 @@ const mutations = {
},
set_send_game_log(state, data) {
state.send_game_log = data
},
set_viewLoading(state, data) {
state.viewLoading = data
}
}
......
src/styles/index.scss
......@@ -86,6 +86,22 @@ div:focus {
height: 1px;
background-color: #e4e7ed;
}
.el-tabs{
height:100%;
}
.el-tabs__content{
height: 100%;
}
.el-tab-pane{
height: 100%;
}
.el-tabs .el-tabs__header{
margin: 0;
// height: 60px;
}
.el-tabs__nav-next, .el-tabs__nav-prev{
line-height: 50px;
}
/* 统一下拉框高度 */
.el-select-dropdown__item {
......
src/views/ViolationRecord.vue
......@@ -259,15 +259,15 @@ export default {
<style lang="scss" scoped>
.violationRecord {
width: 100%;
height: calc(100vh - 170px);
height: 100%;
background: #fff;
overflow-y: auto;
overflow-x: hidden;
.violationRecordContent {
width: 100%;
padding: 20px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
height: auto;
}
.contentItem {
......
src/views/addressBook.vue deleted 100644 → 0
<template>
<div class="addressBook-content">
通讯录
</div>
</template>
<script>
export default {
name: 'AddressBook',
}
</script>
<style lang="scss" scoped>
.addressBook-content{
width: 100%;
height: 100%;
background: #fff;
}
</style>
\ No newline at end of file
src/views/components/ApplyRecords/AreaTransferApply.vue
<template>
<div class="terminaListArea">
<div class="terminaListArea" v-scroll="paperScroll">
<div class="addApply rowFlex spaceBetween">
<span></span>
<el-button
......@@ -44,10 +44,7 @@
</el-form-item>
</el-form>
<div
v-infinite-scroll="paperScroll"
:infinite-scroll-disabled="!isMoreRecord"
:infinite-scroll-immediate="false"
class="mailListScroll"
class="terminaListAreaList"
>
<!-- 举报申请 -->
<div class="scrollMain" v-if="terminaList.length > 0">
......@@ -377,6 +374,10 @@ export default {
this.$forceUpdate()
},
paperScroll() {
if (!this.isMoreRecord) {
console.log('没有更多数据了')
return false
}
this.requestNextPage()
},
requestNextPage(pageInfo) {
......@@ -457,6 +458,7 @@ export default {
width: 100%;
height: 100%;
overflow: auto;
overflow-x: hidden;
::v-deep .el-form-item__label{
font-weight: 400;
}
......@@ -516,12 +518,8 @@ export default {
}
}
.mailListScroll {
.terminaListAreaList {
width: 100%;
height: calc(100% - 220px);
overflow-y: auto;
overflow-x: hidden;
.scrollMain {
width: 100%;
height: auto;
......
src/views/components/ApplyRecords/TerminaTranfer.vue
<template>
<div class="terminaList">
<div class="terminaListContent" v-scroll="paperScroll">
<div class="addApply rowFlex spaceBetween">
<span></span>
<el-button
......@@ -43,10 +43,8 @@
</el-form-item>
</el-form>
<div
v-infinite-scroll="paperScroll"
:infinite-scroll-disabled="!isMoreRecord"
:infinite-scroll-immediate="false"
class="mailListScroll"
class="terminaListContentList"
>
<!-- 举报申请 -->
<div v-if="terminaList.length>0" class="scrollMain">
......@@ -68,176 +66,102 @@
</p>
<p><span class="label">转端状态:</span><span class="value">{{ item.trans_check_status_text || '-' }}</span></p>
</div>
<div class="terminaItemRight columnFlex columnCenter">
<el-button
v-if="item.approval_status== 3 && item.related_request_id == 0"
type="primary"
size="mini"
style="margin-bottom:15px;"
@click.stop="resubmitApproval(item)"
>重新提交</el-button>
<img
v-if="item.approval_status == 1"
:src="shenpi1"
class="icon"
/>
<img
v-else-if="item.approval_status == 2"
:src="shenpi2"
class="icon"
/>
<img
v-else-if="item.approval_status == 3"
:src="shenpi6"
class="icon"
/>
<img
v-else-if="item.approval_status == 4"
:src="shenpi4"
class="icon"
/>
<img
v-else-if="item.approval_status == 5"
:src="shenpi5"
class="icon"
/>
</div>
</div>
<!-- 审批进度 -->
<el-collapse-transition>
<div
v-if="item.showStep"
class="terminaProcessList"
>
<el-steps
direction="vertical"
:active="item.current"
finish-status="success"
>
<el-step
v-for="(items, indexs) in item.terminaProcessList"
:key="'trans_item_' + indexs"
:title="items.node_name"
>
<template slot="description">
<div
v-if="items"
class="trans-follow-1 card-style"
>
<div class="follow-item">
<span class="follow-info-label label-font">
{{ items.node_sort !== '0' ? '审批人:' : '登记人:' }}
</span>
<span class="info-value value-font">
{{ Array.isArray(items.user_name) ? items.user_name[0] : items.user_name }}
</span>
<el-tooltip
v-if="Array.isArray(items.user_name) && items.user_name.length > 1"
class="item"
effect="dark"
:content="items.user_name.slice(1).join('、')"
placement="top"
>
<span class="info-value value-font info-value-color">
{{ `+${items.user_name.length - 1}` }}
<!-- 审批进度 -->
<el-collapse-transition>
<div v-if="item.showStep" class="terminaProcessList">
<el-steps direction="vertical" :active="item.current" finish-status="success">
<el-step v-for="(items, indexs) in item.terminaProcessList" :key="'trans_item_' + indexs"
:title="items.node_name">
<template slot="description">
<div v-if="items" class="trans-follow-1 card-style">
<div class="follow-item">
<span class="follow-info-label label-font">
{{ items.node_sort !== '0' ? '审批人:' : '登记人:' }}
</span>
</el-tooltip>
</div>
<span class="info-value value-font">
{{ Array.isArray(items.user_name) ? items.user_name[0] : items.user_name }}
</span>
<el-tooltip v-if="Array.isArray(items.user_name) && items.user_name.length > 1" class="item"
effect="dark" :content="items.user_name.slice(1).join('、')" placement="top">
<span class="info-value value-font info-value-color">
{{ `+${items.user_name.length - 1}` }}
</span>
</el-tooltip>
</div>
<div
v-if="items.node_sort !== '0' || items.node_name === '系统'"
class="follow-item"
>
<span class="follow-info-label label-font">
审批结果:
</span>
<span
class="info-value value-font"
:class="items.current < indexs ? '' : switchStateTag(items.approval_result)"
>
{{ items.current < indexs ? '' : items.approval_result_text=='通过' ? '完成' : items.approval_result_text }}
</span>
</div>
<div class="follow-item">
<span class="follow-info-label label-font">
{{ items.node_sort !== '0' || items.node_name === '系统' ? '审批时间:' : '登记时间:' }}
</span>
<span class="info-value value-font">
{{ items.node_sort === '0' ? items.create_time : items.update_time }}
</span>
</div>
<div
v-if="(items.node_sort !== '0' || items.node_name === '系统') && items.approval_result === '2'"
class="follow-item"
>
<span class="follow-info-label label-font">
驳回原因:
</span>
<span class="info-value value-font">
{{ items.extra_attribution.remark }}
</span>
</div>
<div v-if="items.node_sort !== '0' || items.node_name === '系统'" class="follow-item">
<span class="follow-info-label label-font">
审批结果:
</span>
<span class="info-value value-font"
:class="items.current < indexs ? '' : switchStateTag(items.approval_result)">
{{ items.current < indexs ? '' : items.approval_result_text == '通过' ? '完成' :
items.approval_result_text }} </span>
</div>
<div class="follow-item">
<span class="follow-info-label label-font">
{{ items.node_sort !== '0' || items.node_name === '系统' ? '审批时间:' : '登记时间:' }}
</span>
<span class="info-value value-font">
{{ items.node_sort === '0' ? items.create_time : items.update_time }}
</span>
</div>
<div
v-if="(items.node_sort !== '0' || items.node_name === '系统') && items.approval_result === '2'"
class="follow-item">
<span class="follow-info-label label-font">
驳回原因:
</span>
<span class="info-value value-font">
{{ items.extra_attribution.remark }}
</span>
</div>
<div
v-if="items.node_sort === item.terminaProcessList[item.terminaProcessList.length - 1].node_sort + '' && items.approval_result === '1' && items.node_sort !== '0'"
class="follow-item-remark follow-item"
>
<span class="follow-info-label label-font">
处理结果:
</span>
<span class="info-value value-font">
{{ items.extra_attribution.banned_text }}
</span>
</div>
<div
v-if="items.node_name !== '系统' && items.extra_attribution && items.extra_attribution.remark"
class="info-item-remark"
>
<div style="display: flex;">
<span class="info-label remark-label">详情:</span>
<span
class="preview-btn"
@click.stop="previewRemark(items.extra_attribution.remark)"
>
<i class="el-icon-view"></i>
点击查看大图
<div
v-if="items.node_sort === item.terminaProcessList[item.terminaProcessList.length - 1].node_sort + '' && items.approval_result === '1' && items.node_sort !== '0'"
class="follow-item-remark follow-item">
<span class="follow-info-label label-font">
处理结果:
</span>
<span class="info-value value-font">
{{ items.extra_attribution.banned_text }}
</span>
</div>
<div
class="remark-value"
v-html="formatImg(items.extra_attribution && items.extra_attribution.remark ? items.extra_attribution.remark : '')"
>
v-if="items.node_name !== '系统' && items.extra_attribution && items.extra_attribution.remark"
class="info-item-remark">
<div style="display: flex;">
<span class="info-label remark-label">详情:</span>
<span class="preview-btn" @click.stop="previewRemark(items.extra_attribution.remark)">
<i class="el-icon-view"></i>
点击查看大图
</span>
</div>
<div class="remark-value"
v-html="formatImg(items.extra_attribution && items.extra_attribution.remark ? items.extra_attribution.remark : '')">
</div>
</div>
</div>
</div>
</template>
</el-step>
</el-steps>
</div>
</el-collapse-transition>
</template>
</el-step>
</el-steps>
</div>
</el-collapse-transition>
</div>
</div>
</div>
<div v-else class="noContent rowFlex allCenter">
<noContent />
</div>
</div>
<el-dialog
:visible.sync="dialogRemarkVisible"
append-to-body
title="查看大图"
custom-class="remake-dialog"
>
<el-dialog :visible.sync="dialogRemarkVisible" append-to-body title="查看大图" custom-class="remake-dialog">
<div class="remake-box">
<div v-html="dialogRemake"></div>
</div>
</el-dialog>
<!-- 编辑误操作 -->
<TerminalTransferDialog
v-if="showaddAreaTransfer"
:visible.sync="showaddAreaTransfer"
:area-transfer-item="areaTransferItem"
@updateList="updateList"
/>
<TerminalTransferDialog v-if="showaddAreaTransfer" :visible.sync="showaddAreaTransfer"
:area-transfer-item="areaTransferItem" @updateList="updateList" />
</div>
</template>
<script>
......@@ -383,6 +307,10 @@ export default {
this.$forceUpdate()
},
paperScroll() {
if (!this.isMoreRecord) {
console.log('没有更多数据了')
return false
}
this.requestNextPage()
},
requestNextPage(pageInfo) {
......@@ -457,18 +385,25 @@ export default {
</script>
<style lang="scss" scoped>
.terminaList {
.terminaListContent {
width: 100%;
height: 100%;
overflow: auto;
.terminaListForm{
::v-deep .el-form-item__label{
.TerminaTranferContent{
width: 100%;
height: 100%;
overflow: auto;
overflow-x: hidden;
}
.terminaListForm {
::v-deep .el-form-item__label {
font-weight: 400;
}
}
.addApply {
margin-top: 15px;
}
.taskForm {
::v-deep .el-form-item {
margin-bottom: 10px;
......@@ -521,19 +456,16 @@ export default {
}
}
.mailListScroll {
.terminaListContentList {
width: 100%;
height: calc(100% - 220px);
overflow-y: auto;
overflow-x: hidden;
.scrollMain {
width: 100%;
height: auto;
margin-bottom: 40px;
padding: 0 10px;
.terminaContent {
width:100%;
width: 100%;
}
//举报申请
......@@ -629,7 +561,7 @@ export default {
width: 1px;
}
::v-deep .el-step > .is-success {
::v-deep .el-step>.is-success {
color: #409EFF;
border-color: #409EFF;
......@@ -638,11 +570,11 @@ export default {
}
}
::v-deep .el-step__main > .is-success {
::v-deep .el-step__main>.is-success {
color: #409EFF;
}
::v-deep .el-step > .is-process {
::v-deep .el-step>.is-process {
color: #409EFF;
border-color: #409EFF;
......@@ -651,7 +583,7 @@ export default {
}
}
::v-deep .el-step__main > .is-process {
::v-deep .el-step__main>.is-process {
color: #409EFF;
}
......@@ -777,7 +709,7 @@ export default {
height: 80px;
}
&:hover > .preview-pic {
&:hover>.preview-pic {
z-index: 100;
}
}
......
src/views/components/ApplyRecords/errorHandle.vue
<template>
<div class="detailsErrorHandle columnFlex">
<div class="detailsErrorHandleContent">
<div class="detailsErrorHandleContent" v-scroll="requestOrderList">
<div class="addApply rowFlex spaceBetween">
<span></span>
<el-button
......@@ -32,7 +32,7 @@
<div class="list">
<!-- 过滤条件 -->
<!-- 订单列表 -->
<div v-infinite-scroll="requestOrderList" :infinite-scroll-disabled="!isloadMore" class="orderDetailsScroll">
<div class="orderDetailsScroll">
<div v-if="orderList.length>0" class="orderDetailsScrollContent">
<div v-for="(item,index) in orderList" :key="index" class="orderDetails">
<div class="orderDetailsList">
......@@ -302,7 +302,6 @@ export default {
background: #fff;
margin-left: 2px;
position: relative;
overflow: hidden;
.detailsTitle {
width: 100%;
padding: 0 vw(20);
......@@ -321,6 +320,8 @@ export default {
width: 100%;
height:100%;
padding: 20px 10px;
overflow: auto;
overflow-x: hidden;
.tabSelect{
width: 100%;
height: 60px;
......@@ -342,8 +343,7 @@ export default {
}
.list{
width: 100%;
height: calc(100% - 90px);
overflow: auto;
height: auto;
}
.contentItem{
position: relative;
......@@ -456,9 +456,6 @@ export default {
}
.orderDetailsScroll{
width: 100%;
height: calc(100% - 20px);
overflow: auto;
overflow-x: hidden;
.orderDetailsScrollContent{
margin-bottom: 50px;
}
......
src/views/components/bindGameAccount/bindUserList.vue
......@@ -74,7 +74,8 @@ export default {
...mapMutations('game', [
'set_accountSelect',
'set_chatUserInfo',
'set_gameUserInfo'
'set_gameUserInfo',
'set_viewLoading'
]),
...mapActions('game', ['gameBindUser']),
handleChange(value) {
......@@ -89,17 +90,19 @@ export default {
},
gameMemberView(item) {
if (this.accountSelect && this.accountSelect !== '') {
this.set_viewLoading(true)
const data = { member_id: this.accountSelect, need_channel: 1, need_roleInfo: 1, need_banned: 1 }
memberView(data).then((res) => {
this.set_viewLoading(false)
if (res.status_code === 1) {
this.set_gameUserInfo(res.data)
} else {
this.set_gameUserInfo({})
}
}, (err) => {
this.set_viewLoading(false)
this.set_gameUserInfo({})
})
}
},
addNewUser() {
......
src/views/components/giftRecord/emailGift.vue
<template>
<div class="detailsGiftApply columnFlex">
<div class="detailsGiftApply columnFlex">
<div class="detailsGiftApplyContent" v-scroll="requestemailGiftList" v-loading="listLoading" >
<div class="detailsGiftApplyTitle rowFlex spaceBetween columnCenter">
<!-- <p>充值礼包</p> -->
<span></span>
<el-button
type="primary"
size="small"
@click="showApplyGift = true"
>礼包申请</el-button>
<el-button type="primary" size="small" @click="showApplyGift = true">礼包申请</el-button>
</div>
<div class="detailsGiftApplyContent">
<!-- 过滤条件 -->
<el-form class="filterList" label-position="top">
<el-form class="filterList" label-position="top" :class="{ 'collapsed-form': isCollapsed }">
<div class="filter-header">
<span class="filter-title">筛选条件</span>
<i :class="isCollapsed ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" class="collapse-icon"
@click="toggleCollapse"></i>
</div>
<el-form-item label="主游戏">
<el-select
v-model.trim="form.main_game_id"
filterable
remote
clearable
reserve-keyword
placeholder="请输入主游戏名"
style="width:100%;"
:remote-method="remoteMethod"
:loading="loading"
@change="searchInput"
@focus="gameNameList=optionsList"
>
<el-option
v-for="item in gameNameList"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-select v-model.trim="form.main_game_id" filterable remote clearable reserve-keyword
placeholder="请输入主游戏名" style="width:100%;" :remote-method="remoteMethod" :loading="loading"
@change="searchInput" @focus="gameNameList = optionsList">
<el-option v-for="item in gameNameList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="区服">
<el-select
v-model.trim="form.zyou_server_id"
filterable
remote
multiple
reserve-keyword
style="width:100%;"
placeholder="请先选择主游戏"
:remote-method="remoteMethodServer"
:loading="loading"
@change="searchInput"
>
<el-option
v-for="item in serverNameList"
:key="item.id"
:label="item.label"
:value="item.value"
>
<el-select v-model.trim="form.zyou_server_id" filterable remote multiple reserve-keyword style="width:100%;"
placeholder="请先选择主游戏" :remote-method="remoteMethodServer" :loading="loading" @change="searchInput">
<el-option v-for="item in serverNameList" :key="item.id" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="角色名称">
<el-input
v-model="form.role_name_or_cp_id"
placeholder="请输入角色名称"
style="width:100%;"
@change="searchInput"
></el-input>
<el-input v-model="form.role_name_or_cp_id" placeholder="请输入角色名称" style="width:100%;"
@change="searchInput"></el-input>
</el-form-item>
<el-form-item label="礼包标题">
<el-input
v-model="form.active_title"
placeholder="请输入礼包名称"
style="width:100%;"
@change="searchInput"
></el-input>
<el-input v-model="form.active_title" placeholder="请输入礼包名称" style="width:100%;"
@change="searchInput"></el-input>
</el-form-item>
</el-form>
<el-tabs
v-model="form.gift_type"
class="tabStyle"
@tab-click="tabChange"
>
<el-tab-pane
v-for="(item,index) in giftTypeList"
:key="index"
:label="item.label"
:name="item.value"
></el-tab-pane>
<el-tabs v-model="form.gift_type" class="tabStyle" @tab-click="tabChange">
<el-tab-pane v-for="(item, index) in giftTypeList" :key="index" :label="item.label"
:name="item.value"></el-tab-pane>
</el-tabs>
<!-- 订单列表 -->
<div
v-infinite-scroll="requestemailGiftList"
v-loading="listLoading"
:infinite-scroll-disabled="!isloadMore"
class="email-gift-main-scroll"
>
<div
v-if="emailGiftList.length>0"
style="height:auto;"
>
<div
v-for="(item,index) in emailGiftList"
:key="index"
class="orderDetails"
>
class="email-gift-main-scroll">
<div v-if="emailGiftList.length > 0" style="height:auto;">
<div v-for="(item, index) in emailGiftList" :key="index" class="orderDetails">
<div class="orderDetailsTitle">
<div class="rowFlex spaceBetween columnCenter">
<div>
......@@ -110,89 +54,50 @@
<p class="text hidden"><label>充值金额:</label> ¥{{ item.amount }}</p>
<p class="text hidden"><label>充值日期:</label> {{ item.apply_recharge_date }}</p>
</div>
<i
v-if="item.showDetails"
class="el-icon-arrow-down iconStyle"
@click="closePage(item,index)"
></i>
<i
v-else
class="el-icon-arrow-right iconStyle"
@click="openPage(item,index)"
></i>
<i v-if="item.showDetails" class="el-icon-arrow-down iconStyle" @click="closePage(item, index)"></i>
<i v-else class="el-icon-arrow-right iconStyle" @click="openPage(item, index)"></i>
</div>
<el-collapse-transition>
<div v-if="item.showDetails">
<p
v-if="item.status=='待提交'"
class="text"
><label>状态：</label> <span class="noSend">{{ item.status }}</span> </p>
<p
v-else-if="item.status=='已提交'"
class="text"
><label>状态：</label> <span class="sended">{{ item.status }}</span> </p>
<p
v-else-if="item.status=='已驳回'"
class="text"
><label>状态：</label> <span class="sendFail">{{ item.status }}</span> </p>
<p v-if="item.status == '待提交'" class="text"><label>状态：</label> <span class="noSend">{{ item.status
}}</span> </p>
<p v-else-if="item.status == '已提交'" class="text"><label>状态：</label> <span class="sended">{{
item.status }}</span> </p>
<p v-else-if="item.status == '已驳回'" class="text"><label>状态：</label> <span class="sendFail">{{
item.status }}</span> </p>
<p class="text"><label>申请时间：</label> {{ item.create_time }} </p>
<p class="text"><label>提交时间：</label> {{ item.confirm_time }} </p>
<label
style="margin-right:10px;margin-top:3px;"
class="text"
> <label>奖品信息：</label> </label>
<div
v-for="items in item.level_attribute"
:key="items.rule_id"
class="columnCenter userInfoStyle"
style="border-top: 1px solid rgb(196 205 226);margin-top: 5px;"
>
<div
class="contentConfirmItem rowFlex spaceBetween"
style="padding-left:0;margin-top:10px;"
>
<label style="margin-right:10px;margin-top:3px;" class="text"> <label>奖品信息：</label> </label>
<div v-for="items in item.level_attribute" :key="items.rule_id" class="columnCenter userInfoStyle"
style="border-top: 1px solid rgb(196 205 226);margin-top: 5px;">
<div class="contentConfirmItem rowFlex spaceBetween" style="padding-left:0;margin-top:10px;">
<p class="title">{{ items.prize_level_name }}</p>
<p v-if="items.compare_amount">
{{ items.compare_amount ? Number(items.compare_amount)/100 + (item.exchange_score_status==1?'积分':'金额') : items.compare_amount }}<span> * {{ items.apply_num }}
{{ items.compare_amount ? Number(items.compare_amount) / 100 +
(item.exchange_score_status == 1 ? '积分' : '金额') : items.compare_amount }}<span> * {{ items.apply_num
}}
</span></p>
</div>
<!-- 固定奖 -->
<div v-if="items.prize_default">
<div class="contentConfirmItem">
<p class="title">固定奖 <span v-if="item.exchange_score_status == 1">{{ items.apply_num ? '*' + items.apply_num : '' }}</span></p>
<div
v-for="(prize,prizeIndex) in items.prize_default"
:key="prizeIndex"
class="contentConfirmItem rowFlex "
>
<p class="title">固定奖 <span v-if="item.exchange_score_status == 1">{{ items.apply_num ? '*' +
items.apply_num : '' }}</span></p>
<div v-for="(prize, prizeIndex) in items.prize_default" :key="prizeIndex"
class="contentConfirmItem rowFlex ">
<p class="info"> {{ prize.name }}</p>
<p
class="info"
style="margin-left:40px;"
>ID: {{ prize.prize_id }}</p>
<p class="info" style="margin-left:40px;">ID: {{ prize.prize_id }}</p>
</div>
</div>
</div>
<!-- 自选奖 -->
<div
v-if="items.prize_auto"
class="contentConfirmItem"
>
<div v-if="items.prize_auto" class="contentConfirmItem">
<p class="title">自选奖 ({{ items.prize_auto.length }}选{{ items.prize_auto_num }})</p>
<div
v-for="(prize,prizeIndex) in items.prize_auto"
:key="prizeIndex"
class="contentConfirmItem "
>
<div
v-for="(auto,autoIndex) in prize.group"
:key="autoIndex"
>
<div
v-if="prize.apply_num > 0"
class="rowFlex spaceBetween"
>
<div v-for="(prize, prizeIndex) in items.prize_auto" :key="prizeIndex"
class="contentConfirmItem ">
<div v-for="(auto, autoIndex) in prize.group" :key="autoIndex">
<div v-if="prize.apply_num > 0" class="rowFlex spaceBetween">
<span>{{ auto.name }}</span>
<span> ID:{{ auto.prize_id }}</span>
<div>*{{ prize.apply_num }}</div>
......@@ -202,21 +107,16 @@
</div>
<!-- 返利 -->
<div v-if="item.rebate_ratio_amount" class="contentConfirmItem">
<p class="rowFlex spaceBetween"> <span>返利:¥ {{ item.rebate_ratio_amount }}</span> <span>1:{{ items.rebate_ratio_rate }}</span> </p>
<p class="rowFlex spaceBetween"> <span>返利:¥ {{ item.rebate_ratio_amount }}</span> <span>1:{{
items.rebate_ratio_rate }}</span> </p>
</div>
</div>
<div v-if="item.prize && item.prize.length>0">
<div
v-for="(prize,prizeIndex) in item.prize"
:key="prizeIndex"
class="contentConfirmItem rowFlex "
>
<div v-if="item.prize && item.prize.length > 0">
<div v-for="(prize, prizeIndex) in item.prize" :key="prizeIndex"
class="contentConfirmItem rowFlex ">
<p class="info"> {{ prize.name }}</p>
<p
class="info"
style="margin-left:40px;"
>ID: {{ prize.prize_id }}</p>
<p class="info" style="margin-left:40px;">ID: {{ prize.prize_id }}</p>
</div>
</div>
</div>
......@@ -224,336 +124,403 @@
</div>
</div>
</div>
<div
v-else-if="!listLoading && emailGiftList.length==0"
class="noContent rowFlex allCenter"
>
<noContent/>
<div v-else-if="!listLoading && emailGiftList.length == 0" class="noContent rowFlex allCenter">
<noContent />
</div>
</div>
</div>
<!-- 申请礼包 -->
<applyGift
v-if="showApplyGift"
:show.sync="showApplyGift"
title="礼包申请"
@requestData="requestData"
/>
</div>
</template>
<script>
import { emailGiftList, memberView, completionOrder, selectSearch } from '@/api/game'
import { mapMutations, mapActions, mapState } from 'vuex'
import { removeDp, debounce } from '@/utils/index'
// import { roleList, memberView, zyouBind, selectSearch } from '@/api/game'
import applyGift from './applyGift.vue'
import selectDate from '@/components/selectDate.vue'
export default {
components: {
selectDate,
applyGift
},
data() {
return {
isloadMore: true,
showApplyGift: false,
collapseValue: ['1'],
emailGiftList: [],
optionsList: [],
gameNameList: [],
loading: false,
listLoading: false,
serverNameList: [],
giftTypeList: [],
form: {
main_game_id: '',
zyou_server_id: [],
role_name_or_cp_id: '',
member_id: '',
active_title: '',
gift_type: ''
},
inputValue: '',
pageInfo: {
<!-- 申请礼包 -->
<applyGift v-if="showApplyGift" :show.sync="showApplyGift" title="礼包申请" @requestData="requestData" />
</div>
</template>
<script>
import { emailGiftList, memberView, completionOrder, selectSearch } from '@/api/game'
import { mapMutations, mapActions, mapState } from 'vuex'
import { removeDp, debounce } from '@/utils/index'
// import { roleList, memberView, zyouBind, selectSearch } from '@/api/game'
import applyGift from './applyGift.vue'
import selectDate from '@/components/selectDate.vue'
export default {
components: {
selectDate,
applyGift
},
data() {
return {
isloadMore: true,
showApplyGift: false,
collapseValue: ['1'],
emailGiftList: [],
optionsList: [],
gameNameList: [],
loading: false,
listLoading: false,
serverNameList: [],
giftTypeList: [],
form: {
main_game_id: '',
zyou_server_id: [],
role_name_or_cp_id: '',
member_id: '',
active_title: '',
gift_type: ''
},
inputValue: '',
pageInfo: {
page: 0,
page_size: 20,
total: 0
},
isCollapsed: false
}
},
computed: {
...mapState('game', ['accountSelect']),
},
watch: {
accountSelect(newVal, oldVal) {
if (newVal && newVal !== '') {
this.pageInfo = {
page: 0,
page_size: 20,
total: 0
}
this.emailGiftList = []
this.isloadMore = true
this.requestemailGiftList()
}
}
},
mounted() {
this.requestGameList()
this.requestGiftType()
},
methods: {
// 重新拉去数据
requestData() {
this.emailGiftList = []
this.isloadMore = true
this.requestemailGiftList()
},
computed: {
...mapState('game', ['accountSelect']),
tabChange: debounce(function () {
this.pageInfo.page = 0
this.emailGiftList = []
this.isloadMore = true
this.requestemailGiftList()
}, 1000),
async requestGiftType() {
const data = {
field_name: 'gift_type',
table_name: 'role_gift_bag',
type: 'dictionaries'
}
const res = await selectSearch(data)
if (res.status_code === 1) {
res.data.data.map(item => {
item.value = item.value.toString()
})
this.giftTypeList = res.data.data
this.giftTypeList.unshift({
value: '',
label: '全部'
})
}
},
watch: {
accountSelect(newVal, oldVal) {
if (newVal && newVal !== '') {
this.pageInfo = {
page: 0,
page_size: 20,
total: 0
}
this.emailGiftList = []
this.isloadMore = true
this.requestemailGiftList()
}
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
}
})
},
mounted() {
this.requestGameList()
this.requestGiftType()
closePage(item, index) {
this.$set(this.emailGiftList[index], 'showDetails', false)
},
methods: {
// 重新拉去数据
requestData() {
this.emailGiftList = []
this.isloadMore = true
this.requestemailGiftList()
},
tabChange: debounce(function() {
this.pageInfo.page = 0
this.emailGiftList = []
this.isloadMore = true
this.requestemailGiftList()
}, 1000),
async requestGiftType() {
const data = {
field_name: 'gift_type',
table_name: 'role_gift_bag',
type: 'dictionaries'
}
const res = await selectSearch(data)
if (res.status_code === 1) {
res.data.data.map(item => {
item.value = item.value.toString()
})
this.giftTypeList = res.data.data
this.giftTypeList.unshift({
value: '',
label: '全部'
})
}
},
requestGameList() {
openPage(item, index) {
this.$set(this.emailGiftList[index], 'showDetails', true)
},
remoteMethodServer(query) {
if (query !== '') {
this.loading = true
const data = {
type: 'mainGameList',
value: '',
weixin_blong_id: ''
type: 'server_info',
value: query,
main_game_ids: this.form.main_game_id
}
selectSearch(data).then(res => {
this.loading = false
if (res.status_code == 1) {
this.gameNameList = this.optionsList = res.data.data
this.serverNameList = res.data.data
}
})
},
closePage(item, index) {
this.$set(this.emailGiftList[index], 'showDetails', false)
},
openPage(item, index) {
this.$set(this.emailGiftList[index], 'showDetails', true)
},
remoteMethodServer(query) {
if (query !== '') {
this.loading = true
const data = {
type: 'server_info',
value: query,
main_game_ids: this.form.main_game_id
}
selectSearch(data).then(res => {
this.loading = false
if (res.status_code == 1) {
this.serverNameList = res.data.data
}
})
}
},
remoteMethod(query) {
if (query !== '') {
this.gameNameList = this.optionsList.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1
})
} else {
this.gameNameList = []
}
},
searchInput(value) {
console.log(value)
this.pageInfo = {
page: 0,
page_size: 20,
total: 0
}
this.isloadMore = true
this.emailGiftList = []
this.requestemailGiftList()
},
requestemailGiftList() {
this.listLoading = true
if (this.accountSelect == '') {
this.$message.warning('暂无关联的账号，请先去关联账号!')
return false
}
if (!this.isloadMore) {
console.log('没有更多数据了')
return false
}
this.pageInfo.page += 1
this.form.member_id = this.accountSelect
emailGiftList({ ...this.form, ...this.pageInfo }).then(res => {
this.listLoading = false
if (res.data.data && res.data.data.length < 20) {
this.isloadMore = false
}
res.data.data.map((item, index) => {
item.showDetails = false
})
this.emailGiftList = removeDp(res.data.data, this.emailGiftList, 'id')
}, err => {
this.listLoading = false
}
},
remoteMethod(query) {
if (query !== '') {
this.gameNameList = this.optionsList.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1
})
} else {
this.gameNameList = []
}
},
searchInput(value) {
console.log(value)
this.pageInfo = {
page: 0,
page_size: 20,
total: 0
}
this.isloadMore = true
this.emailGiftList = []
this.requestemailGiftList()
},
requestemailGiftList() {
this.listLoading = true
if (this.accountSelect == '') {
this.$message.warning('暂无关联的账号，请先去关联账号!')
return false
}
if (!this.isloadMore) {
console.log('没有更多数据了')
this.listLoading = false
return false
}
this.pageInfo.page += 1
this.form.member_id = this.accountSelect
emailGiftList({ ...this.form, ...this.pageInfo }).then(res => {
this.listLoading = false
if (res.data.data && res.data.data.length < 20) {
this.isloadMore = false
}
res.data.data.map((item, index) => {
item.showDetails = false
})
this.emailGiftList = removeDp(res.data.data, this.emailGiftList, 'id')
}, err => {
this.listLoading = false
})
},
toggleCollapse() {
this.isCollapsed = !this.isCollapsed
}
}
}
</script>
<style lang="scss" scoped>
.detailsGiftApply {
width: 100%;
height: 100%;
background: #fff;
position: relative;
::v-deep .el-tabs__nav-next,
::v-deep .el-tabs__nav-prev {
line-height: 50px;
}
.detailsGiftApplyTitle {
width: 100%;
height: 60px;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
p {
color: #333333;
}
}
</script>
<style lang="scss" scoped>
.detailsGiftApply {
.detailsGiftApplyContent {
width: 100%;
height: calc(100vh - 180px);
background: #fff;
position: relative;
overflow-y: hidden;
::v-deep .el-tabs__nav-next,::v-deep .el-tabs__nav-prev{
line-height: 50px;
height: 100%;
padding: 0 10px;
overflow: auto;
overflow-x: hidden;
::v-deep .el-tabs__content{
height: auto;
}
::v-deep .el-tabs{
height: auto;
}
.detailsGiftApplyTitle {
.noContent{
margin-top: 50px;
}
.item {
width: 100%;
height: 60px;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
height: auto;
font-size: 14px;
font-weight: 400;
color: #333333;
p {
padding: 6px 0;
transition: all 0.5s;
position: relative;
padding-left: 10px;
cursor: pointer;
div {
width: 100%;
}
.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;
}
.dianFail {
display: inline-block;
width: 8px;
height: 8px;
background: #f45454;
border-radius: 5px;
}
.dian {
display: inline-block;
width: 8px;
height: 8px;
background: #409EFF;
border-radius: 5px;
}
.dian2 {
display: inline-block;
width: 8px;
height: 8px;
background: #ff9d02;
border-radius: 5px;
}
}
.detailsGiftApplyContent {
width: 100%;
height: calc(100% - 100px);
padding: 0 10px;
.item {
width: 100%;
height: auto;
font-size: 14px;
font-weight: 400;
color: #333333;
padding: 6px 0;
transition: all 0.5s;
position: relative;
padding-left: 10px;
cursor: pointer;
div {
width: 100%;
}
.label {
color: #999999;
}
.text {
.orderMoney {
width: calc(100% + 40px);
height: 80px;
// margin-left: -20px;
padding: 10px 0;
.orderMoneyItem {
width: 50%;
text-align: center;
margin-top: 5px;
span {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
margin-left: 10px;
word-break: break-all;
max-width: 80%;
}
.icon {
display: none;
position: absolute;
right: 0;
top: 12px;
}
.dianFail {
display: inline-block;
width: 8px;
height: 8px;
background: #f45454;
border-radius: 5px;
p {
font-size: 22px;
color: #409EFF;
}
.dian {
display: inline-block;
width: 8px;
height: 8px;
background: #409EFF;
border-radius: 5px;
}
}
.filterList {
margin-bottom: 10px;
position: relative;
border: 1px solid #EBEEF5;
border-radius: 4px;
padding: 10px;
transition: all 0.3s;
.filter-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px dashed #EBEEF5;
}
.filter-title {
font-size: 14px;
font-weight: 500;
color: #606266;
}
.collapse-icon {
cursor: pointer;
color: #409EFF;
font-size: 16px;
padding: 5px;
transition: all 0.3s;
}
&.collapsed-form {
.el-form-item {
display: none;
}
.dian2 {
display: inline-block;
width: 8px;
height: 8px;
background: #ff9d02;
border-radius: 5px;
.filter-header {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
}
.orderMoney {
width: calc(100% + 40px);
height: 80px;
// margin-left: -20px;
padding: 10px 0;
.orderMoneyItem {
width: 50%;
text-align: center;
margin-top: 5px;
span {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
p {
font-size: 22px;
color: #409EFF;
}
}
.label {
width: 80px;
text-align: center;
display: inline-block;
}
.filterList {
.filterListInput {
width: 60%;
margin-left: 15px;
margin-bottom: 10px;
.label {
width: 80px;
text-align: center;
display: inline-block;
}
.filterListInput {
width: 60%;
margin-left: 15px;
margin-bottom: 10px;
}
.filterListDate {
width: 150px;
margin-bottom: 10px;
}
}
.email-gift-main-scroll {
width: 100%;
height: calc(100% - 200px);
overflow: auto;
overflow-x: hidden;
.orderDetails {
.filterListDate {
width: 150px;
margin-bottom: 10px;
}
}
.email-gift-main-scroll {
width: 100%;
height: auto;
.orderDetails {
width: 100%;
height: auto;
margin-bottom: 10px;
position: relative;
.bridgeMain {
position: absolute;
top: 0px;
right: 0px;
width: 50px;
height: 50px;
.text {
font-size: 8px;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -567,6 +534,7 @@
width: 50px;
text-align: center;
}
.bridge {
font-size: 50px;
position: absolute;
......@@ -574,25 +542,29 @@
right: 0;
}
}
.orderDetailsTitle {
width: 100%;
height: auto;
background: #f9faff;
padding: 10px;
.iconStyle {
font-size: 18px;
cursor: pointer;
color: #409EFF;
}
.money {
width: 100%;
height: auto;
margin-bottom: 12px;
margin-top: 4px;
.btns {
padding-right: 40px;
}
.btn {
background: #fff;
border-radius: 4px;
......@@ -603,6 +575,7 @@
color: #333333;
cursor: pointer;
}
.btnnot {
background: #ffdddd;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -610,6 +583,7 @@
color: #f56c6c;
border: none;
}
.btnsuccess {
background: #e1fff0;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -618,6 +592,7 @@
border: none;
}
}
.text {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -625,101 +600,114 @@
color: #333333;
line-height: 26px;
margin-right: 10px;
label {
color: #999999;
}
}
}
.orderDetailsList {
width: 100%;
height: auto;
background: #f9faff;
padding: 5px 0;
position: relative;
.text {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 20px;
label {
color: #999999;
}
}
}
}
}
}
.tabStyle {
::v-deep .el-tabs__item {
padding: 0 10px;
}
}
.email-gift-main-scroll {
::v-deep .el-tabs__item {
line-height: 26px;
font-size: 16px;
font-weight: 500;
}
/* 已移除局部 el-collapse 样式，使用全局样式 */
}
.inputItem {
margin-bottom: 10px;
}
.tabStyle {
::v-deep .el-tabs__item {
padding: 0 10px;
}
}
.contentConfirmItem {
width: 100%;
height: auto;
background: #f9faff;
margin-top: 10px;
.title {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
.email-gift-main-scroll {
::v-deep .el-tabs__item {
line-height: 26px;
font-size: 16px;
font-weight: 500;
color: #333333;
line-height: 20px;
}
.info {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
margin-top: 10px;
}
/* 已移除局部 el-collapse 样式，使用全局样式 */
}
.expendIcon {
.inputItem {
margin-bottom: 10px;
}
}
.contentConfirmItem {
width: 100%;
height: auto;
background: #f9faff;
margin-top: 10px;
.title {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 20px;
}
.info {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
text-align: center;
margin-top: 20px;
}
.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;
}
margin-top: 10px;
}
.allIcon {
width: 137px;
height: 20px;
background: #f2ac51;
border-radius: 13px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 80px;
}
.expendIcon {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
text-align: center;
margin-top: 20px;
}
.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;
}
</style>
\ No newline at end of file
}
.allIcon {
width: 137px;
height: 20px;
background: #f2ac51;
border-radius: 13px;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 80px;
}
</style>
\ No newline at end of file
src/views/components/giftRecord/wxGift.vue
......@@ -95,7 +95,7 @@ import Clipboard from 'clipboard'
<style lang="scss" scoped>
.wx-gift-container {
height: calc(100vh - 230px);
height: 100%;
width: 100%;
background-color: #fff;
......
src/views/components/order/refundLog.vue
<template>
<div class="detailsRefund columnFlex">
<div class="content refundContent">
<div class="refundContent" v-scroll="requestOrderList">
<div class="filter-container">
<el-form class="filter-form" label-position="top" label-width="auto">
<el-form class="filter-form" label-position="top" label-width="auto" :class="{ 'collapsed-form': isCollapsed }">
<div class="filter-header">
<span class="filter-title">筛选条件</span>
<i
:class="isCollapsed ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
class="collapse-icon"
@click="toggleCollapse"
></i>
</div>
<el-form-item label="订单号:">
<el-input
v-model="requestData.order_id"
......@@ -49,10 +57,7 @@
</div>
<!-- 订单列表 -->
<div
v-infinite-scroll="requestOrderList"
v-loading="loading"
class="detailsRefundScroll"
:infinite-scroll-disabled="!isloadMore"
>
<div v-if="orderList.length > 0">
<div v-for="(item, index) in orderList" :key="index" class="orderDetails">
......@@ -276,7 +281,8 @@
page: 0,
page_size: 20,
total: 0
}
},
isCollapsed: false
}
},
computed: {
......@@ -461,7 +467,10 @@
this.loading = false
}
)
}, 1000)
}, 1000),
toggleCollapse() {
this.isCollapsed = !this.isCollapsed
}
}
}
</script>
......@@ -470,9 +479,6 @@
width: 100%;
height: 100%;
background: #fff;
position: relative;
overflow: hidden;
.detailsTitle {
width: 100%;
padding: 0 vw(20);
......@@ -489,11 +495,11 @@
}
}
.content {
.refundContent {
width: 100%;
height: 100%;
padding-top: 20px;
overflow: auto;
overflow-x: hidden;
.tabSelect {
width: 100%;
height: 60px;
......@@ -631,9 +637,7 @@
}
.detailsRefundScroll {
width: 100%;
height: calc(100% - 250px);
overflow: auto;
overflow-x: hidden;
height: auto;
padding-right: 10px;
border-radius: 5px;
}
......@@ -784,6 +788,76 @@
}
}
.filter-container {
margin-bottom: 10px;
.filter-form {
border: 1px solid #EBEEF5;
border-radius: 4px;
padding: 10px;
transition: all 0.3s;
.filter-header {
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px dashed #EBEEF5;
}
.filter-title {
font-size: 14px;
font-weight: 500;
color: #606266;
}
.collapse-icon {
cursor: pointer;
color: #409EFF;
font-size: 16px;
padding: 5px;
transition: all 0.3s;
}
&.collapsed-form {
.el-form-item {
display: none;
}
.filter-header {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
}
.el-form-item {
margin-bottom: 15px;
width: 100%;
margin-right: 2%;
display: inline-block;
vertical-align: top;
&:nth-child(2n) {
margin-right: 0;
}
}
::v-deep .el-form-item__label {
padding: 0;
line-height: 24px;
font-size: 14px;
color: #606266;
}
::v-deep .el-form-item__content {
line-height: 36px;
}
.searchInput {
width: 100%;
}
}
}
::v-deep .el-tabs__item {
line-height: 26px;
font-size: 16px;
......
src/views/components/quickSendGame/sendGame.vue
......@@ -693,11 +693,11 @@ export default {
// const list = [
// {
// msgtype: 'text',
// text: { content: `账号:${username} \n密码:${res.data.encryptPassword}`, key: res.data.key, iv: res.data.iv }
// text: { content: `账号:${username} \n密码:${res.data.password}`, key: res.data.key, iv: res.data.iv }
// }
// ]
// this.set_sendSkillMessage(list)
this.sendChatMessage(`账号:${username} \n密码:${res.data.encryptPassword}`, 'text')
this.sendChatMessage(`账号:${username} \n密码:${res.data.password}`, 'text')
this.markTransScene(type)
this.sendGameLog(item)
})
......@@ -740,13 +740,13 @@ export default {
{
msgtype: 'text',
text: {
content: `${str}${item.url} \n账号:${username} \n密码:${res.data.encryptPassword}`,
content: `${str}${item.url} \n账号:${username} \n密码:${res.data.password}`,
key: res.data.key, iv: res.data.iv
}
}
]
// this.set_sendSkillMessage(list)
this.sendChatMessage(`${str}${item.url} \n账号:${username} \n密码:${res.data.encryptPassword}`, 'text')
this.sendChatMessage(`${str}${item.url} \n账号:${username} \n密码:${res.data.password}`, 'text')
this.markTransScene(type)
item.type = 1
this.sendGameLog(item)
......@@ -941,14 +941,14 @@ export default {
channel_key: item.channel_key
},
text: {
content: `${str}${item.game_url} \n账号:${username} \n密码:${res.data.encryptPassword}`,
content: `${str}${item.game_url} \n账号:${username} \n密码:${res.data.password}`,
key: res.data.key, iv: res.data.iv
}
}
]
// 这里需要特殊处理，因为有taskInfo参数
// this.set_sendSkillMessage(list)
this.sendChatMessage(`${str}${item.game_url} \n账号:${username} \n密码:${res.data.encryptPassword}`, 'text')
this.sendChatMessage(`${str}${item.game_url} \n账号:${username} \n密码:${res.data.password}`, 'text')
item.type = 3
this.sendGameLog(item)
})
......
src/views/components/quickSendGame/sendGame/selectChannel.vue
......@@ -211,11 +211,11 @@ export default {
const list = [
{
msgtype: 'text',
text: { content: `账号:${username} \n密码:${res.data.encryptPassword}`, key: res.data.key, iv: res.data.iv }
text: { content: `账号:${username} \n密码:${res.data.password}`, key: res.data.key, iv: res.data.iv }
}
]
// this.set_sendSkillMessage(list)
this.sendChatMessage(`账号:${username} \n密码:${res.data.encryptPassword}`, 'text')
this.sendChatMessage(`账号:${username} \n密码:${res.data.password}`, 'text')
this.close()
})
.catch((err) => {
......@@ -252,14 +252,14 @@ export default {
{
msgtype: 'text',
text: {
content: `${str}${this.webForm.channel_id.game_url} \n账号:${username} \n密码:${res.data.encryptPassword}`,
content: `${str}${this.webForm.channel_id.game_url} \n账号:${username} \n密码:${res.data.password}`,
key: res.data.key,
iv: res.data.iv
}
}
]
// this.set_sendSkillMessage(list)
this.sendChatMessage(`${str}${this.webForm.channel_id.game_url} \n账号:${username} \n密码:${res.data.encryptPassword}`, 'text')
this.sendChatMessage(`${str}${this.webForm.channel_id.game_url} \n账号:${username} \n密码:${res.data.password}`, 'text')
this.close()
})
.catch((err) => {
......
src/views/components/quickSendGame/sendGame/sendSelectChannel.vue
......@@ -170,11 +170,11 @@ export default {
// const list = [
// {
// msgtype: 'text',
// text: { content: `账号:${username} \n密码:${res.data.encryptPassword}`, key: res.data.key, iv: res.data.iv }
// text: { content: `账号:${username} \n密码:${res.data.password}`, key: res.data.key, iv: res.data.iv }
// }
// ]
// this.set_sendSkillMessage(list)
this.sendChatMessage(`账号:${username} \n密码:${res.data.encryptPassword}`, 'text')
this.sendChatMessage(`账号:${username} \n密码:${res.data.password}`, 'text')
this.close()
})
.catch((err) => {
......@@ -211,13 +211,13 @@ export default {
// {
// msgtype: 'text',
// text: {
// content: `${str}${this.webForm.channel_id.game_url} \n账号:${username} \n密码:${res.data.encryptPassword}`,
// content: `${str}${this.webForm.channel_id.game_url} \n账号:${username} \n密码:${res.data.password}`,
// key: res.data.key, iv: res.data.iv
// }
// }
// ]
// this.set_sendSkillMessage(list)
this.sendChatMessage(`${str}${this.webForm.channel_id.game_url} \n账号:${username} \n密码:${res.data.encryptPassword}`, 'text')
this.sendChatMessage(`${str}${this.webForm.channel_id.game_url} \n账号:${username} \n密码:${res.data.password}`, 'text')
this.close()
})
.catch((err) => {
......
src/views/components/quickSendGame/vipTools.vue
......@@ -277,7 +277,7 @@
}
const username = this.bindGameUserList.find(item => item.member_id == this.accountSelect).username
passwardEncryption({ member_id: this.accountSelect }).then(res => {
this.sendChatMessage(`${str}${item.url} \n账号:${username} \n密码:${res.data.encryptPassword}`, 'text')
this.sendChatMessage(`${str}${item.url} \n账号:${username} \n密码:${res.data.password}`, 'text')
}).catch(err => {
this.sendChatMessage(`${str}${item.url} \n账号:${username}`, 'text')
console.log(err)
......
src/views/components/roleInfo/approval.vue
......@@ -84,7 +84,7 @@
v-infinite-scroll="paperScroll"
:infinite-scroll-disabled="!isMoreRecord"
:infinite-scroll-immediate="false"
class="mailListScroll"
class="approvalScroll"
>
<!-- 举报申请 -->
<div class="scrollMain" v-if="reportList.length > 0">
......@@ -512,9 +512,9 @@
<style lang="scss" scoped>
.approval-role-list {
width: 100%;
height: calc(100vh - 200px);
overflow: auto;
height: 100%;
padding-top: 10px;
overflow: auto;
.taskForm {
::v-deep .el-form-item {
margin-bottom: 10px;
......@@ -567,12 +567,9 @@
}
}
.mailListScroll {
.approvalScroll {
width: 100%;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex: 1;
height: auto;
.scrollMain {
width: 100%;
height: auto;
......
src/views/components/roleInfo/report.vue
......@@ -517,8 +517,8 @@
.reportList {
width: 100%;
height: 100%;
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
.taskForm {
::v-deep .el-form-item {
margin-bottom: 10px;
......@@ -573,15 +573,11 @@
.mailListScroll {
width: 100%;
height: calc(100% - 250px);
overflow-y: auto;
overflow-x: hidden;
height: auto;
.scrollMain {
width: 100%;
height: auto;
margin-bottom: 40px;
.reportContent {
width: calc(100% - 10px);
}
......
src/views/components/roleInfo/roleInfo.vue
......@@ -196,6 +196,7 @@
height: 100%;
background: #fff;
margin-left: 2px;
overflow: auto;
.detailsTitle {
width: 100%;
padding: 0 vw(20);
......@@ -212,7 +213,7 @@
}
.detailsContent {
width: 100%;
height: calc(100vh - 186px);
height: 100%;
overflow: auto;
.textInfo {
font-family: PingFangSC-Regular, PingFang SC;
......
src/views/components/skill/skillLibrary.vue
......@@ -45,7 +45,7 @@
</div>
<div v-else-if="answer.msgtype == 'image'" class="answerText rowFlex">
<span class="title rowFlex">A{{ answerIndex + 1 }}:</span>
<el-image style="max-width: 200px" :src="answer.image.picurl" :preview-src-list="[answer.image.picurl]" > </el-image>
<el-image style="max-width: 200px" :src="answer.image.picurl" @click="sendMessageImage(answer, items._id)" :preview-src-list="[answer.image.picurl]" > </el-image>
</div>
</div>
</div>
......
src/views/giftRecord.vue
......@@ -2,10 +2,10 @@
<div class="gift-tab-container-apply-gift">
<el-tabs v-model="activeTab">
<el-tab-pane label="充值礼包" name="email">
<email-gift></email-gift>
<email-gift v-if="activeTab == 'email'"></email-gift>
</el-tab-pane>
<el-tab-pane label="企微礼包" name="wx">
<wx-gift></wx-gift>
<wx-gift v-if="activeTab == 'wx'"></wx-gift>
</el-tab-pane>
</el-tabs>
</div>
......@@ -49,6 +49,10 @@ export default {
height: 100%;
padding-top: 10px;
background: #fff;
::v-deep .el-tabs__content{
height: calc(100% - 55px);
}
::v-deep .el-tabs {
.el-tabs__header {
......@@ -66,6 +70,7 @@ export default {
color: #3491FA;
}
}
.el-tabs__active-bar {
background-color: #3491FA;
......
src/views/mailList.vue
<template>
<div class="mail-list-container">
<div class="mail-list-container"
ref="mailListScroll"
v-scroll:50="loadMoreMail"
>
<!-- 搜索过滤区域 -->
<div class="search-header">
<div class="search-row">
......@@ -87,14 +90,12 @@
<!-- 通讯录列表 -->
<div
ref="mailListScroll"
v-infinite-scroll="loadMoreMail"
:infinite-scroll-disabled="!hasMore"
:infinite-scroll-immediate="false"
v-scroll="loadMoreMail"
class="contact-list"
>
<div
v-for="(item, index) in mailList"
:key="item._id || index"
:key="item._id+index"
class="contact-item"
:class="{ active: item.external_userid === chatUserInfo.external_userid }"
>
......@@ -126,13 +127,8 @@
<!-- 右侧操作区域 -->
<div class="contact-actions">
<!-- 待绑定标签 -->
<div v-if="item.red_tip == 1" class="unbind-tag">
待绑定
</div>
<!-- 发起会话按钮 -->
<el-button
v-else
type="primary"
size="small"
class="chat-btn"
......@@ -259,12 +255,11 @@ export default {
...this.pagination,
userid: this.userid,
}
// 根据搜索类型构建不同的参数
if (this.searchType === 'remark') {
this.searchParams = {
...this.searchParams,
...baseParams,
...this.searchParams
}
} else if (this.searchType === 'w_account') {
this.searchParams = {
......@@ -274,7 +269,6 @@ export default {
} else {
this.searchParams = baseParams
}
// 添加筛选参数
if (this.mailFilterType === 'unbind') {
this.searchParams.red_tip = 1
......@@ -331,8 +325,11 @@ export default {
// 加载更多通讯录
loadMoreMail() {
if (this.hasMore && !this.mailLoading) {
console.log('loadMoreMail')
this.pagination.page++
this.loadMailList()
}else{
console.log('没有更多数据了')
}
},
......@@ -398,10 +395,9 @@ export default {
<style scoped lang="scss">
.mail-list-container {
width: 100%;
background: #fff;
height: 100%;
display: flex;
flex-direction: column;
}
// 搜索头部
......
src/views/orderList.vue
<template>
<div class="order-info-list columnFlex">
<div class="content">
<el-tabs v-model="activeTypeStr" @tab-click="handleTabClick" class="order-tabs">
<el-tab-pane v-for="(item, index) in orderTypeList"
:key="index"
:label="item.label"
:name="String(item.value)">
</el-tab-pane>
</el-tabs>
<!-- 订单的一些信息 -->
<div v-show="activeType!==3">
<div class="orderMoney rowFlex flexWarp">
<div class="orderMoneyItem rowFlex columnCenter" style="margin-right:20px;">
<span>总支付金额：</span>
<p>¥{{ orderInfo.total_amount }}</p>
</div>
<div class="orderMoneyItem rowFlex columnCenter" style="margin-right:20px;">
<span>实际充值金额:</span>
<p>¥{{ orderInfo.total_real_amount || 0 }}</p>
</div>
<div class="orderMoneyItem rowFlex columnCenter" style="margin-right:20px;">
<span>退款金额：</span>
<p>¥{{ orderInfo.total_refund_amount || 0 }}</p>
</div>
<div class="orderMoneyItem rowFlex columnCenter">
<span>订单总数：</span>
<p>{{ orderInfo.total }}</p>
</div>
<!-- 王鑫说先隐藏 -->
<div v-if="false" class="orderMoneyItem rowFlex columnCenter">
<span>今天支付金额：</span>
<p>¥{{ totalOrder.total }}</p>
<div class="order-info-list columnFlex">
<div class="content">
<el-tabs v-model="activeTypeStr" @tab-click="handleTabClick" class="order-tabs">
<el-tab-pane v-for="(item, index) in orderTypeList" :key="index" :label="item.label" :name="String(item.value)">
</el-tab-pane>
</el-tabs>
<!-- 订单的一些信息 -->
<div v-show="activeType !== 3" class="order-info-content" v-scroll="requestOrderList">
<div class="orderMoney rowFlex flexWarp">
<div class="orderMoneyItem rowFlex columnCenter" style="margin-right:20px;">
<span>总支付金额：</span>
<p>¥{{ orderInfo.total_amount }}</p>
</div>
<div class="orderMoneyItem rowFlex columnCenter" style="margin-right:20px;">
<span>实际充值金额:</span>
<p>¥{{ orderInfo.total_real_amount || 0 }}</p>
</div>
<div class="orderMoneyItem rowFlex columnCenter" style="margin-right:20px;">
<span>退款金额：</span>
<p>¥{{ orderInfo.total_refund_amount || 0 }}</p>
</div>
<div class="orderMoneyItem rowFlex columnCenter">
<span>订单总数：</span>
<p>{{ orderInfo.total }}</p>
</div>
<!-- 王鑫说先隐藏 -->
<div v-if="false" class="orderMoneyItem rowFlex columnCenter">
<span>今天支付金额：</span>
<p>¥{{ totalOrder.total }}</p>
</div>
<div v-if="false" class="orderMoneyItem rowFlex columnCenter">
<span>订单数：</span>
<p>{{ totalOrder.num }}</p>
</div>
</div>
<div v-if="false" class="orderMoneyItem rowFlex columnCenter">
<span>订单数：</span>
<p>{{ totalOrder.num }}</p>
<div class="filterList">
<el-form class="filterList" label-position="top">
<el-form-item label="订单号:">
<el-input v-model="inputValue" placeholder="请输入订单号/交易单号" prefix-icon="el-icon-search"
style="width: 100%" clearable @change="searchInput"></el-input>
</el-form-item>
<el-form-item label="支付方式:">
<el-select v-model="pay_type" collapse-tags multiple clearable placeholder="请选择支付方式"
style="width: 100%; margin-bottom: 10px" @change="payTypeResult">
<el-option v-for="item in payList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="下单时间:">
<selectDate :width="'100%'" :defaultValue="searchDate" @result="dateResult" />
</el-form-item>
<el-form-item label="角色名称:">
<searchSelect style="width: 100%" placeholder="请输入角色名称" @result="selectResult" />
</el-form-item>
</el-form>
</div>
</div>
<div class="filterList">
<el-form class="filterList" label-position="top">
<el-form-item label="订单号:">
<el-input v-model="inputValue" placeholder="请输入订单号/交易单号" prefix-icon="el-icon-search" style="width: 100%" clearable @change="searchInput"></el-input>
</el-form-item>
<el-form-item label="支付方式:">
<el-select v-model="pay_type" collapse-tags multiple clearable placeholder="请选择支付方式" style="width: 100%; margin-bottom: 10px" @change="payTypeResult">
<el-option v-for="item in payList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="下单时间:">
<selectDate :width="'100%'" :defaultValue="searchDate" @result="dateResult"/>
</el-form-item>
<el-form-item label="角色名称:" >
<searchSelect style="width: 100%" placeholder="请输入角色名称" @result="selectResult" />
</el-form-item>
</el-form>
</div>
</div>
<!-- 退款记录的搜做 -->
<div v-if="activeType==3" class="refundLog">
<refundLog :active-type="activeType" />
</div>
<!-- 订单列表 -->
<div v-show="activeType!==3" v-infinite-scroll="requestOrderList" v-loading="loading" :infinite-scroll-disabled="!isloadMore" class="orderDetailsScroll">
<div v-if="orderList.length > 0">
<div v-for="(item, index) in orderList" :key="index" class="orderDetails">
<div class="bridgeMain">
<p class="text">{{ item.pay_type_text || item.pay_type }}</p>
<img :src="sanjiaoxing" class="bridge" />
</div>
<div class="orderDetailsTitle">
<!-- || item.pay_type=='抖音支付'去掉抖音支付补单操作 -->
<div class="money rowFlex spaceBetween">
<p class="text">订单金额：{{ item.amount }}</p>
<div class="btns">
<span class="btn" :class="[item.status == '已支付' ? 'btnsuccess' : '', item.status == '待支付' ? 'btnnot' : '']">{{ item.status }}</span>
<span v-if="item.status == '待支付' && (item.pay_type == '米大师支付' || item.pay_type === '应用宝米大师支付') && !item.is_request" class="btn btnsuccess" @click="completionOrder(1, item.order_id,item)">补单</span>
<span v-if="item.callback_status.indexOf('失败') != -1 && !item.is_request" class="btn" @click="completionOrder(2, item.order_id,item)">补回调</span>
<span v-if="!item.is_request" class="btn btnRefund" @click="refundMoney(item)">退款申请</span>
<div class="orderDetailsScroll">
<div v-if="orderList.length > 0">
<div v-for="(item, index) in orderList" :key="index" class="orderDetails">
<div class="bridgeMain">
<p class="text">{{ item.pay_type_text || item.pay_type }}</p>
<img :src="sanjiaoxing" class="bridge" />
</div>
</div>
<p class="text">下单时间：{{ item.order_time }}</p>
</div>
<div class="orderDetailsList">
<el-collapse v-model="collapseValue" @change="handleChange">
<el-collapse-item :name="item.order_id">
<template slot="title">
<p>订单号:{{ item.order_id }}</p>
<!-- <el-popover placement="top" trigger="hover" :content="item.order_id">
<el-button slot="reference" type="text" @click.stop="">复制</el-button>
</el-popover> -->
</template>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">交易单号:</span>
<p class="text">{{ item.trad_no }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">订单号:</span>
<p class="text">{{ item.order_id }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">游戏名称:</span>
<p class="text">{{ item.game_name }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">区服:</span>
<p class="text">{{ item.server_name }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">角色名:</span>
<p class="text">{{ item.role_name }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">商品名称:</span>
<p class="text">{{ item.product_name || '' }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">支付方式:</span>
<p class="text">{{ item.pay_type }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">回调状态:</span>
<p v-if="item.callback_status == 1" class="text"><span class="dian2"></span>待回调</p>
<p v-if="item.callback_status == 2" class="text"><span class="dian"></span>回调成功</p>
<p v-if="item.callback_status == 3" class="text"><span class="dianFail"></span>通知CP方回调失败</p>
<div class="orderDetailsTitle">
<!-- || item.pay_type=='抖音支付'去掉抖音支付补单操作 -->
<div class="money rowFlex spaceBetween">
<p class="text">订单金额：{{ item.amount }}</p>
<div class="btns">
<span class="btn"
:class="[item.status == '已支付' ? 'btnsuccess' : '', item.status == '待支付' ? 'btnnot' : '']">{{
item.status }}</span>
<span
v-if="item.status == '待支付' && (item.pay_type == '米大师支付' || item.pay_type === '应用宝米大师支付') && !item.is_request"
class="btn btnsuccess" @click="completionOrder(1, item.order_id, item)">补单</span>
<span v-if="item.callback_status.indexOf('失败') != -1 && !item.is_request" class="btn"
@click="completionOrder(2, item.order_id, item)">补回调</span>
<span v-if="!item.is_request" class="btn btnRefund" @click="refundMoney(item)">退款申请</span>
</div>
</div>
</el-collapse-item>
</el-collapse>
<p class="text">下单时间：{{ item.order_time }}</p>
</div>
<div class="orderDetailsList">
<el-collapse v-model="collapseValue" @change="handleChange">
<el-collapse-item :name="item.order_id">
<template slot="title">
<p>订单号:{{ item.order_id }}</p>
<!-- <el-popover placement="top" trigger="hover" :content="item.order_id">
<el-button slot="reference" type="text" @click.stop="">复制</el-button>
</el-popover> -->
</template>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">交易单号:</span>
<p class="text">{{ item.trad_no }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">订单号:</span>
<p class="text">{{ item.order_id }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">游戏名称:</span>
<p class="text">{{ item.game_name }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">区服:</span>
<p class="text">{{ item.server_name }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">角色名:</span>
<p class="text">{{ item.role_name }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">商品名称:</span>
<p class="text">{{ item.product_name || '' }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">支付方式:</span>
<p class="text">{{ item.pay_type }}</p>
</div>
</div>
<div class="item rowFlex columnCenter spaceBetween">
<div class="rowFlex columnCenter">
<span class="label">回调状态:</span>
<p v-if="item.callback_status == 1" class="text"><span class="dian2"></span>待回调</p>
<p v-if="item.callback_status == 2" class="text"><span class="dian"></span>回调成功</p>
<p v-if="item.callback_status == 3" class="text"><span class="dianFail"></span>通知CP方回调失败</p>
</div>
</div>
</el-collapse-item>
</el-collapse>
</div>
</div>
</div>
<div v-else-if="!loading && orderList.length == 0" class="noContent rowFlex allCenter">
<noContent />
</div>
</div>
</div>
<div v-else-if="!loading && orderList.length == 0" class="noContent rowFlex allCenter">
<noContent/>
<!-- 退款记录的搜做 -->
<div v-if="activeType == 3" class="refundLog">
<refundLog v-if="activeType == 3" :active-type="activeType" />
</div>
</div>
</div>
<!-- 退款订单的申请 -->
<orderRefund :show.sync="showRefund" title="退款申请" :info="refundInfo" />
<!-- 订单列表 -->
</div>
</template>
<script>
import { orderList, memberView, completionOrder, selectSearch, todayOrder } from '@/api/game'
import { mapMutations, mapActions, mapState } from 'vuex'
import selectDate from '@/components/selectDate.vue'
import selece from '@/components/select.vue'
import searchSelect from './components/order/searchUser.vue'
import orderRefund from './components/order/orderRefund.vue'
import refundLog from './components/order/refundLog.vue'
import { throttle } from '@/utils'
import sanjiaoxing from '@/assets/icon/sanjiaoxing.svg'
import noContent from '@/components/noContent.vue'
export default {
components: {
searchSelect,
refundLog,
orderRefund,
selece,
noContent,
selectDate
},
data() {
return {
sanjiaoxing,
loading: false,
activeType: 4,
activeTypeStr: '4',
dateDetailsValue: [],
isloadMore: true,
collapseValue: ['1'],
orderTypeList: [
{ label: '全部订单', value: 4 },
{ label: '已支付', value: 2 },
{ label: '未支付', value: 1 },
{ label: '退款记录', value: 3 }
],
orderList: [],
payList: [],
pay_type: '',
inputValue: '',
role_id: [],
orderInfo: {
total: 0,
total_amount: 0
},
totalOrder: {
total: '',
num: ''
},
timerData: {
order_time_start: '',
order_time_end: ''
},
searchDate: [],
gameUserInfo: {
recharge_total: 0,
today_amount: 0
},
pageInfo: {
page: 0,
page_size: 20,
total: 0
},
refundInfo: {},
showRefund: false
}
},
computed: {
...mapState('game', ['accountSelect']),
...mapState('user', ['userInfo'])
},
watch: {
activeTypeStr(newVal) {
this.activeType = parseInt(newVal);
<!-- 退款订单的申请 -->
<orderRefund :show.sync="showRefund" title="退款申请" :info="refundInfo" />
</div>
</template>
<script>
import { orderList, memberView, completionOrder, selectSearch, todayOrder } from '@/api/game'
import { mapMutations, mapActions, mapState } from 'vuex'
import selectDate from '@/components/selectDate.vue'
import selece from '@/components/select.vue'
import searchSelect from './components/order/searchUser.vue'
import orderRefund from './components/order/orderRefund.vue'
import refundLog from './components/order/refundLog.vue'
import { throttle } from '@/utils'
import sanjiaoxing from '@/assets/icon/sanjiaoxing.svg'
import noContent from '@/components/noContent.vue'
export default {
components: {
searchSelect,
refundLog,
orderRefund,
selece,
noContent,
selectDate
},
data() {
return {
sanjiaoxing,
loading: false,
activeType: 4,
activeTypeStr: '4',
dateDetailsValue: [],
isloadMore: true,
collapseValue: ['1'],
orderTypeList: [
{ label: '全部订单', value: 4 },
{ label: '已支付', value: 2 },
{ label: '未支付', value: 1 },
{ label: '退款记录', value: 3 }
],
orderList: [],
payList: [],
pay_type: '',
inputValue: '',
role_id: [],
orderInfo: {
total: 0,
total_amount: 0
},
activeType(newVal) {
this.activeTypeStr = String(newVal);
totalOrder: {
total: '',
num: ''
},
accountSelect(newVal, oldVal) {
if (newVal && newVal !== '' && this.activeType !== 3) {
this.pageInfo = {
page: 0,
page_size: 20,
total: 0
}
this.isloadMore = true
this.orderList = []
this.requestOrderList('msg')
}
}
timerData: {
order_time_start: '',
order_time_end: ''
},
searchDate: [],
gameUserInfo: {
recharge_total: 0,
today_amount: 0
},
pageInfo: {
page: 0,
page_size: 20,
total: 0
},
refundInfo: {},
showRefund: false
}
},
computed: {
...mapState('game', ['accountSelect']),
...mapState('user', ['userInfo'])
},
watch: {
activeTypeStr(newVal) {
this.activeType = parseInt(newVal);
},
mounted() {
this.payTypeList()
this.searchDate = [
this.$moment().subtract(1, 'day').format('YYYY-MM-DD'),
this.$moment().format('YYYY-MM-DD')
]
this.timerData.order_time_start = this.$moment().subtract(1, 'day').format('YYYY-MM-DD')
this.timerData.order_time_end = this.$moment().format('YYYY-MM-DD')
activeType(newVal) {
this.activeTypeStr = String(newVal);
},
methods: {
// appid: "wx7810f536467dc161"
// corp_id: "wweaefe716636df3d1"
// external_userid: "wm5rUgMgAAG_vfF4AHClsrS1S6MImVsQ"
// nickname: "梦幻人生"
// openid: "oaQgjwNOyRoIovGPqeaRrlIHf0o4"
// rawid: "gh_3d7ee11ff839"
// userid: "JinDuoXia"
// _id: "62d67c666af63a4054328a12"
// loadMore() {
// this.pageInfo.page++
// this.requestOrderList()
// },
selectResult(value) {
accountSelect(newVal, oldVal) {
if (newVal && newVal !== '' && this.activeType !== 3) {
this.pageInfo = {
page: 0,
page_size: 20,
......@@ -277,450 +251,544 @@
}
this.isloadMore = true
this.orderList = []
value !== '' ? (this.role_id = [value]) : (this.role_id = [])
this.requestOrderList()
},
payTypeList() {
const data = {
type: 'pay_type',
value: ''
}
selectSearch(data).then((res) => {
if (res.data.data) {
this.payList = res.data.data
}
})
},
searchInput() {
this.pageInfo = {
page: 0,
page_size: 20,
total: 0
this.requestOrderList('msg')
}
}
},
mounted() {
this.payTypeList()
this.searchDate = [
this.$moment().subtract(1, 'day').format('YYYY-MM-DD'),
this.$moment().format('YYYY-MM-DD')
]
this.timerData.order_time_start = this.$moment().subtract(1, 'day').format('YYYY-MM-DD')
this.timerData.order_time_end = this.$moment().format('YYYY-MM-DD')
},
methods: {
// appid: "wx7810f536467dc161"
// corp_id: "wweaefe716636df3d1"
// external_userid: "wm5rUgMgAAG_vfF4AHClsrS1S6MImVsQ"
// nickname: "梦幻人生"
// openid: "oaQgjwNOyRoIovGPqeaRrlIHf0o4"
// rawid: "gh_3d7ee11ff839"
// userid: "JinDuoXia"
// _id: "62d67c666af63a4054328a12"
// loadMore() {
// this.pageInfo.page++
// this.requestOrderList()
// },
selectResult(value) {
this.pageInfo = {
page: 0,
page_size: 20,
total: 0
}
this.isloadMore = true
this.orderList = []
value !== '' ? (this.role_id = [value]) : (this.role_id = [])
this.requestOrderList()
},
payTypeList() {
const data = {
type: 'pay_type',
value: ''
}
selectSearch(data).then((res) => {
if (res.data.data) {
this.payList = res.data.data
}
this.isloadMore = true
this.orderList = []
this.requestOrderList()
},
payTypeResult(data) {
this.pageInfo = {
page: 0,
page_size: 20,
total: 0
})
},
searchInput() {
this.pageInfo = {
page: 0,
page_size: 20,
total: 0
}
this.isloadMore = true
this.orderList = []
this.requestOrderList()
},
payTypeResult(data) {
this.pageInfo = {
page: 0,
page_size: 20,
total: 0
}
this.isloadMore = true
this.orderList = []
this.requestOrderList()
// this.gameMemberView()
},
dateResult(data) {
if (data && Array.isArray(data) && data.length === 2) {
this.timerData.order_time_start = data[0]
this.timerData.order_time_end = data[1]
this.searchDate = data
} else {
this.timerData.order_time_start = ''
this.timerData.order_time_end = ''
this.searchDate = []
}
this.pageInfo = {
page: 0,
page_size: 20,
total: 0
}
this.isloadMore = true
this.orderList = []
this.requestOrderList()
// this.gameMemberView()
},
refundMoney(item) {
this.refundInfo = { ...item, ...this.userInfo }
this.showRefund = true
},
completionOrder(type, id, item) {
if (item.is_request) {
this.$message.warning('该订单有在进行中的退款申请，请点击下方退款记录查看')
return
}
// type: 1 补单 2 补回调
const data = {
type: type,
order_id: id,
user_name: this.userInfo.username
}
completionOrder(data).then((res) => {
if (res.status_code == 1) {
this.$message.success(res.msg)
setTimeout(() => {
this.requestOrderList()
}, 2000)
}
})
},
// gameMemberView(item) {
// if (this.accountSelect == '') {
// this.$message.warning('暂无关联的账号，请先去关联账号!')
// return false
// }
// const data = { member_id: this.accountSelect, status: this.activeType, ...this.timerData }
// memberView(data).then((res) => {
// if (res.status_code == 1) {
// this.gameUserInfo = res.data
// }
// })
// },
handleTabClick(tab) {
console.log('Tab clicked:', tab.name, typeof tab.name);
// 确保activeTypeStr与tab.name同步
this.activeTypeStr = tab.name;
this.activeType = parseInt(tab.name);
if (this.activeType != 3) {
this.isloadMore = true
this.orderList = []
this.requestOrderList()
// this.gameMemberView()
},
dateResult(data) {
if (data && Array.isArray(data) && data.length === 2) {
this.timerData.order_time_start = data[0]
this.timerData.order_time_end = data[1]
this.searchDate = data
} else {
this.timerData.order_time_start = ''
this.timerData.order_time_end = ''
this.searchDate = []
}
this.pageInfo = {
page: 0,
page_size: 20,
total: 0
}
this.isloadMore = true
this.orderList = []
this.requestOrderList()
// this.gameMemberView()
},
refundMoney(item) {
this.refundInfo = { ...item, ...this.userInfo }
this.showRefund = true
},
completionOrder(type, id, item) {
if (item.is_request) {
this.$message.warning('该订单有在进行中的退款申请，请点击下方退款记录查看')
return
}
// type: 1 补单 2 补回调
const data = {
type: type,
order_id: id,
user_name: this.userInfo.username
}
completionOrder(data).then((res) => {
if (res.status_code == 1) {
this.$message.success(res.msg)
setTimeout(() => {
this.requestOrderList()
}, 2000)
}
},
handleChange(val) {
console.log(val)
},
requestTodayMoney(data) {
todayOrder(data).then((res) => {
this.totalOrder = res.data
})
},
requestOrderList: throttle(function (msg) {
console.log(12313, '开始展示',this.isloadMore)
if (this.accountSelect == '') {
this.$message.warning('暂无关联的账号，请先去关联账号!')
return false
}
if (!this.isloadMore && !msg) {
// this.$message.warning('没有更多数据了')
console.log('没有更多数据了')
return false
}
this.loading = true
this.pageInfo.page += 1
const data = {
status: this.activeType === 4 ? '' : this.activeType,
pay_type: this.pay_type ? this.pay_type.join(',') : '',
member_id: this.accountSelect,
role_id: this.role_id,
order_id: this.inputValue,
order: 'desc',
field: 'order_time',
...this.timerData,
...this.pageInfo
}
this.requestTodayMoney({ member_id: data.member_id, status: data.status })
orderList(data).then(
(res) => {
this.loading = false
if (res.data.data && res.data.data.length < 20) {
console.log('没有更多数据了')
this.isloadMore = false
}
})
},
// gameMemberView(item) {
// if (this.accountSelect == '') {
// this.$message.warning('暂无关联的账号，请先去关联账号!')
// return false
// }
// const data = { member_id: this.accountSelect, status: this.activeType, ...this.timerData }
// memberView(data).then((res) => {
// if (res.status_code == 1) {
// this.gameUserInfo = res.data
// }
// })
// },
handleTabClick(tab) {
console.log('Tab clicked:', tab.name, typeof tab.name);
// 确保activeTypeStr与tab.name同步
this.activeTypeStr = tab.name;
if (this.activeType !== 3) {
this.isloadMore = true
this.pageInfo = {
page: 0,
page_size: 20,
total: 0
res.data.data.map((item, index) => {
item.pay_type_text = item.pay_type.substring(0, item.pay_type.length - 2)
})
this.orderList = this.orderList.concat(res.data.data)
if (res.data.page_info) {
this.orderInfo = res.data.page_info
}
this.orderList = []
this.requestOrderList()
}
},
handleChange(val) {
console.log(val)
},
requestTodayMoney(data) {
todayOrder(data).then((res) => {
this.totalOrder = res.data
})
},
requestOrderList: throttle(function(msg) {
console.log(12313, '开始展示', this)
if (this.accountSelect == '') {
this.$message.warning('暂无关联的账号，请先去关联账号!')
return false
}
if (!this.isloadMore) {
console.log('没有更多数据了')
return false
}
this.loading = true
this.pageInfo.page += 1
const data = {
status: this.activeType,
pay_type: this.pay_type ? this.pay_type.join(',') : '',
member_id: this.accountSelect,
role_id: this.role_id,
order_id: this.inputValue,
order: 'desc',
field: 'order_time',
...this.timerData,
...this.pageInfo
}
this.requestTodayMoney({ member_id: data.member_id, status: data.status })
orderList(data).then(
(res) => {
this.loading = false
if (res.data.data && res.data.data.length < 20) {
this.isloadMore = false
}
res.data.data.map((item, index) => {
item.pay_type_text = item.pay_type.substring(0, item.pay_type.length - 2)
})
this.orderList = this.orderList.concat(res.data.data)
if (res.data.page_info) {
this.orderInfo = res.data.page_info
}
if (res.status_code == 1) {
if (!msg) {
this.$message.success(res.msg)
}
if (res.status_code == 1) {
if (!msg) {
this.$message.success(res.msg)
}
},
(err) => {
this.loading = false
}
)
}, 1000)
},
(err) => {
this.loading = false
}
)
}, 1000)
}
}
</script>
<style lang="scss" scoped>
.order-info-list {
width: 100%;
height: 100%;
background: #fff;
position: relative;
overflow: hidden;
.refundLog {
width: 100%;
height: calc(100% - 60px);
}
.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;
}
}
</script>
<style lang="scss" scoped>
.order-info-list {
.content {
width: 100%;
height: 100%;
background: #fff;
position: relative;
overflow: hidden;
.refundLog{
overflow: auto;
overflow-x: hidden;
::v-deep .el-tabs{
height: auto;
}
::v-deep .el-tab-pane{
height: auto;
}
::v-deep .el-tabs__content{
height: auto !important;
}
.order-info-content {
width: 100%;
height: 100%;
height: calc(100% - 60px);
overflow: auto;
overflow-x: hidden;
}
.detailsTitle {
.tabSelect {
width: 100%;
padding: 0 vw(20);
height: 60px;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
height: 32px;
border-bottom: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
p {
cursor: pointer;
.tabSelectItem {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
cursor: pointer;
line-height: 32px;
}
.tabSelectItemActive {
color: #409EFF;
border-bottom: 2px solid #409EFF;
}
}
.content {
.contentItem {
position: relative;
.title {
position: absolute;
left: 10px;
top: 14px;
font-size: 14px;
color: #999999;
}
}
.item {
width: 100%;
height: 100%;
overflow: auto;
overflow-x: hidden;
.tabSelect {
height: auto;
font-size: 14px;
font-weight: 400;
color: #333333;
padding: 6px 0;
transition: all 0.5s;
position: relative;
padding-left: 10px;
cursor: pointer;
div {
width: 100%;
height: 32px;
border-bottom: 1px solid #ebeef5;
cursor: pointer;
.tabSelectItem {
}
.tableImage {
width: 40px;
height: 40px;
border-radius: 6px;
margin-right: vw(10);
}
.label {
color: #999999;
min-width: 60px;
}
.text {
color: #333333;
margin-left: 10px;
word-break: break-all;
}
.icon {
display: none;
position: absolute;
right: 0;
top: 12px;
}
.dianFail {
display: inline-block;
width: 8px;
height: 8px;
background: #f45454;
border-radius: 5px;
}
.dian {
display: inline-block;
width: 8px;
height: 8px;
background: #409EFF;
border-radius: 5px;
}
.dian2 {
display: inline-block;
width: 8px;
height: 8px;
background: #ff9d02;
border-radius: 5px;
}
}
.orderMoney {
width: calc(100%);
// margin-left: -20px;
padding: 10px 0;
.orderMoneyItem {
text-align: center;
margin-top: 12px;
span {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
cursor: pointer;
line-height: 32px;
}
.tabSelectItemActive {
p {
font-size: 22px;
color: #409EFF;
border-bottom: 2px solid #409EFF;
}
}
.contentItem {
position: relative;
.title {
position: absolute;
left: 10px;
top: 14px;
font-size: 14px;
color: #999999;
}
}
.filterList {
margin-bottom: 10px;
.filterListInput {
width: 60%;
margin-left: 15px;
margin-bottom: 10px;
}
.item {
width: 100%;
height: auto;
font-size: 14px;
font-weight: 400;
color: #333333;
padding: 6px 0;
transition: all 0.5s;
position: relative;
padding-left: 10px;
cursor: pointer;
div {
width: 100%;
}
.tableImage {
width: 40px;
height: 40px;
border-radius: 6px;
margin-right: vw(10);
}
.label {
color: #999999;
min-width: 60px;
}
.filterListDate {
width: 150px;
margin-bottom: 10px;
}
::v-deep .search-item .item-label {
margin-right: 20px;
}
}
.orderDetailsScroll {
width: 100%;
height: auto;
}
.orderDetails {
width: 100%;
height: auto;
margin-bottom: 20px;
position: relative;
.bridgeMain {
position: absolute;
top: 0px;
right: 0px;
width: 50px;
height: 50px;
.text {
color: #333333;
margin-left: 10px;
word-break: break-all;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ff9d02;
transform: rotate(48deg);
z-index: 100;
position: absolute;
right: -8px;
top: 10px;
width: 50px;
text-align: center;
}
.icon {
display: none;
.bridge {
font-size: 50px;
position: absolute;
top: 0;
right: 0;
top: 12px;
}
.dianFail {
display: inline-block;
width: 8px;
height: 8px;
background: #f45454;
border-radius: 5px;
}
.dian {
display: inline-block;
width: 8px;
height: 8px;
background: #409EFF;
border-radius: 5px;
}
.dian2 {
display: inline-block;
width: 8px;
height: 8px;
background: #ff9d02;
border-radius: 5px;
}
}
.orderMoney {
width: calc(100%);
// margin-left: -20px;
padding: 10px 0;
.orderMoneyItem {
text-align: center;
margin-top: 12px;
span {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
.orderDetailsTitle {
width: 100%;
height: 70px;
background: #f9faff;
padding: 10px;
.money {
width: 100%;
height: auto;
margin-bottom: 12px;
margin-top: 4px;
.btns {
padding-right: 10px;
}
.btn {
background: #fff;
border-radius: 4px;
padding: 2px 5px;
margin-left: 5px;
font-size: 12px;
border: 1px solid rgba(0, 0, 0, 0.15);
color: #333333;
cursor: pointer;
}
.btnnot {
background: #ffdddd;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f56c6c;
border: none;
}
p {
font-size: 22px;
.btnsuccess {
background: #e1fff0;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #409EFF;
border: none;
}
.btnRefund {
background: #fff;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #00A6F0;
border-color: #00A6F0;
}
}
}
.filterList {
margin-bottom: 10px;
.filterListInput {
width: 60%;
margin-left: 15px;
margin-bottom: 10px;
}
.filterListDate {
width: 150px;
margin-bottom: 10px;
}
::v-deep .search-item .item-label {
margin-right: 20px;
.text {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
}
.orderDetailsScroll {
width: 100%;
}
.orderDetails {
.orderDetailsList {
width: 100%;
height: auto;
margin-bottom: 20px;
background: #ffffff;
border: 1px solid #ebeef5;
padding: 5px 0;
position: relative;
.bridgeMain {
position: absolute;
top: 0px;
right: 0px;
width: 50px;
height: 50px;
.text {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ff9d02;
transform: rotate(48deg);
z-index: 100;
position: absolute;
right: -8px;
top: 10px;
width: 50px;
text-align: center;
}
.bridge {
font-size: 50px;
position: absolute;
top: 0;
right: 0;
}
}
.orderDetailsTitle {
width: 100%;
height: 70px;
background: #f9faff;
padding: 10px;
.money {
width: 100%;
height: auto;
margin-bottom: 12px;
margin-top: 4px;
.btns {
padding-right: 10px;
}
.btn {
background: #fff;
border-radius: 4px;
padding: 2px 5px;
margin-left: 5px;
font-size: 12px;
border: 1px solid rgba(0, 0, 0, 0.15);
color: #333333;
cursor: pointer;
}
.btnnot {
background: #ffdddd;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #f56c6c;
border: none;
}
.btnsuccess {
background: #e1fff0;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #409EFF;
border: none;
}
.btnRefund{
background: #fff;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #00A6F0;
border-color:#00A6F0;
}
}
.text {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
::v-deep .el-collapse-item__header {
line-height: 20px;
}
.orderDetailsList {
width: 100%;
height: auto;
background: #ffffff;
border: 1px solid #ebeef5;
padding: 5px 0;
position: relative;
::v-deep .el-collapse-item__header{
line-height: 20px;
}
.titleFix {
position: absolute;
left: 10px;
top: 20px;
color: #999999;
}
.titleFix {
position: absolute;
left: 10px;
top: 20px;
color: #999999;
}
}
}
}
.order-tabs {
}
.order-tabs {
::v-deep .el-tabs__header {
margin-bottom: 15px;
::v-deep .el-tabs__header {
margin-bottom: 15px;
}
::v-deep .el-tabs__item {
height: 40px;
line-height: 40px;
font-size: 14px;
&.is-active {
color: #3491FA;
font-weight: 500;
}
}
::v-deep .el-tabs__active-bar {
background-color: #3491FA;
}
::v-deep .el-tabs__item {
height: 40px;
line-height: 40px;
font-size: 14px;
&.is-active {
color: #3491FA;
font-weight: 500;
}
}
</style>
\ No newline at end of file
::v-deep .el-tabs__active-bar {
background-color: #3491FA;
}
}
</style>
\ No newline at end of file
src/views/userInfo/components/Info.vue
......@@ -3,7 +3,7 @@
<div
class="userDetailsPanel columnFlex"
>
<div class="content">
<div class="content" v-loading="viewLoading">
<div v-if="chatUserDetails.is_phishing_account==1" class="warnText">
<p>高风险玩家,请立即通知组长！！！！</p>
<p>①千万不能推转游！！不要发送违禁词汇！！不要发送礼包和告知任何礼包信息！！</p>
......@@ -266,7 +266,8 @@ import { getToken,removeToken } from '@/utils/auth'
...mapState('game', [
'accountSelect',
'gameUserInfo',
'bindGameUserList'
'bindGameUserList',
'viewLoading'
]),
...mapState('user', ['cser_info', 'cser_id', 'cser_name', 'corp_id', 'external_userid', 'userid', 'client_online_status']),
// 客服状态文本
......
src/views/userInfo/userInfo.vue
......@@ -80,7 +80,6 @@ export default {
::v-deep .el-tabs__content {
height: calc(100% - 55px);
overflow-y: auto;
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论