<template><view class="container"><!-- <image class="img" src="https://jetour-self-prod.oss-cn-hangzhou.aliyuncs.com/public/jetour-mini/images/car.png"mode="widthFix"></image> --><image class="img" :src="backgroundLogo" mode="widthFix"></image><image class="img2" :src="logo" mode="widthFix"></image><image class="img3" :src="carLogo" mode="widthFix"></image><view class="btn-mask"><view class="btns" @click="clicklogin" v-show="!isAgreed"><button class="openBtn" >一键登录</button></view><view class="btns" v-show="isAgreed"><button class="openBtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" >一键登录</button></view><view class="checkbox-container"><checkbox-group @change="handleCheckboxChange"><label><checkbox value="agree" :checked="isAgreed" class="myCheckbox" />我已阅读并同意<text class="link" @click.stop="navigateToPrivacyPolicy(1)">《用户服务协议》</text><text class="link" @click.stop="navigateToPrivacyPolicy(2)">《隐私协议》</text></label></checkbox-group></view></view></view>
</template><script>import dayJs from 'dayjs'import {getWxCode,getWxUserTel,getWxUserInfo,createWxUserClue} from '../../../api/clue.js'export default {onLoad(option) {this.qrCodeId = option.sceneconsole.log(this.qrCodeId)this.getLoginCode()},data() {return {webviewStyles: {progress: {color: '#FF3333'}},backgroundLogo: require('../../static/img/liveStoreCode/backgroundLogo.png'),carLogo: require('../../static/img/liveStoreCode/carLogo.png'),logo: require('../../static/img/liveStoreCode/logo.png'),isAgreed: false,login_code: null,sessionKey: null,openId: null,rawData: null,userInfo: {},signature: null,userTel: null,qrCodeId: null,showWx: false};},methods: {close() {this.showWx = false},handleCheckboxChange(){this.isAgreed = !this.isAgreed},// 跳转到隐私协议页面navigateToPrivacyPolicy(type) {let goUrl = ''if(type == 1){goUrl='/pages/protocol/useProtocol'}if(type == 2){goUrl='/pages/protocol/concealProtocol'}uni.navigateTo({url: goUrl});},getLoginCode() {const that = thisuni.login({success: function(res) {console.log(res, 'login')// 获取code that.login_code = res.code;uni.getUserInfo({withCredentials: true,success(data) {console.log(data,'data');console.log(JSON.stringify(data));that.rawData = data.rawDatathat.userInfo = data.userInfothat.signature = data.signaturethat.getCurUserWxCode()}})}});},clicklogin(){console.log(this.isAgreed,'this.isAgreed');if(!this.isAgreed){wx.showToast({title: '请先同意捷途用户服务协议',icon: 'none'});return false}},// 获取用户手机号getPhoneNumber(e) {console.log(e.detail,'e.detail') // 判断用户是否允许获取手机号const params = {encryptedData: e.detail.encryptedData,iv: e.detail.iv,sessionKey: this.sessionKey,openId: this.openid,signature: this.signature,rawData: this.rawData}if (e.detail.errMsg == "getPhoneNumber:ok") { // 用户允许或去手机号getWxUserTel(params).then(res => {this.userTel = res.data.data.phoneNumber// 判断从外面过来的type 然后判断是进 活码页面还是领取优惠卷页面uni.navigateTo({url: `/pages/webView/webView?url=` + encodeURIComponent('https://blog.csdn.net/qq_48701993/article/details/134713613')})// this.submitClue()})// this.getCurUserInfo(params)}},getCurUserInfo(params) {getWxUserInfo(params)},getCurUserWxCode() {const that = thisconst params = {code: this.login_code}getWxCode(params).then((res) => {const data = res.data.datathat.sessionKey = data.sessionKey})},submitClue() {const {nickName,gender} = this.userInfo// 跳h5页面 并且携带参数// const params = {// qrCodeId: this.qrCodeId,// name: nickName,// phone: this.userTel,// sex: gender,// weChat: '',// authorizationTime: dayJs().format('YYYY-MM-DD HH:mm:ss')// }// console.log('提交表单' + JSON.stringify(params))// createWxUserClue(params).then(res => {// this.showWx = true// })}}}
</script><style lang="scss">.img {width: 100vw;height: 100vh;display: block;}.img2{position: absolute;width: 80px;height: 80px;top: 60px;margin-left: calc(50vw - 40px);}.title{font-size: 18px;display: flex;justify-content: center;position: absolute;width: 100%;top: 150px;}.img3{position: absolute;width: 350px;height: 222px;top: 200px;margin-left: calc(50vw - 175px);}.btn-mask {// background-color: rgba(0, 0, 0, 0.2);// background-image: url('https://jetour-self-prod.oss-cn-hangzhou.aliyuncs.com/public/jetour-mini/images/car.png');// background-size: contain;// background-repeat: no-repeat;// background-position: bottom;position: absolute;width: 100%;height: 100%;z-index: 20;top: 0;left: 0;// .checkbox-container{// position: absolute;// bottom: 80rpx;// }}.myCheckbox{::v-deep .uni-checkbox-input{width: 16px;height: 16px;margin-right: 8px;}}.checkbox-container{display: flex;width: 94%;align-items: center;justify-content: center;line-height: 25px;font-size: 14px;color: #666;position: absolute;left: 5%;bottom: 5%;font-size: 12px;}.link {color: #007aff;// margin: 0 5px;}.container {width: 100vw;height: 100vh;}.btns {width: 80%;position: absolute;left: 10%;top: 70%;// margin-left: -15%;border-radius: 80px;display: flex;justify-content: flex-start;button {width: 100%;height: 80rpx;line-height: 80rpx;&:after {display: none;}&.openBtn {// background: #00A198;background-color: #165DFF;color: #fff;// border: 1px solid #fff;}}}.txt-content {text-align: center;width: 100%;display: flex;justify-content: flex-start;align-items: center;width: 90%;margin: 70px auto;text {color: #3D3D3D;font-size: 30rpx;}image {width: 80rpx;height: 80rpx;border-radius: 20rpx;margin-right: 20rpx;}}.jetour-wx {background-color: rgba(0, 0, 0, 0.4);position: absolute;width: 100%;height: 100%;z-index: 30;top: 0;left: 0;.jetour-wx-content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;width: 400rpx;height: auto;background: #fff;color: #000;border-radius: 10px;padding: 20px 0;display: flex;flex-direction: column;image {width: 360rpx;height: 360rpx;margin: 0 auto;}.colse {position: absolute;right: 10px;top: 0px;background: none;outline: none;border: none;font-size: 12px;padding: 0;&:after {border: none;}}}}
</style>- 要点getLoginCode uni.login 以后获取微信code 拿到code 然后走后端接口换信息 具体看代码
https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/user-login/code2Session.html
小程序自己的组件
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html#%E8%BF%94%E5%9B%9E%E5%8F%82%E6%95%B0%E8%AF%B4%E6%98%8E<view class="btns" v-show="isAgreed"><button class="openBtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" >一键登录</button></view>