<template>
	<JeepayCustomNavbar backIcon="closeempty" title="登录取认" backCtrl="back" />
  <view class="scan-content">
    <view class="computer">
      <image src="/static/iconImg/computer.svg" mode=""></image>
      <text>您正在登录商户管理系统网站</text>
    </view>
    <view class="btn confirm" @tap="codeOk('confirmed')" hover-class="touch-button ">确认登录</view>
    <view class="btn cancel" @tap="codeOk('canceled')" hover-class="touch-hover">取消登录</view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { $scanCodeLogin } from '@/http/apiManager.js'
import { onLoad } from '@dcloudio/uni-app'
import infoBox from '@/commons/utils/infoBox.js'
import go from '@/commons/utils/go.js'

const vdata = reactive({
	qrcodeNo : ''
})

onLoad((option) => {
  vdata.qrcodeNo = option.qrcodeNo
  
  // 已扫
  $scanCodeLogin(vdata.qrcodeNo, "scaned")
  
})

const codeOk = (val) => {
  $scanCodeLogin(vdata.qrcodeNo, val).then((res) => {
	  if(val == 'confirmed'){
		  return infoBox.showSuccessToast('登录成功')
	  }else{
		  return infoBox.showToast("已取消")
	  }
    }).then(() => {
    	go.back()
    })
}
</script>

<style scoped lang="scss">
.scan-content {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  .computer {
    margin-top: 260rpx;
    margin-bottom: 150rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    image {
      width: 200rpx;
      height: 200rpx;
    }
    text {
      line-height: 46px;
      font-size: 33rpx;
      color: #000000;
    }
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 360rpx;
    height: 110rpx;
    border-radius: 20rpx;
    background: #4dab68;
    font-size: 33rpx;
  }
  .confirm {
    color: #fff;
    background: $jeepay-bg-primary;
  }
  .cancel {
    margin-top: 35rpx;
    color: #666;
    background: transparent;
  }
}
.canceled {
  width: 50rpx;
  height: 50rpx;
}
</style>
