[NEW]【保全-续期】新增自动转账授权书

src/views/ebiz/preserve/AutopayAuthorization.vue

@@ -1,4 +1,114 @@
 <!--自动转账授权书-续期账号变更-->
 <template>
-  <div class="auto-pay"></div>
-</template>
+  <div class="auto-pay-container">
+    <div class="pb20 pt20">
+      <van-notice-bar :scrollable="false" v-if="time != 0" class="notice">{{ `提示：阅读时长需在${time}秒以上` }}</van-notice-bar>
+      <div class="fs14 p10 signature-confirm-content pb20 pt25 mb20">
+        <h1 class="text-center fs18 mb10">自动转账授权书</h1>
+        <p>本人授权本人所在企业或国富人寿保险有限公司 (下称"国富人寿") 以下事项:</p>
+        <p>1、本人所在企业或国富人寿可从本投保页面上"银行信息"栏中的结算账户 (下称"结算账户") 中划扣本人应交付的保险费。</p>
+        <p>2、本人授权指定银行按本人所在企业或国富人寿保险费划转要求划扣保险费时,免于核对密码或签名。就上述授权转账事宜,本人声明确知并保证遵守如下规定:</p>
+        <p class="fwb">
+          1、因账户内余额不足或其他非国富人寿原因导致保险费转账不成功的, 被保人应存入足够金额或重新提供有效结算账户,未及时支付保险费将导致当次投保申请失效。
+        </p>
+        <p class="fwb">2、本授权书为本人所在企业或国富人寿从本人指定的结算账户中扣款的授权证明,不作为收取现金的凭据。</p>
+      </div>
+
+      <van-radio-group v-model="radio" class="pb10 pt20 pl30">
+        <van-radio name="1" @click="readConfirm" v-no-more-click="2000" class="fs12">
+          本人确认已阅读
+          <span class="green">《国富人寿自动转账授权书》</span>
+        </van-radio>
+      </van-radio-group>
+    </div>
+
+    <div class="bottom-btn bg-white">
+      <van-button type="danger" size="large" @click="next" :disabled="isDisabledComplite" v-no-more-click="2000">完成</van-button>
+    </div>
+  </div>
+</template>
+<script>
+import { RadioGroup, Radio, Dialog, NoticeBar } from 'vant'
+// import { preserveSign } from '@/api/ebiz/preserve/preserve'
+export default {
+  components: {
+    [Radio.name]: Radio,
+    [RadioGroup.name]: RadioGroup,
+    [Dialog.name]: Dialog,
+    [NoticeBar.name]: NoticeBar
+  },
+  data() {
+    return {
+      radio: '',
+      time: '10', //定时器时间
+      timer: null, //定时器名称
+      isDisabledComplite: true //完成按钮是否可以点击
+    }
+  },
+  async created() {
+    this.timeOut()
+  },
+  mounted() {
+    document.body.style.backgroundColor = '#fff'
+  },
+  methods: {
+    // 初始化
+    timeOut() {
+      let timer = setInterval(() => {
+        this.time--
+        if (this.time <= 0) {
+          this.time = 0
+          clearInterval(timer)
+        }
+      }, 1000)
+    },
+    // 单选框
+    readConfirm() {
+      console.log(this.radio)
+      if (this.radio == '1') {
+        this.$dialog
+          .alert({
+            title: '提示',
+            className: 'dialog-alert',
+            message: '该内容涉及您的重大权益，请您仔细阅读',
+            confirmButtonColor: '#E9332E'
+          })
+          .then(() => {
+            this.radio = '1'
+            this.isDisabledComplite = false
+          })
+      } else {
+        if (this.radio == '') {
+          this.isDisabledComplite = true
+        }
+      }
+    },
+    next() {}
+  },
+  beforeRouteLeave(to, from, next) {
+    document.body.style.backgroundColor = ''
+    next()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.img {
+  height: 40px;
+  vertical-align: middle;
+}
+.notice {
+  width: 100%;
+  position: fixed;
+  top: 0;
+  z-index: 20;
+}
+.iframe {
+  width: 100vw;
+  height: 70vh;
+}
+.signature-confirm-content {
+  text-indent: 2em;
+  line-height: 30px;
+  border-bottom: 1px solid #dadada;
+}
+</style>