Compare commits
3 Commits
| Author | SHA1 | Date |
|---|---|---|
 xuesinan
|
41532998ca | 4 years ago |
|
xuesinan
|
ea8f519b8d | 4 years ago |
|
xuesinan
|
0735f41733 | 4 years ago |
9 changed files with 910 additions and 126 deletions
@ -1,7 +1,3 @@ |
|||||
.min-0 { |
.min-0 { |
||||
min-width: 0; |
min-width: 0; |
||||
} |
} |
||||
|
|
||||
.flex-shrink-0 { |
|
||||
flex-shrink: 0; |
|
||||
} |
|
||||
@ -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; |
||||
@ -0,0 +1,138 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<!-- #ifdef H5 --> |
||||
|
<view class="top-nav relative text-center"> |
||||
|
<u-icon class="icon absolute" name="arrow-left" size="32" @click="toBack"></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 '@/mixins/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.$t.ui.showLoading(); |
||||
|
// try { |
||||
|
// const { account, password } = this.model; |
||||
|
// const params = { |
||||
|
// client: 1, |
||||
|
// data: { |
||||
|
// identifier: account, |
||||
|
// credential: password, |
||||
|
// }, |
||||
|
// type: 3, |
||||
|
// }; |
||||
|
// await this.signIn(params); |
||||
|
// this.$t.ui.showToast('登录成功'); |
||||
|
// uni.switchTab({ url: '/pages/index/index' }); |
||||
|
// this.$t.ui.hideLoading(); |
||||
|
// } catch (error) { |
||||
|
// this.$t.ui.hideLoading(); |
||||
|
// this.$t.ui.showToast(error); |
||||
|
// } |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面跳转 |
||||
|
*/ |
||||
|
openPage(url) { |
||||
|
uni.navigateTo({ url: url }); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 返回上一页 |
||||
|
*/ |
||||
|
toBack() { |
||||
|
uni.navigateBack({ delta: 1 }); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
page { |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
.top-nav { |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
font-size: 32rpx; |
||||
|
|
||||
|
.icon { |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
left: 30rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.text-grey { |
||||
|
color: $u-type-info; |
||||
|
} |
||||
|
</style> |
||||
@ -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> |
||||
@ -0,0 +1,154 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<!-- #ifdef H5 --> |
||||
|
<view class="top-nav relative text-center"> |
||||
|
<u-icon class="icon absolute" name="arrow-left" size="32" @click="toBack"></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 '@/mixins/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() { |
||||
|
this.$t.ui.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' }); |
||||
|
// this.$t.ui.hideLoading(); |
||||
|
// } catch (error) { |
||||
|
// this.$t.ui.hideLoading(); |
||||
|
// this.$t.ui.showToast(error); |
||||
|
// } |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面跳转 |
||||
|
*/ |
||||
|
openPage(url) { |
||||
|
uni.navigateTo({ url: url }); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 返回上一页 |
||||
|
*/ |
||||
|
toBack() { |
||||
|
uni.navigateBack({ delta: 1 }); |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
// 页面卸载的时候清除定时器 |
||||
|
onUnload() { |
||||
|
timer && clearInterval(timer); |
||||
|
timer = null; |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
page { |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
.top-nav { |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
font-size: 32rpx; |
||||
|
|
||||
|
.icon { |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
left: 30rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.code-image { |
||||
|
width: 200rpx; |
||||
|
height: 70rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,179 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<!-- #ifdef H5 --> |
||||
|
<view class="top-nav relative text-center"> |
||||
|
<u-icon class="icon absolute" name="arrow-left" size="32" @click="toBack"></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 '@/mixins/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.$t.ui.showLoading(); |
||||
|
// todo: 验证 |
||||
|
try { |
||||
|
// const { phone, smsCode, account, password } = this.model; |
||||
|
const { checked } = this; |
||||
|
if (!checked) { |
||||
|
this.$t.ui.showToast('请阅读并同意使用用户协议'); |
||||
|
return; |
||||
|
} |
||||
|
// const params = { |
||||
|
// account: account, |
||||
|
// password: password, |
||||
|
// phone: phone, |
||||
|
// smsCode: smsCode, |
||||
|
// }; |
||||
|
// await signup(params); |
||||
|
// this.$t.ui.showToast('注册成功'); |
||||
|
// this.openPage('/pages/user/accountLogin'); |
||||
|
this.$t.ui.hideLoading(); |
||||
|
} catch (error) { |
||||
|
this.$t.ui.hideLoading(); |
||||
|
this.$t.ui.showToast(error.msg); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 页面跳转 |
||||
|
*/ |
||||
|
openPage(url) { |
||||
|
uni.navigateTo({ url: url }); |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 返回上一页 |
||||
|
*/ |
||||
|
toBack() { |
||||
|
uni.navigateBack({ delta: 1 }); |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
// 页面卸载的时候清除定时器 |
||||
|
onUnload() { |
||||
|
timer && clearInterval(timer); |
||||
|
timer = null; |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
page { |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
.top-nav { |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
font-size: 32rpx; |
||||
|
|
||||
|
.icon { |
||||
|
height: 80rpx; |
||||
|
line-height: 80rpx; |
||||
|
left: 30rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.code-image { |
||||
|
width: 200rpx; |
||||
|
height: 70rpx; |
||||
|
} |
||||
|
|
||||
|
.text-blue { |
||||
|
color: #0081ff; |
||||
|
} |
||||
|
</style> |
||||
|
After Width: | Height: | Size: 8.6 KiB |
Loading…
Reference in new issue