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

<template>
  <div class="app-main app-content">
    <div class="user-wrap" :style="{ backgroundImage: `url(${constant.imgUrl}/home/bg_hd_home.png)` }">
      <div class="user-top">
        <div class="app-size-28">今日概况</div>
      </div>
      <div class="income-amount" @click="goToIncome">
        <div>销售收入</div>
        <div class="price">{{ $util.numberFormat(data.todayData.income) }}</div>
      </div>
      <div class="user-bottom">
        <navigator url="/admin/home/order" open-type="switchTab" class="info-list">
          <div class="info-list-name">开单</div>
          <div class="info-list-value">
            {{ $util.numberFormat(data.todayData.order) || 0 }}
          </div>
        </navigator>
        <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" @click="goToExpend" >
          <div class="info-list-name">支出</div>
          <div class="info-list-value">
            {{ $util.numberFormat(data.todayData.out) || 0 }}
          </div>
        </div>
      </div>
    </div>
    <div class="module-com news-wrap">
      <div class="news-list" v-for="(item, index) in data.notice" :key="index" @click="noticeFn(item)" >
        <div class="news-left">
          <i class="iconfont iconxiaoxi2 ling"></i>
          <span>{{ item.title }}</span>
        </div>
        <div class="news-right">
          <span>{{ item.action }}</span>
          <i class="iconfont iconxiangyou"></i>
        </div>
      </div>
    </div>
    <view class="module-com">
      <view class="tabs-head_bx">
				<image @click="goGd()" :src="kdSrc" mode="widthFix" ></image>
				<image @click="goCg()" :src="cgSrc" mode="widthFix"></image>
      </view>
      <div class="tabs-wrap">
        <div class="tabs-list" v-for="(item, index) in tabsData" :key="index" >
          <div @click="goPage(item)">
            <div class="tabs-img">
              <img :src="item.img" alt mode="widthFix" />
            </div>
            <div class="tabs-name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </view>
    <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>
    <NotLogin></NotLogin>
  </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
import { getWeixinId } from "@/api/invite/index";
import { getShopInfo } from "@/utils/auth";
import { consoleIndex } from "@/api/workbench";
import NotLogin from "@/components/not-login";
import autoUpdateMixins from "@/mixins/autoUpdate";
export default {
  name: "workbench",
  components: { NotLogin },
  mixins: [autoUpdateMixins],
  data () {
    return {
      constant: this.$constant,
      getappIdList: {},
      data: {
        admin: {},
        asset: {},
        notice: {},
        todayData: { income:0.00, order:0, custom:0, expend:0.00 },
        isMini:0
      },
      tabsData: [
        { name: "商城", img: `${this.$constant.imgUrl}/ghs/home/shop.png`, url: "/admin/cg/mall",pf:1},
        { name: "工单", img: `${this.$constant.imgUrl}/ghs/home/kcyjs.png`, url: "/admin/work/list",pf:1 },
        { name: "花材", img: `${this.$constant.imgUrl}/ghs/home/hcgl.png`, url: "/admin/item/list",pf:1 },
        { name: "改价", img: `${this.$constant.imgUrl}/ghs/home/gj.png`, url: "/admin/changePrice/list",pf:0},
        { name: "供应商", img: `${this.$constant.imgUrl}/ghs/home/icon_ghs.png`, url: "/pagesPurchase/order",pf:0 },
        { name: "采购单", img: `${this.$constant.imgUrl}/ghs/home/icon_caigou.png`, url: "/pagesPurchase/shopping",pf:0 },
        { name: "采购结账单", img: `${this.$constant.imgUrl}/ghs/home/kcyjs.png`, url: "/admin/clear/list",pf:0 },
        { name: "商品", img: `${this.$constant.imgUrl}/ghs/home/hcgl.png`, url: "/admin/goods/list",pf:1 },
        { name: "商品采购单", img: `${this.$constant.imgUrl}/ghs/home/icon_caigou.png`, url: "/admin/goods/plantCg",pf:1},
        { name: "报损单", img: `${this.$constant.imgUrl}/ghs/home/kcyjs.png`, url: "/admin/breakage/list",pf:1},
        { name: "员工", img: `${this.$constant.imgUrl}/ghs/home/yggl.png`, url: "/admin/staff/list",pf:0 },
        { name: "花材分类", img: `${this.$constant.imgUrl}/ghs/home/hcgl.png`,url: "/admin/itemClass/list",pf:1},
      ],
      totalData: [
        { name: "客户数", value: 0 },
        { name: "总访客", value: 0 },
        { name: "总订单", value: 0 },
        { name: "总收入(元)", value: 0 },
        { name: "总支出(元)", value: 0 },
        { name: "总采购(元)", value: 0 }
      ],
      cgSrc: `${this.$constant.imgUrl}/ghs/home/cg.png`,
      kdSrc: `${this.$constant.imgUrl}/ghs/home/gd.png`
    };
  },
  onShareAppMessage (res) {
      return {
        title: "",
        desc: "",
        imgUrl: "",
        path: ""
      };
  },
  computed: {
    ...mapGetters({ loginInfo: "getLoginInfo" })
  },
  onLoad () {
   },
  onPullDownRefresh () {
    this.init();
    uni.stopPullDownRefresh();
  },
  onShow () {
      getShopInfo().then(res => {
        if(res.name){
          uni.setNavigationBarTitle({ title: res.name })
        }else{
          uni.setNavigationBarTitle({ title: '店铺' })
        }
      })
  },
  methods: {
    goGd(){
      this.$util.pageTo({url:'/admin/work/add'})
    },
    goCg(){
      if(this.getLoginInfo.pfShopId && Number(this.getLoginInfo.pfShopId)>0){
          this.$msg('请在批发端操作')
          return false
      }
      this.$util.pageTo({url:'/pagesPurchase/order'})
    },
    goPage (item) {
      if (item.url === '/admin/billing/priceChange') {
        this.goToMallPt('pages/pay/index')
        return true
      }
      if(this.getLoginInfo.pfShopId && Number(this.getLoginInfo.pfShopId)>0){
        if(item.pf == 0){
          this.$msg('请在批发端操作')
          return false
        }
      }
      this.$util.pageTo(item)
    },
    init () {
        getWeixinId().then(res => {
          this.getappIdList = res.data
        });
        // #ifdef MP-WEIXIN
        this.isMini = 1
        // #endif
        consoleIndex({isMini:this.isMini}).then(res => {
          this.data = res.data;
          const { asset, todayData } = res.data;
          if (!this.$util.isEmpty(asset)) {
            // 总览数据
            this.totalData[0].value = asset.totalUser ? parseFloat(asset.totalUser) : 0;
            this.totalData[1].value = asset.totalView ? parseFloat(asset.totalView) : 0;
            this.totalData[2].value = asset.totalOrder ? parseFloat(asset.totalOrder) : 0;
            this.totalData[3].value = asset.totalIncome ? parseFloat(asset.totalIncome) : 0;
            this.totalData[4].value = asset.totalExpend ? parseFloat(asset.totalExpend) : 0;
            this.totalData[5].value = asset.totalPurchase ? parseFloat(asset.totalPurchase) : 0;
          }
        });
    },
    //通知处理
    noticeFn (item) {
      this.$util.pageTo({ url: item.page })
    },
    //支出
    goToExpend () {
      uni.navigateTo({ url: '/pagesStore/me/expend' })
    },
    //收入
    goToIncome () {
      uni.navigateTo({ url: '/pagesStore/me/income' })
    },
    //续费
    renewFn () {
      this.$util.pageTo({ url: "/pagesClient/official/index", query: { pay: 1 }, type: 2 })
    },
    goToMallPt (url) {
      let self = this
        uni.navigateToMiniProgram({
          appId: this.getappIdList.mall.miniAppId,
          path: url + '?account=' + self.loginInfo.shopId,
          //develop 开发版 trial 体验版 release 正式版
          envVersion: process.env.NODE_ENV === 'development' ? 'develop' : 'release',
          extraData: {
            'hdShopAdminId': self.loginInfo.shopAdminId
          },
          success (res) {
          }
        })
    },
  }
};
</script>
<style lang="scss" scoped>
.app-content {
  padding-bottom: 10upx;
}
.module-com {
  margin-bottom: 20upx;
  background-color: #fff;
}
.user-wrap {
  padding: 20upx 30upx 34upx 30upx;
  color: #fff;
  text-align: center;
  background-size: 100% 380upx;
  background-repeat: no-repeat;
  .user-top {
    @include disFlex(center, space-between);
    .open-bt_bx {
      display: flex;
      align-items: center;
      line-height: 1upx;
      & > button {
        padding: 0;
        line-height: auto;
        background-color: transparent;
        border: 1px solid #ffffff;
        border-radius: 22upx;
        padding: 10upx 17upx !important;
        font-size: 24upx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        & > .iconfont {
          font-size: 25upx;
          padding-right: 10upx;
        }
      }
    }
  }
  .income-amount {
    margin-top: 36upx;
    margin-bottom: 37upx;
    .price {
      font-size: 50upx;
      font-weight: bold;
      margin-top: 4upx;
    }
  }
  .user-bottom {
    @include disFlex(center, space-around);
    .info-list-name {
      color: #bfd4ff;
    }
    .info-list-value {
      font-size: 36upx;
      font-weight: bold;
      margin-top: 4upx;
    }
  }
}
// 消息
.news-wrap {
  .news-list {
    @include disFlex(center, space-between);
    padding: 30upx 24upx 30upx 30upx;
    border-bottom: 1px solid $borderColor;
    font-size: 26upx;
    color: $fontColor2;
    &:active {
      background-color: $backColor;
    }
    & > div {
      @include disFlex(center, flex-start);
    }
    .news-left {
      .iconfont {
        color: $mainColor;
        margin-right: 10upx;
      }
      .ling {
        font-size: 28upx;
      }
      span{
        font-size:29upx;
      }
    }
    .news-right {
      font-size: 26upx;
      color: $mainColor;
      transform: scale(0.9);
      @include disFlex(flex-end, flex-start);
      .iconfont {
        font-size: 24upx;
        margin-left: 10upx;
        margin-bottom: 6upx;
      }
    }
  }
}
// 总览
.total-wrap,
.order-wrap {
  .total-tit {
    padding: 18upx 0 18upx 20upx;
    border-bottom: 1px solid $borderColor;
    font-weight: 600;
    font-size: 24upx;
    color: #333333;
  }
  .total-blo {
    @include disFlex(center, space-between);
    flex-wrap: wrap;
    padding: 30upx 0 40upx;
    .total-list {
      width: 33%;
      text-align: center;
      margin: 20upx 0upx;
      border-right: 1px solid $borderColor;
      .list-num {
        margin-bottom: 8upx;
        font-size: 36upx;
        font-weight: bold;
      }
    }
    .total-list:nth-child(3n) {
      border-right: none;
    }
    .total-list:nth-child(n + 4) {
      padding-bottom: 0;
    }
  }
}
.tabs-head_bx {
  display: flex;
  align-items: center;
  padding: 20upx 15upx;
}
.tabs-wrap {
  padding: 20upx 10upx;
  @include disFlex(center, flex-start);
  flex-wrap: wrap;
  .tabs-list {
    width: 25%;
    margin-top: 50upx;
    text-align: center;
    .tabs-img {
      width: 100upx;
      height: 100upx;
      margin: 0 auto;
      img {
        height: 100%;
      }
    }
    .tabs-name {
      color: $fontColor2;
      margin-top: 10upx;
    }
    &:nth-child(-n + 4) {
      margin-top: 0;
    }
  }
}
// 遮罩层
.renew-wrap {
  text-align: center;
  .renew-wrap-text {
    margin-top: 30upx;
    margin-bottom: 60upx;
    font-size: 34upx;
  }
}
</style>