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 = {
apiUrl : 'https://e-chain.cnskl.com/api/',
apiUrl : 'http://api.ahxh.shangkelian.cn/api/',
timeout : 60000
}

167
pages/login/login.vue
View File

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

42
pages/setting/setting.vue
View File

@@ -9,7 +9,7 @@
<span>修改头像</span>
</view>
<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" />
</view>
</view>
@@ -33,7 +33,7 @@
<u-icon name="arrow-right" color="#f1f1f1" size="28" />
</button>
<!-- 个人认证 -->
<view @click="loginOut" class="list-item">
<view @click="certification(is_certification)" class="list-item">
<view class="list-item-left">
<image src="/static/imgs/self-icon.png" mode="widthFix" />
<span>个人认证</span>
@@ -41,7 +41,7 @@
<u-icon name="arrow-right" color="#f1f1f1" size="28" />
</view>
<!-- 企业认证 -->
<view @click="loginOut" class="list-item">
<view @click="company(is_company)" class="list-item">
<view class="list-item-left">
<image src="/static/imgs/company-icon.png" mode="widthFix" />
<span>企业认证</span>
@@ -95,7 +95,9 @@
path: '',
showPath: ''
},
is_bind: true
is_bind: true, // 微信绑定
is_certification: true, // 个人认证
is_company: true, // 企业认证
}
},
onShow() {
@@ -110,12 +112,44 @@
this.getUserInfo()
},
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() {
getUserSettingInfo().then(res => {
this.avatar.showPath = res.avatar
this.nickname = res.nickname
this.is_bind = res.is_bind
this.is_certification = res.is_certification
this.is_company = res.is_company
uni.stopPullDownRefresh()
}).catch(err => {
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