You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
cesuan/pages/phonenum/phonenum.vue

797 lines
17 KiB

1 year ago
<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>