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.
920 lines
38 KiB
920 lines
38 KiB
<template>
|
|
<div class="content">
|
|
<div class="card1">
|
|
<el-card 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="card2">
|
|
<el-card>
|
|
<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="money" label="付款币种" width="100px">
|
|
</el-table-column>
|
|
<el-table-column prop="permanentGold" label="付款金额" width="120px">
|
|
</el-table-column>
|
|
<el-table-column prop="moneyType" label="到账币种" v-if="caiwu && activeTab == 'pass'" width="150px" ></el-table-column>
|
|
<el-table-column prop="getMoney" label="到账金额" v-if="caiwu && activeTab == 'pass'" width="150px" >
|
|
<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'" 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>
|
|
</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>
|
|
<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>
|
|
<el-select placeholder="请选择产品名称" clearable></el-select>
|
|
</el-form-item>
|
|
<el-form-item label="付款币种" required>
|
|
<el-select placeholder="请选择付款币种" clearable></el-select>
|
|
</el-form-item>
|
|
<el-form-item label="付款金额" required>
|
|
<el-input v-model="addFormData.jwcode" placeholder="请输入付款金额" />
|
|
</el-form-item>
|
|
<el-form-item label="支付方式" required>
|
|
<el-select placeholder="请选择支付方式" clearable></el-select>
|
|
</el-form-item>
|
|
<el-form-item label="付款时间" required>
|
|
<el-time-picker v-model="addFormData.time" placeholder="请选择付款时间" />
|
|
</el-form-item>
|
|
<el-form-item label="转账凭证" required>
|
|
<el-upload ref="uploadRef" class="uploader" :show-file-list="false" list-type="picture-card"
|
|
:auto-upload="false" :before-upload="beforeUpload" :on-error="handelImgErr"
|
|
:on-change="handleImageChange" :http-request="customUpload">
|
|
<img v-if="addFormData.imageUrl" :src="addFormData.imageUrl" class="avatar"
|
|
style="height: 100%; width: 100%; object-fit: cover;" />
|
|
<el-icon v-else class="avatar-uploader-icon">
|
|
<Plus />
|
|
</el-icon>
|
|
</el-upload>
|
|
</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="handleReject">确定</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="请选择付款币种" 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, 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')
|
|
|
|
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 = () => {
|
|
addFormisible.value = true
|
|
}
|
|
const closeAddForm = () => {
|
|
addFormisible.value = false
|
|
addFormData.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 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 tableData = [
|
|
{
|
|
"jwcode": "HM2024001",
|
|
"name": "张三",
|
|
"market": "华东区",
|
|
"activity": "2024春季促销活动",
|
|
"rateName": "年度会员套餐A",
|
|
"money": "人民币",
|
|
"permanentGold": 2980.00,
|
|
"moneyType": "人民币",
|
|
"getMoney": 2980.00,
|
|
"shouxufei": 59.60,
|
|
"pastType": "支付宝转账",
|
|
"remark": "2024-05-10 09:23",
|
|
"voucher": "https://example.com/voucher/1.jpg",
|
|
"payModel": "https://example.com/icon/alipay.png",
|
|
"bankOrder": "ALIPAY2024051000001",
|
|
"submiter": "李四（运营部）",
|
|
"auditor": "王五（财务部）",
|
|
"mask": "客户主动购买，无特殊备注",
|
|
"getMoneyTime": "2024-05-10 10:05",
|
|
"orderStatus": "已通过"
|
|
},
|
|
{
|
|
"jwcode": "HM2024002",
|
|
"name": "李四",
|
|
"market": "华北区",
|
|
"activity": "新客首单优惠",
|
|
"rateName": "季度体验套餐B",
|
|
"money": "美元",
|
|
"permanentGold": 99.00,
|
|
"moneyType": "人民币",
|
|
"getMoney": 712.00,
|
|
"shouxufei": 14.24,
|
|
"pastType": "PayPal",
|
|
"remark": "2024-05-11 14:56",
|
|
"voucher": "https://example.com/voucher/2.jpg",
|
|
"payModel": "https://example.com/icon/paypal.png",
|
|
"bankOrder": "PAYPAL2024051100002",
|
|
"submiter": "赵六（国际部）",
|
|
"auditor": "孙七（财务部）",
|
|
"mask": "跨境支付，汇率按当日中间价计算",
|
|
"getMoneyTime": "2024-05-12 08:30",
|
|
"orderStatus": "待审核"
|
|
},
|
|
{
|
|
"jwcode": "HM2024003",
|
|
"name": "王五",
|
|
"market": "华南区",
|
|
"activity": "老客召回活动",
|
|
"rateName": "月度续费套餐C",
|
|
"money": "人民币",
|
|
"permanentGold": 399.00,
|
|
"moneyType": "人民币",
|
|
"getMoney": null,
|
|
"shouxufei": null,
|
|
"pastType": "微信支付",
|
|
"remark": "2024-05-12 11:18",
|
|
"voucher": "https://example.com/voucher/3.jpg",
|
|
"payModel": "https://example.com/icon/wechat.png",
|
|
"bankOrder": "WECHAT2024051200003",
|
|
"submiter": "钱八（客服部）",
|
|
"auditor": null,
|
|
"mask": "到账信息待财务补充",
|
|
"getMoneyTime": null,
|
|
"orderStatus": "已撤回"
|
|
},
|
|
{
|
|
"jwcode": "HM2024004",
|
|
"name": "赵六",
|
|
"market": "西区",
|
|
"activity": "企业团购活动",
|
|
"rateName": "企业定制套餐D",
|
|
"money": "人民币",
|
|
"permanentGold": 15800.00,
|
|
"moneyType": "人民币",
|
|
"getMoney": 15800.00,
|
|
"shouxufei": 316.00,
|
|
"pastType": "银行对公转账",
|
|
"remark": "2024-05-13 09:45",
|
|
"voucher": "https://example.com/voucher/4.jpg",
|
|
"payModel": "https://example.com/icon/bank.png",
|
|
"bankOrder": "BANK2024051300004",
|
|
"submiter": "周九（销售部）",
|
|
"auditor": "吴十（财务部）",
|
|
"mask": "10人企业团单，享受95折优惠",
|
|
"getMoneyTime": "2024-05-13 11:20",
|
|
"orderStatus": "已通过"
|
|
},
|
|
{
|
|
"jwcode": "HM2024005",
|
|
"name": "孙七",
|
|
"market": "东北区",
|
|
"activity": "节日特惠活动",
|
|
"rateName": "年度会员套餐A",
|
|
"money": "人民币",
|
|
"permanentGold": 2780.00,
|
|
"moneyType": "人民币",
|
|
"getMoney": 2780.00,
|
|
"shouxufei": 55.60,
|
|
"pastType": "银联支付",
|
|
"remark": "2024-05-14 15:30",
|
|
"voucher": null,
|
|
"payModel": null,
|
|
"bankOrder": "UNIONPAY2024051400005",
|
|
"submiter": "郑一（市场部）",
|
|
"auditor": "王二（财务部）",
|
|
"mask": "凭证暂未上传，已提醒客户补充",
|
|
"getMoneyTime": "2024-05-14 16:45",
|
|
"orderStatus": "待审核"
|
|
}
|
|
]
|
|
</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;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.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: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.table {
|
|
margin: 10px 3vw;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.pagination {
|
|
margin-top: 10px;
|
|
padding: 10px 10px;
|
|
}
|
|
}
|
|
|
|
: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;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
</style>
|