店铺详情下拉刷新优化，下载邀请图片功能添加
This commit is contained in:
@@ -1,239 +1,312 @@
|
||||
<template>
|
||||
<view class="auth">
|
||||
<image class="auth-back" src="/static/login/auth_bg.png" mode="aspectFill"></image>
|
||||
<view class="auth-center">
|
||||
<view class="auth-title">
|
||||
<view>共力生态</view>
|
||||
<view>即可开始共力人生</view>
|
||||
</view>
|
||||
<view class="auth-input">
|
||||
<input v-model="phone" type="number" maxlength="11" placeholder="输入手机号码">
|
||||
</view>
|
||||
<view class="auth-input auth-code">
|
||||
<input v-model="code" type="number" maxlength="4" placeholder="输入验证码">
|
||||
<button :disabled="getSms" size="mini" @click="getPhoneCode()">{{sendCode}}</button>
|
||||
</view>
|
||||
<view class="auth-input" v-if="isShowParent">
|
||||
<input v-model="parentId" placeholder="输入邀请码,选填">
|
||||
</view>
|
||||
<view class="auth-button">
|
||||
<button @click="login('code')">登录</button>
|
||||
</view>
|
||||
<view class="auth-agreement">
|
||||
登录即表示同意<navigator hover-class="none" url="/pages/vip/agreement?id=3">用户协议</navigator>和<navigator hover-class="none" url="/pages/vip/agreement?id=4">隐私政策</navigator>
|
||||
</view>
|
||||
<!-- <view class="auth-other">
|
||||
<button @click="login('mnemonic')">使用助记词登录</button>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="auth">
|
||||
<image class="auth-back" src="/static/login/auth_bg.png" mode="aspectFill"></image>
|
||||
<view class="auth-center">
|
||||
<view class="auth-title">
|
||||
<view>共力生态</view>
|
||||
<view>即可开始共力人生</view>
|
||||
</view>
|
||||
<view class="auth-input">
|
||||
<input v-model="phone" type="number" maxlength="11" placeholder="输入手机号码">
|
||||
</view>
|
||||
<view class="auth-input auth-code">
|
||||
<input v-model="code" type="number" maxlength="4" placeholder="输入验证码">
|
||||
<button :disabled="getSms" size="mini" @click="getPhoneCode()">{{sendCode}}</button>
|
||||
</view>
|
||||
<view class="auth-input" v-if="isShowParent">
|
||||
<input v-model="parentId" placeholder="输入邀请码,选填">
|
||||
</view>
|
||||
<view class="auth-button">
|
||||
<button @click="login('code')">登录</button>
|
||||
</view>
|
||||
<view class="auth-agreement">
|
||||
登录即表示同意<navigator hover-class="none" url="/pages/vip/agreement?id=3">用户协议</navigator>和<navigator
|
||||
hover-class="none" url="/pages/vip/agreement?id=4">隐私政策</navigator>
|
||||
</view>
|
||||
<view class="auth-other" v-if="isKeyAuth">
|
||||
<button @click="login('Akey')">使用本机号码一键登录</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
smsAuth,
|
||||
getInvitationSms
|
||||
} from '@/apis/interfaces/auth.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phone : '',
|
||||
code : '',
|
||||
parentId : '',
|
||||
getSms : false,
|
||||
sendCode : '获取验证码',
|
||||
isShowParent: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$store.commit('setToken', '')
|
||||
},
|
||||
methods: {
|
||||
// 获取验证码
|
||||
getPhoneCode() {
|
||||
uni.showLoading({
|
||||
title : '加载中...',
|
||||
mask :true
|
||||
})
|
||||
let outTime;
|
||||
let smsTime = 60;
|
||||
getInvitationSms({
|
||||
mobileNo: this.phone,
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: res.message,
|
||||
icon: "none",
|
||||
});
|
||||
this.isShowParent = res.is_show_parent
|
||||
this.getSms = true;
|
||||
this.sendCode = smsTime + 's后重新获取';
|
||||
outTime = setInterval(() => {
|
||||
if (smsTime <= 1) {
|
||||
this.getSms = false;
|
||||
this.sendCode = '重新获取';
|
||||
clearInterval(outTime);
|
||||
return
|
||||
}
|
||||
this.sendCode = smsTime + 's后重新获取';
|
||||
smsTime -= 1;
|
||||
}, 1000);
|
||||
}).catch((err) => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none",
|
||||
});
|
||||
});
|
||||
},
|
||||
// 登录
|
||||
login(type) {
|
||||
if (type === 'code') {
|
||||
uni.showLoading({
|
||||
title: '登录中'
|
||||
})
|
||||
smsAuth({
|
||||
mobileNo : this.phone,
|
||||
code : this.code,
|
||||
parent_id : this.parentId
|
||||
}).then((res) => {
|
||||
this.$store.commit('setToken', res.token_type + ' ' + res.access_token);
|
||||
if(res.is_new){
|
||||
uni.setStorageSync('isnew', 0)
|
||||
this.$Router.replace({name: 'AuthRole'})
|
||||
return
|
||||
}
|
||||
uni.setStorageSync('isnew', 1)
|
||||
this.$Router.pushTab({name: 'Life'})
|
||||
uni.hideLoading()
|
||||
}).catch((err) => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none",
|
||||
});
|
||||
});
|
||||
return
|
||||
}
|
||||
if (type === 'mnemonic') {
|
||||
uni.showToast({
|
||||
title: '助记词登录暂未开放，敬请期待~',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
import {
|
||||
smsAuth,
|
||||
getInvitationSms,
|
||||
keyAuth
|
||||
} from '@/apis/interfaces/auth.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phone: '',
|
||||
code: '',
|
||||
parentId: '',
|
||||
getSms: false,
|
||||
sendCode: '获取验证码',
|
||||
isShowParent: false,
|
||||
isKeyAuth: false
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
// uni.showLoading({
|
||||
// title: '加载中...',
|
||||
// mask: true
|
||||
// })
|
||||
// // 预登录
|
||||
// uni.preLogin({
|
||||
// provider: 'univerify',
|
||||
// success: res => {
|
||||
// this.isKeyAuth = true
|
||||
// uni.hideLoading()
|
||||
// },
|
||||
// fail: err => {
|
||||
// console.log(err)
|
||||
// }
|
||||
// })
|
||||
},
|
||||
methods: {
|
||||
// 获取验证码
|
||||
getPhoneCode() {
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
})
|
||||
let outTime;
|
||||
let smsTime = 60;
|
||||
getInvitationSms({
|
||||
mobileNo: this.phone,
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: res.message,
|
||||
icon: "none",
|
||||
});
|
||||
this.isShowParent = res.is_show_parent
|
||||
this.getSms = true;
|
||||
this.sendCode = smsTime + 's后重新获取';
|
||||
outTime = setInterval(() => {
|
||||
if (smsTime <= 1) {
|
||||
this.getSms = false;
|
||||
this.sendCode = '重新获取';
|
||||
clearInterval(outTime);
|
||||
return
|
||||
}
|
||||
this.sendCode = smsTime + 's后重新获取';
|
||||
smsTime -= 1;
|
||||
}, 1000);
|
||||
}).catch((err) => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none",
|
||||
});
|
||||
});
|
||||
},
|
||||
// 登录
|
||||
login(type) {
|
||||
if (type === 'code') {
|
||||
uni.showLoading({
|
||||
title: '登录中'
|
||||
})
|
||||
smsAuth({
|
||||
mobileNo: this.phone,
|
||||
code: this.code,
|
||||
parent_id: this.parentId
|
||||
}).then((res) => {
|
||||
this.setAuthToken(res.token_type + ' ' + res.access_token, res.is_new)
|
||||
uni.hideLoading()
|
||||
}).catch((err) => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: "none",
|
||||
});
|
||||
});
|
||||
return
|
||||
}
|
||||
if (type === 'Akey') {
|
||||
this.onKeyLogin()
|
||||
}
|
||||
},
|
||||
// 一键登录
|
||||
onKeyLogin() {
|
||||
uni.login({
|
||||
provider: 'univerify',
|
||||
univerifyStyle: {
|
||||
icon: {
|
||||
path: require('@/static/logo.png')
|
||||
},
|
||||
authButton: {
|
||||
normalColor: '#34CE98',
|
||||
highlightColor: '#25b381',
|
||||
disabledColor: '#25b381'
|
||||
},
|
||||
otherLoginButton: {
|
||||
visible: false
|
||||
},
|
||||
privacyTerms: {
|
||||
termsColor: '#34CE98',
|
||||
uncheckedImage: require('@/static/icon/unchecked-icon.png'),
|
||||
checkedImage: require('@/static/icon/checked-icon.png')
|
||||
}
|
||||
},
|
||||
success: Result => {
|
||||
if (Result.errMsg === 'login:ok') {
|
||||
let {
|
||||
access_token,
|
||||
openid
|
||||
} = Result.authResult
|
||||
keyAuth({
|
||||
access_token,
|
||||
openid
|
||||
}).then(res => {
|
||||
this.setAuthToken(res.token_type + ' ' + res.access_token, res
|
||||
.is_new)
|
||||
uni.closeAuthView()
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: '登录失败：' + err.message,
|
||||
icon: 'none'
|
||||
})
|
||||
uni.closeAuthView()
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
},
|
||||
// setToken
|
||||
setAuthToken(token, isNew) {
|
||||
this.$store.commit('setToken', token);
|
||||
if (isNew) {
|
||||
uni.setStorageSync('isnew', 0)
|
||||
this.$Router.replace({
|
||||
name: 'AuthRole'
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.setStorageSync('isnew', 1)
|
||||
this.$Router.pushTab({
|
||||
name: 'Life'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.auth {
|
||||
height: 100vh;
|
||||
.auth {
|
||||
height: 100vh;
|
||||
|
||||
.auth-back {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.auth-back {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.auth-center {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, .0), rgba(0, 0, 0, .5));
|
||||
padding: 100rpx 50rpx;
|
||||
box-sizing: border-box;
|
||||
.auth-center {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, .0), rgba(0, 0, 0, .5));
|
||||
padding: 100rpx 50rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.auth-title {
|
||||
font-size: 50rpx;
|
||||
font-weight: bold;
|
||||
line-height: 70rpx;
|
||||
color: white;
|
||||
}
|
||||
.auth-title {
|
||||
font-size: 50rpx;
|
||||
font-weight: bold;
|
||||
line-height: 70rpx;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.auth-input {
|
||||
background: white;
|
||||
height: 100rpx;
|
||||
border-radius: 50rpx;
|
||||
margin-top: 40rpx;
|
||||
overflow: hidden;
|
||||
.auth-input {
|
||||
background: white;
|
||||
height: 100rpx;
|
||||
border-radius: 50rpx;
|
||||
margin-top: 40rpx;
|
||||
overflow: hidden;
|
||||
|
||||
input {
|
||||
height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
padding: 0 50rpx;
|
||||
flex: 1;
|
||||
}
|
||||
input {
|
||||
height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
padding: 0 50rpx;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&.auth-code {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
&.auth-code {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
button[size="mini"] {
|
||||
width: 280rpx;
|
||||
padding: 0;
|
||||
line-height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
border-radius: 0;
|
||||
color: $main-color;
|
||||
background: white;
|
||||
&[disabled]{
|
||||
color: gray;
|
||||
}
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
button[size="mini"] {
|
||||
width: 280rpx;
|
||||
padding: 0;
|
||||
line-height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
border-radius: 0;
|
||||
color: $main-color;
|
||||
background: white;
|
||||
|
||||
.auth-button {
|
||||
margin-top: 70rpx;
|
||||
&[disabled] {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
button {
|
||||
background: $main-color;
|
||||
color: white;
|
||||
border-radius: 50rpx;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
font-size: 34rpx;
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.auth-button {
|
||||
margin-top: 70rpx;
|
||||
|
||||
.auth-agreement {
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 28rpx;
|
||||
padding: 30rpx 0 100rpx 0;
|
||||
button {
|
||||
background: $main-color;
|
||||
color: white;
|
||||
border-radius: 50rpx;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
font-size: 34rpx;
|
||||
|
||||
navigator {
|
||||
display: inline-block;
|
||||
padding: 0 10rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-other {
|
||||
padding: 0 10vw;
|
||||
.auth-agreement {
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 28rpx;
|
||||
padding: 30rpx 0 60rpx 0;
|
||||
|
||||
button {
|
||||
height: 100rpx;
|
||||
line-height: 98rpx;
|
||||
border-radius: 50rpx;
|
||||
border: solid 1px white;
|
||||
color: white;
|
||||
background: transparent;
|
||||
font-size: 34rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
navigator {
|
||||
display: inline-block;
|
||||
padding: 0 10rpx;
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-other {
|
||||
padding: 0 10vw;
|
||||
|
||||
button {
|
||||
height: 100rpx;
|
||||
line-height: 98rpx;
|
||||
border-radius: 50rpx;
|
||||
border: solid 1px white;
|
||||
color: white;
|
||||
background: transparent;
|
||||
font-size: 34rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user