<template>
    <main class="container">
        <section class="layout-box box-shadow">
            <div class="accont-title clearfix">
                <h3>缴税/付款</h3>
            </div>
            <div class="alter-mode clearfix">
                <div class="alter-mode-reset alter-mode-box">
                    <img src="~assets/images/icon-payment-rate.png" alt />
                    <h2>VAT缴税</h2>
                    <p class="notice">为您提供方便快捷的缴费方案</p>
                    <router-link to="/payment/vat" class="btn-reg">立即缴税</router-link>
                </div>
                <div class="alter-mode-manual alter-mode-box">
                    <img src="~assets/images/icon-payment.png" alt />
                    <h2>供应商付款</h2>
                    <p class="notice">向您的供应商支付货款</p>
                    <router-link to="/center/setting/phone/manual" class="btn-reg">立即付款</router-link>
                </div>
            </div>
            <el-dialog
                width="750px"
                :visible.sync="innerVisibleVat"
                append-to-body
                :before-close="closeDialog"
            >
                <div slot="title" class="header-title">
                    <h3>出口电商跨境收款协议——VAT付款补充协议</h3>
                </div>
                <el-scrollbar
                    wrapClass="vat-container"
                    viewClass="vat-content"
                    wrapStyle="color:'#fff';fontSize:'16px';"
                    viewStyle="color:'#fff';fontSize:'16px';"
                    :native="false"
                    :noresize="true"
                >
                    <div class="vat-agreement">
                        <h3>鉴于：</h3>
                        <p>1.商户（简称：商户或您）为在国外电商平台上开展进出口贸易的贸易商且已与JSTRANSFER各实体（简称JSTRANSFER）签有出口电商跨境收款协议（“跨境收款协议”），使用JSTRANSFER的跨境收款服务为其接收进出口贸易款项（“跨境收款资金”）。</p>
                        <p>
                            2.商户希望使用JSTRANSFER所提供的VAT付款服务将其委托JSTRANSFER或JSTRANSFER的关联机构代为收取的跨境收款资金用于向
                            <b>欧洲地区（包括英国）的增值税主管机关（“VAT机关”）缴纳与其所从事的进出口贸易业务相关的增值税（“VAT”）</b>，且JSTRANSFER愿意向商户提供该等服务（“VAT付款服务”）。
                        </p>
                        <p>3.本协议所述JSTRANSFER各实体包括：JSTRANSFER US INC、JS Group Holdings limited、北京源奉济生网络科技有限公司。</p>
                        <p>有鉴于此，基于平等互利、共同发展的原则，JSTRANSFER和商户就VAT付款合作事宜达成如下补充协议：</p>
                        <h3>一. VAT付款服务</h3>
                        <p>1.JSTRANSFER通过与JSTRANSFER合作的VAT付款合作企业（ “VAT付款合作企业”）以及境内/境外合作银行（“合作银行”）的合作为您提供VAT付款服务，包括在收到您的跨境收款资金后，按照您的VAT付款指令及相应的VAT账单（合称为“VAT付款指令”），通过境内外合作银行汇兑（如有需要）后，经由合作银行汇入您指定的VAT机关的银行账户。</p>
                        <p>2.您保证，您使用本服务仅用来支付真实的与您所从事的跨境贸易相关的VAT账单，您使用本服务以及您使用本服务开展的跨境贸易符合贸易相关所在地的法律法规要求。您不得将本补充协议项下的服务用于除前述VAT账单支付外的其他用途，包括但不限于支付与非您本人进行或非以您为最终受益人的跨境贸易相关的VAT账单的支付等其他用途。</p>
                        <p>
                            3.JSTRANSFER将自主决定VAT付款服务的业务规则（包括但不限于可使用VAT付款服务所支付的签发VAT账单之VAT机关的范围/国别），并按照其风控和合规规则决定可以使用跨境付款服务的客户标准。
                            <b>您了解并同意JSTRANSFER可以按照业务需要自行修改跨境付款服务的相关规则或决定终止VAT付款服务，并于JSTRANSFER的相关平台上进行公布，若您不同意JSTRANSFER的相关修改，请您停止使用JSTRANSFER的VAT付款服务，您继续使用该服务即视为您无条件同意JSTRANSFER的相应修改。</b>
                        </p>
                        <p>4.您以点击确认或勾选或以其他形式签署本补充协议，即意味着您与同VAT付款合作企业之间也形成代理服务关系，您不再单独与VAT付款合作企业签署协议。您知晓并同意，VAT付款合作企业将与JSTRANSFER合作，作为您的付款代理人，通过合作银行将跨境收款资金进行汇兑（如需要）并将相应资金转入您所提供的VAT账单中所指定的VAT机关的银行账户。</p>
                        <p>
                            5.您使用JSTRANSFER的跨境付款服务，可使用您持有的JSTRANSFER收款账户余额（“账户余额”）或结合JSTRANSFER合作持牌支付机构的银行卡支付服务（“银行卡支付”）通过JSTRANSFER向您指定的VAT机关支付相应的VAT费用。若您选择通过JSTRANSFER合作的持牌支付机构的银行卡支付服务支付您的服务方服务费，JSTRANSFER合作的持牌支付机构将与JSTRANSFER进行合作，根据您的授权和指令于您在中华人民共和国境内开立的银行账户（以下简称“中国银行卡”）内扣除以人民币计价的相应服务费
                            <b>（该银行卡支付服务的开通和适用场景届时以JSTRANSFER界面展示的内容为准，JSTRANSFER于此不保证您随时有权利使用该银行卡支付服务）</b>。您知晓并同意，JSTRANSFER合作的持牌支付机构实际扣除的VAT金额是依据JSTRANSFER提供的汇率换算成人民币后的金额。您进一步知晓，为使用JSTRANSFER合作的持牌支付机构的银行卡支付服务，您需与JSTRANSFER合作的持牌支付机构另行订立《银行卡支付服务协议》，具体请参照JSTRANSFER的相关支付界面。
                        </p>
                        <p>6.您知晓并同意JSTRANSFER将您的身份信息及交易信息实时同步到VAT付款合作企业及合作银行，您也同意VAT付款合作企业及合作银行为您办理按照相关法律法规规定需要履行的手续。</p>
                        <p>
                            7.JSTRANSFER在收到您的VAT付款指令并在收到相关跨境收款资金后将在合理时间内（一般情况下为一到三个工作日）把该等资金向VAT机关汇出。如果JSTRANSFER收到您的VAT付款指令的时间为银行非工作时间，则JSTRANSFER将顺延到下一个银行工作日的工作时间进行操作。
                            <b>同时您理解并同意，由于VAT付款为JSTRANSFER通过其他第三方机构完成，VAT付款服务并不是实时到账的服务。您应当合理安排您的账期，及时提交与您的VAT账单相关的VAT付款指令，JSTRANSFER将在您的国际收款账户中有足够的资金以支付您的VAT账单的前提下，在合理时间内执行您的VAT付款指令，但JSTRANSFER对您的VAT账单之付款的完成时间不做任何承诺，且不就该等完成时间在此向您做任何陈述或保证。若非因JSTRANSFER之过失或过错导致VAT账单之付款延期从而导致的任何损失或罚款将由您自己独自承担。</b>
                        </p>
                        <p>8.您的VAT付款指令一旦发出不可撤销，且与您的该等VAT付款指令相对应的款项将不得提回您个人或与您相关联的国际收款账户，但JSTRANSFER按本补充协议的约定转回该等款项的情形除外。</p>
                        <p>9.若相关VAT机关提出要求的，JSTRANSFER将可能暂停执行您的特定的VAT付款指令，并要求您向JSTRANSFER提供额外的信息以证明您的身份、地址或其他信息以满足相关VAT机关的要求。若您无法提供该等信息，JSTRANSFER可以拒绝执行您的该等VAT付款指令。若相关资金已经汇兑，JSTRANSFER可以将已汇兑之款项汇兑回结算资金的初始收款币种后退回至您的国际收款账户。因该等结算资金前后两次汇兑之间的汇率差而可能产生的汇兑损失以及相关的银行费用应由您自己承担。</p>
                        <h3>二. 您的特定义务</h3>
                        <p>1.您知晓并同意，JSTRANSFER将按照您所指定的币种和金额支付您的VAT付款指令。您将自行处理您与VAT机关之间有关VAT账单的支付而产生的任何纠纷或争议，且您将就任何该等纠纷或争议而导致的JSTRANSFER或其任何雇员、官员、代理人或关联公司所遭受的任何损失或损害向JSTRANSFER或其任何雇员、官员、代理人或关联公司进行补偿并使其免受其害。</p>
                        <p>2.在您使用VAT付款服务时，您有义务按照VAT账单的要求提供VAT付款所需的所有信息，并保证该等信息的真实性、完整性和正确性，该等信息包括但不限于银行名称、银行账户名称及账号、特定的VAT参考文字和/或编号，以及VAT机关所指令的VAT付款金额及币种。若因您在VAT付款指令中所提供的任何信息的不完整或不准确而导致的任何VAT付款的失败或相关款项付入错误的银行账户，JSTRANSFER及VAT付款合作企业均将不承担任何责任。</p>
                        <h3>三. 付款服务费用及服务规则</h3>
                        <p>1.您知晓并同意，JSTRANSFER将就其在本补充协议项下所提供的 VAT付款服务向您收取相关的服务费用，其所适用的费率将由JSTRANSFER在其网站予以公布，并可能不时进行修改。您对VAT付款服务的使用或继续使用即表示您同意该等费率或修改后的费率。若您不同意该等费率或费率修改，请及时联系JSTRANSFER以停止VAT付款服务。</p>
                        <p>
                            您进一步知晓并同意，就您的每一笔VAT付款交易，JSTRANSFER将在从您的国际收款账户中扣收相关VAT付款服务费后，按照您的VAT付款指令将相关金额支付给您所指定的VAT机关。若您国际收款账户中留存款项金额小于该等VAT付款额加上VAT付款服务费的总金额的，JSTRANSFER有权拒绝执行该等VAT付款指令，反馈支付失败并作废该等指令。若您仍希望使用JSTRANSFER的VAT付款服务来支付前述失败指令相关VAT账单的，您应当重新发起VAT付款指令。
                            若您对JSTRANSFER扣收的任何服务费的金额有任何疑义的，请及时与JSTRANSFER联系以进行对账和/或账务更正。
                        </p>
                        <p>2.您知晓并同意，上述资金的汇兑所适用的汇率（适用于单笔手续费计算的汇率除外）为JSTRANSFER进行实际汇兑时JSTRANSFER的境外合作银行或合作伙伴所提供的外汇收购价。</p>
                        <p>3.您在此确认并同意，您将独自承担与VAT付款资金的转账所相关的而由合作银行所收取的所有银行费用，并授权JSTRANSFER自您的国际收款账户中扣收该等费用。</p>
                        <h3>四. 保密条款和知识产权</h3>
                        <p>1.双方及其关联机构在合作期内获得的个人用户信息及本补充协议内容均为保密信息，保密信息包括但不限于本补充协议项下各手续费的金额、费率及支付方式、结算方式、接口技术、安全协议及证书，以及本补充协议的存在等，任何一方均应当对保密信息严格保密，且仅为本合作之目的使用，未经对方事先书面同意，不得向任何第三方透露保密信息，否则视为违约。</p>
                        <p>2.JSTRANSFER按照本补充协议约定向您提供的任何系统、软件、技术、商标、标识的知识产权均归属于JSTRANSFER，未经JSTRANSFER事先书面同意，您不得擅自将该等知识产权用于其他用途、亦不得以任何形式对该等知识产权进行重新编译或以其他形式侵犯该等知识产权，否则视为违约。</p>
                        <p>3.本条不因本补充协议的终止而终止。</p>
                        <h3>五. 期限和终止</h3>
                        <p>本补充协议自您选择接受本补充协议并受本补充协议之约束之日（“生效日”）起有效，其有效期与跨境收款协议的有效期保持一致，JSTRANSFER有权按照本补充协议的约定提前终止本补充协议。为本条款之目的，您接受并使用JSTRANSFER在本补充协议项下所提供的服务即表明您接受本补充协议的所有条款并愿意受其约束。若您对本补充协议项下的任何条款有任何异议的，请停止使用本补充协议项下之服务并按照本补充协议之约定及时通知JSTRANSFER以终止本补充协议。</p>
                        <h3>六. 其他</h3>
                        <p>1.补充协议</p>
                        <p>本补充协议之条款和条件构成双方之间就本补充协议的主题事项所达成的对跨境收款协议的补充并将取代之前双方就该等事项所达成的所有书面或口头的陈述、承诺或协议。跨境收款协议中非特定适用于跨境收款服务的条款和条件将同时适用于本补充协议项下的VAT付款服务，若该等约定与本补充协议之条款有任何冲突或不一致的，以本补充协议的约定为准。本补充协议连同跨境收款协议一起构成您与JSTRANSFER之间就VAT付款服务而达成的完整协议。</p>
                        <p>2.您同意本补充协议无需经您书面签署。</p>
                        <p>您对本补充协议项下所提供之服务的使用将被视为您对本补充协议项下之条款和条件的接受并愿意受其约束。您同意不会仅因为本补充协议未经您书面签署而质疑本补充协议对您的有效性和可执行性。您进一步同意，如JSTRANSFER要求，您将配合JSTRANSFER签署所有与本补充协议项下之服务所相关的任何文件。</p>
                    </div>
                </el-scrollbar>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                    <el-form-item prop="agreement" class="check-box">
                        <el-checkbox name="type" v-model="ruleForm.agreement"></el-checkbox>
                        <p>
                            我已阅读并同意
                            <router-link
                                to="/agreement/privacyPolicy"
                                target="_blank"
                            >《出口电商跨境收款协议-VAT付款补充协议》</router-link>
                        </p>
                    </el-form-item>
                    <el-form-item class="btn-reg">
                        <el-button
                            type="primary"
                            @click="submitForm('ruleForm')"
                            :loading="submitLoading"
                        >确认</el-button>
                        <el-button @click="closeDialog">返 回</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </section>
    </main>
</template>

<script>
export default {
    name: "paymentIndex",
    components: {},
    methods: {
        closeDialog() {
            this.innerVisibleVat = false;
        },
        submitForm(formName) {
            this.submitLoading = true;
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.submitLoading = false;
                } else {
                    this.submitLoading = false;
                    return false;
                }
            });
        }
    },
    data() {
        return {
            ruleForm: {
                agreement: []
            },
            rules: {
                agreement: [
                    {
                        type: "array",
                        required: true,
                        message: "请阅读服务协议并选中",
                        trigger: "change"
                    }
                ]
            },
            innerVisibleVat: false,
            submitLoading: false
        };
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.container {
    background: #f7f7f7;
}
main {
    display: block;
    margin-top: 60px;
    padding: 30px 0;
    min-height: calc(100vh - 184px);
}
.layout-box {
    background: #fff;
}
.alter-mode-box {
    float: left;
    width: 50%;
    margin: 30px 0;
    padding: 0 100px;
    text-align: center;
    box-sizing: border-box;
    h2 {
        margin-top: 20px;
        font-size: 18px;
        font-weight: normal;
        color: #333;
    }
    .notice {
        margin: 12px 0 50px;
        line-height: 24px;
        font-size: 14px;
        color: #666;
    }
    .btn-reg {
        display: block;
        width: 330px;
        height: 40px;
        line-height: 40px;
        margin: 24px auto 40px;
        border-radius: 4px;
        background: #3d86e9;
        color: #ffffff;
    }
}
.alter-mode-reset {
    border-right: 1px solid #f7f7f7;
}
.header-title {
    padding-bottom: 20px;
    border-bottom: 1px solid #eaeaea;
    h3 {
        font-size: 18px;
    }
}
.vat-agreement {
    height: calc(100vh - 400px);
    h3 {
        margin: 20px 0;
        font-size: 18px;
    }
    p {
        margin-bottom: 6px;
        line-height: 24px;
        text-indent: 2em;
        font-size: 14px;
    }
}
.check-box {
    .el-checkbox {
        margin-right: 10px;
    }
    .el-form-item__error {
        margin-top: -20px;
    }
    & /deep/ .el-form-item__content {
        margin-top: 20px;
        line-height: 24px;
    }
    p {
        display: inline-block;
        color: #747474;
        a {
            color: #3d86e9;
        }
    }
}
.btn-reg {
    position: relative;
    & /deep/ .el-button--primary {
        width: 330px;
    }
    & /deep/ .el-button--default {
        position: absolute;
        top: 0;
        left: 350px;
        width: 158px;
        height: 40px;
    }
}
</style>
