<template>
|
<GlobalWindow
|
:title="title"
|
:withFooter="false"
|
:visible.sync="visible"
|
width="calc(100% - 255px )"
|
>
|
<div class="store-header" v-if="storeInfo">
|
<div class="store-header-left">
|
<el-image v-if="storeInfo.payMemberCoverImage" :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>
|
<img v-if="! storeInfo.payMemberCoverImage" src="@/assets/avatar/man.png" fit="cover" class="store-avatar" />
|
</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" label-width="100px" inline>
|
<el-form-item label="订单编号" prop="code">
|
<el-input v-model="searchForm.code" style="width: 150px;" clearable placeholder="请输入订单编号" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="物品信息" prop="goodsInfo">
|
<el-input v-model="searchForm.goodsInfo" style="width: 150px;" clearable placeholder="请输入物品信息" @keypress.enter.native="search"></el-input>
|
</el-form-item>
|
<el-form-item label="订单状态" prop="status">
|
<el-select v-model="searchForm.status" clearable style="width: 150px;" placeholder="请选择订单状态" @change="search">
|
<el-option label="全部" value=""></el-option>
|
<el-option label="待支付" :value="0"></el-option>
|
<el-option label="待寄存" :value="1"></el-option>
|
<el-option label="已寄存" :value="2"></el-option>
|
<el-option label="已接单" :value="3"></el-option>
|
<el-option label="派送中" :value="4"></el-option>
|
<el-option label="已到店/已送达" :value="5"></el-option>
|
<el-option label="已完成" :value="7"></el-option>
|
<el-option label="已取消" :value="99"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="结算状态" prop="settlementStatus">
|
<el-select v-model="searchForm.settlementStatus" style="width: 150px;" clearable placeholder="请选择结算状态" @change="search">
|
<el-option label="待结算" :value="0"></el-option>
|
<el-option label="已结算" :value="1"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="创建时间" prop="createTime1">
|
<el-date-picker type="daterange" v-model="searchForm.createTime1" clearable value-format="yyyy-MM-dd"
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="handleDateChange" />
|
</el-form-item>
|
<section style="display: inline-block">
|
<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>
|
|
<!--
|
<div class="statistics">
|
<span>订单数：{{ statistics.orderCount }}</span>
|
<span>订单总价：¥{{ (statistics.orderAmount / 100).toFixed(2) }}</span>
|
<span>结算总价：¥{{ (statistics.settleAmount / 100).toFixed(2) }}</span>
|
</div>
|
-->
|
|
<el-table :data="tableData.list" stripe>
|
<el-table-column prop="code" label="订单编号" min-width="160px">
|
<template slot-scope="{row}">
|
<span class="bluestate" @click="$refs.operaOrderDetail.open(row)">{{ row.code }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="goodsInfo" label="物品信息" min-width="180px" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="isUrgent" label="订单级别" min-width="80px">
|
<template slot-scope="{row}"><span v-if="row.type ===1">{{ row.isUrgent === 1?'极速达':'标速达' }}</span></template>
|
</el-table-column>
|
<el-table-column label="物品保费（元）" min-width="120px">
|
<template slot-scope="{row}">¥{{ (row.declaredFee / 100).toFixed(2) }}</template>
|
</el-table-column>
|
<el-table-column label="物品保费（元）" min-width="120px">
|
<template slot-scope="{row}">¥{{ (row.declaredFee / 100).toFixed(2) }}</template>
|
</el-table-column>
|
<el-table-column label="基础服务费（元）" min-width="120px">
|
<template slot-scope="{row}">¥{{ (row.price / 100).toFixed(2) }}</template>
|
</el-table-column>
|
<el-table-column label="订单总价（元）" min-width="120px">
|
<template slot-scope="{row}">¥{{ (row.totalAmount / 100).toFixed(2) }}</template>
|
</el-table-column>
|
<el-table-column label="实付现金（元）" min-width="120px">
|
<template slot-scope="{row}">¥{{ (row.payAmount / 100).toFixed(2) }}</template>
|
</el-table-column>
|
<el-table-column label="加急费（元）" min-width="120px">
|
<template slot-scope="{row}"><span v-if="row.type ===1 ">¥{{ (row.urgentAmount / 100).toFixed(2) }}</span></template>
|
</el-table-column>
|
<el-table-column label="退款金额（元）" min-width="120px">
|
<template slot-scope="{row}">¥{{ (row.refundAmount / 100).toFixed(2) }}</template>
|
</el-table-column>
|
<el-table-column label="超时金额" min-width="100px">
|
<template slot-scope="{row}">¥{{ (row.overdueAmount / 100).toFixed(2) }}</template>
|
</el-table-column>
|
<el-table-column label="异常金额" min-width="100px">
|
<template slot-scope="{row}">¥{{ (row.exceptionAmount / 100).toFixed(2) }}</template>
|
</el-table-column>
|
<el-table-column prop="statusDesc" label="订单状态" min-width="100px">
|
<template slot-scope="{row}">
|
<span :style="{ color: row.status <7 ? '#e6a23c' : (row.status ===7 ? '#67c23a' : 'grey' )}">
|
{{ row.statusDesc }}
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="结算状态" min-width="100px">
|
<template slot-scope="{row}">
|
<span :style="{ color: row.settlementStatus === 1 ? '#67c23a' : '#e6a23c' }">
|
{{ row.settlementStatus === 1 ? '已结算' : '未结算' }}
|
</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="payTime" label="支付时间" min-width="150px"> </el-table-column>
|
<el-table-column prop="createTime" label="创建时间" min-width="150px"> </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.status === 1 ? '禁用' : '启用' }}</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.idcardImgUrl" fit="cover" class="qualification-image" :preview-src-list="[storeInfo.idcardImgUrl]">
|
<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.idcardImgBackUrl" fit="cover" class="qualification-image" :preview-src-list="[storeInfo.idcardImgBackUrl]">
|
<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.businessImgUrl" fit="cover" class="qualification-image" :preview-src-list="[storeInfo.businessImgUrl]">
|
<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 v-if="storeInfo.idcardImgUrl" :src="storeInfo.idcardImgUrl" fit="cover" class="qualification-image" :preview-src-list="[storeInfo.idcardImgUrl]">
|
<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.idcardImgBackUrl" fit="cover" class="qualification-image" :preview-src-list="[storeInfo.idcardImgBackUrl]">
|
<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.laborContractImgUrls" :key="index" :src="img" fit="cover" class="qualification-image" :preview-src-list="storeInfo.laborContractImgUrls">
|
<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.socialSecurityImgUrls" :key="index" :src="img" fit="cover" class="qualification-image" :preview-src-list="storeInfo.socialSecurityImgUrls">
|
<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.storeFrontImgUrls" :key="index" :src="img" fit="cover" class="qualification-image" :preview-src-list="storeInfo.storeFrontImgUrls">
|
<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.storeInteriorImgUrls" :key="index" :src="img" fit="cover" class="qualification-image" :preview-src-list="storeInfo.storeInteriorImgUrls">
|
<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.otherMaterialImgUrls" :key="index" :src="img" fit="cover" class="qualification-image" :preview-src-list="storeInfo.otherMaterialImgUrls">
|
<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>
|
<OperaOrderDetail ref="operaOrderDetail" @success="handlePageChange" />
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import Pagination from '@/components/common/Pagination'
|
import { detail } from '@/api/business/shopInfo'
|
import BaseTable from '@/components/base/BaseTable'
|
import OperaOrderDetail from '@/components/business/OperaOrderDetail'
|
import { fetchList, exportExcel } from '@/api/business/revenue'
|
export default {
|
name: 'OperaShopInfoWindow',
|
extends: BaseTable,
|
components: { GlobalWindow, Pagination,OperaOrderDetail },
|
data () {
|
return {
|
title: '',
|
activeTab: 'performance',
|
storeInfo: {},
|
visible: false,
|
searchForm: {
|
orderNo: '',
|
goodsInfo: '',
|
createTime1: '',
|
startTime: '',
|
endTime: '',
|
orderStatus: '',
|
shopId: null,
|
settleStatus: ''
|
},
|
defaultAvatar: 'https://cube.elemecdn.com/3/c7/9d47156420e4e9c6e2c1f6d6e6e6e6e6.jpeg'
|
}
|
},
|
created () {
|
this.config({
|
api: '/business/orderManagement',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
handleDateChange (val) {
|
this.searchForm.createStartTime = val ? val[0] : ''
|
this.searchForm.createEndTime = val ? val[1] : ''
|
this.search()
|
},
|
open (title, row) {
|
this.searchForm.memberId = row.id
|
detail(row.id)
|
.then(res => {
|
this.storeInfo = res
|
this.activeTab = 'performance'
|
this.title = title
|
this.visible = true
|
this.searchForm.shopId = row.id
|
this.search()
|
})
|
.catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
}
|
}
|
}
|
</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>
|
