协议优化

src/components/login/loginUserAgreement.vue

@@ -6,7 +6,19 @@
       <van-checkbox :value="checked" @click="conF1"
         >{{text1}}</van-checkbox
       >
+      <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>

src/pages/login/index.vue

@@ -50,11 +50,15 @@
       ></loginBox>
       <!-- 用户协议模块 -->
       <loginUserAgreement
+        ref="agreement"
         v-if="item.componentCode=='login-userAgreement' && item.componentInfo.visible == 1"
         :datas="item"
         :render="true"
         :content="content"
+        :userAgreement="userAgreement"
+        :privacyPolicy="privacyPolicy"
         @conF="conF"
+        @onDetail="handleDetail"
       ></loginUserAgreement>
     </div>
     <div class="toCLogin1" v-if="isShowPhone">
@@ -75,6 +79,7 @@
     </div>
     <!-- 选择企业 -->
     <SelectEnterpriseAccount ref="SelectEnterpriseAccount" @confirm="getEnterpriseAccount"></SelectEnterpriseAccount>
+    <ProtocolDialog v-model="isShowProtocol" :index="currentIndex" :isShowReadTime="isShowReadTime" :protocolList="[userAgreement, privacyPolicy].filter(Boolean)" @onAgree="handleAgree" />
   </div>
 </template>
 
@@ -89,6 +94,7 @@ import { createdUserJWTApi } from "@/api/daoke";
 import loginLogo from '../../components/login/loginLogo.vue';
 import loginBox from '../../components/login/loginBox.vue';
 import loginUserAgreement from '../../components/login/loginUserAgreement.vue';
+import ProtocolDialog from '../../components/login/protocolDialog.vue';
 import ThemeDataPlant from "../../components/ThemeDataPlant"
 import text from '@/components/content/text'
 import richText from "../../components/basicTool/rich-text";
@@ -107,7 +113,8 @@ export default {
     loginLogo,
     loginBox,
     loginUserAgreement,
-    SelectEnterpriseAccount
+    SelectEnterpriseAccount,
+    ProtocolDialog
   },
   data() {
     return {
@@ -117,7 +124,6 @@ export default {
       session_key: "",
       shopName: "",
       logoUrl: "",
-      isShow: false,
       isShowPhone: false,
       getPhone: false,
       openid: "",
@@ -151,6 +157,13 @@ export default {
       hideBack: 0, //0显示返回按钮 1隐藏
       selectEnterpriseAccountOpenType: 0, //0输入手机号登录 1微信一键登录 2一键登录后绑定手机号登录
       sessionId: "",
+      
+      isShowProtocol: false,
+      currentIndex: 0,
+      isShowReadTime: false,
+      userAgreement: {},
+      privacyPolicy: {},
+      tempData: null,
     };
   },
   computed: {
@@ -400,6 +413,15 @@ export default {
           nickname: _this.userInfo.nickName,
           headImgUrl: _this.userInfo.avatarUrl
         };
+        if (this.checked) {
+          query.agreementIds = [];
+          if (this.userAgreement) {
+            query.agreementIds.push(this.userAgreement.id);
+          }
+          if (this.privacyPolicy) {
+            query.agreementIds.push(this.privacyPolicy.id);
+          }
+        }
         login
         .miniLogin(query)
         .then(res => {
@@ -439,18 +461,21 @@ export default {
     },
     getUserProfile() {
       log.info('点击了微信一键登录');
-      let _this = this;
+      wx.showLoading({
+        title: '登录中...',
+        mask: true
+      })
+      if (this.tempData) {
         if(this.content&&!this.checked) {
           wx.showToast({
             title: '您还未同意协议',
             icon: "none"
           });
+          return;
+        }
+        this.handleSuccess();
         return
       }
-      wx.showLoading({
-        title: '登录中...',
-        mask: true
-      })
       // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
       // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
       wx.getUserProfile({
@@ -459,8 +484,16 @@ export default {
           this.userInfo = e.userInfo;
           log.info('获取wx.getUserProfile用户信息',this.userInfo);
           console.log(this.userInfo,'--this.userInfo')
-          this.initUser()
-            .then(res => {
+          this.initUserInfo();
+        },
+        fail: (e) => {
+          log.info('wx.getUserProfile-fail',e)
+          wx.hideLoading()
+        }
+      })
+    },
+    async initUserInfo() {
+      this.initUser().then(res => {
         wx.hideLoading();
         //存入openid
         try {
@@ -468,55 +501,70 @@ export default {
         } catch (e) {
           log.info('存入openid失败',e)
         }
-              log.info(this.$store.state.mixid,'mixid------230')
         // haveBindUserPhone
         // 是否必须绑定手机号（0必须绑定,1不需要绑定
-              //有账号或不需要绑定手机号
+        // 有账号或不需要绑定手机号
         this.appid = res.data.data.appid;
         this.session_key = res.data.data.session_key;
         this.openid = res.data.data.openid;
         this.unionId = res.data.data.unionId || '';
         this.sessionId = res.data.data.sessionId || '';
-              this.isShow = true;
-              if (res.data.data.isHaveUnion == "true" || this.mpApp.globalData.shopInfo.haveBindUserPhone == '1') {
+        this.tempData = res.data.data;
+        if(this.content&&!this.checked&&!res.data.isHaveUnion) {
+          let text = '';
+          if (this.userAgreement && this.privacyPolicy) {
+            text = `《${this.userAgreement.agreementName}》和《${this.privacyPolicy.agreementName}》`;
+          } else if (this.userAgreement) {
+            text = `《${this.userAgreement.agreementName}》`;
+          } else if (this.privacyPolicy) {
+            text = `《${this.privacyPolicy.agreementName}》`;
+          }
+          wx.showModal({
+            title: "协议阅读提示",
+            content: `为了更好地保护你的个人信息安全，请你仔细阅读并理解我们最新更新的${text}。若你点击同意，即表示你已阅读并同意上述条款，我们将严格按照${text}的各项条款使用和保护你的个人信息。`,
+            showCancel: true,
+            cancelText: "再想想",
+            confirmText: "查看协议",
+            success: (res) => {
+              if (res.confirm) {
+                this.handleDetail(0);
+              }
+            }        
+          })
+          return;
+        }
+      }).catch(err => {
+        wx.hideLoading();
+        log.info("err", err);
+        wx.showToast({
+          title: err,
+          icon: "none"
+        });
+      });
+    },
+    handleSuccess() {
+      if (this.tempData.isHaveUnion == "true" || this.mpApp.globalData.shopInfo.haveBindUserPhone == '1') {
         this.backParams += `&sessionid=${
-                  res.data.data.sessionId
-                }&needCertified=${res.data.data.NEED_CERTIFIED}`;
-                this.NEED_CERTIFIED = res.data.data.NEED_CERTIFIED;
+          this.tempData.sessionId
+        }&needCertified=${this.tempData.NEED_CERTIFIED}`;
+        this.NEED_CERTIFIED = this.tempData.NEED_CERTIFIED;
         this.isHaveUnion = true;
-                console.log(this.whetherOpenEnterprisesWantGoods == 1, res.data.data.masterAccount,'-----------------------------482')
-                if(this.whetherOpenEnterprisesWantGoods == 1 && res.data.data.masterAccount && res.data.data.masterAccount.length>0){
+        if(this.whetherOpenEnterprisesWantGoods == 1 && this.tempData.masterAccount && this.tempData.masterAccount.length>0){
           this.selectEnterpriseAccountOpenType = 1;
-                  this.$refs.SelectEnterpriseAccount.open(res.data.data.masterAccount);
+          this.$refs.SelectEnterpriseAccount.open(this.tempData.masterAccount);
         } else {
           wx.setStorage({
             key: "sessionid",
-                    data: res.data.data.sessionId
+            data: this.tempData.sessionId
           });
           this.checkLogin();
         }
       } else {
         //需要绑定
         this.isHaveUnion = false;
-
         //checkLogind
         this.checkLogin();
       }
-            })
-            .catch(err => {
-              log.info("err", err);
-              wx.showToast({
-                title: err,
-                icon: "none"
-              });
-              wx.hideLoading();
-            });
-        },
-        fail: (e) => {
-          log.info('wx.getUserProfile-fail',e)
-          wx.hideLoading()
-        }
-      })
     },
     checkLogin() {
       this.$store.commit('setUserInfo',this.userInfo)
@@ -693,6 +741,15 @@ export default {
         customerSourceType: wx.getStorageSync(this.$store.state.mixid+"articleId")?8:'',
         customerSourceId: wx.getStorageSync(this.$store.state.mixid+"articleId") || ''
       };
+      if (this.checked) {
+        query.agreementIds = [];
+        if (this.userAgreement) {
+          query.agreementIds.push(this.userAgreement.id);
+        }
+        if (this.privacyPolicy) {
+          query.agreementIds.push(this.privacyPolicy.id);
+        }
+      }
       log.info(query,'bindUser-query-491')
       log.info(this.$store.state.spokesmanGroupId,'bindUser-spokesmanGroupId')
       log.info(this.$store.state.spokesmanRelId,'bindUser-spokesmanRelId')
@@ -872,6 +929,8 @@ export default {
         log.info('获取用户协议',res)
         if(res.data.code == '200') {
           this.content = res.data.data;
+          this.userAgreement = res.data.data.find(item => item.agreementType == 0);
+          this.privacyPolicy = res.data.data.find(item => item.agreementType == 1);
         }
       });
     },
@@ -890,6 +949,15 @@ export default {
         this.checkLogin();
       }
     },
+    handleDetail(index) {
+      this.currentIndex = index;
+      this.isShowReadTime = !this.checked;
+      this.isShowProtocol = true;
+    },
+    handleAgree() {
+      this.checked = true;
+      this.$refs.agreement[0].checked = true;
+    }
   }
 };
 </script>