|
|
@@ -0,0 +1,432 @@
|
|
|
+<template>
|
|
|
+ <div class="fee" v-loading="load">
|
|
|
+ <div class="fee-tab">
|
|
|
+ <div class="item-tab" :class="{'on-tab':ontab == 0}" @click="tabChange(0)">待结算</div>
|
|
|
+ <div class="item-tab" :class="{'on-tab':ontab == 1}" @click="tabChange(1)">已结算</div>
|
|
|
+ </div>
|
|
|
+ <div class="fee-main">
|
|
|
+ <div class="fee-box" :class="{'onShow':ontab == 0}">
|
|
|
+ <module-view :propConfig="config" ref="willSettle" @pagination="pagination" @onRefresh="getList" @resert="queryList" @search="queryList"
|
|
|
+ @modalHandle="modalHandle" @clickHandle="clickHandle"/>
|
|
|
+ </div>
|
|
|
+ <div class="fee-box" :class="{'onShow':ontab == 1}">
|
|
|
+ <module-view :propConfig="config" ref="Settled" @pagination="pagination" @onRefresh="getSettledList" @resert="queryList" @search="queryList"
|
|
|
+ @modalHandle="modalHandle" @clickHandle="clickHandle"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-drawer
|
|
|
+ :with-header="false"
|
|
|
+ :visible.sync="drawer"
|
|
|
+ :direction="direction"
|
|
|
+ size="35%"
|
|
|
+ >
|
|
|
+ <div class="top">
|
|
|
+ <div class="name">选中单据（<span>{{checkCount}}单</span>）</div>
|
|
|
+ <div class="btn-group">
|
|
|
+ <div class="pay-btn">立即支付</div>
|
|
|
+ <div class="back" @click="drawer = false">返回</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top-space"></div>
|
|
|
+ <div class="pay-bill">
|
|
|
+ <div class="pay-item" v-for="(item,index) of payData" :key="index" @click="checkHandle(index)">
|
|
|
+ <div class="amount">
|
|
|
+ 金额<span>￥{{item.amount}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="pay-info">时间：{{item.time}}</div>
|
|
|
+ <div class="pay-info">单号：{{item.code}}</div>
|
|
|
+ <div class="pay-info">服务方：{{item.servicer}}</div>
|
|
|
+ <div class="pay-info">服务类型：{{item.type}}</div>
|
|
|
+ <div class="check" :class="{'showCheck':item.check}">
|
|
|
+ <i class="el-icon-check"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
|
|
+
|
|
|
+@Component({components:{}})
|
|
|
+export default class DbFee extends Vue {
|
|
|
+ load=false
|
|
|
+ drawer=false
|
|
|
+ direction= 'rtl'
|
|
|
+ ontab=0
|
|
|
+ checkCount=0
|
|
|
+ config:any={
|
|
|
+ attr:{
|
|
|
+ calculateH:true
|
|
|
+ },
|
|
|
+ search:{
|
|
|
+ attr:{
|
|
|
+ size:'small'
|
|
|
+ },
|
|
|
+ columns:[
|
|
|
+ [{
|
|
|
+ span:6,
|
|
|
+ label:'结算单号',
|
|
|
+ prop:'code',
|
|
|
+ component:'by-input',
|
|
|
+ compConfig:{
|
|
|
+ attr:{
|
|
|
+ placeholder:'请输入',
|
|
|
+ clearable:true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ span:6,
|
|
|
+ label:'业务类型',
|
|
|
+ prop:'type',
|
|
|
+ component:'by-select',
|
|
|
+ compConfig:{
|
|
|
+ attr:{
|
|
|
+ clearable:true,
|
|
|
+ data:[{
|
|
|
+ label:'freemarker',
|
|
|
+ value:'freemarker'
|
|
|
+ },{
|
|
|
+ label:'thymeleaf',
|
|
|
+ value:'thymeleaf'
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ span:6,
|
|
|
+ label:'时间',
|
|
|
+ prop:'createTime',
|
|
|
+ component:'by-date-picker',
|
|
|
+ compConfig:{
|
|
|
+ attr:{
|
|
|
+ clearable:true,
|
|
|
+ format:'yyyy-MM-dd HH:mm:ss',
|
|
|
+ type:'datetimerange'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ tool:{
|
|
|
+ tools:{
|
|
|
+ search:true,
|
|
|
+ refresh:true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ table:{
|
|
|
+ attr:{
|
|
|
+ size:'mini',
|
|
|
+ seq:true,
|
|
|
+ // checkbox:true
|
|
|
+ },
|
|
|
+ columns:[{
|
|
|
+ title:'结算单号',
|
|
|
+ // isDetail:true,
|
|
|
+ field:'code'
|
|
|
+ },{
|
|
|
+ title:'付款公司',
|
|
|
+ field:'payCompany',
|
|
|
+ width:130,
|
|
|
+ },{
|
|
|
+ title:'收款公司',
|
|
|
+ field:'receiveCompany',
|
|
|
+ width:130
|
|
|
+ },{
|
|
|
+ title:'结算金额',
|
|
|
+ field:'settleMoney',
|
|
|
+ width:100
|
|
|
+ },{
|
|
|
+ title:'手续费',
|
|
|
+ field:'commission',
|
|
|
+ width:100
|
|
|
+ },{
|
|
|
+ title:'业务类型',
|
|
|
+ field:'type',
|
|
|
+ width:140
|
|
|
+ },{
|
|
|
+ title:'状态',
|
|
|
+ field:'state',
|
|
|
+ width:100
|
|
|
+ },{
|
|
|
+ title:'创建时间',
|
|
|
+ field:'createTime',
|
|
|
+ width:140
|
|
|
+ },{
|
|
|
+ title:'操作',
|
|
|
+ action:true,
|
|
|
+ width:130,
|
|
|
+ plugins:[{
|
|
|
+ name:'立即支付',
|
|
|
+ event:{
|
|
|
+ show:(item:any) => {
|
|
|
+ // console.log(item);
|
|
|
+ return item.state == '待结算'
|
|
|
+ },
|
|
|
+ click:(item:any) => {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ name:'明细',
|
|
|
+ event:{
|
|
|
+ click:(item:any) => {
|
|
|
+ this.showDetail()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ }
|
|
|
+ page:any={
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize:20,
|
|
|
+ total:2
|
|
|
+ }
|
|
|
+ payData:Array<any>=[{
|
|
|
+ amount:'10.00',
|
|
|
+ time:'2023-08-10 12:45:33',
|
|
|
+ code:1,
|
|
|
+ servicer:'犇云科技',
|
|
|
+ type:'短驳结算'
|
|
|
+ },{
|
|
|
+ amount:'5.50',
|
|
|
+ time:'2023-08-10 12:45:33',
|
|
|
+ code:1,
|
|
|
+ servicer:'犇云科技',
|
|
|
+ type:'短驳结算'
|
|
|
+ },{
|
|
|
+ amount:'205.50',
|
|
|
+ time:'2023-08-16 12:52:30',
|
|
|
+ code:3,
|
|
|
+ servicer:'犇云科技',
|
|
|
+ type:'短驳结算'
|
|
|
+ }]
|
|
|
+ tabChange(v:number){
|
|
|
+ this.ontab = v
|
|
|
+ }
|
|
|
+ showDetail() {
|
|
|
+ this.drawer = true
|
|
|
+ }
|
|
|
+ checkHandle(index:number){
|
|
|
+ this.payData[index].check = !this.payData[index].check
|
|
|
+ let n = 0;
|
|
|
+ for(const item of this.payData){
|
|
|
+ if(item.check){
|
|
|
+ n++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.checkCount = n;
|
|
|
+ this.$forceUpdate()
|
|
|
+ }
|
|
|
+ pagination(){}
|
|
|
+ getList(){
|
|
|
+ let data:Array<any>=[{
|
|
|
+ code:1,
|
|
|
+ payCompany:'犇云科技',
|
|
|
+ receiveCompany: '盈和动力',
|
|
|
+ settleMoney:32000,
|
|
|
+ commission:50,
|
|
|
+ type:'短驳费用',
|
|
|
+ state:'已结算',
|
|
|
+ createTime:'2023-08-10 10:30:26'
|
|
|
+ },{
|
|
|
+ code:2,
|
|
|
+ payCompany:'犇云科技',
|
|
|
+ receiveCompany: '盈和动力',
|
|
|
+ settleMoney:60000,
|
|
|
+ commission:420,
|
|
|
+ type:'短驳费用',
|
|
|
+ state:'已结算',
|
|
|
+ createTime: '2023-08-12 11:21:25'
|
|
|
+ }];
|
|
|
+ (this.$refs.Settled as any).setTableValue(data);
|
|
|
+ (this.$refs.Settled as any).setPage(this.page)
|
|
|
+ }
|
|
|
+ getSettledList(){
|
|
|
+ let data:Array<any>=[{
|
|
|
+ code:1,
|
|
|
+ payCompany:'犇云科技',
|
|
|
+ receiveCompany: '盈和动力',
|
|
|
+ settleMoney:50000,
|
|
|
+ commission:100,
|
|
|
+ type:'短驳费用',
|
|
|
+ state:'待结算',
|
|
|
+ createTime:'2023-08-25 12:36:22'
|
|
|
+ },{
|
|
|
+ code:2,
|
|
|
+ payCompany:'犇云科技',
|
|
|
+ receiveCompany: '盈和动力',
|
|
|
+ settleMoney:100000,
|
|
|
+ commission:1000,
|
|
|
+ type:'短驳费用',
|
|
|
+ state:'待结算',
|
|
|
+ createTime: '2023-08-27 20:20:15'
|
|
|
+ }];
|
|
|
+ (this.$refs.willSettle as any).setTableValue(data);
|
|
|
+ (this.$refs.willSettle as any).setPage(this.page)
|
|
|
+ }
|
|
|
+ queryList(){}
|
|
|
+ modalHandle(){}
|
|
|
+ clickHandle(){}
|
|
|
+ detail(){}
|
|
|
+ mounted(){
|
|
|
+ this.load = true
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.load = false
|
|
|
+ this.getList()
|
|
|
+ this.getSettledList()
|
|
|
+ },1500)
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.fee{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .fee-tab{
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 16px 16px 0;
|
|
|
+ .item-tab{
|
|
|
+ padding-bottom: 8px;
|
|
|
+ margin-right: 32px;
|
|
|
+ border-bottom: solid 3px #FFF;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .on-tab{
|
|
|
+ border-bottom: solid 3px #1684FC;
|
|
|
+ color: #1684FC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fee-main{
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 50px);
|
|
|
+ .fee-box{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .onShow{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.top{
|
|
|
+ width: 100%;
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 16px;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ background-color: #FFF;
|
|
|
+ .name{
|
|
|
+ font-size: 14px;
|
|
|
+ span{
|
|
|
+ color: #fc8516;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-group{
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .pay-btn{
|
|
|
+ width: 120px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: linear-gradient(129.2deg, rgba(22,132,252,1) 9.81%,rgba(93,167,249,1) 97.4%);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ box-shadow: 0px 2px 6px 0px rgba(93, 167, 249, 1);
|
|
|
+ margin-right: 16px;
|
|
|
+ cursor: pointer;;
|
|
|
+ }
|
|
|
+ .back{
|
|
|
+ cursor: pointer;
|
|
|
+ width: 110px;
|
|
|
+ height: 36px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ line-height: 36px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ color: rgba(22, 132, 252, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid rgba(22, 132, 252, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.top-space{
|
|
|
+ height: 60px;
|
|
|
+}
|
|
|
+.pay-bill{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .pay-item{
|
|
|
+ width: 44%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 16px;
|
|
|
+ margin-left: 4%;
|
|
|
+ border:solid 1px #CCC;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ .check{
|
|
|
+ height: 24px;
|
|
|
+ width: 24px;
|
|
|
+ background-color: #1684FC;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 5px;
|
|
|
+ right: 5px;
|
|
|
+ border-radius: 50%;
|
|
|
+ visibility: hidden;
|
|
|
+ i.el-icon-check{
|
|
|
+ color: #FFF;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .showCheck{
|
|
|
+ visibility: visible;
|
|
|
+ }
|
|
|
+ .amount{
|
|
|
+ font-size: 20px;
|
|
|
+ >span{
|
|
|
+ color: #F00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-info{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ padding-top: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-item:hover{
|
|
|
+ border-color: #1684FC;
|
|
|
+ .check{
|
|
|
+ visibility: visible;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
ymy