277 lines
8.0 KiB
Vue
277 lines
8.0 KiB
Vue
<template>
|
|
<!-- login页面 -->
|
|
<view>
|
|
<view class="login">
|
|
<view class="content">
|
|
<view class="title">请绑定手机号</view>
|
|
<view class="labales">
|
|
<input type="number" maxlength="11" v-model="phone" placeholder="手机号" />
|
|
</view>
|
|
<view class="labales flex-inp">
|
|
<input type="number" maxlength="6" placeholder="请输入验证码" v-model="sms_code" />
|
|
<u-button id="btn" class="identifying" :hair-line="false" hover-class="none" :class="is_sendcode ? 'sended' : ''" @click="getCode" :disabled="is_sendcode">{{ is_sendcode ? time_count + "后可以重新发送" : "发送验证码" }}</u-button>
|
|
</view>
|
|
<!-- 服务协议 -->
|
|
<view class="pact">
|
|
<checkbox-group @change="change">
|
|
<checkbox class="check-tit" color="#1ADE00" :checked="checked" />
|
|
</checkbox-group>
|
|
<text>我已详细阅读并同意</text>
|
|
<text class="pact_text" v-for="(item,index) in pactList" :key="index" @click="infoPact(index)">
|
|
{{ item }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<!-- denglu QQ weixin -->
|
|
<view class="btn-login" @click="bindPhone">{{login}}</view>
|
|
<u-toast ref="uToast" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
phone: "",
|
|
sms_code: "",
|
|
login: '绑定',
|
|
show: true,
|
|
checked: false,
|
|
// 时间
|
|
timer: null,
|
|
is_sendcode: false, // 60s
|
|
time_count: 60,
|
|
pactList: [ "《用户协议》", "《隐私协议》" ],
|
|
};
|
|
},
|
|
methods: {
|
|
// 勾选协议
|
|
change(e) {
|
|
this.checked = !this.checked;
|
|
console.log(this.checked);
|
|
},
|
|
// 获取验证码
|
|
getCode() {
|
|
if (this.$u.test.isEmpty(this.phone)) {
|
|
this.$refs.uToast.show({
|
|
title: '手机号格式不能为空！',
|
|
type: 'error',
|
|
})
|
|
return;
|
|
}
|
|
if(!(/^1[3456789]\d{9}$/.test(this.phone))){
|
|
this.$refs.uToast.show({
|
|
title: '手机号格式不正确！',
|
|
type: 'warning',
|
|
})
|
|
return;
|
|
}
|
|
this.$u.api.sendSmsCode({
|
|
member_mobile: this.phone,
|
|
smslog_type: 4,
|
|
}).then(res => {
|
|
if (res.errCode == 0) {
|
|
console.log(res);
|
|
this.$refs.uToast.show({
|
|
title: res.message,
|
|
type: 'success',
|
|
})
|
|
// 发送验证码
|
|
this.getSendCode();
|
|
} else {
|
|
this.$refs.uToast.show({
|
|
title: res.message,
|
|
type: 'warning',
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 绑定手机号
|
|
bindPhone() {
|
|
if (this.$u.test.isEmpty(this.phone)) {
|
|
this.$refs.uToast.show({
|
|
title: '手机号不能为空！',
|
|
type: 'error',
|
|
})
|
|
return;
|
|
}
|
|
if(!(/^1[3456789]\d{9}$/.test(this.phone))){
|
|
this.$refs.uToast.show({
|
|
title: '手机号格式不正确！',
|
|
type: 'warning',
|
|
})
|
|
return;
|
|
}
|
|
if(this.$u.test.isEmpty(this.sms_code)){
|
|
this.$refs.uToast.show({
|
|
title: '验证码不能为空！',
|
|
type: 'warning',
|
|
})
|
|
return;
|
|
}
|
|
if(this.sms_code.length == 0){
|
|
this.$refs.uToast.show({
|
|
title: '验证码有误！',
|
|
type: 'warning',
|
|
})
|
|
return;
|
|
}
|
|
if(!this.checked){
|
|
this.$refs.uToast.show({
|
|
title: '请同意协议！',
|
|
type: 'warning',
|
|
})
|
|
return;
|
|
}
|
|
this.$u.api.mobileBind({
|
|
member_mobile: this.phone,
|
|
sms_code: this.sms_code,
|
|
}).then(res => {
|
|
console.log(res);
|
|
if (res.errCode == 0) {
|
|
this.$refs.uToast.show({
|
|
title: res.message,
|
|
type: 'success',
|
|
})
|
|
uni.navigateTo({
|
|
url: '/pageA/topick/topick'
|
|
});
|
|
} else {
|
|
this.$refs.uToast.show({
|
|
title: res.message,
|
|
type: 'warning',
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 协议详情
|
|
infoPact(index) {
|
|
// console.log(index);
|
|
uni.navigateTo({
|
|
url: '/pageA/pactList/pactList?index=' + index
|
|
});
|
|
},
|
|
// 60s
|
|
getSendCode() {
|
|
const TIME_COUNT = 60;
|
|
if (!this.timer) {
|
|
this.time_count = TIME_COUNT;
|
|
this.is_sendcode = true;
|
|
this.timer = setInterval(() => {
|
|
if (this.time_count > 0 && this.time_count <= TIME_COUNT) {
|
|
this.time_count--;
|
|
} else {
|
|
this.is_sendcode = false;
|
|
clearInterval(this.timer);
|
|
this.timer = null;
|
|
}
|
|
}, 1000);
|
|
}
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
page {
|
|
background-color: #fff;
|
|
}
|
|
|
|
.title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 150rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.content {
|
|
width: 630rpx;
|
|
z-index: 99999;
|
|
margin: 0 auto;
|
|
padding-top: 130rpx;
|
|
|
|
.labales {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
border-bottom: 1px #BFBFBF solid;
|
|
input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.flex-inp {
|
|
justify-content: space-between;
|
|
margin-top: 70rpx;
|
|
}
|
|
|
|
.labales text {
|
|
font-size: 30rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.identifying {
|
|
flex-shrink: 0;
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
color: #FF780F !important;
|
|
border: none;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.sended {
|
|
color: #666 !important;
|
|
}
|
|
|
|
}
|
|
|
|
.pact {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
margin: 20rpx 0;
|
|
&>text {
|
|
font-size: 22rpx;
|
|
font-weight: 400;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.check-tit {
|
|
font-size: 20rpx;
|
|
}
|
|
|
|
::v-deep uni-checkbox .uni-checkbox-input {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
border-color: #d1d1d1 !important;
|
|
border-radius: 50% !important;
|
|
}
|
|
|
|
::v-deep uni-checkbox .uni-checkbox-input-checked:before {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.pact_text {
|
|
font-size: 22px;
|
|
font-weight: 400;
|
|
color: rgba(129, 188, 253, 1) !important;
|
|
}
|
|
|
|
.btn-login {
|
|
width: 650rpx;
|
|
height: 90rpx;
|
|
margin: 300rpx auto 0;
|
|
text-align: center;
|
|
line-height: 90rpx;
|
|
color: #fff;
|
|
font-size: 34rpx;
|
|
border-radius: 50rpx !important;
|
|
background-color: #FF780F;
|
|
}
|
|
|
|
button::after{ border: none; }
|
|
</style>
|