MrShi
4 小时以前 59bfd0b8bbbf0ee94ec68e4a3a1a6e536d0ad8fd
admin/src/components/business/OperaShopInfoWindow.vue
@@ -1,17 +1,18 @@
<template>
  <GlobalWindow
    :title="title"
    :withFooter="false"
    :visible.sync="visible"
    width="80%"
      :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 :src="storeInfo.payMemberCoverImage ? storeInfo.imgPrefix + storeInfo.payMemberCoverImage : ''" fit="cover" class="store-avatar">
        <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>
@@ -37,68 +38,188 @@
    </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" inline>
          <el-form-item label="交易号" prop="orderNo">
            <el-input v-model="searchForm.orderNo" clearable placeholder="请输入交易号"></el-input>
        <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="optType">
            <el-select v-model="searchForm.optType" clearable placeholder="请选择类型">
          <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="1"></el-option>
              <el-option label="支出" :value="-1"></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="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 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>
          <section>
            <el-button type="primary" @click="search">查询</el-button>
          <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>
        <el-table :data="tableData.list" border stripe v-loading="isWorking.search" class="performance-table">
          <el-table-column label="收入/支出" min-width="100px">
        <!--
                <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="row.optType === 1 ? 'income' : 'expense'">{{ row.optType === 1 ? '收入' : '支出' }}</span>
              <span class="bluestate" @click="$refs.operaOrderDetail.open(row)">{{ row.code }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="金额(元)" min-width="100px">
          <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}">
              <span :class="row.optType === 1 ? 'income' : 'expense'">{{ row.amount }}</span>
              ¥{{ 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 prop="createTime" label="收支时间" min-width="160px"></el-table-column>
          <el-table-column label="业务类型" min-width="100px">
          <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 label="超时金额(元)" min-width="100px">
            <template slot-scope="{row}">¥{{ (row.overdueAmount / 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 v-if="row.type === 0">完成订单</span>
              <span v-if="row.type === 1">提现支出</span>
              <span v-if="row.type === 2">提现退回</span>
              <span v-if="row.type === 3">平台奖励</span>
            <span :style="{ color: row.status <7 ? '#e6a23c' :  (row.status ===7 ? '#67c23a' : 'grey' )}">
              {{ row.statusDesc }}
            </span>
            </template>
          </el-table-column>
          <el-table-column prop="orderNo" label="交易号" min-width="180px"></el-table-column>
          <el-table-column label="状态" min-width="100px">
          <el-table-column  label="结算状态" min-width="100px">
            <template slot-scope="{row}">
              <span :class="row.vaildStatus === 1 ? 'status-success' : 'status-pending'">
                {{ row.vaildStatus === 1 ? '已到账' : '提现中' }}
              </span>
            <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"
            @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">
          <!-- <div class="qualification-section">
            <h4 class="section-title">基本信息</h4>
            <div class="info-grid">
              <div class="info-row">
@@ -111,14 +232,18 @@
              </div>
              <div class="info-row">
                <span class="label">门店状态:</span>
                <span class="value">{{ storeInfo.auditStatus === 0 ? '待审批' : storeInfo.auditStatus === 1 ? '审批通过' : '审批未通过' }}</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> -->
          <div class="qualification-section">
            <h4 class="section-title">主体资质</h4>
@@ -140,19 +265,19 @@
              <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]">
                  <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.idcardImgBack" fit="cover" class="qualification-image" :preview-src-list="[storeInfo.idcardImgBack]">
                  <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.businessImg" fit="cover" class="qualification-image" :preview-src-list="[storeInfo.businessImg]">
                  <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>
@@ -161,20 +286,20 @@
            <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]">
                <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.idcardImgBack" fit="cover" class="qualification-image" :preview-src-list="[storeInfo.idcardImgBack]">
                <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.laborContractImgs" :key="index" :src="img" fit="cover" class="qualification-image" :preview-src-list="storeInfo.laborContractImgs">
                  <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>
@@ -182,7 +307,7 @@
              <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">
                  <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>
@@ -190,12 +315,12 @@
            </template>
          </div>
          <div class="qualification-section" v-if="storeInfo.companyType === 1">
          <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.storeFrontImgs" :key="index" :src="img" fit="cover" class="qualification-image" :preview-src-list="storeInfo.storeFrontImgs">
                <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>
@@ -203,7 +328,7 @@
            <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">
                <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>
@@ -211,7 +336,7 @@
            <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">
                <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>
@@ -220,142 +345,83 @@
        </div>
      </el-tab-pane>
    </el-tabs>
    <OperaOrderDetail ref="operaOrderDetail"  @success="handlePageChange"  />
  </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'
import BaseTable from '@/components/base/BaseTable'
import OperaOrderDetail from '@/components/business/OperaOrderDetail'
import { fetchList, exportExcel } from '@/api/business/revenue'
export default {
  name: 'OperaShopInfoWindow',
  extends: BaseOpera,
  components: { GlobalWindow, Pagination },
  extends: BaseTable,
  components: { GlobalWindow, Pagination,OperaOrderDetail },
  data () {
    return {
      activeTab: 'performance',
      storeInfo: null,
      title: '门店详情',
      activeTab: 'shopInfo',
      storeInfo: {},
      visible: false,
      searchForm: {
        code: '',
        orderNo: '',
        optType: 0,
        createTime: '',
        memberId: '',
        memberType: 2
      },
      tableData: {
        list: [],
        pagination: {
          pageIndex: 1,
          pageSize: 10,
          total: 0
        }
      },
      isWorking: {
        search: false,
        export: false
        goodsInfo: '',
        createTime1: '',
        createStartTime: '',
        createEndTime: '',
        startTime: '',
        endTime: '',
        orderStatus: '',
        shopId: null,
        settleStatus: ''
      },
      defaultAvatar: 'https://cube.elemecdn.com/3/c7/9d47156420e4e9c6e2c1f6d6e6e6e6e6.jpeg'
    }
  },
  created () {
    this.config({
      api: '/business/shopInfo',
      api: '/business/orderManagement',
      'field.id': 'id'
    })
  },
  methods: {
    open (title, row) {
      this.searchForm.memberId = row.id
      detail(row.id)
        .then(res => {
          this.storeInfo = res
          this.activeTab = 'performance'
          this.searchForm = {
            orderNo: '',
            optType: '',
            createTime: '',
            memberId: '',
            memberType: 2
          }
          this.title = title
          this.visible = true
          this.search()
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
    },
    search () {
      this.isWorking.search = true
      const data = {
        capacity: this.tableData.pagination.pageSize,
        page: this.tableData.pagination.pageIndex,
        model: {
          orderNo: this.searchForm.orderNo,
          optType: this.searchForm.optType,
          startTime: this.searchForm.createTime?.[0] || '',
          endTime: this.searchForm.createTime?.[1] || '',
          memberId: this.searchForm.memberId,
          memberType: this.searchForm.memberType || ''
        }
      }
      fetchList(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
        })
    handleDateChange (val) {
      this.searchForm.createStartTime = val ? val[0] : ''
      this.searchForm.createEndTime = val ? val[1] : ''
      this.search()
    },
    reset () {
      this.searchForm = {
        orderNo: '',
        optType: '',
        createTime: '',
        memberId: '',
        memberType: 2
      this.$refs.searchForm.resetFields()
      this.searchForm.createStartTime = ''
      this.searchForm.createEndTime = ''
      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)
      }
      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 = {
        capacity: 999999,
        page: this.tableData.pagination.pageIndex,
        model: {
          orderNo: this.searchForm.orderNo,
          optType: this.searchForm.optType,
          startTime: this.searchForm.createTime?.[0] || '',
          endTime: this.searchForm.createTime?.[1] || '',
          memberId: this.searchForm.memberId,
          memberType: this.searchForm.memberType || ''
        }
      }
      exportExcel(data)
        .then(res => {
          this.download(res)
          this.$tip.apiSuccess('导出成功')
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
        .finally(() => {
          this.isWorking.export = false
        })
    // 获取门店状态样式
    getStatusClass(status) {
      return status === 0 ? 'status-enabled' : 'status-disabled'
    }
  }
}
@@ -373,10 +439,65 @@
  margin-right: 20px;
}
.store-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
    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;
}
@@ -494,4 +615,4 @@
  color: #909399;
  font-size: 20px;
}
</style>
</style>