This commit is contained in:
zmr900709
2020-06-17 12:09:28 +08:00
parent 53b9086f5f
commit b534c2323e
9 changed files with 444 additions and 143 deletions

View File

@@ -8,24 +8,20 @@
<view class="title">手机登录</view>
<view class="labales">
<!-- <text></text> -->
<input type="tel" placeholder="手机号" />
<input type="tel" placeholder="请输入您的手机号" v-model="member_mobile" />
</view>
<view class="labales">
<!-- <text></text> -->
<input type="tel" placeholder="请输入验证码" />
<input type="tel" placeholder="请输入验证码" v-model="sms_code" />
<!-- <text class="identifying" @click="getCode">{{text}}</text> -->
<view class="wrap">
<u-toast ref="uToast"></u-toast>
<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
<view class="view_getcode" @tap="getCode">{{tips}}</view>
</view>
<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>
<text class="pact_text">使用协议</text>
<u-checkbox-group @change="checkboxGroupChange" size="27">
@@ -36,17 +32,17 @@
</view>
<!-- 注册 -->
<view class="more_Login">
<text>新用户点击注册</text>
<text @click="registerUrl()">{{register}}</text>
<text class="other" @click="mask_u">其他方式登录</text>
</view>
<!-- denglu QQ weixin -->
<view class="buttones">
<u-button>{{login}}</u-button>
<u-button @click="loginOn">{{login}}</u-button>
</view>
<u-mask :show="show" @click="show = false">
<view class="warp">
<view class="rect" @tap.stop>
<view class="rect_view">
<view class="rect_view" @click="rect_qq()">
<image src="../../static/pageA/qq.png" class="image"></image>
<view>QQ登录</view>
</view>
@@ -59,26 +55,127 @@
</view>
</u-mask>
</view>
<u-toast ref="uToast" />
</view>
</template>
<script>
import identifying from '@/components/logininput/identifying'
export default {
data() {
return {
list: [{
checked: false,
checked: true,
disabled: false
}],
value: '',
phones : '',
text: '获取验证码',
login: '登录',
register : '新用户点击注册',
show: false,
tips: '',
// refCode: null,
seconds: 60,
member_mobile: '', //手机号
smslog_type : '2',//状态
sms_code : '', //验证码
};
},
onLoad() {
// 数据的请求
this.apiwelcome()
},
methods: {
apiwelcome(){
this.$u.api.sendSmsCode({
}).then((res)=>{
console.log(res)
})
},
// 用户登录
loginOn(){
// console.log("登录")
// console.log(this.member_mobile)
// console.log(this.sms_code)
this.$u.api.phoneLogin({
member_mobile: this.member_mobile,
sms_code: this.sms_code
}).then((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'
})
}
})
},
// qq授权登录
rect_qq(){
console.log("授权Q")
var vm = this;
uni.getProvider({
service: 'oauth',
success: function (res) {
console.log('qq',res) //weixin
if (~res.provider.indexOf('qq')) {
uni.login({
provider: 'qq',
success: function (loginRes) {
console.log(loginRes)
this.getApplogin(loginRes)
vm.$HTTP({
method: 'GET',
baseURL:'https://graph.qq.com/user/get_user_info',
url: '',
data: {
openid:loginRes.authResult.openid,
access_token:loginRes.authResult.access_token,
appid:'101884160'
},
load:true
}).then((data) =>{
console.log(data)
}, (err) => {
console.log(err)
});
}
});
}else{
console.log("错误")
}
}
});
},
// 跳转注册页面
registerUrl(){
uni.navigateTo({
url: '/pageA/register/register'
});
},
// 授权登录
getApplogin(){
console.log("11")
},
// 选中某个复选框时由checkbox时触发
checkboxChange(e) {
//console.log(e);
@@ -90,66 +187,18 @@
mask_u() {
this.show = !this.show
},
// 获取验证码倒计时
getCode() {
console.log("11")
this.loading()
},
loading() {
},
codeChange(text) {
this.tips = text;
},
getCode() {
if (this.$refs.uCode.canGetCode) {
// 模拟向后端请求验证码
uni.showLoading({
title: '正在获取验证码'
})
setTimeout(() => {
uni.hideLoading();
// 这里此提示会被this.start()方法中的提示覆盖
this.$u.toast('验证码已发送');
// 通知验证码组件内部开始倒计时
this.$refs.uCode.start();
}, 2000);
} else {
this.$u.toast('倒计时结束后再发送');
}
},
end() {
this.$u.toast('倒计时结束');
},
start() {
this.$u.toast('倒计时开始');
tochange(){
}
},
components:{
identifying
}
};
</script>
<style lang="scss" scoped>
.wrap {
background: none;
width: 200rpx;
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size: 30rpx;
.view_getcode{
height: 50rpx;
line-height: 50rpx;
font-size: 30rpx;
color: #FF780F!important;
}
}
.warp .view_getcode{
width: 200rpx;
color: #FF780F!important;
}
.login {
// background: url(../../static/pageA/loginbackground.png) no-repeat!important;