123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212 |
- <template>
- <view style="margin: 20upx 40upx 0;">
- <u-navbar :back-text="i18n('Back')" title-width="300" :back-text-style="backStyle" back-icon-color="#fff"
- title-color="#fff" :background="background" :title="i18n('Verify Mailbox')"></u-navbar>
- <view class="Unbundling-input">
- <u-form :model="form" ref="uForm">
- <u-form-item :label="i18n('Email')" :label-width="120" label-align="right">
- <u-input v-model="form.email" :border="true" :placeholder="i18n('EnterEmail')" />
- </u-form-item>
- <u-form-item :label="$i18n.locale=='zh'?'验证码':'VerificationCode'"
- :label-width="$i18n.locale=='zh'?'130':'240'" label-align="right">
- <u-input v-model="form.validCode" :border="true" :placeholder="i18n('EnterVerification')" />
- <text class="code-send" v-if="showText==true" @click="getCodeFor">{{i18n('GetVerification')}}</text>
- <!-- <text v-else class="code">{{second}}s{{i18n('resend')}}</text> -->
- <text v-else class="code">{{second}}s</text>
- </u-form-item>
- </u-form>
- <view class="next">
- <u-button type="primary" @click="updateEmail">{{i18n('submit')}}</u-button>
- </view>
- </view>
- <u-toast ref="uToast" />
- </view>
- </template>
- <script>
- import listCell from '@/components/JumpBox';
- import {
- addIntegral
- } from '@/components/addPointDetailByTaskDict.js'
- export default {
- components: {
- listCell,
- addIntegral
- },
- data() {
- return {
- second: 60,
- showText: true,
- form: {
- email: '',
- validCode: '',
- },
- background: {
- backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
- },
- backStyle: {
- color: '#FFFFFF',
- },
- };
- },
- onShow() {
- },
- methods: {
- async getCodeFor() {
- if (!this.form.email) {
- this.msg(this.i18n('Themailboxcannotbeempty'), "warning");
- return;
- }
- const regEmail = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/;
- if (!regEmail.test(this.form.email)) {
- this.msg(this.i18n('Pleaseenterlegalemail'), 'warning');
- return;
- }
- let language = this.$i18n.locale;
- //获取验证码信息
- const result = await this.$myRequest({
- url: '/ums/umsUsers/registCode',
- data: {
- account: this.form.email,
- service: "YJ",
- language
- }
- });
- if (result.status == '200') {
- this.msg(this.i18n('Verificationcodehasbeensent'), "success");
- this.showText = false
- let interval = setInterval(() => {
- let times = --this.second
- }, 1000)
- setTimeout(() => {
- clearInterval(interval)
- this.second = 60
- this.showText = true
- }, 60000)
- } else {
- this.msg(result.msg, "error");
- }
- },
- //修改邮箱
- async updateEmail() {
- if (!this.valid()) {
- return;
- };
- const result = await this.$myRequest({
- url: '/uc/securitySetting/updateEmail',
- data: {
- email: this.form.email,
- code: this.form.validCode
- }
- });
- if (result.status == '200') {
- this.msg(this.i18n('ValidationSuccessful'), "success");
- addIntegral('point_task_bind_email', '20')
- setTimeout(() => {
- this.navTo('/pages/profile/profileSetUp/accountSecurity');
- }, 2500);
- } else {
- this.msg(result.msg, "error");
- }
- },
- valid() {
- if (this.form.email == "") {
- this.msg(this.i18n('Themailboxcannotbeempty'), "warning");
- return false;
- }
- if (this.form.validCode == "") {
- this.msg(this.i18n('Verificationcodecannotbeempty'), "warning");
- return false;
- }
- //验证邮箱
- const regEmail = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/;
- if (!regEmail.test(this.form.email)) {
- this.msg(this.i18n('Pleaseenterlegalemail'), "warning");
- return false;
- }
- return true;
- },
- msg(msg, type) {
- if (msg == 'error') {
- msg = this.i18n('ThesystemisbusyPleasetryagainlater') + "!" //系统繁忙,请稍后再试
- }
- return this.$refs.uToast.show({
- title: msg,
- type: type,
- // url: '/pages/user/index'
- })
- },
- i18n(data) {
- return this.$t('common.' + data);
- },
- // submit(e) {
- // const {
- // validate,
- // value
- // } = e;
- // console.log('表单数据:', value);
- // },
- navTo(route) {
- this.$mRouter.push({
- route
- });
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- page,
- body.pages-profile-profileSetUp-setUp uni-page-body {
- background-color: #fff !important;
- .Unbundling-input {
- margin: 0 40upx;
- .getCode {
- margin-left: 20upx;
- color: #0000ff;
- }
- .code-send {
- margin-left: 48upx;
- color: #0000BF;
- }
- .next {
- margin-top: 100upx;
- }
- // uni-input {
- // text-align: left !important;
- // }
- // .uni-input {
- // display: inline-block;
- // font-size: 30upx;
- // line-height: 90upx;
- // height: 90upx;
- // min-height: 90upx;
- // overflow: hidden;
- // border: 1px solid #ccc;
- // width: 70%;
- // vertical-align: middle;
- // text-indent: 2em;
- // }
- .send {
- margin-left: 20upx;
- }
- }
- // .form1 .uni-input-placeholder,
- // .form1 .uni-input-form,
- // .form1 .uni-input-wrapper,
- // .form1 uni-input {
- // // text-align: right;
- // }
- }
- </style>
|