<template>
|
<view>
|
<view class="wrap">
|
<image src="@/static/logo.png" mode="widthFix" class="tip_img"></image>
|
<view class="login_tip">
|
为了提供更优质的服务，需要获取您的头像和昵称。
|
</view>
|
<view class="login_btn">
|
<!-- #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU -->
|
<button v-if="canIUseGetPhoneNumber" class="uni-tip-button"
|
style="backgroundColor:#fece01;borderColor:#fece01" @click="mobileAuthLogin">授权并登录</button>
|
<button style="backgroundColor:#fece01;borderColor:#fece01" v-else open-type="getPhoneNumber"
|
@getphonenumber="getPhoneNumber" class="uni-tip-button">授权并登录</button>
|
<view class="no_login" @click="back" style="color:#fece01;borderColor:#fece01">
|
暂不授权
|
</view>
|
<!-- #endif -->
|
<checkbox-group @change="changeAgree">
|
<view class="regisiter-agreement">
|
<label>
|
<checkbox value="1" :checked="isChecked" color="#fece01" style="transform:scale(0.7)" />
|
已阅读并同意以下协议
|
<text class="color-base-text" @click.stop="toArticle(1)">《用户服务协议》</text>
|
<!-- 和 <text class="color-base-text" @click.stop="toArticle(2)">《隐私政策》</text> -->
|
</label>
|
</view>
|
</checkbox-group>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import {
|
mapActions,
|
mapGetters,
|
mapMutations
|
} from 'vuex'
|
export default {
|
data() {
|
return {
|
isChecked: false,
|
canIUseGetPhoneNumber: false
|
};
|
},
|
created() {
|
// #ifdef MP-WEIXIN
|
if (uni.getStorageSync('queryPhoneNumber')) this.canIUseGetPhoneNumber = true;
|
// #endif
|
},
|
onShow() {
|
|
},
|
methods: {
|
...mapActions([
|
'getUserInfo'
|
]),
|
toArticle(type) {
|
uni.navigateTo({
|
url: '/pages/article/article'
|
})
|
},
|
changeAgree(e) {
|
console.log(e)
|
if (e.detail.value.length > 0) {
|
this.isChecked = true
|
} else {
|
this.isChecked = false
|
}
|
},
|
back() {
|
uni.navigateBack()
|
},
|
getPhoneNumber(e) {
|
if (!this.isChecked) {
|
return this.$common.showToast({
|
title: "请先同意协议"
|
})
|
}
|
if (e.detail.errMsg == 'getPhoneNumber:ok') {
|
this.$db.set('queryPhoneNumber', 'getPhoneNumber:ok');
|
uni.login({
|
provider: 'weixin',
|
timeout: 3000,
|
success: res => {
|
let obj = {
|
bindgetphonenumber: e.detail.code,
|
jsCode: res.code
|
}
|
this.$api.CreateUser(obj).then(result => {
|
if (result.code == 1) {
|
this.$db.set('userToken', result.data.accessToken);
|
this.getUserInfo()
|
this.$util.redirectTo(
|
'/pages/index/index', {},
|
'tabbar')
|
} else {
|
this.$util.showToast({
|
title: result.msg
|
});
|
}
|
}).catch((err) => {
|
console.log(err, 'uni.loginerr')
|
})
|
},
|
})
|
}
|
console.log(e)
|
},
|
mobileAuthLogin(e) {
|
if (!this.isChecked) {
|
return this.$common.showToast({
|
title: "请先同意协议"
|
})
|
}
|
uni.login({
|
provider: 'weixin',
|
timeout: 3000,
|
success: res => {
|
this.$api.temLogin(res.code).then((result) => {
|
if (result.code == 1) {
|
this.$db.set('userToken', result.data.accessToken);
|
this.getUserInfo()
|
this.$util.redirectTo(
|
'/pages/index/index', {},
|
'tabbar')
|
} else {
|
this.$util.showToast({
|
title: result.msg ? result.msg : result.error
|
});
|
}
|
}).catch((err) => {
|
console.log('err', err);
|
})
|
},
|
})
|
},
|
getCode(userInfo, callback) {
|
uni.login({
|
provider: 'weixin',
|
timeout: 3000,
|
success: res => {
|
console.log(res, 'getCode')
|
let data = {
|
code: res.code,
|
nickname: userInfo.nickName,
|
avatar: userInfo.avatarUrl,
|
|
}
|
// if (uni.getStorageSync('source_member')) {
|
// data.source_member = uni.getStorageSync('source_member')
|
// }
|
// if (res.code) {
|
// this.$api.temLogin(data)
|
// }
|
},
|
fail: () => {
|
this.$util.showToast({
|
title: '请求失败'
|
});
|
}
|
})
|
},
|
login(e) {
|
if (!this.isChecked) {
|
return this.$common.showToast({
|
title: "请先同意协议"
|
})
|
}
|
uni.login({
|
provider: 'weixin',
|
timeout: 3000,
|
success: res => {},
|
})
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.wrap {
|
background: linear-gradient(to bottom, #fbec99, #ffffff);
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
padding: 0 80rpx;
|
height: 100vh;
|
|
.login_tip {
|
font-size: 28rpx;
|
color: #333;
|
padding: 40rpx 0;
|
width: 400rpx;
|
text-align: center;
|
}
|
|
.tip_img {
|
width: 160rpx;
|
margin-top: 300rpx;
|
}
|
|
.login_btn {
|
width: 100%;
|
|
.regisiter-agreement {
|
text-align: center;
|
margin-top: 30rpx;
|
font-size: 28rpx;
|
color: #838383;
|
line-height: 60rpx;
|
|
.color-base-text {
|
color: #fece01;
|
}
|
}
|
|
.uni-tip-button {
|
width: 100%;
|
font-size: 28rpx;
|
height: 70rpx;
|
line-height: 70rpx;
|
background-color: #35A6FF;
|
border-radius: 70rpx;
|
padding: 0;
|
}
|
|
.no_login {
|
font-size: 28rpx;
|
height: 70rpx;
|
line-height: 70rpx;
|
border: 2rpx solid #35A6FF;
|
color: #35A6FF;
|
border-radius: 70rpx;
|
text-align: center;
|
margin-top: 30rpx;
|
}
|
}
|
|
.mobile_login {
|
margin: 40rpx 0;
|
font-size: 32rpx;
|
color: #666;
|
line-height: 1;
|
}
|
|
.agreement_wrap {
|
margin-top: 40rpx;
|
|
.agree_item {
|
display: flex;
|
margin-bottom: 30rpx;
|
|
.item_icon {
|
width: 34rpx;
|
height: 34rpx;
|
margin-right: 10rpx;
|
flex-shrink: 0;
|
|
.item_select_img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.item_content {
|
font-size: 28rpx;
|
line-height: 36rpx;
|
color: #999;
|
|
.agreement {
|
color: #35A6FF;
|
}
|
}
|
}
|
}
|
}
|
|
.bind-wrap {
|
width: 600rpx;
|
background: #fff;
|
box-sizing: border-box;
|
border-radius: 20rpx;
|
overflow: hidden;
|
|
.heard {
|
font-size: 40rpx;
|
text-align: center;
|
font-weight: 600;
|
padding: 40rpx 0 0;
|
}
|
|
.footer {
|
border-top: 1px solid #eee;
|
display: flex;
|
|
view {
|
flex: 1;
|
height: 100rpx;
|
line-height: 100rpx;
|
text-align: center;
|
|
&:first-child {
|
font-size: 28rpx;
|
border-right: 1px solid #eee;
|
}
|
}
|
}
|
|
.bind-tips {
|
color: #aaa;
|
font-size: 28rpx;
|
padding: 20rpx 50rpx;
|
text-align: center;
|
}
|
|
.auth-login {
|
width: 300rpx;
|
margin: 20rpx auto 60rpx auto;
|
}
|
|
.bind-tip-icon {
|
padding-top: 80rpx;
|
width: 100%;
|
text-align: center;
|
|
image {
|
width: 300rpx;
|
}
|
}
|
}
|
|
.ns-btn-default-all {
|
width: 100%;
|
height: 70rpx;
|
border-radius: 70rpx;
|
text-align: center;
|
line-height: 70rpx;
|
font-size: 28rpx;
|
color: #ffffff;
|
background-color: #35A6FF;
|
}
|
</style>
|
