|
|
@ -96,19 +96,21 @@ |
|
|
|
<el-table-column prop="market" label="所属地区" width="80px" /> |
|
|
|
<el-table-column prop="activity" label="活动名称" width="120px" /> |
|
|
|
<el-table-column prop="rateName" label="产品名称" width="120px" /> |
|
|
|
<el-table-column prop="money" label="付款币种" width="100px"> |
|
|
|
<el-table-column prop="rateNum" label="产品数量" width="120px" /> |
|
|
|
<el-table-column prop="moneyType" label="付款币种" width="100px"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="permanentGold" label="付款金额" width="120px"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="moneyType" label="到账币种" v-if="caiwu && activeTab == 'pass'" width="150px" ></el-table-column> |
|
|
|
<el-table-column prop="getMoney" label="到账金额" v-if="caiwu && activeTab == 'pass'" width="150px" > |
|
|
|
<el-table-column prop="getMoneyType" label="到账币种" v-if="caiwu && activeTab == 'pass'" |
|
|
|
width="150px"></el-table-column> |
|
|
|
<el-table-column prop="getMoney" label="到账金额" v-if="caiwu && activeTab == 'pass'" width="150px"> |
|
|
|
<template #default="scope"> |
|
|
|
<div v-if="!scope.row.getMoney"> |
|
|
|
<text style="color: #FA5A1E;">待补充</text> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="shouxufei" label="手续费" v-if="caiwu && activeTab == 'pass'" width="150px" > |
|
|
|
<el-table-column prop="shouxufei" label="手续费" v-if="caiwu && activeTab == 'pass'" width="150px"> |
|
|
|
<template #default="scope"> |
|
|
|
<div v-if="!scope.row.shouxufei"> |
|
|
|
<text style="color: #FA5A1E;">待补充</text> |
|
|
@ -127,24 +129,51 @@ |
|
|
|
</div> |
|
|
|
<div v-else |
|
|
|
style="display: flex; justify-content: center; align-items: center; height: 40px;"> |
|
|
|
-- |
|
|
|
—— |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="bankOrder" label="银行流水订单号" v-if="caiwu && activeTab == 'pass'" width="150px" show-overflow-tooltip></el-table-column> |
|
|
|
<el-table-column prop="submiter" label="提交人" width="150px" show-overflow-tooltip></el-table-column> |
|
|
|
<el-table-column prop="auditor" label="审核人" v-if="caiwu && activeTab == 'pass'" width="150px" show-overflow-tooltip></el-table-column> |
|
|
|
<el-table-column prop="mask" label="备注" width="150px" show-overflow-tooltip></el-table-column> |
|
|
|
<el-table-column prop="getMoneyTime" label="到账时间" v-if="caiwu && activeTab == 'pass'" width="150px" show-overflow-tooltip> |
|
|
|
<el-table-column prop="bankOrder" label="银行流水订单号" v-if="caiwu && activeTab == 'pass'" |
|
|
|
width="150px" show-overflow-tooltip></el-table-column> |
|
|
|
<el-table-column prop="submiter" label="提交人" width="150px" |
|
|
|
show-overflow-tooltip></el-table-column> |
|
|
|
<el-table-column prop="auditor" label="审核人" v-if="caiwu && activeTab == 'pass' || 'reject'" |
|
|
|
width="150px" show-overflow-tooltip></el-table-column> |
|
|
|
<el-table-column prop="mask" label="备注" v-if="activeTab != 'reject'" width="150px" |
|
|
|
show-overflow-tooltip></el-table-column> |
|
|
|
<el-table-column prop="rejectTime" label="驳回时间" v-if="activeTab == 'reject' && !kefu" |
|
|
|
width="150px" show-overflow-tooltip></el-table-column> |
|
|
|
<el-table-column prop="rejectReason" label="驳回理由" v-if="activeTab == 'reject' && !kefu" |
|
|
|
width="150px"> |
|
|
|
<template #default="scope"> |
|
|
|
<div class="ellipsis-container" |
|
|
|
@mouseenter="handleMouseEnter($event, scope.row.rejectReason)" |
|
|
|
@mouseleave="handleMouseLeave" @mousemove="handleMouseMove($event)"> |
|
|
|
<span class="ellipsis-text"> |
|
|
|
{{ scope.row.rejectReason || '—' }} |
|
|
|
</span> |
|
|
|
|
|
|
|
<!-- 自定义提示框 --> |
|
|
|
<div v-if="showTooltip && tooltipContent" class="custom-tooltip" :style="{ |
|
|
|
left: `${tooltipLeft}px`, |
|
|
|
top: `${tooltipTop}px` |
|
|
|
}"> |
|
|
|
{{ tooltipContent }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="getMoneyTime" label="到账时间" v-if="caiwu && activeTab == 'pass'" |
|
|
|
width="150px"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column v-if="kefu" fixed="right" prop="orderStatus" label="订单状态" width="100px" /> |
|
|
|
<el-table-column fixed="right" label="操作" width="100px" v-if="activeTab != 'reject'"> |
|
|
|
<template #default=scope> |
|
|
|
<span v-if="kefu && scope.row.orderStatus == '已通过'" style="color: #FA5A1E;">退款</span> |
|
|
|
<span v-else-if="kefu && scope.row.orderStatus == '已撤回'" |
|
|
|
style="color: #2741DE;">编辑</span> |
|
|
|
<span v-else-if="kefu && scope.row.orderStatus == '待审核'" |
|
|
|
style="color: #FA5A1E;">撤回</span> |
|
|
|
<span v-else-if="kefu && scope.row.orderStatus == '已撤回'" style="color: #2741DE;" |
|
|
|
@click="openAddForm(scope.row)">编辑</span> |
|
|
|
<span v-else-if="kefu && scope.row.orderStatus == '待审核'" style="color: #FA5A1E;" |
|
|
|
@click="openRecall">撤回</span> |
|
|
|
<span v-else-if="activeTab == 'wait' && !kefu" style="color: #2741DE;" |
|
|
|
@click="openAuditForm">审核</span> |
|
|
|
<span v-else-if="activeTab == 'pass' && !kefu" style="color: #2741DE;" |
|
|
@ -161,10 +190,15 @@ |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
</div> |
|
|
|
<div class="recallDialog"> |
|
|
|
<div class="close"> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-dialog class="adddialog" v-model="addFormisible" width="20vw" :before-close="closeAddForm"> |
|
|
|
<el-form class="addForm" label-width="4vw" label-position="left"> |
|
|
|
<el-form-item label="精网号" required> |
|
|
|
<el-input v-model="addFormData.jwcode" placeholder="请输入驳回理由" /> |
|
|
|
<el-input v-model="addFormData.jwcode" placeholder="请输入精网号" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="客户姓名" required> |
|
|
|
<el-input v-model="addFormData.userName" placeholder="请输入客户姓名" /> |
|
|
@ -176,10 +210,19 @@ |
|
|
|
<el-input v-model="addFormData.jwcode" placeholder="请输入活动名称" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="产品名称" required> |
|
|
|
<el-select placeholder="请选择产品名称" clearable></el-select> |
|
|
|
<el-select placeholder="请选择产品名称" v-model="addFormData.rateName" clearable> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="产品数量" required> |
|
|
|
<div style="padding-right: 50px; display: flex;"> |
|
|
|
<el-input style="padding-right: 10px;" v-model="addFormData.rateNum" placeholder="请输入产品数量" /> |
|
|
|
<span style="color: #999999;">个</span> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="付款币种" required> |
|
|
|
<el-select placeholder="请选择付款币种" clearable></el-select> |
|
|
|
<el-select placeholder="请选择付款币种" v-model="addFormData.moneyType" clearable> |
|
|
|
<el-option v-for="item in payModel" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="付款金额" required> |
|
|
|
<el-input v-model="addFormData.jwcode" placeholder="请输入付款金额" /> |
|
|
@ -188,18 +231,21 @@ |
|
|
|
<el-select placeholder="请选择支付方式" clearable></el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="付款时间" required> |
|
|
|
<el-time-picker v-model="addFormData.time" placeholder="请选择付款时间" /> |
|
|
|
<el-date-picker type="datetime" placement="right" v-model="addFormData.time" |
|
|
|
placeholder="请选择付款时间" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="转账凭证" required> |
|
|
|
<el-upload ref="uploadRef" class="uploader" :show-file-list="false" list-type="picture-card" |
|
|
|
:auto-upload="false" :before-upload="beforeUpload" :on-error="handelImgErr" |
|
|
|
:on-change="handleImageChange" :http-request="customUpload"> |
|
|
|
<img v-if="addFormData.imageUrl" :src="addFormData.imageUrl" class="avatar" |
|
|
|
style="height: 100%; width: 100%; object-fit: cover;" /> |
|
|
|
<el-icon v-else class="avatar-uploader-icon"> |
|
|
|
<Plus /> |
|
|
|
</el-icon> |
|
|
|
</el-upload> |
|
|
|
<div class="pic"> |
|
|
|
<el-upload ref="uploadRef" class="uploader" :show-file-list="false" list-type="picture-card" |
|
|
|
:auto-upload="false" :before-upload="beforeUpload" :on-error="handelImgErr" |
|
|
|
:on-change="handleImageChange" :http-request="customUpload"> |
|
|
|
<img v-if="addFormData.imageUrl" :src="addFormData.imageUrl" class="avatar" |
|
|
|
style="height: 100%; width: 100%; object-fit: cover;" /> |
|
|
|
<el-icon v-else class="avatar-uploader-icon"> |
|
|
|
<Plus /> |
|
|
|
</el-icon> |
|
|
|
</el-upload> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="备注" required> |
|
|
|
<el-input v-model="addFormData.mask" type="textarea" :rows="4" placeholder="请输入备注" maxlength="100" |
|
|
@ -233,7 +279,9 @@ |
|
|
|
<el-select placeholder="请选择产品名称" clearable></el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="付款币种"> |
|
|
|
<el-select placeholder="请选择付款币种" clearable></el-select> |
|
|
|
<el-select placeholder="请选择付款币种" v-model="auditFormData.moneyType" clearable> |
|
|
|
<el-option v-for="item in payModel" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="付款金额"> |
|
|
|
<el-input v-model="auditFormData.jwcode" placeholder="请输入付款金额" /> |
|
|
@ -242,7 +290,7 @@ |
|
|
|
<el-select placeholder="请选择支付方式" clearable></el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="付款时间"> |
|
|
|
<el-time-picker v-model="auditFormData.time" placeholder="请选择付款时间" /> |
|
|
|
<el-date-picker type="datetime" v-model="auditFormData.time" placeholder="请选择付款时间" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="转账凭证"> |
|
|
|
<div class="pic"> |
|
|
@ -306,7 +354,10 @@ |
|
|
|
<el-select placeholder="请选择产品名称" clearable></el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="付款币种"> |
|
|
|
<el-select placeholder="请选择付款币种" clearable></el-select> |
|
|
|
<el-select placeholder="请选择付款币种" clearable> |
|
|
|
<el-option v-for="item in payModel" :key="item.value" :label="item.label" |
|
|
|
:value="item.value" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="付款金额"> |
|
|
|
<el-input v-model="editFormData.jwcode" placeholder="请输入付款金额" /> |
|
|
@ -315,7 +366,7 @@ |
|
|
|
<el-select placeholder="请选择支付方式" clearable></el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="付款时间"> |
|
|
|
<el-time-picker v-model="editFormData.time" placeholder="请选择付款时间" /> |
|
|
|
<el-date-picker type="datetime" v-model="editFormData.time" placeholder="请选择付款时间" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="转账凭证"> |
|
|
|
<div class="pic"> |
|
|
@ -359,12 +410,12 @@ |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<span class="editBtns"> |
|
|
|
<button class="editBtn1"> |
|
|
|
<button class="editBtn1" @click="closeEditForm"> |
|
|
|
<text class="txt"> |
|
|
|
取消 |
|
|
|
</text> |
|
|
|
</button> |
|
|
|
<button class="editBtn2"> |
|
|
|
<button class="editBtn2" @click="submitEditForm"> |
|
|
|
<text class="txt"> |
|
|
|
提交 |
|
|
|
</text> |
|
|
@ -414,14 +465,26 @@ const addFormisible = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
const uploadRef = ref() |
|
|
|
const openAddForm = () => { |
|
|
|
const openAddForm = (row) => { |
|
|
|
if (row) { |
|
|
|
addFormData.value = row |
|
|
|
} |
|
|
|
addFormisible.value = true |
|
|
|
} |
|
|
|
const closeAddForm = () => { |
|
|
|
addFormisible.value = false |
|
|
|
addFormData.value = {} |
|
|
|
} |
|
|
|
//撤回弹窗 |
|
|
|
|
|
|
|
const recallDialog = ref(false) |
|
|
|
const openRecall = () => { |
|
|
|
recallDialog.value = true |
|
|
|
} |
|
|
|
const closeRecall = () => { |
|
|
|
recallDialog.value = false |
|
|
|
} |
|
|
|
//图片上传 |
|
|
|
const handleImgSuccess = (response, uploadFile) => { |
|
|
|
try { |
|
|
|
console.log('11', response) |
|
|
@ -484,7 +547,7 @@ const editFormData = ref({ |
|
|
|
}) |
|
|
|
const editFormisible = ref(false) |
|
|
|
const openEditForm = (row) => { |
|
|
|
console.log('编辑时该行数据:',row); |
|
|
|
console.log('编辑时该行数据:', row); |
|
|
|
editFormData.value = row |
|
|
|
editFormisible.value = true |
|
|
|
} |
|
|
@ -492,6 +555,10 @@ const closeEditForm = () => { |
|
|
|
editFormisible.value = false |
|
|
|
editFormData.value = {} |
|
|
|
} |
|
|
|
//提交编辑 |
|
|
|
const submitEditForm = () => { |
|
|
|
|
|
|
|
} |
|
|
|
//================== 审核相关 ========================= |
|
|
|
const auditFormData = ref({ |
|
|
|
|
|
|
@ -536,128 +603,192 @@ const pageInfo = ref({ |
|
|
|
pageSize: 10, |
|
|
|
pageNum: 1 |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const total = ref(0) |
|
|
|
|
|
|
|
// ============ 已驳回相关 =========================== |
|
|
|
// 提示框状态管理 |
|
|
|
const showTooltip = ref(false); |
|
|
|
const tooltipContent = ref(''); |
|
|
|
const tooltipLeft = ref(0); |
|
|
|
const tooltipTop = ref(0); |
|
|
|
const tooltipWidth = 200; |
|
|
|
// 鼠标进入时显示提示框 |
|
|
|
const handleMouseEnter = (e, content) => { |
|
|
|
if (content) { |
|
|
|
showTooltip.value = true; |
|
|
|
tooltipContent.value = content; |
|
|
|
handleMouseMove(e); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 鼠标离开时隐藏提示框 |
|
|
|
const handleMouseLeave = () => { |
|
|
|
showTooltip.value = false; |
|
|
|
tooltipContent.value = ''; |
|
|
|
}; |
|
|
|
|
|
|
|
// 鼠标移动时更新提示框位置(显示在鼠标左侧) |
|
|
|
const handleMouseMove = (e) => { |
|
|
|
// 左侧显示:鼠标X坐标 - 提示框宽度 - 偏移量 |
|
|
|
tooltipLeft.value = e.clientX - tooltipWidth - 10; |
|
|
|
// Y坐标与鼠标保持一致(垂直居中对齐) |
|
|
|
tooltipTop.value = e.clientY - 10; |
|
|
|
}; |
|
|
|
const tableData = [ |
|
|
|
{ |
|
|
|
"jwcode": "HM2024001", |
|
|
|
"name": "张三", |
|
|
|
"market": "华东区", |
|
|
|
"activity": "2024春季促销活动", |
|
|
|
"rateName": "年度会员套餐A", |
|
|
|
"money": "人民币", |
|
|
|
"permanentGold": 2980.00, |
|
|
|
"moneyType": "人民币", |
|
|
|
"getMoney": 2980.00, |
|
|
|
"shouxufei": 59.60, |
|
|
|
"pastType": "支付宝转账", |
|
|
|
"remark": "2024-05-10 09:23", |
|
|
|
"voucher": "https://example.com/voucher/1.jpg", |
|
|
|
"payModel": "https://example.com/icon/alipay.png", |
|
|
|
"bankOrder": "ALIPAY2024051000001", |
|
|
|
"submiter": "李四(运营部)", |
|
|
|
"auditor": "王五(财务部)", |
|
|
|
"mask": "客户主动购买,无特殊备注", |
|
|
|
"getMoneyTime": "2024-05-10 10:05", |
|
|
|
"orderStatus": "已通过" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"jwcode": "HM2024002", |
|
|
|
"name": "李四", |
|
|
|
"market": "华北区", |
|
|
|
"activity": "新客首单优惠", |
|
|
|
"rateName": "季度体验套餐B", |
|
|
|
"money": "美元", |
|
|
|
"permanentGold": 99.00, |
|
|
|
"moneyType": "人民币", |
|
|
|
"getMoney": 712.00, |
|
|
|
"shouxufei": 14.24, |
|
|
|
"pastType": "PayPal", |
|
|
|
"remark": "2024-05-11 14:56", |
|
|
|
"voucher": "https://example.com/voucher/2.jpg", |
|
|
|
"payModel": "https://example.com/icon/paypal.png", |
|
|
|
"bankOrder": "PAYPAL2024051100002", |
|
|
|
"submiter": "赵六(国际部)", |
|
|
|
"auditor": "孙七(财务部)", |
|
|
|
"mask": "跨境支付,汇率按当日中间价计算", |
|
|
|
"getMoneyTime": "2024-05-12 08:30", |
|
|
|
"orderStatus": "待审核" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"jwcode": "HM2024003", |
|
|
|
"name": "王五", |
|
|
|
"market": "华南区", |
|
|
|
"activity": "老客召回活动", |
|
|
|
"rateName": "月度续费套餐C", |
|
|
|
"money": "人民币", |
|
|
|
"permanentGold": 399.00, |
|
|
|
"moneyType": "人民币", |
|
|
|
"getMoney": null, |
|
|
|
"shouxufei": null, |
|
|
|
"pastType": "微信支付", |
|
|
|
"remark": "2024-05-12 11:18", |
|
|
|
"voucher": "https://example.com/voucher/3.jpg", |
|
|
|
"payModel": "https://example.com/icon/wechat.png", |
|
|
|
"bankOrder": "WECHAT2024051200003", |
|
|
|
"submiter": "钱八(客服部)", |
|
|
|
"auditor": null, |
|
|
|
"mask": "到账信息待财务补充", |
|
|
|
"getMoneyTime": null, |
|
|
|
"orderStatus": "已撤回" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"jwcode": "HM2024004", |
|
|
|
"name": "赵六", |
|
|
|
"market": "西区", |
|
|
|
"activity": "企业团购活动", |
|
|
|
"rateName": "企业定制套餐D", |
|
|
|
"money": "人民币", |
|
|
|
"permanentGold": 15800.00, |
|
|
|
"moneyType": "人民币", |
|
|
|
"getMoney": 15800.00, |
|
|
|
"shouxufei": 316.00, |
|
|
|
"pastType": "银行对公转账", |
|
|
|
"remark": "2024-05-13 09:45", |
|
|
|
"voucher": "https://example.com/voucher/4.jpg", |
|
|
|
"payModel": "https://example.com/icon/bank.png", |
|
|
|
"bankOrder": "BANK2024051300004", |
|
|
|
"submiter": "周九(销售部)", |
|
|
|
"auditor": "吴十(财务部)", |
|
|
|
"mask": "10人企业团单,享受95折优惠", |
|
|
|
"getMoneyTime": "2024-05-13 11:20", |
|
|
|
"orderStatus": "已通过" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"jwcode": "HM2024005", |
|
|
|
"name": "孙七", |
|
|
|
"market": "东北区", |
|
|
|
"activity": "节日特惠活动", |
|
|
|
"rateName": "年度会员套餐A", |
|
|
|
"money": "人民币", |
|
|
|
"permanentGold": 2780.00, |
|
|
|
"moneyType": "人民币", |
|
|
|
"getMoney": 2780.00, |
|
|
|
"shouxufei": 55.60, |
|
|
|
"pastType": "银联支付", |
|
|
|
"remark": "2024-05-14 15:30", |
|
|
|
"voucher": null, |
|
|
|
"payModel": null, |
|
|
|
"bankOrder": "UNIONPAY2024051400005", |
|
|
|
"submiter": "郑一(市场部)", |
|
|
|
"auditor": "王二(财务部)", |
|
|
|
"mask": "凭证暂未上传,已提醒客户补充", |
|
|
|
"getMoneyTime": "2024-05-14 16:45", |
|
|
|
"orderStatus": "待审核" |
|
|
|
} |
|
|
|
{ |
|
|
|
"jwcode": "HM20240601", |
|
|
|
"name": "张三", |
|
|
|
"market": "华东区", |
|
|
|
"activity": "2024年中促销", |
|
|
|
"rateName": "年度会员套餐A", |
|
|
|
"moneyType": "人民币", |
|
|
|
"permanentGold": 2980.00, |
|
|
|
"getMoneyType": "人民币", |
|
|
|
"getMoney": 2980.00, |
|
|
|
"shouxufei": 59.60, |
|
|
|
"pastType": "支付宝转账", |
|
|
|
"remark": "2024-06-01 09:30", |
|
|
|
"voucher": "https://mock-img.com/voucher/2024060101.jpg", |
|
|
|
"payModel": "https://mock-img.com/icon/alipay.png", |
|
|
|
"bankOrder": "ALIPAY202406010001", |
|
|
|
"submiter": "李四(运营部)", |
|
|
|
"auditor": "王五(财务部)", |
|
|
|
"mask": "客户主动购买,无特殊需求", |
|
|
|
"rejectTime": null, |
|
|
|
"rejectReason": null, |
|
|
|
"getMoneyTime": "2024-06-01 10:15", |
|
|
|
"orderStatus": "已撤回" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"jwcode": "HM20240602", |
|
|
|
"name": "李四", |
|
|
|
"market": "华北区", |
|
|
|
"activity": "新客首单优惠", |
|
|
|
"rateName": "季度体验套餐B", |
|
|
|
"moneyType": "美元", |
|
|
|
"permanentGold": 99.00, |
|
|
|
"getMoneyType": "人民币", |
|
|
|
"getMoney": 712.50, |
|
|
|
"shouxufei": 14.25, |
|
|
|
"pastType": "PayPal", |
|
|
|
"remark": "2024-06-02 14:15", |
|
|
|
"voucher": "https://mock-img.com/voucher/2024060201.jpg", |
|
|
|
"payModel": "https://mock-img.com/icon/paypal.png", |
|
|
|
"bankOrder": "PAYPAL202406020001", |
|
|
|
"submiter": "赵六(国际部)", |
|
|
|
"auditor": "孙七(财务部)", |
|
|
|
"mask": "跨境支付,汇率按当日中间价计算", |
|
|
|
"rejectTime": null, |
|
|
|
"rejectReason": null, |
|
|
|
"getMoneyTime": "2024-06-02 16:40", |
|
|
|
"orderStatus": "已通过" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"jwcode": "HM20240603", |
|
|
|
"name": "王五", |
|
|
|
"market": "华南区", |
|
|
|
"activity": "老客召回活动", |
|
|
|
"rateName": "月度续费套餐C", |
|
|
|
"moneyType": "人民币", |
|
|
|
"permanentGold": 399.00, |
|
|
|
"getMoneyType": null, |
|
|
|
"getMoney": null, |
|
|
|
"shouxufei": null, |
|
|
|
"pastType": "微信支付", |
|
|
|
"remark": "2024-06-03 11:20", |
|
|
|
"voucher": "https://mock-img.com/voucher/2024060301.jpg", |
|
|
|
"payModel": "https://mock-img.com/icon/wechat.png", |
|
|
|
"bankOrder": null, |
|
|
|
"submiter": "钱八(客服部)", |
|
|
|
"auditor": null, |
|
|
|
"mask": "待财务补充到账信息", |
|
|
|
"rejectTime": null, |
|
|
|
"rejectReason": null, |
|
|
|
"getMoneyTime": null, |
|
|
|
"orderStatus": "待审核" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"jwcode": "HM20240604", |
|
|
|
"name": "赵六", |
|
|
|
"market": "西区", |
|
|
|
"activity": "企业团购活动", |
|
|
|
"rateName": "企业定制套餐D", |
|
|
|
"moneyType": "人民币", |
|
|
|
"permanentGold": 15800.00, |
|
|
|
"getMoneyType": null, |
|
|
|
"getMoney": null, |
|
|
|
"shouxufei": null, |
|
|
|
"pastType": "银行对公转账", |
|
|
|
"remark": "2024-06-04 09:05", |
|
|
|
"voucher": null, |
|
|
|
"payModel": null, |
|
|
|
"bankOrder": null, |
|
|
|
"submiter": "周九(销售部)", |
|
|
|
"auditor": "吴十(财务部)", |
|
|
|
"mask": null, |
|
|
|
"rejectTime": "2024-06-04 10:30", |
|
|
|
"rejectReason": "未上传转账凭证,需补充后重新提交", |
|
|
|
"getMoneyTime": null, |
|
|
|
"orderStatus": "已驳回" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"jwcode": "HM20240605", |
|
|
|
"name": "孙七", |
|
|
|
"market": "东北区", |
|
|
|
"activity": "节日特惠活动", |
|
|
|
"rateName": "年度会员套餐A", |
|
|
|
"moneyType": "人民币", |
|
|
|
"permanentGold": 2780.00, |
|
|
|
"getMoneyType": "人民币", |
|
|
|
"getMoney": 2780.00, |
|
|
|
"shouxufei": 55.60, |
|
|
|
"pastType": "银联支付", |
|
|
|
"remark": "2024-06-05 15:40", |
|
|
|
"voucher": "https://mock-img.com/voucher/2024060501.jpg", |
|
|
|
"payModel": "https://mock-img.com/icon/unionpay.png", |
|
|
|
"bankOrder": "UNION202406050001", |
|
|
|
"submiter": "郑一(市场部)", |
|
|
|
"auditor": "王二(财务部)", |
|
|
|
"mask": "客户使用节日优惠券,已核减200元", |
|
|
|
"rejectTime": null, |
|
|
|
"rejectReason": null, |
|
|
|
"getMoneyTime": "2024-06-05 16:25", |
|
|
|
"orderStatus": "已通过" |
|
|
|
}, |
|
|
|
{ |
|
|
|
"jwcode": "HM20240606", |
|
|
|
"name": "周八", |
|
|
|
"market": "华北区", |
|
|
|
"activity": "新客首单优惠", |
|
|
|
"rateName": "季度体验套餐B", |
|
|
|
"moneyType": "人民币", |
|
|
|
"permanentGold": 359.00, |
|
|
|
"getMoneyType": null, |
|
|
|
"getMoney": null, |
|
|
|
"shouxufei": null, |
|
|
|
"pastType": "微信支付", |
|
|
|
"remark": "2024-06-06 13:10", |
|
|
|
"voucher": "https://mock-img.com/voucher/2024060601.jpg", |
|
|
|
"payModel": "https://mock-img.com/icon/wechat.png", |
|
|
|
"bankOrder": null, |
|
|
|
"submiter": "吴九(客服部)", |
|
|
|
"auditor": "郑十(财务部)", |
|
|
|
"mask": null, |
|
|
|
"rejectTime": "2024-06-06 14:00", |
|
|
|
"rejectReason": "付款金额与订单金额不符(订单359元,实付349元)", |
|
|
|
"getMoneyTime": null, |
|
|
|
"orderStatus": "已驳回" |
|
|
|
} |
|
|
|
] |
|
|
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
|
|
.content { //整体内容 |
|
|
|
.content { |
|
|
|
//整体内容 |
|
|
|
height: 100%; |
|
|
|
width: 83vw; |
|
|
|
|
|
|
|
.card1 { // 筛选框 |
|
|
|
.card1 { |
|
|
|
// 筛选框 |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.row { |
|
|
@ -684,12 +815,14 @@ const tableData = [ |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.card2 { // 下方数据展示card |
|
|
|
.card2 { |
|
|
|
// 下方数据展示card |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
margin-top: 2vh; |
|
|
|
|
|
|
|
.btns { //切换标签 |
|
|
|
.btns { |
|
|
|
//切换标签 |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
@ -706,7 +839,7 @@ const tableData = [ |
|
|
|
|
|
|
|
.btnAdd { |
|
|
|
margin-right: 5vw; |
|
|
|
padding-left: 10px; |
|
|
|
padding-left: 50px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
@ -715,6 +848,41 @@ const tableData = [ |
|
|
|
.table { |
|
|
|
margin: 10px 3vw; |
|
|
|
border-radius: 20px; |
|
|
|
|
|
|
|
.ellipsis-container { |
|
|
|
//内容过长悬浮展示框 |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.ellipsis-text { |
|
|
|
display: inline-block; |
|
|
|
width: 100%; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.custom-tooltip { |
|
|
|
position: fixed; |
|
|
|
z-index: 9999; |
|
|
|
padding: 8px 12px; |
|
|
|
width: 200px; |
|
|
|
/* 固定宽度 */ |
|
|
|
background-color: #E4F0FC; |
|
|
|
color: #333333; |
|
|
|
border: 1px solid #e5e7eb; |
|
|
|
border-radius: 4px; |
|
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); |
|
|
|
/* 高度随内容自动适应 */ |
|
|
|
min-height: 30px; |
|
|
|
max-height: 300px; |
|
|
|
/* 限制最大高度,超出滚动 */ |
|
|
|
overflow-y: auto; |
|
|
|
font-size: 14px; |
|
|
|
line-height: 1.5; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.pagination { |
|
|
@ -723,7 +891,20 @@ const tableData = [ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.adddialog) { //客服新增弹窗 |
|
|
|
.recallDialog { |
|
|
|
//撤回弹窗提示 |
|
|
|
height: 392px; |
|
|
|
width: 700px; |
|
|
|
background-image: url('/src/assets/收款明细撤回背景.png'); |
|
|
|
position: fixed; // 固定定位,相对于浏览器窗口 |
|
|
|
top: 50%; // 距离顶部50% |
|
|
|
left: 50%; // 距离左侧50% |
|
|
|
transform: translate(-50%, -50%); // 向左、向上平移自身宽高的50%,实现居中 |
|
|
|
z-index: 1000; // 确保在其他元素上层显示 |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.adddialog) { |
|
|
|
//客服新增弹窗 |
|
|
|
min-width: 500px; |
|
|
|
background-color: #F3FAFE !important; |
|
|
|
margin-top: 8vh; |
|
|
@ -773,7 +954,8 @@ const tableData = [ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.editdialog) { //编辑弹窗 |
|
|
|
:deep(.editdialog) { |
|
|
|
//编辑弹窗 |
|
|
|
min-width: 990px; |
|
|
|
background-color: #F3FAFE !important; |
|
|
|
margin-top: 8vh; |
|
|
@ -815,7 +997,8 @@ const tableData = [ |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.content { //编辑弹窗内容 |
|
|
|
.content { |
|
|
|
//编辑弹窗内容 |
|
|
|
display: flex; |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
@ -910,7 +1093,8 @@ const tableData = [ |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
:deep(.adddialog .el-form-item__label) { //设置新增弹窗表头 |
|
|
|
:deep(.adddialog .el-form-item__label) { |
|
|
|
//设置新增弹窗表头 |
|
|
|
min-width: 80px; |
|
|
|
width: auto; |
|
|
|
font-weight: 800; |
|
|
|