手机号和微信号登录组件

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;
}