制作登录
This commit is contained in:
49
pages/login/fast.vue
Normal file
49
pages/login/fast.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<view class="login">
|
||||
<view class="u-font-xl bold-600 u-margin-top-56">获取你的昵称、头像</view>
|
||||
|
||||
<view>
|
||||
<view class="u-flex u-row-between u-col-center avatar u-margin-top-80">
|
||||
<text>头像</text>
|
||||
<view class="u-flex u-row-between flex1 u-margin-left-30">
|
||||
<u-image src="https://api.uviewui.com/uploads/67c169c5927ce709a7f508d3.jpeg" width="100rpx" height="100rpx" shape="circle"></u-image>
|
||||
<u-icon name="arrow-right" color="#9F9EA4" size="32"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-row-between u-col-center avatar u-margin-top-80">
|
||||
<text>昵称</text>
|
||||
<view class="u-flex u-row-between flex1 u-margin-left-30">
|
||||
<view>用户昵称</view>
|
||||
<u-icon name="close" color="#9F9EA4" size="32"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu">
|
||||
<u-button @click="quickLogin" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">允许</u-button>
|
||||
<u-button class="u-margin-top-32" hover-class="none" :customStyle="{color: '#000', border: 'none', padding: '16rpx 0'}" :plain="true" :hair-line="false" shape="circle">拒绝</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.login {
|
||||
margin: 0 32rpx;
|
||||
|
||||
.avatar text {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
.menu {
|
||||
margin-top: 200rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,17 @@
|
||||
<template>
|
||||
<view class="login">
|
||||
<view>
|
||||
|
||||
<view class="u-flex u-row-center logo">
|
||||
<u-image :src="cloudPath + 'img/login-logo.png'" width="574rpx" height="432rpx"></u-image>
|
||||
</view>
|
||||
|
||||
<view class="u-text-center text-gray">
|
||||
<view>小程序需要登录注册才能使用相关功能，申请获取以下权限</view>
|
||||
<view class="u-margin-top-20">获得你的公开信息(昵称、头像、手机号码等)</view>
|
||||
</view>
|
||||
|
||||
<view class="u-margin-top-56">
|
||||
<u-button @click="quickLogin" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">快捷登录</u-button>
|
||||
<u-button @click="mobileLogin" hover-class="none" class="u-margin-top-32" :customStyle="{color: themeColor, border: '1px solid ' + themeColor, padding: '16rpx 0'}" :plain="true" :hair-line="false" shape="circle">手机号登录/注册</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -12,12 +22,34 @@
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
quickLogin() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/fast'
|
||||
})
|
||||
},
|
||||
|
||||
mobileLogin() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/mobile'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.login {
|
||||
margin: 0 64rpx;
|
||||
|
||||
.logo {
|
||||
margin-top: 150rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
121
pages/login/mobile.vue
Normal file
121
pages/login/mobile.vue
Normal file
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<view class="login">
|
||||
<view class="title">手机号登录</view>
|
||||
|
||||
<view>
|
||||
<u-form :model="form" ref="form">
|
||||
<u-form-item label="+86" class="mobile">
|
||||
<u-input v-model="form.mobile" placeholder="请输入电话"/>
|
||||
</u-form-item>
|
||||
<u-form-item>
|
||||
<u-input v-model="form.code" placeholder="请输入验证码"></u-input>
|
||||
<view slot="right">
|
||||
<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
|
||||
@change="codeChange"></u-verification-code>
|
||||
<u-button size="mini" shape="circle" hover-class="none" @tap="getCode">{{tips}}</u-button>
|
||||
</view>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</view>
|
||||
|
||||
<view class="u-margin-top-32">
|
||||
<u-button @click="handleLogin" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">登录/注册</u-button>
|
||||
</view>
|
||||
|
||||
<view class="u-margin-top-32 u-flex u-row-center">
|
||||
<u-checkbox v-model="form.checked" @change="allowProtocol" shape="circle" :active-color="themeColor">
|
||||
<view class="sm row-start">
|
||||
已阅读并同意
|
||||
<navigator :style="{color: themeColor}" hover-class="none" url="/pages/server_explan/server_explan?type=0">
|
||||
《服务协议》
|
||||
</navigator>
|
||||
和
|
||||
<navigator :style="{color: themeColor}" hover-class="none" url="/pages/server_explan/server_explan?type=1">
|
||||
《隐私政策》
|
||||
</navigator>
|
||||
</view>
|
||||
</u-checkbox>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
mobile: '',
|
||||
code: '',
|
||||
checked: false
|
||||
},
|
||||
seconds: 60,
|
||||
tips: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 更改验证码按钮提示语
|
||||
codeChange(text) {
|
||||
this.tips = text;
|
||||
},
|
||||
|
||||
// 获取验证码
|
||||
getCode() {
|
||||
if(this.$refs.uCode.canGetCode) {
|
||||
// 模拟向后端请求验证码
|
||||
uni.showLoading({
|
||||
title: '正在获取验证码'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
// 这里此提示会被this.start()方法中的提示覆盖
|
||||
this.$u.toast('验证码已发送');
|
||||
// 通知验证码组件内部开始倒计时
|
||||
this.$refs.uCode.start();
|
||||
}, 2000);
|
||||
} else {
|
||||
this.$u.toast('倒计时结束后再发送');
|
||||
}
|
||||
},
|
||||
|
||||
// 是否同意登录协议
|
||||
allowProtocol() {
|
||||
|
||||
},
|
||||
|
||||
handleLogin() {
|
||||
const {mobile, code, checked} = this.form
|
||||
if (!this.$u.test.mobile(mobile)) {
|
||||
return this.$u.toast('请检查手机号码格式！')
|
||||
}
|
||||
|
||||
if (!code) {
|
||||
return this.$u.toast('请输入验证码！')
|
||||
}
|
||||
|
||||
if (!checked) {
|
||||
return this.$u.toast('请输入验证码！')
|
||||
}
|
||||
console.log(123123)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.login {
|
||||
margin: 0 64rpx;
|
||||
|
||||
.title {
|
||||
font-size: 56rpx;
|
||||
margin-top: 190rpx;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
margin-top: 96rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
99
pages/server_explan/server_explan.vue
Normal file
99
pages/server_explan/server_explan.vue
Normal file
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="main">
|
||||
<u-parse :html="content" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getServerProto,
|
||||
getPrivatePolicy,
|
||||
getAfterSaleGuar
|
||||
} from '@/api/app';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
content: ""
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function(options) {
|
||||
let {type} = options;
|
||||
type = parseInt(type); // 0 ==> 服务协议 1 ==> 隐私政策 2 ==> 售后保障
|
||||
|
||||
let title = ''
|
||||
if (type == 0) {
|
||||
title = '服务协议'
|
||||
} else if (type == 1) {
|
||||
title = '隐私政策'
|
||||
}
|
||||
|
||||
uni.setNavigationBarTitle({
|
||||
title
|
||||
});
|
||||
|
||||
switch (type) {
|
||||
case 0:
|
||||
this.getServerProtoFun();
|
||||
break;
|
||||
|
||||
case 1:
|
||||
this.getPrivatePolicyFun();
|
||||
break;
|
||||
|
||||
case 2:
|
||||
this.getAfterSaleGuarFun();
|
||||
break;
|
||||
|
||||
default:
|
||||
this.getServerProtoFun();
|
||||
break;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 服务协议
|
||||
getServerProtoFun() {
|
||||
getServerProto().then(res => {
|
||||
if (res.code == 1) {
|
||||
setTimeout(() => {
|
||||
this.content = res.data;
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 隐私协议
|
||||
getPrivatePolicyFun() {
|
||||
getPrivatePolicy().then(res => {
|
||||
if (res.code == 1) {
|
||||
setTimeout(() => {
|
||||
this.content = res.data;
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 售后保障
|
||||
getAfterSaleGuarFun() {
|
||||
getAfterSaleGuar().then(res => {
|
||||
if (res.code == 1) {
|
||||
setTimeout(() => {
|
||||
this.content = res.data;
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.main {
|
||||
padding: 20rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user