deming/pageA/register/register.vue
zmr900709 b04b2ffd16 vuex
2020-07-15 16:52:39 +08:00

446 lines
8.7 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<!-- login页面 -->
<view>
<view class="login">
<image class="images" src="../../static/pageA/loginbackground.png"></image>
<view class="backes"></view>
<view class="content">
<view class="title">手机注册</view>
<view class="labales phones">
<!-- <text></text> -->
<input type="tel" placeholder="请输入您的手机号" v-model="member_mobile" />
</view>
<view class="labales">
<!-- <text></text> -->
<input type="tel" placeholder="请输入验证码" v-model="sms_code" />
<!-- <text class="identifying" @click="apiwelcome()">获取验证码</text> -->
<!-- 验证码接口的引入 -->
<identifying @tochange="tochange" :smslog_type="smslog_type" :member_mobile="member_mobile" ></identifying>
</view>
<!-- 服务协议 -->
<view class="pact">
<view></view>
<text>我已详细阅读并同意</text>
<text class="pact_text" v-for="(item,index) in pact_text" :key="index" @click="pact_click(index)"> {{item.text}} </text>
<u-checkbox-group @change="checkboxGroupChange" size="27">
<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.name"
shape="circle" size="14" active-color="#19BE6B" ></u-checkbox>
</u-checkbox-group>
</view>
</view>
<!-- 注册 -->
<view class="more_Login">
<text></text>
<text class="other" @click="mask_u">其他方式登录</text>
</view>
<!-- denglu QQ weixin -->
<view class="u-btn" @click="loginIn">{{login}}</view>
<u-mask :show="show" @click="show = false">
<view class="warp">
<view class="rect" @tap.stop>
<view class="rect_view">
<image src="../../static/pageA/qq.png" class="image"></image>
<view>QQ登录</view>
</view>
<view class="rect_view">
<image src="../../static/pageA/weixin.png" class="image"></image>
<view>微信登录</view>
</view>
<view class="rect_butoon" @click="show = false">取消</view>
</view>
</view>
</u-mask>
</view>
<!-- 提示框 -->
<u-toast ref="uToast" />
</view>
</template>
<script>
import identifying from '@/components/logininput/identifying'
export default {
data() {
return {
list: [{
checked: true,
disabled: false
}],
value: '',
login: '注册',
show: false,
member_mobile: '', //手机号
smslog_type : '1',//状态
sms_code : '', //验证码
// 协议渲染
pact_text: [{
"id": '1',
"text": "《用户协议》"
}, {
"id": '2',
"text": "《隐私协议》"
}, {
"id": '3',
"text": "《使用协议》"
},
]
};
},
onLoad() {
},
methods: {
// 协议跳转
pact_click(index){
console.log(index)
uni.navigateTo({
url: '/pageA/pactList/pactList?index=' + index
});
},
// 用户注册
loginIn(){
let type_phone = this.$u.test.mobile( this.member_mobile)
if( this.member_mobile == ''){
this.$refs.uToast.show({
title: '手机号不能为空',
type: 'error'
})
return false;
}
if (type_phone == false) {
this.$refs.uToast.show({
title: '手机号格式不正确',
type: 'error'
});
return false;
}
if( this.sms_code == ''){
this.$refs.uToast.show({
title: '验证码不能为空',
type: 'error'
})
return false;
}
this.$u.api.phoneRegister({
member_mobile: this.member_mobile,
sms_code: this.sms_code
}).then((res) => {
console.log('3333333333',res);
// 校验手机号
// console.log(res)
if(res.errCode == 0){
// 缓存用户的信息
uni.setStorage({
key: 'token',
data: res.data.token,
success: function () {
console.log('success');
// 跳转选择页面
uni.navigateTo({
url : '/pageA/topick/topick'
})
}
});
// 注册返回参数
// this.$refs.uToast.show({
// title: res.message,
// type: 'success',
// url: '/pageA/topick/topick'
// })
}
if(res.errCode == 1){
this.$refs.uToast.show({
title: res.message,
type: 'error'
})
}
if(res.errCode == 2){
this.$refs.uToast.show({
title: res.message,
type: 'primary',
url: '/pageA/login/login'
})
}
})
},
// 选中某个复选框时由checkbox时触发
checkboxChange(e) {
//console.log(e);
},
// 选中任一checkbox时由checkbox-group触发
checkboxGroupChange(e) {
// console.log(e);
},
mask_u() {
this.show = !this.show
},
// 注册接口
tochange() {
// console.log("调用父组件的方法")
// console.log('2222',this._data.member_mobile)
let member_mobile = this._data.member_mobile
}
},
components: {
identifying
}
};
</script>
<style lang="scss" scoped>
.login {
// background: url(../../static/pageA/loginbackground.png) no-repeat!important;
.images {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
}
.backes {
background: rgba(0, 0, 0, 0.4);
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
}
text {
z-index: 9;
color: #fff;
}
.more_Login {
overflow: hidden;
zoom: 1;
width: 630rpx;
margin: 0 auto;
}
.more_Login text {
display: inline-block;
width: 50%;
float: left;
font-size: 30rpx;
color: rgba(255, 255, 255, 1);
line-height: 36px;
margin: 97rpx 0;
}
.more_Login .other {
text-align: right;
}
}
.title {
font-size: 36rpx;
font-weight: bold;
margin-bottom: 150rpx;
color: #fff;
}
.content {
width: 630rpx;
z-index: 99999;
margin: 0 auto;
padding-top: 130rpx;
.labales text {
font-size: 30rpx;
}
.labales {
border-bottom: 1px #fff solid;
margin-bottom: 20rpx;
height: 70rpx;
line-height: 70rpx;
color: #fff;
}
.labales {
position: relative;
}
.identifying {
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size: 30rpx;
font-weight: 500;
color: rgba(255, 120, 15, 1);
line-height: 20px;
}
}
.uni-input-input,
.uni-input-placeholder {
color: #fff!important;
letter-spacing: 2rpx;
}
.u-checkbox-group {
position: absolute;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
.u-checkbox__icon--square {
border-radius: 50rpx !important;
width: 22rpx;
height: 22rpx;
}
.u-btn {
width: 628rpx;
height: 98rpx;
background: rgba(255, 120, 15, 1) !important;
border-radius: 49rpx;
margin: 0 auto;
font-size: 36rpx;
color: rgba(255, 255, 255, 1) !important;
line-height: 98rpx;
border: 1px #ff780f solid;
outline: none;
border-color: rgba(255, 120, 15, 1) !important;
text-align: center;
}
.warp {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.rect {
width: 558rpx;
height: 300rpx;
background-color: #fff;
border-radius: 20rpx;
overflow: hidden;
zoom: 1;
position: relative;
display: flex;
flex-wrap: wrap;
display: -webkit-flex;
/* Safari */
.rect_view {
width: 100rpx;
height: 100rpx;
.image {
width: 45rpx;
height: 53rpx;
display: inline-block;
}
flex:1;
margin-top: 77rpx;
}
.rect_view:nth-child(2) image {
width: 57rpx;
height: 45rpx;
}
.rect_butoon {
width: 100%;
position: absolute;
bottom: 0;
height: 85rpx;
text-align: center;
line-height: 85rpx;
border-top: 1px #999999 solid;
}
view {
color: #666;
font-size: 24rpx;
margin-top: 30rpx;
}
}
.rect_view:nth-child(1) image,
.rect_view:nth-child(1) view {
float: right;
}
.rect_view:nth-child(1) image {
margin-right: 20rpx;
}
.rect_view:nth-child(1) {
position: relative;
margin-right: 79rpx;
}
.rect_view:nth-child(1) view {
position: absolute;
bottom: 0;
right: 0;
}
.rect_view:nth-child(2) image,
.rect_view:nth-child(2) view {
float: left;
}
.rect_view:nth-child(2) image {
margin-left: 20rpx;
}
.rect_view:nth-child(2) {
position: relative;
}
.rect_view:nth-child(2) view {
position: absolute;
bottom: 0;
left: 0;
}
.pact text {
font-size: 22rpx;
font-weight: 400;
color: rgba(255, 255, 255, 1);
// line-height: 36px;
}
.pact>view:first-child {
float: left;
}
.pact_text {
font-size: 22px;
font-weight: 400;
color: rgba(129, 188, 253, 1) !important;
// line-height: 36px;
}
//单选框的样式
.pact {
position: relative;
padding-left: 40rpx;
overflow: hidden;
// overflow: hidden; //超出的文本隐藏
// text-overflow: ellipsis; //溢出用省略号显示
// white-space: nowrap; //溢出不换行
}
.phones{
margin-bottom: 90rpx!important;
}
</style>