You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
138 lines
3.6 KiB
138 lines
3.6 KiB
<template>
|
|
<view>
|
|
<view class="lf-row-center lf-flex-column box">
|
|
<image class="img"></image>
|
|
<view class="lf-m-t-10 lf-font-32" v-if="isLogin">游客jdsfbuskdnko</view>
|
|
<block v-if="isLogin">
|
|
<button class="btn" @click="getUserProfile">
|
|
<u-icon name="weixin-fill" color="#ffffff" size="60" class="lf-text-vertical"></u-icon>
|
|
<text class="lf-m-l-20">绑定微信</text>
|
|
</button>
|
|
<view class="lf-m-t-40 lf-font-28" @click="$toBack()">暂不绑定继续操作</view>
|
|
</block>
|
|
<block v-else>
|
|
<button class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
|
|
<u-icon name="weixin-fill" color="#ffffff" size="60" class="lf-text-vertical"></u-icon>
|
|
<text class="lf-m-l-20">微信快捷登录</text>
|
|
</button>
|
|
<view class="lf-m-t-40 lf-font-28" @click="$url('/pages/login/accountLogin')">使用手机号登录</view>
|
|
<view class="mask" v-if="!checked" @click="$msg('您未同意协议条款')"></view>
|
|
</block>
|
|
</view>
|
|
<!-- 服务条款 -->
|
|
<view class="fixed-bottom" v-if="!isLogin">
|
|
<checkbox-group @change="checkboxChange" style="display: inline-block;">
|
|
<checkbox class="lf-text-vertical" :checked="checked"></checkbox>
|
|
</checkbox-group>
|
|
<text class="lf-m-l-10 lf-font-24 lf-color-gray">
|
|
<text>请认真阅读并同意</text>
|
|
<text class="highlight" @click="enterAgree">《时空网协议》</text>
|
|
<text>，在小程序下单购买即表示您已默认同意</text>
|
|
<text class="highlight" @click="enterAgree">《时空网协议》</text>
|
|
<text>的所有条款。</text>
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return {
|
|
checked: false, // 是否勾选协议
|
|
isLogin: false, // 是否已登录
|
|
userInfo: {},
|
|
type: 'phone', // 页面授权类型 phone获取手机号 | userinfo获取用户信息
|
|
}
|
|
},
|
|
onLoad(){
|
|
|
|
},
|
|
methods: {
|
|
// 进入查看协议
|
|
enterAgree(){
|
|
console.log("查看协议");
|
|
},
|
|
// 勾选协议发生变化
|
|
checkboxChange(event){
|
|
console.log(event)
|
|
this.checked = event.detail.value.length > 0;
|
|
},
|
|
// 微信快捷登录获取手机号
|
|
getPhoneNumber(event){
|
|
console.log(event);
|
|
if(event.detail.errMsg == 'getPhoneNumber:ok'){
|
|
let encryptedData = event.detail.encryptedData;
|
|
let iv = event.detail.iv;
|
|
this.isLogin = true; // TODO 接口请求回来再赋值
|
|
}
|
|
},
|
|
// 获取用户信息
|
|
getUserProfile(){
|
|
uni.getUserProfile({
|
|
desc: '您的信息将用于时空网显示',
|
|
lang: 'zh_CN',
|
|
complete: result => {
|
|
console.log(result)
|
|
if(result.errMsg == 'getUserProfile:ok'){
|
|
let encryptedData = result.encryptedData;
|
|
let iv = result.iv;
|
|
let signature = result.signature;
|
|
let userInfo = result.userInfo;
|
|
// 获取成功，请求接口完毕后返回页面
|
|
this.$toBack();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page{
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped="scoped">
|
|
.box{
|
|
padding: 60rpx 32rpx;
|
|
width: 750rpx;
|
|
height: auto;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
.img{
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
border-radius: 50%;
|
|
background-color: #EEEEEE;
|
|
}
|
|
.btn{
|
|
background-color: #09BB07;
|
|
color: #FFFFFF;
|
|
width: 100%;
|
|
height: 88rpx;
|
|
border-radius: 42rpx;
|
|
font-size: 32rpx;
|
|
line-height: 88rpx;
|
|
margin-top: 80rpx;
|
|
}
|
|
}
|
|
.fixed-bottom{
|
|
position: fixed;
|
|
bottom: 60rpx;
|
|
left: 0;
|
|
padding: 0 32rpx;
|
|
.highlight{
|
|
color: #1e90ff;
|
|
}
|
|
}
|
|
|
|
.mask{
|
|
position: absolute;
|
|
bottom: 46rpx;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 190rpx;
|
|
}
|
|
</style>
|