NN2025112501/addons/admin/src/views/dashboard/workplace.vue

<template>
  <div class="ele-body">
    <!-- 顶部卡片 -->
    <el-card shadow="never" body-style="padding: 20px;">
      <div class="ele-cell workplace-user-card">
        <div class="ele-cell-content ele-cell">
          <el-avatar :size="68" :src="$store.state.user.user.avatar" />
          <div class="ele-cell-content" style="overflow: hidden;">
            <h4 class="ele-elip">早安，{{ $store.state.user.user.realname }}</h4>
            <div class="ele-text-secondary ele-elip" style="margin-top: 8px;">
              <s />请开始您一天的工作吧！<s />
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <el-row :gutter="15">
      <el-col :md="4" :sm="6" :xs="12" v-if="!isStoreUser">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block" @click="$router.push('/store/store')">
            <i class="app-link-icon el-icon-user-solid" style="color: #409eff;"></i>
            <div class="app-link-title">商家管理</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="4" :sm="6" :xs="12" v-if="!isStoreUser">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block" @click="$router.push('/agents/agents')">
            <i class="app-link-icon el-icon-user-solid" style="color: #409eff;"></i>
            <div class="app-link-title">代理管理</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="4" :sm="6" :xs="12" v-if="!isStoreUser">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block" @click="$router.push('/member/member')">
            <i class="app-link-icon el-icon-user" style="color: #ff85c0;"></i>
            <div class="app-link-title">会员管理</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="4" :sm="6" :xs="12" v-if="!isStoreUser">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block" @click="$router.push('/financial/accountLog')">
            <i class="app-link-icon el-icon-wallet" style="color: #f56c6c;"></i>
            <div class="app-link-title">提现管理</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="4" :sm="6" :xs="12" v-if="!isStoreUser">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block" @click="$router.push('/system/user')">
            <i class="app-link-icon el-icon-s-custom" style="color: #e6a23c;"></i>
            <div class="app-link-title">用户管理</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="4" :sm="6" :xs="12" v-if="!isStoreUser">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block" @click="$router.push('/system/config')">
            <i class="app-link-icon el-icon-setting" style="color: #63aaf5;"></i>
            <div class="app-link-title">平台配置</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 会员、订单、营收统计 -->
    <el-row :gutter="15">
      <el-col :md="6" :sm="6" :xs="12" v-if="!isStoreUser">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block" @click="$router.push('/member/member')">
            <i class="app-link-icon el-icon-user" style="color: #6ecc59;"></i>
            <div class="app-link-title countFont">{{ datas.users.count || 0 }}</div>
            <div class="app-link-title">总会员数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="6" :xs="12" v-if="!isStoreUser">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block" @click="$router.push('/member/member')">
            <i class="app-link-icon el-icon-user" style="color: #ff85c0;"></i>
            <div class="app-link-title countFont">{{ datas.users.count_by_month || 0 }}</div>
            <div class="app-link-title">月新增会员</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="6" :xs="12" v-if="!isStoreUser">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block" @click="$router.push('/member/member')">
            <i class="app-link-icon el-icon-user" style="color: #ffd46e;"></i>
            <div class="app-link-title countFont">{{ datas.users.count_by_day || 0 }}</div>
            <div class="app-link-title">今日新增会员</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="6" :xs="12" v-if="!isStoreUser">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block" @click="$router.push('/member/member?status=1')">
            <i class="app-link-icon el-icon-user" style="color: #57b0ec;"></i>
            <div class="app-link-title countFont">{{ datas.users.count_by_active || 0 }}</div>
            <div class="app-link-title">正常会员</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="6" :xs="12">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block">
            <i class="app-link-icon el-icon-document" style="color: #ff9c6e;"></i>
            <div class="app-link-title countFont">{{ datas.orders.count || 0 }}</div>
            <div class="app-link-title">总订单量</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="6" :xs="12">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block">
            <i class="app-link-icon el-icon-document" style="color: #ff6ea6;"></i>
            <div class="app-link-title countFont">{{ datas.orders.count_by_month || 0 }}</div>
            <div class="app-link-title">月订单量</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="6" :xs="12">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block">
            <i class="app-link-icon el-icon-document" style="color: #ffd46e;"></i>
            <div class="app-link-title countFont">{{ datas.orders.count_by_day || 0 }}</div>
            <div class="app-link-title">今日订单量</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="6" :xs="12">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block">
            <i class="app-link-icon el-icon-money" style="color: #67c23a;"></i>
            <div class="app-link-title countFont">{{ datas.orders.amount_by_month || '0.00' }}</div>
            <div class="app-link-title">月营业额</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="6" :xs="12">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block">
            <i class="app-link-icon el-icon-money" style="color: #e6a23c;"></i>
            <div class="app-link-title countFont">{{ datas.orders.amount_by_day || '0.00' }}</div>
            <div class="app-link-title">今日营业额</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="6" :xs="12">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block">
            <i class="app-link-icon el-icon-tickets" style="color: #6ecaff;"></i>
            <div class="app-link-title countFont">{{ datas.balance.income_by_total || '0.00' }}</div>
            <div class="app-link-title">累计订单收入</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="6" :xs="12" v-if="!isStoreUser">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block" @click="$router.push('/financial/accountLog?status=2')">
            <i class="app-link-icon el-icon-tickets" style="color: #e56dc5;"></i>
            <div class="app-link-title countFont">{{ datas.balance.withdraw_by_total || '0.00' }}</div>
            <div class="app-link-title">累计提现金额</div>
          </div>
        </el-card>
      </el-col>

      <el-col :md="6" :sm="6" :xs="12" v-if="!isStoreUser">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block" @click="$router.push('/store/store')">
            <i class="app-link-icon el-icon-place" style="color: #67c23a;"></i>
            <div class="app-link-title countFont">{{ datas.stores.count || 0 }}</div>
            <div class="app-link-title">总商家数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="6" :xs="12" v-if="!isStoreUser">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block" @click="$router.push('/store/store?status=2')">
            <i class="app-link-icon el-icon-warning" style="color: #e6a23c;"></i>
            <div class="app-link-title countFont">{{ datas.stores.count_by_pending || 0 }}</div>
            <div class="app-link-title">待审核商家</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="6" :xs="12" v-if="!isStoreUser">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block" @click="$router.push('/store/store?status=1')">
            <i class="app-link-icon el-icon-success" style="color: #67c23a;"></i>
            <div class="app-link-title countFont">{{ datas.stores.count_by_active || 0 }}</div>
            <div class="app-link-title">营业中商家</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="6" :xs="12" v-if="!isStoreUser">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block" @click="$router.push('/agents/agents')">
            <i class="app-link-icon el-icon-user-solid" style="color: #409eff;"></i>
            <div class="app-link-title countFont">{{ datas.agents.count || 0 }}</div>
            <div class="app-link-title">总代理数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="6" :xs="12" v-if="!isStoreUser">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block" @click="$router.push('/agents/agents?status=2')">
            <i class="app-link-icon el-icon-warning" style="color: #e6a23c;"></i>
            <div class="app-link-title countFont">{{ datas.agents.count_by_pending || 0 }}</div>
            <div class="app-link-title">待审核代理</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="6" :xs="12" v-if="!isStoreUser">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block" @click="$router.push('/financial/accountLog')">
            <i class="app-link-icon el-icon-wallet" style="color: #f56c6c;"></i>
            <div class="app-link-title countFont">{{ datas.withdrawals.count_by_pending || 0 }}</div>
            <div class="app-link-title">待审核提现</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="6" :xs="12" v-if="!isStoreUser">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block" @click="$router.push('/financial/accountLog')">
            <i class="app-link-icon el-icon-money" style="color: #ff9800;"></i>
            <div class="app-link-title countFont">{{ datas.withdrawals.amount_by_pending || '0.00' }}</div>
            <div class="app-link-title">待审核金额</div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="6" :xs="12" v-if="!isStoreUser">
        <el-card shadow="hover" body-style="padding:0;">
          <div class="app-link-block" @click="$router.push('/financial/accountLog')">
            <i class="app-link-icon el-icon-document-checked" style="color: #909399;"></i>
            <div class="app-link-title countFont">{{ datas.withdrawals.count_by_today || 0 }}</div>
            <div class="app-link-title">今日提现申请</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Workplace",
  computed: {
    ...mapGetters(["permission"]),
    // 判断是否为商户用户
    isStoreUser() {
      return this.$store.state.user.user && this.$store.state.user.user.store_id > 0;
    }
  },
  data() {
    return {
      total: {
        totalUser: 0,
        totalActiveUser: 0,
        totalAmount: 0,
        lastUserRegister: 0,
        active_by_day: 0,
        count_by_total: 0,
      },
      datas: {
        // 会员
        'users': {
          'count': 0,  // 总会员数
          'count_by_day': 0,  // 今日注册
          'count_by_month': 0, // 本月注册
          'count_by_active': 0,  // 正常会员
        },
        // 订单
        'orders': {
          'count': 0,  // 总订单数
          'count_by_month': 0,
          'count_by_day': 0,
          'amount_by_month': 0,
          'amount_by_day': 0,
        },
        // 营收
        'balance': {
          'income_by_total': 0,  // 订单收入
          'withdraw_by_total': 0,  // 提现金额
        },
        // 商家
        'stores': {
          'count': 0,  // 总商家数
          'count_by_pending': 0,  // 待审核
          'count_by_active': 0,  // 营业中
        },
        // 代理
        'agents': {
          'count': 0,  // 总代理数
          'count_by_pending': 0,  // 待审核
          'count_by_active': 0,  // 已审核
        },
        // 提现申请
        'withdrawals': {
          'count_by_pending': 0,  // 待审核提现数
          'amount_by_pending': 0,  // 待审核金额
          'count_by_today': 0,  // 今日提现申请
        }
      },
    }
  },
  created() {
    this.statistics();
  },
  methods: {
    // 统计数据
    statistics() {
      this.$http.post('/index/statistics').then(res => {
        if (res.data.code === 0) {
          this.datas = res.data.data
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.countFont {
  font-size: 2em;
}

.ele-body {
  padding-bottom: 0;
}

.el-card {
  margin-bottom: 15px;
}

/** 顶部统计 */
.workplace-count-group {
  white-space: nowrap;
}

.workplace-count-item {
  padding: 0 5px 0 25px;
  box-sizing: border-box;
  display: inline-block;
  text-align: right;
}

.workplace-count-name {
  padding-left: 5px;
}

.workplace-count-num {
  font-size: 23px;
  margin-top: 6px;
}

@media screen and (max-width: 992px) {
  .workplace-count-item {
    padding: 0 5px 0 10px;
  }
}

@media screen and (max-width: 768px) {

  .workplace-user-card,
  .workplace-count-group {
    display: block;
  }

  .workplace-count-group {
    margin-top: 15px;
    text-align: right;
  }
}

/** 快捷方式 */
.app-link-block {
  cursor: pointer;
  text-align: center;
  padding: 15px 0;
}

.app-link-block .app-link-icon {
  color: #69c0ff;
  font-size: 30px;
  margin-top: 5px;
}

.app-link-block .app-link-title {
  margin-top: 8px;
}

/** 最新动态时间轴 */
.ele-timeline-act {
  padding-left: 50px;
}

.ele-timeline-act>>>.el-timeline-item__timestamp {
  margin: 0;
  position: absolute;
  top: 3px;
  left: -45px;
}

.ele-timeline-act>>>.el-timeline-item {
  padding-bottom: 19px;
}

.ele-timeline-act>>>.el-timeline-item:last-child {
  padding-bottom: 0;
}

/** 表格 */
.workplace-table-card>>>.el-table tbody>.el-table__row:last-child td {
  border-bottom: none;
}

.workplace-table-card>>>.el-table:before {
  display: none;
}

.sort-handle {
  cursor: move;
  font-size: 18px;
  vertical-align: middle;
}

.ele-body>>>.el-table__row.sortable-chosen {
  background-color: hsla(0, 0%, 60%, .1);
}

.ele-body>>>.el-table__row.sortable-chosen td {
  background-color: transparent;
}

/** 本月目标 */
.workplace-goal-group {
  text-align: center;
  position: relative;
  padding: 48px 0;
}

.workplace-goal-group .workplace-goal-content {
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
}

.workplace-goal-group .workplace-goal-num {
  font-size: 40px;
  margin-top: 15px;
}

/** 小组成员 */
.user-list-item {
  padding: 13px 18px;
}

.user-list-item+.user-list-item {
  border-top: 1px solid hsla(0, 0%, 60%, .15);
}

.user-list-item .ele-cell-desc {
  margin-top: 5px;
}
</style>