You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
3.7 KiB
Vue
159 lines
3.7 KiB
Vue
<template>
|
|
<view class="main">
|
|
<view class="logo">
|
|
<image src="@/static/image/logo2.png" mode="scaleToFill" class="img" />
|
|
</view>
|
|
<view class="container">
|
|
<view>
|
|
<view class="title">注册手机号</view>
|
|
<view class="info">
|
|
<view class="item">
|
|
<view class="name">手机号</view>
|
|
<u--input
|
|
placeholder="请输入手机号"
|
|
border="none"
|
|
v-model="phone"
|
|
@change="changePhone"
|
|
clearable
|
|
type="number"
|
|
@blur="checkPhone"
|
|
@confirm="checkPhone"
|
|
></u--input>
|
|
</view>
|
|
<view class="item">
|
|
<view class="name">确定手机号</view>
|
|
<u--input
|
|
placeholder="请输入手机号"
|
|
border="none"
|
|
v-model="determinePhone"
|
|
@change="changeDeterminePhone"
|
|
clearable
|
|
type="number"
|
|
@blur="checkPhone"
|
|
@confirm="checkPhone"
|
|
></u--input>
|
|
<view class="right" v-show="isRight" :style="{background: !isTrue?'#76c458':'#FF0000'}">
|
|
<u-icon name="checkmark-circle" color="#fff" v-if="!isTrue"></u-icon>
|
|
<u-icon name="close-circle" color="#fff" v-else></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-button text="下一步" color="#76C458" shape="circle" style="width: 284rpx;" @click="next"></u-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
phone: "",
|
|
determinePhone: "",
|
|
isTrue: false,
|
|
isRight: false
|
|
};
|
|
},
|
|
methods: {
|
|
changePhone(value) {
|
|
this.phone = value;
|
|
},
|
|
changeDeterminePhone(value) {
|
|
this.isRight = true;
|
|
this.determinePhone = value;
|
|
if (this.phone !== value) {
|
|
this.isTrue = true;
|
|
} else {
|
|
this.isTrue = false;
|
|
}
|
|
},
|
|
checkPhone(event) {
|
|
if (event) {
|
|
this.$common.vefTel(event);
|
|
}
|
|
},
|
|
next() {
|
|
uni.navigateTo({
|
|
url: "/pages/realName/realName"
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
box-sizing: border-box;
|
|
}
|
|
.main {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
.logo {
|
|
height: 200rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.img {
|
|
width: 124rpx;
|
|
height: 72rpx;
|
|
}
|
|
}
|
|
.container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
height: calc(100vh - 200upx);
|
|
width: 100%;
|
|
background: #fff;
|
|
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
|
padding: 62rpx 32rpx;
|
|
.title {
|
|
color: #626262;
|
|
font-size: 40rpx;
|
|
margin-left: 36rpx;
|
|
}
|
|
.info {
|
|
margin-top: 90rpx;
|
|
.item {
|
|
box-sizing: border-box;
|
|
background: #f8f8f8;
|
|
border-radius: 20rpx;
|
|
width: 100%;
|
|
height: 92rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 24rpx;
|
|
margin-bottom: 20rpx;
|
|
.name {
|
|
width: 200rpx;
|
|
height: 72rpx;
|
|
line-height: 72rpx;
|
|
border-right: 1rpx solid #d1d1d1;
|
|
}
|
|
/deep/ .u-input {
|
|
margin-left: 40rpx;
|
|
}
|
|
.right {
|
|
position: relative;
|
|
width: 70rpx;
|
|
height: 100%;
|
|
|
|
/deep/ .u-icon {
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
left: 50%;
|
|
top: 35%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |