<template>
  <view class="login">
    <view class="refund-navbar">
      <u-navbar
        title=""
        :border-bottom="false"
        :background="background"
      ></u-navbar>
    </view>
    <view class="login-hd">
      <view class="a">验证码登录</view>
      <view class="b">若该手机号未注册，我们将自动为您注册</view>
    </view>
    <view class="login-bd">
      <view class="a"
        >+86<input v-model="phoneNum" type="tel" placeholder="请输入手机号"
      /></view>
      <view class="b">
        <input v-model="semCode" placeholder="请输入验证码" />
        <text @click="getCode" v-if="!showCountDown">获取验证码</text>
        <text v-if="showCountDown">{{ countdown }}</text>
      </view>
      <view class="c" style="display: flex; align-items: center">
        <u-checkbox
          active-color="#FF343C"
          v-model="isCheckout"
          style="margin-right: -20rpx"
        ></u-checkbox
        >同意<text @click="toTextPage(1)">《用户服务协议》</text>和<text
          @click="toTextPage(2)"
          >《隐私政策》</text
        >
      </view>
    </view>
    <view class="login-fd login-fd-on" @click="login">登录</view>
    <view class="" v-if="isCheckout">
      <mpWeiXinMobile :refereeId="refereeId"></mpWeiXinMobile>
    </view>
    <view
      class=""
      v-else
      style="
        font-size: 28rpx;
        color: #666;
        text-align: center;
        margin-top: 50rpx;
      "
      @click="login"
    >
      手机号快捷登录
    </view>
  </view>
</template>

<script>
import * as UserApi from "@/api/user";
import * as CaptchaApi from "@/api/captcha";
import mpWeiXinMobile from "./components/mp-weixin-mobile.vue";
import store from "@/store";
import { isEmpty } from "@/utils/util";
export default {
  components: {
    mpWeiXinMobile,
  },
  data() {
    return {
      isCheckout: false,
      showCountDown: false,
      currentIndex: 0,
      background: {
        background: `url(${this.$picUrl}/static/news/login-bg.png) center top no-repeat`,
        backgroundSize: "100% auto",
      },
      phoneNum: "",
      semCode: "",
      countdown: 60,
      countDownFun: null,
      code: "",
      refereeId: "",
    };
  },
  onLoad(o) {
    this.refereeId = o.refereeId;
  },
  methods: {
    toTextPage(n) {
      uni.navigateTo({
        url: "/pages/news1/text?pageFlag=" + n,
      });
    },
    validatePhoneNumber(phone) {
      // 定义手机号码的正则表达式
      var regExp = /^1[3456789]\d{9}$/;

      if (regExp.test(phone)) {
        return true; // 符合手机号码格式要求
      } else {
        return false; // 不符合手机号码格式要求
      }
    },
    getCode() {
      // 获取验证码
      const that = this;
      if (!that.validatePhoneNumber(that.phoneNum)) {
        uni.showToast({
          title: "请输入正确的手机号",
        });
        return;
      }
      that.showCountDown = !that.showCountDown;
      that.countDownFun = setInterval(() => {
        if (that.countdown >= 1) {
          that.countdown = that.countdown - 1;
        } else {
          that.showCountDown = false;
          that.countdown = 60;
          clearInterval(that.countDownFun);
        }
      }, 1000);
      CaptchaApi.sendSmsCaptcha({
        form: {
          mobile: that.phoneNum,
        },
      }).then((res) => {
        if (res.status == 200) {
          uni.showToast({
            title: res.message,
          });
        } else {
          uni.showToast({
            title: res.message,
          });
        }
      });
    },
    login() {
      let that = this;
      if (that.isCheckout == false) {
        that.$toast("请勾选用户协议");
        return;
      }
      // 登录
      if (!that.validatePhoneNumber(that.phoneNum)) {
        that.$toast("请输入正确的手机号");
        return;
      }
      if (that.semCode == "") {
        that.$toast("请输入验证码");
        return;
      }
      uni.login({
        provider: "weixin",
        success: function (res) {
          store
            .dispatch("Login", {
              smsCode: that.semCode,
              mobile: that.phoneNum,
              refereeId: that.refereeId,
              isParty: false,
              partyData: {},
              ucode: res.code,
              // refereeId: false
            })
            .then((res) => {
              uni.setStorageSync("token", res.data.token);
              that.$toast(res.message);
              that.getUserInfo();
              setTimeout(() => that.onNavigateBack(1), 2000);
            });
        },
		fail:function(){
			store
            .dispatch("Login", {
              smsCode: that.semCode,
              mobile: that.phoneNum,
              refereeId: that.refereeId,
              isParty: false,
              partyData: {},
            //   ucode: res.code,
              // refereeId: false
            })
            .then((res) => {
              uni.setStorageSync("token", res.data.token);
              that.$toast(res.message);
              that.getUserInfo();
              setTimeout(() => that.onNavigateBack(1), 2000);
            });
		}
      });
    },
    getUserInfo() {
      UserApi.info().then((result) => {
        uni.setStorageSync("userInfo", result.data.userInfo);
      });
    },
    onNavigateBack(delta = 1) {
      // 登录成功返回原页面
      const pages = getCurrentPages();
      if (pages.length > 1) {
        uni.navigateBack({
          delta: Number(delta || 1),
        });
      } else {
        this.$navTo("pages/index/index");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  background: #fffafb url(https://www.royaum.com.cn/static/news/login-bg.png)
    center top no-repeat;
  background-size: 100% auto;
  min-height: 100vh;

  &-hd {
    padding: 90rpx 75rpx 75rpx;
    overflow: hidden;

    .a {
      line-height: 80rpx;
      font-size: 40rpx;
      font-weight: 500;
      color: #000000;
    }

    .b {
      font-size: 28rpx;
      font-weight: 400;
      color: #5a5a5a;
      line-height: 50rpx;
    }
  }

  &-bd {
    padding: 0 75rpx;
    overflow: hidden;

    .a {
      padding: 20rpx 0;
      border-bottom: 1px solid #f2f2f2;
      display: flex;
      align-items: center;
      font-size: 32rpx;
      font-weight: 400;
      color: #212121;

      input {
        flex: 1;
        margin-left: 30rpx;
        line-height: 50rpx;
        border-left: 1px solid #c4c4c4;
        padding-left: 30rpx;
        font-size: 28rpx;
        color: #212121;
      }
    }

    .b {
      padding: 30rpx 0;
      border-bottom: 1px solid #f2f2f2;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #f3202a;

      input {
        flex: 1;
        margin-right: 30rpx;
        line-height: 50rpx;
        font-size: 28rpx;
        color: #212121;
      }
    }

    .c {
      padding: 28rpx 0;
      font-size: 28rpx;
      font-weight: 400;
      color: #a0a0a0;

      text {
        color: #ff343c;
      }
    }
  }

  &-fd {
    width: 680rpx;
    line-height: 88rpx;
    background: #ffbdba;
    border-radius: 88rpx;
    text-align: center;
    margin: 0 auto;
    margin-top: 120rpx;
    font-size: 28rpx;
    font-weight: 600;
    color: #ffffff;

    &-on {
      background-color: #ff343c;
    }
  }
}
</style>
