js函数方法
//是否登录
ifLogin: function () {
// console.log('触发了这个方法')
const that = this;
var userToken = wx.getStorageSync('user_token');
var ifLogin = true;
if (userToken == '') {
wx.showToast({
title: '您还未授权登录',
icon: 'loading'
})
setTimeout(function () {
wx.hideToast()
that.setData({
loginShow: true,
})
}, 2000)
ifLogin = false;
return ifLogin
}
return ifLogin
},
//绑定手机结果返回
phonereResult: function (e) {
const that = this
let result = e.detail.result;
if (result == 'success') {
that.getGoodDetailData(); // 拿手机号去调用接口
}
},
wxml调用的
const that = this;
if (that.ifLogin() == false) {
return
};组件有两种 第一个： 可以绑定手机号或者微信（可以选择）
<phone-compoent phoneShow='{{loginShow}}' bind:phoneEven='phonereResult'></phone-compoent>
第一种的组件wxml
<van-popup show="{{ phoneShow }}" bind:click-overlay="phoneOnclose" custom-style='border-radius:30rpx;' bind:close="phoneOnclose">
<view class='binding_phone'>
<!-- <view class='top'>绑定手机号</view> -->
<button type="primary" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
微信账号快速登录
</button>
<button type="default" bindtap="phonereg" hover-class="other-button-hover">手机号注册/登录</button>
</view>
<view class='binding_phone' wx:if="{{phoneview}}">
<!-- <view class='top'>绑定手机号</view> -->
<view class='info_group'>
<view class='cell'>
<view class='title'>手机号码</view>
<view class='value'>
<input type='number' placeholder='请输入手机号码' bindinput='userPhoneFun'></input>
</view>
</view>
<view class='cell'>
<view class='title'>验证码</view>
<view class='value phone_code'>
<input type='text' placeholder='请输入短信验证码' bindinput='verificationCodeFun'></input>
<button class="v_code {{codeDis == true?'d_code':''}}" bindtap="checkMobile" disabled="{{codeDis}}">
{{phoneCode}}
<text hidden="{{phoneCode == '获取验证码'}}">S</text>
</button>
</view>
</view>
<!-- <view class='cell' wx:if='{{passwordShow}}'>
<view class='title'>密码</view>
<view class='value'>
<input type='password' placeholder='请输入密码' bindblur='passwordFun'></input>
</view>
</view>
<view class='cell' wx:if='{{passwordShow}}'>
<view class='title'>确认密码</view>
<view class='value'>
<input type='password' placeholder='请确认密码' bindblur='passwordSureFun'></input>
</view>
</view> -->
</view>
<!-- <view class='tips'>授权即代表同意《注册协议》</view> -->
<view class='foot'>
<view class='foot_btn' bindtap='associateAccountFun'>确定</view>
</view>
</view>
</van-popup>第一种的组件js
var requestSign = require('../../../utils/requestData.js');
var api = require('../../../utils/api.js').open_api;
var util = require('../../../utils/util.js');
var header = getApp().header;
const app = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
phoneShow: Boolean,
iswinclose: String //默认背景点击自动关闭
},
/**
* 组件的初始数据
*/
data: {
//手机验证码倒计时设置
phoneCode: '获取验证码',
codeDis: false,
//手机号码
user_tel: '',
//手机验证码
verification_code: '',
password: '',
sure_password: '',
passwordShow: false,
phoneview: false
},
/**
* 组件的方法列表
*/
methods: {
//手机弹框关闭
phoneOnclose: function () {
const that = this;
if (that.data.iswinclose == 'yes') {
//不作为
} else {
that.setData({
phoneShow: false
})
}
},
// 绑定手机开始
//验证码倒计时
changeCode: function () {
const that = this;
let telphone = that.data.user_tel;
// console.log('请求验证码')
var postData = {
mobile: telphone,
type: 'bind_mobile',
};
let datainfo = requestSign.requestSign(postData);
header.sign = datainfo;
wx.request({
url: api.get_getVerificationCode,
data: postData,
header: header,
method: 'POST',
dataType: 'json',
responseType: 'text',
success: (res) => {
// console.log('请求成功')
if (res.data.code < 0) {
that.setData({
codeDis: false
})
wx.showToast({
title: res.data.message,
icon: 'loading'
})
} else {
that.setData({
phoneCode: 60
})
let time = setInterval(() => {
let phoneCode = that.data.phoneCode;
phoneCode--
that.setData({
phoneCode: phoneCode
})
if (phoneCode == 0) {
clearInterval(time);
that.setData({
phoneCode: "获取验证码",
codeDis: false
});
}
}, 1000)
}
},
fail: (res) => {},
})
},
//手机号码
userPhoneFun: function (e) {
this.setData({
user_tel: e.detail.value
})
},
//手机验证码
verificationCodeFun: function (e) {
this.setData({
verification_code: e.detail.value
})
},
//关联账号，绑定手机号码
associateAccountFun: function () {
const that = this;
// if (that.data.sure_password != that.data.password) {
// wx.showToast({
// title: '密码与确认密码不一致',
// icon: 'none'
// })
// return
// }
that.checkReferee();
var postData = {
mobile: that.data.user_tel,
verification_code: that.data.verification_code,
encrypted_data: wx.getStorageSync('encrypted_data'),
iv: wx.getStorageSync('iv')
};
if (that.data.password != '') {
postData.password = that.data.verification_code
}
let datainfo = requestSign.requestSign(postData);
header.sign = datainfo;
wx.request({
url: api.get_AssociateAccount,
data: postData,
header: header,
method: 'POST',
dataType: 'json',
responseType: 'text',
success: (res) => {
if (res.data.code >= 0) {
that.setData({
phoneShow: false,
})
if (getApp().userTokenEvent == '') {
wx.setStorageSync("user_token", res.data.data.user_token)
getApp().userToken = res.data.data.user_token;
} else {
getApp().userToken = getApp().userTokenEvent;
}
let token = 'user-token';
getApp().header[token] = getApp().userToken;
let configData = getApp().globalData.config;
if (getApp().globalData.no_check_phone === 0) {
wx.setStorageSync("have_mobile", true);
} else {
wx.setStorageSync("have_mobile", res.data.data.have_mobile);
}
getApp().loginStatus = true;
wx.showToast({
title: res.data.message,
})
that.triggerEvent('phoneEven', {
result: 'success'
})
} else {
that.setData({
phoneShow: false,
})
wx.showModal({
title: '提示',
content: res.data.message,
showCancel: false,
success: function () {
wx.switchTab({
url: '/pages/member/index'
})
// var pages = getCurrentPages(); //获取页面栈
// if (pages.length > 1) { //必须有两层以上页面栈
// var prePage = pages[pages.length - 2].route; // pages[pages.length - 2];上一层 pages[pages.length - 3];上两层
// // console.log(prePage, '上个界面页面栈')
// wx.reLaunch({
// url: prePage
// })
// }
}
})
}
},
fail: (res) => {},
})
},
//密码
passwordFun: function (e) {
const that = this;
that.setData({
password: e.detail.value
})
},
passwordSureFun: function (e) {
const that = this;
that.setData({
sure_password: e.detail.value
})
},
//检查手机是否存在
checkMobile: function () {
const that = this;
if (util.checkPhone(that.data.user_tel) == false) {
wx.showToast({
title: '手机号码有误，请重新再填！',
icon: 'none',
})
return;
};
that.setData({
codeDis: true
})
var postData = {
'mobile': that.data.user_tel,
'mall_port': 2,
};
let datainfo = requestSign.requestSign(postData);
header.sign = datainfo;
wx.request({
url: api.get_mobile,
data: postData,
header: header,
method: 'POST',
dataType: 'json',
responseType: 'text',
success: (res) => {
if (res.data.code == 1) {
that.setData({
passwordShow: false
})
that.changeCode();
} else if (res.data.code < 0) {
wx.showToast({
title: res.data.message,
icon: 'none'
})
} else if (res.data.code == 0) {
that.changeCode();
// that.setData({
// passwordShow: true
// })
}
},
fail: (res) => {},
})
},
//分享链接或者扫码成为下线
checkReferee: function () {
const that = this;
let higherExtendCode = wx.getStorageSync('higherExtendCode');
if (higherExtendCode) {
let postData = {
'extend_code': higherExtendCode
}
let datainfo = requestSign.requestSign(postData);
header.sign = datainfo
wx.request({
url: api.get_checkReferee,
data: postData,
header: header,
method: 'POST',
dataType: 'json',
responseType: 'text',
success: (res) => {
if (res.data.code <= 0) {
wx.showToast({
title: res.data.message,
})
}
},
fail: (res) => {},
})
}
},
phonereg: function () {
const that = this;
that.setData({
phoneview: true
})
// console.log(1);
util.onlogin();
},
wxlogin: function () {
},
getPhoneNumber: function (e) {
const that = this;
// console.log(123)
// console.log(e.detail.errMsg)
// console.log(e.detail.iv)
// console.log(e.detail.encryptedData)
wx.login({
success: res => {
// console.log(res.code);
that.checkReferee();
var postData = {
mobtype: 'wxphonereg',
encrypted_data: e.detail.encryptedData,
iv: e.detail.iv,
code: res.code
};
let datainfo = requestSign.requestSign(postData);
header.sign = datainfo;
wx.request({
url: api.get_AssociateAccount,
data: postData,
header: header,
method: 'POST',
dataType: 'json',
responseType: 'text',
success: (res) => {
if (res.data.code >= 0) {
that.setData({
phoneShow: false,
})
if (getApp().userTokenEvent == '') {
wx.setStorageSync("user_token", res.data.data.user_token)
getApp().userToken = res.data.data.user_token;
} else {
getApp().userToken = getApp().userTokenEvent;
}
let token = 'user-token';
getApp().header[token] = getApp().userToken;
let configData = getApp().globalData.config;
if (getApp().globalData.no_check_phone === 0) {
wx.setStorageSync("have_mobile", true);
} else {
wx.setStorageSync("have_mobile", res.data.data.have_mobile);
}
getApp().loginStatus = true;
wx.showToast({
title: res.data.message,
})
that.triggerEvent('phoneEven', {
result: 'success'
})
} else {
that.setData({
phoneShow: false,
})
wx.showModal({
title: '提示',
content: '您已拒绝或' + res.data.message + '，请重新授权！',
showCancel: false,
})
}
},
fail: (res) => {},
})
}
})
}
}
})第一种组件的json
{
"component": true,
"usingComponents": {}
}第一种组件的wxss
.binding_phone{
width: 678rpx;
}
.binding_phone .top{
font-size: 32rpx;
padding: 20rpx 30rpx;
text-align: center;
}
.info_group .cell{
padding: 20rpx 30rpx;
display: flex;
align-items: center;
border-bottom: 1rpx solid rgba(221, 221, 221, 0.747);
}
.info_group .cell .title{
width: 160rpx;
}
.info_group .cell .value{
flex: 1;
}
.phone_code{
position: relative;
}
.v_code{
position: absolute;
right: 0;
top: -10rpx;
font-size: 22rpx;
border-radius: 50rpx;
color: red;
border: 1px solid red;
background-color: #fff;
z-index: 99;
}
.d_code{
border: 1px solid rgba(182, 179, 179, 0.171);
}
.tips{
padding: 20rpx 30rpx;
color: #ccc;
}
.binding_phone .foot{
padding: 20rpx 30rpx;
margin: 20rpx 0;
}
.binding_phone .foot .foot_btn{
height: 80rpx;
line-height: 80rpx;
text-align: center;
background-color: #f44;
color: #fff;
}
/** wxss **/
/** 修改button默认的点击态样式类**/
.button-hover {
background-color: red;
}
/** 添加自定义button点击态样式类**/
.other-button-hover {
background-color: blue;
}
/* button {margin: 10px;} */
.viewhide{
display: none;
}
.viewshow{
display: block;
}
第二种直接微信登录（直接调其弹框 无法手机号登录） 外部调用的js方法和 第一种一样即可
第二种的wxml
<van-popup show="{{loginShow}}" position="bottom" z-index='999'>
<view class='login'>
<view class='title'>
<view class='wx_img'>
<image src='{{head_img}}'></image>
</view>
<view class='text'>欢迎来到{{mall_name}}</view>
</view>
<view class='content'>
<view class='info'>为提供优质的服务，{{mall_name}}需要获取以下信息</view>
<view class='item'>· 你的公开信息(昵称、头像等）</view>
</view>
<view class='foot_group'>
<button class='sure' type='primary' open-type='getUserInfo' bindgetuserinfo="bindGetUserInfo">
确认微信授权
</button>
<view class='no_sure' bindtap='onLoginClose'>暂不授权</view>
</view>
</view>
</van-popup>
第二种的js文件
const app = getApp();
var requestSign = require('../../../utils/requestData.js');
var api = require('../../../utils/api.js').open_api;
var util = require('../../../utils/util.js');
var re = require('../../../utils/request.js');
var header = getApp().header;
Component({
/**
* 组件的属性列表
*/
properties: {
loginShow: {
type: Boolean,
value: false,
},
},
/**
* 组件的初始数据
*/
data: {},
lifetimes: {
attached() {
// 在组件实例进入页面节点树时执行 一进入立刻执行获取头像和平台的昵称
const that = this;
that.getMpBaseInfo();
},
detached() {
// 在组件实例被从页面节点树移除时执行
},
},
/**
* 组件的方法列表
*/
methods: {
onLoginClose: function () {
const that = this;
wx.showTabBar();
that.setData({
loginShow: false,
})
},
bindGetUserInfo: function (res) {
const that = this;
// console.log(res.detail);
if (res.detail.userInfo) {
// console.log("点击了同意授权");
// that.triggerEvent('phoneEven1', { result: true });
wx.setStorageSync("nickName", res.detail.userInfo.nickName);
wx.setStorageSync("avatarUrl", res.detail.userInfo.avatarUrl);
wx.setStorageSync("gender ", res.detail.userInfo.gender);
wx.setStorageSync("encrypted_data", res.detail.encryptedData);
wx.setStorageSync("iv", res.detail.iv);
// wx.showLoading({
// title: '登录中',
// })
// that.triggerEvent('phoneEven1', { result: true });
that.onLoginClose();
util.onlogin().then(function (res) {
// wx.hideLoading();
if (res.data.code > 0) {
setTimeout(() => {
that.triggerEvent('request', {
result: true
})
}, 1000)
}
})
} else {
// console.log('授权失败！');
wx.showToast({
title: res.detail.errMsg,
icon: 'none',
})
}
},
//获取小程序头像和平台名称
getMpBaseInfo: function () {
const that = this;
const extConfig = wx.getExtConfigSync ? wx.getExtConfigSync() : {}
var postData = {
'website_id': extConfig.website_id,
'auth_id': extConfig.auth_id
};
let datainfo = requestSign.requestSign(postData);
header.sign = datainfo;
wx.request({
url: api.get_getMpBaseInfo,
data: postData,
header: header,
method: 'POST',
dataType: 'json',
responseType: 'text',
success: (res) => {
if (res.data.code == 1) {
if (res.data.data.logo != '') {
that.setData({
head_img: res.data.data.logo
})
}
if (res.data.data.name != '') {
that.setData({
mall_name: res.data.data.name
})
}
}
},
fail: (res) => {},
})
},
}
})第二种的json文件
{
"component": true,
"usingComponents": {}
}第二种的wxss文件
.login{
padding: 20rpx 30rpx;
background-color: #fff;
}
.login .title{
display: flex;
align-items: center;
font-size: 42rpx;
}
.login .title .wx_img{
width: 80rpx;
height: 80rpx;
border-radius: 50%;
overflow: hidden;
margin: 40rpx 30rpx 40rpx 0;
}
.login .title .wx_img image{
width: 100%;
height: 100%;
}
.login .content{
font-size: 28rpx;
}
.login .content .info{
margin: 20rpx 0;
}
.login .content .item{
font-size: 24rpx;
color: rgba(141, 140, 140, 0.678);
}
.login .foot_group{
margin: 40rpx 0;
}
.login .foot_group .sure{
background-color: #57bf6a;
color: #fff;
border-radius: 50rpx;
}
.login .foot_group .no_sure{
text-align: center;
font-size: 24rpx;
margin-top: 20rpx;
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
