uni-app小程序的微信一键登录,如何把判断是否签署协议放在手机号授权之前。

发布时间:2024年01月12日
<script>
import { postLoginWxMinAPI } from '../../api/api.js'
export default {
  data() {
    return {
      tips: '',
      value: '',
      needBack: '', //是否需要返回原理的页面
      checkList: [],
      checked: false,
      disabled: false,
      code: "",
      taskId: "",
      form: {
        mobile: '',
        code: ''
      },
    }
  },
  components: {
  },
  onLoad(options) {
    this.needBack = options.needBack ? options.needBack : ''
    this.taskId = options.taskId ? options.taskId : ''
  },
  methods: {
    checkboxChange(n) {
      console.log('change', n);
    },
    clickWay() {
      if (this.checkList.length == 0) {
        this.$toast('请先阅读并同意协议');
        return
      }
    },
    async onGetphonenumber(ev) {
      // debugger
      // if (this.checkList.length == 0) {
      //   this.$toast('请先阅读并同意协议');
      //   return
      // }
      const { code } = ev.detail
      const params = {
        code: code,
        platform: 'wx',
        client_id: "myjszl",
        client_secret: '123',
        grant_type: "wx_code"
      }
      await postLoginWxMinAPI(params, { header: { 'content-type': 'application/x-www-form-urlencoded' }, custom: { auth: false } }).then((res) => {
        uni.setStorageSync('accessToken', res.accessToken);
        uni.setStorageSync('personalId', res.userInfo.userId);
        uni.setStorageSync('isLogin', true);
        uni.setStorageSync('hostoryArr', undefined)
      }).catch(() => {
      })
      if (this.needBack) {
        let tabList = ['/pages/mine/mine', '/pages/task/task']
        if (tabList.includes(this.needBack)) {
          uni.switchTab({
            url: this.needBack
          });
        } else {
          uni.navigateTo({
            url: this.needBack + '?taskId=' + this.taskId
          })
        }
      } else {
        uni.switchTab({
          url: '/pages/index/index'
        });
      }


    },
    goPage(url) {
      uni.navigateTo({ url: '/pages/' + url })
    },
    phoneLogin() {
      if (this.checkList.length == 0) {
        this.$toast('请先阅读并同意协议');
        return
      }
      uni.navigateTo({
        url: '/pages/login/loginMa?needBack=' + this.needBack + '&taskId=' + this.taskId
      })
    }
  }

}
</script>

<template>
  <view class="login-page dstyle">
    <view class="bc-box col-center">
      <image class="logo" src="../../static/logo.png" mode="scaleToFill" />
      <image class="kouhao" src="../../static/kouhao.png" mode="scaleToFill" />
    </view>
    <view class="tips row-center">
      <u-checkbox-group v-model="checkList" size="18px" @change="checkboxChange">
        <u-checkbox></u-checkbox>
      </u-checkbox-group>
      <view style="font-size: 22rpx;" class="row-center">
        我已阅读并同意 <view class="link" @click="goPage('privacyPolicy/privacyPolicy')">《隐私政策》</view><view class="link"
          @click="goPage('userAgreement/userAgreement')">《用户服务协议》</view>
      </view>
    </view>
    <view class="login">
      <!-- 小程序端授权登录 -->
      <!-- #ifdef MP-WEIXIN  -->
      <view class="btn-key" v-if="checkList.length == 0" @click="clickWay">
        <button class="button row-center">
          <view class="iconfont icon-weixin wxchat"></view>
          <text class="wenzi">微信一键登录</text>
        </button>
      </view>
      <view class="btn-key" v-if="checkList.length > 0">
        <button class="button row-center" open-type="getPhoneNumber" @getphonenumber="onGetphonenumber">
          <view class="iconfont icon-weixin wxchat"></view>
          <text class="wenzi">微信一键登录</text>
        </button>
      </view>

      <!-- #endif -->
    </view>
    <view class="phone-login row-center" @click="phoneLogin()">
      <view class="iconfont icon-shoujihao phone"></view>
      <text class="wenzi">手机号登录</text>
    </view>
  </view>
</template>


<style lang="scss">
page {
  height: 100%;
}

.login-page {
  box-sizing: border-box;
  // border: solid 1px rebeccapurple;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 750rpx;
  height: 100vh;

  .bc-box {
    // border: brown solid 1px;
    height: 800rpx;
    width: 750rpx;
    // background:  url('../../static/logo.png');
    background-image: url('https://xdr-applet.oss-cn-beijing.aliyuncs.com/pao.png');
    background-size: 100% 100%;

    .logo {
      margin-top: 204rpx;
      width: 296rpx;
      height: 95rpx;
    }

    .kouhao {
      margin-top: 88rpx;
      width: 346rpx;
      height: 65rpx;

    }

  }

  .tips {
    margin-top: 115rpx;
  }

  .login {
    margin-top: 43rpx;

    .button {
      width: 600rpx;
      height: 100rpx;
      background: #009944;
      border-radius: 50rpx;
      justify-content: center;
      // border: saddlebrown 1px solid;

      .wxchat {
        // border: saddlebrown 1px solid;
        // width: 38rpx;
        // height: 38rpx;
        color: #FFFFFF;
        font-size: 36rpx;
      }

      .wenzi {
        margin-left: 10rpx;
        font-size: 36rpx;
        font-family: PingFang TC;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
  }

  .phone-login {
    margin-top: 20rpx;
    width: 600rpx;
    height: 100rpx;
    line-height: 100rpx;
    // text-align: center;
    justify-content: center;
    background: #3C89FE;
    border-radius: 50rpx;
    font-size: 36rpx;
    font-family: PingFang TC;
    font-weight: 400;
    color: #FFFFFF;
  }
}
</style>

使用两个一样以用的按钮,控制显示隐藏,绑定不同的方法来实现。

文章来源:https://blog.csdn.net/weixin_42814869/article/details/135553257
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。