dev/dcp-app-gate/pages/profile/profileSetUp/changeMailbox.vue

<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>