water_dealer-agent/public/Index.vue

<template>
  <div>
    <div class="a-row">

      <!-- 基本信息 -->
      <a-col :span="8">
        <div class="block">
          <div class="block-title">基本信息</div>
          <div class="store">
            <a-avatar :src="base_info.cover" class="store-avatar" :size="64" alt="LOGO" />
            <div class="store-title nowrap">{{ base_info.name }} </div>
            <div class="store-introduction ellipsis">{{ base_info.description }}</div>
          </div>
        </div>
      </a-col>

      <!-- 店铺数据 -->
      <a-col :span="8">
        <div class="block">
          <div class="block-title">财务数据概况</div>
          <div class="statistical">
            <div class="statistical-item">
              <h4>{{ shop.orders }}</h4>
              <p>总销量(单)</p>
            </div>
            <div class="statistical-item">
              <h4>{{ shop.business }}</h4>
              <p>总营业额</p>
            </div>
          </div>
        </div>
      </a-col>

      <!-- 订单状况 -->
      <a-col :span="8">
        <div class="block">
          <div class="block-title">订单数据</div>
          <div class="statistical">
            <div class="statistical-item">
              <h4>{{ orders.paid }}</h4>
              <p>待发货</p>
            </div>
            <div class="statistical-item">
              <h4>{{ orders.delivered }}</h4>
              <p>待收货</p>
            </div>
          </div>
        </div>
      </a-col>

      <!-- 今日统计 -->
      <a-col :span="8">
        <div class="block">
          <div class="block-title">今日统计</div>
          <div class="business">
            <div class="business-item">
              <a-avatar :size="40" style="backgroundColor:#e5f3fe; color: #0383fe" icon="pay-circle" />
              <h4>{{ business.today }}</h4>
              <p>营业额(元)</p>
            </div>
            <div class="business-item">
              <a-avatar :size="40" style="backgroundColor:#f3f1fe; color: #876cfd" icon="unordered-list" />
              <h4>{{ business.today_sold }}</h4>
              <p>总销量(单)</p>
            </div>
            <div class="business-item">
              <a-avatar :size="40" style="backgroundColor:#fff8e5; color: #ffbe17" icon="unordered-list" />
              <h4>{{ business.people }}</h4>
              <p>消费人数</p>
            </div>
            <div class="business-item">
            </div>
          </div>
        </div>
      </a-col>

      <!-- 渠道订单情况 -->
      <a-col :span="16">
        <div class="block">
          <div class="block-title">渠道订单情况</div>
          <div class="business">
            <div class="business-item">
              <a-avatar :size="40" style="background-color: #e5f3fe; color: #0383fe" icon="pay-circle" />
              <h4>{{ group.order.current_group_number }}</h4>
              <p>购买本店铺商品单数(单)</p>
            </div>
            <div class="business-item">
              <a-avatar :size="40" style="background-color: #f3f1fe; color: #876cfd" icon="unordered-list" />
              <h4>{{ group.order.current_group_price }}</h4>
              <p>购买本店铺商品总金额(元)</p>
            </div>
            <div class="business-item">
              <a-avatar :size="40" style="background-color: #fff8e5; color: #ffbe17" icon="unordered-list" />
              <h4>{{ group.order.other_group_number }}</h4>
              <p>购买其他店铺商品单数(单)</p>
            </div>
            <div class="business-item">
              <a-avatar :size="40" style="background-color: #ebf9ea; color: #41c941" icon="snippets" />
              <h4>{{ group.order.other_group_price }}</h4>
              <p>购买其他店铺商品总金额(元)</p>
            </div>
          </div>
        </div>
      </a-col>

      <!-- 渠道货权信息 -->
      <a-col :span="24">
        <div class="block">
          <div class="block-title">渠道货权信息</div>
          <div class="statistical">
            <div class="statistical-item statistical-item1">
              <h4>{{ group.right.price }}</h4>
              <p>当前货权价格</p>
            </div>
            <div class="statistical-item statistical-item1">
              <h4>{{ group.right.wheel }}</h4>
              <p>当前货权第几轮</p>
            </div>
            <div class="statistical-item statistical-item1">
              <h4>{{ group.right.out_total }}</h4>
              <p>货权出货总量</p>
            </div>
            <div class="statistical-item statistical-item1">
              <h4>{{ group.right.out_price }}</h4>
              <p>货权出货总金额</p>
            </div>
            <div class="statistical-item statistical-item1">
              <h4>{{ group.right.buy_total }}</h4>
              <p>认购货权总量</p>
            </div>
            <div class="statistical-item statistical-item1">
              <h4>{{ group.right.buy_price }}</h4>
              <p>认购货权总金额</p>
            </div>
            <div class="statistical-item statistical-item1">
              <h4>{{ group.right.appointment_total }}</h4>
              <p>带票货权总量</p>
            </div>
            <div class="statistical-item statistical-item1">
              <h4>{{ group.right.appointment_price }}</h4>
              <p>带票货权总金额</p>
            </div>
          </div>
        </div>
      </a-col>

      <!-- 渠道用户信息 -->
      <a-col :span="24">
        <div class="block">
          <div class="block-title">渠道用户信息</div>
          <div class="statistical">
            <div class="statistical-item statistical-item1">
              <h4>{{ group.user.total }}</h4>
              <p>总用户</p>
            </div>
            <div class="statistical-item statistical-item1">
              <h4>{{ group.user.identity_1 }}</h4>
              <p>普通用户</p>
            </div>
            <div class="statistical-item statistical-item1">
              <h4>{{ group.user.identity_2 }}</h4>
              <p> 水感应大数据分析审核系统会员</p>
            </div>
            <div class="statistical-item statistical-item1">
              <h4>{{ group.user.identity_3 }}</h4>
              <p>经纪人</p>
            </div>
            <div class="statistical-item statistical-item1">
              <h4>{{ group.user.identity_4 }}</h4>
              <p>经纪公司</p>
            </div>
            <div class="statistical-item statistical-item1">
              <h4>{{ group.user.identity_5 }}</h4>
              <p>代理商</p>
            </div>
            <div class="statistical-item statistical-item1">
              <h4>{{ group.user.identity_6 }}</h4>
              <p>分公司</p>
            </div>
            <!-- <div class="statistical-item statistical-item1">
              <h4>{{ group.right.appointment_price }}</h4>
              <p>带票货权总金额</p>
            </div> -->
          </div>
        </div>
      </a-col>

    </div>
  </div>
</template>

<script>
import { getMiddlesUserDatas } from '@/api/statistical'
import { timeFix } from '@/utils/util'
import EditShop from '@/views/home/modules/EditShop'

export default {
  name: 'Home',
  data () {
    return {
      timeFix: timeFix(),
      base_info: {
        cover: '',
        description: '',
        name: ''
      },
      business: {},
      orders: {},
      group: {},
      ranking: [],
      shop: {
        today: '',
        user: '',
        total: '',
        sold: '',
        goods_up: ''
      }
    }
  },
  computed: {
    currentUser () {
      return {
        name: this.$store.getters.nickname,
        avatar: this.$store.getters.avatar
      }
    }
  },
  created () {
    this.getInfo()
  },
  mounted () {
  },
  methods: {
    getInfo () {
      getMiddlesUserDatas().then(res => {
        this.base_info = res.base_info
        this.business = res.business
        this.orders = res.orders
        this.ranking = res.ranking
        this.shop = res.shop
        this.group = res.group
      }).catch(err => {
        this.$notification.error(err)
      })
    },
    EditShop () {
      this.$dialog(EditShop,
        {
          on: {
            ok: () => {
              this.getInfo()
            }
          }
        },
        {
          title: '修改店铺信息',
          width: 500,
          maskClosable: true,
          closable: true,
          okText: '确认修改',
          cancelText: '取消'
        }
      )
    }
  }
}
</script>

<style lang='less' scoped>
@import "Index.less";
</style>