TmOct5/BlockChainH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

'登录页面优化展示，个人中心企业和个人中跳转处理等路径'

Browse Source
This commit is contained in:
张冬雪
2021-09-24 16:13:50 +08:00
parent a18b9d8a63
commit 8ab145ea73
6 changed files with 155 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apis/index.js
View File

@@ -9,7 +9,7 @@ import store from '@/store'
// 基础配置 // 基础配置
const config = { const config = {
apiUrl : 'https://e-chain.cnskl.com/api/', apiUrl : 'http://api.ahxh.shangkelian.cn/api/',
timeout : 60000 timeout : 60000
} }

167
pages/login/login.vue
View File

@@ -1,20 +1,22 @@
<template> <template>
<view class="content"> <view class="content">
<view class="title">易品新境</view> <!-- <view class="title">易品新境</view> -->
<view class="login-top">
<view class="top-logo-content">
<image class="top-logo" fit="contain" src="/static/imgs/top_logo.png" />
链商星球(中国)
</view>
<image class="top-bg" fit="contain" src="/static/imgs/top_bg.png" />
</view>
<!-- 输入手机号相关 -->
<view class="inputs phone"> <view class="inputs phone">
<label class="label">+86</label> <label class="label">+86</label>
<input type="number" placeholder="输入您的手机号码" v-model="phone"/> <input type="number" placeholder="输入您的手机号码" v-model="phone" />
</view> </view>
<view class="inputs sms"> <view class="inputs sms">
<input type="number" placeholder="输入短信验证码" v-model="code"/> <input type="number" placeholder="输入短信验证码" v-model="code" />
<button <button class="sms-btn" type="default" size="mini" :disabled="phone == '' || getSms"
class="sms-btn" @click="getPhoneCode">{{getSms ? '重新发送' + smsTime + 's': '发送验证码'}}</button>
type="default"
size="mini"
:disabled="phone == '' || getSms"
@click="getPhoneCode"
>{{getSms ? '重新发送' + smsTime + 's': '发送验证码'}}</button>
</view> </view>
<button class="btn" type="default" :disabled="phone == '' || code == ''" @click="login">登录</button> <button class="btn" type="default" :disabled="phone == '' || code == ''" @click="login">登录</button>
<!-- 快捷登录 --> <!-- 快捷登录 -->
@@ -25,64 +27,71 @@
</view> </view>
</view> </view>
<!-- 用户登录注册协议 --> <!-- 用户登录注册协议 -->
<view class="agreement">未注册的手机号验证后将自动创建账号，登录即表示同意接收<navigator url="">用户隐私规格</navigator>和<navigator url="">用户服务协议</navigator></view> <view class="agreement">未注册的手机号验证后将自动创建账号，登录即表示同意接收<navigator url="">用户隐私规格</navigator>和<navigator url="">用户服务协议
</navigator>
</view>
</view> </view>
</template> </template>
<script> <script>
import { getSms, smsAuth } from '@/apis/interfaces/auth' import {
getSms,
smsAuth
} from '@/apis/interfaces/auth'
export default { export default {
data() { data() {
return { return {
phone : "18245180131", phone: "18245180131",
code : "", code: "",
smsTime : 60, smsTime: 60,
getSms : false getSms: false
} }
}, },
methods: { methods: {
// 用户登录 // 用户登录
login(){ login() {
smsAuth({ smsAuth({
mobileNo: this.phone, mobileNo: this.phone,
code : this.code code: this.code
}).then(res => { }).then(res => {
this.$store.commit('setToken', res.token_type + ' ' + res.access_token) this.$store.commit('setToken', res.token_type + ' ' + res.access_token)
if(!res.is_company){ if (!res.is_company) {
this.$Router.replace({name: "Registered"}) this.$Router.replace({
name: "Registered"
})
return return
} }
this.$Router.back() this.$Router.back()
}).catch(err => { }).catch(err => {
uni.showToast({ uni.showToast({
title: err.message, title: err.message,
icon : "none" icon: "none"
}) })
}) })
}, },
// 获取验证码 // 获取验证码
getPhoneCode(){ getPhoneCode() {
let outTime let outTime
getSms({ getSms({
mobileNo: this.phone mobileNo: this.phone
}).then(res => { }).then(res => {
uni.showToast({ uni.showToast({
title: res, title: res,
icon : "none" icon: "none"
}) })
this.getSms = true this.getSms = true
outTime = setInterval(()=>{ outTime = setInterval(() => {
if(this.smsTime <= 1){ if (this.smsTime <= 1) {
this.getSms = false this.getSms = false
this.smsTime = 60 this.smsTime = 60
clearInterval('outTime') clearInterval('outTime')
} }
this.smsTime -= 1 this.smsTime -= 1
},1000) }, 1000)
}).catch(err => { }).catch(err => {
uni.showToast({ uni.showToast({
title: err.message, title: err.message,
icon : "none" icon: "none"
}) })
}) })
} }
@@ -91,20 +100,60 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content{ .content {
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
padding: $padding * 3; padding: $padding * 3;
box-sizing: border-box; box-sizing: border-box;
background: white; background: white;
.inputs{
background: $border-color-lg; .login-top {
height: 36vh;
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: center;
box-sizing: border-box;
position: relative;
padding-bottom: 160rpx;
.top-bg {
position: absolute;
bottom: 30rpx;
// left: 2rpx;
z-index: 2;
width: 740rpx;
margin-left: 40rpx;
}
.top-logo-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
color: #7f56a4;
font-size: 18px;
.top-logo {
margin-bottom: 20rpx;
width: 240rpx;
height: 240rpx;
}
}
}
.inputs {
background:rgba($color: $mian-color, $alpha: 0.05);
border: solid 1rpx $border-color; border: solid 1rpx $border-color;
position: relative; position: relative;
margin-top: $margin; margin-top: $margin;
height: 80rpx; height: 80rpx;
line-height: 80rpx; line-height: 80rpx;
input{
input {
width: 100%; width: 100%;
height: 80rpx; height: 80rpx;
line-height: 80rpx; line-height: 80rpx;
@@ -113,9 +162,11 @@
box-sizing: border-box; box-sizing: border-box;
font-size: $title-size-lg; font-size: $title-size-lg;
} }
&.phone{
&.phone {
padding-left: 120rpx; padding-left: 120rpx;
.label{
.label {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@@ -125,9 +176,11 @@
font-size: $title-size-lg; font-size: $title-size-lg;
} }
} }
&.sms{
&.sms {
padding-right: 200rpx; padding-right: 200rpx;
.sms-btn[size='mini']{
.sms-btn[size='mini'] {
width: 200rpx; width: 200rpx;
height: 80rpx; height: 80rpx;
line-height: 80rpx; line-height: 80rpx;
@@ -140,25 +193,29 @@
border-left: solid 1rpx $border-color; border-left: solid 1rpx $border-color;
color: $text-price; color: $text-price;
font-size: $title-size-lg; font-size: $title-size-lg;
&::after{
&::after {
border: none; border: none;
} }
&[disabled]{
&[disabled] {
color: rgba($color: $text-price, $alpha: .6); color: rgba($color: $text-price, $alpha: .6);
background: $border-color-lg; background: $border-color-lg;
} }
} }
} }
} }
.title{
.title {
text-align: center; text-align: center;
font-size: $title-size + 6; font-size: $title-size + 6;
font-weight: bold; font-weight: bold;
color: $text-color; color: $text-color;
margin-bottom: 100rpx; margin-bottom: 100rpx;
} }
.btn{
background: $text-price; .btn {
background: $mian-color;
color: white; color: white;
border-radius: 0; border-radius: 0;
margin-top: $margin; margin-top: $margin;
@@ -166,35 +223,43 @@
line-height: 90rpx; line-height: 90rpx;
height: 90rpx; height: 90rpx;
font-weight: bold; font-weight: bold;
&::after{
&::after {
border: none; border: none;
} }
&[disabled]{
background: rgba($color: $text-price, $alpha: .6); &[disabled] {
background: rgba($color: $mian-color, $alpha: .6);
} }
} }
.quick{
.quick {
padding-top: $padding * 3; padding-top: $padding * 3;
text-align: center; text-align: center;
.quick-title{
.quick-title {
text-align: center; text-align: center;
color: $text-gray; color: $text-gray;
font-size: $title-size-sm; font-size: $title-size-sm;
padding-bottom: $padding; padding-bottom: $padding;
} }
.quick-box{
.quick-box {
display: flex; display: flex;
justify-content: center; justify-content: center;
.quick-icon{
.quick-icon {
width: 78rpx; width: 78rpx;
} }
} }
} }
.agreement{
.agreement {
padding-top: $padding * 4; padding-top: $padding * 4;
font-size: $title-size-sm; font-size: $title-size-sm;
color: $text-gray; color: $text-gray;
navigator{
navigator {
color: $text-price; color: $text-price;
display: inline-block; display: inline-block;
padding: 0 10rpx; padding: 0 10rpx;

42
pages/setting/setting.vue
View File

@@ -9,7 +9,7 @@
<span>修改头像</span> <span>修改头像</span>
</view> </view>
<view class="avatar"> <view class="avatar">
<image :src="avatar.showPath" mode="aspectFill" /> <image :src="avatar.showPath?avatar.showPath:'/static/imgs/no-avatar.png'" mode="aspectFill" />
<u-icon name="arrow-right" color="#f1f1f1" size="28" /> <u-icon name="arrow-right" color="#f1f1f1" size="28" />
</view> </view>
</view> </view>
@@ -33,7 +33,7 @@
<u-icon name="arrow-right" color="#f1f1f1" size="28" /> <u-icon name="arrow-right" color="#f1f1f1" size="28" />
</button> </button>
<!-- 个人认证 --> <!-- 个人认证 -->
<view @click="loginOut" class="list-item"> <view @click="certification(is_certification)" class="list-item">
<view class="list-item-left"> <view class="list-item-left">
<image src="/static/imgs/self-icon.png" mode="widthFix" /> <image src="/static/imgs/self-icon.png" mode="widthFix" />
<span>个人认证</span> <span>个人认证</span>
@@ -41,7 +41,7 @@
<u-icon name="arrow-right" color="#f1f1f1" size="28" /> <u-icon name="arrow-right" color="#f1f1f1" size="28" />
</view> </view>
<!-- 企业认证 --> <!-- 企业认证 -->
<view @click="loginOut" class="list-item"> <view @click="company(is_company)" class="list-item">
<view class="list-item-left"> <view class="list-item-left">
<image src="/static/imgs/company-icon.png" mode="widthFix" /> <image src="/static/imgs/company-icon.png" mode="widthFix" />
<span>企业认证</span> <span>企业认证</span>
@@ -95,7 +95,9 @@
path: '', path: '',
showPath: '' showPath: ''
}, },
is_bind: true is_bind: true, // 微信绑定
is_certification: true, // 个人认证
is_company: true, // 企业认证
} }
}, },
onShow() { onShow() {
@@ -110,12 +112,44 @@
this.getUserInfo() this.getUserInfo()
}, },
methods: { methods: {
// 是否个人认证
certification(is_certfication) {
console.log(is_certfication)
if (is_certfication) {
// 跳转到个人认证信息完成展示页面
this.$router.push({
name: ''
})
} else {
// 跳转到个人认证信息页面
this.$router.push({
name: ''
})
}
},
// 是否展示企业信息
company(is_company) {
console.log(is_company)
if (is_company) {
// 跳转到企业认证完成信息展示页面
this.$router.push({
name: ''
})
} else {
// 跳转到企业认证页面
this.$router.push({
name: ''
})
}
},
// 获取当前用户得基本信息 // 获取当前用户得基本信息
getUserInfo() { getUserInfo() {
getUserSettingInfo().then(res => { getUserSettingInfo().then(res => {
this.avatar.showPath = res.avatar this.avatar.showPath = res.avatar
this.nickname = res.nickname this.nickname = res.nickname
this.is_bind = res.is_bind this.is_bind = res.is_bind
this.is_certification = res.is_certification
this.is_company = res.is_company
uni.stopPullDownRefresh() uni.stopPullDownRefresh()
}).catch(err => { }).catch(err => {
this.$refs.uToast.show({ this.$refs.uToast.show({

BIN
static/imgs/no-avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
static/imgs/top_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
static/imgs/top_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB