chelvc-custom/src/pageMerchant/tabbar/store.vue

<template>
  <view class="shop">
    <view style="height: 85rpx" />
    <view class="shop__data">
      <view class="shop__data--left">
        <view class="text-title">店铺分</view>
        <view class="text-num">{{ listScore.score || '--' }}</view>
      </view>
      <view class="shop__data--right">
        <view>
          <view class="text-title">今日收入（元）</view>
          <view class="text-num">{{ listScore.amount || '0' }}</view>
        </view>
        <view class="line"></view>
        <view>
          <view class="text-title">今日订单（单）</view>
          <view class="text-num">{{ listScore.orderCount || '0' }}</view>
        </view>
      </view>
    </view>

    <view class="shop__note">
      <u-notice-bar :text="text1"></u-notice-bar>
    </view>

    <view class="shop__tools">
      <u-grid :border="false" col="5">
        <u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex" @click="handlerSkip(listItem, listIndex)">
          <image src="@/static/tools.jpg" />
          <text class="grid-text">{{ listItem.title }}</text>
        </u-grid-item>
      </u-grid>
    </view>

    <view class="shop__note" style="background-color: #fff">
      <u-cell-group>
        <u-cell size="large" :border="false" title="规制中心" isLink url=""></u-cell>
      </u-cell-group>
    </view>

    <view>
      <u-tabs :list="list1" lineWidth="40" lineColor="$uni-bg-color-primary" :activeStyle="{
          color: '#000',
          fontWeight: 'bold',
          fontSize: '32rpx',
          transform: 'scale(1.05)',
          marginBottom: '15rpx',
        }" :inactiveStyle="{
          color: '#333',
          fontSize: '30rpx',
          transform: 'scale(1)',
          marginBottom: '15rpx',
        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></u-tabs>

      <view style="background-color: #fff; height: 400rpx; margin-top: 20rpx"> 1111111111 </view>
    </view>
    <tabbar currentTab="merchantStore" />
  </view>
</template>

<script>
  import {
    getOrderQuantityApi
  } from '@/api/merchant/order';
  export default {
    data() {
      return {
        text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',

        list1: [{
            name: '商家社区',
          },
          {
            name: '活动中心',
          },
          {
            name: '商品优惠',
          },
        ],

        list: [{
            title: '店铺管理',
          },
          {
            title: '顾客评价',
          },
          {
            title: '商品核销',
          },
          {
            title: '商品优惠',
          },
          {
            title: '经营数据',
          },
          {
            title: '我的团队',
          },
          {
            title: '活动中心',
          },
          {
            title: '当前佣金',
          },
          {
            title: '商家社区',
          },
          {
            title: '预约列表',
          },
        ],
        listScore: {},
        merchantId: '',
      };
    },
    created() {
      // 获取商家id
      let merchantInfo = this.$store.state.data.merchantInfo;
      this.merchantId = merchantInfo.merchant.id;
    },

    mounted() {
      // 查商家端查询订单量以及今日收入
      this.getOrderQuantity(this.merchantId);
    },

    methods: {
      // 点击跳转
      handlerSkip(item, index) {
        console.log('index', index);
        switch (index) {
          case 0:
            uni.navigateTo({
              url: '/pages/merchant/store/shopManage',
            });
            break;
          case 1:
            uni.navigateTo({
              url: '/pages/merchant/store/evaluateManagement',
            });
            break;
          case 3:
            uni.navigateTo({
              url: '/pages/merchant/store/couponManage',
            });
            break;
          case 5:
            uni.navigateTo({
              url: '/pages/merchant/store/myTeam',
            });
            break;
          case 9:
            uni.navigateTo({
              url: '/pages/merchant/store/appointList',
            });
            break;
        }
      },
      async getOrderQuantity(id) {
        let res = await getOrderQuantityApi(id);
        if (res.code === "OK") {
          this.listScore = res.data
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .text-title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
  }

  .text-num {
    font-size: 40rpx;
    font-weight: bold;
    color: $uni-bg-color-primary;
  }

  .shop {
    min-height: calc(100vh - 80rpx);
    background-color: $uni-bg-color-page;
    padding-top: 80rpx;

    &__data {
      display: flex;
      text-align: center;

      &--left {
        flex: 1;
        padding: 30rpx 20rpx;
        background-color: $uni-bg-color;
        margin-right: 20rpx;
        border-radius: $uni-border-radius-base;
      }

      &--right {
        flex: 3;
        display: flex;
        justify-content: space-around;
        padding: 30rpx 20rpx;
        background-color: $uni-bg-color;
        border-radius: $uni-border-radius-base;

        .line {
          width: 2rpx;
          height: 65%;
          margin-top: 35rpx;
          background-color: #f5f5f5;
        }
      }
    }

    &__note {
      margin: 30rpx 0;
    }

    /* 工具 */
    &__tools {
      padding: 20rpx 10rpx;
      background-color: $uni-bg-color;
      border-radius: $uni-border-radius-base;

      image {
        width: 100rpx;
        height: 100rpx;
        display: block;
        margin: 15rpx 0 25rpx 0;
      }
    }
  }

  ::v-deep .u-cell__title-text {
    border: 0;
    font-weight: bold;
    font-size: 36rpx;
  }
</style>