<template>
<view>
<view class="view-container">
<scroll-view scroll-y="true" class="view-scorll">
<view class="div-view" v-if="stepIndex==0">
<view class="cell-view">
<text class="star-ind"></text>
<text class="left-lable">文本框一</text>
<view class="sep-view"></view>
<input class="value-lable big-width" data-id="landCode" type="text" value="" placeholder="请输入" @blur="textFieldInputed" />
</view>
<view class="cell-view">
<text class="star-ind"></text>
<text class="left-lable">文本框二</text>
<view class="sep-view"></view>
<input class="value-lable big-width" data-id="code" type="text" value="" placeholder="请输入" @blur="textFieldInputed" />
</view>
<view class="cell-view">
<text class="star-ind"></text>
<text class="left-lable">文本框三</text>
<view class="sep-view"></view>
<input class="value-lable big-width" data-id="boatNation" type="text" value="" placeholder="请输入" @blur="textFieldInputed" />
</view>
</view>
<view class="div-view" v-else-if="stepIndex==1">
<view class="cell-view">
<text class="star-ind"></text>
<text class="left-lable">文本框一</text>
<view class="sep-view"></view>
<input class="value-lable big-width" data-id="homePhone" type="text" :value="stepData.homePhone" placeholder="请输入家庭电话号码" @blur="textFieldInputed" />
</view>
<view class="cell-view">
<text class="star-ind"></text>
<text class="left-lable">文本框二</text>
<view class="sep-view"></view>
<input class="value-lable big-width" data-id="phone" type="text" :value="stepData.phone" placeholder="港澳手机号码" @blur="textFieldInputed" />
</view>
<view class="cell-view">
<text class="star-ind"></text>
<text class="left-lable">文本框三</text>
<view class="sep-view"></view>
<input class="value-lable big-width" data-id="nationPhone" type="text" :value="stepData.nationPhone" placeholder="请输入内地手机号码" @blur="textFieldInputed" />
</view>
<view class="cell-view">
<text class="star-ind">*</text>
<text class="left-lable">文本框四</text>
<view class="sep-view"></view>
<input class="value-lable big-width" data-id="nationPhone" type="text" :value="stepData.nationPhone" placeholder="请输入内地手机号码" @blur="textFieldInputed" />
</view>
</view>
</scroll-view>
<view v-if="stepIndex<3" class="next-view" style="width:100%;left: 0;" @click="nextStepAction">
<text class="l-title">下一步</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
stepData: {
},
stepIndex: 0,
};
},
onLoad(options) {
this.initData()
},
computed: {
},
methods: {
initData: function() {
},
textFieldInputed: function(e) {
let key = e.currentTarget.dataset.id
let value = e.detail.value
this.stepData[key] = value
},
nextStepAction: function() {
this.stepIndex = Math.min(1,this.stepIndex+1)
}
}
}
</script>
<style lang="less">
.view-navbar {
position: fixed;
width: 100%;
height: calc(var(--status-bar-height) + 44px);
z-index: 2;
background-color: white;
border-bottom: 1upx solid rgb(245, 245, 245);
.nav-view {
position: absolute;
top: var(--status-bar-height);
width: 100%;
height: 44px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.back-view {
position: absolute;
top: 12px;
left: 15px;
width: 18px;
height: 18px;
z-index: 100;
}
.nav-title {
position: absolute;
width: 100%;
height: 44px;
line-height: 44px;
color: black;
font-size: 18px;
text-align: center;
box-sizing: 1;
}
}
}
.view-container {
position: fixed;
top: calc(var(--status-bar-height) + 44px);
// bottom: 0;
height: calc(100% - var(--status-bar-height) - 44px);
width: 100%;
z-index: 1;
overflow-y: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.view-scorll {
position: relative;
width: 100%;
height: calc(100% - 230upx - 88upx);
.div-view {
position: absolute;
width: 100%;
// height: 100upx;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.cell-view {
position: relative;
width: calc(100% - 44upx);
height: auto;
border-bottom: 1upx solid rgb(245, 245, 245);
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
.left-lable {
position: relative;
width: 240upx;
font-size: 32upx;
left: 15upx;
color: rgba(52, 52, 52, 1);
min-width: 240upx;
}
.star-ind {
position: relative;
left: 15upx;
color: red;
width: 15upx;
font-size: 16upx;
}
.value-lable {
position: relative;
height: 100upx;
line-height: 100upx;
font-size: 32upx;
color: rgba(154, 154, 154, 1);
text-align: right;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
.check-box {
position: relative;
width: 45%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
image {
position: relative;
width: 40upx;
height: 40upx;
}
text {
position: relative;
padding-left: 14upx;
font-size: 28upx;
color: black;
}
}
}
.vl-width {
width: calc(100% - 240upx - 26upx - 24upx);
}
.big-width {
width: calc(100% - 240upx - 21upx - 24upx);
}
.sgg-width {
width: calc(100% - 240upx - 115upx);
}
.right-ic {
position: relative;
left: 24upx;
width: 26upx;
height: 26upx;
}
.right-uts {
position: relative;
left: 24upx;
font-size: 32upx;
color: black;
}
.sep-view {
position: relative;
width: 1upx;
height: 65%;
background-color: rgb(245, 245, 245);
margin-left: 10upx;
margin-right: 10upx;
}
.v-input {}
}
.tip-view {
position: relative;
width: calc(100% - 44upx);
padding: 20upx 0upx;
.tip-ic {
position: relative;
width: 104upx;
}
.tip-text {
position: relative;
font-size: 22upx;
color: black;
}
}
.sep-view {
width: 100%;
height: 22upx;
background-color: rgb(245, 245, 245);
}
.photo-view {
position: relative;
width: calc(100% - 44upx);
height: auto;
padding-bottom: 20upx;
.sect-view {
position: relative;
width: 100%;
height: 104upx;
line-height: 104upx;
font-size: 30upx;
color: black;
}
.php-view {
position: relative;
width: 100%;
height: 200upx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.one-php {
position: relative;
width: calc(50% - 17upx);
height: 100%;
background-color: rgb(239, 248, 255);
border-radius: 16upx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.cer-ic {
position: absolute;
width: 100%;
height: 100%;
border-radius: 16upx;
}
.cer-ic-indi {
position: relative;
width: 42%;
}
.cer-text {
position: relative;
width: 100%;
padding-top: 12upx;
font-size: 24upx;
color: rgba(13, 98, 255, 1);
text-align: center;
}
}
}
}
.apply-sign-view {
position: relative;
width: calc(100% - 44upx);
height: 88upx;
line-height: 88upx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.l-title {
position: relative;
font-size: 32upx;
color: black;
}
.to-sign-view {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.icon {
width: 30upx;
height: 30upx;
margin-right: 12upx;
}
.text {
font-size: 26upx;
color: rgba(13, 98, 255, 1);
}
}
}
.sign-view {
position: relative;
width: calc(100% - 44upx);
height: 130vw;
margin: 44upx 0upx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(239, 248, 255, 1);
border: 1upx solid rgba(0, 144, 255, 1);
border-radius: 12upx;
.sign-text {
font-size: 74upx;
color: rgb(208, 223, 255);
text-align: center;
font-weight: bold;
}
canvas {
position: absolute;
background-color: transparent;
width: 100%;
// margin: 0 25upx;
height: 100%;
}
}
}
}
.next-view {
position: relative;
width: 100%;
height: 88upx;
line-height: 88upx;
// margin: 22upx 0upx;
text-align: center;
background-color: rgb(12, 97, 255);
color: white;
font-size: 26upx;
}
.sign-btn-view {
position: relative;
width: 100%;
height: 100upx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
.re-sign-btn {
position: relative;
width: 50%;
height: 100upx;
line-height: 100upx;
font-size: 34upx;
color: black;
text-align: center;
}
.ok-sign-btn {
position: relative;
width: 50%;
height: 100upx;
line-height: 100upx;
font-size: 34upx;
color: white;
background-color: rgba(0, 144, 255, 1);
text-align: center;
}
}
}
</style>