其他方式登录:
wxml:
<phonemodal id='phonemodal' bind:myevent="onMyEvent"></phonemodal>
<!-- 未登录 -->
<view wx:if="{{nologin}}" class="viewbody">
<image src="{{bg}}" mode="widthFix" class="nologinpersonbg">
<image src="{{defaultImg}}" class="personImg"></image>
</image>
<view class="nologintxt">
<view>未登录</view>
<view class="nologincontent">登录可查看更多试用详情</view>
</view>
<!-- <view class="loginbtn" bindtap="login">马上登录</view> -->
<!-- <button open-type="getPhoneNumber" class="loginbtn" bindgetuserinfo="bindGetUserInfo" >马上登录</button> -->
<button open-type="getUserInfo" class="loginbtn" bindgetuserinfo="bindGetUserInfo">马上登录</button>
<view class="nav" hover-class="none" bindtap="jumphome">
<view class="index ">
<image class="navbottomicon" src="{{src}}" ></image>
<text class="nav-tex">放心试</text>
</view>
<view class="index active" >
<image class="navbottomicon" src="{{islogin ? Headimg :ownactive}}" style="border-radius: 50%;overflow: hidden;" ></image>
<text class="nav-tex">我的</text>
</view>
</view>
</view>
父组件的js
onLoad: function() {
if (wx.getStorageSync('receiver') && wx.getStorageSync('mobile') && wx.getStorageSync('address')) {
this.setData({
user_address_flag:true,
receiver:wx.getStorageSync('receiver'),
mobile: wx.getStorageSync('mobile'),
address: wx.getStorageSync('address')
})
}
var that = this
that.getuserInfo()
},
onShow: function() {
var that = this;
that.getuserheadImgstatus();
},
bindGetUserInfo: function(e) {
var that = this;
that.selectComponent('#phonemodal').getlogincode(function() {
console.log("登录成功后的操作")
that.getuserInfo()
that.getuserheadImgstatus();
// that.selectComponent('#winmodal').showwinmodal();
}, function() {
console.log("登录失败后的操作")
});
},
getuserInfo: function() {
var that = this;
// 初始化或清空数组
that.setData({
isLoading: false,
loadText: '数据加载中',
login: false,
nologin: false
})
wx.request({
url: 'https://product.fishqc.com/User/Profile/getInfo', //请求接口地址
header: {
'content-type': 'application/json', // 默认值
'skey': wx.getStorageSync('getstoreskey')
},
success: function(res) {
that.setData({
isLoading: true,
loadText: '数据加载中'
})
if (res.data.code == 200) {
that.setData({
UserInfodata: res.data.data,
login: true
})
that.checkwinstatus();
// that.getlistcount();
} else if (res.data.code == 401) {
// 未登录
that.setData({
nologin: true
})
} else {
app.toasttips(res.data.message, 'none')
}
// that.selectComponent('#winmodal').showwinmodal();
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
},
getuserheadImgstatus:function(){
var that = this
wx.request({
url: 'https://product.fishqc.com/User/Profile/getAvatarInfo', //请求接口地址
header: {
'content-type': 'application/json', // 默认值
'skey': wx.getStorageSync('getstoreskey')
},
success: function(res) {
if(res.data.code == 200){
that.setData({
islogin:true,
verified:res.data.data.verified,
Headimg:res.data.data.image
})
}else if(res.data.code == 401){
that.setData({
islogin:false
})
}
}
})
},
子组件里面的wxml
<view name="phonemodal"> <!-- wx:if="{{isShowPhoneModal}}" --> <view class="drawer_screen" wx:if="{{isShowPhoneModal}}" > <view class="drawer_box fishqccenter phonechoosebox" style="padding:20px 0 0;"> <view class="weChatAuth">微信授权</view> <view class="phonechoosetxt">当前网络环境安全，建议使用微信绑定手机号登录，是否允许？</view> <view class="phonechoosebtncontain"> <view class="getPhoneContain"> <button class="phonemodalbtn" bindtap="showPhoneLogin" style="border-radius: 1rpx">其他号码登录</button> <button class="phonemodalbtn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" style="border-radius: 1rpx">允许</button> </view> </view> <!-- <i class="colse" bindtap="closespplymodal" data-statu="close"></i> --> </view> </view> <view class="drawer_screen" wx:if="{{isShowPhoneLogin}}"> <view class="drawer_box fishqccenter" style="width: 80%;padding:20px;box-sizing: border-box;"> <view class="inputVerifiedCode">输入验证码</view> <input type="text" placeholder="请输入手机号码" class="phone" bindinput="phoneinput" placeholder-style="color:#dcdcdc;" style="border:1px solid #dcdcdc"/> <view class="applyintroduct" style="height: 40px;margin-bottom: 24px;"> <input type="text" placeholder="请输入验证码" class="code" bindinput="verificationcodeinput" placeholder-style="color:#dcdcdc;" style="border:1px solid #dcdcdc"/> <view catchtap="sendcode" style="width:38%;font-size:12px;display:inline-block;height:40px;line-height:40px;vertical-align:top;">{{sendtxt}}</view> </view> <view class="phoneinput"> <button class="phonebtn" catchtap="showPhoneModal">取消</button> <button class="phonebtn" bindtap="phonelogin">确认</button> </view> </view> </view> </view>
子组件里面的js
var app = getApp()
Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
// isShowPhoneLogin: {
// type: Boolean,
// value: false,
// },
// isShowPhoneModal: {
// type: Boolean,
// value: false
// }
},
data: {
phone: '',
verificationcode: '',
isShowPhoneLogin: false,
isShowPhoneModal: false,
sendtxt: '发送验证码',
gettingCode: true,
successCallback: null
},
methods: {
// 显示微信登录方式选择
showPhoneLogin: function () {
var that = this;
that.setData({
isShowPhoneLogin: true,
isShowPhoneModal: false
})
},
// 显示微信登录方式选择
showPhoneModal: function () {
var that = this;
console.log('获取回调函数')
that.setData({
isShowPhoneLogin: false,
isShowPhoneModal: true,
sendtxt: '发送验证码',
gettingCode: true,
phone: '',
verificationcode: ''
})
},
closeModal: function () {
this.setData({
isShowPhoneLogin: false,
isShowPhoneModal: false
})
},
toasttips: function (text, icon, time) {
wx.showToast({
title: text == null ? '' : text,
icon: icon,
duration: time == null ? '1000' : time
})
},
getPhoneNumber: function (e) {
var that = this;
if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
app.toasttips('手机号授权失败', 'none')
} else {
app.toasttips('手机号授权成功', 'none')
that.setData({
isShowPhoneModal: false
})
that.weiXinMiniBingPhone(e.detail.iv, e.detail.encryptedData, that.data.successCallback)
}
},
weiXinMiniBingPhone: function (iv, encryptedData, successCallback) {
var that = this
wx.login({
success: function (res) {
if (res.code) {
var logincode = res.code;
wx.request({
url: 'https://product.fishqc.com/Api/WeixinLogin/weiXinMiniBindPhone',
data: {
code: logincode,
iv: iv,
encryptedData: encryptedData
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
method: 'POST',
success: function (res) {
if (res.data.code == 200) {
var skey = res.data.skey
wx.setStorageSync('getstoreskey', skey)
// 成功登录的回调，待写
// app.global.login.data.login_getPhoneNumberSuccessCall();
if (successCallback != null) {
successCallback()
}
} else {
app.toasttips(res.data.message, 'none')
}
}
})
} else {
console.log('登录失败！' + res.errMsg)
}
}
})
},
phoneinput: function (event) {
var that = this
that.setData({
phone: event.detail.value
})
},
verificationcodeinput: function (event) {
var that = this
that.setData({
verificationcode: event.detail.value
})
},
phonelogin: function () {
wx.showLoading({
title: '正在登陆中',
})
var that = this;
if (that.data.phone == '' || !/^1\d{10}$/.test(that.data.phone)) {
app.toasttips('请输入正确的手机号', 'none')
return;
}
if (that.data.verificationcode == '') {
app.toasttips('请输入验证码', 'none')
return;
}
wx.login({
success: function (res) {
if (res.code) {
var logincode = res.code
wx.request({
url: 'https://product.fishqc.com/Api/WeixinLogin/weixinminiBindMobile',
data: {
code: logincode,
mobile: that.data.phone,
verificationcode: that.data.verificationcode
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
method: 'POST',
success: function (res) {
if (res.data.code == 200) {
// 成功登录的回调，待写
wx.hideLoading()
var skey = res.data.skey
wx.setStorageSync('getstoreskey', skey)
console.log(1111,that.data.successCallback)
if (that.data.successCallback != null) {
that.data.successCallback()
}
console.log(2222,that.data.successCallback)
that.setData({
isShowPhoneLogin: false,
isShowPhoneModal: false
})
app.toasttips(res.data.message, 'none')
} else {
app.toasttips(res.data.message, 'none')
}
}
})
} else {
console.log('登录失败！' + res.errMsg)
}
}
});
},
getlogincode: function (successCallback, failCallback) {
var that = this;
wx.login({
success: function (res) {
if (res.code) {
var logincode = res.code
// 弹窗授权
wx.getUserInfo({
success: function (res) {
if (res.errMsg == 'getUserInfo:ok') {
var encryptedData = res.encryptedData
var iv = res.iv;
that.WeixinLogin(logincode, encryptedData, iv, successCallback, failCallback);
}
},
fail: function (res) {
that.checkauthorize();
}
})
} else {
console.log('登录失败！' + res.errMsg)
if (failCallback != null) {
failCallback();
}
}
}
});
},
// 检查是否授权过
checkauthorize: function () {
var that = this;
wx.getSetting({
success(res) {
console.log(res)
// 没有授权过的，进入如下
if (!res.authSetting['scope.userInfo']) {
that.authorizemodal();
}
}
})
},
// 授权失败，弹窗
authorizemodal: function () {
var that = this;
wx.showModal({
title: '获取用户信息授权',
content: '当前功能需授权获取用户信息',
confirmText: '继续授权',
confirmColor: '#64c8bc',
success: function (res) {
if (res.confirm) {
console.log("点击去设置")
that.authorize();
} else if (res.cancel) {
console.log("点击取消")
console.log(res)
}
}
})
},
authorize: function () {
var that = this;
wx.openSetting({
success: function () {
console.log("授权成功")
// 调接口，获取请求接口头部参数
},
fail: function () {
console.log("授权失败")
that.checkauthorize();
}
})
},
WeixinLogin: function (logincode, encryptedData, iv, successCallback, failCallback) {
var that = this;
wx.request({
url: 'https://product.fishqc.com/Api/WeixinLogin/weiXinMini',
data: {
code: logincode,
iv: iv,
encryptedData: encryptedData
},
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded' // 默认值
},
success: function (res) {
if (res.data.code == 200) {
var skey = res.data.skey
wx.setStorageSync('getstoreskey', skey)
if (successCallback != null) {
successCallback(res);
}
} else if (res.data.code == 201) {
console.log('要跳去绑定手机页面')
console.log(successCallback)
that.setData({
successCallback: successCallback
})
that.showPhoneModal()
} else {
app.toasttips(res.data.message, 'none')
if (failCallback != null) {
failCallback(res);
}
}
}
})
},
sendcode: function () {
var that = this;
console.log('打印手机号')
console.log(that.data.phone)
if (!that.data.gettingCode) {
return;
}
if (that.data.phone == '' || !/^1\d{10}$/.test(that.data.phone)) {
app.toasttips('请输入正确的手机号', 'none')
return;
}
// console.log('触发发验证码')
wx.request({
url: 'https://product.fishqc.com/Api/WeixinLogin/weixinminiMobileVerificationCode',
data: {
mobile: that.data.phone
},
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded' // 默认值
},
success: function (res) {
console.log(res)
if (res.data.code == 200) {
app.toasttips('验证码发送成功', 'none')
that.countDown()
} else {
app.toasttips(res.data.message, 'none')
}
}
})
},
// 倒数
countDown: function () {
var that = this;
that.data.gettingCode = false;
var seconds = 59;
var countTimer = setInterval(function () {
that.setData({
sendtxt: seconds + "s"
})
seconds--;
if (seconds <= 0) {
countTimer = clearInterval(countTimer);
that.setData({
sendtxt: '获取验证码'
})
that.data.gettingCode = true;
}
}, 1000);
},
}
})
存储sky值是很重要的,还有这里的一个successCallback的一个初始化很重要.
