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