smart-switch-ui/src/views/mch/store/detail.vue

<template>
  <div class="app-container" v-loading="loading">
    <el-card class="box-card" header="店铺详情">
      <el-row type="flex">
        <image-preview :src="store.picture" :width="80" :height="80"/>
        <div style="flex: 1;margin-left: 2em">
          <el-descriptions :column="3">
            <el-descriptions-item label="店铺名称">{{store.name | defaultValue}}</el-descriptions-item>
            <el-descriptions-item label="店铺类型">
              <dict-tag :value="store.type" :options="dict.type.ss_store_type" size="small"/>
            </el-descriptions-item>
            <el-descriptions-item label="店铺状态">
              <dict-tag :value="store.status" :options="dict.type.store_status" size="small"/>
            </el-descriptions-item>
            <el-descriptions-item label="是否生效">
              <el-tag :type="store.enabled ? 'success' : 'danger'" size="small">{{store.enabled ? '已生效' : '未生效'}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">{{store.createTime | defaultValue}}</el-descriptions-item>
            <el-descriptions-item label="营业时间">
              {{store.businessTimeStart | defaultValue}} 至 {{store.businessTimeEnd | defaultValue}}
            </el-descriptions-item>
            <el-descriptions-item label="联系方式">{{store.contactName | defaultValue}}({{store.contactMobile | defaultValue}})</el-descriptions-item>
            <el-descriptions-item label="店铺地址" :span="2">
              {{store.province}}{{store.city}}{{store.county}}{{store.address}}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-row>
    </el-card>

    <el-row :gutter="16">
      <el-col :span="18">


        <el-card class="box-card" >
          <el-row type="flex">
            <el-statistic
              group-separator=","
              :precision="2"
              :value="store.todayIncome"
              suffix="¥"
              title="今日收入"
            ></el-statistic>
            <el-statistic
              group-separator=","
              :precision="2"
              :value="store.monthIncome"
              suffix="¥"
              title="本月收入"
            ></el-statistic>
            <el-statistic
              group-separator=","
              :precision="2"
              :value="store.lastMonthIncome"
              suffix="¥"
              title="上月收入"
            ></el-statistic>
            <el-statistic
              group-separator=","
              :value="store.deviceCount"
              suffix="台"
              title="设备总数"
            ></el-statistic>
            <el-statistic
              group-separator=","
              :value="store.onlineCount"
              suffix="台"
              title="在线设备"
            ></el-statistic>
            <el-statistic
              group-separator=","
              :value="store.offlineCount"
              suffix="台"
              title="离线设备"
            ></el-statistic>
          </el-row>
        </el-card>
        <el-card class="box-card">
          <my-store-recharge-report :store-id="store.storeId"/>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="box-card">
          <place-search-map
            v-if="showMap"
            height="534px"
            :init-lng="store.lng"
            :init-lat="store.lat"
            enable-geo
            marker-type="store"
          />
        </el-card>
      </el-col>
    </el-row>

    <el-card class="box-card">
      <el-tabs>
        <el-tab-pane label="设备列表" :lazy="true">
          <my-device v-if="store.storeId != null" :query="{storeId: store.storeId}"/>
        </el-tab-pane>
        <el-tab-pane label="订单列表" :lazy="true">
          <mch-recharge :query="{storeId: store.storeId}" :view="views.store"/>
        </el-tab-pane>
        <el-tab-pane label="店铺变更记录" :lazy="true">
          <mch-store-apply :query="{storeId: store.storeId}" :view="views.store"/>
        </el-tab-pane>
      </el-tabs>
    </el-card>


  </div>
</template>

<script>
import PlaceSearchMap from '@/components/Map/PlaceSearch/PlaceSearchMap.vue'
import { mchGetStore } from '@/api/mch/store'
import MyStoreRechargeReport from '@/views/mch/store/components/storeRechargeReport.vue'
import MyDevice from '@/views/mch/device/index.vue'
import UserLink from '@/components/Business/SmUser/UserLink.vue'
import MchStoreApply from '@/views/mch/storeApply/index.vue'
import { views } from '@/utils/constants'
import MchRecharge from '@/views/mch/recharge/index.vue'

export default {
  name: 'MyStoreDetail',
  computed: {
    views() {
      return views
    }
  },
  components: { MchRecharge, MchStoreApply, UserLink, MyDevice, MyStoreRechargeReport, PlaceSearchMap },
  dicts: ['ss_store_type', 'store_status'],
  data() {
    return {
      loading: false,
      store: {},
      showMap: false,
    }
  },
  created() {
    this.getDetail();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    getDetail() {
      this.loading = true;
      mchGetStore(this.$route.params.storeId).then(res => {
        this.store = res.data;
        this.showMap = true;
      }).finally(() => {
        this.loading = false;
      })
    },
  }
}
</script>

<style scoped>
.remark-text {
  color: #ccc;
  margin-left: 1em;
}
.app-container .box-card:nth-child(n + 1) {
  margin-top: 1em;
}
</style>