协议优化

src/components/login/loginUserAgreement.vue

@@ -6,7 +6,19 @@
       <van-checkbox :value="checked" @click="conF1"
         >{{text1}}</van-checkbox
       >
-      <p class="link" @click="contentShow = true">{{text2}}</p>
+      <template v-if="userAgreement || privacyPolicy">
+        <div class="link" @click="handleDetail(0)">
+          <span @click.stop="handleDetail(0)" v-if="userAgreement">
+            《{{ userAgreement.agreementName }}》
+          </span>
+          <span @click.stop="handleDetail(userAgreement ? 1 : 0)" v-if="privacyPolicy">
+            《{{ privacyPolicy.agreementName }}》
+          </span>
+        </div>
+      </template>
+      <template v-else>
+        <p class="link" @click="contentShow = true">{{text2}}</p>
+      </template>
     </div>
     <van-popup
       :show="contentShow"
@@ -44,6 +56,14 @@ export default {
       type: String,
       default: "用户隐私协议",
     },
+    userAgreement: {
+      type: Object,
+      default: () => {}
+    },
+    privacyPolicy: {
+      type: Object,
+      default: () => {}
+    }
   },
   data() {
     return {
@@ -89,6 +109,9 @@ export default {
       if (!this.render) return;
       this.contentShow = false;
     },
+    handleDetail(index) {
+      this.$emit("onDetail", index);
+    },
   },
 };
 </script>
@@ -101,6 +124,7 @@ export default {
     width: 100%;
     font-size: 12px;
     display: flex;
+    flex-wrap: wrap;
     justify-content: center;
     color: #1989fa;
     align-items: center;

src/components/login/protocolDialog.vue

+<template>
+  <van-popup
+    :show="isShow"
+    position="bottom"
+    :close-on-click-overlay="closeOnClickOverlay"
+  >
+    <div class="protocol-container" :style="{ height }" v-if="reRerender">
+      <div class="protocol-header van-hairline--bottom">
+        <div class="protocol-header__title">{{ currentProtocol.agreementName }}</div>
+        <div class="protocol-header__icon" @click="handleClose">
+          <van-icon name="close" />
+        </div>
+      </div>
+      <div ref="content" class="protocol-content">
+        <div v-html="currentProtocol.agreementContent"></div>
+      </div>
+      <div class="protocol-footer" :style="{ background: themeColor['--main-color'],opacity: btnDisabled ? .5 : 1 }" v-if="isShowReadTime">
+        <div class="protocol-footer__btn" @click="handleNext">
+          <template v-if="currentIndex === (len - 1)">
+            {{ len === 1 ? '同意协议' : '同意全部协议' }}
+          </template>
+          <template v-else>
+            下一篇：{{ protocolList[currentIndex + 1].agreementName }}
+          </template>
+          <div v-if="btnDisabled">({{ restTime }}s)</div>
+        </div>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+  import { themeColor } from "../../utils/mayi"
+
+  export default {
+    name: "protocol-dialog",
+    props: {
+      value: {
+        type: Boolean,
+        default: false,
+      },
+      height: {
+        type: String,
+        default: '80vh'
+      },
+      protocolList: {
+        type: Array,
+        default: () => []
+      },
+      index: {
+        type: Number,
+        default: 0
+      },
+      closeOnClickOverlay: {
+        type: Boolean,
+        default: false
+      },
+      isShowReadTime: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data() {
+      return {
+        isShow: false,
+        reRerender: false,
+        currentProtocol: {},
+        currentIndex: 0,
+        bgcHeight: 0,
+        
+        btnDisabled: false,
+        restTime: 0,
+        len: 0,
+        interval: null,
+        themeColor
+      }
+    },
+    watch: {
+      value(val) {
+        this.isShow = val;
+        if (val) {
+          this.reRerender = true;
+          this.len = 0;
+          this.initData();
+        }
+      },
+      isShow(val) {
+        this.$emit("input", val);
+      },
+      index(val) {
+        this.currentIndex = val;
+      },
+      protocolList(val) {
+        this.currentProtocol = val[this.index];
+        this.initData();
+      }
+    },
+    methods: {
+      initData() {
+        if (this.len !== 0 || !this.isShow) return;
+        this.len = this.protocolList.length;
+        this.changeData();
+      },
+      changeData() {
+        this.restTime = this.currentProtocol.readingTime;
+        if (this.restTime > 0) {
+          this.btnDisabled = true;
+          this.startCountDown();
+        }
+        this.$forceUpdate();
+      },
+      startCountDown() {
+        if (this.interval) clearInterval(this.interval);
+        this.interval = setInterval(() => {
+          this.restTime --;
+          if (this.restTime < 0) {
+            this.btnDisabled = false;
+            clearInterval(this.interval);
+          }
+        }, 1000)
+      },
+      handleClose() {
+        this.isShow = false;
+        setTimeout(() => {
+          this.reRerender = false;
+          if (this.interval) clearInterval(this.interval);
+        }, 300)
+      },
+      handleNext() {
+        if (this.btnDisabled) return;
+        if ((this.len - 1) === this.currentIndex) {
+          this.$emit('onAgree');
+          this.handleClose();
+        } else {
+          this.currentIndex += 1;
+          this.currentProtocol = this.protocolList[this.currentIndex];
+          this.changeData();
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+.protocol-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  
+  .protocol-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    padding: 15px 0;
+    background: #fff;
+    z-index: 1;
+    
+    .protocol-header__title {
+      font-size: 17px;
+      font-weight: 600;
+    }
+    
+    .protocol-header__icon {
+      position: absolute;
+      right: 0;
+      font-size: 17px;
+      border: 10px solid transparent;
+    }
+  }
+
+  .protocol-content {
+    padding: 0 15px 80px;
+    overflow: auto;
+  }
+  
+  .protocol-footer {
+    padding: 15px;
+    color: #fff;
+    
+    .protocol-footer__btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+    }
+  }
+}
+</style>