|
|
|
@ -8,33 +8,33 @@ |
|
|
|
<el-input placeholder="请输入精网号" style="width:10vw;" clearable></el-input> |
|
|
|
</div> |
|
|
|
<div class="rowItem"> |
|
|
|
<text style="width: 4vw;">客户姓名</text> |
|
|
|
<el-text style="width: 4vw;">客户姓名</el-text> |
|
|
|
<el-input placeholder="请输入客户姓名" style="width:10vw;" clearable></el-input> |
|
|
|
</div> |
|
|
|
<div class="rowItem"> |
|
|
|
<text style="width: 4vw;">所属地区</text> |
|
|
|
<el-text style="width: 4vw;">所属地区</el-text> |
|
|
|
<el-select placeholder="请选择所属地区" style="width:10vw;" clearable></el-select> |
|
|
|
</div> |
|
|
|
<div class="rowItem"> |
|
|
|
<text style="width: 4vw;">订单状态</text> |
|
|
|
<el-text style="width: 4vw;">订单状态</el-text> |
|
|
|
<el-select placeholder="请选择订单状态" style="width: 10vw;" clearable></el-select> |
|
|
|
</div> |
|
|
|
<div class="rowItem"> |
|
|
|
<text style="width: 4vw;">支付方式</text> |
|
|
|
<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"> |
|
|
|
<text style="width: 4vw;">活动名称</text> |
|
|
|
<el-text style="width: 4vw;">活动名称</el-text> |
|
|
|
<el-select placeholdert="请选择活动方式" style="width: 10vw;" clearable></el-select> |
|
|
|
</div> |
|
|
|
<div class="rowItem"> |
|
|
|
<text style="width: 4vw;">产品名称</text> |
|
|
|
<el-text style="width: 4vw;">产品名称</el-text> |
|
|
|
<el-select placeholder="请选择产品名称" style="width: 10vw;" clearable></el-select> |
|
|
|
</div> |
|
|
|
<div class="rowItem" style="width: 30vw"> |
|
|
|
<text style="width: 4vw; margin-left: 0.5vw;">付款时间</text> |
|
|
|
<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" |
|
|
|
@ -47,6 +47,8 @@ |
|
|
|
<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> |
|
|
|
@ -56,7 +58,7 @@ |
|
|
|
<div class="card2"> |
|
|
|
<el-card> |
|
|
|
<div class="btns"> |
|
|
|
<div class="tabs"> |
|
|
|
<div class="tabs" v-if="caiwu"> |
|
|
|
<el-button-group> |
|
|
|
<el-button class="btnItem" |
|
|
|
:style="{ backgroundColor: activeTab === 'wait' ? '#2741DE' : '#E5EBFE', color: activeTab === 'wait' ? 'white' : '#666' }" |
|
|
|
@ -76,7 +78,7 @@ |
|
|
|
</el-button-group> |
|
|
|
</div> |
|
|
|
<div class="btnAdd"> |
|
|
|
<el-button @click="openAddForm" type="success">添加收款</el-button> |
|
|
|
<el-button @click="openAddForm" type="success" v-if="kefu">添加收款</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
@ -98,9 +100,24 @@ |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="permanentGold" label="付款金额" width="120px"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="freeGold" label="支付方式" width="110px"> |
|
|
|
<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" > |
|
|
|
<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="remark" label="付款时间" width="200px" /> |
|
|
|
<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" |
|
|
|
@ -114,10 +131,26 @@ |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="" label="备注" 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'" 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> |
|
|
|
<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="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-column fixed="right" prop="adminName" label="订单状态" width="100px" /> |
|
|
|
<el-table-column fixed="right" prop="rejectReason" label="操作" width="100px" /> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
<div class="pagination"> |
|
|
|
@ -168,8 +201,8 @@ |
|
|
|
</el-icon> |
|
|
|
</el-upload> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="驳回理由" required> |
|
|
|
<el-input v-model="addFormData.mask" type="textarea" :rows="4" placeholder="请输入驳回理由" maxlength="200" |
|
|
|
<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> |
|
|
|
@ -181,12 +214,173 @@ |
|
|
|
</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="请选择付款币种" clearable></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-time-picker 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-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-time-picker 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"> |
|
|
|
<text class="txt"> |
|
|
|
取消 |
|
|
|
</text> |
|
|
|
</button> |
|
|
|
<button class="editBtn2"> |
|
|
|
<text class="txt"> |
|
|
|
提交 |
|
|
|
</text> |
|
|
|
</button> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script setup> |
|
|
|
import { ref } from 'vue'; |
|
|
|
import { ref, watch } from 'vue'; |
|
|
|
import { ElMessage } from 'element-plus' |
|
|
|
import API from '@/util/http.js' |
|
|
|
import { color } from 'echarts'; |
|
|
|
import { template } from 'lodash'; |
|
|
|
|
|
|
|
//==================== 标签切换 ========================= |
|
|
|
const activeTab = ref('wait') |
|
|
|
@ -201,11 +395,24 @@ const navigateTo = (tab) => { |
|
|
|
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 = () => { |
|
|
|
addFormisible.value = true |
|
|
|
@ -258,7 +465,7 @@ const customUpload = async (options) => { |
|
|
|
'Content-Type': 'multipart/form-data' |
|
|
|
} |
|
|
|
}) |
|
|
|
if (response.code === 200 && response.data) { |
|
|
|
if (response.code === 100 && response.data) { |
|
|
|
handleImgSuccess(response, options.file) |
|
|
|
ElMessage.success(response.msg || '上传成功') |
|
|
|
} else { |
|
|
|
@ -270,6 +477,60 @@ const customUpload = async (options) => { |
|
|
|
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 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, |
|
|
|
@ -280,83 +541,123 @@ const pageInfo = ref({ |
|
|
|
const total = ref(0) |
|
|
|
const tableData = [ |
|
|
|
{ |
|
|
|
jwcode: 'HW2023001', |
|
|
|
name: '张三', |
|
|
|
market: '北京', |
|
|
|
activity: '春季促销活动', |
|
|
|
rateName: '黄金投资产品A', |
|
|
|
money: '人民币', |
|
|
|
permanentGold: '5000.00', |
|
|
|
freeGold: '银行转账', |
|
|
|
remark: '2023-03-15 10:30:00', |
|
|
|
voucher: 'https://example.com/images/voucher1.jpg', |
|
|
|
adminName: '已支付', |
|
|
|
rejectReason: '无', |
|
|
|
"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: 'HW2023002', |
|
|
|
name: '李四', |
|
|
|
market: '上海', |
|
|
|
activity: '夏日特惠活动', |
|
|
|
rateName: '白银理财产品B', |
|
|
|
money: '人民币', |
|
|
|
permanentGold: '3000.00', |
|
|
|
freeGold: '支付宝', |
|
|
|
remark: '2023-06-20 14:15:00', |
|
|
|
voucher: 'https://example.com/images/voucher2.jpg', |
|
|
|
adminName: '已支付', |
|
|
|
rejectReason: '无', |
|
|
|
"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: 'HW2023003', |
|
|
|
name: '王五', |
|
|
|
market: '广州', |
|
|
|
activity: '秋季回馈活动', |
|
|
|
rateName: '铂金收藏产品C', |
|
|
|
money: '美元', |
|
|
|
permanentGold: '1000.00', |
|
|
|
freeGold: '微信支付', |
|
|
|
remark: '2023-09-10 09:20:00', |
|
|
|
voucher: '', |
|
|
|
adminName: '待支付', |
|
|
|
rejectReason: '无', |
|
|
|
"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: 'HW2023004', |
|
|
|
name: '赵六', |
|
|
|
market: '深圳', |
|
|
|
activity: '冬季感恩活动', |
|
|
|
rateName: '钻石尊享产品D', |
|
|
|
money: '欧元', |
|
|
|
permanentGold: '2000.00', |
|
|
|
freeGold: '信用卡', |
|
|
|
remark: '2023-12-05 16:40:00', |
|
|
|
voucher: 'https://example.com/images/voucher4.jpg', |
|
|
|
adminName: '已支付', |
|
|
|
rejectReason: '无', |
|
|
|
"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: 'HW2023005', |
|
|
|
name: '孙七', |
|
|
|
market: '成都', |
|
|
|
activity: '周年庆典活动', |
|
|
|
rateName: '翡翠投资产品E', |
|
|
|
money: '人民币', |
|
|
|
permanentGold: '8000.00', |
|
|
|
freeGold: '银行转账', |
|
|
|
remark: '2024-01-20 11:10:00', |
|
|
|
voucher: '', |
|
|
|
adminName: '已驳回', |
|
|
|
rejectReason: '支付金额有误', |
|
|
|
} |
|
|
|
]; |
|
|
|
"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": "待审核" |
|
|
|
} |
|
|
|
] |
|
|
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
|
|
.content { |
|
|
|
.content { //整体内容 |
|
|
|
height: 100%; |
|
|
|
width: 83vw; |
|
|
|
|
|
|
|
.card1 { |
|
|
|
.card1 { // 筛选框 |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
.row { |
|
|
|
@ -383,26 +684,29 @@ const tableData = [ |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.card2 { |
|
|
|
.card2 { // 下方数据展示card |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
margin-top: 2vh; |
|
|
|
|
|
|
|
.btns { |
|
|
|
.btns { //切换标签 |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
.tabs{ |
|
|
|
padding-bottom: 10px; |
|
|
|
|
|
|
|
.tabs { |
|
|
|
min-width: 300px; |
|
|
|
|
|
|
|
.btnItem { |
|
|
|
margin-left: 10px; |
|
|
|
border-radius: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.btnAdd { |
|
|
|
flex: 1; |
|
|
|
justify-content: flex-end; |
|
|
|
margin-right: 1vw; |
|
|
|
margin-right: 5vw; |
|
|
|
padding-left: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -419,18 +723,47 @@ const tableData = [ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.adddialog) { |
|
|
|
min-width: 450px; |
|
|
|
:deep(.adddialog) { //客服新增弹窗 |
|
|
|
min-width: 500px; |
|
|
|
background-color: #F3FAFE !important; |
|
|
|
margin-top: 8vh; |
|
|
|
border-radius: 8px; |
|
|
|
|
|
|
|
.addForm { |
|
|
|
padding: 0 3vw 1vh 1vw; |
|
|
|
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; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.dialog-footer { |
|
|
|
@ -440,7 +773,144 @@ const tableData = [ |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.adddialog .el-form-item__label) { |
|
|
|
: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; |
|
|
|
|
ZhangYong