assess-app/pages/login/model/agreement.vue

<template>
  <view class="agreement-box" @touchmove.stop.prevent="moveHandle">
    <view class="input-agreement animate__animated" :class="{'animate__shakeX':consentShake}" @click="setIsConsent" >
      <image class="agreement-agree" v-if="isConsent" src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/login/Checked1@3x.png" mode="aspectFill"></image>
      <image class="agreement-agree" v-else src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/login/Checked2@3x.png" mode="aspectFill"></image>
      <view class="agreement-text text-color-666 sys-size-24">已阅读并同意</view>
      <view class="agreement-text text-color-dominant sys-size-24" @click.stop="showContent(1)">《隐私政策》</view>
      <view class="agreement-text text-color-dominant sys-size-24" @click.stop="showContent(2)">《使用说明》</view>
    </view>
    <view >
      <uni-popup ref="consentObj">
        <view class="iPhone-padding agreement-data sys-background-fff">
          <image class="data-title" src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/login/consent_bg.png" mode="widthFix"></image>
          <view class="data-content">
            <scroll-view class="content-box" scroll-y="true"  scroll-left="120">
              <rich-text :nodes="content" v-if="type===1"></rich-text>
              <rich-text :nodes="contentLogin" v-else></rich-text>
            </scroll-view>
          </view>
          <view class="data-but text-color-fff sys-background-dominant sys-size-30 sys-weight-500 sys-radius-100" @click.stop="setConsent()">{{type===1?'同意':'确认'}}</view>
        </view>

      </uni-popup>
    </view>

  </view>

</template>

<script>
import tools from "@/service/tools";
import {getMessage} from "@/api/common";

export default {
  name:'agreement',
  data() {
    return {
      isConsent:false,
      consentShake:false,
      content:'',
      contentLogin:'<div>1、当前小程序为大连中山万汇小额贷款有限公司（一下均使用本公司）项目管理应用</div><div>2、此应用为本公司提供项目流程进度管理及流程监管</div><div>3、使用用户为授权的本公司员工，外部人员均无访问权限</div>',
      type:1
    };
  },
  mounted() {
    this.getMessage()
  },
  methods:{
    setConsent(){
      this.isConsent=true
      this.$emit('input', this.isConsent)
      this.$refs.consentObj.close('bottom')
    },
    async getMessage() {
      const res = await getMessage({
        type: 2
      })
      if (res.code === 1) {
        this.content = tools.imgDeal(res.data)
      }
    },

    showContent(type){
      this.type=type
      this.$refs.consentObj.open('bottom')
    },
    moveHandle() {
      console.log('--------------------------------hhhhhhhhhhhhhh')
      return false
    },
    setIsConsent(){
      this.isConsent=!this.isConsent
      this.$emit('input', this.isConsent)
    },
    setConsentShake(){
      this.consentShake=true
      console.log('consentShake:'+this.consentShake)
      setTimeout(()=>{
        this.consentShake=false
      },500)
    }
  }
}
</script>

<style lang="scss">
.agreement-box{
  margin-top: 25rpx;
  height: 32rpx;
  .input-agreement{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .agreement-agree{
      width: 32rpx;
      height: 32rpx;
      transition: .5s ease;
    }
    .agreement-text{
      margin-left: 18rpx;
    }
  }
  .agreement-data{
    border-radius: 30rpx 30rpx 0 0;
    .data-title{
      width: 100%;
      border-radius: 30rpx 30rpx 0 0;
    }
    .data-content{
      padding: 20rpx 40rpx;
      .content-box{
        height: 600rpx;
      }
    }
    .data-but{
      height: 96rpx;
      line-height: 96rpx;
      text-align: center;
      margin: 0 75rpx;
    }
  }
}

</style>