|
|
<template> <div class="content"> <div class="div-card1"> <el-card class="card1" style="margin-bottom: 0.5vh; min-height: 110px;"> <div class="row"> <div class="rowItem"> <el-text style="width: 4vw;">精网号</el-text> <el-input placeholder="请输入精网号" style="width:10vw;" clearable></el-input> </div> <div class="rowItem"> <el-text style="width: 4vw;">客户姓名</el-text> <el-input placeholder="请输入客户姓名" style="width:10vw;" clearable></el-input> </div> <div class="rowItem"> <el-text style="width: 4vw;">所属地区</el-text> <el-select placeholder="请选择所属地区" style="width:10vw;" clearable></el-select> </div> <div class="rowItem"> <el-text style="width: 4vw;">订单状态</el-text> <el-select placeholder="请选择订单状态" style="width: 10vw;" clearable></el-select> </div> <div class="rowItem"> <el-text style="width: 4vw;">支付方式</el-text> <el-select placeholder="请选择支付方式" style="width: 10vw;" clearable></el-select> </div> </div> <div class="row" style="margin-top: 10px;"> <div class="rowItem"> <el-text style="width: 4vw;">活动名称</el-text> <el-select placeholdert="请选择活动方式" style="width: 10vw;" clearable></el-select> </div> <div class="rowItem"> <el-text style="width: 4vw;">产品名称</el-text> <el-select placeholder="请选择产品名称" style="width: 10vw;" clearable></el-select> </div> <div class="rowItem" style="width: 30vw"> <el-text style="width: 4vw; margin-left: 0.5vw;">付款时间</el-text> <el-date-picker v-model="getTime" type="datetimerange" range-separator="至" start-placeholder="起始时间" end-placeholder="结束时间" style="width: 22vw; " @change="handleDatePickerChange" :default-time="defaultTime" :disabled-date="disabledDate" /> </div> </div> <div class="row" style="margin-top: 10px;"> <div class="buttons"> <el-button type="primary">查询</el-button> <el-button type="success">重置</el-button> <el-button type="primary">导出excel</el-button> <el-button type="primary" style="background-color: #5870FF;">导出列表</el-button> <el-button type="primary" @click="checkKefu">切换客服</el-button> <el-button type="success" @click="checkCaiwu">切换财务</el-button> </div> </div> </el-card> </div>
<div class="div-card2"> <el-card class="card2"> <div class="btns"> <div class="tabs" v-if="caiwu"> <el-button-group> <el-button class="btnItem" :style="{ backgroundColor: activeTab === 'wait' ? '#2741DE' : '#E5EBFE', color: activeTab === 'wait' ? 'white' : '#666' }" @click="navigateTo('wait')"> 待审核 </el-button> <el-button class="btnItem" :style="{ backgroundColor: activeTab === 'pass' ? '#2741DE' : '#E5EBFE', color: activeTab === 'pass' ? 'white' : '#666' }" @click="navigateTo('pass')"> 已通过 </el-button> <el-button class="btnItem" :style="{ backgroundColor: activeTab === 'reject' ? '#2741DE' : '#E5EBFE', color: activeTab === 'reject' ? 'white' : '#666' }" @click="navigateTo('reject')"> 已驳回 </el-button> </el-button-group> </div> <div class="btnAdd"> <el-button @click="openAddForm" type="success" v-if="kefu">添加收款</el-button> </div> </div>
<div class="table"> <el-table :data="tableData" style="width: 80vw;height:54vh;" @sort-change="handleSortChange" :row-style="{ height: '60px' }" :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"> <el-table-column type="index" label="序号" width="100px" fixed="left"> <template #default="scope"> <span>{{ scope.$index + 1 + (pageInfo.pageNum - 1) * pageInfo.pageSize }}</span> </template> </el-table-column> <el-table-column fixed="left" prop="jwcode" label="Homily ID" width="110px" /> <el-table-column fixed="left" prop="name" label="姓名" width="110px" /> <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="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="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"> <template #default="scope"> <div v-if="!scope.row.shouxufei"> <text style="color: #FA5A1E;">待补充</text> </div> </template> </el-table-column> <el-table-column prop="pastType" label="支付方式" width="110px"> </el-table-column> <el-table-column prop="remark" label="付款时间" width="100px" /> <el-table-column prop="payModel" label="转账凭证" width="110px"> <template #default="scope"> <div v-if="scope.row.voucher" style="display: flex; justify-content: center; align-items: center; cursor: pointer;" @click="previewImage(scope.row.voucher)"> <img :src="scope.row.payModel" alt="支付凭证" style="width: auto; height: 40px;"> </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' || '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;" @click="openRecall('refund')">退款</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('recall')">撤回</span> <span v-else-if="activeTab == 'wait' && !kefu" style="color: #2741DE;" @click="openAuditForm">审核</span> <span v-else-if="activeTab == 'pass' && !kefu" style="color: #2741DE;" @click="openEditForm(scope.row)">编辑</span> </template> </el-table-column> </el-table> </div> <div class="pagination"> <el-pagination :page-size="pageInfo.pageSize" :page-sizes="[5, 10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePagination('size', $event)" @current-change="handlePagination('page', $event)"></el-pagination> </div> </el-card> </div> <div class="recallDialog" v-show="recallDialog"> <div class="close"> <button @click="closeRecall" class="Btn">关闭</button> </div> <div class="text"> <text class="txt">{{ textContent }}</text> </div> <div class="cancle"> <button @click="closeRecall" class="Btn">取消</button> </div> <div class="confirm"> <button class="Btn">确定</button> </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-form-item> <el-form-item label="客户姓名" required> <el-input v-model="addFormData.userName" placeholder="请输入客户姓名" /> </el-form-item> <el-form-item label="所属地区" required> <el-input disabled="true" v-model="addFormData.market" placeholder="请输入所属地区" /> </el-form-item> <el-form-item label="活动名称" required> <el-input v-model="addFormData.jwcode" placeholder="请输入活动名称" /> </el-form-item> <el-form-item label="产品名称" required> <ProductSelect></ProductSelect> </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> <CurrencySelect v-model="addFormData.moneytype" :items="customOptions" placeholder="请选择付款币种" @change="handleCurrencyChange" /> </el-form-item> <el-form-item label="付款金额" required> <el-input v-model="addFormData.jwcode" placeholder="请输入付款金额" /> </el-form-item> <el-form-item label="支付方式" required> <CurrencySelect v-model="addFormData.paytype" :items="paytypeOptions" placeholder="请选择支付方式"> </CurrencySelect> </el-form-item> <el-form-item label="到账地区" required> <CurrencySelect v-model="addFormData.MoneyAddress" :items="MoneyAddressOptions" placeholder="请选择支付方式"> </CurrencySelect> </el-form-item> <el-form-item label="付款时间" required> <el-date-picker type="datetime" placement="right" v-model="addFormData.time" placeholder="请选择付款时间" /> </el-form-item> <el-form-item label="转账凭证" required> <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" show-word-limit /> </el-form-item> </el-form> <template #footer> <span class="dialog-footer"> <el-button style="background-color: #7E91FF;" @click="closeAddForm">取消</el-button> <el-button style="background-color: #2741DE; margin-left: 2.5vw;" type="primary" @click="handleAddForm">确定</el-button> </span> </template> </el-dialog> <!-- 审核弹窗 --> <el-dialog class="adddialog" v-model="auditFormisible" width="20vw" :before-close="closeAuditForm"> <el-form class="addForm" label-width="4vw" label-position="left"> <el-form-item label="精网号"> <el-input v-model="auditFormData.jwcode" placeholder="请输入驳回理由" /> </el-form-item> <el-form-item label="客户姓名"> <el-input v-model="auditFormData.userName" placeholder="请输入客户姓名" /> </el-form-item> <el-form-item label="所属地区"> <el-input disabled="true" v-model="auditFormData.market" /> </el-form-item> <el-form-item label="活动名称"> <el-input v-model="auditFormData.jwcode" placeholder="请输入活动名称" /> </el-form-item> <el-form-item label="产品名称"> <el-select placeholder="请选择产品名称" clearable></el-select> </el-form-item> <el-form-item label="付款币种"> <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="请输入付款金额" /> </el-form-item> <el-form-item label="支付方式"> <el-select placeholder="请选择支付方式" clearable></el-select> </el-form-item> <el-form-item label="付款时间"> <el-date-picker type="datetime" v-model="auditFormData.time" placeholder="请选择付款时间" /> </el-form-item> <el-form-item label="转账凭证"> <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="auditFormData.imageUrl" :src="auditFormData.imageUrl" class="avatar" style="height: 100%; width: 100%; object-fit: cover;" /> <el-icon v-else class="avatar-uploader-icon"> <Plus /> </el-icon> </el-upload> <el-text class="picText"> 仅支持.jpg .png格式文件≤ 1 MB </el-text> </div> </el-form-item> <el-form-item label="备注"> <el-input v-model="auditFormData.mask" type="textarea" :rows="3" placeholder="请输入备注" maxlength="100" show-word-limit /> </el-form-item> <el-form-item label="驳回理由" v-if="ifReject" required> <el-input v-model="auditFormData.mask" type="textarea" :rows="3" placeholder="请输入驳回理由" maxlength="100" show-word-limit /> </el-form-item> </el-form> <template #footer> <span class="dialog-footer" v-if="!ifReject"> <el-button style="background-color: #7E91FF;" @click="ifReject = true">驳回</el-button> <el-button :style="{ backgroundColor: isBtnDisabled ? '#E5E5E5FF' : '#2741DEFF', marginLeft: '60px', color: isBtnDisabled ? '#8A8A8A' : '#F3FAFE' }" @click="handleReject" :disabled="isBtnDisabled">{{ btnText }}</el-button> </span> <span class="dialog-footer" v-if="ifReject"> <el-button style="background-color: #7E91FF;" @click="closeAuditForm">取消</el-button> <el-button style="background-color: #2741DE; margin-left: 2.5vw;" type="primary" @click="handleReject">确定</el-button> </span> </template> </el-dialog> <!-- 编辑弹窗 --> <el-dialog class="editdialog" v-model="editFormisible" width="20vw" :before-close="closeEditForm"> <div class="content"> <div class="left"> <el-form class="editForm" label-width="4.5vw" label-position="left"> <el-form-item label="精网号"> <el-input v-model="editFormData.jwcode" placeholder="请输入驳回理由" /> </el-form-item> <el-form-item label="客户姓名"> <el-input v-model="editFormData.userName" placeholder="请输入客户姓名" /> </el-form-item> <el-form-item label="所属地区"> <el-input disabled="true" v-model="editFormData.market" placeholder="请输入所属地区" /> </el-form-item> <el-form-item label="活动名称"> <el-input v-model="editFormData.jwcode" placeholder="请输入活动名称" /> </el-form-item> <el-form-item label="产品名称"> <el-select placeholder="请选择产品名称" clearable></el-select> </el-form-item> <el-form-item label="付款币种"> <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="请输入付款金额" /> </el-form-item> <el-form-item label="支付方式"> <el-select placeholder="请选择支付方式" clearable></el-select> </el-form-item> <el-form-item label="付款时间"> <el-date-picker type="datetime" v-model="editFormData.time" placeholder="请选择付款时间" /> </el-form-item> <el-form-item label="转账凭证"> <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="editFormData.imageUrl" :src="editFormData.imageUrl" class="avatar" style="height: 100%; width: 100%; object-fit: cover;" /> <el-icon v-else class="avatar-uploader-icon"> <Plus /> </el-icon> </el-upload> <el-text class="picText"> 仅支持.jpg .png格式文件≤ 1 MB </el-text> </div> </el-form-item> <el-form-item label="驳回理由"> <el-input v-model="addFormData.mask" type="textarea" :rows="4" placeholder="请输入驳回理由" maxlength="100" show-word-limit /> </el-form-item> </el-form> </div> <div class="right"> <el-form class="editFormRighrt" label-width="4.5vw" label-position="left"> <el-form-item label="到账货币"> <el-select placeholder="请选择产品名称" clearable></el-select> </el-form-item> <el-form-item label="到账金额"> <el-input v-model="addFormData.userName" placeholder="请输入到账金额" /> </el-form-item> <el-form-item label="手续费"> <el-input disabled="true" v-model="addFormData.market" placeholder="请输入手续费" /> </el-form-item> <el-form-item label="银行流水订单号"> <el-input v-model="addFormData.jwcode" placeholder="请输入银行流水订单号" /> </el-form-item> <el-form-item label="到账时间"> <el-input v-model="addFormData.jwcode" placeholder="请输入到账时间" /> </el-form-item> </el-form> <span class="editBtns"> <button class="editBtn1" @click="closeEditForm"> <text class="txt"> 取消 </text> </button> <button class="editBtn2" @click="submitEditForm"> <text class="txt"> 提交 </text> </button> </span> </div> </div> </el-dialog> </div></template><script setup>import { ref, watch, computed } from 'vue';import { ElMessage } from 'element-plus'import API from '@/util/http.js'import { color } from 'echarts';import { template } from 'lodash';import CurrencySelect from '@/components/MoneyManage/CurrencySelect.vue'import ProductSelect from '@/components/MoneyManage/ProductSelect.vue'//==================== 标签切换 =========================
const activeTab = ref('wait')
const navigateTo = (tab) => { if (tab === 'wait') { activeTab.value = 'wait' } else if (tab === 'pass') { activeTab.value = 'pass' } else if (tab === 'reject') { activeTab.value = 'reject' }}
const kefu = ref(true)const caiwu = ref(true)const checkKefu = () => { kefu.value = true caiwu.value = false}const checkCaiwu = () => { kefu.value = false caiwu.value = true}//================= 客服新增弹窗 ==================
const addFormData = ref({})const addFormisible = ref(false)
const uploadRef = ref()const openAddForm = (row) => { if (row) { addFormData.value = { ...row }; } else { addFormData.value = {} } addFormisible.value = true}const closeAddForm = () => { addFormisible.value = false addFormData.value = {}}
const handleAddForm = () => { console.log('客服新增的数据', addFormData.value);
}
//付款币种
const selectedCurrency = ref('');const customOptions = ref(['新币', '马币', '港币', '美元', '英镑', '越南盾']);
//支付方式
const paytypeOptions = ref(["银行转账", "刷卡", "现金", "支票", "Grabpay", "Nets", "E-Transfer", "Paypal", "Stripe-链接收款", "PaymentAsia-链接收款", "Ipay88-链接收款"])const MoneyAddressOptions = ref(['马来西亚','香港','新加坡'])const handleCurrencyChange = (option) => { console.log('选中的币种:', option);};//撤回弹窗
const textContent = ref('')const recallDialog = ref(false)const openRecall = (val) => { console.log('打开弹窗', val);
if (val == 'refund') { textContent.value = '将要对该订单退款!' } if (val == 'recall') { textContent.value = '将要撤回该信息!' } recallDialog.value = true}const closeRecall = () => { recallDialog.value = false textContent.value = ''}//图片上传
const handleImgSuccess = (response, uploadFile) => { try { console.log('11', response) addFormData.value.imageUrl = response.data.url console.log('22', response.data.url) } catch (error) { console.log('报错信息', error) ElMessage.error(response.msg || '图片上传失败') }}
const handelImgErr = (err) => { console.log(err); addFormData.value.imageUrl = null ElMessage.error("图片上传失败")}const beforeUpload = (rawFile) => { if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') { ElMessage.error('图片必须是jpg或png类型!') return false } else if (rawFile.size / 1024 / 1024 > 1) { ElMessage.error('图片大小不能超过 1MB!') return false } return true}const handleImageChange = (file) => { uploadRef.value.submit()}
const customUpload = async (options) => { try { const formData = new FormData() formData.append('file', options.file)
const response = await API({ url: 'https://api.homilychart.com/hljw/api/aws/upload', method: 'POST', data: formData, headers: { 'Content-Type': 'multipart/form-data' } }) if (response.code === 100 && response.data) { handleImgSuccess(response, options.file) ElMessage.success(response.msg || '上传成功') } else { options.onError(response) ElMessage.error(response.msg || '上传失败') } } catch (error) { console.error('上传错误:', error) ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`) }}
//================== 财务编辑相关 =========================
const editFormData = ref({
})const editFormisible = ref(false)const openEditForm = (row) => { console.log('编辑时该行数据：', row); editFormData.value = row editFormisible.value = true}const closeEditForm = () => { editFormisible.value = false editFormData.value = {}}//提交编辑
const submitEditForm = () => {
}//================== 审核相关 =========================
const auditFormData = ref({
})const auditFormisible = ref(false)//判断弹窗中是否展示驳回
const ifReject = ref(false)const openAuditForm = () => { auditFormisible.value = true}const countdown = ref(0); // 倒计时秒数（示例设为 5 秒）
const isBtnDisabled = ref(false); // 按钮是否禁用
const btnText = ref('通过(3)'); // 按钮显示的文字（含倒计时）
const closeAuditForm = () => { ifReject.value = false auditFormisible.value = false auditFormData.value = {}}//倒计时控制通过按钮
watch(auditFormisible, (val) => { if (val) { countdown.value = 3 isBtnDisabled.value = true btnText.value = `通过(${countdown.value})`
const timer = setInterval(() => { countdown.value-- btnText.value = `通过(${countdown.value})` console.log(btnText.value);
if (countdown.value <= 0) { isBtnDisabled.value = false clearInterval(timer) btnText.value = '通过' } }, 1000); }
})//========================分页相关==================
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": "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 { //整体内容
height: 100%; width: 83vw;
.card1 { // 筛选框
width: 100%;
.row { height: 4vh; width: 80vw; display: flex; min-height: 40px;
.rowItem { display: flex; width: 15vw; align-items: center; justify-content: center; margin-right: 0.5vw; }
.buttons { display: flex; justify-content: center; align-items: center; margin-left: 10px; } } }
.div-card2 { // 下方数据展示card
width: 100%;
margin-top: 2vh;
.btns { //切换标签
display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px;
.tabs { min-width: 300px;
.btnItem { margin-left: 10px; border-radius: 5px; } }
.btnAdd { margin-right: 5vw; padding-left: 50px; } }
.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 { margin-top: 10px; padding: 10px 10px; } }
.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; // 确保在其他元素上层显示
.close { position: absolute; left: 625px; top: 20px; height: 38px; width: 38px; opacity: 0;
.Btn { height: 100%; width: 100%; border-radius: 10px; } }
.text { position: absolute; left: 185px; top: 190px; height: 67px; width: 500px;
.txt { height: 100%; width: 100%; color: #001a42; font-family: "PingFang SC"; font-size: 48px; font-style: normal; font-weight: 900; line-height: normal; } }
.cancle { position: absolute; left: 185px; top: 304px; height: 55px; width: 150px; opacity: 0;
.Btn { height: 100%; width: 100%; border-radius: 20px; } }
.confirm { position: absolute; left: 375px; top: 304px; height: 55px; width: 150px; opacity: 0;
.Btn { height: 100%; width: 100%; border-radius: 20px; } } }
:deep(.adddialog) { //客服新增弹窗
min-width: 500px; background-color: #F3FAFE !important; margin-top: 8vh; border-radius: 8px;
.addForm { padding: 0 60px 1vh 60px;
.el-date-editor { display: flex; flex: 1;
}
.pic { display: flex; align-items: center;
.uploader { height: 80px; width: 80px;
.el-upload { height: 100%; width: 100%; } }
.picText { color: #999999; font-family: "PingFang SC"; font-size: 10px; font-style: normal; font-weight: 400; line-height: 20px; margin-left: 10px; } }
.moneyType { position: relative; width: 100%;
} }
.dialog-footer { display: flex; justify-content: center; padding-bottom: 1.5vh; } }
:deep(.editdialog) { //编辑弹窗
min-width: 990px; background-color: #F3FAFE !important; margin-top: 8vh; border-radius: 8px;
.editForm { padding: 0 60px 1vh 60px;
.el-date-editor { display: flex; flex: 1; }
.pic { display: flex; align-items: center;
.uploader { height: 80px; width: 80px;
.el-upload { height: 100%; width: 100%; } }
.picText { color: #999999; font-family: "PingFang SC"; font-size: 10px; font-style: normal; font-weight: 400; line-height: 20px; margin-left: 10px; } }
}
.content { //编辑弹窗内容
display: flex; height: 100%; width: 100%;
.left { min-width: 500px; }
.right { flex: 1;
.editFormRighrt { padding: 0 60px 0 40px;
.el-date-editor { display: flex; flex: 1; }
.pic { display: flex; align-items: center;
.uploader { height: 80px; width: 80px;
.el-upload { height: 100%; width: 100%; } }
.picText { color: #999999; font-family: "PingFang SC"; font-size: 10px; font-style: normal; font-weight: 400; line-height: 20px; margin-left: 10px; } } }
.editBtns { display: flex; justify-content: center; margin-top: 60px;
.txt { color: #f3fafe; text-align: center; font-family: "PingFang SC"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 22px; }
.editBtn1 { min-width: 80px; padding: 5px 12px; justify-content: center; align-items: center; gap: 4px; border-radius: 4px; background: #7E91FF; border: none; box-shadow: 0 0 4px 0 #00000040; }
.editBtn2 { display: flex; width: 80px; min-width: 80px; padding: 5px 12px; justify-content: center; align-items: center; gap: 4px; border-radius: 4px; background: #2741DE; border: none; box-shadow: 0 0 4px 0 #00000040; margin-left: 60px; } }
} }
}
:deep(.adddialog .el-form-item__label) { //设置新增弹窗表头
min-width: 80px; width: auto; font-weight: 800; padding-bottom: 15px; }}
// 搜索的卡片样式
.card1 { background: #F3FAFE;}
// 表单的卡片样式
.card2 { background: #E7F4FD;}
// 表头背景等
:deep(.el-table__header-wrapper),:deep(.el-table__body-wrapper),:deep(.el-table__cell),/* 表格 */:deep(.el-table__body td) { background-color: #F3FAFE !important;}
/* 表头 */:deep(.el-table__header th) { background-color: #F3FAFE !important;}
/* 鼠标悬停 */:deep(.el-table__row:hover > .el-table__cell) { background-color: #E5EBFE !important;}</style>
|
