saas_manager/pages/index/index.vue

<template>
  <view>
    <view v-if="isLogin && userInfo" class="imgs_bg">
      <view class="infos" @click="to('/pages/profile/index')">
        <image
          :src="
            userInfo.avatar
              ? $method.splitImgHost(userInfo.avatar, true)
              : defaultHead
          "
        ></image>
        <text>{{ userInfo.realname }}</text>
      </view>
      <view class="profit">
        <view class="profit-commis fl_b">
          <view class="profit-commis-money">{{
            (userInfo.cash + userInfo.usedCash + userInfo.freezeCash) | toFixed
          }}</view>
          <view class="profit-commis-btn" @click="to('/pages/cashout/index')"
            >提现</view
          >
        </view>
        <text>总佣金</text>
        <view class="profit-embody fl_b">
          <view>可提现：{{ userInfo.cash | toFixed }}元</view>
          <view>已提现：{{ userInfo.usedCash | toFixed }}元</view>
        </view>
      </view>
      <view class="about">
        <view
          class="fl_b about_item"
          @click="to(item.path)"
          v-for="(item, idx) in list"
          :key="idx"
        >
          <view class="fl">
            <image src="../../static/image/icon_partake.png" mode="" />
            <text>{{ item.title }}</text>
          </view>
          <image src="../../static/image/icon_more.png" mode="" />
        </view>
      </view>
      <view class="logout" @click="logout">退出</view>
    </view>
    <view class="login_wrap" v-if="!isLogin">
      <view class="login_text">欢迎来到业务员平台</view>
      <view class="login_text">您还没有登录哦~</view>
      <u-button
        class="c_btn loginBtn"
        text="立即登录/注册"
        @click="jumpLogin"
      ></u-button>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      isLogin: false,
      defaultHead: require("../../static/image/defhead.png"),
      list: [
        {
          title: "活动参与",
          icon: "../../static/image/icon_partake.png",
          path: "/pages/actlist/index",
        },
        {
          title: "佣金收益",
          icon: "../../static/image/icon_profit.png",
          path: "/pages/commission/index",
        },
      ],
    };
  },
  onLoad(option) {},
  onShow() {
    this.isLogin = this.$method.isLogin();
    if (this.isLogin) {
      !this.userInfo && this.$store.dispatch("getUserInfo");
    }
  },
  methods: {
    logout() {
      this.$store.commit("EXIT");
      this.isLogin = false;
    },
    jumpLogin() {
      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
    to(path) {
      uni.navigateTo({
        url: path,
      });
    },
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
};
</script>
<style>
page {
  background-color: #f6f7fb;
}
</style>
<style scoped lang="scss">
.login_wrap {
  text-align: center;
  margin-top: 256rpx;
  .login_text {
    &:nth-of-type(1) {
      font-weight: bold;
      color: #222222;
      font-size: 48rpx;
    }
    &:nth-of-type(2) {
      font-weight: 500;
      color: #666666;
      font-size: 32rpx;
      margin: 32rpx 0 160rpx;
    }
  }

  .loginBtn {
    width: 86%;
    margin: 0 auto;
  }
}
.imgs_bg {
  padding: 0 32rpx;
  box-sizing: border-box;
  width: 100%;
  height: 429rpx;
  padding-top: 60rpx;
  background: linear-gradient(180deg, #3f8dfd 49%, rgba(0, 105, 255, 0) 100%);
  .infos {
    display: flex;
    align-items: center;
    image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
    }
    text {
      font-weight: bold;
      color: #ffffff;
      font-size: 36rpx;
      padding-left: 24rpx;
    }
  }
  .profit {
    margin-top: 48rpx;
    background: url("../../static/image/profitbg.png") no-repeat;
    background-size: 100% 100%;
    padding: 40rpx 40rpx 50rpx;
    color: #2465c1;
    .profit-commis {
      font-size: 32rpx;
      .profit-commis-money {
        font-size: 72rpx;
      }
      .profit-commis-btn {
        width: 152rpx;
        height: 70rpx;
        background: #ffffff;
        border-radius: 120rpx;
        text-align: center;
        line-height: 70rpx;
      }
    }
    .profit-embody {
      margin-top: 56rpx;
      color: #5f83b8;
      font-size: 28rpx;
    }
  }
  .about {
    background: #ffffff;
    padding: 32rpx;
    margin-top: 32rpx;
    border-radius: 16rpx;
    .about_item {
      margin-bottom: 48rpx;
      &:last-child {
        margin-bottom: 0;
      }
      view {
        image {
          width: 56rpx;
          height: 56rpx;
        }
        text {
          padding-left: 20rpx;
          color: #24263d;
          font-weight: bold;
          font-size: 32rpx;
        }
      }
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}

.logout {
  text-align: center;
  font-size: 32rpx;
  margin-top: 56rpx;
  font-weight: bold;
  color: #3f8dfd;
}
</style>