front-end/hdAppBack/src/admin/home/workbench.vue

<template>
  <div class="app-main app-content">
    <!-- 用户信息 -->
    <div class="user-wrap">
      <div class="user-top">
        <div class="app-size-28">今日概况</div>
        <div @click="pageTo('/admin/setting/password')">
          <app-avatar-module :src="avatarImg | default_avatar" :width="80" />
        </div>
      </div>
      <div class="income-amount" @click="pageTo('/admin/assets/list')">
        <div>收入金额</div>
        <div class="price">{{ $util.numberFormat(data.todayData.income) }}</div>
      </div>
      <div class="user-bottom">
        <div class="info-list">
          <div class="info-list-name">浏览量</div>
          <div class="info-list-value">{{ $util.numberFormat(data.todayData.visit) || 0 }}</div>
        </div>
        <div class="info-list">
          <div class="info-list-name">新粉丝</div>
          <div class="info-list-value">{{ $util.numberFormat(data.todayData.fans) || 0 }}</div>
        </div>
        <div class="info-list">
          <div class="info-list-name">新客户</div>
          <div class="info-list-value">{{ $util.numberFormat(data.todayData.user) || 0 }}</div>
        </div>
      </div>
    </div>
    <!-- 订单总览 -->
    <div class="module-com order-wrap">
      <div class="total-blo">
        <div
          class="total-list"
          v-for="(item, index) in orderData"
          :key="index"
          @click="pageTo(item)"
        >
          <div class="list-num">{{ item.value }}</div>
          <div class="app-color-3">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <!-- 消息 -->
    <div class="module-com news-wrap">
      <div
        class="news-list"
        v-for="(item, index) in data.notice"
        :key="index"
        @click="pageToFn(item)"
      >
        <div class="news-left">
          <i class="iconfont iconxiaoxi2"></i>
          <span>{{ item.title }}</span>
        </div>
        <div class="news-right">
          <span>{{ item.action }}</span>
          <i class="iconfont iconxiangyou"></i>
        </div>
      </div>
    </div>
    <!-- 客户按钮 -->
    <div class="module-com tabs-wrap">
      <div class="tabs-list" v-for="(item, index) in tabsData" :key="index">
        <div @click="goToItem(item)">
          <div class="tabs-img">
            <img :src="item.img" alt mode="widthFix" />
          </div>
          <div class="tabs-name">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <!-- 总览 -->
    <div class="module-com total-wrap">
      <div class="total-tit">总览</div>
      <div class="total-blo">
        <div class="total-list" v-for="(item, index) in totalData" :key="index">
          <div class="list-num">{{ $util.numberFormat(item.value) }}</div>
          <div class="app-color-3">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <!-- <fab-module /> -->
    <!-- 续费遮罩层 -->
    <modal-module :show="renewMask" :custom="true" :maskClosable="true" padding="30rpx 30rpx">
      <template>
        <div class="renew-wrap">
          <div class="renew-wrap-text">你的账号已到期</div>
          <button class="admin-button-com middle" @click="renewFn()">立即续费</button>
        </div>
      </template>
    </modal-module>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import FabModule from "@/components/plugin/fab";
import AppAvatarModule from "@/components/module/app-avatar";
import ModalModule from "@/components/plugin/modal";
import { getDataTimestamp } from "@/utils/common";
// api
import { getUser } from "@/utils/auth";
import { consoleIndex } from "@/api/workbench";
export default {
  name: "admin-workbench",
  components: {
    ModalModule,
    FabModule,
    AppAvatarModule
  },
  data() {
    return {
      constant: this.$constant,
      // 遮罩层
      renewMask: false,
      data: {
        admin: {},
        asset: {},
        notice: {},
        todayData: {}
      },
      // 订单总览
      orderData: [
        {
          name: "待付款",
          value: 0,
          url: "/admin/home/order",
          type: 4,
          query: {
            tabIndex: 1
          }
        },
        {
          name: "待配送",
          value: 0,
          url: "/admin/home/order",
          type: 4,
          query: {
            tabIndex: 2
          }
        },
        {
          name: "配送中",
          value: 0,
          url: "/admin/home/order",
          type: 4,
          query: {
            tabIndex: 3
          }
        },
        {
          name: "待通知",
          value: 0
        },
        {
          name: "已完结",
          url: "/admin/home/order",
          type: 4,
          query: {
            tabIndex: 4
          },
          value: 0
        },
        {
          name: "全部",
          url: "/admin/home/order",
          type: 4,
          query: {
            tabIndex: 0
          },
          value: 0
        }
      ],
      // tab按钮
      tabsData: [
        {
          name: "商品",
          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-1.png`,
          url: "/admin/goodsManage/list"
        },
        {
          name: "老带新",
          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-2.png`,
          url: "/admin/interest/invite"
        },
        {
          name: "优惠券",
          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-3.png`,
          url: "/admin/coupon/list"
        },
        {
          name: "广告",
          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-4.png`,
          url: "/admin/ad/list"
        },
        {
          name: "图库",
          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-1.png`,
          url: "/admin/goodsManage/img-store"
        },
        {
          name: "数据统计",
          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-5.png`,
          url: "/admin/statistics/demo"
        },
        {
          name: "员工",
          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-6.png`,
          url: "/admin/staff/list"
        },
        {
          name: "门店",
          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-6.png`,
          url: "/admin/shop/list"
        },
        {
          name: "邀请开店",
          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-511.png`,
          url: "/admin/interest/my-invite"
        },
        {
          name: "进货",
          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-7.png`,
          url: "/admin/shop/list"
        },
        {
          name: "设置",
          img: `${this.$constant.imgUrl}/retail/admin/tab-icon-8.png`,
          url: "/admin/setting/list"
        }
      ],
      // 总览
      totalData: [
        {
          name: "会员数",
          value: 0
        },
        {
          name: "粉丝数",
          value: 0
        },
        {
          name: "客户数",
          value: 0
        },
        {
          name: "总收入（元）",
          value: 0
        },
        {
          name: "总访问量",
          value: 0
        },
        {
          name: "剩余短信",
          value: 0
        }
      ]
    };
  },
  computed: {
    ...mapGetters({ userInfo: "getUser" }),
    ...mapGetters({ loginInfo: "getLoginInfo" }),
    avatarImg() {
      return this.$util.isEmpty(this.loginInfo) ? "" : this.loginInfo.avatar;
    }
  },
  onLoad(option) {
  },
  onPullDownRefresh() {
    this.init();
    uni.stopPullDownRefresh();
  },
  onShow() {
    this.init();
  },
  methods: {
    init() {
      getUser().then(res => {
        uni.setNavigationBarTitle({
          title: res.merchantName
        });

        let nowTime = getDataTimestamp(new Date(), true);
        if (nowTime > res.setDeadline) {
          this.renewMask = true;
        }
      });
      consoleIndex().then(res => {
        this.data = res.data;
        const { asset } = res.data;
        if (!this.$util.isEmpty(asset)) {
          // 订单总览
          this.orderData[0].value = asset.unPayOrder;
          this.orderData[1].value = asset.unSendOrder;
          this.orderData[2].value = asset.sendingOrder;
          this.orderData[3].value = asset.unNoticeOrder;
          this.orderData[4].value = asset.finishOrder;
          this.orderData[5].value = asset.totalOrder;
          // 总览数据
          this.totalData[0].value = asset.totalMember;
          this.totalData[1].value = asset.totalFans;
          this.totalData[2].value = asset.totalUser;
          this.totalData[3].value = asset.totalIncome;
          this.totalData[4].value = asset.totalVisit;
          this.totalData[5].value = asset.remainSmsNum;
        }
      });
    },
    // 跳转
    pageToFn(item) {
      // #ifdef H5
      location.href = item.url;
      // #endif
      // #ifndef H5
      // #endif
    },
    // 续费
    renewFn() {
      this.$util.pageTo({
        url: "/admin/official/index",
        query: {
          pay: 1
        },
        type: 2
      });
    },
    goToItem(item) {
      
        this.$util.pageTo(item);
      
    }
  }
};
</script>

<style lang="scss" scoped>
.app-content {
  padding-bottom: 10px;
}
// 公共
.module-com {
  margin-bottom: 20px;
  // padding: 20px;
  background-color: #fff;
  // box-shadow: 0px 6px 16px #ddd;
  // border-radius: 10px;
}
// 用户信息
.user-wrap {
  padding: 20px 40px 40px 30px;
  color: #fff;
  text-align: center;
  background-image: url("../../static/images/admin/bg.png");
  background-size: 100% 380px;
  background-repeat: no-repeat;
  .user-top {
    // padding-top: 20px;
    @include disFlex(center, space-between);
  }
  .income-amount {
    margin-top: 14px;
    margin-bottom: 40px;
    .price {
      font-size: 50px;
      font-weight: bold;
      margin-top: 4px;
    }
  }
  .user-bottom {
    @include disFlex(center, space-around);
    // padding-bottom: 40px;
    .info-list-name {
      color: #bfd4ff;
    }
    .info-list-value {
      font-size: 36px;
      font-weight: bold;
      margin-top: 4px;
    }
  }
}
// 消息
.news-wrap {
  .news-list {
    @include disFlex(center, space-between);
    padding: 30px 24px 30px 30px;
    border-bottom: 1px solid $borderColor;
    font-size: 26px;
    color: $fontColor2;
    &:active {
      background-color: $backColor;
    }
    & > div {
      @include disFlex(center, flex-start);
    }
    .news-left {
      .iconfont {
        color: $mainColor;
        margin-right: 10px;
      }
    }
    .news-right {
      font-size: 24px;
      color: $mainColor;
      transform: scale(0.9);
      @include disFlex(flex-end, flex-start);
      .iconfont {
        font-size: 24px;
        margin-left: 10px;
      }
    }
  }
}
// 总览
.total-wrap,
.order-wrap {
  .total-tit {
    padding: 18px 0 18px 20px;
    border-bottom: 1px solid $borderColor;
    font-weight: 600;
  }
  .total-blo {
    @include disFlex(center, space-between);
    flex-wrap: wrap;
    padding: 30px 0 40px;
    .total-list {
      width: 33%;
      text-align: center;
      padding-bottom: 54px;
      border-right: 1px solid $borderColor;
      .list-num {
        margin-bottom: 8px;
        font-size: 36px;
        font-weight: bold;
      }
    }
    .total-list:nth-child(3n) {
      border-right: none;
    }
    .total-list:nth-child(n + 4) {
      padding-bottom: 0;
    }
  }
}
// tabs
.tabs-wrap {
  padding: 40px 10px;
  @include disFlex(center, flex-start);
  flex-wrap: wrap;
  .tabs-list {
    width: 25%;
    margin-top: 50px;
    text-align: center;
    .tabs-img {
      width: 100px;
      height: 100px;
      margin: 0 auto;
      img {
        height: 100%;
      }
    }
    .tabs-name {
      color: $fontColor2;
    }
    &:nth-child(-n + 4) {
      margin-top: 0;
    }
  }
}
// 遮罩层
.renew-wrap {
  text-align: center;
  .renew-wrap-text {
    margin-top: 30px;
    margin-bottom: 60px;
    font-size: 34px;
  }
}
</style>