You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1244 lines
49 KiB
1244 lines
49 KiB
<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>
|