<!--
 * @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>
        <div class="login__read">
            <u-checkbox-group placement="row">
                <u-checkbox :checked='checked' @change="changeBtn"></u-checkbox>
            </u-checkbox-group>
            已阅读并同意<span>京东挪车牌用户协议（含隐私政策）</span>、<span>京东用户注册协议</span>、<span>京东隐私政策</span>和<span>联通账号认证服务条款</span>并使用本机号码登录
        </div>
        <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: '/pagesA/pages/index/index'
                });
            } else {
                uni.showToast({
                    title: "请阅读并同意京东挪车牌用户协议",
                    icon: 'none',
                    duration: 2000,
                });
            }
        },
    },
}
</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;

        span {
            color: #444;
            padding: 0 5rpx;
            text-decoration: underline #444;
        }
    }
}
</style>
