app/pages/commission/index.vue

<!-- 分销中心  -->
<template>
  <s-layout navbar="inner" class="index-wrap" title="分销中心" :bgStyle="bgStyle">
    <!-- 分销商信息 -->
    <commission-info />
    <!-- 账户信息 -->
    <account-info />
    <!-- 菜单栏 -->
    <commission-menu />
    <!-- 分销记录 -->
    <commission-log />
    <!-- 弹框 -->
    <commission-condition :error="state.error" :errorData="state.errorData" />

    <!-- 权限 -->
    <commission-auth :error="state.error" @getAgentInfo="getAgentInfo" />
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onShow } from '@dcloudio/uni-app';
  import { computed, reactive } from 'vue';
  import commissionInfo from './components/commission-info.vue';
  import accountInfo from './components/account-info.vue';
  import commissionLog from './components/commission-log.vue';
  import commissionMenu from './components/commission-menu.vue';
  import commissionAuth from './components/commission-auth.vue';
  import commissionCondition from './components/commission-condition.vue';

  const state = reactive({
    error: 0,
    errorData: {},
    config: {
      background: '/storage/default/20220704/29ac76a3c9d0d983200d612e45a052ca.png',
    },
  });

  const agentInfo = computed(() => sheep.$store('user').agentInfo);

  const bgStyle = {
    color: '#F7D598',
  };

  async function getAgentInfo() {
    const { error, data } = await sheep.$store('user').getAgentInfo();
    if (error !== 0) {
      state.error = error;
      state.errorData = data;
    }
  }
  onShow(() => {
    getAgentInfo();
  });
</script>

<style lang="scss" scoped>
  :deep(.page-main) {
    background-size: 100% 100% !important;
  }
</style>