ece.suwa3d.com/src/components/hint/hint.vue

<template>
  <div>
    <!-- 隐私协议弹窗 -->
    <van-popup
      v-model:show="popupShow"
      :close-on-click-overlay="false"
      round
    >
      <!-- <div class="hint_container">
        <div class="hint_title">
          {{'用户协议及隐私政策'.$t}}
        </div>
        <div class="hint_content">
          <div class="hint_text">{{'无论数据在何处进行处理和存储，我们将始终按照隐私政策及用户协议收集、处理您的数据。'.$t}}</div>
          <div class="hint_text">{{"遵照中国大陆隐私保护法律的要求，需要你签署本知情同意书。".$t}}</div>
          <div class="hint_contract">
            <div class="contract_item">
              <van-checkbox class="check_box" icon-size="20px" v-model="checked" checked-color="#009944" @change="onChange"></van-checkbox>
              <div class="a-text">{{'我同意'.$t}}
                <div class="active" @click="secretJump('user_service', 1)">{{'用户服务协议'.$t}}</div>
              </div>
            </div>
            <div class="contract_item">
              <van-checkbox class="check_box" icon-size="20px" v-model="checked2" checked-color="#009944" @change="onChange2"></van-checkbox>
              <div class="a-text">{{'我同意'.$t}}
                <div class="active" @click="secretJump('user_privacy', 2)">{{'用户隐私政策'.$t}}</div>
              </div>
            </div>
            <div class="contract_item">
              <van-checkbox class="check_box" icon-size="20px" v-model="checked3" checked-color="#009944" @change="onChange3"></van-checkbox>
              <div class="a-text">{{'我同意'.$t}}
                <div class="active" @click="secretJump('child_privacy', 3)">{{'儿童隐私政策'.$t}}</div>
              </div>
            </div>
          </div>
          <div class="hint_btn" @click="handleConfirm">
            <div :class="['btn', {checked: isChecked}]">{{'同意并继续'.$t}}</div>
          </div>
        </div>
      </div> -->
      
      <div class="xieyi-body">
        <div class="xieyi-box">
          <div class="xieyi-title">服务协议及隐私保护</div>
          <div>
            <div class="xieyi-text">为更好的保护你的合法权益，请阅读并同意
              <span class="xieyi-active" @click="secretJump('user_service', 1)">《用户服务协议》</span>
              <span class="xieyi-active" @click="secretJump('user_service', 2)">《用户隐私政策》</span>
              <span class="xieyi-active" @click="secretJump('user_service', 3)">《儿童隐私政策》</span>
            </div>
          </div>
          <div class="xieyi-btn">
            <div class="hint_no_btn" @click="closeHint">
                不同意
            </div>
            <div class="hint_btn" @click="handleConfirm">
              同意
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  hintShow: {
    type: Boolean,
    default: true
  }
})
const popupShow = ref(false)
const checked = ref(false)
const checked2 = ref(false)
const checked3 = ref(false)
const isChecked = ref(false)
const emit = defineEmits([
  "check",
  "close",
  "onViewAgree",
]);

watch(() => props.hintShow, (val, oldVal) => {
  console.log("props.hintShow",val)
  popupShow.value = val ? true : false

  }, { immediate: true })
// const onChange = (e) => {
//   checked.value = e;
//   isChecked.value = e && checked2.value && checked3.value;
// }
// const onChange2 = (e) => {
//   checked2.value = e;
//   isChecked.value = e && checked.value && checked3.value;
// }
// const onChange3 = (e) => {
//   checked3.value = e;
//   isChecked.value = e && checked.value && checked2.value;
// }
const handleConfirm = () =>  {
  // if(checked.value && checked2.value && checked3.value) {
    emit("check", true)
    emit("close")
    // 清空数据
    // checked.value = false
    // checked2.value = false
    // checked3.value = false
    // isChecked.value = false
  // }
}

const closeHint = () => {
  emit("check", false)
  emit("close")
}

// 隐私跳转
const secretJump = (title, val) => {
  emit("onViewAgree", title, val)
}


</script>

<style lang="less" scoped>
.hint_container {
  position: relative;
  padding: 20px 0;
  .hint_title {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 17px;
  }
  .hint_content {
    position: relative;
    width: 85%;
    margin: 10px auto 0 auto;
    .hint_text {
      margin-bottom: 7px;
      font-size: 15px;
      line-height: 25px;
      color: #444444;
    }
    .hint_contract {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      position: relative;
      margin-top: 10px;
      
      .contract_item {
        display: flex;
        margin: 5px 0;
				.check_box {
					display: flex;
				}
				.a-text {
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						color: #767676;
						font-size: 14px;
						line-height: 14px;
						.active {
								color: #009944;
								margin: 0 5px;
						}
					}
      }
    }
    // .hint_btn {
    //   display: flex;
    //   justify-content: center;
		// 	align-items: center;
    //   position: relative;
    //   width: 100%;
    //   margin-top: 25px;
    //   .btn {
    //     display: flex;
    //     justify-content: center;
    //     align-items: center;
    //     position: relative;
    //     width: 150px;
    //     height: 40px;
    //     border-radius: 5px;
    //     background: #009944;
    //     color: #fff;
    //     font-size: 15px;
    //     filter: opacity(0.5)
    //   }
    //   .checked {
    //     filter: brightness(1);
    //   }
    // }
  
  }
  
}

.xieyi-body {
  padding: 15px;
}
.xieyi-box {
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  .xieyi-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    .xieyi-text {
      font-size: 14px;
    }
  }
}
.xieyi-active {
  color: #1aad19!important;
  cursor: pointer;
}
.xieyi-btn {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
  .hint_btn {
    width: 80px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background: #009944;
    color: #fff;
    border-radius: 6px;
  }
  .hint_no_btn {
    width: 80px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: 1px solid #333;
    color: #000;
    border-radius: 6px;
  }
}

</style>