ZhangYong
2 weeks ago
2 changed files with 260 additions and 3 deletions
@ -1,2 +1,259 @@ |
|||||
<template></template> |
|
||||
<script setup></script> |
|
||||
|
<template> |
||||
|
<div class="content"> |
||||
|
<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 class="detail"> |
||||
|
<el-card> |
||||
|
<div class="btnAdd"> |
||||
|
<el-button @click="openAddForm" type="success">新增收款</el-button> |
||||
|
</div> |
||||
|
<div class="form"> |
||||
|
<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 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> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
<el-dialog class="addForm" v-model="addFormisible" width="500px"> |
||||
|
<el-form> |
||||
|
<el-form-item label="驳回理由" required> |
||||
|
<el-input v-model="rejectReason" type="textarea" :rows="4" placeholder="请输入驳回理由" maxlength="200" |
||||
|
show-word-limit /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<span class="dialog-footer"> |
||||
|
<el-button @click="addFormisible = false">取消</el-button> |
||||
|
<el-button type="primary" @click="handleReject">确定</el-button> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup> |
||||
|
import { ref } from 'vue'; |
||||
|
|
||||
|
//================= 客服新增弹窗 ================== |
||||
|
const addFormisible =ref(false) |
||||
|
const openAddForm =()=>{ |
||||
|
addFormisible.value = true |
||||
|
} |
||||
|
const addFormData = ref({ |
||||
|
|
||||
|
}) |
||||
|
//========================分页相关================== |
||||
|
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: 80vw; |
||||
|
background-color: #E7F4FD !important; |
||||
|
|
||||
|
.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; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.detail { |
||||
|
margin-top: 2vh; |
||||
|
|
||||
|
.el-card__body {} |
||||
|
|
||||
|
.btnAdd {} |
||||
|
|
||||
|
.form { |
||||
|
background-color: #E7F4FD !important; |
||||
|
} |
||||
|
|
||||
|
.pagination { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.addForm ::v-deep .el-dialog__body{ |
||||
|
background-color: #E7F4FD !important; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue