hwnc/components/ui-tarpty/ui-tarpty.vue

<template>
	<view class="all_box">
		<u-popup :show="show" @close="onClose(2)"  round="20rpx">
			<view class="all_box_1">
				<view class="all_box_2" v-if="type==1">《租赁协议》</view>
					<view class="all_box_2" v-if="type==2">《认养协议》</view>
				<scroll-view scroll-y="true" class="popup_three" @scrolltolower="scrolltolower">
					<view class="popup_three_one">
						<u-parse v-html="list" :style="styles"></u-parse>
					</view>
				</scroll-view>
				<view class="all_box_4" @click="yudutap">
					<view v-if="tap==1" class="all_box_4_1">请上滑看完协议在同意</view>
					<view v-if="tap==2" class="all_box_4_2"> 我已阅读并知晓本协议</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		name: "tarpty",
		props: {
			list: String,
			tarptyshow: Boolean,
			type:Number
		},

		data() {
			return {
				styles: {
					img: 'max-width: 95%;  padding: 20rpx;',
					p: 'font-size:30rpx;padding:250rpx',
					span: 'font-size: 30rpx;padding:10rpx'
				},
				show: false,
				tap: 1,
			};
		},
		watch: {
			//因为是单项数据流,v-modal控制的组件显示隐藏,
			//父组件不可以通过props内的参数直接改变子元素参数,
			//所以我们通过watch来监控数据的变化,间接修改show的数据
			tarptyshow(val) {
				console.log('valzzz', val)
				this.show = val

			}
		},
		methods: {
		 
			scrolltolower() {
				 this.tap=2
				 this.onClose(1)
			},
			 
			yudutap(){
				this.tap=2
				this.onClose(2)
			},
			onClose(e) {
                if(e==2){
					this.show = false
				}
				this.$emit('tarptycolse', {
					show: this.show,
                     tap:this.tap
				}) //通知父组件隐藏了
			},

		}
	}
</script>

<style lang='scss'>
	.all_box {
           min-height:0;
		.all_box_1 {
			display: flex;
			flex-direction: column;

			.popup_three {

				padding: 0 30rpx;
				width: 95%;
				max-height: 55vh;
				min-height: 30vh;
				display: flex;
				align-items: center;
				flex-direction: column;
				margin: 20rpx auto;
				overflow: hidden;

				.popup_three_one {

					-webkit-overflow-scrolling: touch;




				}
			}

			.all_box_2 {
				padding: 30rpx 0 0 20rpx;
				font-weight: 600;
			}

			.all_box_3 {
				padding: 0 30rpx;

				.all_box_3_1 {
					padding: 30rpx;
					min-height: 400rpx;
					max-width: 700rpx;
					background-color: #f5f5f5;

				}

			}

			.all_box_4 {
				background-color: #f5f5f5;
				display: flex;
				justify-content: center;
				/* line-height: 70rpx; */

				/* border-radius:100rpx; */
				padding: 20rpx 0rpx 20rpx 0rpx;

				.all_box_4_1 {
					 background-color: darkgray;
					line-height: 70rpx;
					width: 60%;
					color: #fff;
					border-radius: 100rpx;
					text-align: center;
				}

				.all_box_4_2 {
					 background-color: limegreen;
					line-height: 70rpx;
					width: 60%;
					color: #fff;
					border-radius: 100rpx;
					text-align: center;
				}
			}

		}


	}
</style>