index.vue 2.1 KB
<template>
	<u-popup :show="show" :round="10" mode="bottom">
		<view class="UserAgreement">
			<view class="UserAgreement-top">
				<view class="UserAgreement-top-content">用户协议</view>
			</view>
			<scroll-view :scroll-y="true" style="height: 60vh;">
				<view class="UserAgreement-body" v-html="content"></view>
			</scroll-view>
			<view class="UserAgreement-bottom-container">
				<view class="UserAgreement-bottom" @click="cancel">
					知道了
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name:"UserAgreement",
		data() {
			return {
				show: false,
				title: '',
				content: ''
			};
		},
		mounted() {
			
		},
		methods: {
			getData() {
				this.$service.P_get('config/agreement').then(res => {
					console.log('=======>', res)
					this.content = res.data.content
				})
			},
			open() {
				this.getData()
				this.show = true
			},
			cancel(){
				this.show = false
				this.$emit('cancel')
			},
			close() {
				this.show = false
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.UserAgreement{
		padding: 0 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
		text-align: left;
		.UserAgreement-top{
			text-align: center;
			padding: 49rpx 0;
			display: flex;
			justify-content: center;
			.UserAgreement-top-content{
				position: relative;
				font-size: 32rpx;
				color: #323232;
			}
			
		}
		.UserAgreement-body{
			color: #646464;
			font-size: 28rpx;
			overflow: auto;
			padding-bottom: 20rpx;
		}
		.UserAgreement-bottom-container{
			display: flex;
			justify-content: space-between;
			.UserAgreement-bottom{
				line-height: 90rpx;
				font-size: 34rpx;
				color: #FFFFFF;
				background-color: #2d81ff;
				border-radius: 500rpx;
				text-align: center;
				margin-top: 40rpx;
				margin-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
				width: 100%;
			}
			.UserAgreement-bottom-2{
				color: rgba(100, 100, 100, 1);
				line-height: 90rpx;
				font-size: 34rpx;
				background-color: rgba(239, 239, 239, 1);
				border-radius: 500rpx;
				text-align: center;
				margin-top: 40rpx;
				margin-bottom: 30rpx;
				width: 300rpx;
			}
		}
		
	}
</style>