program/src/pages/agent/index/index.vue

<template>
  <div id="agent_index_container">
    <div class="header">

      <!--      用户信息模块-->
      <van-row>

        <div class="userinfo padding-tb-sm">
          <van-col span="3" offset="2">
            <view class="cu-avatar lg"
                  :style="'background-image:url('+userinfo.avatar+');'"></view>
          </van-col>

          <van-col span="6" offset="1">
            <view class="label">
              <view class="text-bold">
                <text class="text-white text-lg">{{ userinfo.nickname }}</text>
              </view>
              <view class="padding-tb-sm">
                <text class="text-white text-sm">{{ userinfo.agent_name }}</text>
              </view>
            </view>
          </van-col>


        </div>
      </van-row>

      <!--      收益模块-->
      <div class="profit_container text-center">
        <view>
          <text class="text-normal padding">累计收益(元)</text>
        </view>
        <view>
          <text class="text-white text-bold text-sl text-price">{{ userinfo.profit }}</text>
        </view>
        <view>
          <text class="text-normal ">含待结算
            <text class="text-price">{{ userinfo.unsettle_account }}</text>
            元
          </text>
        </view>
      </div>


      <!--      订单、客户、邀请卡粗图-->
      <div class="profit_detail_contaienr text-center padding-top-lg">
        <van-row gutter="40">
          <van-col span="6" offset="3" @click="to_extend_order">
            <view>
              <text class="text-xxl text-white">{{ userinfo.orders_count }}</text>
            </view>
            <view>
              <text class="text-normal text-sm">累计订单</text>
            </view>
          </van-col>
          <van-col span="6" @click="to_customer">
            <view>
              <text class="text-xxl text-white">{{ userinfo.customer_count }}</text>
            </view>
            <view>
              <text class="text-normal text-sm">累计客户</text>
            </view>
          </van-col>
          <van-col span="6" @click="to_agent_invite_card">
            <view>
              <text class="text-xxl text-white">{{ userinfo.invite_card_count }}</text>
            </view>
            <view>
              <text class="text-normal text-sm">邀请卡库存</text>
            </view>

          </van-col>
        </van-row>
      </div>
          </div>


      <!--      提现金额-->
      <div class="withdraw_container flex justify-between align-center padding-lr" @click="to_agent_cal_center">
        <text class="text-white">可提现金额(元)</text>
        <text class="text-white withdraw_money">{{ userinfo.withdraw_money }}.00</text>
      </div>

      <!--      菜单列表-->
      <div class="menu">
        <van-cell title="今日收益(元)" value="0.98" is-link url="/pages/agent/income_cal/main">
          <van-icon name="balance-o" slot="icon" color="#4B3AB0" class="margin-lr-sm" size="20px"></van-icon>
        </van-cell>

        <van-cell title="今日订单" value="1" is-link>
          <van-icon name="notes-o" slot="icon" color="#4B3AB0" class="margin-lr-sm" size="20px"></van-icon>
        </van-cell>

        <van-cell title="今日新增客户" value="0.5" is-link>
          <van-icon name="contact" slot="icon" color="#4B3AB0" class="margin-lr-sm" size="20px"></van-icon>
        </van-cell>

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

<script>


export default {
  name: "agent_index_container",
  filter: {},
  components: {},
  data() {
    return {
      userinfo: {
        //头像
        avatar: "https://img.shuimuai.com/weixintouxiang.png",
        //昵称
        nickname: "小疯兔屁屁",
        //代理商名称
        agent_name: "区域代理商",
        //累计收益
        profit: 16824.50,
        //含待结算
        unsettle_account: 65.00,
        //  累计订单数量
        orders_count: 720,
        //  累计客户数量
        customer_count: 6,
        //  邀请卡库存
        invite_card_count: 2,
        //  提现金额
        withdraw_money: 328215.00
      },
    }
  },
  methods: {
    //  跳转推广订单
    to_extend_order() {
      mpvue.navigateTo({
        url: "/pages/agent/extend/orders/main"
      })
    },
    //  跳转推广客户
    to_customer() {
      mpvue.navigateTo({
        url: "/pages/agent/customer/main"
      })
    },
    //  跳转代理商结算中心
    to_agent_cal_center() {
      mpvue.navigateTo({
        url: "/pages/agent/settlement_center/index/main"
      })
    },
    //  邀请卡库存
    to_agent_invite_card() {
      mpvue.navigateTo({
        url: "/pages/agent/invite_card_inventory/main"
      })
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
@import "index.css";
</style>