warst/warst-h5/pages/my/checkCurrentTel.vue

<template>
	<!-- 获取验证码检查当前手机号 -->
	<view class="container">
		<u--form
			labelPosition="left"
			labelWidth="90"
			:model="fmData"
			:rules="rules"
			ref="uForm"
		>
			<u-form-item label="当前手机号" borderBottom>
				{{ currentTel }}
			</u-form-item>
			<u-form-item label="验证码" prop="code" borderBottom>
				<c-input
					placeholder="请输入验证码"
					v-model="fmData.code"
					border="none"
				>
					<view class="send-code" slot="suffix">
						<text class="vertical-line">|</text>
						<c-code
							:phone="phonenumber"
							:uniqueKey="currentTelCode"
							codeType="putPhone"
						></c-code>
					</view>
				</c-input>
			</u-form-item>
		</u--form>

		<c-button type="primary" @click="handleNextStep">下一步</c-button>
	</view>
</template>

<script>
import { rsaDecrypt } from '@/utils/jsencrypt';
import { byPhone } from '@/api/user/my.js';
import uniqueKey from '@/components/c-code/uniqueKey';
const { currentTelCode } = uniqueKey;
export default {
	name: 'checkCurrentTel',
	data() {
		return {
			currentTelCode,
			rules: {
				code: {
					type: 'string',
					required: true,
					message: '请输入验证码',
					trigger: ['change'],
				},
			},
			fmData: {
				code: '',
			},
		};
	},
	computed: {
		phonenumber() {
			// 解密电话
			const userInfo = this.$store.state.user.userInfo || {};
			return rsaDecrypt(userInfo.phonenumber);
		},
		currentTel() {
			const userInfo = this.$store.state.user.userInfo || {};
			return this.$c.middleTel(userInfo.phonenumber, true);
		},
	},
	methods: {
		async handleNextStep() {
			await this.$refs.uForm.validate();
			try {
				this.$c.loading();
				const params = {
					userName: this.phonenumber,
					code: this.fmData.code,
				};
				await byPhone(params);
				uni.hideLoading();
				this.$u.route('/pages/my/updateTel');
			} catch (e) {
				uni.hideLoading();
				console.error(e);
			}
		},
	},
};
</script>

<style scoped lang="scss">
.container {
	padding: $pg-pd;

	.u-form {
		background-color: #fff;
		margin-bottom: 100rpx;
		padding: 0px 30rpx;
		.u-form-item {
			.send-code {
				display: flex;
				align-items: center;
				.vertical-line {
					color: #e4e4e4;
					margin-right: 10rpx;
				}
			}
		}
	}
}
</style>