<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
:withFooter="false"
|
width="calc(100% - 250px)"
|
:confirm-working="isWorking"
|
@close="close"
|
@confirm="confirm">
|
<div style="width: 100%; position: sticky;padding: 12px 16px; top: 0px; left: 0; z-index: 999; background-color: white">
|
<div style="display: flex;background: #e4ecfe;padding: 20px">
|
<div style="width: 60px;">
|
<div class="home_title" v-if="info">
|
<el-image v-if="info.imgurlFull" style="width: 50px; height: 50px;border-radius: 50%;margin-right: 10px" :src="info.imgurlFull"
|
:preview-src-list="[info.imgurlFull]">
|
</el-image>
|
<el-image v-else style="width: 50px; height: 50px;border-radius: 50%;margin-right: 10px" src="avatar/man.png" >
|
</el-image>
|
</div>
|
</div>
|
<div style="width: calc(100% - 60px);">
|
<div class="home_title" v-if="info">
|
<div class="left">
|
<span class="m10">昵称：{{info.nickName }}</span>
|
<span class="mr10 bluebtn" :title="'姓名：'+(info.name||'未设置姓名')" >({{(info.name||'未设置姓名') }})</span>
|
<el-tag type="primary" class="mr10 tag1">发单方</el-tag>
|
<el-tag type="success" class="mr10 tag1" v-if="info.workerIdentity == 2 || info.driverIdentity == 2 || info.chefIdentity == 2">接单方</el-tag>
|
</div>
|
</div>
|
<div class="remark" v-if="info">
|
<el-button class="bluebtn" icon="el-icon-phone" title="手机号"> {{info.telephone||'未设置' }}</el-button>
|
<el-button class="yellowbtn" icon="el-icon-star-on" title="平均评分"> {{info.score||'0' }}分</el-button>
|
<el-button class="redbtn" icon="el-icon-coin" title="账号余额(元）"> {{(info.amount||0).toFixed(2)}}元</el-button>
|
</div>
|
</div>
|
</div>
|
<div class="tabs">
|
<div class="tab" :class="{ active: activeTabs === 0 }" @click="tabsClick(0)">余额明细</div>
|
<div class="tab" :class="{ active: activeTabs === 1 }" @click="tabsClick(1)">评价记录</div>
|
<div class="tab" :class="{ active: activeTabs === 2 }" @click="tabsClick(2)">认证信息</div>
|
</div>
|
</div>
|
<div class="main" v-if="activeTabs === 0 && info">
|
<div class="title" >
|
<el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline>
|
<el-form-item label="交易流水号" style="width: 200px;" label-width="100px" prop="telephone">
|
<el-input v-model="searchForm.telephone" style="width: 100px" clearable placeholder="请输入" ></el-input>
|
</el-form-item>
|
<el-form-item label="收支类型" prop="type" style="width: 200px;" label-width="100px" >
|
<el-select v-model="searchForm.optType" style="width: 100px" clearable placeholder="请选择类型" >
|
<el-option :value="1" label="收入"></el-option>
|
<el-option :value="-1" label="支出"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="收支时间" prop="eventType" style="width: 330px;" label-width="100px" >
|
<el-date-picker type="datetime" style="width: 100px" v-model="searchForm.startTime" clearable value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="开始时间" />-
|
<el-date-picker type="datetime" style="width: 100px" v-model="searchForm.endTime" clearable value-format="yyyy-MM-dd HH:mm:ss"
|
placeholder="结束时间" />
|
</el-form-item>
|
<section style="width: 200px;display: inline-block" >
|
<el-button type="primary" @click="handleCurrentChange0(0)">搜索</el-button>
|
<el-button @click="reset0">重置</el-button>
|
<el-button @click="exportExcel0">重置</el-button>
|
</section>
|
</el-form>
|
</div>
|
<el-table
|
v-loading="isWorking.search"
|
:data="tableData.records"
|
stripe
|
>
|
<el-table-column prop="type" label="收入/支出" width="80px" align="center" >
|
<template slot-scope="{row}">
|
<span style="cursor: pointer;color: #3acf18" v-if="row.optType ==1">收入</span>
|
<span style="cursor: pointer;color: #a10e0e" v-else>支出</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="telephone" label="金额（元）" width="120px" align="center">
|
<template slot-scope="{row}">
|
<span class="yellowbtn">{{ ((row.amount || 0)/100).toFixed(2) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createTime" label="收支时间" min-width="150px" align="center"></el-table-column>
|
<el-table-column prop="typeName" label="业务类型" min-width="100px" align="center"></el-table-column>
|
<el-table-column prop="transactionNo" label="订单/交易号" min-width="100px" align="center"> </el-table-column>
|
</el-table>
|
<el-pagination
|
@current-change="handleCurrentChange0"
|
:current-page="page0"
|
:page-size="pageSize"
|
layout="total, prev, pager, next, jumper"
|
:total="tableData.total">
|
</el-pagination>
|
</div>
|
<div class="main" v-if="activeTabs === 1 && info">
|
<el-radio-group v-model="type" @change="changeType" style="margin-bottom: 20px;">
|
<el-radio-button :label="0">收到的评价</el-radio-button>
|
<el-radio-button :label="1">发布的评价</el-radio-button>
|
</el-radio-group>
|
<el-table
|
:data="tableData"
|
border
|
v-loading="loading"
|
style="width: 100%">
|
<el-table-column
|
width="150"
|
label="账单编号">
|
</el-table-column>
|
<el-table-column
|
label="费用类型">
|
</el-table-column>
|
<el-table-column
|
prop="totleFee"
|
label="账单金额">
|
</el-table-column>
|
<el-table-column
|
:key="Date.now()"
|
prop="receivableFee"
|
:label="`应${type === 0 ? '收' : '付'}金额`">
|
</el-table-column>
|
<el-table-column
|
prop="actReceivableFee"
|
:label="`实${type === 0 ? '收' : '付'}金额`">
|
</el-table-column>
|
<el-table-column
|
:label="`需${type === 0 ? '收' : '付'}金额`">
|
<template slot-scope="{row}">
|
<template v-if="type === 0">
|
<el-tag type="success" v-if="row.needReceivableFee > 0">收</el-tag>
|
<el-tag type="warning" v-else-if="row.needReceivableFee < 0">付</el-tag>
|
</template>
|
<template v-else>
|
<el-tag type="warning" v-if="row.needReceivableFee !== 0">付</el-tag>
|
</template>
|
<span style="margin-left: 10px;">{{Math.abs(row.needReceivableFee)}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="账单来源">
|
<template slot-scope="{row}">
|
<span v-if="row.type === 0">合同账单</span>
|
<span v-else>自建账单</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
width="200"
|
label="计费周期">
|
<template slot-scope="{row}">
|
{{ row.startDate }} ~ {{ row.endDate }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="planPayDate"
|
label="应收日期">
|
</el-table-column>
|
<el-table-column
|
label="是否逾期">
|
</el-table-column>
|
<el-table-column
|
fixed="right"
|
label="状态">
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="page"
|
:page-sizes="[10, 15, 20, 25]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div>
|
<div class="main" v-if="activeTabs === 2 && info">
|
<div class="title">操作记录</div>
|
<el-table
|
:data="info.logList"
|
border
|
style="width: 100%">
|
<el-table-column
|
:key="Date.now()"
|
width="200"
|
prop="param1"
|
label="操作人">
|
</el-table-column>
|
<el-table-column
|
:key="Date.now()"
|
width="200"
|
prop="createDate"
|
label="操作时间">
|
</el-table-column>
|
<el-table-column
|
:key="Date.now()"
|
width="150"
|
label="操作">
|
<template slot-scope="{row}">
|
<span v-if="row.objType === 0">工单创建</span>
|
<span v-if="row.objType === 1">指派</span>
|
<span v-if="row.objType === 2">处理</span>
|
<span v-if="row.objType === 3">合同创建</span>
|
<span v-if="row.objType === 4">合同变更</span>
|
<span v-if="row.objType === 5">合同退租</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
:key="Date.now()"
|
prop="content"
|
label="操作内容">
|
</el-table-column>
|
</el-table>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import BaseOpera from '@/components/base/BaseOpera'
|
import { getById } from '@/api/business/member'
|
import { fetchList as yueList } from '@/api/business/memberRevenue'
|
import { commentList } from '@/api/business/orders'
|
import { fetchList as renzhengList } from '@/api/business/identityInfo'
|
export default {
|
components: {
|
GlobalWindow
|
},
|
extends: BaseOpera,
|
data () {
|
return {
|
id: '',
|
visible: false,
|
activeTabs: 0,
|
type: 0,
|
info: {},
|
pageSize: 10,
|
page: 1,
|
total: 0,
|
tableData: {},
|
page0: 1,
|
totalPage0: 0,
|
total0: 0,
|
loading: false,
|
searchForm: {
|
type: 0,
|
startTime: null,
|
endTime: null,
|
optType: null,
|
transactionNo: null
|
}
|
}
|
},
|
methods: {
|
open (title, id) {
|
this.title = title
|
this.visible = true
|
this.activeTabs = 0
|
this.type = 0
|
this.page0 = 1
|
this.totalPage0 = 0
|
this.total0 = 0
|
this.pageSize = 10
|
this.tableData = {}
|
this.id = id
|
this.getData()
|
},
|
getData () {
|
getById(this.id)
|
.then(res => {
|
this.info = res
|
this.visible = true
|
this.handleCurrentChange0(0)
|
})
|
},
|
exportExcel0 (page) {
|
this.page0 = page
|
this.getYueList()
|
},
|
reset0 () {
|
this.searchForm.startTime = null
|
this.searchForm.endTime = null
|
this.searchForm.optType = null
|
this.searchForm.transactionNo = null
|
this.page0 = 0
|
this.getYueList()
|
},
|
handleCurrentChange0 (page) {
|
this.page0 = page
|
this.getYueList()
|
},
|
getYueList () {
|
this.loading = true
|
yueList({
|
capacity: this.pageSize,
|
page: this.page0,
|
model: {
|
memberId: this.info.id || -1,
|
startTime: this.searchForm.startTime,
|
endTime: this.searchForm.endTime,
|
optType: this.searchForm.optType,
|
transactionNo: this.searchForm.transactionNo
|
}
|
}).then(res => {
|
this.loading = false
|
this.tableData = res
|
this.total0 = res.total
|
this.totalPage0 = res.total
|
console.log(this.tableData)
|
}).catch(e => {
|
this.$tip.apiFailed(e)
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
close () {
|
|
},
|
getRenzhengList () {
|
this.loading = true
|
renzhengList({
|
capacity: this.pageSize,
|
page: this.page,
|
model: {
|
startTime: this.searchForm.startTime,
|
endTime: this.searchForm.endTime,
|
optType: this.searchForm.optType,
|
transactionNo: this.searchForm.transactionNo
|
}
|
}).then(res => {
|
this.loading = false
|
this.tableData = res.records
|
this.total = res.total
|
}).catch(e => {
|
this.$tip.apiFailed(e)
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
getCommentList () {
|
this.loading = true
|
commentList({
|
capacity: this.pageSize,
|
page: this.page,
|
model: {
|
status: 0,
|
billType: this.type,
|
contractId: this.info.id
|
}
|
}).then(res => {
|
this.loading = false
|
this.tableData = res.records
|
this.total = res.total
|
})
|
},
|
changeType (e) {
|
this.type = e
|
this.page = 1
|
this.pageSize = 10
|
this.tableData = []
|
this.getList()
|
},
|
tabsClick (val) {
|
this.activeTabs = val
|
},
|
getDetail () {
|
|
},
|
handleSizeChange (e) {
|
this.pageSize = e
|
this.getList()
|
},
|
handleCurrentChange (e) {
|
this.page = e
|
this.getList()
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/style/variables.scss';
|
.home_title {
|
.mr10{
|
margin-right: 10px;
|
}
|
.m10{
|
margin: 10px;
|
}
|
.bluebtn{
|
color: #2985f7;
|
}
|
.tag1{
|
border-radius: 10px;
|
font-size: 10px;
|
padding: 0px 15px;
|
height: 24px;
|
}
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.left {
|
font-weight: 500;
|
font-size: 14px;
|
margin-right: 10px;
|
display: flex;
|
align-items: center;
|
.status {
|
padding: 0 6px;
|
height: 22px;
|
line-height: 22px;
|
border-radius: 2px;
|
border: 1px solid #00BA92;
|
color: #00BA92;
|
font-weight: 400;
|
font-size: 12px;
|
color: #00BA92;
|
}
|
}
|
}
|
.tab{
|
width: 20%;
|
}
|
.remark {
|
//background: #E8EBF7;
|
border-radius: 2px;
|
font-size: 14px;
|
margin: 10px 10px 0px -10px;
|
button{
|
border: none;
|
cursor: default;
|
margin-right: 20px;
|
background: #e4ecfe;
|
}
|
}
|
.bluebtn{
|
font-weight: bold;
|
color: #2985f7;
|
}
|
|
.redbtn{
|
font-weight: bold;
|
color: #ff1b1b;
|
}
|
.yellowbtn{
|
font-weight: bold;
|
color: #fc9d20;
|
}
|
|
.tabs {
|
border-bottom: 1px solid #DFE2E8;
|
display: flex;
|
margin-bottom: 20px;
|
.tab {
|
height: 58px;
|
line-height: 58px;
|
font-size: 14px;
|
color: #666666;
|
margin-right: 30px;
|
cursor: pointer;
|
}
|
|
.active {
|
font-weight: 500;
|
color: $primary-color;
|
border-bottom: 2px solid $primary-color;
|
}
|
}
|
|
.main {
|
padding: 12px 16px;
|
.title {
|
font-weight: 500;
|
font-size: 12px;
|
color: $primary-color;
|
margin-bottom: 15px;
|
}
|
/deep/ .el-form-item__label{
|
font-size: 12px;
|
}
|
.list {
|
display: flex;
|
flex-wrap: wrap;
|
/*background: #F7F7F7;*/
|
border-radius: 2px;
|
/*padding: 15px 20px;*/
|
margin-bottom: 20px;
|
|
.item {
|
font-size: 14px;
|
width: 25%;
|
margin-bottom: 16px;
|
|
.la {
|
color: #7f7f7f;
|
margin-bottom: 10px;
|
}
|
}
|
}
|
}
|
|
/deep/ .window__body {
|
padding: 0px !important;
|
}
|
</style>
|
