ccsens_fe
/
tall-mui-3
3
0
Fork 3
Code Issues Pull Requests Releases Wiki Activity
Browse Source

feat: 登录、注册、用户协议

del
xuesinan 4 years ago
parent
d22308a73f
commit
0735f41733
8 changed files with 766 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      CHANGELOG.md
  2. 29
      src/pages.json
  3. 132
      src/pages/user/accountLogin.vue
  4. 30
      src/pages/user/agreement.vue
  5. 148
      src/pages/user/login.vue
  6. 253
      src/pages/user/mixin.js
  7. 173
      src/pages/user/rigister.vue
  8. BIN
      src/static/weixinIcon.png

1
CHANGELOG.md
View File

@ -197,6 +197,7 @@
- | 角色栏文字颜色修改 | 215c6b3
- | 解决警告 | c932b09
- | 日历的更改 | 7353ac8
- | 数据存储，避免重复调用接口 | d22308a
- | 小红点api缓存修改 | e992343
- | 修改代码格式 | 14123d7
- | 修改定期任务骨架屏高度 | 909a734

29
src/pages.json
View File

@ -17,6 +17,35 @@
"style": {
"navigationBarTitleText": "项目详情页"
}
},
{
"path": "pages/user/login",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "手机号登录"
}
},
{
"path": "pages/user/rigister",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "注册"
}
},
{
"path": "pages/user/accountLogin",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "用户名登录"
}
},
{
"path": "pages/user/agreement",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "用户协议",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {

132
src/pages/user/accountLogin.vue
View File

@ -0,0 +1,132 @@
<template>
<view>
<!-- #ifdef H5 -->
<view class="top-nav relative text-center">
<u-icon class="icon absolute" name="arrow-left" size="32"></u-icon>
<text>用户名登录</text>
</view>
<!-- #endif -->
<view class="u-p-l-50 u-p-r-50 u-p-t-30">
<u-form :model="model" :rules="rules" ref="uForm" :error-type="errorType">
<u-form-item :label-position="labelPosition" label="用户名" prop="account" label-width="150">
<u-input :border="border" placeholder="请输入用户名" v-model="model.account" type="text"></u-input>
</u-form-item>
<u-form-item :label-position="labelPosition" label="密码" prop="password" label-width="150">
<u-input :password-icon="true" :border="border" type="password" v-model="model.password" placeholder="请输入密码"></u-input>
</u-form-item>
<view class="flex flex-nowrap flex-row-reverse">
<view class="flex-sub"></view>
<view class="u-m-t-30 u-font-12 text-grey" @click="openPage('/pages/user/forgetPassword')">忘记密码</view>
</view>
</u-form>
<view class="u-m-t-50">
<u-button @click="submit" type="primary">立即登录</u-button>
</view>
<view class="flex justify-between">
<view class="u-m-t-30" style="color: #2885ed" @click="openPage('/pages/user/rigister')"> 新用户注册</view>
<view class="u-m-t-30" style="color: #2885ed" @click="openPage('/pages/user/login')">手机号登录 </view>
</view>
<view style="margin-top: 200rpx; text-align: center; color: #999999; font-size: 35rpx">快速登录</view>
<view style="text-align: center; margin-top: 20rpx" @click="handleWxLogin">
<image src="/static/weixinIcon.png" mode="" style="width: 85rpx; height: 85rpx"></image>
</view>
<!-- <view class="bottom-side-otherLogin" @click="getWeChatCode" v-if="isWeixin">
<text>其他社交账号登录</text>
<image src="/static/weixinIcon.png"></image>
</view> -->
</view>
</view>
</template>
<script>
import mixin from './mixin';
export default {
mixins: [mixin],
data() {
return {
model: {
account: '',
password: '',
},
};
},
methods: {
submit() {
// this.$refs.uForm.validate(valid => {
// if (valid) {
// this.login();
// } else {
// console.log('验证失败');
// }
// });
},
/**
* 登录
* @param {number} client 登录客户端
* @param {string} identifier 手机号
* @param {string} credential 验证码
* @param {number} type 登录类型
*/
async login() {
this.$util.showLoading();
// try {
// const { account, password } = this.model;
// const params = {
// client: 1,
// data: {
// identifier: account,
// credential: password,
// },
// type: 3,
// };
// await this.signIn(params);
// showToast('登录成功');
// uni.switchTab({ url: '/pages/index/index' });
// uni.hideLoading();
// } catch (error) {
// uni.hideLoading();
// showToast(error);
// }
},
/**
* 页面跳转
*/
openPage(url) {
uni.navigateTo({ url: url });
},
},
};
</script>
<style scoped lang="scss">
page {
background-color: #fff;
}
.top-nav {
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 32rpx;
.icon {
height: 80rpx;
line-height: 80rpx;
left: 30rpx;
}
}
.text-grey {
color: $u-type-info;
}
</style>

30
src/pages/user/agreement.vue
View File

@ -0,0 +1,30 @@
<template>
<view>
<web-view class="webview" src="https://www.yuque.com/docs/share/2de362e1-33fb-460a-92ca-5e8ef57f6d59?# 《时物链条用户协议》"></web-view>
<!-- <u-modal title="时物链条用户协议" v-model="showAgreement" show-cancel-button @confirm="$emit('confirm')" @cancel="$emit('cancel')">
<iframe
src="https://www.yuque.com/docs/share/2de362e1-33fb-460a-92ca-5e8ef57f6d59?# 《时物链条用户协议》"
frameborder="0"
scrolling="no"
style="width: 100%;height: 100%"
></iframe>
</u-modal> -->
</view>
</template>
<script>
export default {
props: {
showAgreement: {
type: Boolean,
default: false,
},
},
data() {
return {};
},
methods: {},
};
</script>
<style></style>

148
src/pages/user/login.vue
View File

@ -0,0 +1,148 @@
<template>
<view>
<!-- #ifdef H5 -->
<view class="top-nav relative text-center">
<u-icon class="icon absolute" name="arrow-left" size="32"></u-icon>
<text>手机号登录</text>
</view>
<!-- #endif -->
<view class="u-p-l-50 u-p-r-50 u-p-t-30">
<u-form :model="model" :rules="rules" ref="uForm" :error-type="errorType">
<u-form-item :label-position="labelPosition" label="手机号码" prop="phone" label-width="150">
<u-input :border="border" placeholder="请输入手机号" v-model="model.phone" type="number"></u-input>
</u-form-item>
<u-form-item :label-position="labelPosition" label="图形验证码" prop="verificationCodeValue" label-width="150">
<u-input :border="border" placeholder="请输入计算结果" v-model="model.verificationCodeValue" type="number"> </u-input>
<image slot="right" :src="imageBase64" mode="aspectFit" class="code-image" @click="getImageCode"> </image>
</u-form-item>
<u-form-item :label-position="labelPosition" label="验证码" prop="smsCode" label-width="150">
<u-input @focus="hasvalue" :border="border" placeholder="请输入验证码" v-model="model.smsCode" type="text"> </u-input>
<u-button slot="right" type="primary" size="mini" v-show="showPaste" @click="setCode" class="u-m-r-20"> 粘贴</u-button>
<u-button slot="right" size="mini" v-if="showInterval">{{ interval }}</u-button>
</u-form-item>
</u-form>
<view class="u-m-t-50">
<u-button @click="submit" type="primary">立即登录</u-button>
</view>
<view class="flex justify-between">
<view class="u-m-t-30" style="color: #2885ed" @click="openPage('/pages/user/rigister')"> 新用户注册</view>
<view class="u-m-t-30" style="color: #2885ed" @click="openPage('/pages/user/accountLogin')">用户名登录 </view>
</view>
<view class="text-center" style="margin-top: 200rpx; text-align: center; color: #999999; font-size: 35rpx"> 快速登录 </view>
<view style="text-align: center; margin-top: 20rpx" @click="handleWxLogin">
<image src="../../static/weixinIcon.png" mode="" style="width: 85rpx; height: 85rpx"></image>
</view>
</view>
</view>
</template>
<script>
// import { mapMutations } from 'vuex';
import mixin from './mixin';
let timer = null;
export default {
mixins: [mixin],
data() {
return {
model: {
phone: '',
verificationCodeValue: '',
smsCode: '',
},
imageBase64: '', // 图形验证码图片
verificationCodeId: '', // 图形验证码id
data: {},
treeId: '',
};
},
// onLoad(options) {
// this.getImageCode();
// },
methods: {
// ...mapMutations('user', ['setToken', 'setUser']),
submit() {
// this.$refs.uForm.validate(valid => {
// if (valid) {
// this.login();
// console.log('验证通过');
// } else {
// console.log('验证失败');
// }
// });
},
/**
* 登录
* @param {number} client 登录客户端
* @param {string} identifier 手机号
* @param {string} credential 验证码
* @param {number} type 登录类型
*/
async login() {
uni.showLoading();
// try {
// const { phone, smsCode } = this.model;
// const params = {
// client: 1,
// data: {
// identifier: phone,
// credential: smsCode,
// },
// type: 1,
// };
// await this.signIn(params);
// uni.switchTab({ url: '/pages/index/index' });
// uni.hideLoading();
// } catch (error) {
// uni.hideLoading();
// this.$t.ui.showToast(error);
// }
},
/**
* 页面跳转
*/
openPage(url) {
uni.navigateTo({ url: url });
},
},
// 页面卸载的时候清除定时器
onUnload() {
timer && clearInterval(timer);
timer = null;
},
};
</script>
<style scoped lang="scss">
page {
background-color: #fff;
}
.top-nav {
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 32rpx;
.icon {
height: 80rpx;
line-height: 80rpx;
left: 30rpx;
}
}
.code-image {
width: 200rpx;
height: 70rpx;
}
</style>

253
src/pages/user/mixin.js
View File

@ -0,0 +1,253 @@
import { mapState, mapActions } from 'vuex';
// import { getImageCode } from 'api/user';
// import clipboard from "../../common/script/dc-clipboard/clipboard.js"
const mixin = {
data() {
return {
rules: {
phone: [
{
required: true,
message: '请输入手机号',
trigger: ['change', 'blur'],
},
{
validator: (rule, value) => {
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
return this.$u.test.mobile(value);
},
message: '手机号码不正确',
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
trigger: ['change', 'blur'],
},
],
verificationCodeValue: [
{
required: true,
message: '请输入图形验证码',
trigger: ['change', 'blur'],
},
{
type: 'number',
message: '图形验证码只能为数字',
trigger: ['change', 'blur'],
},
],
smsCode: [
{
required: true,
message: '请输入验证码',
trigger: ['change', 'blur'],
},
{
type: 'number',
message: '验证码只能为数字',
trigger: ['change', 'blur'],
},
],
account: [
{
required: true,
message: '请输入用户名',
trigger: ['change', 'blur'],
},
{
min: 2,
max: 20,
message: '用户名长度在2到20个字符',
trigger: ['change', 'blur'],
},
{
pattern: /^[a-zA-Z0-9._-]{2,20}$/,
message: '请输入2-20位字母、数字、汉字或字符"_ - ."',
trigger: ['change', 'blur'],
},
],
password: [
{
required: true,
message: '请输入密码',
trigger: ['change', 'blur'],
},
{
min: 6,
max: 20,
message: '密码长度在6到20个字符',
trigger: ['change', 'blur'],
},
{
// 正则不能含有两边的引号
pattern: /^[a-zA-Z0-9._-]{6,20}$/,
message: '请输入6-20位字母、数字、汉字或字符"_ - ."',
trigger: ['change', 'blur'],
},
],
},
errorType: ['message'],
labelPosition: 'left',
border: false,
smsCode: '', // 短信验证码
showInterval: false,
interval: 120,
codeTimer: null,
showPaste: false,
};
},
computed: mapState('user', ['user']),
onReady() {
this.$refs.uForm.setRules(this.rules);
},
methods: {
...mapActions('user', ['sendCode']),
// 获取图形验证码
async getImageCode() {
// this.$util.showLoading();
// try {
// const data = await getImageCode();
// const { imageBase64, verificationCodeId } = data;
// this.imageBase64 = imageBase64 || '';
// this.verificationCodeId = verificationCodeId || '';
// uni.hideLoading();
// } catch (error) {
// uni.hideLoading();
// this.$t.ui.showToast(error);
// }
},
//有图片验证码的值
hasvalue() {
if (this.model.smsCode || this.model.showPaste) return;
if (!this.verifyPhone(this.model.phone)) {
this.$t.ui.showToast('请输入正确的手机号');
return;
}
if (!this.model.verificationCodeValue) {
this.$t.ui.showToast('请输入图形验证码');
return;
}
this.getCode();
},
// 获取验证码
async getCode() {
// try {
// const { phone, verificationCodeValue } = this.model;
// const { verificationCodeId } = this;
// if (!verificationCodeId || !verificationCodeValue) {
// this.$t.ui.showToast('缺少图形验证码参数');
// return;
// }
// const params = {
// phone,
// verificationCodeId,
// verificationCodeValue,
// };
// const date = await this.sendCode(params);
// this.getCodeInterval();
// this.showPaste = true;
// } catch (err) {
// throw err;
// }
},
// 获取验证码倒计时
getCodeInterval() {
this.showInterval = true;
this.codeTimer = setInterval(() => {
if (this.interval === 0) {
clearInterval(this.codeTimer);
this.codeTimer = null;
this.showInterval = false;
this.interval = 120;
return;
}
this.interval = this.interval - 1;
}, 1000);
},
// 验证信息
checkRules() {
const { smsCode, phone, user } = this;
if (!this.verifyPhone(phone)) {
this.$t.ui.showToast('请输入正确的手机号');
return false;
}
if (!smsCode) {
this.$t.ui.showToast('验证码无效');
return false;
}
if (phone === user.phone) {
this.$t.ui.showToast('新手机号不能与旧手机号相同');
return;
}
return true;
},
// 粘贴
// setCode() {
// // 获取粘贴板内容
// // 小程序平台
// //#ifdef MP-WEIXIN
// var _this = this
// uni.getClipboardData({
// success (res) {
// _this.smsCode = res.data;
// }
// });
// //#endif
// // 非小程序平台
// //#ifndef MP-WEIXIN
// this.getClipboardContents()
// //#endif
// },
// 非小程序平台粘贴
// async getClipboardContents() {
// try {
// const text = await navigator.clipboard.readText();
// this.smsCode = text;
// } catch (err) {
// console.error('Failed to read clipboard contents: ', err);
// }
// },
/**
* 验证手机号格式
* @param {string} phone 手机号
*/
verifyPhone(phone) {
const phoneExg = /^1\d{10}$/;
return phoneExg.test(phone);
},
/**
* 验证账号/密码 格式
* @param {string} account 账号
*/
verifyLoginname(account) {
const accountExg = /^[a-zA-Z0-9._-]{2,20}$/;
return accountExg.test(account);
},
// 微信登录
handleWxLogin() {
const origin = 'https://test.tall.wiki/pt-mui'; // 测试
const appid = 'wxd1842e073e0e6d91';
const state = 'wx_web';
const href = 'https://open.weixin.qq.com/connect/qrconnect';
// eslint-disable-next-line
window.location.href =
`${href}?appid=${appid}&redirect_uri=${origin}&response_type=code&scope=snsapi_login&state=${state}#wechat_redirect`;
},
},
};
export default mixin;

173
src/pages/user/rigister.vue
View File

@ -0,0 +1,173 @@
<template>
<view>
<!-- #ifdef H5 -->
<view class="top-nav relative text-center">
<u-icon class="icon absolute" name="arrow-left" size="32"></u-icon>
<text>注册</text>
</view>
<!-- #endif -->
<view class="u-p-l-50 u-p-r-50 u-p-t-30">
<u-form :model="model" :rules="rules" ref="uForm" :error-type="errorType">
<u-form-item :label-position="labelPosition" label="手机号码" prop="phone" label-width="150">
<u-input :border="border" placeholder="请输入手机号" v-model="model.phone" type="number"></u-input>
</u-form-item>
<u-form-item :label-position="labelPosition" label="图形验证码" prop="verificationCodeValue" label-width="150">
<u-input :border="border" placeholder="请输入计算结果" v-model="model.verificationCodeValue" type="number"> </u-input>
<image slot="right" :src="imageBase64" mode="aspectFit" class="code-image" @click="getImageCode"> </image>
</u-form-item>
<u-form-item :label-position="labelPosition" label="验证码" prop="smsCode" label-width="150">
<u-input @focus="hasvalue" :border="border" placeholder="请输入验证码" v-model="model.smsCode" type="text"> </u-input>
<u-button slot="right" type="primary" size="mini" v-show="showPaste" @click="setCode" class="u-m-r-20"> 粘贴</u-button>
<u-button slot="right" size="mini" v-if="showInterval">{{ interval }}</u-button>
</u-form-item>
<u-form-item :label-position="labelPosition" label="用户名" prop="account" label-width="150">
<u-input :border="border" placeholder="请输入用户名" v-model="model.account" type="text"></u-input>
</u-form-item>
<u-form-item :label-position="labelPosition" label="密码" prop="password" label-width="150">
<u-input :password-icon="true" :border="border" type="password" v-model="model.password" placeholder="请输入密码"></u-input>
</u-form-item>
</u-form>
<view class="u-m-t-50">
<u-button @click="submit" type="primary">立即注册</u-button>
</view>
<view class="flex-direction u-m-t-30">
<view class="flex flex-nowrap u-m-b-20">
<u-checkbox v-model="checked" @change="changeChecked"></u-checkbox>
<view class="agreement-text">
已阅读并同意使用
<span class="text-blue" @click="openPage('/pages/user/agreement')">《时物链条用户协议》</span>
</view>
</view>
<p class="text-blue u-m-l-70">没有套路，真实需求</p>
</view>
<view class="flex flex-nowrap flex-row-reverse">
<view class="flex-sub"></view>
<view class="u-m-t-60 text-blue" @click="openPage('/pages/user/accountLogin')">已有账号，去登录</view>
</view>
</view>
</view>
</template>
<script>
import mixin from './mixin';
let timer = null;
export default {
mixins: [mixin],
data() {
return {
model: {
phone: '',
verificationCodeValue: '',
smsCode: '',
account: '',
password: '',
},
imageBase64: '', // 图形验证码图片
verificationCodeId: '', // 图形验证码id
data: {},
treeId: '',
checked: false,
};
},
// onLoad(options) {
// this.getImageCode();
// },
methods: {
submit() {
// this.$refs.uForm.validate(valid => {
// if (valid) {
// this.signUp();
// } else {
// console.log('验证失败');
// }
// });
},
changeChecked() {
this.checked = !this.checked;
},
/**
* 注册
* @param {number} client 登录客户端
* @param {string} identifier 手机号
* @param {string} credential 验证码
* @param {number} type 登录类型
*/
async signUp() {
this.$util.showLoading();
// todo: 验证
// try {
// const { phone, smsCode, account, password } = this.model;
// const { checked } = this;
// if (!checked) {
// showToast('请阅读并同意使用用户协议');
// return;
// }
// const params = {
// account: account,
// password: password,
// phone: phone,
// smsCode: smsCode,
// };
// await signup(params);
// showToast('注册成功');
// this.openPage('/pages/user/accountLogin');
// uni.hideLoading();
// } catch (error) {
// uni.hideLoading();
// showToast(error.msg);
// }
},
/**
* 页面跳转
*/
openPage(url) {
uni.navigateTo({ url: url });
},
},
// 页面卸载的时候清除定时器
onUnload() {
timer && clearInterval(timer);
timer = null;
},
};
</script>
<style scoped lang="scss">
page {
background-color: #fff;
}
.top-nav {
height: 80rpx;
line-height: 80rpx;
text-align: center;
font-size: 32rpx;
.icon {
height: 80rpx;
line-height: 80rpx;
left: 30rpx;
}
}
.code-image {
width: 200rpx;
height: 70rpx;
}
.text-blue {
color: #0081ff;
}
</style>

BIN
src/static/weixinIcon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

Write Preview
Loading…
Cancel
Save