<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>