|
|
@@ -1,14 +1,20 @@
|
|
|
<template>
|
|
|
- <mobile-frame :frameStyle="frameStyle" @toPath="toPath">
|
|
|
+ <mobile-frame>
|
|
|
<view class="main">
|
|
|
<view class="one">
|
|
|
<uni-forms ref="form" :modelValue="form" :rules="rules" label-width="auto">
|
|
|
- <uni-forms-item label="电子邮箱" name="email" class="local">
|
|
|
- <uni-easyinput type="text" v-model="form.email" placeholder="请输入电子邮箱" />
|
|
|
- <button class="localicon" type="primary" size="mini">发送验证码</button>
|
|
|
+ <uni-forms-item label="电子邮箱" name="email">
|
|
|
+ <uni-easyinput type="number" v-model="form.email" placeholder="请输入电子邮箱" />
|
|
|
</uni-forms-item>
|
|
|
- <uni-forms-item label="邮箱验证码" name="num">
|
|
|
- <uni-easyinput type="text" v-model="form.num" placeholder="请输入邮箱验证码" />
|
|
|
+ <uni-forms-item label="邮箱验证码" name="code">
|
|
|
+ <view class="yzm">
|
|
|
+ <view class="l">
|
|
|
+ <uni-easyinput type="text" v-model="form.code" placeholder="请输入您的邮箱验证码" />
|
|
|
+ </view>
|
|
|
+ <view class="r">
|
|
|
+ <button type="default" size="mini" @tap="sendCount">{{time_count==0?'发送验证码':time_count}}</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</uni-forms-item>
|
|
|
</uni-forms>
|
|
|
<view class="btn">
|
|
|
@@ -24,71 +30,114 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- frameStyle: {
|
|
|
- useBar: false
|
|
|
- },
|
|
|
+ user: {},
|
|
|
form: {},
|
|
|
rules: {
|
|
|
email: {
|
|
|
rules: [{
|
|
|
required: true,
|
|
|
- errorMessage: '请输入邮箱',
|
|
|
+ errorMessage: '请输入电子邮箱',
|
|
|
}]
|
|
|
},
|
|
|
- num: {
|
|
|
+ code: {
|
|
|
rules: [{
|
|
|
required: true,
|
|
|
errorMessage: '请输入邮箱验证码',
|
|
|
}]
|
|
|
},
|
|
|
},
|
|
|
+ // 倒计时
|
|
|
+ time_count: 0
|
|
|
};
|
|
|
},
|
|
|
- onLoad: function(e) {
|
|
|
- console.log(e);
|
|
|
+ onLoad: function() {
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow: function() {
|
|
|
+ const that = this;
|
|
|
+ that.watchLogin();
|
|
|
},
|
|
|
- onShow: function() {},
|
|
|
methods: {
|
|
|
- toPath(e) {
|
|
|
- if (e && e.route) uni.redirectTo({
|
|
|
- url: `/${e.route}`
|
|
|
+ watchLogin() {
|
|
|
+ const that = this;
|
|
|
+ uni.getStorage({
|
|
|
+ key: 'token',
|
|
|
+ success: function(res) {
|
|
|
+ let user = that.$jwt(res.data);
|
|
|
+ if (user) that.$set(that, `user`, user);
|
|
|
+ },
|
|
|
+ fail: function(err) {
|
|
|
+ console.log(err);
|
|
|
+ }
|
|
|
})
|
|
|
},
|
|
|
- // 提交保存
|
|
|
- onSubmit() {
|
|
|
+ async sendCount() {
|
|
|
const that = this;
|
|
|
- let data = that.form;
|
|
|
- data = {
|
|
|
- ...data,
|
|
|
+ let form = that.form;
|
|
|
+ let user = that.user;
|
|
|
+ if (form && form.email) {
|
|
|
+ let res = await that.$api(`/user/toBindEmail`, 'POST', {
|
|
|
+ id: user._id,
|
|
|
+ email: form.email
|
|
|
+ })
|
|
|
+ if (res.errcode == '0') {
|
|
|
+ uni.showToast({
|
|
|
+ title: '发送成功'
|
|
|
+ })
|
|
|
+ that.$set(that, `time_count`, 60);
|
|
|
+ that.timeDown();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '输入错误，请重新输入!',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
}
|
|
|
- console.log(data);
|
|
|
- // this.$refs.form.validate().then(async (res) => {
|
|
|
- // let arr;
|
|
|
- // if (data._id) {
|
|
|
- // arr = await that.$api(``, 'POST', data)
|
|
|
- // } else {
|
|
|
- // arr = await that.$api(``, 'POST', data)
|
|
|
- // }
|
|
|
- // if (arr.errcode == '0') {
|
|
|
- // uni.showToast({
|
|
|
- // title: `维护信息成功`,
|
|
|
- // icon: 'success',
|
|
|
- // duration: 2000
|
|
|
- // });
|
|
|
- // that.back()
|
|
|
- // } else {
|
|
|
- // uni.showToast({
|
|
|
- // title: arr.errmsg,
|
|
|
- // icon: 'error',
|
|
|
- // duration: 2000
|
|
|
- // })
|
|
|
- // }
|
|
|
- // })
|
|
|
+ },
|
|
|
+ // 倒计时
|
|
|
+ timeDown() {
|
|
|
+ const that = this;
|
|
|
+ var times = setInterval(() => {
|
|
|
+ that.time_count--;
|
|
|
+ if (that.time_count <= 0) {
|
|
|
+ clearInterval(times);
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ // 提交保存
|
|
|
+ onSubmit(ref) {
|
|
|
+ const that = this;
|
|
|
+ let user = that.user;
|
|
|
+ that.$refs[ref].validate().then(async params => {
|
|
|
+ params.id = user._id;
|
|
|
+ const res = await that.$api(`/user/checkBindEmail`, 'POST', params);
|
|
|
+ if (res.errcode == '0') {
|
|
|
+ const arr = await that.$api(`/user/${params.id}`, 'POST', params);
|
|
|
+ if (arr.errcode == '0') {
|
|
|
+ uni.showToast({
|
|
|
+ title: '绑定邮箱成功',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: arr.errmsg,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.errmsg,
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
<style lang="scss">
|
|
|
.main {
|
|
|
display: flex;
|
|
|
@@ -99,13 +148,6 @@
|
|
|
.one {
|
|
|
padding: 2vw;
|
|
|
|
|
|
- .uni-input {
|
|
|
- border: #f1f1ff 1px solid;
|
|
|
- padding: 2vw 2vw;
|
|
|
- border-radius: 1vw;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
.btn {
|
|
|
text-align: center;
|
|
|
|
|
|
@@ -120,6 +162,11 @@
|
|
|
font-size: var(--font14Size);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .Tips {
|
|
|
+ font-size: var(--font12Size);
|
|
|
+ color: var(--f85Color);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -129,17 +176,23 @@
|
|
|
flex-direction: row;
|
|
|
}
|
|
|
|
|
|
+ .yzm {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- .uni-forms-item:first-child {
|
|
|
- .uni-easyinput__content {
|
|
|
- width: 50vw;
|
|
|
+ .l {
|
|
|
+ flex-grow: 1;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
+ .r {
|
|
|
+ width: 20vw;
|
|
|
|
|
|
- .localicon {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 5px;
|
|
|
+ button {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 2.8;
|
|
|
+ padding: 0 1vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
