<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="shopInfo">
|
<div class="shop-info-content" v-if="storeInfo">
|
<!-- 第一部分：三个字段一行 -->
|
<div class="info-grid" style="margin-bottom: 0;">
|
<div class="info-item">
|
<span class="label">所在省市区：</span>
|
<span class="value">{{ storeInfo.provinceName || '' }} {{ storeInfo.cityName || '' }} {{ storeInfo.areaName || '' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">门店地址：</span>
|
<span class="value">{{ storeInfo.address || '' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">入驻押金：</span>
|
<span class="value amount">¥{{ storeInfo.depositAmount ? (storeInfo.depositAmount / 100).toFixed(2) : '0.00' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">营业时间：</span>
|
<span class="value" v-if="storeInfo.businessType === 1">全天营业</span>
|
<span class="value" v-if="storeInfo.businessType === 0">限时营业</span>
|
</div>
|
<div class="info-item">
|
<span class="label">配送范围：</span>
|
<span class="value" v-if="storeInfo.deliveryArea">{{ storeInfo.deliveryArea }}公里</span>
|
<span class="value" v-else>暂无</span>
|
</div>
|
<div class="info-item">
|
<span class="label">位置标签：</span>
|
<span class="value">{{ storeInfo.locationTagNames || '' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">门店状态：</span>
|
<span class="value" :class="getStatusClass(storeInfo.status)">
|
{{ storeInfo.status === 0 ? '启用' : '禁用' }}
|
</span>
|
</div>
|
</div>
|
|
<!-- 第二部分：一个字段一行 -->
|
<div class="info-full">
|
<div class="info-item-full">
|
<span class="label">门店介绍：</span>
|
<span class="value">{{ storeInfo.content || '' }}</span>
|
</div>
|
<div class="info-item-full">
|
<span class="label">营业时间：</span>
|
<span class="value">{{ storeInfo.shopHours || '' }}</span>
|
</div>
|
<div class="info-item-full">
|
<span class="label">寄存类型：</span>
|
<span class="value">{{ storeInfo.depositTypes || '' }}</span>
|
</div>
|
<div class="info-item-full">
|
<span class="label">收费标准：</span>
|
<span class="value">{{ storeInfo.feeStandard || '' }}</span>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
|
<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>{{ row.type === 1?'异地存取':'就地存取' }}</span></template>
|
</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}">
|
¥{{ storeInfo.id == row.depositShopId ? (row.depositShopFee / 100).toFixed(2) : storeInfo.id == row.takeShopId ? (row.takeShopFee / 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}">¥{{ (row.refundAmount / 100).toFixed(2) }}</template>
|
</el-table-column>
|
<el-table-column prop="createTime" label="创建时间" min-width="150px"> </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="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>
|
<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 ? '审批通过' : storeInfo.auditStatus === 2 ? '审批未通过' : '已支付押金' }}</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">
|
<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: 'shopInfo',
|
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
|
this.getStoreInfo(row.id).then(() => {
|
this.activeTab = 'shopInfo'
|
this.title = title
|
this.visible = true
|
this.searchForm.shopId = row.id
|
this.search()
|
})
|
},
|
// 获取门店详情
|
async getStoreInfo(id) {
|
try {
|
const res = await detail(id)
|
this.storeInfo = res
|
} catch (e) {
|
this.$tip.apiFailed(e)
|
}
|
},
|
// 获取门店状态样式
|
getStatusClass(status) {
|
return status === 0 ? 'status-enabled' : 'status-disabled'
|
}
|
}
|
}
|
</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: 100px;
|
height: 100px;
|
border-radius: 50%;
|
}
|
|
.info-grid {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 20px;
|
margin-bottom: 30px;
|
padding: 20px;
|
/* background: #f5f7fa; */
|
border-radius: 4px;
|
}
|
|
.info-full {
|
padding: 20px;
|
/* background: #f5f7fa; */
|
border-radius: 4px;
|
}
|
|
.info-item {
|
font-size: 14px;
|
}
|
|
.info-item-full {
|
font-size: 14px;
|
margin-bottom: 15px;
|
}
|
|
.info-item-full:last-child {
|
margin-bottom: 0;
|
}
|
|
.label {
|
color: #909399;
|
min-width: 100px;
|
display: inline-block;
|
margin-right: 10px;
|
}
|
|
.value {
|
color: #606266;
|
}
|
|
.value.amount {
|
color: #f56c6c;
|
font-weight: bold;
|
}
|
|
.status-enabled {
|
color: #67c23a;
|
font-weight: bold;
|
}
|
|
.status-disabled {
|
color: #f56c6c;
|
font-weight: bold;
|
}
|
.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>
|
