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() {},
		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 === 0) {
					this.content = tools.imgDeal(res.data)
				}
			},

			showContent(type) {
				this.type = type
				this.$refs.consentObj.open('bottom')
			},
			moveHandle() {
				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>