<template>
  <view class="bg">
    <view class="formbox" v-if="form.perId">
      身份证号：{{form.idcCode}}
    </view>
    <view class="formbox" v-else>
      <view>
        <view class="round-input-item">
          <uni-easyinput :styles="inputstyle" placeholder="身份证" v-model="form.idcCode" />
        </view>
      </view>
      <view class="flex-item">
      </view>
      <view class="center-item">
        <button @click="handleBind" class="btn-red">绑定个人会员</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  ref
} from 'vue'

import {
  onLoad
} from '@dcloudio/uni-app'
import config from '@/config.js'
import {
  bindIdcCode
} from '@/common/login.js'


const app=getApp()
const form = ref({})

let path = '/pages/myCenter/index';
onLoad((option) => {
  if (option.path) {
    path = decodeURIComponent(option.path)
  }
  
  form.value=app.globalData.userInfo
})

function handleBind() {
  if (!form.value.idcCode) {
    uni.showToast({
      title: '身份证号不能为空',
      icon: 'none'
    })
    return
  }
  
  bindIdcCode(form.value.idcCode)
    .then((res) => {
      uni.redirectTo({
        url: path
      })
    })
}
</script>

<style scoped lang="scss">
	.bg{background: linear-gradient(60deg,#ad1820 50%,#044a9f 50%);padding: 1px;height: 100vh;overflow: hidden;}
	.formbox {
		background: #fff;
		width: 700rpx;
		padding: 50rpx;box-sizing: border-box;
		margin: auto;
		border-radius: 20rpx;
	}
	.logoView {
		/* margin: 20vh 0; */
	}

	.logo {
		width: 420rpx;
		height: 179rpx;
		margin: 60rpx auto 60rpx;
		display: block;
	}

	.h1 {
		font-size: 36rpx;
		color: #000000;
		text-align: center;
	}

	.start {
		margin: 0 auto 80rpx;
		font-size: 30rpx;
		color: #fff;
		height: 80rpx;
		width: 480rpx;
		border-radius: 40rpx;
		background: #44A92F;
	}

	.agreeArea {
		text-align: center;
	}

	.agreeArea label {
		font-size: 26rpx;
	}

	.agreeArea label text {
		color: #00C176;
	}

	.tip {
		margin: 30rpx 0 0;
		font-size: 20rpx;
		color: #181818;
	}

	.h3 {}
	.round-input-item {
		overflow: hidden;
		background: RGBA(247, 247, 248, 1);
		border-radius: 40rpx;
		padding: 0 0 0 30rpx;
		height: 80rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
	
		image {
			width: 180rpx;
			height: 80rpx;
	
			&.icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 16rpx;
			}
		}
	
		input {
			border-left: 1rpx solid RGBA(214, 216, 219, 1);
			padding: 0 0 0 20rpx;
			font-size: 30rpx;
		}
	
		input::-webkit-input-placeholder {
			color: RGBA(158, 166, 174, 1);
			font-size: 30rpx;
		}
	
		input::placeholder {
			color: RGBA(158, 166, 174, 1);
			font-size: 30rpx;
		}
	
		input::-moz-placeholder {
			color: RGBA(158, 166, 174, 1);
			font-size: 30rpx;
		}
	
		text {
			font-size: 28rpx;
			color: #014A9F; padding: 0 20rpx;
		}
		
	}
	
</style>