<!--
 * @Author: euzhi
 * @Description: 绑定账号
-->
<template>
<view class="appCotent">
    <div class="bindingLogin">
        <div class="login__logo">
            <image src="@/static/binding/logo.png">
        </div>
        <div class="binding__tips">
            绑定京东账号后，免费领取挪车码
        </div>
        <div class="binding__form">
            <view class="content">
                <active-form :formDate.sync="formData"></active-form>
            </view>
        </div>
        <view class="login__read">
			<view>
				<u-checkbox-group placement="row">
					<u-checkbox :checked='checked' @change="changeBtn"></u-checkbox>
				</u-checkbox-group>
			</view>	
			<view>
				已阅读并同意<span @click="goArticle(1)">《用户注册服务协议》</span>、<span @click="goArticle(2)">《京东汽车挪车牌隐私权政策》</span>
			</view>
        </view>
        <div>
            <view class="subform" @click="sub">确认绑定</view>
        </div>
    </div>
</view>
</template>

<script>
export default {
    data() {
        return {
            checked: false,
            formData: [{
                    id: "kjjns", //id必须唯一 可以是数字
                    placeholder: "请输入京东账号",
                    label: "中国(+86)", // 提示输入名
                    type: "text", //类型
                    rules: {
                        name: "realName", //字段名 即提交给后端的字段
                        value: "",
                        verify: false, //是否开启校验
                        errMess: "姓名未填写", //校验不通过的错误提示
                    },
                },
                {
                    id: "uisdfjks",
                    placeholder: "请输入验证码",
                    label: "",
                    type: "text",
                    //   oneKeyPhone:true,
                    rules: {
                        name: "yzm",
                        value: "", //字段值
                        verify: false,
                        errMess: "",
                    },
                },

            ],
        };
    },
    methods: {
        changeBtn() {
            this.checked = !this.checked;
        },
        // 提交表单
        sub() {
            if (this.checked) {
                // this.$vervify(this.formData); //表单校验 成功会继续往下走 失败抛出异常

                // const res = this.$submitForm(this.formData); //校验成功 获取表单值
                // console.log('表单对象 :>> ', this.formData);
                //   uni.showToast({
                //     title: "验证码过期",
                //     icon: 'error',
                //     duration: 2000,
                // });
                //跳转到首页
                uni.navigateTo({
                    url: '/pages/main'
                });
            } else {
                uni.showToast({
                    title: "请阅读并同意《用户注册服务协议》和《京东汽车挪车牌隐私权政策》",
                    icon: 'none',
                    duration: 2000,
                });
            }
        },
		// 跳转协议政策页面
		goArticle(index){
			let opts = { url: '', method: 'get' };
			if(index == 1){
				opts.url = "/app/user/registerAgreement"
			}else{
				opts.url = "/app/user/ofPrivacy"
			}
			this.http.httpTokenRequest(opts, {}).then(res => {
				if (res.data.code == 200) {
					let data = res.data.msg
					uni.setStorageSync("articelContent",data)
					uni.navigateTo({
					  url: '/pages/binding/article'
					});
				}
			})
		}
    },
}
</script>

<style lang="scss" scoped>
.bindingLogin {
    padding: 0 40rpx;

    .login__logo {
        padding-top: 80rpx;
        text-align: center;
        padding-bottom: 50rpx;

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

    .subform {
        margin-top: 60rpx;
        border-radius: 20rpx;
        height: 76rpx;
        background: url('@/static/binding/binding-btn.png') no-repeat;
        background-size: contain;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        opacity: 0.96;
        font-size: 32rpx;
        font-weight: 500;
    }

    .u-checkbox-group {
        display: inline-block !important;
    }

    /deep/.u-checkbox-group--row {
        display: inline-block !important;
    }

    .binding__tips {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #F88D28;
        padding-bottom: 30rpx;
    }

    .binding__form {
        height: 220rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
        border-radius: 20rpx;
        margin-bottom: 32rpx;
    }

    .login__read {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        line-height: 36rpx;
		display: flex;
		align-items: center;
		span {
		    color: rgb(0, 81, 255);
		}
    }
}
</style>
