<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>
    <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" v-if="isread">
        我已同意并阅读 <span @click.stop="toxy()">《{{ info.title }}》</span>
      </view>
    </view>
    <view class="bottom" v-if="showbot">
      <view class="btn" @click="quit()">
        不同意
      </view>
      <view class="btn1" :class="{ 'act1': isread && showxy }" @click="ok()">
        同意
      </view>
    </view>
	<view class="bottom" v-if="!showbot">
	  <view class="btn" @click="back()" style="width: 80%;">
	    返回
	  </view>
	 
	</view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				},
				info: {},
				userinfo: {},
				areaInfo: {},
				qParam:'',
				isread:false,
				showxy:false,
				showbot:false,
				areaId:''
			}
		},
		onLoad(e) {
			console.log(e, 'eee');
			if (e.needback) {
				this.showbot = true
				this.qParam=e.qParam
			}
			if(e.areaId){
				this.areaId=e.areaId
			}
		
		},
		 onReachBottom() {
		    // 页面滚动到底部时触发的逻辑
		    console.log('到达了页面底部');
			this.isread=true
		 
		  },
		onShow() {
			this.getagree()
		},
		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){
					this.$store.commit('SET_SHOWAGRE',false);
					console.log( this.$store.getters.showagre);
					uni.redirectTo({
						url:'/pages/index/index?qParam='+this.qParam
					})
				}
				
			},
			quit() {
				uni.exitMiniProgram({
					success: function() {
						console.log('退出小程序成功');
					},
					fail: function(err) {
						console.log('退出小程序失败', err);
					}
				})
			},

			getagree() {
				let data ={
					tag:'agreement',
					areaId:this.areaId
				}
				let deptId = uni.getStorageSync('deptId');
				if(deptId==101){
					data.areaId=14
				}
				// console.log(data,'dadadad');
					// this.$u.get(`/app/article/9`,).then((res) => {
				this.$u.get(`/app/article/agreement`,data).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;
			// box-shadow: 12rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
			.act1{
				background: #64B6A7 !important;
			}
			.btn {
				width: 250rpx;
				height: 80rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: center;
				// border: 2rpx solid #000;
				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: 2rpx solid #000;
				border-radius: 40rpx;
				background: #ccc;
				color: #fff;
				font-size: 28rpx;
				font-weight: 600;
			}
			
		}

		.cont {
			margin-top: 34rpx;
			margin: 0 auto;
			width: 634rpx;

		}
	}
</style>