<template>
|
<GlobalWindow
|
:title="title"
|
:withFooter="false"
|
:visible.sync="visible"
|
width="80%"
|
>
|
<div class="store-header" v-if="storeInfo">
|
<div class="store-header-left">
|
<el-image :src="storeInfo.payMemberCoverImage ? storeInfo.imgPrefix + storeInfo.payMemberCoverImage : ''" fit="cover" class="store-avatar">
|
<div slot="error" class="image-slot">
|
<i class="el-icon-picture-outline"></i>
|
</div>
|
</el-image>
|
</div>
|
<div class="store-header-right">
|
<div class="store-name">{{ storeInfo.name }}</div>
|
<div class="store-info-row">
|
<span class="info-item">
|
<span class="label">门店类型：</span>
|
<span class="value">{{ storeInfo.companyType === 1 ? '企业' : '个人' }}</span>
|
</span>
|
<span class="info-item">
|
<span class="label">联系人：</span>
|
<span class="value">{{ storeInfo.linkName }}</span>
|
</span>
|
<span class="info-item">
|
<span class="label">联系电话：</span>
|
<span class="value">{{ storeInfo.linkPhone }}</span>
|
</span>
|
<span class="info-item">
|
<span class="label">身份证号：</span>
|
<span class="value">{{ storeInfo.idcard }}</span>
|
</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="approval-section" v-if="storeInfo && storeInfo.auditStatus !== 0">
|
<div class="approval-result" :class="storeInfo.auditStatus === 1 ? 'approval-pass' : 'approval-reject'">
|
<div class="approval-status" v-if="storeInfo.auditStatus === 1">
|
<i class="el-icon-circle-check"></i>
|
<span>审核通过</span>
|
</div>
|
<div class="approval-status" v-else>
|
<i class="el-icon-circle-close"></i>
|
<span>审核拒绝</span>
|
</div>
|
<div class="approval-info" v-if="storeInfo.auditStatus === 1">
|
<span class="info-item">审核时间：{{ storeInfo.auditTime }}</span>
|
<span class="info-item">审核人：{{ storeInfo.auditName }}</span>
|
</div>
|
<div class="approval-info" v-else>
|
<div class="info-item" v-if="storeInfo.auditRemark">备注：{{ storeInfo.auditRemark }}</div>
|
<div class="info-item">审核时间：{{ storeInfo.auditTime }}</div>
|
<div class="info-item">审核人：{{ storeInfo.auditName }}</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="qualification-content" v-if="storeInfo">
|
<div class="qualification-section">
|
<h4 class="section-title">基本信息</h4>
|
<div class="info-grid">
|
<div class="info-row">
|
<span class="label">所在省市区：</span>
|
<span class="value">{{ storeInfo.provinceName || '' }} {{ storeInfo.cityName || '' }} {{ storeInfo.areaName || '' }}</span>
|
</div>
|
<div class="info-row">
|
<span class="label">门店地址：</span>
|
<span class="value">{{ storeInfo.address }}</span>
|
</div>
|
<div class="info-row">
|
<span class="label">门店状态：</span>
|
<span class="value">{{ storeInfo.auditStatus === 0 ? '待审批' : storeInfo.auditStatus === 1 ? '审批通过' : '审批未通过' }}</span>
|
</div>
|
<div class="info-row">
|
<span class="label">配送范围：</span>
|
<span class="value">{{ storeInfo.deliveryRange || '暂无' }}</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="qualification-section">
|
<h4 class="section-title">主体资质</h4>
|
<template v-if="storeInfo.companyType === 1">
|
<div class="info-grid">
|
<div class="info-row">
|
<span class="label">法人姓名：</span>
|
<span class="value">{{ storeInfo.legalPersonName }}</span>
|
</div>
|
<div class="info-row">
|
<span class="label">法人手机号：</span>
|
<span class="value">{{ storeInfo.legalPersonPhone }}</span>
|
</div>
|
<div class="info-row">
|
<span class="label">法人身份证号码：</span>
|
<span class="value">{{ storeInfo.legalPersonCard }}</span>
|
</div>
|
</div>
|
<div class="image-section">
|
<div class="image-item">
|
<span class="label">法人身份证正面：</span>
|
<el-image :src="storeInfo.idcardImg" fit="cover" class="qualification-image" :preview-src-list="[storeInfo.idcardImg]">
|
<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
|
</el-image>
|
</div>
|
<div class="image-item">
|
<span class="label">法人身份证反面：</span>
|
<el-image :src="storeInfo.idcardImgBack" fit="cover" class="qualification-image" :preview-src-list="[storeInfo.idcardImgBack]">
|
<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
|
</el-image>
|
</div>
|
<div class="image-item">
|
<span class="label">营业执照：</span>
|
<el-image :src="storeInfo.businessImg" fit="cover" class="qualification-image" :preview-src-list="[storeInfo.businessImg]">
|
<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
|
</el-image>
|
</div>
|
</div>
|
</template>
|
<template v-else>
|
<div class="image-item-row">
|
<span class="label">身份证正面：</span>
|
<el-image :src="storeInfo.idcardImg" fit="cover" class="qualification-image" :preview-src-list="[storeInfo.idcardImg]">
|
<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
|
</el-image>
|
</div>
|
<div class="image-item-row">
|
<span class="label">身份证反面：</span>
|
<el-image :src="storeInfo.idcardImgBack" fit="cover" class="qualification-image" :preview-src-list="[storeInfo.idcardImgBack]">
|
<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
|
</el-image>
|
</div>
|
<div class="image-item-row">
|
<span class="label">有效劳动合同：</span>
|
<div class="image-list">
|
<el-image v-for="(img, index) in storeInfo.laborContractImgs" :key="index" :src="img" fit="cover" class="qualification-image" :preview-src-list="storeInfo.laborContractImgs">
|
<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
|
</el-image>
|
</div>
|
</div>
|
<div class="image-item-row">
|
<span class="label">社保缴纳证明：</span>
|
<div class="image-list">
|
<el-image v-for="(img, index) in storeInfo.socialSecurityImgs" :key="index" :src="img" fit="cover" class="qualification-image" :preview-src-list="storeInfo.socialSecurityImgs">
|
<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
|
</el-image>
|
</div>
|
</div>
|
</template>
|
</div>
|
|
<div class="qualification-section" v-if="storeInfo.companyType === 1">
|
<h4 class="section-title">门店照片及其他材料</h4>
|
<div class="image-item-row">
|
<span class="label">门店门头照：</span>
|
<div class="image-list">
|
<el-image v-for="(img, index) in storeInfo.storeFrontImgs" :key="index" :src="img" fit="cover" class="qualification-image" :preview-src-list="storeInfo.storeFrontImgs">
|
<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
|
</el-image>
|
</div>
|
</div>
|
<div class="image-item-row">
|
<span class="label">门店内部照片：</span>
|
<div class="image-list">
|
<el-image v-for="(img, index) in storeInfo.storeInteriorImgs" :key="index" :src="img" fit="cover" class="qualification-image" :preview-src-list="storeInfo.storeInteriorImgs">
|
<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
|
</el-image>
|
</div>
|
</div>
|
<div class="image-item-row">
|
<span class="label">其它材料：</span>
|
<div class="image-list">
|
<el-image v-for="(img, index) in storeInfo.otherMaterialImgs" :key="index" :src="img" fit="cover" class="qualification-image" :preview-src-list="storeInfo.otherMaterialImgs">
|
<div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
|
</el-image>
|
</div>
|
</div>
|
</div>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { detail, audit } from '@/api/business/shopInfo'
|
|
export default {
|
name: 'OperaShopInfoSeeWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
return {
|
storeInfo: null,
|
approvalForm: {
|
id: null,
|
auditStatus: 0,
|
auditRemark: ''
|
},
|
approvalRules: {
|
auditRemark: [
|
{ required: true, message: '请输入拒绝原因', trigger: 'blur' }
|
]
|
},
|
isWorking: {
|
submit: false
|
}
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/shopInfo',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
open (title, row) {
|
this.title = title
|
this.approvalForm = {
|
id: row.id,
|
auditStatus: 1,
|
auditRemark: ''
|
}
|
detail(row.id)
|
.then(res => {
|
this.storeInfo = res
|
this.visible = true
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
},
|
handleAuditStatusChange (val) {
|
if (val === 1) {
|
this.approvalRules.auditRemark = []
|
} else {
|
this.approvalRules.auditRemark = [{ required: true, message: '请输入拒绝原因', trigger: 'blur' }]
|
}
|
},
|
handleSubmit () {
|
this.$refs.approvalForm.validate(valid => {
|
if (!valid) return
|
this.isWorking.submit = true
|
audit(this.approvalForm)
|
.then(res => {
|
this.$tip.apiSuccess(res || '提交成功')
|
this.visible = false
|
this.$emit('success')
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking.submit = false
|
})
|
})
|
},
|
handleCancel () {
|
this.visible = false
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.store-header {
|
display: flex;
|
background: #f5f7fa;
|
border-radius: 8px;
|
padding: 20px;
|
margin-bottom: 20px;
|
}
|
.store-header-left {
|
margin-right: 20px;
|
}
|
.store-avatar {
|
width: 80px;
|
height: 80px;
|
border-radius: 50%;
|
}
|
.store-header-right {
|
flex: 1;
|
}
|
.store-name {
|
font-size: 18px;
|
font-weight: bold;
|
color: #303133;
|
margin-bottom: 10px;
|
}
|
.store-info-row {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 20px;
|
}
|
.info-item {
|
font-size: 14px;
|
color: #606266;
|
}
|
.info-item .label {
|
color: #909399;
|
}
|
.qualification-content {
|
padding: 20px;
|
}
|
.qualification-section {
|
margin-bottom: 30px;
|
}
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #303133;
|
margin-bottom: 15px;
|
padding-left: 10px;
|
border-left: 4px solid #2E68EC;
|
}
|
.info-grid {
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
gap: 15px;
|
margin-bottom: 20px;
|
}
|
.info-row {
|
display: flex;
|
font-size: 14px;
|
}
|
.info-row .label {
|
color: #909399;
|
min-width: 100px;
|
}
|
.info-row .value {
|
color: #606266;
|
}
|
.image-section {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 30px;
|
}
|
.image-item {
|
display: flex;
|
flex-direction: column;
|
}
|
.image-item-row {
|
display: flex;
|
align-items: flex-start;
|
margin-bottom: 20px;
|
}
|
.image-item-row .label {
|
color: #909399;
|
font-size: 14px;
|
min-width: 120px;
|
}
|
.image-list {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10px;
|
}
|
.image-item .label {
|
color: #909399;
|
font-size: 14px;
|
margin-bottom: 8px;
|
}
|
.qualification-image {
|
width: 150px;
|
height: 100px;
|
border-radius: 4px;
|
border: 1px solid #eee;
|
}
|
.image-slot {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
width: 100%;
|
height: 100%;
|
background: #f5f7fa;
|
color: #909399;
|
font-size: 20px;
|
}
|
.approval-section {
|
padding: 20px;
|
}
|
.approval-result {
|
border-radius: 8px;
|
padding: 20px;
|
}
|
.approval-pass {
|
background: #f0f9eb;
|
border: 1px solid #67c23a;
|
}
|
.approval-reject {
|
background: #fef0f0;
|
border: 1px solid #f56c6c;
|
}
|
.approval-status {
|
font-size: 18px;
|
font-weight: bold;
|
margin-bottom: 15px;
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
.approval-pass .approval-status {
|
color: #67c23a;
|
}
|
.approval-reject .approval-status {
|
color: #f56c6c;
|
}
|
.approval-info {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 30px;
|
font-size: 14px;
|
color: #606266;
|
}
|
</style>
|
