Skip to content

C
company_app
提交 0c77d7c8 作者: 毛细亚
操作

准备明天上线的内容

上级 d1c161d2
正在显示 包含 902 行增加 和 312 行删除
company_app/index.html
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><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.d9997098.js"></script><link href="static/css/chunk-vendors.8e901099.css" rel="stylesheet"><link href="static/css/app.1a206877.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but company_app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
\ No newline at end of file
<!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.8d93f428.js"></script><link href="static/css/chunk-vendors.8e901099.css" rel="stylesheet"><link href="static/css/app.b2aba196.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but company_app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
\ No newline at end of file
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,7 +20,8 @@ import globalComponent from '@/components/register.js'
import loadmore from '@/directive/loadmore/index.js' // 加载更多
import clickagain from './directive/clickagain'
import permission from '@/directive/permission/index.js' // 权限判断指令
Vue.use(globalComponent).use(permission).use(clickagain).use(loadmore)
import scroll from '@/directive/scroll' // 下拉加载更多指令
Vue.use(globalComponent).use(permission).use(clickagain).use(loadmore).use(scroll)
// 导入 VConsole 清理工具
import '@/utils/vconsoleCleanup'
......
src/store/modules/game.js
......@@ -16,6 +16,7 @@ const state = {
gameUserInfo:{},
send_game_log: null, // 转游发送渠道新增日志发送信息
chatUserInfo: {}, // 当前选中的用户的详情
viewLoading:false, // 查看用户详情的时候 加载状态
}
const mutations = {
......@@ -39,6 +40,9 @@ const mutations = {
},
set_send_game_log(state, data) {
state.send_game_log = data
},
set_viewLoading(state, data) {
state.viewLoading = data
}
}
......
src/styles/index.scss
......@@ -86,6 +86,22 @@ div:focus {
height: 1px;
background-color: #e4e7ed;
}
.el-tabs{
height:100%;
}
.el-tabs__content{
height: 100%;
}
.el-tab-pane{
height: 100%;
}
.el-tabs .el-tabs__header{
margin: 0;
// height: 60px;
}
.el-tabs__nav-next, .el-tabs__nav-prev{
line-height: 50px;
}
/* 统一下拉框高度 */
.el-select-dropdown__item {
......
src/views/ViolationRecord.vue
......@@ -259,15 +259,15 @@ export default {
<style lang="scss" scoped>
.violationRecord {
width: 100%;
height: calc(100vh - 170px);
height: 100%;
background: #fff;
overflow-y: auto;
overflow-x: hidden;
.violationRecordContent {
width: 100%;
padding: 20px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
height: auto;
}
.contentItem {
......
src/views/components/ApplyRecords/errorHandle.vue
......@@ -302,7 +302,6 @@ export default {
background: #fff;
margin-left: 2px;
position: relative;
overflow: hidden;
.detailsTitle {
width: 100%;
padding: 0 vw(20);
......@@ -321,6 +320,8 @@ export default {
width: 100%;
height:100%;
padding: 20px 10px;
overflow: auto;
overflow-x: hidden;
.tabSelect{
width: 100%;
height: 60px;
......@@ -342,8 +343,7 @@ export default {
}
.list{
width: 100%;
height: calc(100% - 90px);
overflow: auto;
height: auto;
}
.contentItem{
position: relative;
......@@ -456,9 +456,6 @@ export default {
}
.orderDetailsScroll{
width: 100%;
height: calc(100% - 20px);
overflow: auto;
overflow-x: hidden;
.orderDetailsScrollContent{
margin-bottom: 50px;
}
......
src/views/components/bindGameAccount/bindUserList.vue
......@@ -74,7 +74,8 @@ export default {
...mapMutations('game', [
'set_accountSelect',
'set_chatUserInfo',
'set_gameUserInfo'
'set_gameUserInfo',
'set_viewLoading'
]),
...mapActions('game', ['gameBindUser']),
handleChange(value) {
......@@ -89,17 +90,19 @@ export default {
},
gameMemberView(item) {
if (this.accountSelect && this.accountSelect !== '') {
this.set_viewLoading(true)
const data = { member_id: this.accountSelect, need_channel: 1, need_roleInfo: 1, need_banned: 1 }
memberView(data).then((res) => {
this.set_viewLoading(false)
if (res.status_code === 1) {
this.set_gameUserInfo(res.data)
} else {
this.set_gameUserInfo({})
}
}, (err) => {
this.set_viewLoading(false)
this.set_gameUserInfo({})
})
}
},
logout(){
......
src/views/components/giftRecord/emailGift.vue
<template>
<div class="detailsGiftApply columnFlex">
<div class="detailsGiftApplyContent">
<div class="detailsGiftApplyTitle rowFlex spaceBetween columnCenter">
<!-- <p>充值礼包</p> -->
<span></span>
<el-button
type="primary"
size="small"
@click="showApplyGift = true"
>礼包申请</el-button>
<el-button type="primary" size="small" @click="showApplyGift = true">礼包申请</el-button>
</div>
<div class="detailsGiftApplyContent">
<!-- 过滤条件 -->
<el-form class="filterList" label-position="top" :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>
<i :class="isCollapsed ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" class="collapse-icon"
@click="toggleCollapse"></i>
</div>
<el-form-item label="主游戏">
<el-select
v-model.trim="form.main_game_id"
filterable
remote
clearable
reserve-keyword
placeholder="请输入主游戏名"
style="width:100%;"
:remote-method="remoteMethod"
:loading="loading"
@change="searchInput"
@focus="gameNameList=optionsList"
>
<el-option
v-for="item in gameNameList"
:key="item.value"
:label="item.label"
:value="item.value"
>
<el-select v-model.trim="form.main_game_id" filterable remote clearable reserve-keyword
placeholder="请输入主游戏名" style="width:100%;" :remote-method="remoteMethod" :loading="loading"
@change="searchInput" @focus="gameNameList = optionsList">
<el-option v-for="item in gameNameList" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="区服">
<el-select
v-model.trim="form.zyou_server_id"
filterable
remote
multiple
reserve-keyword
style="width:100%;"
placeholder="请先选择主游戏"
:remote-method="remoteMethodServer"
:loading="loading"
@change="searchInput"
>
<el-option
v-for="item in serverNameList"
:key="item.id"
:label="item.label"
:value="item.value"
>
<el-select v-model.trim="form.zyou_server_id" filterable remote multiple reserve-keyword style="width:100%;"
placeholder="请先选择主游戏" :remote-method="remoteMethodServer" :loading="loading" @change="searchInput">
<el-option v-for="item in serverNameList" :key="item.id" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="角色名称">
<el-input
v-model="form.role_name_or_cp_id"
placeholder="请输入角色名称"
style="width:100%;"
@change="searchInput"
></el-input>
<el-input v-model="form.role_name_or_cp_id" placeholder="请输入角色名称" style="width:100%;"
@change="searchInput"></el-input>
</el-form-item>
<el-form-item label="礼包标题">
<el-input
v-model="form.active_title"
placeholder="请输入礼包名称"
style="width:100%;"
@change="searchInput"
></el-input>
<el-input v-model="form.active_title" placeholder="请输入礼包名称" style="width:100%;"
@change="searchInput"></el-input>
</el-form-item>
</el-form>
<el-tabs
v-model="form.gift_type"
class="tabStyle"
@tab-click="tabChange"
>
<el-tab-pane
v-for="(item,index) in giftTypeList"
:key="index"
:label="item.label"
:name="item.value"
></el-tab-pane>
<el-tabs v-model="form.gift_type" class="tabStyle" @tab-click="tabChange">
<el-tab-pane v-for="(item, index) in giftTypeList" :key="index" :label="item.label"
:name="item.value"></el-tab-pane>
</el-tabs>
<!-- 订单列表 -->
<div
v-infinite-scroll="requestemailGiftList"
v-loading="listLoading"
:infinite-scroll-disabled="!isloadMore"
class="email-gift-main-scroll"
>
<div
v-if="emailGiftList.length>0"
style="height:auto;"
>
<div
v-for="(item,index) in emailGiftList"
:key="index"
class="orderDetails"
>
<div v-infinite-scroll="requestemailGiftList" v-loading="listLoading" :infinite-scroll-disabled="!isloadMore"
class="email-gift-main-scroll">
<div v-if="emailGiftList.length > 0" style="height:auto;">
<div v-for="(item, index) in emailGiftList" :key="index" class="orderDetails">
<div class="orderDetailsTitle">
<div class="rowFlex spaceBetween columnCenter">
<div>
......@@ -118,89 +54,50 @@
<p class="text hidden"><label>充值金额:</label> ¥{{ item.amount }}</p>
<p class="text hidden"><label>充值日期:</label> {{ item.apply_recharge_date }}</p>
</div>
<i
v-if="item.showDetails"
class="el-icon-arrow-down iconStyle"
@click="closePage(item,index)"
></i>
<i
v-else
class="el-icon-arrow-right iconStyle"
@click="openPage(item,index)"
></i>
<i v-if="item.showDetails" class="el-icon-arrow-down iconStyle" @click="closePage(item, index)"></i>
<i v-else class="el-icon-arrow-right iconStyle" @click="openPage(item, index)"></i>
</div>
<el-collapse-transition>
<div v-if="item.showDetails">
<p
v-if="item.status=='待提交'"
class="text"
><label>状态：</label> <span class="noSend">{{ item.status }}</span> </p>
<p
v-else-if="item.status=='已提交'"
class="text"
><label>状态：</label> <span class="sended">{{ item.status }}</span> </p>
<p
v-else-if="item.status=='已驳回'"
class="text"
><label>状态：</label> <span class="sendFail">{{ item.status }}</span> </p>
<p v-if="item.status == '待提交'" class="text"><label>状态：</label> <span class="noSend">{{ item.status
}}</span> </p>
<p v-else-if="item.status == '已提交'" class="text"><label>状态：</label> <span class="sended">{{
item.status }}</span> </p>
<p v-else-if="item.status == '已驳回'" class="text"><label>状态：</label> <span class="sendFail">{{
item.status }}</span> </p>
<p class="text"><label>申请时间：</label> {{ item.create_time }} </p>
<p class="text"><label>提交时间：</label> {{ item.confirm_time }} </p>
<label
style="margin-right:10px;margin-top:3px;"
class="text"
> <label>奖品信息：</label> </label>
<div
v-for="items in item.level_attribute"
:key="items.rule_id"
class="columnCenter userInfoStyle"
style="border-top: 1px solid rgb(196 205 226);margin-top: 5px;"
>
<div
class="contentConfirmItem rowFlex spaceBetween"
style="padding-left:0;margin-top:10px;"
>
<label style="margin-right:10px;margin-top:3px;" class="text"> <label>奖品信息：</label> </label>
<div v-for="items in item.level_attribute" :key="items.rule_id" class="columnCenter userInfoStyle"
style="border-top: 1px solid rgb(196 205 226);margin-top: 5px;">
<div class="contentConfirmItem rowFlex spaceBetween" style="padding-left:0;margin-top:10px;">
<p class="title">{{ items.prize_level_name }}</p>
<p v-if="items.compare_amount">
{{ items.compare_amount ? Number(items.compare_amount)/100 + (item.exchange_score_status==1?'积分':'金额') : items.compare_amount }}<span> * {{ items.apply_num }}
{{ items.compare_amount ? Number(items.compare_amount) / 100 +
(item.exchange_score_status == 1 ? '积分' : '金额') : items.compare_amount }}<span> * {{ items.apply_num
}}
</span></p>
</div>
<!-- 固定奖 -->
<div v-if="items.prize_default">
<div class="contentConfirmItem">
<p class="title">固定奖 <span v-if="item.exchange_score_status == 1">{{ items.apply_num ? '*' + items.apply_num : '' }}</span></p>
<div
v-for="(prize,prizeIndex) in items.prize_default"
:key="prizeIndex"
class="contentConfirmItem rowFlex "
>
<p class="title">固定奖 <span v-if="item.exchange_score_status == 1">{{ items.apply_num ? '*' +
items.apply_num : '' }}</span></p>
<div v-for="(prize, prizeIndex) in items.prize_default" :key="prizeIndex"
class="contentConfirmItem rowFlex ">
<p class="info"> {{ prize.name }}</p>
<p
class="info"
style="margin-left:40px;"
>ID: {{ prize.prize_id }}</p>
<p class="info" style="margin-left:40px;">ID: {{ prize.prize_id }}</p>
</div>
</div>
</div>
<!-- 自选奖 -->
<div
v-if="items.prize_auto"
class="contentConfirmItem"
>
<div v-if="items.prize_auto" class="contentConfirmItem">
<p class="title">自选奖 ({{ items.prize_auto.length }}选{{ items.prize_auto_num }})</p>
<div
v-for="(prize,prizeIndex) in items.prize_auto"
:key="prizeIndex"
class="contentConfirmItem "
>
<div
v-for="(auto,autoIndex) in prize.group"
:key="autoIndex"
>
<div
v-if="prize.apply_num > 0"
class="rowFlex spaceBetween"
>
<div v-for="(prize, prizeIndex) in items.prize_auto" :key="prizeIndex"
class="contentConfirmItem ">
<div v-for="(auto, autoIndex) in prize.group" :key="autoIndex">
<div v-if="prize.apply_num > 0" class="rowFlex spaceBetween">
<span>{{ auto.name }}</span>
<span> ID:{{ auto.prize_id }}</span>
<div>*{{ prize.apply_num }}</div>
......@@ -210,21 +107,16 @@
</div>
<!-- 返利 -->
<div v-if="item.rebate_ratio_amount" class="contentConfirmItem">
<p class="rowFlex spaceBetween"> <span>返利:¥ {{ item.rebate_ratio_amount }}</span> <span>1:{{ items.rebate_ratio_rate }}</span> </p>
<p class="rowFlex spaceBetween"> <span>返利:¥ {{ item.rebate_ratio_amount }}</span> <span>1:{{
items.rebate_ratio_rate }}</span> </p>
</div>
</div>
<div v-if="item.prize && item.prize.length>0">
<div
v-for="(prize,prizeIndex) in item.prize"
:key="prizeIndex"
class="contentConfirmItem rowFlex "
>
<div v-if="item.prize && item.prize.length > 0">
<div v-for="(prize, prizeIndex) in item.prize" :key="prizeIndex"
class="contentConfirmItem rowFlex ">
<p class="info"> {{ prize.name }}</p>
<p
class="info"
style="margin-left:40px;"
>ID: {{ prize.prize_id }}</p>
<p class="info" style="margin-left:40px;">ID: {{ prize.prize_id }}</p>
</div>
</div>
</div>
......@@ -232,32 +124,24 @@
</div>
</div>
</div>
<div
v-else-if="!listLoading && emailGiftList.length==0"
class="noContent rowFlex allCenter"
>
<noContent/>
<div v-else-if="!listLoading && emailGiftList.length == 0" class="noContent rowFlex allCenter">
<noContent />
</div>
</div>
</div>
<!-- 申请礼包 -->
<applyGift
v-if="showApplyGift"
:show.sync="showApplyGift"
title="礼包申请"
@requestData="requestData"
/>
<applyGift v-if="showApplyGift" :show.sync="showApplyGift" title="礼包申请" @requestData="requestData" />
</div>
</template>
<script>
import { emailGiftList, memberView, completionOrder, selectSearch } from '@/api/game'
import { mapMutations, mapActions, mapState } from 'vuex'
import { removeDp, debounce } from '@/utils/index'
// import { roleList, memberView, zyouBind, selectSearch } from '@/api/game'
import applyGift from './applyGift.vue'
import selectDate from '@/components/selectDate.vue'
export default {
</template>
<script>
import { emailGiftList, memberView, completionOrder, selectSearch } from '@/api/game'
import { mapMutations, mapActions, mapState } from 'vuex'
import { removeDp, debounce } from '@/utils/index'
// import { roleList, memberView, zyouBind, selectSearch } from '@/api/game'
import applyGift from './applyGift.vue'
import selectDate from '@/components/selectDate.vue'
export default {
components: {
selectDate,
applyGift
......@@ -321,7 +205,7 @@
this.isloadMore = true
this.requestemailGiftList()
},
tabChange: debounce(function() {
tabChange: debounce(function () {
this.pageInfo.page = 0
this.emailGiftList = []
this.isloadMore = true
......@@ -431,16 +315,17 @@
this.isCollapsed = !this.isCollapsed
}
}
}
</script>
<style lang="scss" scoped>
.detailsGiftApply {
}
</script>
<style lang="scss" scoped>
.detailsGiftApply {
width: 100%;
height: calc(100vh - 180px);
height: 100%;
background: #fff;
position: relative;
overflow-y: hidden;
::v-deep .el-tabs__nav-next,::v-deep .el-tabs__nav-prev{
::v-deep .el-tabs__nav-next,
::v-deep .el-tabs__nav-prev {
line-height: 50px;
}
......@@ -451,14 +336,29 @@
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
p {
color: #333333;
}
}
.detailsGiftApplyContent {
width: 100%;
height: calc(100% - 100px);
height: 100%;
padding: 0 10px;
overflow: auto;
overflow-x: hidden;
::v-deep .el-tabs__content{
height: auto;
}
::v-deep .el-tabs{
height: auto;
}
.noContent{
margin-top: 50px;
}
.item {
width: 100%;
height: auto;
......@@ -470,6 +370,7 @@
position: relative;
padding-left: 10px;
cursor: pointer;
div {
width: 100%;
}
......@@ -477,18 +378,21 @@
.label {
color: #999999;
}
.text {
color: #333333;
margin-left: 10px;
word-break: break-all;
max-width: 80%;
}
.icon {
display: none;
position: absolute;
right: 0;
top: 12px;
}
.dianFail {
display: inline-block;
width: 8px;
......@@ -496,6 +400,7 @@
background: #f45454;
border-radius: 5px;
}
.dian {
display: inline-block;
width: 8px;
......@@ -503,6 +408,7 @@
background: #409EFF;
border-radius: 5px;
}
.dian2 {
display: inline-block;
width: 8px;
......@@ -517,22 +423,26 @@
height: 80px;
// margin-left: -20px;
padding: 10px 0;
.orderMoneyItem {
width: 50%;
text-align: center;
margin-top: 5px;
span {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
p {
font-size: 22px;
color: #409EFF;
}
}
}
.filterList {
margin-bottom: 10px;
position: relative;
......@@ -581,32 +491,35 @@
text-align: center;
display: inline-block;
}
.filterListInput {
width: 60%;
margin-left: 15px;
margin-bottom: 10px;
}
.filterListDate {
width: 150px;
margin-bottom: 10px;
}
}
.email-gift-main-scroll {
width: 100%;
height: calc(100% - 200px);
overflow: auto;
overflow-x: hidden;
height: auto;
.orderDetails {
width: 100%;
height: auto;
margin-bottom: 10px;
position: relative;
.bridgeMain {
position: absolute;
top: 0px;
right: 0px;
width: 50px;
height: 50px;
.text {
font-size: 8px;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -620,6 +533,7 @@
width: 50px;
text-align: center;
}
.bridge {
font-size: 50px;
position: absolute;
......@@ -633,19 +547,23 @@
height: auto;
background: #f9faff;
padding: 10px;
.iconStyle {
font-size: 18px;
cursor: pointer;
color: #409EFF;
}
.money {
width: 100%;
height: auto;
margin-bottom: 12px;
margin-top: 4px;
.btns {
padding-right: 40px;
}
.btn {
background: #fff;
border-radius: 4px;
......@@ -656,6 +574,7 @@
color: #333333;
cursor: pointer;
}
.btnnot {
background: #ffdddd;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -663,6 +582,7 @@
color: #f56c6c;
border: none;
}
.btnsuccess {
background: #e1fff0;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -671,6 +591,7 @@
border: none;
}
}
.text {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -678,23 +599,27 @@
color: #333333;
line-height: 26px;
margin-right: 10px;
label {
color: #999999;
}
}
}
.orderDetailsList {
width: 100%;
height: auto;
background: #f9faff;
padding: 5px 0;
position: relative;
.text {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 20px;
label {
color: #999999;
}
......@@ -704,11 +629,13 @@
}
}
.tabStyle {
::v-deep .el-tabs__item {
padding: 0 10px;
}
}
.email-gift-main-scroll {
::v-deep .el-tabs__item {
line-height: 26px;
......@@ -718,15 +645,18 @@
/* 已移除局部 el-collapse 样式，使用全局样式 */
}
.inputItem {
margin-bottom: 10px;
}
}
.contentConfirmItem {
}
.contentConfirmItem {
width: 100%;
height: auto;
background: #f9faff;
margin-top: 10px;
.title {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
......@@ -734,6 +664,7 @@
color: #333333;
line-height: 20px;
}
.info {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -741,16 +672,18 @@
color: #666666;
margin-top: 10px;
}
}
.expendIcon {
}
.expendIcon {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
text-align: center;
margin-top: 20px;
}
.dialog-footer {
}
.dialog-footer {
width: calc(100% - 20px);
height: 52px;
position: absolute;
......@@ -759,12 +692,14 @@
padding-top: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
justify-content: flex-end;
.btn {
width: 84px;
height: 32px;
}
}
.allIcon {
}
.allIcon {
width: 137px;
height: 20px;
background: #f2ac51;
......@@ -773,6 +708,5 @@
left: 50%;
transform: translateX(-50%);
bottom: 80px;
}
</style>
\ No newline at end of file
}
</style>
\ No newline at end of file
src/views/components/giftRecord/wxGift.vue
......@@ -95,7 +95,7 @@ import Clipboard from 'clipboard'
<style lang="scss" scoped>
.wx-gift-container {
height: calc(100vh - 230px);
height: 100%;
width: 100%;
background-color: #fff;
......
src/views/components/order/refundLog.vue
<template>
<div class="detailsRefund columnFlex">
<div class="content refundContent">
<div class="refundContent">
<div class="filter-container">
<el-form class="filter-form" label-position="top" label-width="auto" :class="{ 'collapsed-form': isCollapsed }">
<div class="filter-header">
......@@ -501,11 +501,11 @@
}
}
.content {
.refundContent {
width: 100%;
height: 100%;
padding-top: 20px;
overflow: auto;
overflow-x: hidden;
.tabSelect {
width: 100%;
height: 60px;
......@@ -643,9 +643,7 @@
}
.detailsRefundScroll {
width: 100%;
height: calc(100% - 250px);
overflow: auto;
overflow-x: hidden;
height: auto;
padding-right: 10px;
border-radius: 5px;
}
......@@ -806,9 +804,6 @@
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;
......@@ -842,7 +837,7 @@
.el-form-item {
margin-bottom: 15px;
width: 48%;
width: 100%;
margin-right: 2%;
display: inline-block;
vertical-align: top;
......
src/views/components/roleInfo/approval.vue
......@@ -84,7 +84,7 @@
v-infinite-scroll="paperScroll"
:infinite-scroll-disabled="!isMoreRecord"
:infinite-scroll-immediate="false"
class="mailListScroll"
class="approvalScroll"
>
<!-- 举报申请 -->
<div class="scrollMain" v-if="reportList.length > 0">
......@@ -512,9 +512,9 @@
<style lang="scss" scoped>
.approval-role-list {
width: 100%;
height: calc(100vh - 200px);
overflow: auto;
height: 100%;
padding-top: 10px;
overflow: auto;
.taskForm {
::v-deep .el-form-item {
margin-bottom: 10px;
......@@ -567,12 +567,9 @@
}
}
.mailListScroll {
.approvalScroll {
width: 100%;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex: 1;
height: auto;
.scrollMain {
width: 100%;
height: auto;
......
src/views/components/roleInfo/report.vue
......@@ -517,8 +517,8 @@
.reportList {
width: 100%;
height: 100%;
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
.taskForm {
::v-deep .el-form-item {
margin-bottom: 10px;
......@@ -573,15 +573,11 @@
.mailListScroll {
width: 100%;
height: calc(100% - 250px);
overflow-y: auto;
overflow-x: hidden;
height: auto;
.scrollMain {
width: 100%;
height: auto;
margin-bottom: 40px;
.reportContent {
width: calc(100% - 10px);
}
......
src/views/components/roleInfo/roleInfo.vue
......@@ -196,6 +196,7 @@
height: 100%;
background: #fff;
margin-left: 2px;
overflow: auto;
.detailsTitle {
width: 100%;
padding: 0 vw(20);
......@@ -212,7 +213,7 @@
}
.detailsContent {
width: 100%;
height: calc(100vh - 186px);
height: 100%;
overflow: auto;
.textInfo {
font-family: PingFangSC-Regular, PingFang SC;
......
src/views/giftRecord.vue
......@@ -2,10 +2,10 @@
<div class="gift-tab-container-apply-gift">
<el-tabs v-model="activeTab">
<el-tab-pane label="充值礼包" name="email">
<email-gift></email-gift>
<email-gift v-if="activeTab == 'email'"></email-gift>
</el-tab-pane>
<el-tab-pane label="企微礼包" name="wx">
<wx-gift></wx-gift>
<wx-gift v-if="activeTab == 'wx'"></wx-gift>
</el-tab-pane>
</el-tabs>
</div>
......@@ -50,6 +50,10 @@ export default {
padding-top: 10px;
background: #fff;
::v-deep .el-tabs__content{
height: calc(100% - 55px);
}
::v-deep .el-tabs {
.el-tabs__header {
margin: 0;
......@@ -67,6 +71,7 @@ export default {
}
}
.el-tabs__active-bar {
background-color: #3491FA;
height: 3px;
......
src/views/mailList.vue
......@@ -126,13 +126,8 @@
<!-- 右侧操作区域 -->
<div class="contact-actions">
<!-- 待绑定标签 -->
<div v-if="item.red_tip == 1" class="unbind-tag">
待绑定
</div>
<!-- 发起会话按钮 -->
<el-button
v-else
type="primary"
size="small"
class="chat-btn"
......
src/views/orderList.vue
......@@ -2,14 +2,9 @@
<div class="order-info-list columnFlex">
<div class="content">
<el-tabs v-model="activeTypeStr" @tab-click="handleTabClick" class="order-tabs">
<el-tab-pane v-for="(item, index) in orderTypeList"
:key="index"
:label="item.label"
:name="String(item.value)">
</el-tab-pane>
</el-tabs>
<el-tab-pane v-for="(item, index) in orderTypeList" :key="index" :label="item.label" :name="String(item.value)">
<!-- 订单的一些信息 -->
<div v-show="activeType!==3">
<div v-show="activeType !== 3" class="order-info-content">
<div class="orderMoney rowFlex flexWarp">
<div class="orderMoneyItem rowFlex columnCenter" style="margin-right:20px;">
<span>总支付金额：</span>
......@@ -40,29 +35,27 @@
<div class="filterList">
<el-form class="filterList" label-position="top">
<el-form-item label="订单号:">
<el-input v-model="inputValue" placeholder="请输入订单号/交易单号" prefix-icon="el-icon-search" style="width: 100%" clearable @change="searchInput"></el-input>
<el-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 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"/>
<selectDate :width="'100%'" :defaultValue="searchDate" @result="dateResult" />
</el-form-item>
<el-form-item label="角色名称:" >
<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-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">
......@@ -74,9 +67,14 @@
<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 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>
......@@ -147,26 +145,37 @@
</div>
</div>
<div v-else-if="!loading && orderList.length == 0" class="noContent rowFlex allCenter">
<noContent/>
<noContent />
</div>
</div>
</div>
<!-- 退款记录的搜做 -->
<div v-if="activeType == 3" class="refundLog">
<refundLog :active-type="activeType" />
</div>
<!-- 订单列表 -->
</el-tab-pane>
</el-tabs>
</div>
<!-- 退款订单的申请 -->
<orderRefund :show.sync="showRefund" title="退款申请" :info="refundInfo" />
</div>
</template>
<script>
import { orderList, memberView, completionOrder, selectSearch, todayOrder } from '@/api/game'
import { mapMutations, mapActions, mapState } from 'vuex'
import selectDate from '@/components/selectDate.vue'
import selece from '@/components/select.vue'
import searchSelect from './components/order/searchUser.vue'
import orderRefund from './components/order/orderRefund.vue'
import refundLog from './components/order/refundLog.vue'
import { throttle } from '@/utils'
import sanjiaoxing from '@/assets/icon/sanjiaoxing.svg'
import noContent from '@/components/noContent.vue'
export default {
</template>
<script>
import { orderList, memberView, completionOrder, selectSearch, todayOrder } from '@/api/game'
import { mapMutations, mapActions, mapState } from 'vuex'
import selectDate from '@/components/selectDate.vue'
import selece from '@/components/select.vue'
import searchSelect from './components/order/searchUser.vue'
import orderRefund from './components/order/orderRefund.vue'
import refundLog from './components/order/refundLog.vue'
import { throttle } from '@/utils'
import sanjiaoxing from '@/assets/icon/sanjiaoxing.svg'
import noContent from '@/components/noContent.vue'
export default {
components: {
searchSelect,
refundLog,
......@@ -390,7 +399,7 @@
this.totalOrder = res.data
})
},
requestOrderList: throttle(function(msg) {
requestOrderList: throttle(function (msg) {
console.log(12313, '开始展示', this)
if (this.accountSelect == '') {
this.$message.warning('暂无关联的账号，请先去关联账号!')
......@@ -403,7 +412,7 @@
this.loading = true
this.pageInfo.page += 1
const data = {
status: this.activeType===4?'':this.activeType,
status: this.activeType === 4 ? '' : this.activeType,
pay_type: this.pay_type ? this.pay_type.join(',') : '',
member_id: this.accountSelect,
role_id: this.role_id,
......@@ -418,6 +427,7 @@
(res) => {
this.loading = false
if (res.data.data && res.data.data.length < 20) {
console.log('没有更多数据了')
this.isloadMore = false
}
res.data.data.map((item, index) => {
......@@ -439,19 +449,21 @@
)
}, 1000)
}
}
</script>
<style lang="scss" scoped>
.order-info-list {
}
</script>
<style lang="scss" scoped>
.order-info-list {
width: 100%;
height: 100%;
background: #fff;
position: relative;
overflow: hidden;
.refundLog{
.refundLog {
width: 100%;
height: 100%;
}
.detailsTitle {
width: 100%;
padding: 0 vw(20);
......@@ -462,20 +474,24 @@
color: #333333;
border-bottom: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
p {
color: #333333;
}
}
.content {
width: 100%;
height: 100%;
overflow: auto;
overflow-x: hidden;
.tabSelect {
width: 100%;
height: 32px;
border-bottom: 1px solid #ebeef5;
cursor: pointer;
.tabSelectItem {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
......@@ -484,13 +500,16 @@
cursor: pointer;
line-height: 32px;
}
.tabSelectItemActive {
color: #409EFF;
border-bottom: 2px solid #409EFF;
}
}
.contentItem {
position: relative;
.title {
position: absolute;
left: 10px;
......@@ -499,6 +518,7 @@
color: #999999;
}
}
.item {
width: 100%;
height: auto;
......@@ -510,30 +530,36 @@
position: relative;
padding-left: 10px;
cursor: pointer;
div {
width: 100%;
}
.tableImage {
width: 40px;
height: 40px;
border-radius: 6px;
margin-right: vw(10);
}
.label {
color: #999999;
min-width: 60px;
}
.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;
......@@ -541,6 +567,7 @@
background: #f45454;
border-radius: 5px;
}
.dian {
display: inline-block;
width: 8px;
......@@ -548,6 +575,7 @@
background: #409EFF;
border-radius: 5px;
}
.dian2 {
display: inline-block;
width: 8px;
......@@ -561,50 +589,62 @@
width: calc(100%);
// margin-left: -20px;
padding: 10px 0;
.orderMoneyItem {
text-align: center;
margin-top: 12px;
span {
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
p {
font-size: 22px;
color: #409EFF;
}
}
}
.filterList {
margin-bottom: 10px;
.filterListInput {
width: 60%;
margin-left: 15px;
margin-bottom: 10px;
}
.filterListDate {
width: 150px;
margin-bottom: 10px;
}
::v-deep .search-item .item-label {
margin-right: 20px;
}
}
.orderDetailsScroll {
width: 100%;
height: auto;
}
.orderDetails {
width: 100%;
height: auto;
margin-bottom: 20px;
position: relative;
.bridgeMain {
position: absolute;
top: 0px;
right: 0px;
width: 50px;
height: 50px;
.text {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -618,6 +658,7 @@
width: 50px;
text-align: center;
}
.bridge {
font-size: 50px;
position: absolute;
......@@ -631,14 +672,17 @@
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;
......@@ -649,6 +693,7 @@
color: #333333;
cursor: pointer;
}
.btnnot {
background: #ffdddd;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -656,6 +701,7 @@
color: #f56c6c;
border: none;
}
.btnsuccess {
background: #e1fff0;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -663,14 +709,16 @@
color: #409EFF;
border: none;
}
.btnRefund{
.btnRefund {
background: #fff;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #00A6F0;
border-color:#00A6F0;
border-color: #00A6F0;
}
}
.text {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
......@@ -678,6 +726,7 @@
color: #333333;
}
}
.orderDetailsList {
width: 100%;
height: auto;
......@@ -685,9 +734,11 @@
border: 1px solid #ebeef5;
padding: 5px 0;
position: relative;
::v-deep .el-collapse-item__header{
::v-deep .el-collapse-item__header {
line-height: 20px;
}
.titleFix {
position: absolute;
left: 10px;
......@@ -697,14 +748,20 @@
}
}
}
}
.order-tabs {
margin-bottom: 15px;
}
.order-tabs {
::v-deep .el-tabs__header {
margin-bottom: 15px;
}
.order-info-content {
width: 100%;
height: 100%;
overflow: auto;
overflow-x: hidden;
}
::v-deep .el-tabs__item {
height: 40px;
line-height: 40px;
......@@ -719,6 +776,5 @@
::v-deep .el-tabs__active-bar {
background-color: #3491FA;
}
}
</style>
\ No newline at end of file
}
</style>
\ No newline at end of file
src/views/userInfo/components/Info.vue
......@@ -3,7 +3,7 @@
<div
class="userDetailsPanel columnFlex"
>
<div class="content">
<div class="content" v-loading="viewLoading">
<div v-if="chatUserDetails.is_phishing_account==1" class="warnText">
<p>高风险玩家,请立即通知组长！！！！</p>
<p>①千万不能推转游！！不要发送违禁词汇！！不要发送礼包和告知任何礼包信息！！</p>
......@@ -240,7 +240,8 @@ import watchMember from '@/mixins/watchMember'
...mapState('game', [
'accountSelect',
'gameUserInfo',
'bindGameUserList'
'bindGameUserList',
'viewLoading'
]),
...mapState('user', ['cser_info','cser_id','cser_name'])
},
......
src/views/userInfo/userInfo.vue
......@@ -80,7 +80,6 @@ export default {
::v-deep .el-tabs__content {
height: calc(100% - 55px);
overflow-y: auto;
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论