<template>
  <view class="login-select-index-container">
    <view class="logo-content"> </view>
    <view class="app-name">小发同城</view>
    <view class="app-title">商家中心</view>
    <view class="btn-content">
      <view class="btn-block">
        <u-button class="btn" :hairline="false" @click="skipuLogin()"
          >登录</u-button
        >
        <view class="btn-tips"> 已有门店&nbsp;&nbsp;直接登录 </view>
      </view>
      <view class="btn-block">
        <u-button class="btn btn-register" @click="skipuRegister()"
          >注册开店</u-button
        >
        <view class="btn-tips"> 新开门店&nbsp;&nbsp;前去注册</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState("user", ["ukey", "approvalStatus"]),
  },
  onShow() {
    if (this.ukey && [1, 2, 3].includes(this.approvalStatus)) {
      uni.navigateTo({ url: "/pages/audit/checkAudit" });
      return;
    }
    if (this.ukey && this.approvalStatus == 4) {
      uni.navigateTo({ url: "/pages/audit/shop1" });
      return;
    }
  },
  methods: {
    skipuLogin() {
      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
    skipuRegister() {
      uni.navigateTo({
        url: "/pages/register/register",
      });
    },
  },
};
</script>

<style lang="scss">
.login-select-index-container {
  overflow: hidden;

  position: relative;
  color: #333333;
  .logo-content {
    background-image: url("../../static/logo-2.png");
    background-size: 100% 100%;
    width: 228rpx;
    height: 228rpx;
    margin: 50% auto;
    margin-bottom: 32rpx;
  }

  .app-name {
    font-size: 72rpx;
    text-align: center;
  }

  .app-title {
    font-size: 40rpx;
    text-align: center;
    margin: 20rpx 0;
  }

  .btn-content {
    position: fixed;
    bottom: 14%;
    width: 100%;
    display: flex;
    justify-content: space-evenly;

    .btn-block {
      .btn {
        width: 280rpx;
        height: 80rpx;
        border: none;
      }

      .btn-register {
        background: #ffd161;

        &::after {
          border: none;
        }
      }

      .btn-tips {
        margin-top: 40rpx;
        font-size: 26rpx;
        text-align: center;
        color: #555555;
      }
    }
  }
}
</style>