TelpoH5FrontendWeb/src/components/AgreementDialog.vue

<!--
 * @Date: 2022-02-26 16:40:02
 * @LastEditors: JinxChen
 * @LastEditTime: 2022-02-28 17:00:19
 * @FilePath: \AntpayFrontEnd\src\components\AgreementDialog.vue
 * @description: 协议弹窗组件
-->
<template>
    <div>
        <van-dialog
            class="agreement-container"
            v-model="show"
            :title="title"
            confirm-button-color="#1989fa"
            :show-confirm-button="false"
        >
            <div class="agreement-content">
                <h5>一.开通需知及承诺</h5>
                <p v-show="isNewCustom">1.感谢用户使用支付宝花呗分期功能。</p>
                <p v-show="isNewCustom">
                    2.用户自愿开通4G电子学生证资费套餐服务({{count}}
                    <!-- 24 -->
                    期)每月自动通过支付宝花呗分期支付资费(话费+流量)套餐费{{(price/count).toFixed(2)}}元/月。
                </p>
                <p v-show="isNewCustom">3.用户需连续使用该资费套餐24期，可据此领取4G电子学生证1台、电话卡1张。</p>
                <p style="white-space: pre-wrap">
                    <span v-show="isNewCustom">4.</span>
                    {{description}}
                </p>
                <p v-show="isOldCustom">5.协议期内，电子学生证非人为损坏或进水按“三包”政策进行免费维修或更换。如丢失或人为损坏，按优惠价重新购买。</p>
                <p v-show="isOldCustom">6.北京随手精灵科技有限公司接受电子学生证运营销售商委托采用支付宝花呗分期付代收业务货款。</p>
                <h5>二．用户承诺</h5>
                <p>1.用户已充分了解支付宝花呗付款条款（含支付宝花呗相关规则），充分阅读及理解本协议。</p>
                <p>2.用户已经签署业务订购回执，自愿购买并同意签署本协议。</p>
                <h5>三．法律适用与管辖</h5>
                <p>本协议之效力、解释、变更、执行与争议解决均适用中华人民共和国法律。因本协议产生的争议，均应依照中华人民共和国法律予以处理。</p>
                <p v-show="!isButtonShow">{{countDown}}秒后显示按钮</p>
                <div class="agreement-button" v-show="isButtonShow">
                    <van-button type="warning" @click="onDisAgree" round>不同意</van-button>
                    <van-button type="info" @click="onAgree" round>同意</van-button>
                </div>
            </div>
        </van-dialog>
    </div>
</template>

<script>
export default {
  name:'agreement-dialog',
  props: {
    show: {
        default: true,
        type: Boolean
    },
    title: {
        default: '',
        type: String
    },
    isNewCustom: {
        default: true,
        type: Boolean
    },
    isOldCustom: {
        default: false,
        type: Boolean
    },
    count: {
        default: null,
        type: Number
    },
    price: {
        default: null,
        type: Number
    },
    description: {
        default: '',
        type: String
    },
    countDown: {
        default: 3,
        type: Number
    },
    isButtonShow: {
        default: false,
        type: Boolean
    },
  },
  data(){
   return {
   }
  },
  methods: {
      //   不同意
    onDisAgree() {
        this.$bus.$emit('getCheckStatus', false);
        this.$bus.$emit('closeButton', false);
        this.resetCountDown();
    },
    //   同意
    onAgree() {
        this.$bus.$emit('getCheckStatus', true);
        this.$bus.$emit('closeButton', false);
        this.resetCountDown();
    },
     // 重置倒计时和关闭弹窗
    resetCountDown() {
        this.countDown = 3;
    },
  }

}
</script>

<style scoped lang="scss">
.agreement-container {
    .agreement-content {
        height: 500px;
        padding: 5px 10px;
        border-top: 0.5px soild;
        border-bottom: 0.5px soild;
        text-align: left;
        overflow: scroll;
        h5 {
            padding: 5px;
        }
        p {
            padding: 5px;
            font-size: 14px;
            line-height: 20px;
        }
        .agreement-button {
            padding: 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .van-button {
                height: 30px;
                width: 120px;
                border-radius: 10px;
            }
        }
    }
}
</style>