<script setup lang="ts">
	/* 登录 */
import { log } from 'console';
import {ref} from 'vue'
import {apiImageUrl} from '../../API/api'
let identify = ref('tom')
	const loginUser = (code : any) => {
		uni.request({
			url: apiImageUrl+'/api/Alipay/parseCode',
			method: 'GET',
			data: {
				authcode: code
			},
			/* data: JSON.stringify({ // 尝试将 data 转换为字符串形式
						authcode: code
					}),
					header: { 'content-type': 'application/json' }, */
			success: (res : any) => {
				console.log(res, "是否有code")
				console.log(res.data)
				if (res.data.code == 0) {
					uni.showToast({
						title: '登录成功',
						duration: 2000
					})

					uni.removeStorageSync('cookie');
					uni.setStorageSync('userInfo', res.data.data)
					uni.setStorageSync("cookie", res.header['Set-Cookie']);
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					uni.showToast({
						icon: 'error',
						title: "登录失败，请联系管理员"
					})
					return
				}

			}
		})
	}
	const login = () => {
		uni.login({
			scopes:'auth_user',
			success: function (loginRes) {
				if (loginRes.code !== null) {
					console.log("获取code:" + loginRes.code)
					loginUser(loginRes.code);
					uni.setStorageSync('identify', identify.value);
				} else {
					console.log("code为空");
				}
			}
		})
	}
const onButton=()=>{
	my.request({
		url:apiImageUrl+'/api/Alipay/trade',
		method:'GET',
		success:function(result){
			console.log(result);
			my.tradePay({
				tradeNO:result.data.data,
				
				success:(res)=>{
					console.log('成功调用to')
					my.navigateTo({
					  url:'/pages/index/index',
					})
					console.log('成功');
					console.log(res);
				},
				
				fail:(res) =>{
					my.alert({
						content:JSON.stringify(res),
					})
					console.log('失败');
					console.log(res);
				} 
				
			})
			console.log(result.data.data);
	}
	})
} 
</script>

<template>
  <view class="viewport">
    <view class="logo">
      <image src="../../static/logo2.png"></image>
    </view>
    <view class="login">
	  <button @click="login" class="button phone">支付宝账号一键登录</button>
      <view class="extra">
        <view class="caption">
          <text>其他登录方式</text>
        </view>
        <view class="options">
		  <navigator url="../index/index" hover-class="none"  class="icon icon-phone" open-type="getPhoneNumber">
		    <text class="icon icon-phone"></text>
		    模拟快捷登录
		  </navigator>
        </view>
      </view>
      <view class="tips">登录/注册即视为你同意《服务条款》和《校快送隐私协议》</view>
    </view>
  </view>
   <button @click="onButton">支付按钮</button>
</template>

<style lang="scss">
page {
  height: 100%;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20rpx 40rpx;
}

.logo {
  flex: 1;
  text-align: center;

  image {
    width: 220rpx;
    height: 220rpx;
    margin-top: 15vh;
  }
}

.login {
  display: flex;
  flex-direction: column;
  height: 60vh;
  padding: 40rpx 20rpx 20rpx;

  .input {
    width: 100%;
    height: 80rpx;
    font-size: 28rpx;
    border-radius: 72rpx;
    border: 1px solid #ddd;
    padding-left: 30rpx;
    margin-bottom: 20rpx;
  }

  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;
    font-size: 28rpx;
    border-radius: 72rpx;
    color: #fff;

    .icon {
      font-size: 40rpx;
      margin-right: 6rpx;
    }
  }

  .phone {
    background-color: #4095e5;
  }

  .wechat {
    background-color: #4095e5;
  }

  .extra {
    flex: 1;
    padding: 70rpx 70rpx 0;

    .caption {
      width: 440rpx;
      line-height: 1;
      border-top: 1rpx solid #ddd;
      font-size: 26rpx;
      color: #999;
      position: relative;

      text {
        transform: translate(-40%);
        background-color: #fff;
        position: absolute;
        top: -12rpx;
        left: 50%;
      }
    }

    .options {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 70rpx;

      button {
        padding: 0;
        background-color: transparent;
      }
    }

    .icon {
      font-size: 24rpx;
      color: #444;
      display: flex;
      flex-direction: column;
      align-items: center;

      &::before {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 6rpx;
        font-size: 40rpx;
        border: 1rpx solid #444;
        border-radius: 50%;
      }
    }
  }
}

.tips {
  position: absolute;
  bottom: 80rpx;
  left: 20rpx;
  right: 20rpx;
  font-size: 22rpx;
  color: #999;
  text-align: center;
}
</style>
