446 lines
13 KiB
Vue
446 lines
13 KiB
Vue
<template>
|
||
<div>
|
||
<el-tabs type="border-card" v-model="activeName">
|
||
<el-tab-pane label="企业信息" name="business">
|
||
|
||
<div class="section">
|
||
<div class="title">基础信息</div>
|
||
<ul class="list">
|
||
<li class="item">
|
||
<div>店铺名称：</div>
|
||
<div class="value">
|
||
{{merData.mer_name}}
|
||
</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>店铺类型：</div>
|
||
<div class="value">{{merData.type_name}}</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>更新时间：</div>
|
||
<div class="value">{{merData.update_time}}</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section" v-if="merData.com">
|
||
<ul class="list">
|
||
<li class="item">
|
||
<div>企业名称：</div>
|
||
<div class="value">
|
||
{{merData.com.name}}
|
||
</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>企业类型：</div>
|
||
<div class="value">
|
||
{{merData.com.type}}
|
||
</div>
|
||
</li>
|
||
<!-- <li class="item">
|
||
<div>客服电话:</div>
|
||
<div class="value">
|
||
{{ merData.com.service}}
|
||
</div>
|
||
</li> -->
|
||
<li class="item">
|
||
<div>企业对接人姓名：</div>
|
||
<div class="value">
|
||
{{ merData.com.contact}}
|
||
</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>企业对接人联系电话：</div>
|
||
<div class="value">
|
||
{{ merData.com.mobile}}
|
||
</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>企业对接人身份证号:</div>
|
||
<div class="value">
|
||
{{ merData.com.number}}
|
||
</div>
|
||
</li>
|
||
<!-- <li class="item">
|
||
<div>发起人:</div>
|
||
<div class="value">
|
||
{{ merData.com.initiator}}
|
||
</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>发起人电话:</div>
|
||
<div class="value">
|
||
{{ merData.com.inti_mobile}}
|
||
</div>
|
||
</li>
|
||
<li class="item item100">
|
||
<div>发起人编号:</div>
|
||
<div class="value">
|
||
{{ merData.com.inti_number}}
|
||
</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>发起人手持介绍信照片:</div>
|
||
<div class="value">
|
||
<el-image v-for="(url,i) in merData.com.init_image"
|
||
:key="i"
|
||
style="width: 100px; height: 100px"
|
||
:src="url"
|
||
:preview-src-list="merData.com.init_image">
|
||
</el-image>
|
||
</div>
|
||
</li> -->
|
||
<li class="item">
|
||
<div>资质图片:</div>
|
||
<div class="value">
|
||
<el-image
|
||
v-for="(item, index) in merData.images"
|
||
:key="index"
|
||
style="width: 100px; height: 100px"
|
||
:src="item"
|
||
:preview-src-list="merData.images"
|
||
/>
|
||
</div>
|
||
<!-- <div class="value">
|
||
<el-image v-for="(url,i) in merData.com.init_image"
|
||
:key="i"
|
||
style="width: 100px; height: 100px"
|
||
:src="url"
|
||
:preview-src-list="merData.com.init_image">
|
||
</el-image>
|
||
</div> -->
|
||
</li>
|
||
<li class="item item100">
|
||
<div>是否惠美乡村店铺:</div>
|
||
<div class="value">
|
||
{{ merData.com.is_huimei? '是': '否'}}
|
||
</div>
|
||
</li>
|
||
<li class="item item100">
|
||
<div>惠美乡村红头文件:</div>
|
||
<div class="value">
|
||
<el-image v-for="(url,i) in merData.com.image_huimei"
|
||
:key="i"
|
||
style="width: 100px; height: 100px"
|
||
:src="url"
|
||
:preview-src-list="merData.com.image_huimei">
|
||
</el-image>
|
||
</div>
|
||
</li>
|
||
<li class="item item100">
|
||
<div>是否退伍军人:</div>
|
||
<div class="value">
|
||
{{ merData.com.is_soldier? '是': '否'}}
|
||
</div>
|
||
</li>
|
||
<li class="item item100">
|
||
<div>退伍军人证件照:</div>
|
||
<div class="value">
|
||
<el-image v-for="(url,i) in merData.com.image_soldier"
|
||
:key="i"
|
||
style="width: 100px; height: 100px"
|
||
:src="url"
|
||
:preview-src-list="merData.com.image_soldier">
|
||
</el-image>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="身份证信息" name="account">
|
||
<div class="section" v-if="merData.idcard">
|
||
<div class="title">身份证信息</div>
|
||
<ul class="list">
|
||
<li class="item">
|
||
<div>身份证正面：</div>
|
||
<div class="value">
|
||
<el-image
|
||
style="width: 100px; height: 100px"
|
||
:src="merData.idcard.image1"
|
||
:preview-src-list="[merData.idcard.image1]">
|
||
</el-image>
|
||
</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>身份证反面：</div>
|
||
<div class="value">
|
||
<el-image
|
||
style="width: 100px; height: 100px"
|
||
:src="merData.idcard.image2"
|
||
:preview-src-list="[merData.idcard.image2]">
|
||
</el-image>
|
||
</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>身份证上的名字：</div>
|
||
<div class="value">{{merData.idcard.name}}</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>身份证上的号码：</div>
|
||
<div class="value">{{merData.idcard.number}}</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>身份证上的开始时间：</div>
|
||
<div class="value">{{merData.idcard.start}}</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>身份证结束时间：</div>
|
||
<div class="value">{{merData.idcard.end}}</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>手持身份证：</div>
|
||
<div class="value">
|
||
<el-image
|
||
style="width: 100px; height: 100px"
|
||
:src="merData.idcard.image3"
|
||
:preview-src-list="[merData.idcard.image3]">
|
||
</el-image>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="营业执照信息" name="biz">
|
||
<div class="section" v-if="merData.biz">
|
||
<div class="title">营业执照信息</div>
|
||
<ul class="list">
|
||
<li class="item">
|
||
<div>营业执照照片：</div>
|
||
<div class="value">
|
||
<el-image v-for="(url,i) in merData.biz.image"
|
||
:key="i"
|
||
style="width: 100px; height: 100px"
|
||
:src="url"
|
||
:preview-src-list="merData.biz.image">
|
||
</el-image>
|
||
</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>营业执照号码：</div>
|
||
<div class="value">{{merData.biz.number}}</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>开始时间：</div>
|
||
<div class="value">{{merData.biz.start}}</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>结束时间：</div>
|
||
<div class="value">{{merData.biz.end}}</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>营业执照地址：</div>
|
||
<div class="value">{{merData.biz.address}}</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>实际经营地址：</div>
|
||
<div class="value">{{merData.biz.address_true}}</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>实际经营范围：</div>
|
||
<div class="value">{{merData.biz.businessScope}}</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="银行卡信息" name="bank">
|
||
<div class="section" v-if="merData.bank">
|
||
<div class="title">银行卡信息</div>
|
||
<ul class="list">
|
||
<li class="item">
|
||
<div>姓名：</div>
|
||
<div class="value">
|
||
{{merData.bank.bankCardUserName}}
|
||
</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>银行：</div>
|
||
<div class="value">{{merData.bank.bankName}}</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>卡号：</div>
|
||
<div class="value">{{merData.bank.bankCard}}</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>开户行：</div>
|
||
<div class="value">{{merData.bank.bankBranchName}}</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>联行号：</div>
|
||
<div class="value">{{merData.bank.CNAPS}}</div>
|
||
</li>
|
||
<li class="item">
|
||
<div>银行卡照片：</div>
|
||
<div class="value">
|
||
<el-image v-for="(url,i) in merData.bank.bankCardImg"
|
||
:key="i"
|
||
style="width: 100px; height: 100px"
|
||
:src="url"
|
||
:preview-src-list="merData.bank.bankCardImg">
|
||
</el-image>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
<div class="images" v-show="false" v-viewer="{ movable: false }">
|
||
<img v-for="(src,index) in merData.mer_certificate" :src="src" :key="index" />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
|
||
import { merchantOperateLog } from "@/api/merchant";
|
||
export default {
|
||
props: {
|
||
merData: {
|
||
type: Object,
|
||
default: {},
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
loading: true,
|
||
merId: '',
|
||
direction: 'rtl',
|
||
activeName: 'business',
|
||
timeVal: [],
|
||
tableDataLog: {
|
||
data: [],
|
||
total: 0
|
||
},
|
||
tableFromLog: {
|
||
user_type: '',
|
||
date: [],
|
||
page: 1,
|
||
limit: 10
|
||
},
|
||
};
|
||
},
|
||
filters: {
|
||
},
|
||
methods: {
|
||
lookImg(item) {
|
||
this.imageUrl = item;
|
||
const viewer = this.$el.querySelector('.images').$viewer;
|
||
viewer.show();
|
||
this.$nextTick(() => {
|
||
let i = this.merData.mer_certificate.findIndex((e) => e === item);
|
||
viewer.update().view(i);
|
||
});
|
||
},
|
||
// 具体日期
|
||
onchangeTime(e) {
|
||
this.timeVal = e
|
||
this.tableFromLog.date = e ? this.timeVal.join('-') : ''
|
||
this.onOperateLog(this.merId)
|
||
},
|
||
onOperateLog(id){
|
||
this.merId = id;
|
||
merchantOperateLog(id, this.tableFromLog).then((res) => {
|
||
this.tableDataLog.data = res.data.list
|
||
this.tableDataLog.total = res.data.count
|
||
});
|
||
},
|
||
pageChangeLog(page) {
|
||
this.tableFromLog.page = page
|
||
this.onOperateLog(this.merId)
|
||
},
|
||
handleSizeChangeLog(val) {
|
||
this.tableFromLog.limit = val
|
||
this.onOperateLog(this.merId)
|
||
},
|
||
operationType(type) {
|
||
if (type == 0) {
|
||
return '系统';
|
||
} else if (type == 1) {
|
||
return '用户';
|
||
} else if (type == 2) {
|
||
return '平台';
|
||
} else if (type == 3) {
|
||
return '商户';
|
||
} else if (type == 4) {
|
||
return '商家客服';
|
||
} else {
|
||
return '未知';
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.el-tabs--border-card {
|
||
box-shadow: none;
|
||
border-bottom: none;
|
||
}
|
||
.section {
|
||
padding: 20px 0 8px;
|
||
border-bottom: 1px dashed #eeeeee;
|
||
.title {
|
||
padding-left: 10px;
|
||
border-left: 3px solid var(--prev-color-primary);
|
||
font-size: 15px;
|
||
line-height: 15px;
|
||
color: #303133;
|
||
}
|
||
.list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
list-style: none;
|
||
padding: 0;
|
||
margin-top: 5px;
|
||
}
|
||
.item {
|
||
flex: 0 0 calc(100% / 2);
|
||
display: flex;
|
||
margin-top: 16px;
|
||
font-size: 13px;
|
||
color: #606266;
|
||
padding-right: 20px;
|
||
padding-left: 20px;
|
||
&.item100{
|
||
flex: 0 0 calc(100% / 1);
|
||
padding-right: 20px;
|
||
padding-left: 20px;
|
||
}
|
||
&:nth-child(2n + 1) {
|
||
padding-right: 20px;
|
||
padding-left: 20px;
|
||
}
|
||
// &:nth-child(2n) {
|
||
// padding-right: 20px;
|
||
// }
|
||
}
|
||
.value {
|
||
flex: 1;
|
||
image {
|
||
display: inline-block;
|
||
width: 40px;
|
||
height: 40px;
|
||
margin: 0 12px 12px 0;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
}
|
||
.info-red{
|
||
color: red;
|
||
font-size: 12px;
|
||
}
|
||
.tab {
|
||
display: flex;
|
||
align-items: center;
|
||
.el-image {
|
||
width: 36px;
|
||
height: 36px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
::v-deep .el-drawer__body {
|
||
overflow: auto;
|
||
}
|
||
.gary {
|
||
color: #aaa;
|
||
}
|
||
|
||
</style>
|