Browse Source
Merge branch 'zhangyong/milestone-20250913-现金管理' into milestone-20250913-现金管理
zhangyong/milestone-20250913-现金管理
Merge branch 'zhangyong/milestone-20250913-现金管理' into milestone-20250913-现金管理
zhangyong/milestone-20250913-现金管理
ZhangYong
1 month ago
18 changed files with 4158 additions and 759 deletions
-
7.env.development
-
BINsrc/assets/images/已审核.png
-
BINsrc/assets/images/待审核.png
-
BINsrc/assets/images/撤回.png
-
BINsrc/assets/images/背景图.png
-
BINsrc/assets/images/还没传到.png
-
321src/components/MoneyManage/CurrencySelect.vue
-
436src/components/MoneyManage/ProductSelect.vue
-
50src/router/index.js
-
11src/util/request.js
-
50src/utils/menuTreePermission.js
-
11src/utils/menuUtils.js
-
285src/views/moneyManage/executor/executor.vue
-
1096src/views/moneyManage/receiveDetail/receiveDetail.vue
-
725src/views/moneyManage/refundDetail/refundArea.vue
-
512src/views/moneyManage/refundDetail/refundDetail.vue
-
762src/views/moneyManage/refundDetail/refundHeader.vue
-
629src/views/moneyManage/refundDetail/refundService.vue
|
After Width: 46 | Height: 46 | Size: 2.9 KiB |
|
After Width: 46 | Height: 46 | Size: 2.8 KiB |
|
After Width: 700 | Height: 392 | Size: 228 KiB |
|
After Width: 1206 | Height: 509 | Size: 433 KiB |
|
After Width: 46 | Height: 46 | Size: 2.9 KiB |
@ -0,0 +1,321 @@ |
|||
<template> |
|||
<div class="dropdown" ref="dropdownRef"> |
|||
<!-- 下拉框触发器 --> |
|||
<div class="dropdown-toggle" @click="toggleMenu" :class="{ 'active': isOpen,'disabled': props.disabled }"> |
|||
<div class="search"> |
|||
<input type="text" class="search-input" :placeholder="placeholder" :value="isOpen ? searchData : selectedItem" |
|||
@focus="handleSearchFocus" @blur="handleSearchBlur" @input="handleInput"> |
|||
<el-icon class="clear-icon" v-if="searchData" @click="clearSearch"> |
|||
<CircleClose /> |
|||
</el-icon> |
|||
</div> |
|||
<span class="arrow"> |
|||
<el-icon> |
|||
<ArrowDown /> |
|||
</el-icon> |
|||
</span> |
|||
</div> |
|||
|
|||
<!-- 下拉菜单 --> |
|||
<div class="dropdown-menu" v-if="isOpen"> |
|||
<!-- 选项区域：按钮样式 --> |
|||
<div class="menuContent"> |
|||
<button class="dropdown-item" v-for="(item, index) in filteredItems" :key="index" @click="handleSelect(item)" |
|||
:class="{ 'selected': selectedItem === item }"> |
|||
{{ item }} |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, computed, watchEffect, onMounted, watch } from 'vue'; |
|||
|
|||
const searchData = ref('') |
|||
const isOpen = ref(false) |
|||
const selectedItem = ref('') |
|||
const dropdownRef = ref(null) |
|||
|
|||
const props = defineProps({ |
|||
items: { |
|||
type: Array, |
|||
required: true, |
|||
default: () => [] |
|||
}, |
|||
placeholder: { |
|||
type: String, |
|||
default: '请选择支付方式' |
|||
}, |
|||
modelValue: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['update:modelValue', 'change']) |
|||
|
|||
// 切换下拉菜单 |
|||
const toggleMenu = () => { |
|||
if (props.disabled) return |
|||
isOpen.value = !isOpen.value |
|||
searchData.value = '' |
|||
} |
|||
|
|||
// 清除搜索 |
|||
const clearSearch = () => { |
|||
searchData.value = '' |
|||
} |
|||
|
|||
// 选择选项 |
|||
const handleSelect = (item) => { |
|||
selectedItem.value = item |
|||
isOpen.value = false |
|||
emit('update:modelValue', item) |
|||
emit('change', item) |
|||
} |
|||
|
|||
// 点击外部关闭菜单 |
|||
const handleClickOutside = (event) => { |
|||
if (dropdownRef.value && !dropdownRef.value.contains(event.target)) { |
|||
isOpen.value = false |
|||
} |
|||
} |
|||
|
|||
// 监听搜索框的焦点和失焦事件 |
|||
const handleSearchFocus = () => { |
|||
// 可以在这里添加额外的逻辑 |
|||
} |
|||
|
|||
const handleSearchBlur = () => { |
|||
// 可以在这里添加额外的逻辑 |
|||
} |
|||
|
|||
// 搜索过滤 |
|||
const filteredItems = computed(() => { |
|||
if (!searchData.value) return props.items |
|||
return props.items.filter(item => |
|||
item.toLowerCase().includes(searchData.value.toLowerCase()) |
|||
) |
|||
}) |
|||
|
|||
const handleInput = (e) => { |
|||
searchData.value = e.target.value |
|||
} |
|||
// 挂载/卸载事件 |
|||
onMounted(() => { |
|||
selectedItem.value = props.modelValue; |
|||
document.addEventListener('click', handleClickOutside) |
|||
return () => { |
|||
document.removeEventListener('click', handleClickOutside) |
|||
} |
|||
}) |
|||
|
|||
// 监听外部值变化 |
|||
watch(() => props.modelValue, (newVal) => { |
|||
selectedItem.value = newVal; |
|||
}, { immediate: true }); |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
// 下拉容器 |
|||
.dropdown { |
|||
position: relative; |
|||
width: 268px; |
|||
font-family: 'Arial', sans-serif; |
|||
} |
|||
|
|||
// 触发器：控制展开/收起 |
|||
.dropdown-toggle { |
|||
border: 1px solid #e5e7eb; |
|||
/* 调整内边距以匹配按钮高度 */ |
|||
height: 31px; |
|||
/* 调整高度以匹配按钮 */ |
|||
cursor: pointer; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background-color: #fff; |
|||
border-radius: 6px; |
|||
transition: all 0.3s ease; |
|||
|
|||
.placeholder { |
|||
flex: 1; |
|||
font-size: 14px; |
|||
line-height: 18px; |
|||
color: #A8ABB2; |
|||
} |
|||
|
|||
// 搜索框区域 |
|||
.search { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: sticky; |
|||
} |
|||
|
|||
// 搜索输入框 |
|||
.search-input { |
|||
width: 100%; |
|||
height: 90%; |
|||
/* 左侧留出图标空间 */ |
|||
box-sizing: border-box; |
|||
border: none; |
|||
border-radius: 6px; |
|||
padding-left: 11px; |
|||
outline: none; |
|||
font-size: 14px; |
|||
transition: border-color 0.3s ease; |
|||
|
|||
&::placeholder { |
|||
color: #999999; |
|||
opacity: 1; |
|||
font-style: normal; |
|||
font-weight: 350; |
|||
line-height: 22px; |
|||
} |
|||
|
|||
} |
|||
|
|||
.clear-icon { |
|||
position: absolute; |
|||
top: 62%; |
|||
right: 20px; |
|||
transform: translateY(-50%); |
|||
color: #909399; |
|||
cursor: pointer; |
|||
z-index: 1003; |
|||
|
|||
&:hover { |
|||
color: #606266; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 展开状态：边框+阴影高亮 |
|||
.dropdown-toggle.active { |
|||
border-color: #678BFF; |
|||
box-shadow: 0 0 0 2px rgba(103, 139, 255, 0.1); |
|||
} |
|||
|
|||
// 箭头图标：展开时旋转 |
|||
.arrow { |
|||
margin-right: 8px; |
|||
color: #999; |
|||
transition: transform 0.3s ease; |
|||
} |
|||
|
|||
.dropdown-toggle.active .arrow { |
|||
transform: rotate(180deg); |
|||
} |
|||
|
|||
// 下拉菜单主体 |
|||
.dropdown-menu { |
|||
position: absolute; |
|||
top: 100%; // 紧贴触发器下方 |
|||
left: 0; |
|||
width: 100%; |
|||
border: 1px solid #678BFF; |
|||
min-height: 50px; |
|||
max-height: 300px; |
|||
background-color: #fff; |
|||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|||
border-radius: 0 0 8px 8px; // 仅底部两侧圆角 |
|||
z-index: 1000; |
|||
margin-top: 15px; // 关键：不要有上外边距，尖角要紧贴触发器 |
|||
overflow: visible; |
|||
|
|||
|
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: -11px; |
|||
left: 50%; |
|||
transform: translateX(-50%) scaleY(0.5); |
|||
width: 30px; |
|||
height: 16px; |
|||
background: #fff; |
|||
clip-path: polygon(0 100%, 100% 100%, 50% 0); |
|||
z-index: 1001; |
|||
border: none; |
|||
/* 移除原来的边框 */ |
|||
} |
|||
|
|||
&::after { |
|||
content: ""; |
|||
position: absolute; |
|||
top: -12px; |
|||
/* 比 ::before 往下一点，制造边框效果 */ |
|||
left: 50%; |
|||
transform: translateX(-50%) scaleY(0.5); |
|||
width: 30px; |
|||
height: 16px; |
|||
background: #678BFF; |
|||
clip-path: polygon(0 100%, 100% 100%, 50% 0); |
|||
z-index: 1000; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
// 选项容器：调整滚动区域高度 |
|||
.menuContent { |
|||
max-height: 200px; |
|||
/* 减去搜索框高度和尖角高度 */ |
|||
overflow-y: auto; |
|||
padding: 8px; |
|||
padding: 10px 14px 12px 10px; |
|||
} |
|||
|
|||
// 选项按钮：无边框 + hover/选中效果 |
|||
.dropdown-item { |
|||
width: 100%; |
|||
height: 27px; |
|||
padding: 5px 12px 5px 5px; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
border: none; |
|||
border-radius: 10px; |
|||
background-color: #fff; |
|||
font-size: 12px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 20px; |
|||
margin: 5px 0; |
|||
color: #040A2D; |
|||
transition: all 0.2s ease; |
|||
|
|||
&:hover { |
|||
background-color: #F3FAFE; |
|||
/* hover浅灰 */ |
|||
} |
|||
|
|||
&.selected { |
|||
background-color: #E5EBFE; |
|||
/* 选中浅蓝 */ |
|||
color: #2741DE; |
|||
/* 选中文字蓝色 */ |
|||
} |
|||
} |
|||
|
|||
// 可选：滚动条美化（与原风格一致） |
|||
.menuContent::-webkit-scrollbar { |
|||
width: 6px; |
|||
} |
|||
|
|||
.menuContent::-webkit-scrollbar-track { |
|||
background: #f1f1f1; |
|||
border-radius: 3px; |
|||
} |
|||
|
|||
.menuContent::-webkit-scrollbar-thumb { |
|||
background: #c0c4cc; |
|||
border-radius: 3px; |
|||
|
|||
&:hover { |
|||
background: #909399; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,436 @@ |
|||
<template> |
|||
<div class="productContent"> |
|||
<div class="selectBox" @click="handelMenu" :class="{ 'active': isOpen }"> |
|||
<span class="placeholder" :style="{ color: selectedItem ? '#333' : '#A8ABB2' }"> |
|||
{{ selectedItem || placeholder }} |
|||
</span> |
|||
<span class="arrow"> |
|||
<el-icon> |
|||
<ArrowDown /> |
|||
</el-icon> |
|||
</span> |
|||
</div> |
|||
|
|||
<div class="menu" v-show="isOpen"> |
|||
<div class="coinselect" @click="coinhandelMenu" :class="{ 'active': coinisOpen }"> |
|||
<div class="cointxt"> |
|||
金币产品 |
|||
</div> |
|||
<span class="coin-arrow"> |
|||
<el-icon> |
|||
<ArrowDown /> |
|||
</el-icon> |
|||
</span> |
|||
</div> |
|||
<div class="coinoption" v-show="coinisOpen"> |
|||
<el-radio v-model="selectedValue" label="金币充值" size="large" /> |
|||
</div> |
|||
<div class="product"> |
|||
<div class="coinselect" @click="producthandelMenu" :class="{ 'active': productisOpen }"> |
|||
<div class="cointxt"> |
|||
软件产品 |
|||
</div> |
|||
<span class="coin-arrow"> |
|||
<el-icon> |
|||
<ArrowDown /> |
|||
</el-icon> |
|||
</span> |
|||
</div> |
|||
<div class="productOption" v-show="productisOpen"> |
|||
<hr class="line"> |
|||
<div class="checktxt">软件</div> |
|||
<div class="marketprodut"> |
|||
<div class="fistlevel" v-for="(menu, index) in menuData" :key="menu.name" @click="clickmenu(index)" |
|||
:class="{ 'selected': menu.options.includes(selectedValue) }"> |
|||
<div class="label"> |
|||
{{ menu.name }} |
|||
<el-icon :class="{ 'rotate': activeIndex === index }"> |
|||
<ArrowDown /> |
|||
</el-icon> |
|||
</div> |
|||
<div v-show="activeIndex == index" class="selectoption" @click.stop> |
|||
<el-radio-group v-model="selectedValue"> |
|||
<div class="option" v-for="product in menu.options" :key="product"> |
|||
<el-radio :label="product"> |
|||
{{ product }} |
|||
</el-radio> |
|||
</div> |
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<hr class="line"> |
|||
<div class="ai"> |
|||
<div class="checktxt">AI机构探测神器</div> |
|||
<hr class="line"> |
|||
<el-radio-group v-model="selectedValue"> |
|||
<el-radio v-for="ai in AIProduct" :key="ai" :label="ai" :value="ai"> |
|||
{{ ai }} |
|||
</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<div class="ai"> |
|||
<div class="checktxt">超级机构探测神器</div> |
|||
<hr class="line"> |
|||
<el-radio-group v-model="selectedValue"> |
|||
<el-radio v-for="ai in superProduct" :key="ai" :label="ai" :value="ai"> |
|||
{{ ai }} |
|||
</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<div class="ai"> |
|||
<div class="checktxt">其他</div> |
|||
<hr class="line"> |
|||
<el-radio-group v-model="selectedValue"> |
|||
<el-radio v-for="ai in InfoFee" :key="ai" :label="ai" :value="ai"> |
|||
{{ ai }} |
|||
</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import { ref, watch, onMounted, computed, onUnmounted, nextTick } from 'vue'; |
|||
import { ArrowDown } from '@element-plus/icons-vue'; |
|||
|
|||
|
|||
const searchData = ref('') |
|||
const isOpen = ref(false) |
|||
const coinisOpen = ref(false) |
|||
const productisOpen = ref(false) |
|||
const selectedItem = ref('') |
|||
const dropdownRef = ref(null) |
|||
const placeholder = ref('请选择产品') |
|||
|
|||
const handelMenu = () => { |
|||
isOpen.value = !isOpen.value |
|||
ifselectAndOpen() |
|||
} |
|||
const coinhandelMenu = () => { |
|||
coinisOpen.value = !coinisOpen.value |
|||
} |
|||
const producthandelMenu = () => { |
|||
productisOpen.value = !productisOpen.value |
|||
} |
|||
|
|||
// 接收父组件通过 v-model 传入的值 |
|||
const props = defineProps({ |
|||
modelValue: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}) |
|||
|
|||
const emit = defineEmits(['update:modelValue']) |
|||
|
|||
const selectedValue = ref('') |
|||
|
|||
|
|||
watch(selectedValue, (newVal) => { |
|||
emit('update:modelValue', newVal ? newVal : ''); |
|||
selectedItem.value = newVal || ''; |
|||
}); |
|||
|
|||
|
|||
const AIProduct = ['AI机构追踪', 'AI机构出击 ', 'AI机构资金', 'AI机活跃度'] |
|||
const superProduct = ['超级机构透视', '超级机构伏击 ', '超级机构猎杀', '超级机构脉搏', '超级机构罗盘'] |
|||
const InfoFee = ['静态信息费', '博股会员'] |
|||
const menuData = [ |
|||
{ |
|||
name: '美股', |
|||
options: ['美股软件', '美股金卡', '美股套餐'] |
|||
}, |
|||
{ |
|||
name: '港股', |
|||
options: ['港股软件', '港股金卡', '港股套餐'] |
|||
}, |
|||
{ |
|||
name: 'A股', |
|||
options: ['A股软件', 'A股金卡', 'A股套餐'] |
|||
}, |
|||
{ |
|||
name: '新加坡股', |
|||
options: ['新加坡股软件', '新加坡股金卡', '新加坡股套餐'] |
|||
}, |
|||
{ |
|||
name: '马股', |
|||
options: ['马股软件', '马股金卡', '马股套餐'] |
|||
}, |
|||
{ |
|||
name: '日本股', |
|||
options: ['日本股软件', '日本股金卡', '日本股套餐'] |
|||
}, |
|||
{ |
|||
name: '泰股', |
|||
options: ['泰股软件', '泰股金卡', '泰股套餐'] |
|||
}, |
|||
{ |
|||
name: '越南股', |
|||
options: ['越南股软件', '越南股金卡', '越南股套餐'] |
|||
}, |
|||
{ |
|||
name: '印尼股', |
|||
options: ['印尼股软件', '印尼股金卡', '印尼股套餐'] |
|||
}, |
|||
{ |
|||
name: '韩国股', |
|||
options: ['韩国股软件', '韩国股金卡', '韩国股套餐'] |
|||
}, |
|||
{ |
|||
name: '台湾股', |
|||
options: ['台湾股软件', '台湾股金卡', '台湾股套餐'] |
|||
} |
|||
]; |
|||
//全局事件实现点击外部关闭选项 |
|||
const closeSoftwareSubmenu = () => { |
|||
activeIndex.value = -1; // 将展开的二级菜单索引重置为 -1，实现关闭 |
|||
}; |
|||
|
|||
const closeWholeDropdown = () => { |
|||
isOpen.value = false; // 关闭整个弹窗 |
|||
// 可选：同时关闭弹窗内的子面板（如金币产品、软件产品展开面板） |
|||
coinisOpen.value = false; |
|||
productisOpen.value = false; |
|||
closeSoftwareSubmenu(); // 同时关闭软件二级选项框 |
|||
}; |
|||
|
|||
const handleGlobalClick = (e) => { |
|||
// --- 原有：处理软件二级选项框外部关闭逻辑 --- |
|||
if (productisOpen.value) { |
|||
const submenuContainers = document.querySelectorAll('.selectoption'); |
|||
const firstLevelContainers = document.querySelectorAll('.fistlevel'); |
|||
let isClickInsideSubmenu = false; |
|||
let isClickInsideFirstLevel = false; |
|||
|
|||
submenuContainers.forEach(container => container.contains(e.target) && (isClickInsideSubmenu = true)); |
|||
firstLevelContainers.forEach(container => container.contains(e.target) && (isClickInsideFirstLevel = true)); |
|||
|
|||
if (!isClickInsideSubmenu && !isClickInsideFirstLevel) { |
|||
closeSoftwareSubmenu(); |
|||
} |
|||
} |
|||
|
|||
// --- 新增：处理整个弹窗外部关闭逻辑 --- |
|||
if (isOpen.value) { // 仅当弹窗处于打开状态时判断 |
|||
// 获取整个下拉弹窗的 DOM 容器 |
|||
const dropdownContainer = document.querySelector('.menu'); |
|||
// 获取弹窗触发按钮（类名 .selectBox），点击按钮需正常切换弹窗，不触发关闭 |
|||
const triggerButton = document.querySelector('.selectBox'); |
|||
|
|||
// 点击位置不在弹窗内，且不在触发按钮内 → 关闭整个弹窗 |
|||
if (!dropdownContainer?.contains(e.target) && !triggerButton?.contains(e.target)) { |
|||
closeWholeDropdown(); |
|||
} |
|||
} |
|||
}; |
|||
|
|||
const ifselectAndOpen = async () => { |
|||
await nextTick(); |
|||
if (selectedValue.value == '金币充值') { |
|||
coinisOpen.value = true |
|||
} else if (selectedValue.value) { |
|||
productisOpen.value = true |
|||
} else { |
|||
//不做处理 |
|||
} |
|||
} |
|||
|
|||
//软件相关 |
|||
const activeIndex = ref(-1) |
|||
const clickmenu = (index) => { |
|||
activeIndex.value = activeIndex.value === index ? -1 : index; |
|||
} |
|||
|
|||
watch(() => props.modelValue, (newVal) => { |
|||
selectedItem.value = newVal; |
|||
}, { immediate: true }); |
|||
onMounted(async () => { |
|||
selectedValue.value = props.modelValue; |
|||
selectedItem.value = selectedValue.value || ''; |
|||
document.addEventListener('click', handleGlobalClick); // 绑定全局事件 |
|||
}); |
|||
onUnmounted(() => { |
|||
document.removeEventListener('click', handleGlobalClick); // 解绑全局事件 |
|||
}); |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.productContent { |
|||
position: relative; |
|||
width: 450px; |
|||
font-family: 'Arial', sans-serif; |
|||
} |
|||
|
|||
.selectBox { |
|||
border: 1px solid #e5e7eb; |
|||
padding: 4px 12px; |
|||
height: 23px; |
|||
cursor: pointer; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
background-color: #fff; |
|||
border-radius: 6px; |
|||
transition: all 0.3s ease; |
|||
|
|||
.placeholder { |
|||
flex: 1; |
|||
font-size: 14px; |
|||
line-height: 18px; |
|||
color: #A8ABB2; |
|||
} |
|||
} |
|||
|
|||
.arrow { |
|||
margin-left: 8px; |
|||
color: #999; |
|||
transition: transform 0.3s ease; |
|||
} |
|||
|
|||
.selectBox.active .arrow { |
|||
transform: rotate(180deg); |
|||
} |
|||
|
|||
.menu { |
|||
position: absolute; |
|||
top: 100%; |
|||
left: 0; |
|||
width: 160%; |
|||
max-height: 600px; |
|||
min-height: 200px; |
|||
display: flex; |
|||
padding: 10px; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
gap: 10px; |
|||
flex-shrink: 0; |
|||
border-radius: 8px; |
|||
background: #E4F0FC; |
|||
box-shadow: 0 0 4px 0 #00000040; |
|||
z-index: 100; |
|||
|
|||
.coinselect { |
|||
width: 100px; |
|||
height: 20px; |
|||
border: 1px solid #175BE5; |
|||
padding: 5px 0 5px 12px; |
|||
display: flex; |
|||
border-radius: 5px; |
|||
|
|||
.cointxt { |
|||
width: 70px; |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
color: #175be5; |
|||
text-align: center; |
|||
font-family: "PingFang SC"; |
|||
font-size: 14px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 20px; |
|||
} |
|||
} |
|||
|
|||
.coin-arrow { |
|||
flex: 1; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
color: #175BE5; |
|||
} |
|||
|
|||
.coinselect.active .coin-arrow { |
|||
transform: rotate(-90deg); |
|||
} |
|||
|
|||
.product { |
|||
width: 100%; |
|||
|
|||
.line { |
|||
display: flex; |
|||
height: 1px; |
|||
padding: 0 16px; |
|||
align-items: flex-start; |
|||
align-content: flex-start; |
|||
gap: 8px 60px; |
|||
flex-shrink: 0; |
|||
align-self: stretch; |
|||
flex-wrap: wrap; |
|||
border-top: 1px solid #7E91FF; |
|||
} |
|||
|
|||
.checktxt { |
|||
color: #5870ff; |
|||
font-family: "PingFang SC"; |
|||
font-size: 13px; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 22px; |
|||
margin: 10px 20px; |
|||
} |
|||
|
|||
.productOption { |
|||
width: 100%; |
|||
|
|||
.ai { |
|||
width: 100%; |
|||
} |
|||
|
|||
.marketprodut { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 10px; |
|||
|
|||
.fistlevel { |
|||
position: relative; |
|||
width: 130px; |
|||
|
|||
|
|||
|
|||
.label .el-icon { |
|||
margin-left: 5px; |
|||
transition: transform 0.3s ease; |
|||
} |
|||
|
|||
.label .rotate { |
|||
transform: rotate(-90deg); // 箭头旋转效果 |
|||
} |
|||
|
|||
.label { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.selectoption { |
|||
width: 100px; |
|||
background-color: #fff; |
|||
padding: 5px 20px; |
|||
position: absolute; |
|||
left: 60px; |
|||
top: 0; |
|||
z-index: 999; |
|||
border: 1px solid #175BE5; |
|||
border-radius: 6px; |
|||
|
|||
:deep(.el-checkbox__label) { |
|||
color: #333333; |
|||
font-family: "PingFang SC"; |
|||
font-size: 13px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 22px; |
|||
} |
|||
} |
|||
} |
|||
.fistlevel.selected .label { |
|||
color: #175BE5; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,2 +1,283 @@ |
|||
<template></template> |
|||
<script setup></script> |
|||
<template> |
|||
<el-card style="margin-bottom: 0.5vh;"> |
|||
<div class="condition1"> |
|||
<div class="condition-item"> |
|||
<el-text size="large" style="width:4vw;">姓名</el-text> |
|||
<el-input v-model="searchForm.username" placeholder="请输入姓名" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="condition-item"> |
|||
<el-text size="large" style="width:4vw;">精网号</el-text> |
|||
<el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="condition-item"> |
|||
<el-text size="large" style="width:4vw;">所属地区</el-text> |
|||
<el-input v-model="searchForm.area" placeholder="请输入所属地区" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="condition-item"> |
|||
<el-text size="large" style="width:4vw;">产品名称</el-text> |
|||
<el-input v-model="searchForm.productName" placeholder="请输入产品名称" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="condition-item"> |
|||
<el-text size="large" style="width:4vw;">退款币种</el-text> |
|||
<el-select v-model="searchForm.payType" style="width:9vw;"> |
|||
<el-option v-for="item in payments" :key="item" :label="item" :value="item" /> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
<div class="condition1"> |
|||
<div class="condition-item2"> |
|||
<el-text size="large" style="width:4vw;">退款途径</el-text> |
|||
<el-select v-model="searchForm.auditStatus" style="width:9vw;"> |
|||
<el-option v-for="item in auditStatusOptions" :key="item.value" :label="item.label" |
|||
:value="item.value" /> |
|||
</el-select> |
|||
</div> |
|||
<div class="condition-item2"> |
|||
<el-text size="large" style="width:4vw;">订单状态</el-text> |
|||
<el-input v-model="searchForm.productName" placeholder="请输入订单状态" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="condition-item2" style="width: 28vw;"> |
|||
<el-text size="large" style="width:4vw;">付款时间</el-text> |
|||
<el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="起始时间" |
|||
end-placeholder="结束时间" style="width:22vw;" @change="handleDatePickerChange" |
|||
:disabled-date="disabledDate" /> |
|||
</div> |
|||
<div> |
|||
<el-button type="success">重置</el-button> |
|||
<el-button type="primary">查询</el-button> |
|||
<el-button type="warning">导出excel</el-button> |
|||
<el-button type="primary">查看导出列表</el-button> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
<div style="height:4vh;"> |
|||
<el-button type="primary" @click="showEdit = true">新增</el-button> |
|||
</div> |
|||
<el-card> |
|||
<el-table :data="tableData" style="height:60vh;width:82vw"> |
|||
<el-table-column type="index" label="序号" width="60" fixed="left" /> |
|||
<el-table-column prop="name" label="Homily ID" width="120" fixed="left" /> |
|||
<el-table-column prop="jwcode" label="姓名" width="120" fixed="left" show-overflow-tooltip /> |
|||
<el-table-column prop="market" label="所属地区" width="120" /> |
|||
<el-table-column prop="refundType" label="产品名称" width="120" /> |
|||
<el-table-column prop="refundType" label="退款类型" width="120" /> |
|||
<el-table-column prop="refundType" label="退款币种" width="120" /> |
|||
<el-table-column prop="refundType" label="退款金额" width="120" /> |
|||
<el-table-column prop="refundType" label="退款途径" width="120" /> |
|||
<el-table-column prop="refundType" label="退款截图" width="120" /> |
|||
<el-table-column prop="refundType" label="退款时间" width="120" /> |
|||
<el-table-column prop="adminName" label="订单状态" width="120" /> |
|||
<el-table-column prop="operation" label="操作" fixed="right" width="150px"> |
|||
<template #default="scope"> |
|||
<div class="operation"> |
|||
<el-popconfirm title="确定要通过此条记录吗？" @confirm="handleApprove(scope.row)"> |
|||
<template #reference> |
|||
<el-button v-if="hasrefundWaitThough" :disabled="clicked || cancelClicked" |
|||
type="primary" text> |
|||
通过 |
|||
</el-button> |
|||
</template> |
|||
<template #actions="{ confirm, cancel }"> |
|||
<el-button size="small" @click="cancel">取消</el-button> |
|||
<el-button type="primary" size="small" :disabled="clicked" @click="confirm"> |
|||
确认 |
|||
</el-button> |
|||
</template> |
|||
</el-popconfirm> |
|||
<el-button v-if="hasrefundWaitReject" :disabled="clicked || cancelClicked" type="primary" text |
|||
@click="showRejectDialog(scope.row)"> |
|||
驳回 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" |
|||
layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" style="margin-top: 1vh;" |
|||
@size-change="handlePageSizeChange" @current-change="handleCurrentChange" /> |
|||
</el-card> |
|||
|
|||
<el-dialog v-model="showEdit" class="edit" overflow draggable style="width: 40vw;"> |
|||
<div style="display: flex;"> |
|||
<div class="left"> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">精网号</el-text> |
|||
<el-input v-model="editForm.jwcode" placeholder="请输入精网号" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">客户姓名</el-text> |
|||
<el-input v-model="editForm.name" placeholder="请输入客户姓名" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">所属地区</el-text> |
|||
<el-input v-model="editForm.market" placeholder="请输入所属地区" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">产品名称</el-text> |
|||
<el-input v-model="editForm.orderCode" placeholder="请输入产品名称" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">退款类型</el-text> |
|||
<el-select v-model="editForm.refundType" placeholder="请选择退款类型" style="width:10vw;" clearable> |
|||
<el-option v-for="item in products" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">付款币种</el-text> |
|||
<el-select v-model="editForm.refundCurrency" placeholder="请选择付款币种" style="width:10vw;" clearable> |
|||
<el-option v-for="item in currencies" :key="item.value" :label="item.label" |
|||
:value="item.value" /> |
|||
</el-select> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">付款金额</el-text> |
|||
<el-input v-model="editForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">支付方式</el-text> |
|||
<el-select v-model="editForm.paymentMethod" placeholder="请选择支付方式" style="width:10vw;"> |
|||
<el-option v-for="item in payments" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">付款时间</el-text> |
|||
<el-date-picker v-model="editForm.payTime" type="datetime" placeholder="请选择付款时间" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">提交人</el-text> |
|||
<el-input v-model="editForm.submitter" placeholder="请输入提交人" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">转账凭证</el-text> |
|||
<el-form-item :rules="{ required: true, message: '请上传图片', trigger: 'change' }"> |
|||
<el-upload ref="uploadRef" list-type="picture-card" :auto-upload="false" |
|||
:http-request="customUpload" :on-change="handleImageChange" |
|||
:on-success="handleUploadSuccess" :on-error="handleUploadError" |
|||
:before-upload="beforeUpload" :show-file-list="false"> |
|||
<template #default> |
|||
<img v-if="editForm.imageUrl" :src="editForm.imageUrl" |
|||
style="width: 100%; height: 100%; object-fit: cover;"> |
|||
<el-icon v-else> |
|||
<Plus /> |
|||
</el-icon> |
|||
</template> |
|||
</el-upload> |
|||
</el-form-item> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">备注</el-text> |
|||
<el-input v-model="editForm.remark" placeholder="请输入备注" style="width:10vw;" :row="3" |
|||
maxlength="100" type="textarea" show-word-limit clearable /> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">退款币种</el-text> |
|||
<el-select v-model="editForm.refundCurrency" placeholder="请选择退款币种" style="width:10vw;"> |
|||
<el-option v-for="item in currencies" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">退款金额</el-text> |
|||
<el-input v-model="editForm.refundAmount" placeholder="请输入退款金额" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">退款途径</el-text> |
|||
<el-select v-model="editForm.refundWay" placeholder="请选择退款途径" style="width:10vw;"> |
|||
<el-option v-for="item in refundWays" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">退款时间</el-text> |
|||
<el-date-picker v-model="editForm.refundTime" type="datetime" placeholder="请选择退款时间" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">备注</el-text> |
|||
<el-input v-model="editForm.remark" placeholder="请输入备注" style="width:10vw;" :rows="3" |
|||
maxlength="100" show-word-limit type="textarea" clearable /> |
|||
</div> |
|||
<div style="display:flex;justify-content: center;margin-top: 5vh;"> |
|||
<el-button type="default" @click="" style="margin-right: 2vw;">取消</el-button> |
|||
<el-button type="primary" @click="">提交</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
<script setup> |
|||
import { ref } from 'vue' |
|||
import { ElMessage } from 'element-plus' |
|||
import API from '@/util/http.js' |
|||
|
|||
const tableData = ref([]) |
|||
const pagination = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50, |
|||
total: 0 |
|||
}) |
|||
const searchForm = ref({ |
|||
jwcode: '' |
|||
}) |
|||
const showEdit = ref(false) |
|||
const editForm = ref({ |
|||
jwcode: '' |
|||
}) |
|||
</script> |
|||
<style scoped> |
|||
.condition1 { |
|||
width: 82vw; |
|||
display: flex; |
|||
align-items: center; |
|||
height: 4vh; |
|||
|
|||
.condition-item { |
|||
width: 18%; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
margin-right: 0.5vw; |
|||
} |
|||
|
|||
.condition-item2 { |
|||
width: 18%; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-right: 0.5vw; |
|||
} |
|||
} |
|||
|
|||
.edit { |
|||
.left { |
|||
width: 45%; |
|||
height: 60vh; |
|||
padding: 0 2vw; |
|||
|
|||
.dialog-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
} |
|||
|
|||
.image { |
|||
width: 4vw !important; |
|||
height: 4vw !important; |
|||
} |
|||
|
|||
:deep(.el-upload--picture-card) { |
|||
width: 4vw !important; |
|||
height: 4vw !important; |
|||
padding: 0 !important; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
width: 50%; |
|||
|
|||
.dialog-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
1096
src/views/moneyManage/receiveDetail/receiveDetail.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,725 @@ |
|||
<!-- 各地财务&各地负责人 --> |
|||
<template> |
|||
<el-card style="margin-bottom: 0.5vh;"> |
|||
<div class="condition"> |
|||
<div class="item1"> |
|||
<el-text size="large" style="width:4vw;">精网号</el-text> |
|||
<el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="item1"> |
|||
<el-text size="large" style="width:4vw;">客户姓名</el-text> |
|||
<el-input v-model="searchForm.name" placeholder="请输入客户姓名" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="item1"> |
|||
<el-text size="large" style="width:4vw;">所属地区</el-text> |
|||
<el-input v-model="searchForm.market" placeholder="请输入所属地区" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="item1"> |
|||
<el-text size="large" style="width:4vw;">产品名称</el-text> |
|||
<el-input v-model="searchForm.goodsName" placeholder="请输入产品名称" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="item1"> |
|||
<el-text size="large" style="width:4vw;">订单状态</el-text> |
|||
<el-select v-model="searchForm.status" style="width:9vw;"> |
|||
<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
<div class="condition"> |
|||
<div class="item2"> |
|||
<el-text size="large" style="width:4vw;">付款币种</el-text> |
|||
<el-input v-model="searchForm.payCurrency" placeholder="请输入付款币种" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="item2"> |
|||
<el-text size="large" style="width:4vw;">支付方式</el-text> |
|||
<el-input v-model="searchForm.payType" placeholder="请输入支付方式" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="item2" style="width: 28.5vw;"> |
|||
<el-text size="large" style="width:4vw;">付款时间</el-text> |
|||
<el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="起始时间" |
|||
end-placeholder="结束时间" style="width:22vw;" @change="handleDatePickerChange" |
|||
:disabled-date="disabledDate" /> |
|||
</div> |
|||
<div> |
|||
<el-button type="success">重置</el-button> |
|||
<el-button type="primary">查询</el-button> |
|||
<el-button type="warning">导出excel</el-button> |
|||
<el-button type="primary">查看导出列表</el-button> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
|
|||
<div style="display: flex;"> |
|||
<el-button type="primary" @click="showAudit1 = true">审核1</el-button> |
|||
<el-button type="primary" @click="showAudit2 = true">审核2</el-button> |
|||
<el-button type="primary" @click="showSteps = true">看看步骤条</el-button> |
|||
<el-button type="primary" @click="showError = true">退款金额有误</el-button> |
|||
</div> |
|||
|
|||
<el-card style="margin-top: 0.5vh;"> |
|||
<el-table :data="tableData" style="height:64vh;width:82vw"> |
|||
<el-table-column type="index" label="序号" width="60" fixed="left" /> |
|||
<el-table-column prop="name" label="Homily ID" width="120" fixed="left" /> |
|||
<el-table-column prop="jwcode" label="姓名" width="120" fixed="left" show-overflow-tooltip /> |
|||
<el-table-column prop="market" label="所属地区" width="120" /> |
|||
<el-table-column prop="refundType" label="产品名称" width="120" /> |
|||
<el-table-column prop="refundType" label="产品数量" width="120" /> |
|||
<el-table-column prop="refundType" label="退款方式" width="120" /> |
|||
<el-table-column prop="refundType" label="提交人" width="120" /> |
|||
<el-table-column prop="refundType" label="退款理由" width="120" /> |
|||
<el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip /> |
|||
<el-table-column prop="adminName" label="订单状态" width="120" /> |
|||
<el-table-column prop="operation" label="操作" fixed="right" width="150px" > |
|||
<template #default="scope"> |
|||
<div class="operation"> |
|||
<el-button v-if="row.status === '待审核'" type="primary" text @click="showAudit1 = true"> |
|||
审核 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" |
|||
layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" |
|||
@size-change="handlePageSizeChange" @current-change="handleCurrentChange" |
|||
style="margin-top: 1vh;"></el-pagination> |
|||
</el-card> |
|||
|
|||
<el-dialog v-model="showAudit1" title="审核" overflow draggable width="20vw"> |
|||
<div class="audit1"> |
|||
<div class="audit-item"> |
|||
<el-text style="width:4vw;">精网号</el-text> |
|||
<el-input v-model="addForm.jwcode" placeholder="请输入精网号" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="audit-item"> |
|||
<el-text style="width:4vw;">姓名</el-text> |
|||
<el-input v-model="addForm.name" placeholder="请输入客户姓名" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="audit-item"> |
|||
<el-text style="width:4vw;">所属地区</el-text> |
|||
<el-input v-model="addForm.market" placeholder="请输入所属地区" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="audit-item"> |
|||
<el-text style="width:4vw;">活动名称</el-text> |
|||
<el-input v-model="addForm.orderCode" placeholder="请输入活动名称" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="audit-item"> |
|||
<el-text style="width:4vw;">产品名称</el-text> |
|||
<el-input v-model="addForm.orderCode" placeholder="请输入活动名称" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="audit-item"> |
|||
<el-text style="width:4vw;">付款币种</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="audit-item"> |
|||
<el-text style="width:4vw;">付款金额</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="audit-item"> |
|||
<el-text style="width:4vw;">支付方式</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="audit-item"> |
|||
<el-text style="width:4vw;">付款时间</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="audit-item"> |
|||
<el-text style="width:4vw;">银行流水订单号</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable /> |
|||
</div> |
|||
|
|||
</div> |
|||
<div style="display:flex;justify-content: center;"> |
|||
<el-button type="primary" @click="">驳回</el-button> |
|||
<el-button type="primary" @click="">通过</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<el-dialog v-model="showAudit2" title="审核" class="audit2" overflow draggable> |
|||
<div class="top"> |
|||
<el-button @click="" class="smallTitle" size="small">退款申请信息</el-button> |
|||
<div class="top-item"> |
|||
<el-text style="width:4vw;" size="small">退款类型</el-text> |
|||
<el-input v-model="auditForm.refundType" placeholder="请输入退款类型" size="small" style="width:10vw;" |
|||
clearable></el-input> |
|||
</div> |
|||
<div class="top-item"> |
|||
<el-text style="width:4vw;" size="small">退款金额</el-text> |
|||
<el-input v-model="auditForm.refundAmount" placeholder="请输入退款金额" size="small" style="width:10vw;" |
|||
clearable></el-input> |
|||
</div> |
|||
<div class="top-item"> |
|||
<el-text style="width:4vw;" size="small">退款备注</el-text> |
|||
<el-input v-model="auditForm.refundReason" placeholder="请输入退款备注" size="small" style="width:10vw;" |
|||
:rows="3" maxlength="100" show-word-limit type="textarea" /> |
|||
</div> |
|||
</div> |
|||
<el-button @click="" class="smallTitle" size="small">原订单信息</el-button> |
|||
<div class="center"> |
|||
<div class="center-left"> |
|||
<div class="center-item"> |
|||
<el-text style="width:4vw;" size="small">精网号</el-text> |
|||
<el-input v-model="addForm.jwcode" placeholder="请输入精网号" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="center-item"> |
|||
<el-text style="width:4vw;" size="small">所属地区</el-text> |
|||
<el-input v-model="addForm.name" placeholder="请输入所属地区" size="small" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="center-item"> |
|||
<el-text style="width:4vw;" size="small">产品名称</el-text> |
|||
<el-input v-model="addForm.productName" placeholder="请输入产品名称" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="center-item"> |
|||
<el-text style="width:4vw;" size="small">付款金额</el-text> |
|||
<el-input v-model="addForm.orderCode" placeholder="请输入付款金额" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="center-item"> |
|||
<el-text style="width:4vw;" size="small">到账金额</el-text> |
|||
<el-input v-model="addForm.orderCode" placeholder="请输入到账金额" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="center-item"> |
|||
<el-text style="width:4vw;" size="small">支付方式</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入支付方式" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<!-- <div class="center-item"> |
|||
<el-text style="width:4vw;" size="small">提交人</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> --> |
|||
<div class="center-item"> |
|||
<el-text style="width:3vw;padding-right: 1vw;" size="small">银行流水订单号</el-text> |
|||
<el-input size="small" v-model="addForm.bankOrderNo" placeholder="请输入银行流水订单号" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="center-item"> |
|||
<el-text style="width:4vw;" size="small">转账凭证</el-text> |
|||
<el-form-item :rules="{ required: true, message: '请上传图片', trigger: 'change' }"> |
|||
<el-upload ref="uploadRef" :auto-upload="false" :http-request="customUpload" |
|||
list-type="picture-card" :on-change="handleImageChange" class="image" |
|||
:on-success="handleUploadSuccess" :on-error="handleUploadError" |
|||
:before-upload="beforeUpload" :show-file-list="false"> |
|||
<template #default> |
|||
<img v-if="addForm.imageUrl" :src="addForm.imageUrl" |
|||
style="width: 100%; height: 100%; object-fit: cover;"> |
|||
<el-icon v-else> |
|||
<Plus /> |
|||
</el-icon> |
|||
</template> |
|||
</el-upload> |
|||
</el-form-item> |
|||
</div> |
|||
</div> |
|||
<div class="center-right"> |
|||
<div class="right-item"> |
|||
<el-text style="width:4vw;" size="small">客户姓名</el-text> |
|||
<el-input v-model="addForm.customerName" placeholder="请输入客户姓名" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="right-item"> |
|||
<el-text style="width:4vw;" size="small">活动名称</el-text> |
|||
<el-input v-model="addForm.activityName" placeholder="请输入活动名称" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="right-item"> |
|||
<el-text style="width:4vw;" size="small">付款币种</el-text> |
|||
<el-input v-model="addForm.paymentCurrency" placeholder="请输入付款币种" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="right-item"> |
|||
<el-text style="width:4vw;" size="small">到账币种</el-text> |
|||
<el-input v-model="addForm.receiveCurrency" placeholder="请输入到账币种" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="right-item"> |
|||
<el-text style="width:4vw;" size="small">手续费</el-text> |
|||
<el-input v-model="addForm.fee" placeholder="请输入手续费" size="small" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="right-item"> |
|||
<el-text style="width:4vw;" size="small">付款时间</el-text> |
|||
<el-input v-model="addForm.paymentTime" placeholder="请输入付款时间" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="right-item"> |
|||
<el-text style="width:4vw;" size="small">提交人</el-text> |
|||
<el-input v-model="addForm.submitUser" placeholder="请输入提交人" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="right-item"> |
|||
<el-text style="width:4vw;" size="small">到账时间</el-text> |
|||
<el-input v-model="addForm.receiveTime" placeholder="请输入到账时间" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="right-item"> |
|||
<el-text style="width:4vw;" size="small">备注</el-text> |
|||
<el-input v-model="addForm.remark" placeholder="请输入备注" size="small" style="width:10vw;" :row="3" |
|||
clearable /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<el-button @click="" class="smallTitle" size="small">转交信息</el-button> |
|||
<div class="bottom"> |
|||
<div class="bottom-item"> |
|||
<el-text style="width:4vw;" size="small">执行人</el-text> |
|||
<el-select v-model="addForm.executor" size="small" placeholder="请选择执行人" style="width:10vw;"> |
|||
<el-option v-for="item in executor" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<el-dialog v-model="showSteps" title="唉！！！" overflow draggable width="1206px" height="506px" :style="{ |
|||
backgroundImage: 'url(/src/assets/images/背景图.png)', |
|||
backgroundSize: 'cover', |
|||
backgroundPosition: 'center' |
|||
}"> |
|||
<div class="steps"> |
|||
<div class="steps-content"> |
|||
<el-steps style="min-width: 60vw" :active="1" align-center> |
|||
<el-step> <template #title> |
|||
<div>提交人<br>你是死的</div> |
|||
</template> |
|||
<template #icon> |
|||
<img src="@/assets/images/已审核.png" alt="已审核图标"> |
|||
</template> |
|||
</el-step> |
|||
<el-step title="地区财务"> |
|||
<template #icon> |
|||
<img src="@/assets/images/待审核.png" alt="待审核图标"> |
|||
</template> |
|||
</el-step> |
|||
<el-step title="地区负责人"> |
|||
<template #icon> |
|||
<img src="@/assets/images/还没传到.png" alt="还没传到图标"> |
|||
</template> |
|||
</el-step> |
|||
<el-step title="总部财务"> |
|||
<template #icon> |
|||
<img src="@/assets/images/还没传到.png" alt="还没传到图标"> |
|||
</template> |
|||
</el-step> |
|||
<el-step title="指定执行人"> |
|||
<template #icon> |
|||
<img src="@/assets/images/还没传到.png" alt="还没传到图标"> |
|||
</template> |
|||
</el-step> |
|||
</el-steps> |
|||
</div> |
|||
<div class="steps-status"> |
|||
<el-steps style="min-width: 50vw" :active="1" finish-status="success" simple> |
|||
<el-step title="已通过" /> |
|||
<el-step title="待审核" /> |
|||
<el-step title="待审核" /> |
|||
<el-step title="待审核" /> |
|||
<el-step title="待审核" /> |
|||
</el-steps> |
|||
</div> |
|||
<div class="steps-btn"> |
|||
<el-button type="primary">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
<script setup> |
|||
import { ref, onMounted } from 'vue' |
|||
import { ElMessage } from 'element-plus' |
|||
import API from '@/util/http.js' |
|||
const uploadUrl = 'https://api.homilychart.com/hljw/api/aws/upload' |
|||
import { useAdminStore } from "@/store/index.js" |
|||
import { storeToRefs } from "pinia" |
|||
import dayjs from 'dayjs' |
|||
const adminStore = useAdminStore() |
|||
const { adminData, menuTree } = storeToRefs(adminStore) |
|||
import { permissionMapping, findMenuById } from "@/utils/menuTreePermission.js" |
|||
|
|||
const searchForm = ref({ |
|||
jwcode: '' |
|||
}) |
|||
const addForm = ref({ |
|||
jwcode: '' |
|||
}) |
|||
const auditForm = ref({ |
|||
refundType: '' |
|||
}) |
|||
const pagination = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50, |
|||
total: 0 |
|||
}) |
|||
const tableData = ref([]) |
|||
const showAudit1 = ref(false) |
|||
const showAudit2 = ref(false) |
|||
const showSteps = ref(false) |
|||
const uploadRef = ref(null) |
|||
const showError = ref(false) |
|||
const executor = ref([ |
|||
{ |
|||
value: '1', |
|||
label: '亲爱的佳丽老师' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '张三' |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '李四' |
|||
}, |
|||
{ |
|||
value: '4', |
|||
label: '王五' |
|||
}, |
|||
{ |
|||
value: '5', |
|||
label: '赵六' |
|||
}, |
|||
{ |
|||
value: '6', |
|||
label: '弘历黄总' |
|||
} |
|||
]) |
|||
const products = ref([ |
|||
{ |
|||
value: '1', |
|||
label: '产品1' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '产品2' |
|||
} |
|||
]) |
|||
const currencies = ref([ |
|||
{ |
|||
value: 'CNY', |
|||
label: '人民币' |
|||
}, |
|||
{ |
|||
value: 'USD', |
|||
label: '美元' |
|||
} |
|||
]) |
|||
const payments = ref([{ |
|||
value: '银行转账', |
|||
label: '银行转账' |
|||
}, |
|||
{ |
|||
value: '现金', |
|||
label: '现金' |
|||
}, |
|||
{ |
|||
value: '支票', |
|||
label: '支票' |
|||
}, |
|||
{ |
|||
value: '刷卡', |
|||
label: '刷卡' |
|||
}, |
|||
{ |
|||
value: 'Grabpay', |
|||
label: 'Grabpay' |
|||
}, |
|||
{ |
|||
value: 'Nets', |
|||
label: 'Nets' |
|||
}, |
|||
{ |
|||
value: 'PayPal', |
|||
label: 'PayPal' |
|||
}, |
|||
{ |
|||
value: 'Stripe-链接收款', |
|||
label: 'Stripe-链接收款' |
|||
}, |
|||
{ |
|||
value: 'Ipay88-链接收款', |
|||
label: 'Ipay88-链接收款' |
|||
}, |
|||
{ |
|||
value: 'PaymentAsia-链接收款', |
|||
label: 'PaymentAsia-链接收款' |
|||
}, |
|||
{ |
|||
value: 'Stripe-Link平台', |
|||
label: 'Stripe-Link平台' |
|||
}, |
|||
{ |
|||
value: 'PaymentAsia-Link平台', |
|||
label: 'PaymentAsia-Link平台' |
|||
}, |
|||
{ |
|||
value: 'FirstData-Link平台-Link平台', |
|||
label: 'FirstData-Link平台-Link平台' |
|||
}, |
|||
{ |
|||
value: 'IOS-Link平台', |
|||
label: 'IOS-Link平台' |
|||
}, |
|||
{ |
|||
value: 'Ipay88-Link平台', |
|||
label: 'Ipay88-Link平台' |
|||
} |
|||
]) |
|||
const statusList = ref([ |
|||
{ |
|||
value: '10', |
|||
label: '地区财务待审核' |
|||
}, |
|||
{ |
|||
value: '12', |
|||
label: '地区财务驳回' |
|||
}, |
|||
{ |
|||
value: '20', |
|||
label: '地区负责人待审核' |
|||
}, |
|||
{ |
|||
value: '22', |
|||
label: '地区负责人驳回' |
|||
}, |
|||
{ |
|||
value: '30', |
|||
label: '总部财务待审核' |
|||
}, |
|||
{ |
|||
value: '32', |
|||
label: '总部财务驳回' |
|||
}, |
|||
{ |
|||
value: '40', |
|||
label: '执行人待处理' |
|||
}, |
|||
{ |
|||
value: '41', |
|||
label: '退款完成' |
|||
} |
|||
]) |
|||
// 查全部 |
|||
const getRefund = async function () { |
|||
try { |
|||
const params = { |
|||
cashCollection: { |
|||
status: null, |
|||
//10：地区财务待审核；12：地区财务驳回； |
|||
// 20：地区负责人待审核；22：地区负责人驳回； |
|||
// 30：总部财务待审核；32：总部财务驳回； |
|||
// 40：执行人待处理；41：执行人已处理，退款完成； |
|||
orderCode: null,//订单号 |
|||
name: null,//姓名 |
|||
jwcode: null,//精网号 |
|||
market: null,//地区 |
|||
goodsName: null,//商品名 |
|||
refundModel: null,//退款类型, |
|||
startTime: "", |
|||
endTime: "" |
|||
} |
|||
} |
|||
|
|||
const result = await API({ |
|||
url: '/hljw/api/refund/query', |
|||
method: 'POST', |
|||
data: params |
|||
}) |
|||
|
|||
tableData.value = result.data || [] |
|||
} catch (error) { |
|||
ElMessage.error(error.message || '查询失败') |
|||
} |
|||
} |
|||
const handleImageChange = (file) => { |
|||
uploadRef.value.submit() |
|||
} |
|||
const beforeUpload = (file) => { |
|||
const isJPG = file.type === 'image/jpeg' |
|||
const isPNG = file.type === 'image/png' |
|||
const isLt1 = file.size / 1024 < 1024 |
|||
|
|||
if (!isJPG && !isPNG) { |
|||
ElMessage.error('上传图片只能是 JPG 或 PNG 格式') |
|||
return false |
|||
} |
|||
if (!isLt1) { |
|||
ElMessage.error('上传图片大小不能超过1MB') |
|||
return false |
|||
} |
|||
return true |
|||
} |
|||
const handleUploadSuccess = (response, file, fileList) => { |
|||
try { |
|||
addForm.value.imageUrl = response.data.url |
|||
console.log('==========================', response.data.url) |
|||
} catch (error) { |
|||
console.log('看看报错信息', error) |
|||
ElMessage.error(response.data.msg || '图片上传失败') |
|||
} |
|||
} |
|||
const handleUploadError = (error) => { |
|||
console.error('上传失败:', error) |
|||
addForm.value.imageUrl = null |
|||
ElMessage.error('图片上传失败，请重试') |
|||
} |
|||
const customUpload = async (options) => { |
|||
try { |
|||
const formData = new FormData() |
|||
formData.append('file', options.file) |
|||
|
|||
const response = await API({ |
|||
url: uploadUrl, |
|||
method: 'POST', |
|||
data: formData, |
|||
headers: { |
|||
'Content-Type': 'multipart/form-data' |
|||
} |
|||
}) |
|||
if (response.code === 200 && response.data) { |
|||
handleUploadSuccess(response, options.file, [options.file]) |
|||
ElMessage.success(response.msg || '上传成功') |
|||
} else { |
|||
ElMessage.error(response.msg || '上传失败') |
|||
} |
|||
} catch (error) { |
|||
console.error('上传错误:', error) |
|||
ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`) |
|||
} |
|||
} |
|||
|
|||
onMounted(() => { |
|||
console.log('???????????????????', adminData.value) |
|||
}) |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.condition { |
|||
width: 82vw; |
|||
display: flex; |
|||
align-items: center; |
|||
height: 4vh; |
|||
|
|||
.item1 { |
|||
width: 18%; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
margin-right: 0.5vw; |
|||
} |
|||
|
|||
.item2 { |
|||
width: 18%; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-right: 0.5vw; |
|||
} |
|||
} |
|||
|
|||
.audit1 { |
|||
height: 47vh; |
|||
|
|||
.audit-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
} |
|||
} |
|||
|
|||
.audit2 { |
|||
width: 30vw; |
|||
height: auto; |
|||
|
|||
.top { |
|||
width: 30vw; |
|||
height: 17vh; |
|||
|
|||
.top-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
} |
|||
} |
|||
|
|||
.smallTitle { |
|||
background-color: white; |
|||
color: rgb(64, 158, 255); |
|||
border-color: rgb(64, 158, 255); |
|||
margin-bottom: 0.5vh; |
|||
} |
|||
|
|||
.center { |
|||
display: flex; |
|||
width: 30vw; |
|||
height: 41vh; |
|||
|
|||
.dialog-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
} |
|||
|
|||
.center-left { |
|||
width: 60%; |
|||
|
|||
.image { |
|||
width: 4vw !important; |
|||
height: 4vw !important; |
|||
} |
|||
|
|||
:deep(.el-upload--picture-card) { |
|||
width: 4vw !important; |
|||
height: 4vw !important; |
|||
padding: 0 !important; |
|||
} |
|||
|
|||
.center-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
} |
|||
} |
|||
|
|||
.center-right { |
|||
|
|||
.right-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bottom { |
|||
width: 30vw; |
|||
height: 5vh; |
|||
|
|||
.bottom-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.steps { |
|||
.steps-content { |
|||
width: 45vw; |
|||
height: 15vh; |
|||
display: flex; |
|||
justify-content: center; |
|||
padding-top: 15vw; |
|||
padding-left: 8vw; |
|||
} |
|||
|
|||
.steps-status { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.steps-btn { |
|||
height: 15vh; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,471 +1,71 @@ |
|||
<template> |
|||
<el-card style="margin-bottom: 0.5vh;"> |
|||
<div class="condition1"> |
|||
<div class="condition-item"> |
|||
<el-text size="large" style="width:4vw;">精网号</el-text> |
|||
<el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="condition-item"> |
|||
<el-text size="large" style="width:4vw;">客户姓名</el-text> |
|||
<el-input v-model="searchForm.username" placeholder="请输入客户姓名" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="condition-item"> |
|||
<el-text size="large" style="width:4vw;">所属地区</el-text> |
|||
<el-input v-model="searchForm.area" placeholder="请输入所属地区" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="condition-item"> |
|||
<el-text size="large" style="width:4vw;">提交人</el-text> |
|||
<el-input v-model="searchForm.adminName" placeholder="请输入提交人" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="condition-item"> |
|||
<el-text size="large" style="width:4vw;">支付方式</el-text> |
|||
<el-select v-model="searchForm.payType" style="width:10vw;"> |
|||
<el-option v-for="item in payments" :key="item" :label="item" :value="item" /> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
<div class="condition1"> |
|||
<div class="condition-item2"> |
|||
<el-text size="large" style="width:4vw;">活动名称</el-text> |
|||
<el-input v-model="searchForm.activity" placeholder="请输入活动名称" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="condition-item2"> |
|||
<el-text size="large" style="width:4vw;">产品名称</el-text> |
|||
<el-input v-model="searchForm.productName" placeholder="请输入产品名称" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="condition-item2" style="width: 30vw;"> |
|||
<el-text size="large" style="width:4vw;">付款时间</el-text> |
|||
<el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="起始时间" |
|||
end-placeholder="结束时间" style="width:22vw;" @change="handleDatePickerChange" |
|||
:disabled-date="disabledDate" /> |
|||
</div> |
|||
<div> |
|||
<el-button type="success">重置</el-button> |
|||
<el-button type="primary">查询</el-button> |
|||
<el-button type="primary">导出excel</el-button> |
|||
<el-button type="primary">导出列表</el-button> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
|
|||
<div style="display: flex;"> |
|||
<el-button type="primary" @click="showAdd = true">新增收款</el-button> |
|||
<el-button type="primary" @click="showAudit1 = true">新增收款</el-button> |
|||
<el-button type="primary" @click="showAudit2 = true">新增收款</el-button> |
|||
</div> |
|||
|
|||
<el-card style="margin-top: 0.5vh;"> |
|||
<el-table :data="tableData" style="height:64vh;width:82vw"> |
|||
<el-table-column type="index" label="序号" width="60" fixed="left" /> |
|||
<el-table-column prop="name" label="Homily ID" width="120" fixed="left" /> |
|||
<el-table-column prop="jwcode" label="姓名" width="120" fixed="left" show-overflow-tooltip /> |
|||
<el-table-column prop="market" label="所属地区" width="120" /> |
|||
<el-table-column prop="orderCode" label="活动名称" width="120px" show-overflow-tooltip /> |
|||
<el-table-column prop="refundType" label="产品名称" width="120" /> |
|||
<el-table-column prop="refundType" label="退款类型" width="120" /> |
|||
<el-table-column prop="refundType" label="提交人" width="120" /> |
|||
<el-table-column prop="refundType" label="退款理由" width="120" /> |
|||
<el-table-column prop="refundType" label="付款币种" width="120" /> |
|||
<el-table-column prop="refundType" label="付款金额" width="120" /> |
|||
<el-table-column prop="refundType" label="支付方式" width="120" /> |
|||
<el-table-column prop="refundType" label="付款时间" width="120" /> |
|||
<el-table-column prop="refundType" label="转账凭证" width="120" /> |
|||
<el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip /> |
|||
<el-table-column prop="adminName" label="订单状态" width="120" /> |
|||
<el-table-column prop="operation" label="操作" fixed="right" width="150px"> |
|||
<template #default="scope"> |
|||
<div class="operation"> |
|||
<el-popconfirm title="确定要通过此条记录吗？" @confirm="handleApprove(scope.row)"> |
|||
<template #reference> |
|||
<el-button v-if="hasrefundWaitThough" :disabled="clicked || cancelClicked" |
|||
type="primary" text> |
|||
通过 |
|||
</el-button> |
|||
</template> |
|||
<template #actions="{ confirm, cancel }"> |
|||
<el-button size="small" @click="cancel">取消</el-button> |
|||
<el-button type="primary" size="small" :disabled="clicked" @click="confirm"> |
|||
确认 |
|||
</el-button> |
|||
</template> |
|||
</el-popconfirm> |
|||
<el-button v-if="hasrefundWaitReject" :disabled="clicked || cancelClicked" type="primary" text |
|||
@click="showRejectDialog(scope.row)"> |
|||
驳回 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" |
|||
layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" |
|||
@size-change="handlePageSizeChange" @current-change="handleCurrentChange" |
|||
style="margin-top: 1vh;"></el-pagination> |
|||
</el-card> |
|||
|
|||
<el-dialog v-model="showAdd" title="退款" class="addDialog" overflow draggable style="width: 40vw;"> |
|||
<div style="display: flex;"> |
|||
<div class="left"> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">精网号</el-text> |
|||
<el-input v-model="addForm.jwcode" placeholder="请输入精网号" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">客户姓名</el-text> |
|||
<el-input v-model="addForm.name" placeholder="请输入客户姓名" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">所属地区</el-text> |
|||
<el-input v-model="addForm.market" placeholder="请输入所属地区" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">活动名称</el-text> |
|||
<el-input v-model="addForm.orderCode" placeholder="请输入活动名称" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">产品名称</el-text> |
|||
<el-select v-model="addForm.refundType" placeholder="请选择产品名称" style="width:10vw;" clearable> |
|||
<el-option v-for="item in products" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">付款金额</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">付款币种</el-text> |
|||
<el-select v-model="addForm.refundCurrency" placeholder="请选择付款币种" style="width:10vw;" clearable> |
|||
<el-option v-for="item in currencies" :key="item.value" :label="item.label" |
|||
:value="item.value" /> |
|||
</el-select> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">支付方式</el-text> |
|||
<el-select v-model="addForm.paymentMethod" placeholder="请选择支付方式" style="width:10vw;"> |
|||
<el-option v-for="item in payments" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">转账凭证</el-text> |
|||
<el-form-item :rules="{ required: true, message: '请上传图片', trigger: 'change' }"> |
|||
<el-upload ref="uploadRef" list-type="picture-card" :auto-upload="false" |
|||
:http-request="customUpload" :on-change="handleImageChange" |
|||
:on-success="handleUploadSuccess" :on-error="handleUploadError" |
|||
:before-upload="beforeUpload" :show-file-list="false"> |
|||
<template #default> |
|||
<img v-if="addForm.imageUrl" :src="addForm.imageUrl" |
|||
style="width: 100%; height: 100%; object-fit: cover;"> |
|||
<el-icon v-else> |
|||
<Plus /> |
|||
</el-icon> |
|||
</template> |
|||
</el-upload> |
|||
</el-form-item> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">备注</el-text> |
|||
<el-input v-model="addForm.remark" placeholder="请输入备注" style="width:10vw;" clearable /> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">退款模式</el-text> |
|||
<el-radio-group v-model="addForm.refundMode"> |
|||
<el-radio value="1">全部退款</el-radio> |
|||
<el-radio value="2">部分退款</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">退款理由</el-text> |
|||
<el-input v-model="addForm.refundReason" placeholder="请输入退款理由" style="width:10vw;" :rows="5" |
|||
maxlength="100" show-word-limit type="textarea" /> |
|||
</div> |
|||
<div style="display:flex;justify-content: center;margin-top: 5vh;"> |
|||
<el-button type="primary" @click="">重置</el-button> |
|||
<el-button type="primary" @click="">提交</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<el-dialog v-model="showAudit1" title="审核" overflow draggable width="20vw"> |
|||
<div class="audit1"> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">精网号</el-text> |
|||
<el-input v-model="addForm.jwcode" placeholder="请输入精网号" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">姓名</el-text> |
|||
<el-input v-model="addForm.name" placeholder="请输入客户姓名" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">所属地区</el-text> |
|||
<el-input v-model="addForm.market" placeholder="请输入所属地区" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">活动名称</el-text> |
|||
<el-input v-model="addForm.orderCode" placeholder="请输入活动名称" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">商品名称</el-text> |
|||
<el-input v-model="addForm.orderCode" placeholder="请输入活动名称" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">付款币种</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">付款金额</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">支付方式</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">付款时间</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="dialog-item"> |
|||
<el-text style="width:4vw;">银行流水订单号</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable /> |
|||
</div> |
|||
|
|||
</div> |
|||
<div style="display:flex;justify-content: center;"> |
|||
<el-button type="primary" @click="">驳回</el-button> |
|||
<el-button type="primary" @click="">通过</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<el-dialog v-model="showAudit2" title="审核"> |
|||
<el-button type="primary" @click="">驳回</el-button> |
|||
|
|||
</el-dialog> |
|||
<router-view></router-view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref } from 'vue' |
|||
import { ElMessage } from 'element-plus' |
|||
import API from '@/util/http.js' |
|||
const uploadUrl = 'https://api.homilychart.com/hljw/api/aws/upload' |
|||
const searchForm = ref({ |
|||
jwcode: '' |
|||
}) |
|||
const addForm = ref({ |
|||
jwcode: '' |
|||
}) |
|||
const pagination = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50, |
|||
total: 0 |
|||
}) |
|||
const tableData = ref([]) |
|||
const showAdd = ref(false) |
|||
const showAudit1 = ref(false) |
|||
const showAudit2 = ref(false) |
|||
const uploadRef = ref(null) |
|||
const products = ref([ |
|||
{ |
|||
value: '1', |
|||
label: '产品1' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '产品2' |
|||
} |
|||
]) |
|||
const currencies = ref([ |
|||
{ |
|||
value: 'CNY', |
|||
label: '人民币' |
|||
}, |
|||
{ |
|||
value: 'USD', |
|||
label: '美元' |
|||
} |
|||
]) |
|||
const payments = ref([{ |
|||
value: '银行转账', |
|||
label: '银行转账' |
|||
}, |
|||
{ |
|||
value: '现金', |
|||
label: '现金' |
|||
}, |
|||
{ |
|||
value: '支票', |
|||
label: '支票' |
|||
}, |
|||
{ |
|||
value: '刷卡', |
|||
label: '刷卡' |
|||
}, |
|||
{ |
|||
value: 'Grabpay', |
|||
label: 'Grabpay' |
|||
}, |
|||
{ |
|||
value: 'Nets', |
|||
label: 'Nets' |
|||
}, |
|||
{ |
|||
value: 'PayPal', |
|||
label: 'PayPal' |
|||
}, |
|||
{ |
|||
value: 'Stripe-链接收款', |
|||
label: 'Stripe-链接收款' |
|||
}, |
|||
{ |
|||
value: 'Ipay88-链接收款', |
|||
label: 'Ipay88-链接收款' |
|||
}, |
|||
{ |
|||
value: 'PaymentAsia-链接收款', |
|||
label: 'PaymentAsia-链接收款' |
|||
}, |
|||
{ |
|||
value: 'Stripe-Link平台', |
|||
label: 'Stripe-Link平台' |
|||
}, |
|||
{ |
|||
value: 'PaymentAsia-Link平台', |
|||
label: 'PaymentAsia-Link平台' |
|||
}, |
|||
{ |
|||
value: 'FirstData-Link平台-Link平台', |
|||
label: 'FirstData-Link平台-Link平台' |
|||
}, |
|||
{ |
|||
value: 'IOS-Link平台', |
|||
label: 'IOS-Link平台' |
|||
}, |
|||
{ |
|||
value: 'Ipay88-Link平台', |
|||
label: 'Ipay88-Link平台' |
|||
import { onMounted, ref, watch } from 'vue' |
|||
import { useRoute, useRouter } from 'vue-router' |
|||
import { storeToRefs } from "pinia" |
|||
import { useAdminStore } from "@/store/index.js" |
|||
import { hasMenuPermission, permissionMapping } from "@/utils/menuTreePermission.js" |
|||
const router = useRouter() |
|||
const route = useRoute() |
|||
const adminStore = useAdminStore() |
|||
const { menuTree } = storeToRefs(adminStore) |
|||
|
|||
const activeTab = ref('') |
|||
const isService = ref(false) |
|||
const isFinance = ref(false) |
|||
const isCharge = ref(false) |
|||
const isHeader = ref(false) |
|||
|
|||
const navigateTo = (name) => { |
|||
activeTab.value = name |
|||
router.push({ name }) |
|||
} |
|||
]) |
|||
|
|||
const handleImageChange = (file) => { |
|||
uploadRef.value.submit() |
|||
} |
|||
const beforeUpload = (file) => { |
|||
const isJPG = file.type === 'image/jpeg' |
|||
const isPNG = file.type === 'image/png' |
|||
const isLt1 = file.size / 1024 < 1024 |
|||
const initPermissions = () => { |
|||
if (!menuTree.value || !menuTree.value.length) return |
|||
|
|||
if (!isJPG && !isPNG) { |
|||
ElMessage.error('上传图片只能是 JPG 或 PNG 格式') |
|||
return false |
|||
} |
|||
if (!isLt1) { |
|||
ElMessage.error('上传图片大小不能超过1MB') |
|||
return false |
|||
} |
|||
return true |
|||
} |
|||
const handleUploadSuccess = (response, file, fileList) => { |
|||
try { |
|||
addForm.value.imageUrl = response.data.url |
|||
console.log('==========================', response.data.url) |
|||
} catch (error) { |
|||
console.log('看看报错信息', error) |
|||
ElMessage.error(response.data.msg || '图片上传失败') |
|||
} |
|||
isService.value = hasMenuPermission(menuTree.value, permissionMapping.) |
|||
isArea.value = hasMenuPermission(menuTree.value, permissionMapping.) |
|||
isHeader.value = hasMenuPermission(menuTree.value, permissionMapping.) |
|||
console.log('====================================', isService.value, isArea.value,isHeader.value) |
|||
} |
|||
const handleUploadError = (error) => { |
|||
console.error('上传失败:', error) |
|||
addForm.value.imageUrl = null |
|||
ElMessage.error('图片上传失败，请重试') |
|||
} |
|||
const customUpload = async (options) => { |
|||
try { |
|||
const formData = new FormData() |
|||
formData.append('file', options.file) |
|||
|
|||
const response = await API({ |
|||
url: uploadUrl, |
|||
method: 'POST', |
|||
data: formData, |
|||
headers: { |
|||
'Content-Type': 'multipart/form-data' |
|||
} |
|||
}) |
|||
if (response.code === 200 && response.data) { |
|||
handleUploadSuccess(response, options.file, [options.file]) |
|||
ElMessage.success(response.msg || '上传成功') |
|||
} else { |
|||
ElMessage.error(response.msg || '上传失败') |
|||
} |
|||
} catch (error) { |
|||
console.error('上传错误:', error) |
|||
ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`) |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.condition1 { |
|||
width: 82vw; |
|||
display: flex; |
|||
height: 4vh; |
|||
|
|||
.condition-item { |
|||
width: 19%; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
margin-right: 0.5vw; |
|||
} |
|||
// 默认跳转逻辑 |
|||
const getDefaultAuditRoute = () => { |
|||
initPermissions() |
|||
if (isService.value) return 'userPermission' |
|||
if (isArea.value) return 'rolePermission' |
|||
if (isHeader.value) return 'headerPermission' |
|||
|
|||
.condition-item2 { |
|||
width: 19%; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-right: 0.5vw; |
|||
} |
|||
return 'userPermission' |
|||
} |
|||
|
|||
.addDialog { |
|||
.left { |
|||
width: 50%; |
|||
height: 60vh; |
|||
|
|||
.dialog-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
width: 50%; |
|||
height: 50vh; |
|||
|
|||
.dialog-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
} |
|||
// 监听路由变化更新标签状态 |
|||
watch(() => route.name, (newName) => { |
|||
initPermissions() |
|||
if (newName === 'userPermission' || newName === 'rolePermission') { |
|||
activeTab.value = newName |
|||
} else if (newName === 'permissions') { |
|||
// 每次访问 /permissions 都进行默认跳转 |
|||
const defaultRoute = getDefaultAuditRoute() |
|||
navigateTo(defaultRoute) |
|||
} |
|||
} |
|||
|
|||
.audit1 { |
|||
height: 47vh; |
|||
}) |
|||
|
|||
.dialog-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
// 初始化逻辑 |
|||
onMounted(() => { |
|||
initPermissions() |
|||
if (route.name === 'permissions') { |
|||
const defaultRoute = getDefaultAuditRoute() |
|||
navigateTo(defaultRoute) |
|||
} else { |
|||
// 非父路由初始化当前标签状态 |
|||
if (route.name === 'userPermission' || route.name === 'rolePermission') { |
|||
activeTab.value = route.name |
|||
} |
|||
|
|||
.audit-btn { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
} |
|||
|
|||
.audit2{ |
|||
|
|||
} |
|||
</style> |
|||
}) |
|||
</script> |
|||
@ -0,0 +1,762 @@ |
|||
<!-- 总部财务&管理员 --> |
|||
<!-- 客服 --> |
|||
<template> |
|||
<el-card style="margin-bottom: 0.5vh;"> |
|||
<div class="condition"> |
|||
<div class="item1"> |
|||
<el-text size="large" style="width:4vw;">精网号</el-text> |
|||
<el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="item1"> |
|||
<el-text size="large" style="width:4vw;">客户姓名</el-text> |
|||
<el-input v-model="searchForm.name" placeholder="请输入客户姓名" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="item1"> |
|||
<el-text size="large" style="width:4vw;">所属地区</el-text> |
|||
<el-input v-model="searchForm.market" placeholder="请输入所属地区" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="item1"> |
|||
<el-text size="large" style="width:4vw;">产品名称</el-text> |
|||
<el-input v-model="searchForm.goodsName" placeholder="请输入产品名称" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="item1"> |
|||
<el-text size="large" style="width:4vw;">订单状态</el-text> |
|||
<el-select v-model="searchForm.status" style="width:9vw;"> |
|||
<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
<div class="condition"> |
|||
<div class="item2"> |
|||
<el-text size="large" style="width:4vw;">付款币种</el-text> |
|||
<el-input v-model="searchForm.payCurrency" placeholder="请输入付款币种" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="item2"> |
|||
<el-text size="large" style="width:4vw;">支付方式</el-text> |
|||
<el-input v-model="searchForm.payType" placeholder="请输入支付方式" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="item2" style="width: 28.5vw;"> |
|||
<el-text size="large" style="width:4vw;">付款时间</el-text> |
|||
<el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="起始时间" |
|||
end-placeholder="结束时间" style="width:22vw;" @change="handleDatePickerChange" |
|||
:disabled-date="disabledDate" /> |
|||
</div> |
|||
<div> |
|||
<el-button type="success">重置</el-button> |
|||
<el-button type="primary">查询</el-button> |
|||
<el-button type="warning">导出excel</el-button> |
|||
<el-button type="primary">查看导出列表</el-button> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
|
|||
<div style="display: flex;"> |
|||
<el-button type="primary" @click="showAdd = true">地区客服编辑</el-button> |
|||
<el-button type="primary" @click="showAudit1 = true">审核1</el-button> |
|||
<el-button type="primary" @click="showAudit2 = true">审核2</el-button> |
|||
<el-button type="primary" @click="showSteps = true">看看步骤条</el-button> |
|||
<el-button type="primary" @click="showBack = true">看看撤回</el-button> |
|||
<el-button type="primary" @click="showError = true">退款金额有误</el-button> |
|||
</div> |
|||
|
|||
<el-card style="margin-top: 0.5vh;"> |
|||
<el-table :data="tableData" style="height:64vh;width:82vw"> |
|||
<el-table-column type="index" label="序号" width="60" fixed="left" /> |
|||
<el-table-column prop="name" label="Homily ID" width="120" fixed="left" /> |
|||
<el-table-column prop="jwcode" label="姓名" width="120" fixed="left" show-overflow-tooltip /> |
|||
<el-table-column prop="market" label="所属地区" width="120" /> |
|||
<el-table-column prop="orderCode" label="活动名称" width="120px" v-if="isKF" show-overflow-tooltip /> |
|||
<el-table-column prop="refundType" label="产品名称" width="120" /> |
|||
<el-table-column prop="refundType" label="产品数量" width="120" /> |
|||
<el-table-column prop="refundType" label="退款方式" width="120" v-if="!isKF" /> |
|||
<el-table-column prop="refundType" label="提交人" width="120" v-if="!isKF" /> |
|||
<el-table-column prop="refundType" label="退款理由" width="120" v-if="!isKF" /> |
|||
<el-table-column prop="refundType" label="付款币种" width="120" v-if="isKF" /> |
|||
<el-table-column prop="refundType" label="付款金额" width="120" v-if="isKF" /> |
|||
<el-table-column prop="refundType" label="支付方式" width="120" v-if="isKF" /> |
|||
<el-table-column prop="refundType" label="付款时间" width="120" v-if="isKF" /> |
|||
<el-table-column prop="refundType" label="转账凭证" width="120" v-if="isKF" /> |
|||
<el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip /> |
|||
<el-table-column prop="adminName" label="订单状态" width="120" /> |
|||
<el-table-column prop="operation" label="操作" fixed="right" width="150px" v-if="!isKF"> |
|||
<template #default="scope"> |
|||
<div class="operation"> |
|||
<el-popconfirm title="确定要通过此条记录吗？" @confirm="handleApprove(scope.row)"> |
|||
<template #reference> |
|||
<el-button v-if="hasrefundWaitThough" :disabled="clicked || cancelClicked" |
|||
type="primary" text> |
|||
通过 |
|||
</el-button> |
|||
</template> |
|||
<template #actions="{ confirm, cancel }"> |
|||
<el-button size="small" @click="cancel">取消</el-button> |
|||
<el-button type="primary" size="small" :disabled="clicked" @click="confirm"> |
|||
确认 |
|||
</el-button> |
|||
</template> |
|||
</el-popconfirm> |
|||
<el-button v-if="hasrefundWaitReject" :disabled="clicked || cancelClicked" type="primary" text |
|||
@click="showRejectDialog(scope.row)"> |
|||
驳回 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" |
|||
layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" |
|||
@size-change="handlePageSizeChange" @current-change="handleCurrentChange" |
|||
style="margin-top: 1vh;"></el-pagination> |
|||
</el-card> |
|||
|
|||
<el-dialog v-model="showAudit1" title="审核" overflow draggable width="20vw"> |
|||
<div class="audit1"> |
|||
<div class="audit-item"> |
|||
<el-text style="width:4vw;">精网号</el-text> |
|||
<el-input v-model="addForm.jwcode" placeholder="请输入精网号" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="audit-item"> |
|||
<el-text style="width:4vw;">姓名</el-text> |
|||
<el-input v-model="addForm.name" placeholder="请输入客户姓名" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="audit-item"> |
|||
<el-text style="width:4vw;">所属地区</el-text> |
|||
<el-input v-model="addForm.market" placeholder="请输入所属地区" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="audit-item"> |
|||
<el-text style="width:4vw;">活动名称</el-text> |
|||
<el-input v-model="addForm.orderCode" placeholder="请输入活动名称" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="audit-item"> |
|||
<el-text style="width:4vw;">商品名称</el-text> |
|||
<el-input v-model="addForm.orderCode" placeholder="请输入活动名称" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="audit-item"> |
|||
<el-text style="width:4vw;">付款币种</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="audit-item"> |
|||
<el-text style="width:4vw;">付款金额</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="audit-item"> |
|||
<el-text style="width:4vw;">支付方式</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="audit-item"> |
|||
<el-text style="width:4vw;">付款时间</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="audit-item"> |
|||
<el-text style="width:4vw;">银行流水订单号</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable /> |
|||
</div> |
|||
|
|||
</div> |
|||
<div style="display:flex;justify-content: center;"> |
|||
<el-button type="primary" @click="">驳回</el-button> |
|||
<el-button type="primary" @click="">通过</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<el-dialog v-model="showAudit2" title="审核" class="audit2" overflow draggable> |
|||
<div class="top"> |
|||
<el-button @click="" class="smallTitle" size="small">退款申请信息</el-button> |
|||
<div class="top-item"> |
|||
<el-text style="width:4vw;" size="small">退款类型</el-text> |
|||
<el-input v-model="auditForm.refundType" placeholder="请输入退款类型" size="small" style="width:10vw;" |
|||
clearable></el-input> |
|||
</div> |
|||
<div class="top-item"> |
|||
<el-text style="width:4vw;" size="small">退款金额</el-text> |
|||
<el-input v-model="auditForm.refundAmount" placeholder="请输入退款金额" size="small" style="width:10vw;" |
|||
clearable></el-input> |
|||
</div> |
|||
<div class="top-item"> |
|||
<el-text style="width:4vw;" size="small">退款备注</el-text> |
|||
<el-input v-model="auditForm.refundReason" placeholder="请输入退款备注" size="small" style="width:10vw;" |
|||
:rows="3" maxlength="100" show-word-limit type="textarea" /> |
|||
</div> |
|||
</div> |
|||
<el-button @click="" class="smallTitle" size="small">原订单信息</el-button> |
|||
<div class="center"> |
|||
<div class="center-left"> |
|||
<div class="center-item"> |
|||
<el-text style="width:4vw;" size="small">精网号</el-text> |
|||
<el-input v-model="addForm.jwcode" placeholder="请输入精网号" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="center-item"> |
|||
<el-text style="width:4vw;" size="small">所属地区</el-text> |
|||
<el-input v-model="addForm.name" placeholder="请输入所属地区" size="small" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="center-item"> |
|||
<el-text style="width:4vw;" size="small">产品名称</el-text> |
|||
<el-input v-model="addForm.productName" placeholder="请输入产品名称" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="center-item"> |
|||
<el-text style="width:4vw;" size="small">付款金额</el-text> |
|||
<el-input v-model="addForm.orderCode" placeholder="请输入付款金额" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="center-item"> |
|||
<el-text style="width:4vw;" size="small">到账金额</el-text> |
|||
<el-input v-model="addForm.orderCode" placeholder="请输入到账金额" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="center-item"> |
|||
<el-text style="width:4vw;" size="small">支付方式</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入支付方式" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="center-item"> |
|||
<el-text style="width:4vw;" size="small">付款金额</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="center-item"> |
|||
<el-text style="width:3vw;padding-right: 1vw;" size="small">银行流水订单号</el-text> |
|||
<el-input size="small" v-model="addForm.bankOrderNo" placeholder="请输入银行流水订单号" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="center-item"> |
|||
<el-text style="width:4vw;" size="small">审核人</el-text> |
|||
<el-input v-model="addForm.auditUser" placeholder="请输入审核人" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="center-item"> |
|||
<el-text style="width:4vw;" size="small">转账凭证</el-text> |
|||
<el-form-item :rules="{ required: true, message: '请上传图片', trigger: 'change' }"> |
|||
<el-upload ref="uploadRef" :auto-upload="false" :http-request="customUpload" |
|||
list-type="picture-card" :on-change="handleImageChange" class="image" |
|||
:on-success="handleUploadSuccess" :on-error="handleUploadError" |
|||
:before-upload="beforeUpload" :show-file-list="false"> |
|||
<template #default> |
|||
<img v-if="addForm.imageUrl" :src="addForm.imageUrl" |
|||
style="width: 100%; height: 100%; object-fit: cover;"> |
|||
<el-icon v-else> |
|||
<Plus /> |
|||
</el-icon> |
|||
</template> |
|||
</el-upload> |
|||
</el-form-item> |
|||
</div> |
|||
</div> |
|||
<div class="center-right"> |
|||
<div class="right-item"> |
|||
<el-text style="width:4vw;" size="small">客户姓名</el-text> |
|||
<el-input v-model="addForm.customerName" placeholder="请输入客户姓名" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="right-item"> |
|||
<el-text style="width:4vw;" size="small">活动名称</el-text> |
|||
<el-input v-model="addForm.activityName" placeholder="请输入活动名称" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="right-item"> |
|||
<el-text style="width:4vw;" size="small">付款币种</el-text> |
|||
<el-input v-model="addForm.paymentCurrency" placeholder="请输入付款币种" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="right-item"> |
|||
<el-text style="width:4vw;" size="small">到账币种</el-text> |
|||
<el-input v-model="addForm.receiveCurrency" placeholder="请输入到账币种" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="right-item"> |
|||
<el-text style="width:4vw;" size="small">手续费</el-text> |
|||
<el-input v-model="addForm.fee" placeholder="请输入手续费" size="small" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="right-item"> |
|||
<el-text style="width:4vw;" size="small">付款时间</el-text> |
|||
<el-input v-model="addForm.paymentTime" placeholder="请输入付款时间" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="right-item"> |
|||
<el-text style="width:4vw;" size="small">提交人</el-text> |
|||
<el-input v-model="addForm.submitUser" placeholder="请输入提交人" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="right-item"> |
|||
<el-text style="width:4vw;" size="small">到账时间</el-text> |
|||
<el-input v-model="addForm.receiveTime" placeholder="请输入到账时间" size="small" style="width:10vw;" |
|||
clearable /> |
|||
</div> |
|||
<div class="right-item"> |
|||
<el-text style="width:4vw;" size="small">备注</el-text> |
|||
<el-input v-model="addForm.remark" placeholder="请输入备注" size="small" style="width:10vw;" :row="3" |
|||
clearable /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<el-button @click="" class="smallTitle" size="small">转交信息</el-button> |
|||
<div class="bottom"> |
|||
<div class="bottom-item"> |
|||
<el-text style="width:4vw;" size="small">执行人</el-text> |
|||
<el-select v-model="addForm.executor" size="small" placeholder="请选择执行人" style="width:10vw;"> |
|||
<el-option v-for="item in executor" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<el-dialog v-model="showSteps" title="唉！！！" overflow draggable width="1206px" height="506px" :style="{ |
|||
backgroundImage: 'url(/src/assets/images/背景图.png)', |
|||
backgroundSize: 'cover', |
|||
backgroundPosition: 'center' |
|||
}"> |
|||
<div class="steps"> |
|||
<div class="steps-content"> |
|||
<el-steps style="min-width: 60vw" :active="1" align-center> |
|||
<el-step> <template #title> |
|||
<div>提交人<br>你是死的</div> |
|||
</template> |
|||
<template #icon> |
|||
<img src="@/assets/images/已审核.png" alt="已审核图标"> |
|||
</template> |
|||
</el-step> |
|||
<el-step title="地区财务"> |
|||
<template #icon> |
|||
<img src="@/assets/images/待审核.png" alt="待审核图标"> |
|||
</template> |
|||
</el-step> |
|||
<el-step title="地区负责人"> |
|||
<template #icon> |
|||
<img src="@/assets/images/还没传到.png" alt="还没传到图标"> |
|||
</template> |
|||
</el-step> |
|||
<el-step title="总部财务"> |
|||
<template #icon> |
|||
<img src="@/assets/images/还没传到.png" alt="还没传到图标"> |
|||
</template> |
|||
</el-step> |
|||
<el-step title="指定执行人"> |
|||
<template #icon> |
|||
<img src="@/assets/images/还没传到.png" alt="还没传到图标"> |
|||
</template> |
|||
</el-step> |
|||
</el-steps> |
|||
</div> |
|||
<div class="steps-status"> |
|||
<el-steps style="min-width: 50vw" :active="1" finish-status="success" simple> |
|||
<el-step title="已通过" /> |
|||
<el-step title="待审核" /> |
|||
<el-step title="待审核" /> |
|||
<el-step title="待审核" /> |
|||
<el-step title="待审核" /> |
|||
</el-steps> |
|||
</div> |
|||
<div class="steps-btn"> |
|||
<el-button type="primary">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
<script setup> |
|||
import { ref, onMounted } from 'vue' |
|||
import { ElMessage } from 'element-plus' |
|||
import API from '@/util/http.js' |
|||
const uploadUrl = 'https://api.homilychart.com/hljw/api/aws/upload' |
|||
import { useAdminStore } from "@/store/index.js" |
|||
import { storeToRefs } from "pinia" |
|||
import dayjs from 'dayjs' |
|||
const adminStore = useAdminStore() |
|||
const { adminData, menuTree } = storeToRefs(adminStore) |
|||
import { permissionMapping, findMenuById } from "@/utils/menuTreePermission.js" |
|||
|
|||
//客服 |
|||
const isKF = ref(adminData.value.adminName.includes('客服')) |
|||
// 地区 |
|||
const isDQ = ref(adminData.value.adminName.includes('财务') || adminData.value.adminName.includes('经理') && !adminData.value.adminName.includes('总部')) |
|||
// 总部 |
|||
const isZB = ref(adminData.value.adminName.includes('总部') || adminData.value.adminName.includes('管理员')) |
|||
const searchForm = ref({ |
|||
jwcode: '' |
|||
}) |
|||
const addForm = ref({ |
|||
jwcode: '' |
|||
}) |
|||
const auditForm = ref({ |
|||
refundType: '' |
|||
}) |
|||
const pagination = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50, |
|||
total: 0 |
|||
}) |
|||
const tableData = ref([]) |
|||
const showAdd = ref(false) |
|||
const showAudit1 = ref(false) |
|||
const showAudit2 = ref(false) |
|||
const showSteps = ref(false) |
|||
const uploadRef = ref(null) |
|||
const showBack = ref(false) |
|||
const showError = ref(false) |
|||
const executor = ref([ |
|||
{ |
|||
value: '305485', |
|||
label: '新:Zoe' |
|||
}, |
|||
{ |
|||
value: '200723', |
|||
label: '马:Jennifer' |
|||
}, |
|||
{ |
|||
value: '301388', |
|||
label: '港:林育平' |
|||
}, |
|||
{ |
|||
value: '839448', |
|||
label: '加:Mandy' |
|||
}, |
|||
{ |
|||
value: '304904', |
|||
label: '泰:杨丽娇' |
|||
}, |
|||
{ |
|||
value: '315915', |
|||
label: '越:范秋霞' |
|||
} |
|||
]) |
|||
const products = ref([ |
|||
{ |
|||
value: '1', |
|||
label: '产品1' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '产品2' |
|||
} |
|||
]) |
|||
const currencies = ref([ |
|||
{ |
|||
value: 'CNY', |
|||
label: '人民币' |
|||
}, |
|||
{ |
|||
value: 'USD', |
|||
label: '美元' |
|||
} |
|||
]) |
|||
const payments = ref([{ |
|||
value: '银行转账', |
|||
label: '银行转账' |
|||
}, |
|||
{ |
|||
value: '现金', |
|||
label: '现金' |
|||
}, |
|||
{ |
|||
value: '支票', |
|||
label: '支票' |
|||
}, |
|||
{ |
|||
value: '刷卡', |
|||
label: '刷卡' |
|||
}, |
|||
{ |
|||
value: 'Grabpay', |
|||
label: 'Grabpay' |
|||
}, |
|||
{ |
|||
value: 'Nets', |
|||
label: 'Nets' |
|||
}, |
|||
{ |
|||
value: 'PayPal', |
|||
label: 'PayPal' |
|||
}, |
|||
{ |
|||
value: 'Stripe-链接收款', |
|||
label: 'Stripe-链接收款' |
|||
}, |
|||
{ |
|||
value: 'Ipay88-链接收款', |
|||
label: 'Ipay88-链接收款' |
|||
}, |
|||
{ |
|||
value: 'PaymentAsia-链接收款', |
|||
label: 'PaymentAsia-链接收款' |
|||
}, |
|||
{ |
|||
value: 'Stripe-Link平台', |
|||
label: 'Stripe-Link平台' |
|||
}, |
|||
{ |
|||
value: 'PaymentAsia-Link平台', |
|||
label: 'PaymentAsia-Link平台' |
|||
}, |
|||
{ |
|||
value: 'FirstData-Link平台-Link平台', |
|||
label: 'FirstData-Link平台-Link平台' |
|||
}, |
|||
{ |
|||
value: 'IOS-Link平台', |
|||
label: 'IOS-Link平台' |
|||
}, |
|||
{ |
|||
value: 'Ipay88-Link平台', |
|||
label: 'Ipay88-Link平台' |
|||
} |
|||
]) |
|||
const statusList = ref([ |
|||
{ |
|||
value: '10', |
|||
label: '地区财务待审核' |
|||
}, |
|||
{ |
|||
value: '12', |
|||
label: '地区财务驳回' |
|||
}, |
|||
{ |
|||
value: '20', |
|||
label: '地区负责人待审核' |
|||
}, |
|||
{ |
|||
value: '22', |
|||
label: '地区负责人驳回' |
|||
}, |
|||
{ |
|||
value: '30', |
|||
label: '总部财务待审核' |
|||
}, |
|||
{ |
|||
value: '32', |
|||
label: '总部财务驳回' |
|||
}, |
|||
{ |
|||
value: '40', |
|||
label: '执行人待处理' |
|||
}, |
|||
{ |
|||
value: '41', |
|||
label: '退款完成' |
|||
} |
|||
]) |
|||
// 查全部 |
|||
const getRefund = async function () { |
|||
try { |
|||
const params = { |
|||
cashCollection: { |
|||
status: null, |
|||
//10：地区财务待审核；12：地区财务驳回； |
|||
// 20：地区负责人待审核；22：地区负责人驳回； |
|||
// 30：总部财务待审核；32：总部财务驳回； |
|||
// 40：执行人待处理；41：执行人已处理，退款完成； |
|||
orderCode: null,//订单号 |
|||
name: null,//姓名 |
|||
jwcode: null,//精网号 |
|||
market: null,//地区 |
|||
goodsName: null,//商品名 |
|||
refundModel: null,//退款类型, |
|||
startTime: "", |
|||
endTime: "" |
|||
} |
|||
} |
|||
|
|||
const result = await API({ |
|||
url: '/hljw/api/refund/query', |
|||
method: 'POST', |
|||
data: params |
|||
}) |
|||
|
|||
tableData.value = result.data || [] |
|||
} catch (error) { |
|||
ElMessage.error(error.message || '查询失败') |
|||
} |
|||
} |
|||
const handleImageChange = (file) => { |
|||
uploadRef.value.submit() |
|||
} |
|||
const beforeUpload = (file) => { |
|||
const isJPG = file.type === 'image/jpeg' |
|||
const isPNG = file.type === 'image/png' |
|||
const isLt1 = file.size / 1024 < 1024 |
|||
|
|||
if (!isJPG && !isPNG) { |
|||
ElMessage.error('上传图片只能是 JPG 或 PNG 格式') |
|||
return false |
|||
} |
|||
if (!isLt1) { |
|||
ElMessage.error('上传图片大小不能超过1MB') |
|||
return false |
|||
} |
|||
return true |
|||
} |
|||
const handleUploadSuccess = (response, file, fileList) => { |
|||
try { |
|||
addForm.value.imageUrl = response.data.url |
|||
console.log('==========================', response.data.url) |
|||
} catch (error) { |
|||
console.log('看看报错信息', error) |
|||
ElMessage.error(response.data.msg || '图片上传失败') |
|||
} |
|||
} |
|||
const handleUploadError = (error) => { |
|||
console.error('上传失败:', error) |
|||
addForm.value.imageUrl = null |
|||
ElMessage.error('图片上传失败，请重试') |
|||
} |
|||
const customUpload = async (options) => { |
|||
try { |
|||
const formData = new FormData() |
|||
formData.append('file', options.file) |
|||
|
|||
const response = await API({ |
|||
url: uploadUrl, |
|||
method: 'POST', |
|||
data: formData, |
|||
headers: { |
|||
'Content-Type': 'multipart/form-data' |
|||
} |
|||
}) |
|||
if (response.code === 200 && response.data) { |
|||
handleUploadSuccess(response, options.file, [options.file]) |
|||
ElMessage.success(response.msg || '上传成功') |
|||
} else { |
|||
ElMessage.error(response.msg || '上传失败') |
|||
} |
|||
} catch (error) { |
|||
console.error('上传错误:', error) |
|||
ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`) |
|||
} |
|||
} |
|||
|
|||
onMounted(() => { |
|||
console.log('???????????????????', adminData.value) |
|||
}) |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.condition { |
|||
width: 82vw; |
|||
display: flex; |
|||
align-items: center; |
|||
height: 4vh; |
|||
|
|||
.item1 { |
|||
width: 18%; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
margin-right: 0.5vw; |
|||
} |
|||
|
|||
.item2 { |
|||
width: 18%; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-right: 0.5vw; |
|||
} |
|||
} |
|||
|
|||
.audit1 { |
|||
height: 47vh; |
|||
|
|||
.audit-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
} |
|||
} |
|||
|
|||
.audit2 { |
|||
width: 30vw; |
|||
height: auto; |
|||
|
|||
.top { |
|||
width: 30vw; |
|||
height: 17vh; |
|||
|
|||
.top-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
} |
|||
} |
|||
|
|||
.smallTitle { |
|||
background-color: white; |
|||
color: rgb(64, 158, 255); |
|||
border-color: rgb(64, 158, 255); |
|||
margin-bottom: 0.5vh; |
|||
} |
|||
|
|||
.center { |
|||
display: flex; |
|||
width: 30vw; |
|||
height: 41vh; |
|||
|
|||
.dialog-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
} |
|||
|
|||
.center-left { |
|||
width: 60%; |
|||
|
|||
.image { |
|||
width: 4vw !important; |
|||
height: 4vw !important; |
|||
} |
|||
|
|||
:deep(.el-upload--picture-card) { |
|||
width: 4vw !important; |
|||
height: 4vw !important; |
|||
padding: 0 !important; |
|||
} |
|||
|
|||
.center-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
} |
|||
} |
|||
|
|||
.center-right { |
|||
|
|||
.right-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bottom { |
|||
width: 30vw; |
|||
height: 5vh; |
|||
|
|||
.bottom-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.steps { |
|||
.steps-content { |
|||
width: 45vw; |
|||
height: 15vh; |
|||
display: flex; |
|||
justify-content: center; |
|||
padding-top: 15vw; |
|||
padding-left: 8vw; |
|||
} |
|||
|
|||
.steps-status { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.steps-btn { |
|||
height: 15vh; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,629 @@ |
|||
<!-- 客服 --> |
|||
<template> |
|||
<el-card style="margin-bottom: 0.5vh;"> |
|||
<div class="condition"> |
|||
<div class="item1"> |
|||
<el-text size="large" style="width:4vw;">精网号</el-text> |
|||
<el-input v-model="searchForm.jwcode" placeholder="请输入精网号" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="item1"> |
|||
<el-text size="large" style="width:4vw;">客户姓名</el-text> |
|||
<el-input v-model="searchForm.name" placeholder="请输入客户姓名" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="item1"> |
|||
<el-text size="large" style="width:4vw;">所属地区</el-text> |
|||
<el-input v-model="searchForm.market" placeholder="请输入所属地区" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="item1"> |
|||
<el-text size="large" style="width:4vw;">产品名称</el-text> |
|||
<el-input v-model="searchForm.goodsName" placeholder="请输入产品名称" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="item1"> |
|||
<el-text size="large" style="width:4vw;">订单状态</el-text> |
|||
<el-select v-model="searchForm.status" style="width:9vw;"> |
|||
<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</div> |
|||
</div> |
|||
<div class="condition"> |
|||
<div class="item2"> |
|||
<el-text size="large" style="width:4vw;">付款币种</el-text> |
|||
<el-input v-model="searchForm.payCurrency" placeholder="请输入付款币种" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="item2"> |
|||
<el-text size="large" style="width:4vw;">支付方式</el-text> |
|||
<el-input v-model="searchForm.payType" placeholder="请输入支付方式" style="width:9vw;" clearable /> |
|||
</div> |
|||
<div class="item2" style="width: 28.5vw;"> |
|||
<el-text size="large" style="width:4vw;">付款时间</el-text> |
|||
<el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="起始时间" |
|||
end-placeholder="结束时间" style="width:22vw;" @change="handleDatePickerChange" |
|||
:disabled-date="disabledDate" /> |
|||
</div> |
|||
<div> |
|||
<el-button type="success">重置</el-button> |
|||
<el-button type="primary">查询</el-button> |
|||
<el-button type="warning">导出excel</el-button> |
|||
<el-button type="primary">查看导出列表</el-button> |
|||
</div> |
|||
</div> |
|||
</el-card> |
|||
|
|||
<div style="display: flex;"> |
|||
<el-button type="primary" @click="showEdit = true">地区客服编辑</el-button> |
|||
<el-button type="primary" @click="showSteps = true">看看步骤条</el-button> |
|||
<el-button type="primary" @click="showBack = true">看看撤回</el-button> |
|||
<el-button type="primary" @click="showError = true">退款金额有误</el-button> |
|||
</div> |
|||
|
|||
<el-card style="margin-top: 0.5vh;"> |
|||
<el-table :data="tableData" style="height:64vh;width:82vw"> |
|||
<el-table-column type="index" label="序号" width="60" fixed="left" /> |
|||
<el-table-column prop="name" label="Homily ID" width="120" fixed="left" /> |
|||
<el-table-column prop="jwcode" label="姓名" width="120" fixed="left" show-overflow-tooltip /> |
|||
<el-table-column prop="market" label="所属地区" width="120" /> |
|||
<el-table-column prop="orderCode" label="活动名称" width="120px" show-overflow-tooltip /> |
|||
<el-table-column prop="refundType" label="产品名称" width="120" /> |
|||
<el-table-column prop="refundType" label="产品数量" width="120" /> |
|||
<el-table-column prop="refundType" label="付款币种" width="120" /> |
|||
<el-table-column prop="refundType" label="付款金额" width="120" /> |
|||
<el-table-column prop="refundType" label="支付方式" width="120" /> |
|||
<el-table-column prop="refundType" label="付款时间" width="120" /> |
|||
<el-table-column prop="refundType" label="转账凭证" width="120" /> |
|||
<el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip /> |
|||
<el-table-column prop="adminName" label="订单状态" width="120" /> |
|||
<el-table-column prop="operation" label="操作" fixed="right" width="150px"> |
|||
<template #default="scope"> |
|||
<div class="operation"> |
|||
<el-button v-if="row.status === '未审核'" type="primary" text @click="showBack = true"> |
|||
撤回 |
|||
</el-button> |
|||
<el-button v-if="row.status === '已撤回'" type="primary" text @click="showEdit = true"> |
|||
编辑 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" |
|||
layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" |
|||
@size-change="handlePageSizeChange" @current-change="handleCurrentChange" |
|||
style="margin-top: 1vh;"></el-pagination> |
|||
</el-card> |
|||
|
|||
<el-dialog v-model="showEdit" title="退款" class="editDialog" overflow draggable style="width: 40vw;"> |
|||
<div style="display: flex;"> |
|||
<div class="left"> |
|||
<div class="add-item"> |
|||
<el-text style="width:4vw;">精网号</el-text> |
|||
<el-input v-model="addForm.jwcode" placeholder="请输入精网号" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="add-item"> |
|||
<el-text style="width:4vw;">客户姓名</el-text> |
|||
<el-input v-model="addForm.name" placeholder="请输入客户姓名" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="add-item"> |
|||
<el-text style="width:4vw;">所属地区</el-text> |
|||
<el-input v-model="addForm.market" placeholder="请输入所属地区" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="add-item"> |
|||
<el-text style="width:4vw;">活动名称</el-text> |
|||
<el-input v-model="addForm.orderCode" placeholder="请输入活动名称" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="add-item"> |
|||
<el-text style="width:4vw;">产品名称</el-text> |
|||
<el-select v-model="addForm.refundType" placeholder="请选择产品名称" style="width:10vw;" clearable> |
|||
<el-option v-for="item in products" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</div> |
|||
<div class="add-item"> |
|||
<el-text style="width:4vw;">产品数量</el-text> |
|||
<el-input v-model="addForm.productQuantity" placeholder="请输入产品数量" style="width:10vw;" clearable /> |
|||
个 |
|||
</div> |
|||
<div class="add-item"> |
|||
<el-text style="width:4vw;">付款币种</el-text> |
|||
<el-select v-model="addForm.refundCurrency" placeholder="请选择付款币种" style="width:10vw;" clearable> |
|||
<el-option v-for="item in currencies" :key="item.value" :label="item.label" |
|||
:value="item.value" /> |
|||
</el-select> |
|||
</div> |
|||
<div class="add-item"> |
|||
<el-text style="width:4vw;">付款金额</el-text> |
|||
<el-input v-model="addForm.refundAmount" placeholder="请输入付款金额" style="width:10vw;" clearable /> |
|||
</div> |
|||
<div class="add-item"> |
|||
<el-text style="width:4vw;">支付方式</el-text> |
|||
<el-select v-model="addForm.paymentMethod" placeholder="请选择支付方式" style="width:10vw;"> |
|||
<el-option v-for="item in payments" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</div> |
|||
<div class="add-item"> |
|||
<el-text style="width:4vw;">付款时间</el-text> |
|||
<el-date-picker v-model="addForm.paymentTime" type="datetime" style="width:10vw;" |
|||
placeholder="请选择付款时间" /> |
|||
</div> |
|||
<div class="add-item"> |
|||
<el-text style="width:4vw;" size="small">转账凭证</el-text> |
|||
<el-form-item :rules="{ required: true, message: '请上传图片', trigger: 'change' }"> |
|||
<el-upload ref="uploadRef" :auto-upload="false" :http-request="customUpload" |
|||
list-type="picture-card" :on-change="handleImageChange" :on-success="handleUploadSuccess" |
|||
:on-error="handleUploadError" :before-upload="beforeUpload" :show-file-list="false"> |
|||
<template #default> |
|||
<img v-if="addForm.imageUrl" :src="addForm.imageUrl" |
|||
style="width: 100%; height: 100%; object-fit: cover;"> |
|||
<el-icon v-else> |
|||
<Plus /> |
|||
</el-icon> |
|||
</template> |
|||
</el-upload> |
|||
</el-form-item> |
|||
</div> |
|||
<div class="add-item"> |
|||
<el-text style="width:4vw;">备注</el-text> |
|||
<el-input v-model="addForm.remark" placeholder="请输入备注" style="width:10vw;" :rows="3" type="textarea" |
|||
maxLength="100" show-word-limit /> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="add-item"> |
|||
<el-text style="width:4vw;">退款模式</el-text> |
|||
<el-radio-group v-model="addForm.refundMode"> |
|||
<el-radio value="1">全部退款</el-radio> |
|||
<el-radio value="2">部分退款</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
<div class="add-item"> |
|||
<el-text style="width:4vw;">退款理由</el-text> |
|||
<el-input v-model="addForm.refundReason" placeholder="请输入退款理由" style="width:10vw;" :rows="5" |
|||
maxlength="150" show-word-limit type="textarea" /> |
|||
</div> |
|||
<div>ps:请在备注中表明用户的退款需求。</div> |
|||
<div style="display:flex;justify-content: center;margin-top: 5vh;"> |
|||
<el-button type="default" @click="">重置</el-button> |
|||
<el-button type="primary" @click="">提交</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<el-dialog v-model="showSteps" title="唉！！！" overflow draggable width="1206px" height="506px" :style="{ |
|||
backgroundImage: 'url(/src/assets/images/背景图.png)', |
|||
backgroundSize: 'cover', |
|||
backgroundPosition: 'center' |
|||
}"> |
|||
<div class="steps"> |
|||
<div class="steps-content"> |
|||
<el-steps style="min-width: 60vw" :active="1" align-center> |
|||
<el-step> <template #title> |
|||
<div>提交人<br>你是死的</div> |
|||
</template> |
|||
<template #icon> |
|||
<img src="@/assets/images/已审核.png" alt="已审核图标"> |
|||
</template> |
|||
</el-step> |
|||
<el-step title="地区财务"> |
|||
<template #icon> |
|||
<img src="@/assets/images/待审核.png" alt="待审核图标"> |
|||
</template> |
|||
</el-step> |
|||
<el-step title="地区负责人"> |
|||
<template #icon> |
|||
<img src="@/assets/images/还没传到.png" alt="还没传到图标"> |
|||
</template> |
|||
</el-step> |
|||
<el-step title="总部财务"> |
|||
<template #icon> |
|||
<img src="@/assets/images/还没传到.png" alt="还没传到图标"> |
|||
</template> |
|||
</el-step> |
|||
<el-step title="指定执行人"> |
|||
<template #icon> |
|||
<img src="@/assets/images/还没传到.png" alt="还没传到图标"> |
|||
</template> |
|||
</el-step> |
|||
</el-steps> |
|||
</div> |
|||
<div class="steps-status"> |
|||
<el-steps style="min-width: 50vw" :active="1" finish-status="success" simple> |
|||
<el-step title="已通过" /> |
|||
<el-step title="待审核" /> |
|||
<el-step title="待审核" /> |
|||
<el-step title="待审核" /> |
|||
<el-step title="待审核" /> |
|||
</el-steps> |
|||
</div> |
|||
<div class="steps-btn"> |
|||
<el-button type="primary">确定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<el-dialog v-model="showBack" title="撤回退款" overflow draggable class="back-dialog" :style="{ |
|||
backgroundImage: 'url(/src/assets/images/撤回.png)', |
|||
backgroundSize: 'cover', |
|||
backgroundPosition: 'center' |
|||
}"> |
|||
<div class="back-text">将 要 撤 回 该 信 息！</div> |
|||
<div class="back-btn"> |
|||
<el-button type="default" @click="showBack = false">取消</el-button> |
|||
<el-button type="primary" @click="" style="margin-left: 2vw;">确定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<el-dialog v-model="showError" overflow draggable class="back-dialog" :style="{ |
|||
backgroundImage: 'url(/src/assets/images/撤回.png)', |
|||
backgroundSize: 'cover', |
|||
backgroundPosition: 'center' |
|||
}"> |
|||
<div class="back-text">退 款 金 额 填 写 有 误</div> |
|||
<div class="back-btn"> |
|||
<el-button type="default" @click="showError = false">取消</el-button> |
|||
<el-button type="primary" @click="" style="margin-left: 2vw;">确定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
<script setup> |
|||
import { ref, onMounted } from 'vue' |
|||
import { ElMessage } from 'element-plus' |
|||
import API from '@/util/http.js' |
|||
const uploadUrl = 'https://api.homilychart.com/hljw/api/aws/upload' |
|||
import { useAdminStore } from "@/store/index.js" |
|||
import { storeToRefs } from "pinia" |
|||
import dayjs from 'dayjs' |
|||
const adminStore = useAdminStore() |
|||
const { adminData, menuTree } = storeToRefs(adminStore) |
|||
import { permissionMapping, findMenuById } from "@/utils/menuTreePermission.js" |
|||
|
|||
const searchForm = ref({ |
|||
jwcode: '' |
|||
}) |
|||
const addForm = ref({ |
|||
jwcode: '' |
|||
}) |
|||
const auditForm = ref({ |
|||
refundType: '' |
|||
}) |
|||
const pagination = ref({ |
|||
pageNum: 1, |
|||
pageSize: 50, |
|||
total: 0 |
|||
}) |
|||
const tableData = ref([]) |
|||
const showEdit = ref(false) |
|||
const showSteps = ref(false) |
|||
const uploadRef = ref(null) |
|||
const showBack = ref(false) |
|||
const showError = ref(false) |
|||
const executor = ref([ |
|||
{ |
|||
value: '1', |
|||
label: '亲爱的佳丽老师' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '张三' |
|||
}, |
|||
{ |
|||
value: '3', |
|||
label: '李四' |
|||
}, |
|||
{ |
|||
value: '4', |
|||
label: '王五' |
|||
}, |
|||
{ |
|||
value: '5', |
|||
label: '赵六' |
|||
}, |
|||
{ |
|||
value: '6', |
|||
label: '弘历黄总' |
|||
} |
|||
]) |
|||
const products = ref([ |
|||
{ |
|||
value: '1', |
|||
label: '产品1' |
|||
}, |
|||
{ |
|||
value: '2', |
|||
label: '产品2' |
|||
} |
|||
]) |
|||
const currencies = ref([ |
|||
{ |
|||
value: 'CNY', |
|||
label: '人民币' |
|||
}, |
|||
{ |
|||
value: 'USD', |
|||
label: '美元' |
|||
} |
|||
]) |
|||
const payments = ref([{ |
|||
value: '银行转账', |
|||
label: '银行转账' |
|||
}, |
|||
{ |
|||
value: '现金', |
|||
label: '现金' |
|||
}, |
|||
{ |
|||
value: '支票', |
|||
label: '支票' |
|||
}, |
|||
{ |
|||
value: '刷卡', |
|||
label: '刷卡' |
|||
}, |
|||
{ |
|||
value: 'Grabpay', |
|||
label: 'Grabpay' |
|||
}, |
|||
{ |
|||
value: 'Nets', |
|||
label: 'Nets' |
|||
}, |
|||
{ |
|||
value: 'PayPal', |
|||
label: 'PayPal' |
|||
}, |
|||
{ |
|||
value: 'Stripe-链接收款', |
|||
label: 'Stripe-链接收款' |
|||
}, |
|||
{ |
|||
value: 'Ipay88-链接收款', |
|||
label: 'Ipay88-链接收款' |
|||
}, |
|||
{ |
|||
value: 'PaymentAsia-链接收款', |
|||
label: 'PaymentAsia-链接收款' |
|||
}, |
|||
{ |
|||
value: 'Stripe-Link平台', |
|||
label: 'Stripe-Link平台' |
|||
}, |
|||
{ |
|||
value: 'PaymentAsia-Link平台', |
|||
label: 'PaymentAsia-Link平台' |
|||
}, |
|||
{ |
|||
value: 'FirstData-Link平台-Link平台', |
|||
label: 'FirstData-Link平台-Link平台' |
|||
}, |
|||
{ |
|||
value: 'IOS-Link平台', |
|||
label: 'IOS-Link平台' |
|||
}, |
|||
{ |
|||
value: 'Ipay88-Link平台', |
|||
label: 'Ipay88-Link平台' |
|||
} |
|||
]) |
|||
const statusList = ref([ |
|||
{ |
|||
value: '10', |
|||
label: '地区财务待审核' |
|||
}, |
|||
{ |
|||
value: '12', |
|||
label: '地区财务驳回' |
|||
}, |
|||
{ |
|||
value: '20', |
|||
label: '地区负责人待审核' |
|||
}, |
|||
{ |
|||
value: '22', |
|||
label: '地区负责人驳回' |
|||
}, |
|||
{ |
|||
value: '30', |
|||
label: '总部财务待审核' |
|||
}, |
|||
{ |
|||
value: '32', |
|||
label: '总部财务驳回' |
|||
}, |
|||
{ |
|||
value: '40', |
|||
label: '执行人待处理' |
|||
}, |
|||
{ |
|||
value: '41', |
|||
label: '退款完成' |
|||
} |
|||
]) |
|||
// 查全部 |
|||
const getRefund = async function () { |
|||
try { |
|||
const params = { |
|||
cashCollection: { |
|||
status: null, |
|||
//10：地区财务待审核；12：地区财务驳回； |
|||
// 20：地区负责人待审核；22：地区负责人驳回； |
|||
// 30：总部财务待审核；32：总部财务驳回； |
|||
// 40：执行人待处理；41：执行人已处理，退款完成； |
|||
orderCode: null,//订单号 |
|||
name: null,//姓名 |
|||
jwcode: null,//精网号 |
|||
market: null,//地区 |
|||
goodsName: null,//商品名 |
|||
refundModel: null,//退款类型, |
|||
startTime: "", |
|||
endTime: "" |
|||
} |
|||
} |
|||
|
|||
const result = await API({ |
|||
url: '/hljw/api/refund/query', |
|||
method: 'POST', |
|||
data: params |
|||
}) |
|||
|
|||
tableData.value = result.data || [] |
|||
} catch (error) { |
|||
ElMessage.error(error.message || '查询失败') |
|||
} |
|||
} |
|||
const handleImageChange = (file) => { |
|||
uploadRef.value.submit() |
|||
} |
|||
const beforeUpload = (file) => { |
|||
const isJPG = file.type === 'image/jpeg' |
|||
const isPNG = file.type === 'image/png' |
|||
const isLt1 = file.size / 1024 < 1024 |
|||
|
|||
if (!isJPG && !isPNG) { |
|||
ElMessage.error('上传图片只能是 JPG 或 PNG 格式') |
|||
return false |
|||
} |
|||
if (!isLt1) { |
|||
ElMessage.error('上传图片大小不能超过1MB') |
|||
return false |
|||
} |
|||
return true |
|||
} |
|||
const handleUploadSuccess = (response, file, fileList) => { |
|||
try { |
|||
addForm.value.imageUrl = response.data.url |
|||
console.log('==========================', response.data.url) |
|||
} catch (error) { |
|||
console.log('看看报错信息', error) |
|||
ElMessage.error(response.data.msg || '图片上传失败') |
|||
} |
|||
} |
|||
const handleUploadError = (error) => { |
|||
console.error('上传失败:', error) |
|||
addForm.value.imageUrl = null |
|||
ElMessage.error('图片上传失败，请重试') |
|||
} |
|||
const customUpload = async (options) => { |
|||
try { |
|||
const formData = new FormData() |
|||
formData.append('file', options.file) |
|||
|
|||
const response = await API({ |
|||
url: uploadUrl, |
|||
method: 'POST', |
|||
data: formData, |
|||
headers: { |
|||
'Content-Type': 'multipart/form-data' |
|||
} |
|||
}) |
|||
if (response.code === 200 && response.data) { |
|||
handleUploadSuccess(response, options.file, [options.file]) |
|||
ElMessage.success(response.msg || '上传成功') |
|||
} else { |
|||
ElMessage.error(response.msg || '上传失败') |
|||
} |
|||
} catch (error) { |
|||
console.error('上传错误:', error) |
|||
ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`) |
|||
} |
|||
} |
|||
|
|||
onMounted(() => { |
|||
console.log('???????????????????', adminData.value) |
|||
}) |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.condition { |
|||
width: 82vw; |
|||
display: flex; |
|||
align-items: center; |
|||
height: 4vh; |
|||
|
|||
.item1 { |
|||
width: 18%; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
margin-right: 0.5vw; |
|||
} |
|||
|
|||
.item2 { |
|||
width: 18%; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-right: 0.5vw; |
|||
} |
|||
} |
|||
|
|||
.editDialog { |
|||
.left { |
|||
width: 50%; |
|||
height: 70vh; |
|||
padding: 0 2vw; |
|||
|
|||
.add-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
} |
|||
|
|||
.image { |
|||
width: 4vw !important; |
|||
height: 4vw !important; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
width: 50%; |
|||
height: 50vh; |
|||
|
|||
.add-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 1vh; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.steps { |
|||
.steps-content { |
|||
width: 45vw; |
|||
height: 15vh; |
|||
display: flex; |
|||
justify-content: center; |
|||
padding-top: 15vw; |
|||
padding-left: 8vw; |
|||
} |
|||
|
|||
.steps-status { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.steps-btn { |
|||
height: 15vh; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
} |
|||
|
|||
.back-dialog { |
|||
width: 700px; |
|||
height: auto; |
|||
|
|||
.back-text { |
|||
font-size: 60px; |
|||
font-weight: bold; |
|||
color: #000000; |
|||
text-align: center; |
|||
justify-content: center; |
|||
margin-top: 22vh; |
|||
} |
|||
|
|||
.back-btn { |
|||
height: 20vh; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue