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.

173 lines
3.9 KiB

<template>
<view class="content">
<view class="applyForm">
<view class="formCol">
<view class="title"><image src="../../static/icon_xingming@2x.png"></image><text>真实姓名</text></view>
<view class="formOuter">
<input type="text" v-model="info.name" />
</view>
</view>
<view class="formCol">
<view class="title"><image src="../../static/icon_shouji@2x.png"></image><text>手机号码</text></view>
<view class="formOuter">
<input type="text" v-model="info.phone" />
</view>
</view>
<view class="formCol">
<view class="title"><image src="../../static/icon_code.png"></image><text>验证码</text></view>
<view class="formOuter">
<input type="text" v-model="info.code" />
<view class="sentCode" @click="sendCode" style="z-index: 10;">{{time == 60 ? '发送验证码' : `${time}s`}}</view>
</view>
</view>
<!-- <navigator url=""> -->
<view class="pinkBtn" @click="save"></view>
<!-- </navigator> -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
info: {
phone: '',
},
time: 60,
timeClock: null,
}
},
onLoad() {
this.checkLogin()
},
methods: {
save() {
if (!this.info.name) {
this.alert('请输入姓名')
return
}
if (!this.info.phone) {
this.alert('请输入手机号')
return
}
if (!this.info.phone.match(/^1\d{10}/)) {
this.alert('手机号格式不正确')
return
}
if (!this.info.code) {
this.alert('请输入验证码')
return
}
this.sendReq('/api/member/registered-promotion', this.info, (r) => {
if (r) {
uni.navigateTo({
url: '../regSuccess/regSuccess'
})
} else {
this.alert(r.data.msg)
}
})
},
sendCode() {
if (this.time != 60 || this.timeClock) {
return
}
if (!this.info.phone) {
this.alert('请输入手机号')
return
}
if (!this.info.phone.match(/^1\d{10}/)) {
this.alert('手机号格式不正确')
return
}
uni.request({
url: this.baseUrl + '/api/member/get-captcha',
method: 'POST',
data: {phone: this.info.phone},
success: (r) => {
if (r.data.status === 1) {
this.alert('验证码发送成功')
this.timeClock = setInterval(() => {
if (this.time <= 0) {
this.time = 60
clearInterval(this.timeClock)
this.timeClock = null
} else {
this.time--
}
}, 1000)
} else {
this.alert(r.data.msg)
}
}
})
}
}
}
</script>
<style>
page{background: #fff;}
</style>
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.applyForm{
width:100%;
padding:0 40rpx;
box-sizing: border-box;
.title{
margin-top:40rpx;
font-size: 32rpx;
font-weight: 500;
color: #333333;
display: flex;
justify-content: flex-start;
align-items: center;
align-content: center;
image{width:32rpx;height:32rpx;display: block;margin-right:15rpx;}
}
.formOuter{
position: relative;
box-sizing: border-box;
height: 84rpx;
border-radius: 7rpx;
border: 1rpx solid #DEDEDE;
width:100%;
margin-top:40rpx;
input{
position: absolute;
width:100%;
height:100%;
top:0;left:0;
box-sizing: border-box;
padding:0 32rpx;
font-size: 28rpx;
font-weight: 400;
color: #333333;
}
.sentCode{width:180rpx;height:83rpx;border-radius: 7rpx;text-align: center;line-height: 83rpx;background: #FF447B;color:#fff;font-size:28rpx;position: absolute;right:0;bottom:0;}
}
.pinkBtn{
width: 670rpx;
height: 88rpx;
background: linear-gradient(90deg, #FF7E95 0%, #FF447B 100%);
border-radius: 44rpx;
font-size: 36rpx;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height:88rpx;
margin:80rpx auto;
}
}
</style>