<template>
  <view class="page">
    <u-navbar :is-back="false" title=" " :border-bottom="false" :background="bgc" title-color="#000" title-size="36" height="45"></u-navbar>
    <!-- <view class="cont" v-html="info.content"></view> -->
	<u-parse :html="info.content" style="width: 100%;padding: 10rpx 60rpx;box-sizing: border-box;margin-top: 20rpx;"></u-parse>
    <view class="xy" @click="showxy = !showxy" v-if="showbot">
      <view class="yuans" >
        <image src="https://lxnapi.ccttiot.com/bike/img/static/u7F851ikY9rkASzNSNkO" v-if="showxy" mode=""></image>
      </view>
      <view class="txt"> 
        我已同意并阅读 <span @click.stop="toxy()">《{{ info.title }}》</span>
      </view>
    </view>
    <view class="bottom">
      <view class="btn" @click="quit()">
        不同意
      </view>
      <view class="btn1" :class="{ 'act1': isread && showxy }" @click="ok()">
        同意
      </view>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				},
				info: {},
				userinfo: {},
				areaInfo: {},
				qParam:'',
				isread:false,
				showxy:false,
				showbot:true,
				areaId:'',
				startArticleId:'',
				type:'',
				q:''
			}
		},
		onLoad(e) {
			console.log(e, 'eee');
			if(e.startArticleId){
				this.startArticleId = e.startArticleId
				this.type = e.type
				this.q = e.q
				this.getagree()
			}
			if (e.needback) {
				this.showbot = true
				this.qParam=e.qParam
			}
			if(e.areaId){
				this.areaId=e.areaId
			}
		  
		},
		 onReachBottom() {
		    // 页面滚动到底部时触发的逻辑
		    console.log('到达了页面底部');
			this.isread=true
		  },
		onShow() {

		},
		methods: {
			back(){
				uni.navigateBack({
					delta: 1 // delta值为1时表示返回的页面层数
				})
			},
			ok() {
				if(this.isread==false){
					uni.showToast({
						title: '请先阅读完协议',
						icon: 'none',
						duration: 700
					});
				} else if(this.showxy==false){
					uni.showToast({
						title: '请勾选同意',
						icon: 'none',
						duration: 1000
					})
				} else if(this.isread&&this.showxy){
					uni.setStorageSync('xieyi',true)
					if(this.type == 1){
						uni.reLaunch({
							url:'/page_fenbao/storedlist/trueorder?q=' + this.q
						})
					}else{
						uni.reLaunch({
							url:'/pages/nearbystores/index'
						})
					}
				}
			},
			quit() {
				// 当点击不同意时退出小程序
				uni.exitMiniProgram({
					success: function() {
						console.log('退出小程序成功');
					},
					fail: function(err) {
						console.log('退出小程序失败', err);
					}
				})
			},

			getagree() {
				this.$u.get(`/app/article/detail?id=${this.startArticleId}`).then((res) => {
					if (res.code === 200) {
						this.info = res.data
						this.insertPhoneNumberAndDate()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			
			insertPhoneNumberAndDate() {
				// 替换所有的&nbsp;为 \u00A0
				this.info.content = this.info.content.replace(/&nbsp;/g, '\u00A0');
			}
		}
	}
</script>


<style lang="scss">
	page {
		background-color: #fff;
	}
	.page {
		width: 750rpx;
		padding-bottom: 250rpx;
		.xy {
			margin-top: 50rpx;
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: center;
			.yuans {
				margin-top: 2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 27rpx;
				height: 27rpx;
				border-radius: 50%;
				border: #808080 solid 2rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.txt {
				margin-left: 10rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #979797;
				span {
					color: #3D3D3D;
				}
			}
		}
		.bottom {
			position: fixed;
			background: #fff;
			bottom: 0;
			width: 750rpx;
			height: 200rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-around;
			.act1{
				background: #64B6A7 !important;
			}
			.btn {
				width: 250rpx;
				height: 80rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: center;
				border-radius: 40rpx;
				background: #ccc;
				color: #fff;
				font-size: 28rpx;
				font-weight: 600;
			}
			.btn1{
				width: 250rpx;
				height: 80rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: center;
				border-radius: 40rpx;
				background: #ccc;
				color: #fff;
				font-size: 28rpx;
				font-weight: 600;
			}
		}
		.cont {
			margin-top: 34rpx;
			margin: 0 auto;
			width: 634rpx;
		}
	}
</style>