deming/pageA/login/login.vue
2020-07-01 17:32:36 +08:00

496 lines
9.8 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="getCode">{{text}}</text> -->
<identifying @tochange="tochange" :smslog_type="smslog_type" :member_mobile="member_mobile"></identifying>
</view>
<!-- 服务协议 -->
<view class="pact">
<view>
<view></view>
<text>我已详细阅读并同意</text>
<text class="pact_text" v-for="(item,index) in pact_text" :key="index" @click="pact_click(index)"> {{item.text}} </text>
</view>
<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 @click="registerUrl()">{{register}}</text>
<text class="other" @click="mask_u">其他方式登录</text>
</view>
<!-- denglu QQ weixin -->
<view class="buttones">
<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" @click="rect_qq()">
<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: '',
phones: '',
text: '获取验证码',
login: '登录',
register: '新用户点击注册',
show: false,
tips: '',
// refCode: null,
seconds: 60,
member_mobile: '', //手机号
smslog_type: '2', //状态
sms_code: '', //验证码
// 协议渲染
pact_text: [{
"id": '1',
"text": "《用户协议》"
}, {
"id": '2',
"text": "《隐私协议》"
}, {
"id": '3',
"text": "《使用协议》"
},
]
};
},
onLoad() {
// 数据的请求
this.apiwelcome()
},
methods: {
apiwelcome() {
this.$u.api.sendSmsCode({
}).then((res) => {
console.log(res)
})
},
// 协议跳转
pact_click(index){
console.log(index)
uni.navigateTo({
url: '/pageA/pactList/pactList?index=' + index
});
},
// 用户登录
loginOn() {
console.log("登录")
// console.log(this.member_mobile)
// console.log(this.sms_code)
// 判断手机号是否为空
// 校验手机号
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.phoneLogin({
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');
// 跳转首页
uni.navigateTo({
url : '/pageA/topick/topick'
})
}
});
// 存储接口请求所需token
uni.setStorage({
key: 'token',
data: res.data.token,
});
// 注册返回参数
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);
},
// 选中任一checkbox时由checkbox-group触发
checkboxGroupChange(e) {
// console.log(e);
},
mask_u() {
this.show = !this.show
},
tochange() {
}
},
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 {
color: #FFF;
border-bottom: 1px #fff solid;
margin-bottom: 90rpx;
height: 70rpx;
line-height: 70rpx;
}
.labales:nth-child(3) {
position: relative;
margin-bottom: 10px;
}
.identifying {}
}
.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>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; //溢出不换行
}
.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;
}
.buttones .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>