deming/pageA/register/register.vue
zmr900709 b534c2323e v
2020-06-17 12:09:28 +08:00

383 lines
7.4 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">
<!-- <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">《用户协议》</text>
<text class="pact_text">《隐私协议》</text>
<text class="pact_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 -->
<u-button @click="loginIn">{{login}}</u-button>
<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 : '', //验证码
};
},
onLoad() {
},
methods: {
// 用户注册
loginIn(){
this.$u.api.phoneRegister({
member_mobile: this.member_mobile,
sms_code: this.sms_code
}).then((res) => {
console.log(res)
// console.log(res)
if(res.errCode == 0){
// 缓存用户的信息
uni.setStorage({
key: 'user_info',
data: res.data,
success: function () {
console.log('success');
}
});
// 注册返回参数
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'
})
}
})
},
// 选中某个复选框时由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: 90rpx;
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;
}
.pact text {
font-size: 22rpx;
font-weight: 400;
color: rgba(255, 255, 255, 1);
line-height: 36px;
}
.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; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行
}
.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: 36px;
border: 1px #ff780f solid;
outline: none;
border-color: rgba(255, 120, 15, 1) !important;
}
.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;
}
</style>