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.
450 lines
18 KiB
450 lines
18 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">
|
|
<text style="width: 4vw;">客户姓名</text>
|
|
<el-input placeholder="请输入客户姓名" style="width:10vw;" clearable></el-input>
|
|
</div>
|
|
<div class="rowItem">
|
|
<text style="width: 4vw;">所属地区</text>
|
|
<el-select placeholder="请选择所属地区" style="width:10vw;" clearable></el-select>
|
|
</div>
|
|
<div class="rowItem">
|
|
<text style="width: 4vw;">订单状态</text>
|
|
<el-select placeholder="请选择订单状态" style="width: 10vw;" clearable></el-select>
|
|
</div>
|
|
<div class="rowItem">
|
|
<text style="width: 4vw;">支付方式</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-select placeholdert="请选择活动方式" style="width: 10vw;" clearable></el-select>
|
|
</div>
|
|
<div class="rowItem">
|
|
<text style="width: 4vw;">产品名称</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-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>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
|
|
|
|
<div class="card2">
|
|
<el-card>
|
|
<div class="btns">
|
|
<div class="tabs">
|
|
<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">添加收款</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="freeGold" label="支付方式" width="110px">
|
|
</el-table-column>
|
|
<el-table-column prop="remark" label="付款时间" width="200px" />
|
|
<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="" label="备注" width="150px" show-overflow-tooltip>
|
|
</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">
|
|
<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="200"
|
|
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>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { ElMessage } from 'element-plus'
|
|
import API from '@/util/http.js'
|
|
|
|
//==================== 标签切换 =========================
|
|
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 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 === 200 && 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 pageInfo = ref({
|
|
pageSize: 10,
|
|
pageNum: 1
|
|
})
|
|
|
|
|
|
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: '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: 'HW2023003',
|
|
name: '王五',
|
|
market: '广州',
|
|
activity: '秋季回馈活动',
|
|
rateName: '铂金收藏产品C',
|
|
money: '美元',
|
|
permanentGold: '1000.00',
|
|
freeGold: '微信支付',
|
|
remark: '2023-09-10 09:20:00',
|
|
voucher: '',
|
|
adminName: '待支付',
|
|
rejectReason: '无',
|
|
},
|
|
{
|
|
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: 'HW2023005',
|
|
name: '孙七',
|
|
market: '成都',
|
|
activity: '周年庆典活动',
|
|
rateName: '翡翠投资产品E',
|
|
money: '人民币',
|
|
permanentGold: '8000.00',
|
|
freeGold: '银行转账',
|
|
remark: '2024-01-20 11:10:00',
|
|
voucher: '',
|
|
adminName: '已驳回',
|
|
rejectReason: '支付金额有误',
|
|
}
|
|
];
|
|
</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 {
|
|
width: 100%;
|
|
|
|
margin-top: 2vh;
|
|
|
|
.btns {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.tabs{
|
|
min-width: 300px;
|
|
.btnItem {
|
|
margin-left: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
.btnAdd {
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
margin-right: 1vw;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.table {
|
|
margin: 10px 3vw;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.pagination {
|
|
margin-top: 10px;
|
|
padding: 10px 10px;
|
|
}
|
|
}
|
|
|
|
:deep(.adddialog) {
|
|
min-width: 450px;
|
|
background-color: #F3FAFE !important;
|
|
|
|
.addForm {
|
|
padding: 0 3vw 1vh 1vw;
|
|
|
|
.el-date-editor {
|
|
display: flex;
|
|
flex: 1;
|
|
|
|
}
|
|
}
|
|
|
|
.dialog-footer {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-bottom: 1.5vh;
|
|
}
|
|
}
|
|
|
|
:deep(.adddialog .el-form-item__label) {
|
|
min-width: 80px;
|
|
width: auto;
|
|
font-weight: 800;
|
|
padding-bottom: 15px;
|
|
}
|
|
}
|
|
</style>
|