51 changed files with 2833 additions and 1199 deletions
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 664 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 602 B |
|
After Width: | Height: | Size: 3.7 KiB |
@ -0,0 +1,218 @@ |
|||
|
|||
<template> |
|||
<div class="radial-indicator-container" :style="{'width':size+'px','height':size+'px'}"> |
|||
<div class="percentloop"> |
|||
<div class="circle-left" :style="{ background: 'linear-gradient(231.58deg, #2ED283 17.34%, #48F4C1 82.12%)'}"> |
|||
<div :style="{ background: backgroundColor}" ref="leftcontent"></div> |
|||
</div> |
|||
<div class="circle-right" :style="{ background: 'linear-gradient(231.58deg, #2ED283 17.34%, #48F4C1 82.12%)'}"> |
|||
<div :style="{ background: backgroundColor}" ref="rightcontent"></div> |
|||
</div> |
|||
<div class="content-wrap"> |
|||
<span class="content-number" :title="percent+'%'">{{percent}}%</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
// Events: animationFinished |
|||
|
|||
export default { |
|||
name: 'RadialIndicator', |
|||
|
|||
props: { |
|||
size: { |
|||
type: [String, Number], |
|||
default: 155 |
|||
}, |
|||
icon: { |
|||
type: String, |
|||
default: 'mail' |
|||
}, |
|||
content: String, |
|||
color: { |
|||
type: String, |
|||
default: '#00b3ef' |
|||
}, |
|||
backgroundColor: { |
|||
type: String, |
|||
default: '#7fd9f7' |
|||
}, |
|||
percentNum: { |
|||
type: [String, Number], |
|||
default: 0 |
|||
}, |
|||
speed: { |
|||
// suggest 1~3 |
|||
type: [String, Number], |
|||
default: 1 |
|||
} |
|||
}, |
|||
|
|||
data () { |
|||
return { |
|||
percent: 0, |
|||
initDeg: 0, |
|||
timeId: null, |
|||
animationing: false |
|||
} |
|||
}, |
|||
|
|||
created () { |
|||
this.goRotate(this.transformToDeg(this.percentNum)) |
|||
}, |
|||
|
|||
watch: { |
|||
'percentNum': function (val) { |
|||
if (this.animationing) return |
|||
this.goRotate(this.transformToDeg(val)) |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
transformToDeg (percent) { |
|||
let deg = 0 |
|||
if (percent >= 100) { |
|||
deg = 360 |
|||
} else { |
|||
deg = parseInt(360 * percent / 100) |
|||
} |
|||
return deg |
|||
}, |
|||
|
|||
transformToPercent (deg) { |
|||
let percent = 0 |
|||
if (deg >= 360) { |
|||
percent = 100 |
|||
} else { |
|||
percent = parseInt(100 * deg / 360) |
|||
} |
|||
return percent |
|||
}, |
|||
|
|||
// > 180 |
|||
rotateLeft (deg) { |
|||
this.$refs.leftcontent.style.transform = 'rotate(' + (deg - 180) + 'deg)' |
|||
}, |
|||
|
|||
// < 180 |
|||
rotateRight (deg) { |
|||
this.$refs.rightcontent.style.transform = 'rotate(' + deg + 'deg)' |
|||
}, |
|||
|
|||
goRotate (deg) { |
|||
this.animationing = true |
|||
this.timeId = setInterval(() => { |
|||
if (deg > this.initDeg) { |
|||
this.initDeg += Number(this.speed) |
|||
if (this.initDeg >= 180) { |
|||
this.rotateLeft(this.initDeg) |
|||
this.rotateRight(180) |
|||
} else { |
|||
this.rotateRight(this.initDeg) |
|||
} |
|||
} else { |
|||
this.initDeg -= Number(this.speed) |
|||
if (this.initDeg >= 180) { |
|||
this.rotateLeft(this.initDeg) |
|||
} else { |
|||
this.rotateLeft(180) |
|||
this.rotateRight(this.initDeg) |
|||
} |
|||
} |
|||
this.percent = this.transformToPercent(this.initDeg) |
|||
const remainer = Number(deg) - this.initDeg |
|||
if (Math.abs(remainer) < this.speed) { |
|||
this.initDeg += remainer |
|||
if (this.initDeg > 180) { |
|||
this.rotateLeft(deg) |
|||
} else { |
|||
this.rotateRight(deg) |
|||
} |
|||
this.animationFinished() |
|||
} |
|||
}, 10) |
|||
}, |
|||
|
|||
animationFinished () { |
|||
this.percent = this.percentNum |
|||
this.animationing = false |
|||
clearInterval(this.timeId) |
|||
this.$emit('animationFinished') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.radial-indicator-container{ |
|||
width: 120px; |
|||
height: 120px; |
|||
} |
|||
|
|||
.radial-indicator-container .percentloop { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.radial-indicator-container .circle-left, |
|||
.radial-indicator-container .circle-right { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 50%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.radial-indicator-container .circle-left>div, |
|||
.radial-indicator-container .circle-right>div { |
|||
width: 100%; |
|||
height: 100%; |
|||
transform-origin: right center; |
|||
/* transition: all .5s linear; */ |
|||
} |
|||
|
|||
.radial-indicator-container .circle-right { |
|||
left: 50%; |
|||
} |
|||
|
|||
.radial-indicator-container .circle-right>div { |
|||
transform-origin: left center; |
|||
} |
|||
|
|||
.radial-indicator-container .content-wrap { |
|||
position: absolute; |
|||
top: 9%; |
|||
bottom: 9%; |
|||
left: 9%; |
|||
right: 9%; |
|||
background-color: #fff; |
|||
border-radius: 50%; |
|||
overflow: hidden; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: #000; |
|||
} |
|||
|
|||
.radial-indicator-container .content-wrap .content-number { |
|||
font-size: 24px; |
|||
padding: 5px 0 7px 0; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.radial-indicator-container .content-wrap .content-text { |
|||
display: inline-block; |
|||
max-width: 90px; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,507 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div class="bg bg-white"> |
|||
<el-table v-loading="loading" :data="UserCertificationList"> |
|||
<el-table-column :label="'订单编号'" align="center" prop="balance"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.order.orderNo }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column :label="'用户名称'" align="center" prop="balance"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.appealUser.name }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column :label="'交易类型'" align="center" prop="balance"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.order.tradeType == 'buy' ? '购买' : '出售' }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column :label="'交易币种'" align="center" prop="balance"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.order.coin }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column :label="'交易数量'" align="center" prop="balance"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.order.realityCoinNum }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column :label="'交易单价'" align="center" prop="balance"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.order.legalCurrency }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column :label="'交易总价'" align="center" prop="balance"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.order.realityLegalNums }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column :label="'法币币种'" align="center" prop="balance"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.order.limitCoin }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="订单状态" align="center" prop="orderStatus" :formatter="sysOrderStatusFormat" /> |
|||
|
|||
<el-table-column :label="'下单时间'" align="center" prop="balance"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.order.createTime }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
|
|||
<div class="status-con" v-if="UserCertificationList.length"> |
|||
<div class="flex" style="align-items:flex-start"> |
|||
<div class="let item m-b-16" style="margin-right:60px"> |
|||
<div class="title m-b-16 flex"> |
|||
<div class="circle"></div> |
|||
申诉人基本信息 |
|||
</div> |
|||
<div class="status"> |
|||
<div class="flex" style="align-items: flex-start"> |
|||
<div class="let"> |
|||
<div class="text m-b-16"> |
|||
昵称：{{ UserCertificationList[0].appealUser.nickname ? |
|||
UserCertificationList[0].appealUser.nickname |
|||
: |
|||
'无' }} |
|||
</div> |
|||
<div class="text m-b-16"> |
|||
姓名：{{ UserCertificationList[0].appealUser.name ? |
|||
UserCertificationList[0].appealUser.name |
|||
: |
|||
'无' }} |
|||
</div> |
|||
<div class="text m-b-16"> |
|||
邮箱：{{ UserCertificationList[0].appealUser.email ? |
|||
UserCertificationList[0].appealUser.email |
|||
: |
|||
'无' }} |
|||
</div> |
|||
</div> |
|||
<div class="rig"> |
|||
<div class="text m-b-16"> |
|||
用户类型：{{ UserCertificationList[0].appealUser.userRole == 'user' ? '普通用户' : '认证商家' }} |
|||
</div> |
|||
<div class="text m-b-16"> |
|||
证件号：{{ UserCertificationList[0].appealUser.idNumber }} |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
<div class="bottom flex"> |
|||
<div class="text let"> |
|||
总单量：{{ UserCertificationList[0].appealUser.totalNum }} |
|||
</div> |
|||
<div class="text"> |
|||
成交率：{{ NumberMul(UserCertificationList[0].appealUser.successRate, 100) }}% |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<div class="right item"> |
|||
<div class="title m-b-16 flex"> |
|||
<div class="circle"></div> |
|||
被申诉人基本信息 |
|||
</div> |
|||
<div class="status"> |
|||
<div class="flex" style="align-items: flex-start"> |
|||
<div class="let"> |
|||
<div class="text m-b-16"> |
|||
昵称：{{ UserCertificationList[0].beAppealUser.nickname ? |
|||
UserCertificationList[0].beAppealUser.nickname |
|||
: |
|||
'无' }} |
|||
</div> |
|||
<div class="text m-b-16"> |
|||
姓名：{{ UserCertificationList[0].beAppealUser.name ? |
|||
UserCertificationList[0].beAppealUser.name |
|||
: |
|||
'无' }} |
|||
</div> |
|||
<div class="text m-b-16"> |
|||
邮箱：{{ UserCertificationList[0].beAppealUser.email ? |
|||
UserCertificationList[0].beAppealUser.email |
|||
: |
|||
'无' }} |
|||
</div> |
|||
</div> |
|||
<div class="rig"> |
|||
<div class="text m-b-16"> |
|||
用户类型：{{ UserCertificationList[0].beAppealUser.userRole == 'user' ? '普通用户' : '认证商家' |
|||
}} |
|||
</div> |
|||
<div class="text m-b-16"> |
|||
证件号：{{ UserCertificationList[0].beAppealUser.idNumber }} |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
<div class="bottom flex"> |
|||
<div class="text let"> |
|||
总单量：{{ UserCertificationList[0].beAppealUser.totalNum }} |
|||
</div> |
|||
<div class="text"> |
|||
成交率：{{ NumberMul(UserCertificationList[0].beAppealUser.successRate, 100) }}% |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="bottom item"> |
|||
<div class="title m-b-16 flex"> |
|||
<div class="circle"></div> |
|||
申诉资料 |
|||
</div> |
|||
<div class="status"> |
|||
<div class="text m-b-16" style="margin-right:40px"> |
|||
申诉类型：{{ UserCertificationList[0].appealRemark ? UserCertificationList[0].appealRemark : '无' }} |
|||
</div> |
|||
<div class="text m-b-16 "> |
|||
申诉原因：{{ UserCertificationList[0].appealDesc ? UserCertificationList[0].appealDesc : '无' }} |
|||
</div> |
|||
|
|||
<div class="text flex m-b-28"> |
|||
申诉文件： |
|||
<div class="flex"> |
|||
<template v-if="UserCertificationList[0].listUrl.length" > |
|||
<el-image v-for="dict in UserCertificationList[0].listUrl" |
|||
:key="dict" |
|||
@click="previewImage(dict)" |
|||
style="width: 150px;height:150px;margin-right:10px" |
|||
:src="dict" |
|||
:preview-src-list="srcList" |
|||
class="avatar" > |
|||
</el-image> |
|||
</template> |
|||
<span v-if="!UserCertificationList[0].listUrl.length">无</span> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="flex" style="margin-left:65px" |
|||
v-if="UserCertificationList[0].appealStatus == 'in_appeal'"> |
|||
<el-button type="primary" icon="" size="large" style="width:110px;height:40px" |
|||
@click="handleSuccess()">通过申诉</el-button> |
|||
<el-button size="large" type="danger" style="width:110px;height:40px" |
|||
@click="handleFail()">驳回申诉</el-button> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<!-- 成功对话框 --> |
|||
<el-dialog title="通过" :visible.sync="open" width="400px" append-to-body> |
|||
<div class="sub-tit m-b-16"> |
|||
是否通过该申诉申请？ |
|||
</div> |
|||
<div slot="footer" class="dialog-footer flex-between"> |
|||
<el-button type="text" @click="cancelApple">取消</el-button> |
|||
<el-button type="text" @click="submitFormApple('success_appeal')">确定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<!-- 驳回对话框 --> |
|||
<el-dialog title="驳回申诉" :visible.sync="openApple" width="400px" append-to-body> |
|||
<el-form ref="form" :model="formApple" :rules="rulesApple" label-width="0px"> |
|||
<div class="sub-tit m-b-16"> |
|||
是否确认驳回该申诉申请？ |
|||
</div> |
|||
<el-form-item label="" prop="appealDesc"> |
|||
<el-input v-model="formApple.appealDesc" type="textarea" placeholder="驳回申诉备注" rows="5" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer flex-between"> |
|||
<el-button type="text" @click="cancelApple">取消</el-button> |
|||
<el-button type="text" @click="submitFormApple('fail_appeal')">确定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { listOtcAppealOrder, getOtcAppealOrder, delOtcAppealOrder, addOtcAppealOrder, updateOtcAppealOrder, exportOtcAppealOrder, appleOtcAppealOrder } from "@/api/otc/otcAppealOrder"; |
|||
|
|||
export default { |
|||
name: "UserDetail", |
|||
components: { |
|||
}, |
|||
data() { |
|||
return { |
|||
detailId: null, |
|||
openApple: false, |
|||
sysOrderStatus: [], |
|||
|
|||
// 遮罩层 |
|||
loading: false, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非单个禁用 |
|||
single: true, |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 实名认证信息表格数据 |
|||
UserCertificationList: [], |
|||
|
|||
terminalSourceOptions: [], |
|||
appealStatusOptions: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
witNo: null, |
|||
userId: null, |
|||
name: null, |
|||
certId: null, |
|||
phone: null, |
|||
certFrontImg: null, |
|||
certReverseImg: null, |
|||
certHandImg: null, |
|||
idaHandImg: null, |
|||
corporateLicense: null, |
|||
auditStatus: null, |
|||
auditTime: null, |
|||
auditReason: null, |
|||
addTime: null, |
|||
authType: null |
|||
}, |
|||
// 表单参数 |
|||
formApple: { |
|||
appealDesc: null |
|||
}, |
|||
// 表单校验 |
|||
rulesApple: { |
|||
appealDesc: [ |
|||
{ required: true, message: "驳回申诉备注不能为空", trigger: "blur" } |
|||
], |
|||
}, |
|||
// 预览 |
|||
srcList: ["http://118.25.187.239:9099/img/adImg/557097620301025280.jpg"], |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getDicts("terminal_source").then(response => { |
|||
this.terminalSourceOptions = response.data; |
|||
}); |
|||
this.getDicts("appeal_status").then(response => { |
|||
this.appealStatusOptions = response.data; |
|||
}); |
|||
this.getDicts("order_status").then(response => { |
|||
this.sysOrderStatus = response.data; |
|||
}); |
|||
this.detailId = this.$route.params.row.id |
|||
this.getList(this.detailId) |
|||
}, |
|||
methods: { |
|||
cancelApple() { |
|||
this.openApple = false; |
|||
this.open = false; |
|||
this.reset(); |
|||
}, |
|||
handleSuccess() { |
|||
this.reset(); |
|||
this.open = true; |
|||
this.formApple = this.UserCertificationList[0] |
|||
}, |
|||
handleFail() { |
|||
this.reset() |
|||
this.formApple = this.UserCertificationList[0] |
|||
this.openApple = true |
|||
}, |
|||
// 表单重置 |
|||
reset() { |
|||
this.formApple = {}; |
|||
this.resetForm("formApple"); |
|||
}, |
|||
/** 审核提交 */ |
|||
submitFormApple(v) { |
|||
if (!this.formApple.appealDesc && v == 'fail_appeal') { |
|||
this.$message.error('驳回申诉备注不能为空'); |
|||
return; |
|||
} |
|||
if (v == 'success_appeal') { |
|||
this.formApple = this.UserCertificationList[0] |
|||
} |
|||
// this.$refs["form"].validate(valid => { |
|||
// if (valid) { |
|||
this.formApple.appealStatus = v |
|||
appleOtcAppealOrder(this.formApple).then(response => { |
|||
this.$modal.msgSuccess("操作成功"); |
|||
this.getList(this.detailId); |
|||
this.open = false |
|||
this.openApple = false |
|||
}); |
|||
// } |
|||
// }); |
|||
}, |
|||
/** 查询OTC申诉订单列表 */ |
|||
getList(v) { |
|||
this.loading = true; |
|||
getOtcAppealOrder(v).then(response => { |
|||
this.UserCertificationList.push(response.data) |
|||
this.total = Number(response.total); |
|||
this.loading = false; |
|||
}); |
|||
}, |
|||
// 预览图片 |
|||
previewImage(abUrl) { |
|||
this.srcList[0] = abUrl; |
|||
}, |
|||
terminalSourceFormat(row, column) { |
|||
return this.selectDictLabel(this.terminalSourceOptions, row.terminalSource); |
|||
}, |
|||
appealStatusFormat(row, column) { |
|||
return this.selectDictLabel(this.appealStatusOptions, row.appealStatus); |
|||
}, |
|||
sysOrderStatusFormat(row, column) { |
|||
return this.selectDictLabel(this.sysOrderStatus, row.order.orderStatus); |
|||
}, |
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
::v-deep .el-dialog__footer { |
|||
border-top: 1px solid rgba(223, 230, 236, 1); |
|||
padding: 0; |
|||
height: 60px; |
|||
} |
|||
|
|||
::v-deep .el-dialog__footer .el-button { |
|||
width: 50%; |
|||
height: 60px; |
|||
} |
|||
|
|||
::v-deep .el-dialog__footer .el-button:nth-child(1) { |
|||
border-right: 1px solid rgba(223, 230, 236, 1); |
|||
} |
|||
|
|||
::v-deep .el-dialog__footer .el-button:nth-child(1) span { |
|||
color: rgba(102, 102, 102, 1); |
|||
} |
|||
|
|||
.sub-tit { |
|||
font-size: 13px; |
|||
font-weight: 500; |
|||
text-align: center; |
|||
color: rgba(51, 51, 51, 1); |
|||
} |
|||
|
|||
::v-deep .el-textarea__inner { |
|||
background: #F3F6F8 !important; |
|||
|
|||
} |
|||
|
|||
::v-deep .el-dialog__body { |
|||
padding: 15px 20px; |
|||
} |
|||
|
|||
::v-deep .el-dialog__header { |
|||
text-align: center; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.status .bottom { |
|||
border-top: 1px solid rgba(223, 230, 236, 1); |
|||
padding-top: 16px; |
|||
} |
|||
|
|||
.status .let { |
|||
width: 275px; |
|||
} |
|||
|
|||
.status-text {} |
|||
|
|||
.status-bar { |
|||
width: 40px; |
|||
height: 160px; |
|||
background: rgba(231, 53, 53, 1); |
|||
position: absolute; |
|||
right: 12px; |
|||
top: -32px; |
|||
color: rgba(255, 255, 255, 1); |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
transform: rotate(-40deg); |
|||
display: flex; |
|||
align-items: center; |
|||
writing-mode: vertical-lr; |
|||
justify-content: center; |
|||
letter-spacing: 8px; |
|||
} |
|||
|
|||
.circle { |
|||
width: 8px; |
|||
height: 8px; |
|||
background: rgba(9, 186, 122, 1); |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.img-con-border { |
|||
border: 1px solid rgba(223, 230, 236, 1); |
|||
padding: 9px; |
|||
width: 359px; |
|||
height: 203px; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.img-con-border img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 24px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.status-con { |
|||
margin-top: 52px; |
|||
} |
|||
|
|||
.status { |
|||
border: 1px solid rgba(223, 230, 236, 1); |
|||
padding: 20px 16px; |
|||
border-radius: 8px; |
|||
position: relative; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.status .text { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
} |
|||
</style> |
|||
|
|||
|
|||
|
|||
@ -0,0 +1,467 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div class="bg bg-white"> |
|||
<el-table v-loading="loading" :data="UserCertificationList"> |
|||
<el-table-column label="姓名" align="center" prop="name" /> |
|||
<el-table-column label="证件类型" align="center" prop="typeName" /> |
|||
<el-table-column label="身份证号" align="center" prop="certId" /> |
|||
<el-table-column label="审核时间" align="center" prop="auditTime" width="180"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ parseTime(scope.row.auditTime, '{y}-{m}-{d}') }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="添加时间" align="center" prop="addTime" width="180"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ parseTime(scope.row.addTime, '{y}-{m}-{d}') }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="认证类型" align="center" prop="authType" :formatter="authTypeFormat" /> |
|||
</el-table> |
|||
|
|||
<div class="flex status-con" v-if="UserCertificationList.length" style="align-items: flex-start;flex-wrap:wrap"> |
|||
<div class="let item m-r-16 m-b-16" v-if="kycData.authType"> |
|||
<div class="title m-b-16 flex"> |
|||
<div class="circle"></div> |
|||
KYC认证信息 |
|||
</div> |
|||
<div class="status"> |
|||
<div class="status-bar" |
|||
:style="{ background: kycData.auditStatus == 'agree' ? '#08B97A' : kycData.auditStatus == 'apply' ? '#F8A562' : '#E73535' }" |
|||
v-if="kycData.auditStatus"> |
|||
<span class="status-text" v-if="kycData.authType == 'basic'">{{ kycData.auditStatus == 'agree' ? |
|||
'已通过' : kycData.auditStatus == 'apply' ? '审核中' : '不通过' }} |
|||
</span> |
|||
|
|||
</div> |
|||
<div class="text m-b-10"> |
|||
姓名：{{ kycData.name ? kycData.name : '无' }} |
|||
</div> |
|||
<div class="text m-b-10"> |
|||
证件号：{{ kycData.certId ? kycData.certId : '无' }} |
|||
</div> |
|||
<div class="flex m-b-16" style="align-items:flex-start"> |
|||
<div class="img-con m-r-16"> |
|||
<div class="text m-b-10"> |
|||
证件正面 |
|||
</div> |
|||
<div class="img-con-border" v-if="kycData.certFrontImg"> |
|||
<el-image @click="previewImage(kycData.certFrontImg)" :src="kycData.certFrontImg" |
|||
:preview-src-list="srcList" class="avatar"> |
|||
</el-image> |
|||
</div> |
|||
<span class="text" v-else>无</span> |
|||
</div> |
|||
<div class="img-con"> |
|||
<div class="text m-b-10"> |
|||
证件反面 |
|||
</div> |
|||
<div class="img-con-border" v-if="kycData.certReverseImg"> |
|||
<el-image @click="previewImage(kycData.certReverseImg)" :src="kycData.certReverseImg" |
|||
:preview-src-list="srcList" class="avatar"> |
|||
</el-image> |
|||
|
|||
</div> |
|||
<span class="text" v-else>无</span> |
|||
</div> |
|||
</div> |
|||
<div class="img-con m-r-16 m-b-16"> |
|||
<div class="text m-b-10"> |
|||
手持身份证 |
|||
</div> |
|||
<div class="img-con-border" v-if="kycData.certHandImg"> |
|||
<el-image @click="previewImage(kycData.certHandImg)" :src="kycData.certHandImg" |
|||
:preview-src-list="srcList" class="avatar"> |
|||
</el-image> |
|||
|
|||
</div> |
|||
<span class="text" v-else>无</span> |
|||
</div> |
|||
<div style="color:red"> |
|||
审核备注：{{ kycData.auditReason ? kycData.auditReason : '无' }} |
|||
</div> |
|||
<div class="flex btnCon" v-if="kycData.auditStatus == 'apply'"> |
|||
<el-button type="primary" @click="handleSuccess('agree', kycData)">通过</el-button> |
|||
<el-button type="danger" @click="handleFail('reject', kycData)">驳回</el-button> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<div class="right item" v-if="storeData.authType"> |
|||
<div class="title m-b-16 flex"> |
|||
<div class="circle"></div> |
|||
商家认证信息 |
|||
</div> |
|||
<div class="status"> |
|||
<div class="status-bar" |
|||
:style="{ background: storeData.auditStatus == 'agree' ? '#08B97A' : storeData.auditStatus == 'apply' ? '#F8A562' : '#E73535' }"> |
|||
<span class="status-text">{{ storeData.auditStatus == 'agree' ? '已通过' : storeData.auditStatus == |
|||
'apply' ? '审核中' : '不通过' }} |
|||
</span> |
|||
</div> |
|||
<div class="text m-b-10"> |
|||
是否质押：{{ storeData.storePledge ? '是' : '否' }} |
|||
</div> |
|||
<div class="text m-b-10"> |
|||
质押金额：{{ storeData.storePledgeBalance }}{{ storeData.pledgeCoin }} |
|||
</div> |
|||
<div class="flex btnCon" v-if="storeData.auditStatus == 'apply'"> |
|||
<el-button type="primary" @click="handleSuccess('agree', storeData)">通过</el-button> |
|||
<el-button type="danger" @click="handleFail('reject', storeData)">驳回</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<div class="right item" v-if="proData.authType"> |
|||
<div class="title m-b-16 flex"> |
|||
<div class="circle"></div> |
|||
Pro商家认证信息 |
|||
</div> |
|||
<div class="status"> |
|||
<div class="status-bar" |
|||
:style="{ background: proData.auditStatus == 'agree' ? '#08B97A' : proData.auditStatus == 'apply' ? '#F8A562' : '#E73535' }"> |
|||
<span class="status-text">{{ proData.auditStatus == 'agree' ? '已通过' : proData.auditStatus == |
|||
'apply' ? '审核中' : '不通过' }} |
|||
</span> |
|||
</div> |
|||
<div class="text m-b-10"> |
|||
是否质押：{{ proData.storePledge ? '是' : '否' }} |
|||
</div> |
|||
<div class="text m-b-10"> |
|||
质押金额：{{ proData.storePledgeBalance }} {{ proData.pledgeCoin }} |
|||
</div> |
|||
<div class="flex m-b-16"> |
|||
<div class="img-con m-r-16"> |
|||
<div class="text m-b-10"> |
|||
公司营业执照 |
|||
</div> |
|||
<div class="img-con-border" v-if="proData.corporateLicense"> |
|||
<el-image @click="previewImage(proData.corporateLicense)" |
|||
:src="proData.corporateLicense" :preview-src-list="srcList" class="avatar"> |
|||
</el-image> |
|||
</div> |
|||
<span class="text" v-else>无</span> |
|||
</div> |
|||
</div> |
|||
<div class="flex btnCon" v-if="proData.auditStatus == 'apply'"> |
|||
<el-button type="primary" @click="handleSuccess('agree', proData)">通过</el-button> |
|||
<el-button type="danger" @click="handleFail('reject', proData)">驳回</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<!-- 成功对话框 --> |
|||
<el-dialog title="通过" :visible.sync="open" width="400px" append-to-body> |
|||
<div class="sub-tit m-b-16"> |
|||
是否通过该认证申请？ |
|||
</div> |
|||
<div slot="footer" class="dialog-footer flex-between"> |
|||
<el-button type="text" @click="cancelApple">取消</el-button> |
|||
<el-button type="text" @click="submitFormApple('agree')">确定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<!-- 驳回对话框 --> |
|||
<el-dialog title="驳回" :visible.sync="openApple" width="400px" append-to-body> |
|||
<el-form ref="form" :model="formApple" :rules="rulesApple" label-width="0px"> |
|||
<div class="sub-tit m-b-16"> |
|||
是否确认驳回该认证申请？ |
|||
</div> |
|||
<el-form-item label="" prop="auditReason"> |
|||
<el-input v-model="formApple.auditReason" type="textarea" placeholder="驳回备注" rows="5" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer flex-between"> |
|||
<el-button type="text" @click="cancelApple">取消</el-button> |
|||
<el-button type="text" @click="submitFormApple('reject')">确定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { listUserCertification, getUserCertification, delUserCertification, addUserCertification, updateUserCertification, exportUserCertification } from "@/api/user/UserCertification"; |
|||
|
|||
export default { |
|||
name: "UserDetail", |
|||
components: { |
|||
}, |
|||
data() { |
|||
return { |
|||
openApple: false, |
|||
kycData: {}, |
|||
storeData: {}, |
|||
proData: {}, |
|||
|
|||
// 遮罩层 |
|||
loading: false, |
|||
// 选中数组 |
|||
ids: [], |
|||
// 非单个禁用 |
|||
single: true, |
|||
// 非多个禁用 |
|||
multiple: true, |
|||
// 显示搜索条件 |
|||
showSearch: true, |
|||
// 总条数 |
|||
total: 0, |
|||
// 实名认证信息表格数据 |
|||
UserCertificationList: [], |
|||
|
|||
auditStatusOptions: [], |
|||
authTypeOptions: [], |
|||
// 弹出层标题 |
|||
title: "", |
|||
// 是否显示弹出层 |
|||
open: false, |
|||
// 查询参数 |
|||
queryParams: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
witNo: null, |
|||
userId: null, |
|||
|
|||
}, |
|||
// 表单参数 |
|||
formApple: { |
|||
auditReason:null, |
|||
}, |
|||
// 表单校验 |
|||
rulesApple: { |
|||
authType: [ |
|||
{ required: true, message: "认证类型：基础basic 高级advanced不能为空", trigger: "change" } |
|||
] |
|||
}, |
|||
|
|||
// 预览 |
|||
srcList: ["http://118.25.187.239:9099/img/adImg/557097620301025280.jpg"], |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getDicts("audit_status").then(response => { |
|||
this.auditStatusOptions = response.data; |
|||
}); |
|||
this.getDicts("auth_type").then(response => { |
|||
this.authTypeOptions = response.data; |
|||
}); |
|||
this.queryParams.userId = this.$route.params.row.userId |
|||
this.getList() |
|||
}, |
|||
methods: { |
|||
// 预览图片 |
|||
previewImage(abUrl) { |
|||
this.srcList[0] = abUrl; |
|||
}, |
|||
// 取消按钮 |
|||
cancelApple() { |
|||
this.openApple = false; |
|||
this.open = false; |
|||
this.resetApple(); |
|||
}, |
|||
// 表单重置 |
|||
resetApple() { |
|||
this.formApple = { |
|||
|
|||
}; |
|||
this.resetForm("formApple"); |
|||
}, |
|||
handleFail(v, d) { |
|||
this.resetApple() |
|||
this.formApple.auditStatus = v |
|||
this.formApple.witNo=d.witNo |
|||
this.openApple = true |
|||
}, |
|||
handleSuccess(v, d) { |
|||
this.resetApple(); |
|||
this.open = true; |
|||
this.formApple.witNo=d.witNo |
|||
this.formApple.auditStatus = v |
|||
}, |
|||
/** 审核提交 */ |
|||
submitFormApple(v) { |
|||
if (!this.formApple.auditReason && v == 'reject') { |
|||
this.$message.error('驳回备注不能为空'); |
|||
return; |
|||
} |
|||
updateUserCertification(this.formApple).then(response => { |
|||
this.msgSuccess("操作成功"); |
|||
this.open = false; |
|||
this.openApple = false; |
|||
this.getList(); |
|||
}); |
|||
}, |
|||
/** 查询实名认证信息列表 */ |
|||
getList() { |
|||
this.loading = true; |
|||
listUserCertification(this.queryParams).then(response => { |
|||
this.UserCertificationList = response.rows; |
|||
this.loading = false; |
|||
for (var i = this.UserCertificationList.length - 1; i >= 0; i--) { |
|||
if (this.UserCertificationList[i].authType == 'advanced') { |
|||
this.storeData = this.UserCertificationList[i] |
|||
if (this.UserCertificationList[i].auditStatus == 'apply') { |
|||
this.storeData = this.UserCertificationList[i] |
|||
} |
|||
} |
|||
if (this.UserCertificationList[i].authType == 'basic') { |
|||
this.kycData = this.UserCertificationList[i] |
|||
if (this.UserCertificationList[i].auditStatus == 'apply') { |
|||
this.kycData = this.UserCertificationList[i] |
|||
} |
|||
} |
|||
if (this.UserCertificationList[i].authType == 'pro') { |
|||
this.proData = this.UserCertificationList[i] |
|||
if (this.UserCertificationList[i].auditStatus == 'apply') { |
|||
this.proData = this.UserCertificationList[i] |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
auditStatusFormat(row, column) { |
|||
return this.selectDictLabel(this.auditStatusOptions, row.auditStatus); |
|||
}, |
|||
authTypeFormat(row, column) { |
|||
return this.selectDictLabel(this.authTypeOptions, row.authType); |
|||
}, |
|||
|
|||
|
|||
|
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.status-con .item { |
|||
width: 46%; |
|||
} |
|||
|
|||
::v-deep .el-dialog__footer { |
|||
border-top: 1px solid rgba(223, 230, 236, 1); |
|||
padding: 0; |
|||
height: 60px; |
|||
} |
|||
|
|||
::v-deep .el-dialog__footer .el-button { |
|||
width: 50%; |
|||
height: 60px; |
|||
} |
|||
|
|||
::v-deep .el-dialog__footer .el-button:nth-child(1) { |
|||
border-right: 1px solid rgba(223, 230, 236, 1); |
|||
} |
|||
|
|||
::v-deep .el-dialog__footer .el-button:nth-child(1) span { |
|||
color: rgba(102, 102, 102, 1); |
|||
} |
|||
|
|||
.sub-tit { |
|||
font-size: 13px; |
|||
font-weight: 500; |
|||
text-align: center; |
|||
color: rgba(51, 51, 51, 1); |
|||
} |
|||
|
|||
::v-deep .el-textarea__inner { |
|||
background: #F3F6F8 !important; |
|||
|
|||
} |
|||
|
|||
::v-deep .el-dialog__body { |
|||
padding: 15px 20px; |
|||
} |
|||
|
|||
::v-deep .el-dialog__header { |
|||
text-align: center; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.btnCon { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
::v-deep .btnCon .el-button { |
|||
width: 110px; |
|||
height: 40px; |
|||
border-radius: 4px; |
|||
|
|||
} |
|||
|
|||
.status-text {} |
|||
|
|||
.status-bar { |
|||
width: 40px; |
|||
height: 160px; |
|||
background: rgba(231, 53, 53, 1); |
|||
position: absolute; |
|||
right: 12px; |
|||
top: -32px; |
|||
color: rgba(255, 255, 255, 1); |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
transform: rotate(-40deg); |
|||
display: flex; |
|||
align-items: center; |
|||
writing-mode: vertical-lr; |
|||
justify-content: center; |
|||
letter-spacing: 8px; |
|||
} |
|||
|
|||
.circle { |
|||
width: 8px; |
|||
height: 8px; |
|||
background: rgba(9, 186, 122, 1); |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.img-con-border { |
|||
border: 1px solid rgba(223, 230, 236, 1); |
|||
padding: 9px; |
|||
width: 359px; |
|||
height: 203px; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.img-con-border .avatar { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.title { |
|||
font-size: 24px; |
|||
font-weight: 500; |
|||
color: #333; |
|||
} |
|||
|
|||
.status-con { |
|||
margin-top: 52px; |
|||
} |
|||
|
|||
.status { |
|||
border: 1px solid rgba(223, 230, 236, 1); |
|||
padding: 20px 16px; |
|||
border-radius: 8px; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.status .text { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
} |
|||
</style> |
|||
|
|||
|
|||
|
|||
Loading…
Reference in new issue