<template>
	<view class="page">
		<view class="box_1">
			<view class="section_1">
				<view class="nav-bar_1">
					<view @click="goback" class="arr-right">&lt;&lt;&lt;</view>
					<view class="arr-left">手机号测试</view>
				</view>

			</view>
			<view class="section_3">
				<view class="top">
					<text lines="1" class="text_3">请输入手机号</text>
					<view class="image_3"><phonenum @completeinput="completeinput" :phonenum="phonenum"></phonenum></view>
					<view bindtap="onClick" class="button_1">
						确定
					</view>
					<view class="text-wrapper_2">
						<text lines="1" decode="true" class="text_13">阳&nbsp;x&nbsp;{{info.yinyang.yang}}</text>
						<text lines="1" decode="true" class="text_14">阴&nbsp;x&nbsp;{{info.yinyang.yin}}</text>
					</view>
					<img src="../../static/phonenum/phonenum1.png" class="image_4" />
					<view class="wuxing">
						<view>
							<view>x{{info.wuxing.mu?info.wuxing.mu:0}}</view>
							<view>x{{info.wuxing.huo?info.wuxing.huo:0}}</view>
							<view>x{{info.wuxing.tu?info.wuxing.tu:0}}</view>
							<view>x{{info.wuxing.jin?info.wuxing.jin:0}}</view>
							<view>x{{info.wuxing.shui?info.wuxing.shui:0}}</view>
						</view>
						<view>
							<view>学习力</view>
							<view>演讲力</view>
							<view>推广力</view>
							<view>领导力</view>
							<view>行动力</view>
						</view>
					</view>
				</view>

				<view class="bottom">
					<view class="text-wrapper_3">
						<view class="titline">
							<img src="../../static/phonenum/phoneicon.png" class="icon_1" />
							<text lines="1" decode="true" class="text_15">开始转运数</text>
							<text lines="1" class="text_17">{{info.last_two.number}}</text>
							<text lines="1" decode="true" class="text_18">为“{{info.last_two.last_two_jx}}”</text>
						</view>

						<view class="paragraph_6" v-html="info.last_two.last_two_sy"></view>
					</view>
					<view class="text-wrapper_4">
						<view  class="titline">
							<img src="../../static/phonenum/phoneicon.png" class="icon_1" />
							<text lines="1" decode="true" class="text_15">长久旺运数</text>
							<text  lines="1" class="text_17">{{info.last_four.number}}</text>
							<view  v-if="!islock_last_four" class="lock_1"><img class="icon-lock" src="../../static/phonenum/lock.png" alt=""></view>
						</view>
						<view class="subtitle">>>> 号码分析</view>
						<view lines="1" decode="true"
							class="paragraph_9"  v-if="!islock_last_four"><view  class="lock_2"></view>	
								事业】：若d想提升事业，并不容易，其先求站稳步伐，再图冲刺。
							</view>
							<view v-if="islock_last_four" class="paragraph_9" v-html="info.last_four.fx"></view>
						<view class="subtitle">>>> 潜在影响</view>
						<view  v-if="!islock_last_four" decode="true"
							class="paragraph_9"><view  class="lock_3"></view>
								【事业】：若d想提升事业，并不容易，其先求站稳步伐，再图冲刺。<br>
								【事业】：若d想提升事业，并不容易，其先求站稳步伐，再图冲刺。<br>
								【事业】：若d想提升事业，并不容易，其先求站稳步伐，再图冲刺。<br>
								【事业】：若d想提升事业，并不容易，其先求站稳步伐，再图冲刺。<br>
								【事业】：若d想提升事业，并不容易，其先求站稳步伐，再图冲刺。
							</view>
							<view   v-if="islock_last_four" class="paragraph_9" v-html="info.last_four.number_effect"></view>
						<view class="subtitle">>>> 卦象解释</view>
						<view lines="1" decode="true"  v-if="!islock_last_four"
							class="paragraph_9"><view  class="lock_3"></view>	
								【事业】：若d想提升事业，并不容易，其先求站稳步伐，再图冲刺。<br>
								【事业】：若d想提升事业，并不容易，其先求站稳步伐，再图冲刺。<br>
								【事业】：若d想提升事业，并不容易，其先求站稳步伐，再图冲刺。<br>
								【事业】：若d想提升事业，并不容易，其先求站稳步伐，再图冲刺。<br>
								【事业】：若d想提升事业，并不容易，其先求站稳步伐，再图冲刺。
							</view>
							<view v-if="islock_last_four" class="paragraph_9" v-html="info.last_four.jie_gua"></view>
					</view>
					<view class="text-wrapper_4">
						<view  class="titline"> 
							<img src="../../static/phonenum/phoneicon.png" class="icon_1" />
							<text lines="1" class="text_5">【{{phonenum}}】</text>
							<text lines="1" class="paragraph_1">六爻计算结果：</text>
							<view  v-if="!islock_sixyao" class="lock_4"><img class="icon-lock" src="../../static/phonenum/lock.png" alt=""></view>
						</view>

						<view lines="1" decode="true" class="text_6"><view  v-if="!islock_sixyao" class="lock_5"></view>【天时】<view :class="info.sixyao.tianshi=='大吉'?'col_red':(info.sixyao.tianshi=='迟吉'?'clo_org':'clo_black')">{{info.sixyao.tianshi}}</view> /【人和】<view :class="info.sixyao.renhe=='大吉'?'col_red':(info.sixyao.renhe=='迟吉'?'clo_org':'clo_black')">{{info.sixyao.renhe}}</view> /【地利】<view lines="1" :class="info.sixyao.dili=='大吉'?'col_red':(info.sixyao.dili=='迟吉'?'clo_org':'clo_black')">{{info.sixyao.dili}}</view></view>
						
					</view>
					<view class="batch_phone" @click="batch_check">
						
						<view><view>六爻批量验证</view><img v-if="false" class="icon-lock" src="../../static/phonenum/unlock.png" alt=""> </view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	
	import * as YYApi from '@/api/yingyong'
	import phonenum  from '@/components/phonenum'
	export default {
			components: {
			  phonenum
			},
		data() {
			return {
				islock_last_four:true,
				islock_sixyao:true,
				info:{},
				phonenum:''
			}
		},
		onLoad(options)
		{
			this.phonenum = options.phonenum;
			this.getres();
		},
		methods: {
			goback()
			{
				this.$navTo('pages/yingyong/yingyong')
			},
			batch_check()
			{
				this.$navTo('pages/phoneliuyao/phoneliuyao')
			},
			completeinput(phonenum)
			{
				this.phonenum = phonenum;
				
				this.getres();
				
			},
			getres()
			{
				
				console.log(this.phonenum);
				YYApi.phoneres({mobile:this.phonenum})
				  .then(result => {
					  this.info = result.data;
					  if(this.info.last_four.length==0)
					  {
						  uni.showModal({
						    title: '温馨提示',
						    content: '当前用户等级不足，只展示部分结果，请提升会员等级~',
						    // showCancel: false,
						    confirmText: "去升级",
						    cancelText: "再逛会",
						    success: res => {
						      if (res.confirm) {
						        uni.navigateTo({
						          url: "/pages/yingyong/yingyong?showupgrade=1"
						        })
						      }
						    }
						  })
						  
						  this.islock_last_four = false;
					  }
					  else
					  {
						  this.islock_last_four = true;
					  }
					  
					  if(this.info.sixyao.length==0)
					  {
						  this.islock_sixyao = false;
					  }
					  else
					  {
						  this.islock_sixyao = true;
					  }
					  
					  
					  console.log(this.info);
				  })
			}
		}
	}
</script>

<style>
	.page {
		background-color: rgba(255, 255, 255, 1.000000);
		position: relative;
		width: 750rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.box_1 {
		position: relative;
		background: url(../../static/phonenum/yinyang.png) -7rpx -2rpx no-repeat;
		background-size: 764rpx 1641rpx;
		display: flex;
		flex-direction: column;
	}

	.section_1 {
		width: 750rpx;
		height: 229rpx;
		display: flex;
		flex-direction: column;
	}

	.box_2 {
		width: 651rpx;
		height: 22rpx;
		flex-direction: row;
		display: flex;
		margin: 41rpx 0 0 70rpx;
	}

	.text_1 {
		width: 56rpx;
		height: 19rpx;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 28rpx;
		font-family: SFProText-Semibold;
		font-weight: 600;
		text-align: center;
		white-space: nowrap;
		line-height: 28rpx;
		margin-top: 1rpx;
	}

	.image_1 {
		width: 32rpx;
		height: 20rpx;
		margin: 1rpx 0 0 475rpx;
	}

	.image_2 {
		width: 29rpx;
		height: 20rpx;
		margin-left: 9rpx;
	}


	.group_1 {
		background-color: rgba(0, 0, 0, 1.000000);
		border-radius: 2rpx;
		width: 34rpx;
		height: 14rpx;
		display: flex;
		flex-direction: column;
		margin: 4rpx 0 0 4rpx;
	}

	.nav-bar_1 {
		height: 93rpx;
		display: flex;
		width: 750rpx;
		margin: 26rpx 0 47rpx 0;
		color: rgba(230, 0, 18, 1);
		font-size: 40rpx;
		padding: 0 30rpx;
	}

	.nav-bar_1>view {
		display: inline-block;
	}

	.arr-right {
		margin-right: 180rpx;
	}

	.text_2 {
		width: 386rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(230, 0, 18, 1);
		font-size: 40rpx;
		font-family: FZQKBYSJW--GB1-0;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 40rpx;
		margin: 31rpx 0 0 81rpx;
	}

	.text_3 {
		width: 121rpx;
		height: 21rpx;
		overflow-wrap: break-word;
		color: rgba(34, 24, 21, 1);
		font-size: 22rpx;
		font-family: FZLTHK--GBK1-0;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		margin: 23rpx 0 6rpx 313rpx;
	}

	.section_2 {
		position: relative;
		width: 750rpx;
		height: 257rpx;
		margin-top: 1009rpx;
		display: flex;
		flex-direction: column;
	}

	.text-wrapper_1 {
		width: 574rpx;
		height: 92rpx;
		overflow-wrap: break-word;
		
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
		line-height: 26rpx;
		margin: 20rpx 0 0 0;
	}

	.text_4 {
		width: 574rpx;
		height: 92rpx;
		overflow-wrap: break-word;
		color: rgba(230, 0, 18, 1);
		font-size: 26rpx;
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
	}

	.text_5 {
		overflow-wrap: break-word;
		color: rgba(35, 24, 21, 1);
		font-size: 30rpx;
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
	}

	.paragraph_1 {
		overflow-wrap: break-word;
		color: rgba(230, 0, 18, 1);
		font-size: 26rpx;
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
	}

	.text_6 {
		width: 574rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(0, 160, 233, 1);
		font-size: 28rpx;
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
		display: flex;
	}
	
	.col-green
	{
		color: green;
	}
	
	.col_red
	{
		color:red;
		
	}
	
	.clo_org
	{
		color:orange;
	}
	
	
	.clo_black
	{
		color:black;
	}

	.text_7 {
		width: 574rpx;
		overflow-wrap: break-word;
		color: rgba(230, 0, 18, 1);
		font-size: 28rpx;
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
	}

	.paragraph_2 {
		width: 574rpx;
		overflow-wrap: break-word;
		color: rgba(0, 160, 233, 1);
		font-size: 28rpx;
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
	}

	.icon_1 {
		width: 42rpx;
		height: 37rpx;
		align-items: center;
		margin-right: 10rpx;
	}

	.wuxing {

		width: 600rpx;
		margin: 0 auto;
		text-align: center;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100rpx;
	}

	.wuxing>view {
		display: flex;
		justify-content: space-between;
	}

	.wuxing>view>view {
		width: 100rpx;
	}

	.section_3 {
		margin:0 auto;
		width: 704rpx;
		display: flex;
		flex-direction: column;
	}
	
	.top
	{
		background: url(../../static/phonenum/top.png) 100% no-repeat;
		background-size: 100% 100%;
		padding-bottom: 40rpx;
	}
	
	.bottom
	{
		margin-top:40rpx;
		background: url(../../static/phonenum/bottom.png) 100% no-repeat;
		background-size: 100% auto;
		background-position-y: top;
	}

	.image_3 {
		width: 532rpx;
		height: 63rpx;
		margin: 13rpx 0 0 82rpx;
	}

	.button_1 {

		background-color: rgba(230, 0, 18, 1);
		
		width: 110rpx;
		color: #fff;
		height: auto;
		padding: 10rpx 0;
		text-align: center;
		border-radius: 10rpx;
		margin: 40rpx auto 40rpx auto;
		font-size: 32rpx;
		font-family: FZQKBYSJW--GB1-0;
		  font-weight: normal;
	}

	.text_12 {
		width: 65rpx;
		height: 33rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		font-family: FZQKBYSJW--GB1-0;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 32rpx;
		margin: 10rpx 0 0 22rpx;
	}

	.text-wrapper_2 {
		width: 250rpx;
		height: 70rpx;
		background: url(../../static/phonenum/taiji.png) 100% no-repeat;
		background-size: 100% 100%;
		flex-direction: row;
		display: flex;
		margin: 26rpx 0 0 225rpx;
	}

	.text_13 {
		width: 74rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(104, 103, 103, 1);
		font-size: 26rpx;
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
		margin: 23rpx 0 0 27rpx;
	}

	.text_14 {
		width: 76rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(237, 237, 237, 1);
		font-size: 26rpx;
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 26rpx;
		margin: 23rpx 25rpx 0 48rpx;
	}

	.image_4 {
		width: 565rpx;
		height: 70rpx;
		margin: 26rpx 0 0 67rpx;
	}

	.paragraph_3 {
		width: 557rpx;
		height: 74rpx;
		overflow-wrap: break-word;
		color: rgba(34, 24, 21, 1);
		font-size: 24rpx;
		font-family: FZLTHK--GBK1-0;
		font-weight: normal;
		text-align: left;
		line-height: 26rpx;
		margin: 33rpx 0 0 66rpx;
	}

	.text-wrapper_3 {
		width: 600rpx;
		overflow-wrap: break-word;
		
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
		line-height: 26rpx;
		margin: 30rpx 0 0 53rpx;
	}

	.text_15 {
		overflow-wrap: break-word;
		color: rgba(230, 0, 18, 1);
		font-size: 26rpx;
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
	}

	.text_16 {
		overflow-wrap: break-word;
		color: rgba(230, 0, 18, 1);
		font-size: 30rpx;
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
	}

	.text_17 {
		padding:0 16rpx;
		overflow-wrap: break-word;
		color: rgba(34, 24, 21, 1);
		font-size: 32rpx;
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
	}

	.text_18 {
		overflow-wrap: break-word;
		color: rgba(230, 0, 18, 1);
		font-size: 32rpx;
		font-family: FZQKBYSJW--GB1-0;;
		font-weight: normal;
		text-align: left;
	}

	.paragraph_4 {
		width: 600rpx;
		overflow-wrap: break-word;
		color: rgba(230, 0, 18, 1);
		font-size: 32rpx;
		font-family: FZQKBYSJW--GB1-0;
		font-weight: normal;
		text-align: left;
	}

	.paragraph_5 {
		width: 600rpx;
		overflow-wrap: break-word;
		color: rgba(34, 24, 21, 1);
		font-size: 24rpx;
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
	}

	.paragraph_6 {
		width: 600rpx;
		overflow-wrap: break-word;
		color: rgba(34, 24, 21, 1);
		font-size: 24rpx;
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
		line-height: 1.8;
	}

	.text-wrapper_4 {
		width: 600rpx;
		overflow-wrap: break-word;
		
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
		line-height: 26rpx;
		margin: 32rpx 0 40rpx 53rpx;
	}

	.text_19 {
		overflow-wrap: break-word;
		color: rgba(230, 0, 18, 1);
		font-size: 26rpx;
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
	}

	.text_20 {
		overflow-wrap: break-word;
		color: rgba(230, 0, 18, 1);
		font-size: 30rpx;
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
	}

	.text_21 {
		overflow-wrap: break-word;
		color: rgba(34, 24, 21, 1);
		font-size: 32rpx;
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
	}

	.text_22 {
		overflow-wrap: break-word;
		color: rgba(230, 0, 18, 1);
		font-size: 32rpx;
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
	}

	.paragraph_7 {
		overflow-wrap: break-word;
		color: rgba(230, 0, 18, 1);
		font-size: 32rpx;
		font-family: FZQKBYSJW--GB1-0;
		font-weight: normal;
		text-align: left;
	}

	.paragraph_8 {
		overflow-wrap: break-word;
		color: rgba(34, 24, 21, 1);
		font-size: 24rpx;
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
	}

	.paragraph_9 {
		overflow-wrap: break-word;
		color: rgba(34, 24, 21, 1);
		font-size: 24rpx;
		font-family: SimHei;
		font-weight: normal;
		text-align: left;
		position: relative;
		line-height: 1.8;
	}
	
	.titline
	{
		display: flex;
		align-items: center;
		align-content: center;
		margin: 20rpx 0;
	}

	.lock_1
	{
		position: absolute;
		left: 270rpx;
		width: 280rpx;
		backdrop-filter: blur(5px);
		display: flex;
		align-items: center;
	}
	
	.icon-lock
	{
		width:35rpx;
		height:40rpx;
	}
	
	.lock_2
	{
		backdrop-filter: blur(5px);
		height:100%;
		width: 100%;
		position: absolute;
	}
	
	.subtitle
	{
		font-weight: 700;
		font-size: 28rpx;
		margin: 10rpx 0;
		
	}
	
	.lock_3
	{
		backdrop-filter: blur(5px);
		height:100%;
		width: 100%;
		position: absolute;
	}
	
	
	.lock_5
	{
		backdrop-filter: blur(5px);
		height:100rpx;
		width: 100%;
		position: absolute;
	}
	
	.batch_phone
	{
		padding-top: 80rpx;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		width: 600rpx;
		margin:0 auto;
		text-align: center;
		margin-bottom: 150rpx;
	}
	
	.batch_phone>view
	{
		background-color: rgba(153, 0, 12, 1.0);
		color:#fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding:10rpx 0;
		border-radius: 10rpx;
		font-size: 32rpx;
	}
	
	.batch_phone img
	{
		margin-left:40rpx;
		align-self: center;
	}
	
</style>
