Skip to content

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

Merge branch '1.1' into 1.2

上级 b768d9b4 89b3ae84
正在显示 包含 2099 行增加 和 1460 行删除
company_app/index.html
<!DOCTYPE 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>
<html lang=""> \ No newline at end of file
<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>
public/index.html
...@@ -5,6 +5,13 @@ ...@@ -5,6 +5,13 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <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> <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"> --> <!-- <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 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' ...@@ -20,21 +20,22 @@ import globalComponent from '@/components/register.js'
import loadmore from '@/directive/loadmore/index.js' // 加载更多 import loadmore from '@/directive/loadmore/index.js' // 加载更多
import clickagain from './directive/clickagain' import clickagain from './directive/clickagain'
import permission from '@/directive/permission/index.js' // 权限判断指令 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 清理工具 // 导入 VConsole 清理工具
import '@/utils/vconsoleCleanup' import '@/utils/vconsoleCleanup'
// 开发环境下初始化 stagewise 工具栏 // 开发环境下初始化 stagewise 工具栏
if (process.env.NODE_ENV === 'development') { // if (process.env.NODE_ENV === 'development') {
import('@stagewise/toolbar').then(({ initToolbar }) => { // import('@stagewise/toolbar').then(({ initToolbar }) => {
const stagewiseConfig = { // const stagewiseConfig = {
plugins: [] // plugins: []
}; // };
initToolbar(stagewiseConfig); // initToolbar(stagewiseConfig);
}).catch(err => { // }).catch(err => {
console.error('Failed to initialize stagewise toolbar:', err); // console.error('Failed to initialize stagewise toolbar:', err);
}); // });
} // }
// 开发环境不收集日志 // 开发环境不收集日志
if (process.env.NODE_ENV !== 'development') { if (process.env.NODE_ENV !== 'development') {
......
src/store/modules/game.js
...@@ -16,6 +16,7 @@ const state = { ...@@ -16,6 +16,7 @@ const state = {
gameUserInfo:{}, gameUserInfo:{},
send_game_log: null, // 转游发送渠道新增日志发送信息 send_game_log: null, // 转游发送渠道新增日志发送信息
chatUserInfo: {}, // 当前选中的用户的详情 chatUserInfo: {}, // 当前选中的用户的详情
viewLoading:false, // 查看用户详情的时候 加载状态
} }
const mutations = { const mutations = {
...@@ -39,6 +40,9 @@ const mutations = { ...@@ -39,6 +40,9 @@ const mutations = {
}, },
set_send_game_log(state, data) { set_send_game_log(state, data) {
state.send_game_log = data state.send_game_log = data
},
set_viewLoading(state, data) {
state.viewLoading = data
} }
} }
......
src/styles/index.scss
...@@ -86,6 +86,22 @@ div:focus { ...@@ -86,6 +86,22 @@ div:focus {
height: 1px; height: 1px;
background-color: #e4e7ed; 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 { .el-select-dropdown__item {
......
src/views/ViolationRecord.vue
...@@ -259,15 +259,15 @@ export default { ...@@ -259,15 +259,15 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.violationRecord { .violationRecord {
width: 100%; width: 100%;
height: calc(100vh - 170px); height: 100%;
background: #fff; background: #fff;
overflow-y: auto;
overflow-x: hidden;
.violationRecordContent { .violationRecordContent {
width: 100%; width: 100%;
padding: 20px; padding: 20px;
height: 100%; height: auto;
overflow-y: auto;
overflow-x: hidden;
} }
.contentItem { .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> <template>
<div class="terminaListArea"> <div class="terminaListArea" v-scroll="paperScroll">
<div class="addApply rowFlex spaceBetween"> <div class="addApply rowFlex spaceBetween">
<span></span> <span></span>
<el-button <el-button
...@@ -44,10 +44,7 @@ ...@@ -44,10 +44,7 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div <div
v-infinite-scroll="paperScroll" class="terminaListAreaList"
:infinite-scroll-disabled="!isMoreRecord"
:infinite-scroll-immediate="false"
class="mailListScroll"
> >
<!-- 举报申请 --> <!-- 举报申请 -->
<div class="scrollMain" v-if="terminaList.length > 0"> <div class="scrollMain" v-if="terminaList.length > 0">
...@@ -377,6 +374,10 @@ export default { ...@@ -377,6 +374,10 @@ export default {
this.$forceUpdate() this.$forceUpdate()
}, },
paperScroll() { paperScroll() {
if (!this.isMoreRecord) {
console.log('没有更多数据了')
return false
}
this.requestNextPage() this.requestNextPage()
}, },
requestNextPage(pageInfo) { requestNextPage(pageInfo) {
...@@ -457,6 +458,7 @@ export default { ...@@ -457,6 +458,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
overflow-x: hidden;
::v-deep .el-form-item__label{ ::v-deep .el-form-item__label{
font-weight: 400; font-weight: 400;
} }
...@@ -516,12 +518,8 @@ export default { ...@@ -516,12 +518,8 @@ export default {
} }
} }
.mailListScroll { .terminaListAreaList {
width: 100%; width: 100%;
height: calc(100% - 220px);
overflow-y: auto;
overflow-x: hidden;
.scrollMain { .scrollMain {
width: 100%; width: 100%;
height: auto; height: auto;
......
src/views/components/ApplyRecords/TerminaTranfer.vue
<template> <template>
<div class="terminaList"> <div class="terminaListContent" v-scroll="paperScroll">
<div class="addApply rowFlex spaceBetween"> <div class="addApply rowFlex spaceBetween">
<span></span> <span></span>
<el-button <el-button
...@@ -43,10 +43,8 @@ ...@@ -43,10 +43,8 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div <div
v-infinite-scroll="paperScroll"
:infinite-scroll-disabled="!isMoreRecord" class="terminaListContentList"
:infinite-scroll-immediate="false"
class="mailListScroll"
> >
<!-- 举报申请 --> <!-- 举报申请 -->
<div v-if="terminaList.length>0" class="scrollMain"> <div v-if="terminaList.length>0" class="scrollMain">
...@@ -68,176 +66,102 @@ ...@@ -68,176 +66,102 @@
</p> </p>
<p><span class="label">转端状态:</span><span class="value">{{ item.trans_check_status_text || '-' }}</span></p> <p><span class="label">转端状态:</span><span class="value">{{ item.trans_check_status_text || '-' }}</span></p>
</div> </div>
<div class="terminaItemRight columnFlex columnCenter"> <!-- 审批进度 -->
<el-button <el-collapse-transition>
v-if="item.approval_status== 3 && item.related_request_id == 0" <div v-if="item.showStep" class="terminaProcessList">
type="primary" <el-steps direction="vertical" :active="item.current" finish-status="success">
size="mini" <el-step v-for="(items, indexs) in item.terminaProcessList" :key="'trans_item_' + indexs"
style="margin-bottom:15px;" :title="items.node_name">
@click.stop="resubmitApproval(item)" <template slot="description">
>重新提交</el-button> <div v-if="items" class="trans-follow-1 card-style">
<img <div class="follow-item">
v-if="item.approval_status == 1" <span class="follow-info-label label-font">
:src="shenpi1" {{ items.node_sort !== '0' ? '审批人:' : '登记人:' }}
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}` }}
</span> </span>
</el-tooltip> <span class="info-value value-font">
</div> {{ 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 <div v-if="items.node_sort !== '0' || items.node_name === '系统'" class="follow-item">
v-if="items.node_sort !== '0' || items.node_name === '系统'" <span class="follow-info-label label-font">
class="follow-item" 审批结果:
> </span>
<span class="follow-info-label label-font"> <span class="info-value value-font"
审批结果: :class="items.current < indexs ? '' : switchStateTag(items.approval_result)">
</span> {{ items.current < indexs ? '' : items.approval_result_text == '通过' ? '完成' :
<span items.approval_result_text }} </span>
class="info-value value-font" </div>
:class="items.current < indexs ? '' : switchStateTag(items.approval_result)" <div class="follow-item">
> <span class="follow-info-label label-font">
{{ items.current < indexs ? '' : items.approval_result_text=='通过' ? '完成' : items.approval_result_text }} {{ items.node_sort !== '0' || items.node_name === '系统' ? '审批时间:' : '登记时间:' }}
</span> </span>
</div> <span class="info-value value-font">
<div class="follow-item"> {{ items.node_sort === '0' ? items.create_time : items.update_time }}
<span class="follow-info-label label-font"> </span>
{{ items.node_sort !== '0' || items.node_name === '系统' ? '审批时间:' : '登记时间:' }} </div>
</span> <div
<span class="info-value value-font"> v-if="(items.node_sort !== '0' || items.node_name === '系统') && items.approval_result === '2'"
{{ items.node_sort === '0' ? items.create_time : items.update_time }} class="follow-item">
</span> <span class="follow-info-label label-font">
</div> 驳回原因:
<div </span>
v-if="(items.node_sort !== '0' || items.node_name === '系统') && items.approval_result === '2'" <span class="info-value value-font">
class="follow-item" {{ items.extra_attribution.remark }}
> </span>
<span class="follow-info-label label-font"> </div>
驳回原因:
</span>
<span class="info-value value-font">
{{ items.extra_attribution.remark }}
</span>
</div>
<div <div
v-if="items.node_sort === item.terminaProcessList[item.terminaProcessList.length - 1].node_sort + '' && items.approval_result === '1' && items.node_sort !== '0'" 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" class="follow-item-remark follow-item">
> <span class="follow-info-label label-font">
<span class="follow-info-label label-font"> 处理结果:
处理结果: </span>
</span> <span class="info-value value-font">
<span class="info-value value-font"> {{ items.extra_attribution.banned_text }}
{{ 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>
点击查看大图
</span> </span>
</div> </div>
<div <div
class="remark-value" v-if="items.node_name !== '系统' && items.extra_attribution && items.extra_attribution.remark"
v-html="formatImg(items.extra_attribution && items.extra_attribution.remark ? 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> </div>
</div> </template>
</template> </el-step>
</el-step> </el-steps>
</el-steps> </div>
</div> </el-collapse-transition>
</el-collapse-transition> </div>
</div> </div>
</div> </div>
<div v-else class="noContent rowFlex allCenter"> <div v-else class="noContent rowFlex allCenter">
<noContent /> <noContent />
</div> </div>
</div> </div>
<el-dialog <el-dialog :visible.sync="dialogRemarkVisible" append-to-body title="查看大图" custom-class="remake-dialog">
:visible.sync="dialogRemarkVisible"
append-to-body
title="查看大图"
custom-class="remake-dialog"
>
<div class="remake-box"> <div class="remake-box">
<div v-html="dialogRemake"></div> <div v-html="dialogRemake"></div>
</div> </div>
</el-dialog> </el-dialog>
<!-- 编辑误操作 --> <!-- 编辑误操作 -->
<TerminalTransferDialog <TerminalTransferDialog v-if="showaddAreaTransfer" :visible.sync="showaddAreaTransfer"
v-if="showaddAreaTransfer" :area-transfer-item="areaTransferItem" @updateList="updateList" />
:visible.sync="showaddAreaTransfer"
:area-transfer-item="areaTransferItem"
@updateList="updateList"
/>
</div> </div>
</template> </template>
<script> <script>
...@@ -383,6 +307,10 @@ export default { ...@@ -383,6 +307,10 @@ export default {
this.$forceUpdate() this.$forceUpdate()
}, },
paperScroll() { paperScroll() {
if (!this.isMoreRecord) {
console.log('没有更多数据了')
return false
}
this.requestNextPage() this.requestNextPage()
}, },
requestNextPage(pageInfo) { requestNextPage(pageInfo) {
...@@ -457,18 +385,25 @@ export default { ...@@ -457,18 +385,25 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.terminaList { .terminaListContent {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; .TerminaTranferContent{
.terminaListForm{ width: 100%;
::v-deep .el-form-item__label{ height: 100%;
overflow: auto;
overflow-x: hidden;
}
.terminaListForm {
::v-deep .el-form-item__label {
font-weight: 400; font-weight: 400;
} }
} }
.addApply { .addApply {
margin-top: 15px; margin-top: 15px;
} }
.taskForm { .taskForm {
::v-deep .el-form-item { ::v-deep .el-form-item {
margin-bottom: 10px; margin-bottom: 10px;
...@@ -521,19 +456,16 @@ export default { ...@@ -521,19 +456,16 @@ export default {
} }
} }
.mailListScroll { .terminaListContentList {
width: 100%; width: 100%;
height: calc(100% - 220px);
overflow-y: auto;
overflow-x: hidden;
.scrollMain { .scrollMain {
width: 100%; width: 100%;
height: auto; height: auto;
margin-bottom: 40px; margin-bottom: 40px;
padding: 0 10px; padding: 0 10px;
.terminaContent { .terminaContent {
width:100%; width: 100%;
} }
//举报申请 //举报申请
...@@ -629,7 +561,7 @@ export default { ...@@ -629,7 +561,7 @@ export default {
width: 1px; width: 1px;
} }
::v-deep .el-step > .is-success { ::v-deep .el-step>.is-success {
color: #409EFF; color: #409EFF;
border-color: #409EFF; border-color: #409EFF;
...@@ -638,11 +570,11 @@ export default { ...@@ -638,11 +570,11 @@ export default {
} }
} }
::v-deep .el-step__main > .is-success { ::v-deep .el-step__main>.is-success {
color: #409EFF; color: #409EFF;
} }
::v-deep .el-step > .is-process { ::v-deep .el-step>.is-process {
color: #409EFF; color: #409EFF;
border-color: #409EFF; border-color: #409EFF;
...@@ -651,7 +583,7 @@ export default { ...@@ -651,7 +583,7 @@ export default {
} }
} }
::v-deep .el-step__main > .is-process { ::v-deep .el-step__main>.is-process {
color: #409EFF; color: #409EFF;
} }
...@@ -777,7 +709,7 @@ export default { ...@@ -777,7 +709,7 @@ export default {
height: 80px; height: 80px;
} }
&:hover > .preview-pic { &:hover>.preview-pic {
z-index: 100; z-index: 100;
} }
} }
......
src/views/components/ApplyRecords/errorHandle.vue
<template> <template>
<div class="detailsErrorHandle columnFlex"> <div class="detailsErrorHandle columnFlex">
<div class="detailsErrorHandleContent"> <div class="detailsErrorHandleContent" v-scroll="requestOrderList">
<div class="addApply rowFlex spaceBetween"> <div class="addApply rowFlex spaceBetween">
<span></span> <span></span>
<el-button <el-button
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<div class="list"> <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-if="orderList.length>0" class="orderDetailsScrollContent">
<div v-for="(item,index) in orderList" :key="index" class="orderDetails"> <div v-for="(item,index) in orderList" :key="index" class="orderDetails">
<div class="orderDetailsList"> <div class="orderDetailsList">
...@@ -302,7 +302,6 @@ export default { ...@@ -302,7 +302,6 @@ export default {
background: #fff; background: #fff;
margin-left: 2px; margin-left: 2px;
position: relative; position: relative;
overflow: hidden;
.detailsTitle { .detailsTitle {
width: 100%; width: 100%;
padding: 0 vw(20); padding: 0 vw(20);
...@@ -321,6 +320,8 @@ export default { ...@@ -321,6 +320,8 @@ export default {
width: 100%; width: 100%;
height:100%; height:100%;
padding: 20px 10px; padding: 20px 10px;
overflow: auto;
overflow-x: hidden;
.tabSelect{ .tabSelect{
width: 100%; width: 100%;
height: 60px; height: 60px;
...@@ -342,8 +343,7 @@ export default { ...@@ -342,8 +343,7 @@ export default {
} }
.list{ .list{
width: 100%; width: 100%;
height: calc(100% - 90px); height: auto;
overflow: auto;
} }
.contentItem{ .contentItem{
position: relative; position: relative;
...@@ -456,9 +456,6 @@ export default { ...@@ -456,9 +456,6 @@ export default {
} }
.orderDetailsScroll{ .orderDetailsScroll{
width: 100%; width: 100%;
height: calc(100% - 20px);
overflow: auto;
overflow-x: hidden;
.orderDetailsScrollContent{ .orderDetailsScrollContent{
margin-bottom: 50px; margin-bottom: 50px;
} }
......
src/views/components/bindGameAccount/bindUserList.vue
...@@ -74,7 +74,8 @@ export default { ...@@ -74,7 +74,8 @@ export default {
...mapMutations('game', [ ...mapMutations('game', [
'set_accountSelect', 'set_accountSelect',
'set_chatUserInfo', 'set_chatUserInfo',
'set_gameUserInfo' 'set_gameUserInfo',
'set_viewLoading'
]), ]),
...mapActions('game', ['gameBindUser']), ...mapActions('game', ['gameBindUser']),
handleChange(value) { handleChange(value) {
...@@ -89,17 +90,19 @@ export default { ...@@ -89,17 +90,19 @@ export default {
}, },
gameMemberView(item) { gameMemberView(item) {
if (this.accountSelect && this.accountSelect !== '') { if (this.accountSelect && this.accountSelect !== '') {
this.set_viewLoading(true)
const data = { member_id: this.accountSelect, need_channel: 1, need_roleInfo: 1, need_banned: 1 } const data = { member_id: this.accountSelect, need_channel: 1, need_roleInfo: 1, need_banned: 1 }
memberView(data).then((res) => { memberView(data).then((res) => {
this.set_viewLoading(false)
if (res.status_code === 1) { if (res.status_code === 1) {
this.set_gameUserInfo(res.data) this.set_gameUserInfo(res.data)
} else { } else {
this.set_gameUserInfo({}) this.set_gameUserInfo({})
} }
}, (err) => { }, (err) => {
this.set_viewLoading(false)
this.set_gameUserInfo({}) this.set_gameUserInfo({})
}) })
} }
}, },
addNewUser() { addNewUser() {
......
src/views/components/giftRecord/emailGift.vue
<template> <template>
<div class="detailsGiftApply columnFlex"> <div class="detailsGiftApply columnFlex">
<div class="detailsGiftApplyContent" v-scroll="requestemailGiftList" v-loading="listLoading" >
<div class="detailsGiftApplyTitle rowFlex spaceBetween columnCenter"> <div class="detailsGiftApplyTitle rowFlex spaceBetween columnCenter">
<!-- <p>充值礼包</p> --> <!-- <p>充值礼包</p> -->
<span></span> <span></span>
<el-button <el-button type="primary" size="small" @click="showApplyGift = true">礼包申请</el-button>
type="primary"
size="small"
@click="showApplyGift = true"
>礼包申请</el-button>
</div> </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-form-item label="主游戏">
<el-select <el-select v-model.trim="form.main_game_id" filterable remote clearable reserve-keyword
v-model.trim="form.main_game_id" placeholder="请输入主游戏名" style="width:100%;" :remote-method="remoteMethod" :loading="loading"
filterable @change="searchInput" @focus="gameNameList = optionsList">
remote <el-option v-for="item in gameNameList" :key="item.value" :label="item.label" :value="item.value">
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-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="区服"> <el-form-item label="区服">
<el-select <el-select v-model.trim="form.zyou_server_id" filterable remote multiple reserve-keyword style="width:100%;"
v-model.trim="form.zyou_server_id" placeholder="请先选择主游戏" :remote-method="remoteMethodServer" :loading="loading" @change="searchInput">
filterable <el-option v-for="item in serverNameList" :key="item.id" :label="item.label" :value="item.value">
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-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="角色名称"> <el-form-item label="角色名称">
<el-input <el-input v-model="form.role_name_or_cp_id" placeholder="请输入角色名称" style="width:100%;"
v-model="form.role_name_or_cp_id" @change="searchInput"></el-input>
placeholder="请输入角色名称"
style="width:100%;"
@change="searchInput"
></el-input>
</el-form-item> </el-form-item>
<el-form-item label="礼包标题"> <el-form-item label="礼包标题">
<el-input <el-input v-model="form.active_title" placeholder="请输入礼包名称" style="width:100%;"
v-model="form.active_title" @change="searchInput"></el-input>
placeholder="请输入礼包名称"
style="width:100%;"
@change="searchInput"
></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-tabs <el-tabs v-model="form.gift_type" class="tabStyle" @tab-click="tabChange">
v-model="form.gift_type" <el-tab-pane v-for="(item, index) in giftTypeList" :key="index" :label="item.label"
class="tabStyle" :name="item.value"></el-tab-pane>
@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> </el-tabs>
<!-- 订单列表 --> <!-- 订单列表 -->
<div <div
v-infinite-scroll="requestemailGiftList" class="email-gift-main-scroll">
v-loading="listLoading" <div v-if="emailGiftList.length > 0" style="height:auto;">
:infinite-scroll-disabled="!isloadMore" <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="orderDetailsTitle">
<div class="rowFlex spaceBetween columnCenter"> <div class="rowFlex spaceBetween columnCenter">
<div> <div>
...@@ -110,89 +54,50 @@ ...@@ -110,89 +54,50 @@
<p class="text hidden"><label>充值金额:</label> ¥{{ item.amount }}</p> <p class="text hidden"><label>充值金额:</label> ¥{{ item.amount }}</p>
<p class="text hidden"><label>充值日期:</label> {{ item.apply_recharge_date }}</p> <p class="text hidden"><label>充值日期:</label> {{ item.apply_recharge_date }}</p>
</div> </div>
<i <i v-if="item.showDetails" class="el-icon-arrow-down iconStyle" @click="closePage(item, index)"></i>
v-if="item.showDetails" <i v-else class="el-icon-arrow-right iconStyle" @click="openPage(item, index)"></i>
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> </div>
<el-collapse-transition> <el-collapse-transition>
<div v-if="item.showDetails"> <div v-if="item.showDetails">
<p <p v-if="item.status == '待提交'" class="text"><label>状态：</label> <span class="noSend">{{ item.status
v-if="item.status=='待提交'" }}</span> </p>
class="text" <p v-else-if="item.status == '已提交'" class="text"><label>状态：</label> <span class="sended">{{
><label>状态：</label> <span class="noSend">{{ item.status }}</span> </p> item.status }}</span> </p>
<p <p v-else-if="item.status == '已驳回'" class="text"><label>状态：</label> <span class="sendFail">{{
v-else-if="item.status=='已提交'" item.status }}</span> </p>
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.create_time }} </p>
<p class="text"><label>提交时间：</label> {{ item.confirm_time }} </p> <p class="text"><label>提交时间：</label> {{ item.confirm_time }} </p>
<label <label style="margin-right:10px;margin-top:3px;" class="text"> <label>奖品信息：</label> </label>
style="margin-right:10px;margin-top:3px;" <div v-for="items in item.level_attribute" :key="items.rule_id" class="columnCenter userInfoStyle"
class="text" style="border-top: 1px solid rgb(196 205 226);margin-top: 5px;">
> <label>奖品信息：</label> </label> <div class="contentConfirmItem rowFlex spaceBetween" style="padding-left:0;margin-top:10px;">
<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 class="title">{{ items.prize_level_name }}</p>
<p v-if="items.compare_amount"> <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> </span></p>
</div> </div>
<!-- 固定奖 --> <!-- 固定奖 -->
<div v-if="items.prize_default"> <div v-if="items.prize_default">
<div class="contentConfirmItem"> <div class="contentConfirmItem">
<p class="title">固定奖 <span v-if="item.exchange_score_status == 1">{{ items.apply_num ? '*' + items.apply_num : '' }}</span></p> <p class="title">固定奖 <span v-if="item.exchange_score_status == 1">{{ items.apply_num ? '*' +
<div items.apply_num : '' }}</span></p>
v-for="(prize,prizeIndex) in items.prize_default" <div v-for="(prize, prizeIndex) in items.prize_default" :key="prizeIndex"
:key="prizeIndex" class="contentConfirmItem rowFlex ">
class="contentConfirmItem rowFlex "
>
<p class="info"> {{ prize.name }}</p> <p class="info"> {{ prize.name }}</p>
<p <p class="info" style="margin-left:40px;">ID: {{ prize.prize_id }}</p>
class="info"
style="margin-left:40px;"
>ID: {{ prize.prize_id }}</p>
</div> </div>
</div> </div>
</div> </div>
<!-- 自选奖 --> <!-- 自选奖 -->
<div <div v-if="items.prize_auto" class="contentConfirmItem">
v-if="items.prize_auto"
class="contentConfirmItem"
>
<p class="title">自选奖 ({{ items.prize_auto.length }}选{{ items.prize_auto_num }})</p> <p class="title">自选奖 ({{ items.prize_auto.length }}选{{ items.prize_auto_num }})</p>
<div <div v-for="(prize, prizeIndex) in items.prize_auto" :key="prizeIndex"
v-for="(prize,prizeIndex) in items.prize_auto" class="contentConfirmItem ">
:key="prizeIndex" <div v-for="(auto, autoIndex) in prize.group" :key="autoIndex">
class="contentConfirmItem " <div v-if="prize.apply_num > 0" class="rowFlex spaceBetween">
>
<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>{{ auto.name }}</span>
<span> ID:{{ auto.prize_id }}</span> <span> ID:{{ auto.prize_id }}</span>
<div>*{{ prize.apply_num }}</div> <div>*{{ prize.apply_num }}</div>
...@@ -202,21 +107,16 @@ ...@@ -202,21 +107,16 @@
</div> </div>
<!-- 返利 --> <!-- 返利 -->
<div v-if="item.rebate_ratio_amount" class="contentConfirmItem"> <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> </div>
<div v-if="item.prize && item.prize.length>0"> <div v-if="item.prize && item.prize.length > 0">
<div <div v-for="(prize, prizeIndex) in item.prize" :key="prizeIndex"
v-for="(prize,prizeIndex) in item.prize" class="contentConfirmItem rowFlex ">
:key="prizeIndex"
class="contentConfirmItem rowFlex "
>
<p class="info"> {{ prize.name }}</p> <p class="info"> {{ prize.name }}</p>
<p <p class="info" style="margin-left:40px;">ID: {{ prize.prize_id }}</p>
class="info"
style="margin-left:40px;"
>ID: {{ prize.prize_id }}</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -224,336 +124,403 @@ ...@@ -224,336 +124,403 @@
</div> </div>
</div> </div>
</div> </div>
<div <div v-else-if="!listLoading && emailGiftList.length == 0" class="noContent rowFlex allCenter">
v-else-if="!listLoading && emailGiftList.length==0" <noContent />
class="noContent rowFlex allCenter"
>
<noContent/>
</div> </div>
</div> </div>
</div> </div>
<!-- 申请礼包 --> <!-- 申请礼包 -->
<applyGift <applyGift v-if="showApplyGift" :show.sync="showApplyGift" title="礼包申请" @requestData="requestData" />
v-if="showApplyGift" </div>
:show.sync="showApplyGift" </template>
title="礼包申请"
@requestData="requestData" <script>
/> import { emailGiftList, memberView, completionOrder, selectSearch } from '@/api/game'
</div> import { mapMutations, mapActions, mapState } from 'vuex'
</template> import { removeDp, debounce } from '@/utils/index'
// import { roleList, memberView, zyouBind, selectSearch } from '@/api/game'
<script> import applyGift from './applyGift.vue'
import { emailGiftList, memberView, completionOrder, selectSearch } from '@/api/game' import selectDate from '@/components/selectDate.vue'
import { mapMutations, mapActions, mapState } from 'vuex' export default {
import { removeDp, debounce } from '@/utils/index' components: {
// import { roleList, memberView, zyouBind, selectSearch } from '@/api/game' selectDate,
import applyGift from './applyGift.vue' applyGift
import selectDate from '@/components/selectDate.vue' },
export default { data() {
components: { return {
selectDate, isloadMore: true,
applyGift showApplyGift: false,
}, collapseValue: ['1'],
data() { emailGiftList: [],
return { optionsList: [],
isloadMore: true, gameNameList: [],
showApplyGift: false, loading: false,
collapseValue: ['1'], listLoading: false,
emailGiftList: [], serverNameList: [],
optionsList: [], giftTypeList: [],
gameNameList: [], form: {
loading: false, main_game_id: '',
listLoading: false, zyou_server_id: [],
serverNameList: [], role_name_or_cp_id: '',
giftTypeList: [], member_id: '',
form: { active_title: '',
main_game_id: '', gift_type: ''
zyou_server_id: [], },
role_name_or_cp_id: '', inputValue: '',
member_id: '', pageInfo: {
active_title: '', page: 0,
gift_type: '' page_size: 20,
}, total: 0
inputValue: '', },
pageInfo: { isCollapsed: false
}
},
computed: {
...mapState('game', ['accountSelect']),
},
watch: {
accountSelect(newVal, oldVal) {
if (newVal && newVal !== '') {
this.pageInfo = {
page: 0, page: 0,
page_size: 20, page_size: 20,
total: 0 total: 0
} }
this.emailGiftList = []
this.isloadMore = true
this.requestemailGiftList()
} }
}
},
mounted() {
this.requestGameList()
this.requestGiftType()
},
methods: {
// 重新拉去数据
requestData() {
this.emailGiftList = []
this.isloadMore = true
this.requestemailGiftList()
}, },
computed: { tabChange: debounce(function () {
...mapState('game', ['accountSelect']), 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: { requestGameList() {
accountSelect(newVal, oldVal) { const data = {
if (newVal && newVal !== '') { type: 'mainGameList',
this.pageInfo = { value: '',
page: 0, weixin_blong_id: ''
page_size: 20,
total: 0
}
this.emailGiftList = []
this.isloadMore = true
this.requestemailGiftList()
}
} }
selectSearch(data).then(res => {
this.loading = false
if (res.status_code == 1) {
this.gameNameList = this.optionsList = res.data.data
}
})
}, },
mounted() { closePage(item, index) {
this.requestGameList() this.$set(this.emailGiftList[index], 'showDetails', false)
this.requestGiftType()
}, },
methods: { openPage(item, index) {
// 重新拉去数据 this.$set(this.emailGiftList[index], 'showDetails', true)
requestData() { },
this.emailGiftList = [] remoteMethodServer(query) {
this.isloadMore = true if (query !== '') {
this.requestemailGiftList() this.loading = true
},
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() {
const data = { const data = {
type: 'mainGameList', type: 'server_info',
value: '', value: query,
weixin_blong_id: '' main_game_ids: this.form.main_game_id
} }
selectSearch(data).then(res => { selectSearch(data).then(res => {
this.loading = false this.loading = false
if (res.status_code == 1) { 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) remoteMethod(query) {
}, if (query !== '') {
openPage(item, index) { this.gameNameList = this.optionsList.filter(item => {
this.$set(this.emailGiftList[index], 'showDetails', true) return item.label.toLowerCase()
}, .indexOf(query.toLowerCase()) > -1
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
}) })
} 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> .detailsGiftApplyContent {
.detailsGiftApply {
width: 100%; width: 100%;
height: calc(100vh - 180px); height: 100%;
background: #fff; padding: 0 10px;
position: relative; overflow: auto;
overflow-y: hidden; overflow-x: hidden;
::v-deep .el-tabs__nav-next,::v-deep .el-tabs__nav-prev{ ::v-deep .el-tabs__content{
line-height: 50px; height: auto;
}
::v-deep .el-tabs{
height: auto;
} }
.detailsGiftApplyTitle { .noContent{
margin-top: 50px;
}
.item {
width: 100%; width: 100%;
height: 60px; height: auto;
font-size: 18px; font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC; font-weight: 400;
font-weight: 500;
color: #333333; 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; 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%; .orderMoney {
height: calc(100% - 100px); width: calc(100% + 40px);
padding: 0 10px; height: 80px;
.item { // margin-left: -20px;
width: 100%; padding: 10px 0;
height: auto;
font-size: 14px; .orderMoneyItem {
font-weight: 400; width: 50%;
color: #333333; text-align: center;
padding: 6px 0; margin-top: 5px;
transition: all 0.5s;
position: relative; span {
padding-left: 10px; font-size: 14px;
cursor: pointer; font-family: PingFangSC-Medium, PingFang SC;
div { font-weight: 500;
width: 100%;
}
.label {
color: #999999;
}
.text {
color: #333333; color: #333333;
margin-left: 10px;
word-break: break-all;
max-width: 80%;
} }
.icon {
display: none; p {
position: absolute; font-size: 22px;
right: 0; color: #409EFF;
top: 12px;
}
.dianFail {
display: inline-block;
width: 8px;
height: 8px;
background: #f45454;
border-radius: 5px;
} }
.dian { }
display: inline-block; }
width: 8px;
height: 8px; .filterList {
background: #409EFF; margin-bottom: 10px;
border-radius: 5px; 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; .filter-header {
width: 8px; margin-bottom: 0;
height: 8px; padding-bottom: 0;
background: #ff9d02; border-bottom: none;
border-radius: 5px;
} }
} }
.orderMoney { .label {
width: calc(100% + 40px); width: 80px;
height: 80px; text-align: center;
// margin-left: -20px; display: inline-block;
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;
}
}
} }
.filterList {
.filterListInput {
width: 60%;
margin-left: 15px;
margin-bottom: 10px; 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%; .filterListDate {
height: calc(100% - 200px); width: 150px;
overflow: auto; margin-bottom: 10px;
overflow-x: hidden; }
.orderDetails { }
.email-gift-main-scroll {
width: 100%;
height: auto;
.orderDetails {
width: 100%; width: 100%;
height: auto; height: auto;
margin-bottom: 10px; margin-bottom: 10px;
position: relative; position: relative;
.bridgeMain { .bridgeMain {
position: absolute; position: absolute;
top: 0px; top: 0px;
right: 0px; right: 0px;
width: 50px; width: 50px;
height: 50px; height: 50px;
.text { .text {
font-size: 8px; font-size: 8px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
...@@ -567,6 +534,7 @@ ...@@ -567,6 +534,7 @@
width: 50px; width: 50px;
text-align: center; text-align: center;
} }
.bridge { .bridge {
font-size: 50px; font-size: 50px;
position: absolute; position: absolute;
...@@ -574,25 +542,29 @@ ...@@ -574,25 +542,29 @@
right: 0; right: 0;
} }
} }
.orderDetailsTitle { .orderDetailsTitle {
width: 100%; width: 100%;
height: auto; height: auto;
background: #f9faff; background: #f9faff;
padding: 10px; padding: 10px;
.iconStyle { .iconStyle {
font-size: 18px; font-size: 18px;
cursor: pointer; cursor: pointer;
color: #409EFF; color: #409EFF;
} }
.money { .money {
width: 100%; width: 100%;
height: auto; height: auto;
margin-bottom: 12px; margin-bottom: 12px;
margin-top: 4px; margin-top: 4px;
.btns { .btns {
padding-right: 40px; padding-right: 40px;
} }
.btn { .btn {
background: #fff; background: #fff;
border-radius: 4px; border-radius: 4px;
...@@ -603,6 +575,7 @@ ...@@ -603,6 +575,7 @@
color: #333333; color: #333333;
cursor: pointer; cursor: pointer;
} }
.btnnot { .btnnot {
background: #ffdddd; background: #ffdddd;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
...@@ -610,6 +583,7 @@ ...@@ -610,6 +583,7 @@
color: #f56c6c; color: #f56c6c;
border: none; border: none;
} }
.btnsuccess { .btnsuccess {
background: #e1fff0; background: #e1fff0;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
...@@ -618,6 +592,7 @@ ...@@ -618,6 +592,7 @@
border: none; border: none;
} }
} }
.text { .text {
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
...@@ -625,101 +600,114 @@ ...@@ -625,101 +600,114 @@
color: #333333; color: #333333;
line-height: 26px; line-height: 26px;
margin-right: 10px; margin-right: 10px;
label { label {
color: #999999; color: #999999;
} }
} }
} }
.orderDetailsList { .orderDetailsList {
width: 100%; width: 100%;
height: auto; height: auto;
background: #f9faff; background: #f9faff;
padding: 5px 0; padding: 5px 0;
position: relative; position: relative;
.text { .text {
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
line-height: 20px; line-height: 20px;
label { label {
color: #999999; 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%; .email-gift-main-scroll {
height: auto; ::v-deep .el-tabs__item {
background: #f9faff; line-height: 26px;
margin-top: 10px; font-size: 16px;
.title {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; 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-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
text-align: center; margin-top: 10px;
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;
}
} }
.allIcon { }
width: 137px;
height: 20px; .expendIcon {
background: #f2ac51; font-size: 14px;
border-radius: 13px; font-family: PingFangSC-Regular, PingFang SC;
position: absolute; font-weight: 400;
left: 50%; color: #666666;
transform: translateX(-50%); text-align: center;
bottom: 80px; 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' ...@@ -95,7 +95,7 @@ import Clipboard from 'clipboard'
<style lang="scss" scoped> <style lang="scss" scoped>
.wx-gift-container { .wx-gift-container {
height: calc(100vh - 230px); height: 100%;
width: 100%; width: 100%;
background-color: #fff; background-color: #fff;
......
src/views/components/order/refundLog.vue
<template> <template>
<div class="detailsRefund columnFlex"> <div class="detailsRefund columnFlex">
<div class="content refundContent"> <div class="refundContent" v-scroll="requestOrderList">
<div class="filter-container"> <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-form-item label="订单号:">
<el-input <el-input
v-model="requestData.order_id" v-model="requestData.order_id"
...@@ -49,10 +57,7 @@ ...@@ -49,10 +57,7 @@
</div> </div>
<!-- 订单列表 --> <!-- 订单列表 -->
<div <div
v-infinite-scroll="requestOrderList"
v-loading="loading"
class="detailsRefundScroll" class="detailsRefundScroll"
:infinite-scroll-disabled="!isloadMore"
> >
<div v-if="orderList.length > 0"> <div v-if="orderList.length > 0">
<div v-for="(item, index) in orderList" :key="index" class="orderDetails"> <div v-for="(item, index) in orderList" :key="index" class="orderDetails">
...@@ -276,7 +281,8 @@ ...@@ -276,7 +281,8 @@
page: 0, page: 0,
page_size: 20, page_size: 20,
total: 0 total: 0
} },
isCollapsed: false
} }
}, },
computed: { computed: {
...@@ -461,7 +467,10 @@ ...@@ -461,7 +467,10 @@
this.loading = false this.loading = false
} }
) )
}, 1000) }, 1000),
toggleCollapse() {
this.isCollapsed = !this.isCollapsed
}
} }
} }
</script> </script>
...@@ -470,9 +479,6 @@ ...@@ -470,9 +479,6 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #fff; background: #fff;
position: relative;
overflow: hidden;
.detailsTitle { .detailsTitle {
width: 100%; width: 100%;
padding: 0 vw(20); padding: 0 vw(20);
...@@ -489,11 +495,11 @@ ...@@ -489,11 +495,11 @@
} }
} }
.content { .refundContent {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-top: 20px; overflow: auto;
overflow-x: hidden;
.tabSelect { .tabSelect {
width: 100%; width: 100%;
height: 60px; height: 60px;
...@@ -631,9 +637,7 @@ ...@@ -631,9 +637,7 @@
} }
.detailsRefundScroll { .detailsRefundScroll {
width: 100%; width: 100%;
height: calc(100% - 250px); height: auto;
overflow: auto;
overflow-x: hidden;
padding-right: 10px; padding-right: 10px;
border-radius: 5px; border-radius: 5px;
} }
...@@ -784,6 +788,76 @@ ...@@ -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 { ::v-deep .el-tabs__item {
line-height: 26px; line-height: 26px;
font-size: 16px; font-size: 16px;
......
src/views/components/quickSendGame/sendGame.vue
...@@ -693,11 +693,11 @@ export default { ...@@ -693,11 +693,11 @@ export default {
// const list = [ // const list = [
// { // {
// msgtype: 'text', // 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.set_sendSkillMessage(list)
this.sendChatMessage(`账号:${username} \n密码:${res.data.encryptPassword}`, 'text') this.sendChatMessage(`账号:${username} \n密码:${res.data.password}`, 'text')
this.markTransScene(type) this.markTransScene(type)
this.sendGameLog(item) this.sendGameLog(item)
}) })
...@@ -740,13 +740,13 @@ export default { ...@@ -740,13 +740,13 @@ export default {
{ {
msgtype: 'text', msgtype: 'text',
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 key: res.data.key, iv: res.data.iv
} }
} }
] ]
// this.set_sendSkillMessage(list) // 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) this.markTransScene(type)
item.type = 1 item.type = 1
this.sendGameLog(item) this.sendGameLog(item)
...@@ -941,14 +941,14 @@ export default { ...@@ -941,14 +941,14 @@ export default {
channel_key: item.channel_key channel_key: item.channel_key
}, },
text: { 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 key: res.data.key, iv: res.data.iv
} }
} }
] ]
// 这里需要特殊处理，因为有taskInfo参数 // 这里需要特殊处理，因为有taskInfo参数
// this.set_sendSkillMessage(list) // 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 item.type = 3
this.sendGameLog(item) this.sendGameLog(item)
}) })
......
src/views/components/quickSendGame/sendGame/selectChannel.vue
...@@ -211,11 +211,11 @@ export default { ...@@ -211,11 +211,11 @@ export default {
const list = [ const list = [
{ {
msgtype: 'text', 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.set_sendSkillMessage(list)
this.sendChatMessage(`账号:${username} \n密码:${res.data.encryptPassword}`, 'text') this.sendChatMessage(`账号:${username} \n密码:${res.data.password}`, 'text')
this.close() this.close()
}) })
.catch((err) => { .catch((err) => {
...@@ -252,14 +252,14 @@ export default { ...@@ -252,14 +252,14 @@ export default {
{ {
msgtype: 'text', msgtype: 'text',
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, key: res.data.key,
iv: res.data.iv iv: res.data.iv
} }
} }
] ]
// this.set_sendSkillMessage(list) // 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() this.close()
}) })
.catch((err) => { .catch((err) => {
......
src/views/components/quickSendGame/sendGame/sendSelectChannel.vue
...@@ -170,11 +170,11 @@ export default { ...@@ -170,11 +170,11 @@ export default {
// const list = [ // const list = [
// { // {
// msgtype: 'text', // 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.set_sendSkillMessage(list)
this.sendChatMessage(`账号:${username} \n密码:${res.data.encryptPassword}`, 'text') this.sendChatMessage(`账号:${username} \n密码:${res.data.password}`, 'text')
this.close() this.close()
}) })
.catch((err) => { .catch((err) => {
...@@ -211,13 +211,13 @@ export default { ...@@ -211,13 +211,13 @@ export default {
// { // {
// msgtype: 'text', // msgtype: 'text',
// 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 // key: res.data.key, iv: res.data.iv
// } // }
// } // }
// ] // ]
// this.set_sendSkillMessage(list) // 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() this.close()
}) })
.catch((err) => { .catch((err) => {
......
src/views/components/quickSendGame/vipTools.vue
...@@ -277,7 +277,7 @@ ...@@ -277,7 +277,7 @@
} }
const username = this.bindGameUserList.find(item => item.member_id == this.accountSelect).username const username = this.bindGameUserList.find(item => item.member_id == this.accountSelect).username
passwardEncryption({ member_id: this.accountSelect }).then(res => { 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 => { }).catch(err => {
this.sendChatMessage(`${str}${item.url} \n账号:${username}`, 'text') this.sendChatMessage(`${str}${item.url} \n账号:${username}`, 'text')
console.log(err) console.log(err)
......
src/views/components/roleInfo/approval.vue
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
v-infinite-scroll="paperScroll" v-infinite-scroll="paperScroll"
:infinite-scroll-disabled="!isMoreRecord" :infinite-scroll-disabled="!isMoreRecord"
:infinite-scroll-immediate="false" :infinite-scroll-immediate="false"
class="mailListScroll" class="approvalScroll"
> >
<!-- 举报申请 --> <!-- 举报申请 -->
<div class="scrollMain" v-if="reportList.length > 0"> <div class="scrollMain" v-if="reportList.length > 0">
...@@ -512,9 +512,9 @@ ...@@ -512,9 +512,9 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.approval-role-list { .approval-role-list {
width: 100%; width: 100%;
height: calc(100vh - 200px); height: 100%;
overflow: auto;
padding-top: 10px; padding-top: 10px;
overflow: auto;
.taskForm { .taskForm {
::v-deep .el-form-item { ::v-deep .el-form-item {
margin-bottom: 10px; margin-bottom: 10px;
...@@ -567,12 +567,9 @@ ...@@ -567,12 +567,9 @@
} }
} }
.mailListScroll { .approvalScroll {
width: 100%; width: 100%;
overflow-y: auto; height: auto;
overflow-x: hidden;
display: flex;
flex: 1;
.scrollMain { .scrollMain {
width: 100%; width: 100%;
height: auto; height: auto;
......
src/views/components/roleInfo/report.vue
...@@ -517,8 +517,8 @@ ...@@ -517,8 +517,8 @@
.reportList { .reportList {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow-y: auto;
overflow-x: hidden;
.taskForm { .taskForm {
::v-deep .el-form-item { ::v-deep .el-form-item {
margin-bottom: 10px; margin-bottom: 10px;
...@@ -573,15 +573,11 @@ ...@@ -573,15 +573,11 @@
.mailListScroll { .mailListScroll {
width: 100%; width: 100%;
height: calc(100% - 250px); height: auto;
overflow-y: auto;
overflow-x: hidden;
.scrollMain { .scrollMain {
width: 100%; width: 100%;
height: auto; height: auto;
margin-bottom: 40px; margin-bottom: 40px;
.reportContent { .reportContent {
width: calc(100% - 10px); width: calc(100% - 10px);
} }
......
src/views/components/roleInfo/roleInfo.vue
...@@ -196,6 +196,7 @@ ...@@ -196,6 +196,7 @@
height: 100%; height: 100%;
background: #fff; background: #fff;
margin-left: 2px; margin-left: 2px;
overflow: auto;
.detailsTitle { .detailsTitle {
width: 100%; width: 100%;
padding: 0 vw(20); padding: 0 vw(20);
...@@ -212,7 +213,7 @@ ...@@ -212,7 +213,7 @@
} }
.detailsContent { .detailsContent {
width: 100%; width: 100%;
height: calc(100vh - 186px); height: 100%;
overflow: auto; overflow: auto;
.textInfo { .textInfo {
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
......
src/views/components/skill/skillLibrary.vue
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
</div> </div>
<div v-else-if="answer.msgtype == 'image'" class="answerText rowFlex"> <div v-else-if="answer.msgtype == 'image'" class="answerText rowFlex">
<span class="title rowFlex">A{{ answerIndex + 1 }}:</span> <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> </div>
</div> </div>
......
src/views/giftRecord.vue
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
<div class="gift-tab-container-apply-gift"> <div class="gift-tab-container-apply-gift">
<el-tabs v-model="activeTab"> <el-tabs v-model="activeTab">
<el-tab-pane label="充值礼包" name="email"> <el-tab-pane label="充值礼包" name="email">
<email-gift></email-gift> <email-gift v-if="activeTab == 'email'"></email-gift>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="企微礼包" name="wx"> <el-tab-pane label="企微礼包" name="wx">
<wx-gift></wx-gift> <wx-gift v-if="activeTab == 'wx'"></wx-gift>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
...@@ -49,6 +49,10 @@ export default { ...@@ -49,6 +49,10 @@ export default {
height: 100%; height: 100%;
padding-top: 10px; padding-top: 10px;
background: #fff; background: #fff;
::v-deep .el-tabs__content{
height: calc(100% - 55px);
}
::v-deep .el-tabs { ::v-deep .el-tabs {
.el-tabs__header { .el-tabs__header {
...@@ -66,6 +70,7 @@ export default { ...@@ -66,6 +70,7 @@ export default {
color: #3491FA; color: #3491FA;
} }
} }
.el-tabs__active-bar { .el-tabs__active-bar {
background-color: #3491FA; background-color: #3491FA;
......
src/views/mailList.vue
<template> <template>
<div class="mail-list-container"> <div class="mail-list-container"
ref="mailListScroll"
v-scroll:50="loadMoreMail"
>
<!-- 搜索过滤区域 --> <!-- 搜索过滤区域 -->
<div class="search-header"> <div class="search-header">
<div class="search-row"> <div class="search-row">
...@@ -87,14 +90,12 @@ ...@@ -87,14 +90,12 @@
<!-- 通讯录列表 --> <!-- 通讯录列表 -->
<div <div
ref="mailListScroll" ref="mailListScroll"
v-infinite-scroll="loadMoreMail" v-scroll="loadMoreMail"
:infinite-scroll-disabled="!hasMore"
:infinite-scroll-immediate="false"
class="contact-list" class="contact-list"
> >
<div <div
v-for="(item, index) in mailList" v-for="(item, index) in mailList"
:key="item._id || index" :key="item._id+index"
class="contact-item" class="contact-item"
:class="{ active: item.external_userid === chatUserInfo.external_userid }" :class="{ active: item.external_userid === chatUserInfo.external_userid }"
> >
...@@ -126,13 +127,8 @@ ...@@ -126,13 +127,8 @@
<!-- 右侧操作区域 --> <!-- 右侧操作区域 -->
<div class="contact-actions"> <div class="contact-actions">
<!-- 待绑定标签 -->
<div v-if="item.red_tip == 1" class="unbind-tag">
待绑定
</div>
<!-- 发起会话按钮 --> <!-- 发起会话按钮 -->
<el-button <el-button
v-else
type="primary" type="primary"
size="small" size="small"
class="chat-btn" class="chat-btn"
...@@ -259,12 +255,11 @@ export default { ...@@ -259,12 +255,11 @@ export default {
...this.pagination, ...this.pagination,
userid: this.userid, userid: this.userid,
} }
// 根据搜索类型构建不同的参数 // 根据搜索类型构建不同的参数
if (this.searchType === 'remark') { if (this.searchType === 'remark') {
this.searchParams = { this.searchParams = {
...this.searchParams,
...baseParams, ...baseParams,
...this.searchParams
} }
} else if (this.searchType === 'w_account') { } else if (this.searchType === 'w_account') {
this.searchParams = { this.searchParams = {
...@@ -274,7 +269,6 @@ export default { ...@@ -274,7 +269,6 @@ export default {
} else { } else {
this.searchParams = baseParams this.searchParams = baseParams
} }
// 添加筛选参数 // 添加筛选参数
if (this.mailFilterType === 'unbind') { if (this.mailFilterType === 'unbind') {
this.searchParams.red_tip = 1 this.searchParams.red_tip = 1
...@@ -331,8 +325,11 @@ export default { ...@@ -331,8 +325,11 @@ export default {
// 加载更多通讯录 // 加载更多通讯录
loadMoreMail() { loadMoreMail() {
if (this.hasMore && !this.mailLoading) { if (this.hasMore && !this.mailLoading) {
console.log('loadMoreMail')
this.pagination.page++ this.pagination.page++
this.loadMailList() this.loadMailList()
}else{
console.log('没有更多数据了')
} }
}, },
...@@ -398,10 +395,9 @@ export default { ...@@ -398,10 +395,9 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.mail-list-container { .mail-list-container {
width: 100%;
background: #fff; background: #fff;
height: 100%; height: 100%;
display: flex;
flex-direction: column;
} }
// 搜索头部 // 搜索头部
......
src/views/orderList.vue
<template> <template>
<div class="order-info-list columnFlex"> <div class="order-info-list columnFlex">
<div class="content"> <div class="content">
<el-tabs v-model="activeTypeStr" @tab-click="handleTabClick" class="order-tabs"> <el-tabs v-model="activeTypeStr" @tab-click="handleTabClick" class="order-tabs">
<el-tab-pane v-for="(item, index) in orderTypeList" <el-tab-pane v-for="(item, index) in orderTypeList" :key="index" :label="item.label" :name="String(item.value)">
:key="index"
:label="item.label"
:name="String(item.value)">
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<!-- 订单的一些信息 -->
<div v-show="activeType!==3"> <!-- 订单的一些信息 -->
<div class="orderMoney rowFlex flexWarp"> <div v-show="activeType !== 3" class="order-info-content" v-scroll="requestOrderList">
<div class="orderMoneyItem rowFlex columnCenter" style="margin-right:20px;"> <div class="orderMoney rowFlex flexWarp">
<span>总支付金额：</span> <div class="orderMoneyItem rowFlex columnCenter" style="margin-right:20px;">
<p>¥{{ orderInfo.total_amount }}</p> <span>总支付金额：</span>
</div> <p>¥{{ orderInfo.total_amount }}</p>
<div class="orderMoneyItem rowFlex columnCenter" style="margin-right:20px;"> </div>
<span>实际充值金额:</span> <div class="orderMoneyItem rowFlex columnCenter" style="margin-right:20px;">
<p>¥{{ orderInfo.total_real_amount || 0 }}</p> <span>实际充值金额:</span>
</div> <p>¥{{ orderInfo.total_real_amount || 0 }}</p>
<div class="orderMoneyItem rowFlex columnCenter" style="margin-right:20px;"> </div>
<span>退款金额：</span> <div class="orderMoneyItem rowFlex columnCenter" style="margin-right:20px;">
<p>¥{{ orderInfo.total_refund_amount || 0 }}</p> <span>退款金额：</span>
</div> <p>¥{{ orderInfo.total_refund_amount || 0 }}</p>
<div class="orderMoneyItem rowFlex columnCenter"> </div>
<span>订单总数：</span> <div class="orderMoneyItem rowFlex columnCenter">
<p>{{ orderInfo.total }}</p> <span>订单总数：</span>
</div> <p>{{ orderInfo.total }}</p>
<!-- 王鑫说先隐藏 --> </div>
<div v-if="false" class="orderMoneyItem rowFlex columnCenter"> <!-- 王鑫说先隐藏 -->
<span>今天支付金额：</span> <div v-if="false" class="orderMoneyItem rowFlex columnCenter">
<p>¥{{ totalOrder.total }}</p> <span>今天支付金额：</span>
<p>¥{{ totalOrder.total }}</p>
</div>
<div v-if="false" class="orderMoneyItem rowFlex columnCenter">
<span>订单数：</span>
<p>{{ totalOrder.num }}</p>
</div>
</div> </div>
<div v-if="false" class="orderMoneyItem rowFlex columnCenter"> <div class="filterList">
<span>订单数：</span> <el-form class="filterList" label-position="top">
<p>{{ totalOrder.num }}</p> <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> <div class="orderDetailsScroll">
<div class="filterList"> <div v-if="orderList.length > 0">
<el-form class="filterList" label-position="top"> <div v-for="(item, index) in orderList" :key="index" class="orderDetails">
<el-form-item label="订单号:"> <div class="bridgeMain">
<el-input v-model="inputValue" placeholder="请输入订单号/交易单号" prefix-icon="el-icon-search" style="width: 100%" clearable @change="searchInput"></el-input> <p class="text">{{ item.pay_type_text || item.pay_type }}</p>
</el-form-item> <img :src="sanjiaoxing" class="bridge" />
<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> </div>
</div> <div class="orderDetailsTitle">
<p class="text">下单时间：{{ item.order_time }}</p> <!-- || item.pay_type=='抖音支付'去掉抖音支付补单操作 -->
</div> <div class="money rowFlex spaceBetween">
<div class="orderDetailsList"> <p class="text">订单金额：{{ item.amount }}</p>
<el-collapse v-model="collapseValue" @change="handleChange"> <div class="btns">
<el-collapse-item :name="item.order_id"> <span class="btn"
<template slot="title"> :class="[item.status == '已支付' ? 'btnsuccess' : '', item.status == '待支付' ? 'btnnot' : '']">{{
<p>订单号:{{ item.order_id }}</p> item.status }}</span>
<!-- <el-popover placement="top" trigger="hover" :content="item.order_id"> <span
<el-button slot="reference" type="text" @click.stop="">复制</el-button> v-if="item.status == '待支付' && (item.pay_type == '米大师支付' || item.pay_type === '应用宝米大师支付') && !item.is_request"
</el-popover> --> class="btn btnsuccess" @click="completionOrder(1, item.order_id, item)">补单</span>
</template> <span v-if="item.callback_status.indexOf('失败') != -1 && !item.is_request" class="btn"
<div class="item rowFlex columnCenter spaceBetween"> @click="completionOrder(2, item.order_id, item)">补回调</span>
<div class="rowFlex columnCenter"> <span v-if="!item.is_request" class="btn btnRefund" @click="refundMoney(item)">退款申请</span>
<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>
</div> </div>
</el-collapse-item> <p class="text">下单时间：{{ item.order_time }}</p>
</el-collapse> </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>
</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> <!-- 订单列表 -->
</div>
<!-- 退款订单的申请 -->
<orderRefund :show.sync="showRefund" title="退款申请" :info="refundInfo" />
</div> </div>
</template> <!-- 退款订单的申请 -->
<script> <orderRefund :show.sync="showRefund" title="退款申请" :info="refundInfo" />
import { orderList, memberView, completionOrder, selectSearch, todayOrder } from '@/api/game' </div>
import { mapMutations, mapActions, mapState } from 'vuex' </template>
import selectDate from '@/components/selectDate.vue' <script>
import selece from '@/components/select.vue' import { orderList, memberView, completionOrder, selectSearch, todayOrder } from '@/api/game'
import searchSelect from './components/order/searchUser.vue' import { mapMutations, mapActions, mapState } from 'vuex'
import orderRefund from './components/order/orderRefund.vue' import selectDate from '@/components/selectDate.vue'
import refundLog from './components/order/refundLog.vue' import selece from '@/components/select.vue'
import { throttle } from '@/utils' import searchSelect from './components/order/searchUser.vue'
import sanjiaoxing from '@/assets/icon/sanjiaoxing.svg' import orderRefund from './components/order/orderRefund.vue'
import noContent from '@/components/noContent.vue' import refundLog from './components/order/refundLog.vue'
export default { import { throttle } from '@/utils'
components: { import sanjiaoxing from '@/assets/icon/sanjiaoxing.svg'
searchSelect, import noContent from '@/components/noContent.vue'
refundLog, export default {
orderRefund, components: {
selece, searchSelect,
noContent, refundLog,
selectDate orderRefund,
}, selece,
data() { noContent,
return { selectDate
sanjiaoxing, },
loading: false, data() {
activeType: 4, return {
activeTypeStr: '4', sanjiaoxing,
dateDetailsValue: [], loading: false,
isloadMore: true, activeType: 4,
collapseValue: ['1'], activeTypeStr: '4',
orderTypeList: [ dateDetailsValue: [],
{ label: '全部订单', value: 4 }, isloadMore: true,
{ label: '已支付', value: 2 }, collapseValue: ['1'],
{ label: '未支付', value: 1 }, orderTypeList: [
{ label: '退款记录', value: 3 } { label: '全部订单', value: 4 },
], { label: '已支付', value: 2 },
orderList: [], { label: '未支付', value: 1 },
payList: [], { label: '退款记录', value: 3 }
pay_type: '', ],
inputValue: '', orderList: [],
role_id: [], payList: [],
orderInfo: { pay_type: '',
total: 0, inputValue: '',
total_amount: 0 role_id: [],
}, orderInfo: {
totalOrder: { total: 0,
total: '', total_amount: 0
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);
}, },
activeType(newVal) { totalOrder: {
this.activeTypeStr = String(newVal); total: '',
num: ''
}, },
accountSelect(newVal, oldVal) { timerData: {
if (newVal && newVal !== '' && this.activeType !== 3) { order_time_start: '',
this.pageInfo = { order_time_end: ''
page: 0, },
page_size: 20, searchDate: [],
total: 0 gameUserInfo: {
} recharge_total: 0,
this.isloadMore = true today_amount: 0
this.orderList = [] },
this.requestOrderList('msg') 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() { activeType(newVal) {
this.payTypeList() this.activeTypeStr = String(newVal);
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: { accountSelect(newVal, oldVal) {
// appid: "wx7810f536467dc161" if (newVal && newVal !== '' && this.activeType !== 3) {
// 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 = { this.pageInfo = {
page: 0, page: 0,
page_size: 20, page_size: 20,
...@@ -277,450 +251,544 @@ ...@@ -277,450 +251,544 @@
} }
this.isloadMore = true this.isloadMore = true
this.orderList = [] this.orderList = []
value !== '' ? (this.role_id = [value]) : (this.role_id = []) this.requestOrderList('msg')
this.requestOrderList() }
}, }
payTypeList() { },
const data = { mounted() {
type: 'pay_type', this.payTypeList()
value: '' this.searchDate = [
} this.$moment().subtract(1, 'day').format('YYYY-MM-DD'),
selectSearch(data).then((res) => { this.$moment().format('YYYY-MM-DD')
if (res.data.data) { ]
this.payList = res.data.data 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: {
searchInput() { // appid: "wx7810f536467dc161"
this.pageInfo = { // corp_id: "wweaefe716636df3d1"
page: 0, // external_userid: "wm5rUgMgAAG_vfF4AHClsrS1S6MImVsQ"
page_size: 20, // nickname: "梦幻人生"
total: 0 // 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() searchInput() {
}, this.pageInfo = {
payTypeResult(data) { page: 0,
this.pageInfo = { page_size: 20,
page: 0, total: 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.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 = { this.pageInfo = {
page: 0, page: 0,
page_size: 20, page_size: 20,
total: 0 total: 0
} }
this.isloadMore = true
this.orderList = [] this.orderList = []
this.requestOrderList() this.requestOrderList()
// this.gameMemberView() }
}, },
refundMoney(item) { handleChange(val) {
this.refundInfo = { ...item, ...this.userInfo } console.log(val)
this.showRefund = true },
}, requestTodayMoney(data) {
completionOrder(type, id, item) { todayOrder(data).then((res) => {
if (item.is_request) { this.totalOrder = res.data
this.$message.warning('该订单有在进行中的退款申请，请点击下方退款记录查看') })
return },
} requestOrderList: throttle(function (msg) {
// type: 1 补单 2 补回调 console.log(12313, '开始展示',this.isloadMore)
const data = { if (this.accountSelect == '') {
type: type, this.$message.warning('暂无关联的账号，请先去关联账号!')
order_id: id, return false
user_name: this.userInfo.username }
} if (!this.isloadMore && !msg) {
completionOrder(data).then((res) => { // this.$message.warning('没有更多数据了')
if (res.status_code == 1) { console.log('没有更多数据了')
this.$message.success(res.msg) return false
setTimeout(() => { }
this.requestOrderList() this.loading = true
}, 2000) 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
} }
}) res.data.data.map((item, index) => {
}, item.pay_type_text = item.pay_type.substring(0, item.pay_type.length - 2)
// gameMemberView(item) { })
// if (this.accountSelect == '') { this.orderList = this.orderList.concat(res.data.data)
// this.$message.warning('暂无关联的账号，请先去关联账号!') if (res.data.page_info) {
// return false this.orderInfo = res.data.page_info
// }
// 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
} }
this.orderList = [] if (res.status_code == 1) {
this.requestOrderList() if (!msg) {
} this.$message.success(res.msg)
},
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)
}
} }
},
(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> .content {
.order-info-list {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #fff; overflow: auto;
position: relative; overflow-x: hidden;
overflow: hidden; ::v-deep .el-tabs{
.refundLog{ height: auto;
}
::v-deep .el-tab-pane{
height: auto;
}
::v-deep .el-tabs__content{
height: auto !important;
}
.order-info-content {
width: 100%; width: 100%;
height: 100%; height: calc(100% - 60px);
overflow: auto;
overflow-x: hidden;
} }
.detailsTitle {
.tabSelect {
width: 100%; width: 100%;
padding: 0 vw(20); height: 32px;
height: 60px;
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
border-bottom: 1px solid #ebeef5; border-bottom: 1px solid #ebeef5;
border-left: 1px solid #ebeef5; cursor: pointer;
p {
.tabSelectItem {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333; 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%; width: 100%;
height: 100%; height: auto;
overflow: auto; font-size: 14px;
overflow-x: hidden; font-weight: 400;
.tabSelect { color: #333333;
padding: 6px 0;
transition: all 0.5s;
position: relative;
padding-left: 10px;
cursor: pointer;
div {
width: 100%; width: 100%;
height: 32px; }
border-bottom: 1px solid #ebeef5;
cursor: pointer; .tableImage {
.tabSelectItem { 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-size: 14px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: #333333;
cursor: pointer;
line-height: 32px;
} }
.tabSelectItemActive {
p {
font-size: 22px;
color: #409EFF; color: #409EFF;
border-bottom: 2px solid #409EFF;
} }
} }
.contentItem { }
position: relative;
.title { .filterList {
position: absolute; margin-bottom: 10px;
left: 10px;
top: 14px; .filterListInput {
font-size: 14px; width: 60%;
color: #999999; margin-left: 15px;
} margin-bottom: 10px;
} }
.item {
width: 100%; .filterListDate {
height: auto; width: 150px;
font-size: 14px; margin-bottom: 10px;
font-weight: 400; }
color: #333333;
padding: 6px 0; ::v-deep .search-item .item-label {
transition: all 0.5s; margin-right: 20px;
position: relative; }
padding-left: 10px; }
cursor: pointer;
div { .orderDetailsScroll {
width: 100%; width: 100%;
} height: auto;
.tableImage { }
width: 40px;
height: 40px; .orderDetails {
border-radius: 6px; width: 100%;
margin-right: vw(10); height: auto;
} margin-bottom: 20px;
.label { position: relative;
color: #999999;
min-width: 60px; .bridgeMain {
} position: absolute;
top: 0px;
right: 0px;
width: 50px;
height: 50px;
.text { .text {
color: #333333; font-size: 12px;
margin-left: 10px; font-family: PingFangSC-Regular, PingFang SC;
word-break: break-all; 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; position: absolute;
top: 0;
right: 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 { .orderDetailsTitle {
width: calc(100%); width: 100%;
// margin-left: -20px; height: 70px;
padding: 10px 0; background: #f9faff;
.orderMoneyItem { padding: 10px;
text-align: center;
margin-top: 12px; .money {
span { width: 100%;
font-size: 14px; height: auto;
font-family: PingFangSC-Medium, PingFang SC; margin-bottom: 12px;
font-weight: 500; 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; 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; color: #409EFF;
border: none;
}
.btnRefund {
background: #fff;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #00A6F0;
border-color: #00A6F0;
} }
} }
}
.filterList { .text {
margin-bottom: 10px; font-size: 14px;
.filterListInput { font-family: PingFangSC-Regular, PingFang SC;
width: 60%; font-weight: 400;
margin-left: 15px; color: #333333;
margin-bottom: 10px;
}
.filterListDate {
width: 150px;
margin-bottom: 10px;
}
::v-deep .search-item .item-label {
margin-right: 20px;
} }
} }
.orderDetailsScroll {
width: 100%; .orderDetailsList {
}
.orderDetails {
width: 100%; width: 100%;
height: auto; height: auto;
margin-bottom: 20px; background: #ffffff;
border: 1px solid #ebeef5;
padding: 5px 0;
position: relative; position: relative;
.bridgeMain {
position: absolute; ::v-deep .el-collapse-item__header {
top: 0px; line-height: 20px;
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;
}
} }
.orderDetailsList {
width: 100%; .titleFix {
height: auto; position: absolute;
background: #ffffff; left: 10px;
border: 1px solid #ebeef5; top: 20px;
padding: 5px 0; color: #999999;
position: relative;
::v-deep .el-collapse-item__header{
line-height: 20px;
}
.titleFix {
position: absolute;
left: 10px;
top: 20px;
color: #999999;
}
} }
} }
} }
} }
.order-tabs { }
.order-tabs {
::v-deep .el-tabs__header {
margin-bottom: 15px; margin-bottom: 15px;
}
::v-deep .el-tabs__header {
margin-bottom: 15px;
}
::v-deep .el-tabs__item {
::v-deep .el-tabs__item { height: 40px;
height: 40px; line-height: 40px;
line-height: 40px; font-size: 14px;
font-size: 14px;
&.is-active {
&.is-active { color: #3491FA;
color: #3491FA; font-weight: 500;
font-weight: 500;
}
}
::v-deep .el-tabs__active-bar {
background-color: #3491FA;
} }
} }
</style>
::v-deep .el-tabs__active-bar {
\ No newline at end of file background-color: #3491FA;
}
}
</style>
\ No newline at end of file
src/views/userInfo/components/Info.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div <div
class="userDetailsPanel columnFlex" class="userDetailsPanel columnFlex"
> >
<div class="content"> <div class="content" v-loading="viewLoading">
<div v-if="chatUserDetails.is_phishing_account==1" class="warnText"> <div v-if="chatUserDetails.is_phishing_account==1" class="warnText">
<p>高风险玩家,请立即通知组长！！！！</p> <p>高风险玩家,请立即通知组长！！！！</p>
<p>①千万不能推转游！！不要发送违禁词汇！！不要发送礼包和告知任何礼包信息！！</p> <p>①千万不能推转游！！不要发送违禁词汇！！不要发送礼包和告知任何礼包信息！！</p>
...@@ -266,7 +266,8 @@ import { getToken,removeToken } from '@/utils/auth' ...@@ -266,7 +266,8 @@ import { getToken,removeToken } from '@/utils/auth'
...mapState('game', [ ...mapState('game', [
'accountSelect', 'accountSelect',
'gameUserInfo', 'gameUserInfo',
'bindGameUserList' 'bindGameUserList',
'viewLoading'
]), ]),
...mapState('user', ['cser_info', 'cser_id', 'cser_name', 'corp_id', 'external_userid', 'userid', 'client_online_status']), ...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 { ...@@ -80,7 +80,6 @@ export default {
::v-deep .el-tabs__content { ::v-deep .el-tabs__content {
height: calc(100% - 55px); height: calc(100% - 55px);
overflow-y: auto;
} }
} }
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论