web-africa-h5/pages/user/set/bind/email.vue

<template>
	<view>
		<form @submit="formSubmit" @reset="formReset">
			<view class="form-list">
				<template>
					<view class="form-item">
						<view class="item-name tl">{{$t('PER_DA_44')}}</view>
					</view>
					<view class="form-item">
						<input v-model="oldemail" :disabled="true" type="text" value="" :placeholder="$t('w_0273')"
							placeholder-class="placeholderclass gray9 f28" class="form-input" />
					</view>
					<view class="form-tips"></view>
				</template>
				<template>
					<view class="form-item">
						<view class="item-name tl">{{$t('w_0043')}}</view>
					</view>
					<view class="form-item">
						<view class="d-b-c">
							<input v-model="form.code" type="text" value="" :placeholder="$t('w_0057')"
								placeholder-class="placeholderclass gray9 f28" class="form-input" />
							<button class="get-code-btn" type="default" @click="sendCode"
								:disabled="is_send">{{ send_btn_txt }}</button>
						</view>
					</view>
					<view class="form-tips"></view>
				</template>
				<template>
					<view class="form-item">
						<view class="item-name tl">{{$t('PER_DA_45')}}</view>
					</view>
					<view class="form-item">
						<input v-model="form.email" type="text" :placeholder="$t('w_0345')"
							placeholder-class="placeholderclass gray9 f28" class="form-input" />
					</view>
					<view class="form-tips"></view>
				</template>
			</view>
			<view class="normal-sub-btn "><button form-type="submit" class="f32 mt60 normal-sub-btn">{{$t('w_0035')}}</button></view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				/*是否已发验证码*/
				is_send: false,
				/*发送按钮文本*/
				send_btn_txt: this.$t('w_0055'),
				/*当前秒数*/
				second: 60,
				oldemail: '',
				form: {
					code: '',
					email: ''
				}
			};
		},
		onLoad(e) {
			this.oldemail = decodeURIComponent(e.email || '');
		},
		methods: {
			/*提交*/
			formSubmit: function(e) {
				let self = this;
				var formdata = self.form;
				if (formdata.code == '') {
					uni.showToast({
						title: self.$t('w_0057'),
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				if (formdata.email == '') {
					uni.showToast({
						title: self.$t('w_0345'),
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				self._putjson('member/api/member/update-email', formdata, function(res) {
					self.showSuccess(res.msg, function() {
						// #ifndef H5
						uni.navigateBack({
							delta: parseInt(1)
						});
						// #endif
						// #ifdef H5
						history.go(-1);
						// #endif
					});
				});
			},
			/*发送短信*/
			sendCode() {
				let self = this;
				console.log(2222)
				self._get(
					'member/api/sms/verification', {},
					result => {
						uni.showToast({
							title: self.$t('MY_WAL_49')
						});
						self.is_send = true;
						self.changeMsg();
					}
				);
			},
			/*改变发送验证码按钮文本*/
			changeMsg() {
				if (this.second > 0) {
					this.send_btn_txt = this.second + this.$t('S_L_9');
					this.second--;
					setTimeout(this.changeMsg, 1000);
				} else {
					this.send_btn_txt = this.$t('w_0055');
					this.second = 60;
					this.is_send = false;
				}
			},
		}
	};
</script>

<style lang="scss">
	.form-list {
		padding: 49rpx 58rpx 37rpx 52rpx;
		background-color: #ffffff;
		margin-bottom: 57rpx;

		.form-item {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #333;

			.item-name {
				width: 130rpx;
				flex-shrink: 0;
			}
			.item-name.tl{
				text-align: left;
				width: 100%;
				margin-bottom: 10rpx;
			}
			.form-input {
				flex: 1;
				height: 76rpx;
				line-height: 76rpx;
				border-radius: 38rpx;
				font-size: 28rpx;
				color: #333;
				background: #f5f6f8;
				padding: 0 20rpx 0 51rpx;
			}
		}

		.form-tips {
			color: #fb3024;
			line-height: 60rpx;
			min-height: 56rpx;
			padding-left: 180rpx;
		}
	}

	.placeholderclass {}

	.get-code-btn {
		min-width: 161rpx;
		height: 74rpx;
		background: #333333;
		line-height: 74rpx;
		padding: 0rpx 20rpx;
		border-radius: 40rpx;
		white-space: nowrap;
		// border: 1rpx solid $dominant-color;
		color: #ffffff;
		box-sizing: border-box;
		margin-left: 46rpx;
		font-size: 24rpx;
	}

	.get-code-btn[disabled='true'] {
		// border: 1rpx solid #cccccc;
		color: #333;
		background-color: #ffffff;
	}
</style>