<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>
使用两个一样以用的按钮,控制显示隐藏,绑定不同的方法来实现。