<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
width="80%"
|
>
|
<div class="store-header" v-if="storeInfo">
|
<div class="store-header-left">
|
<!-- <el-image :src="storeInfo.headImage || defaultAvatar" 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>
|
|
<el-tabs v-model="activeTab" class="store-tabs">
|
<el-tab-pane label="门店业绩" name="performance">
|
<el-form ref="searchForm" :model="searchForm" inline>
|
<el-form-item label="交易号" prop="transactionId">
|
<el-input v-model="searchForm.transactionId" clearable placeholder="请输入交易号"></el-input>
|
</el-form-item>
|
<el-form-item label="收支类型" prop="type">
|
<el-select v-model="searchForm.type" clearable placeholder="请选择类型">
|
<el-option label="全部" :value="0"></el-option>
|
<el-option label="收入" :value="1"></el-option>
|
<el-option label="支出" :value="2"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="收支时间" prop="createTime">
|
<el-date-picker type="daterange" v-model="searchForm.createTime" clearable value-format="yyyy-MM-dd HH:mm:ss"
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
|
</el-form-item>
|
<section>
|
<el-button type="primary" @click="search">查询</el-button>
|
<el-button @click="reset">重置</el-button>
|
<el-button :loading="isWorking.export" @click="exportExcel">导出</el-button>
|
</section>
|
</el-form>
|
|
<el-table :data="tableData.list" border stripe v-loading="isWorking.search" class="performance-table">
|
<el-table-column label="收入/支出" min-width="100px">
|
<template slot-scope="{row}">
|
<span :class="row.type === 1 ? 'income' : 'expense'">{{ row.type === 1 ? '收入' : '支出' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="amount" label="金额（元）" min-width="100px">
|
<template slot-scope="{row}">
|
<span :class="row.type === 1 ? 'income' : 'expense'">{{ row.amount }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createTime" label="收支时间" min-width="160px"></el-table-column>
|
<el-table-column prop="businessType" label="业务类型" min-width="100px"></el-table-column>
|
<el-table-column prop="transactionId" label="交易号" min-width="180px"></el-table-column>
|
<el-table-column label="状态" min-width="100px">
|
<template slot-scope="{row}">
|
<span :class="row.status === 1 ? 'status-success' : 'status-pending'">
|
{{ row.status === 1 ? '已到账' : '提现中' }}
|
</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<pagination
|
@size-change="handleSizeChange"
|
@current-change="handlePageChange"
|
:pagination="tableData.pagination"
|
></pagination>
|
</el-tab-pane>
|
|
<el-tab-pane label="门店资质" name="qualification">
|
<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>
|
</el-tab-pane>
|
</el-tabs>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import Pagination from '@/components/common/Pagination'
|
import { detail } from '@/api/business/shopInfo'
|
export default {
|
name: 'OperaShopInfoWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow, Pagination },
|
data () {
|
return {
|
activeTab: 'performance',
|
storeInfo: null,
|
searchForm: {
|
transactionId: '',
|
type: 0,
|
createTime: ''
|
},
|
tableData: {
|
list: [],
|
pagination: {
|
pageIndex: 1,
|
pageSize: 10,
|
total: 0
|
}
|
},
|
isWorking: {
|
search: false,
|
export: false
|
},
|
defaultAvatar: 'https://cube.elemecdn.com/3/c7/9d47156420e4e9c6e2c1f6d6e6e6e6e6.jpeg'
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/shopInfo',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
open (title, row) {
|
detail(row.id)
|
.then(res => {
|
this.storeInfo = res
|
this.activeTab = 'performance'
|
this.searchForm = {
|
transactionId: '',
|
type: 0,
|
createTime: ''
|
}
|
this.title = title
|
this.visible = true
|
this.search()
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
},
|
search () {
|
this.isWorking.search = true
|
const data = {
|
pageIndex: this.tableData.pagination.pageIndex,
|
pageSize: this.tableData.pagination.pageSize,
|
shopId: this.storeInfo?.id,
|
transactionId: this.searchForm.transactionId,
|
type: this.searchForm.type,
|
startTime: this.searchForm.createTime?.[0] || '',
|
endTime: this.searchForm.createTime?.[1] || ''
|
}
|
this.api.fetchPerformance(data)
|
.then(res => {
|
this.tableData.list = res.list || []
|
this.tableData.pagination.total = res.total || 0
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking.search = false
|
})
|
},
|
reset () {
|
this.searchForm = {
|
transactionId: '',
|
type: 0,
|
createTime: ''
|
}
|
this.search()
|
},
|
handleSizeChange (pageSize) {
|
this.tableData.pagination.pageSize = pageSize
|
this.search()
|
},
|
handlePageChange (pageIndex) {
|
this.tableData.pagination.pageIndex = pageIndex
|
this.search()
|
},
|
exportExcel () {
|
this.isWorking.export = true
|
const data = {
|
shopId: this.storeInfo?.id,
|
transactionId: this.searchForm.transactionId,
|
type: this.searchForm.type,
|
startTime: this.searchForm.createTime?.[0] || '',
|
endTime: this.searchForm.createTime?.[1] || ''
|
}
|
this.api.exportPerformance(data)
|
.then(res => {
|
this.$tip.apiSuccess('导出成功')
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
.finally(() => {
|
this.isWorking.export = 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;
|
}
|
.info-item .label {
|
color: #909399;
|
}
|
.info-item .value {
|
color: #606266;
|
}
|
.store-tabs {
|
margin-top: 10px;
|
}
|
.income {
|
color: #67c23a;
|
}
|
.expense {
|
color: #f56c6c;
|
}
|
.status-success {
|
color: #67c23a;
|
}
|
.status-pending {
|
color: #e6a23c;
|
}
|
.performance-table {
|
margin: 15px 0;
|
}
|
.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;
|
}
|
</style>
|
