|
@@ -1,62 +1,144 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <view class="page">
|
|
|
|
|
- <view class="content">
|
|
|
|
|
- <view class="title flex-col justify-center">
|
|
|
|
|
- <text>HI,您好!</text>
|
|
|
|
|
- <text>欢迎登录</text>
|
|
|
|
|
|
|
+ <view class="container">
|
|
|
|
|
+
|
|
|
|
|
+ <view class="login-wrap">
|
|
|
|
|
+ <view class="title">
|
|
|
|
|
+ <text>HI,您好! 欢迎登录</text>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="h-logo flex-row justify-center">
|
|
|
|
|
- <image class="logo-img" src="../../static/logo.png"></image>
|
|
|
|
|
|
|
+ <view class="h-logo">
|
|
|
|
|
+ <image class="logo-img" src="../../static/logo.png" mode=""></image>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- <button class="login-btn flex-row justify-center" @click="wechatCodeLogin">
|
|
|
|
|
|
|
+ <!-- <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
|
|
|
|
|
+ <u-icon name="weixin-fill" color="green" size="26"></u-icon>
|
|
|
|
|
+ 微信授权手机号登录
|
|
|
|
|
+ </button> -->
|
|
|
|
|
+
|
|
|
|
|
+ <button class="login-btn" @click="authWechatCodeLogin()">
|
|
|
<u-icon name="weixin-fill" color="green" size="26"></u-icon>
|
|
<u-icon name="weixin-fill" color="green" size="26"></u-icon>
|
|
|
- <text class="weixinLogin">授权微信登录</text>
|
|
|
|
|
|
|
+ 授权微信登录
|
|
|
</button>
|
|
</button>
|
|
|
|
|
|
|
|
|
|
|
|
|
-<!-- <view class="login-form flex-row justify-between">-->
|
|
|
|
|
-<!-- <view class="flex-row">-->
|
|
|
|
|
-<!-- <view class="o"></view>-->
|
|
|
|
|
-<!-- <view class="v"></view>-->
|
|
|
|
|
-<!-- <text class="text1">自动登录</text>-->
|
|
|
|
|
-<!-- </view>-->
|
|
|
|
|
-
|
|
|
|
|
-<!-- <view @click="gotoRetieveAccount()" class="forget-acconut-password">-->
|
|
|
|
|
-<!-- <text>找回账号</text>-->
|
|
|
|
|
-<!-- </view>-->
|
|
|
|
|
-<!-- </view>-->
|
|
|
|
|
-
|
|
|
|
|
- <view class="bottom flex-row justify-between">
|
|
|
|
|
- <view class="o"></view>
|
|
|
|
|
- <view class="v"></view>
|
|
|
|
|
- <view class="login-form1 ">
|
|
|
|
|
- <text class="text2">允许我们在必要的场景下合理使用你的相关信息,且阅读并同意</text>
|
|
|
|
|
- <text class="text3">《会员协议》、《服务对象协《隐私协议》</text>
|
|
|
|
|
- <text class="text2">等内容</text>
|
|
|
|
|
|
|
+ <view class="login-form">
|
|
|
|
|
+ <view class="remember-acconut">
|
|
|
|
|
+ <view class="remember-acconut-password">
|
|
|
|
|
+ <u-radio-group
|
|
|
|
|
+ v-model="radiovalue1"
|
|
|
|
|
+ placement="column"
|
|
|
|
|
+ @change="groupChange"
|
|
|
|
|
+ >
|
|
|
|
|
+ <u-radio
|
|
|
|
|
+ :customStyle="{marginBottom: '8px'}"
|
|
|
|
|
+ v-for="(item, index) in radiolist1"
|
|
|
|
|
+ :key="index"
|
|
|
|
|
+ :label="item.name"
|
|
|
|
|
+ :name="item.name"
|
|
|
|
|
+ @change="radioChange"
|
|
|
|
|
+ >
|
|
|
|
|
+ </u-radio>
|
|
|
|
|
+ </u-radio-group>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ <view @click="gotoRetieveAccount()" class="forget-acconut-password">
|
|
|
|
|
+ 找回账号
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
+ <view class="login-form">
|
|
|
|
|
+ <view class="agreement-content">
|
|
|
|
|
+ <u-icon name="checkmark-circle-fill" color="#2979ff" size="20"></u-icon>
|
|
|
|
|
+ <view class="agreement">
|
|
|
|
|
+ <text>允许我们在必要的场景下合理使用你的相关信息,登录且同意</text>
|
|
|
|
|
+ <text @click="gotoAgreement('1','会员协议')" class="text-color">《会员协议》、</text>
|
|
|
|
|
+ <text @click="gotoAgreement('2','服务对象协议')" class="text-color">《服务对象协议》、</text>
|
|
|
|
|
+ <text @click="gotoAgreement('3','服务对象协议')" class="text-color">《服务对象协议》</text>等内容
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 判断微信是否绑定账号 -->
|
|
|
|
|
+ <u-popup :show="show" :round="10" mode="center" >
|
|
|
|
|
+ <view class="h-popo-content">
|
|
|
|
|
+ <view class="h-img">
|
|
|
|
|
+ <u-icon name="/static/login/u01.png" color="red" size="60"></u-icon>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="text">
|
|
|
|
|
+ <text>该微信未绑定账号</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="h-btn-wrap">
|
|
|
|
|
+ <view @click="cancelOption" class="h-left-btn">
|
|
|
|
|
+ <text>取消</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view @click="gotoBindAccount" class="h-right-btn">
|
|
|
|
|
+ <text>去绑定</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </u-popup>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
-
|
|
|
|
|
<script>
|
|
<script>
|
|
|
export default {
|
|
export default {
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
- title: 'Hello'
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ show: false,
|
|
|
|
|
+ userInfo: {
|
|
|
|
|
+ username: 'uview-plus UI',
|
|
|
|
|
+ password: '',
|
|
|
|
|
+ openId: ''
|
|
|
|
|
+ },
|
|
|
|
|
+ // 基本案列数据
|
|
|
|
|
+ radiolist1: [{
|
|
|
|
|
+ name: '自动登录',
|
|
|
|
|
+ disabled: true
|
|
|
|
|
+ }],
|
|
|
|
|
+ radiolist2: [{
|
|
|
|
|
+ name: '允许我们在必要的场景下合理使用你的相关信息,登录且同意',
|
|
|
|
|
+ disabled: true
|
|
|
|
|
+ }],
|
|
|
|
|
+ // u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
|
|
|
|
|
+ radiovalue1: '自动登录',
|
|
|
|
|
+ radiovalue2: '22222',
|
|
|
|
|
+ };
|
|
|
},
|
|
},
|
|
|
onLoad() {
|
|
onLoad() {
|
|
|
-
|
|
|
|
|
|
|
+ this.wechatCodeLogin();
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
|
|
+ // 去协议页面
|
|
|
|
|
+ gotoAgreement(type,name){
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: '/myPages/TermsOfService/index?name='+name + '&type=' + type,
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ // 取消操作
|
|
|
|
|
+ cancelOption(){
|
|
|
|
|
+ this.show = false;
|
|
|
|
|
+ },
|
|
|
|
|
+ // 去绑定账号
|
|
|
|
|
+ gotoBindAccount(){
|
|
|
|
|
+ this.show = false;
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: '/loginPages/login/bind-account',
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ // 自动登录不成功,用户手动授权登录
|
|
|
|
|
+ authWechatCodeLogin(){
|
|
|
|
|
+ if(!this.userInfo.openId){
|
|
|
|
|
+ this.show = true;
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ // 微信小程序code自动登录
|
|
|
wechatCodeLogin(){
|
|
wechatCodeLogin(){
|
|
|
let that = this;
|
|
let that = this;
|
|
|
|
|
+
|
|
|
wx.login({
|
|
wx.login({
|
|
|
success(re) {
|
|
success(re) {
|
|
|
that.$api.wxAuthLogin({code:re.code}).then(res=>{
|
|
that.$api.wxAuthLogin({code:re.code}).then(res=>{
|
|
|
|
|
+ that.userInfo = res.data.data.userInfo
|
|
|
uni.setStorageSync('userInfo',res.data.data.userInfo)
|
|
uni.setStorageSync('userInfo',res.data.data.userInfo)
|
|
|
uni.setStorageSync('accessToken',res.data.data.access_token)
|
|
uni.setStorageSync('accessToken',res.data.data.access_token)
|
|
|
uni.setStorageSync('phoneIsBind',res.data.data.phoneIsBind)
|
|
uni.setStorageSync('phoneIsBind',res.data.data.phoneIsBind)
|
|
@@ -66,21 +148,168 @@
|
|
|
url: '/pages/index/index',
|
|
url: '/pages/index/index',
|
|
|
})
|
|
})
|
|
|
}else {
|
|
}else {
|
|
|
- uni.navigateTo({
|
|
|
|
|
- url: '/loginPages/bindAccount/index',
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ that.show = true
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
},
|
|
},
|
|
|
- });
|
|
|
|
|
|
|
+ })
|
|
|
},
|
|
},
|
|
|
|
|
+ getPhoneNumber (e) {
|
|
|
|
|
+ uni.showToast({
|
|
|
|
|
+ title: e.detail.code
|
|
|
|
|
+ })
|
|
|
|
|
+ console.log(e.detail.code) // 动态令牌
|
|
|
|
|
+ console.log(e.detail.errMsg) // 回调信息(成功失败都会返回)
|
|
|
|
|
+ console.log(e.detail.errno) // 错误码(失败时返回)
|
|
|
|
|
+ },
|
|
|
|
|
+ // 去找回账号页面
|
|
|
|
|
+ gotoRetieveAccount(){
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url: '/loginPages/login/retrieve-account',
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ groupChange(n) {
|
|
|
|
|
+ console.log('groupChange', n);
|
|
|
|
|
+ },
|
|
|
|
|
+ radioChange(n) {
|
|
|
|
|
+ this.radiovalue1 = ""
|
|
|
|
|
+ console.log('radioChange', n);
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ };
|
|
|
|
|
+</script>
|
|
|
|
|
+<style lang="scss">
|
|
|
|
|
+ page,body{
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ }
|
|
|
|
|
+ .container{
|
|
|
|
|
+ width: 90%;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
|
|
+ .title{
|
|
|
|
|
+ margin-top: 12px;
|
|
|
|
|
+ width: 140px;
|
|
|
|
|
+ font-size: 24px;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #333333;
|
|
|
|
|
+ line-height: 38px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .h-logo{
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ .logo-img{
|
|
|
|
|
+ width: 160px;
|
|
|
|
|
+ height: 122px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .login-wrap {
|
|
|
|
|
+ .account{
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .login-btn{
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ width: 70%;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ margin-top: 50px;
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ line-height: 40px;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ background: #FFE05C;
|
|
|
|
|
+ border-radius: 21px;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ .wechat-logo{
|
|
|
|
|
+ height: 12px;
|
|
|
|
|
+ width: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .identifying-code{
|
|
|
|
|
+ image{
|
|
|
|
|
+ width: 80px;
|
|
|
|
|
+ height: 30px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .remember-acconut{
|
|
|
|
|
+ margin-top: 18px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ color: #999999;
|
|
|
|
|
+ .forget-acconut-password{
|
|
|
|
|
+ color: rgb(96, 98, 102);
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ line-height: 25px;
|
|
|
|
|
+ margin-left: 30%;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .agreement-content{
|
|
|
|
|
+ margin-top: 18px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ // justify-content: space-between;
|
|
|
|
|
+ color: #999999;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ .agreement{
|
|
|
|
|
+ color: rgb(96, 98, 102);
|
|
|
|
|
+ padding-left: 1px;
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ .text-color{
|
|
|
|
|
+ color: blue;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
-</script>
|
|
|
|
|
|
|
|
|
|
-<style>
|
|
|
|
|
- @import '/common/css/common.css';
|
|
|
|
|
- @import './index.rpx.css';
|
|
|
|
|
|
|
+ .h-popo-content{
|
|
|
|
|
+ height: 180px;
|
|
|
|
|
+ padding: 12px;
|
|
|
|
|
+ width: 300px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
|
|
+ .h-img{
|
|
|
|
|
+ padding: 7px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+ .h-text{
|
|
|
|
|
+ margin-top: 12px;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ color: #666666;
|
|
|
|
|
+ }
|
|
|
|
|
+ .text{
|
|
|
|
|
+ margin-top: 6px;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ color: #666666;
|
|
|
|
|
+ }
|
|
|
|
|
+ .h-btn-wrap{
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ color: #333333;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ margin-top: 14px;
|
|
|
|
|
+ .h-left-btn{
|
|
|
|
|
+ height: 32px;
|
|
|
|
|
+ line-height: 30px;
|
|
|
|
|
+ background: #EEEEEE;
|
|
|
|
|
+ width: 100px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ border-radius: 16px;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ }
|
|
|
|
|
+ .h-right-btn{
|
|
|
|
|
+ height: 32px;
|
|
|
|
|
+ line-height: 30px;
|
|
|
|
|
+ background: #FFE05C;
|
|
|
|
|
+ width: 100px;
|
|
|
|
|
+ border-radius: 16px;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
</style>
|
|
</style>
|