<template>
  <!-- 登录 -->
  <view class="">
    <view class="bgBox">
      <image src="/static/indexIc/loginBg.png" mode=""></image>
    </view>
    <view class="logo flexC">
      <image src="/static/indexIc/logo.png" mode=""></image>
    </view>
    <view class="btnBox flexC" @click="login" v-if="!agreeStatus">
      <image src="/static/indexIc/loginBtn.png" mode=""></image>
      微信账号一键登录
    </view>
    <view class="btnBox flexC" v-else>
      <image src="/static/indexIc/loginBtn.png" mode=""></image>
      微信账号一键登录
      <button open-type="getPhoneNumber" @getphonenumber="getphonenumber"></button>
    </view>
    <view class="agreeBox flexC">
      <view class="checkImage" @click="agree">
        <image v-if="!agreeStatus" src="/static/shopCarIc/checks.png" mode=""></image>
        <image v-else src="/static/shopCarIc/modeCheck.png" mode=""></image>
      </view>
      <view class="agree flexA">
        我已阅读并同意
        <view class="" @click="toRichText(4)">《用户协议》</view>
        和
        <view class="" @click="toRichText(5)">《隐私协议》</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { getLogin } from '@/api/'
const agreeStatus = ref(false) //是否勾选协议
const code = ref('') //登录参数code
onLoad(() => {
  // this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight //'状态栏的高度'
  if (uni.getStorageSync('token')) {
    uni.reLaunch({
      url: '/pages/index/index'
    })
  }
})
onShow(() => {
  getCode() //获取code
})
// 登录校验是否勾选协议
const login = () => {
  if (!agreeStatus.value)
    return uni.showToast({
      title: '请勾选协议',
      icon: 'none'
    })
}
// 获取data和iv
const getphonenumber = e => {
  if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
    uni.showToast({
      title: '您已取消授权',
      icon: 'none'
    })
  } else {
    getLogins(e.detail.encryptedData, e.detail.iv)
  }
}
// 获取code
const getCode = () => {
  uni.login({
    provider: 'weixin', //使用微信登录
    success: function (loginRes) {
      console.log(loginRes)
      code.value = loginRes.code
    }
  })
}

// 登录
const getLogins = async (data, iv) => {
  try {
    let params = {
      code: code.value, //string	是	code-wx.login的code
      encryptedData: data, //string	是	encryptedData
      iv: iv //string	是	iv
    }
    const res = await getLogin(params)
    uni.setStorageSync('token', res.token)
    uni.setStorageSync('userInfo', res)
    uni.reLaunch({ url: '/pages/index/index' })
    console.log('getLogin', res)
    // 保存数据
  } catch (err) {
    console.log('getLogin', err)
  }
}
// 富文本
const toRichText = e => {
  uni.navigateTo({
    url: `/pages/index/richText?type=${e}`
  })
}
// // 勾选协议
const agree = () => {
  agreeStatus.value = !agreeStatus.value
}
</script>

<style lang="scss">
.bgBox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;

  image {
    width: 100%;
    height: 100vh;
  }
}

.logo {
  width: 100%;
  height: 158rpx;
  margin-top: 480rpx;

  image {
    width: 156rpx;
    height: 158rpx;
  }
}

.btnBox {
  margin: 292rpx auto 60rpx;
  width: 646rpx;
  height: 88rpx;
  border-radius: 44rpx;
  opacity: 1;
  background: #fff;
  color: #fd7452ff;
  font-size: 32rpx;
  font-weight: 700;
  position: relative;

  image {
    margin-right: 12rpx;
    width: 48rpx;
    height: 38rpx;
  }

  button {
    position: absolute;
    background: transparent;
    width: 100%;
    height: 100%;
    color: #fd7452ff;
    font-size: 32rpx;
    font-weight: 700;

    &::after {
      border: none;
    }
  }
}

.agreeBox {
  margin-top: 502rpx;

  .checkImage {
    margin: 8rpx 8rpx 0 0;

    image {
      width: 28rpx;
      height: 28rpx;
    }
  }

  .agree {
    color: #fff;
    font-size: 24rpx;
  }
}
</style>