BiKing/pages/content/bind.vue

<template>
	<view>
		<headContent borderBottom>
			<template #left>
				<reverse-back />
			</template>
			<template #content>
				<view class="haed-title">
					{{ title }}
				</view>
			</template>
		</headContent>
		<view class="bangding-box">
			<view class="bangding-item" v-show="type == 1">
				<view class="item-lable">
					手机
				</view>
				<view class="item-area" @click.stop="selectAreaCode">
					<template v-if="account.area_code">
						<text style="color: #000;">+{{ account.area_code }}</text>
					</template>
					<template v-else>
						<text>国家和地区</text>
						<text class="iconfont">&#xe60e;</text>
					</template>
				</view>
				<text class="item-link"></text>
				<input class="item-input" v-model="account.user_string" type="text"
					placeholder-class="placeholder-class" placeholder="手机号">
			</view>
			<view class="bangding-item" v-show="type == 2">
				<view class="item-lable">
					邮箱
				</view>
				<input class="item-input" v-model="account.user_string" type="text"
					placeholder-class="placeholder-class" placeholder="邮箱号">
			</view>
			<view class="err-hint">
				{{ errText[errIndex || 0] }}
			</view>
			<view class="bangding-item code-item">
				<view class="item-lable">
					验证码
				</view>
				<input class="item-input" type="text" v-model="account.code" placeholder-class="placeholder-class"
					placeholder="请输入手机验证码">
				<view class="item-code" @click.stop="getCode()">
					{{ codeText }}
				</view>
			</view>
			<view :class="['bangding-btn' , next ? 'active-btn': '' ] " @click.stop="next ? submitBindAccount() : ''">
				绑定
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Api_getEmailCode,
		Api_getSmsSend
	} from "@/api/index.js";
	export default {
		name: 'bind-phone',
		data() {
			return {
				title: '',
				Api_: '',
				type: null,
				codeText: '获取验证码',
				errIndex: '',
				next: false,
				account: {
					user_string: '',
					area_code: '',
					code: ''
				},
				errText: [
					'',
					'请选择国家地区',
					'请输入正确的手机号',
					'请输入正确的邮箱号',
				]

			};
		},
		onLoad(opt) {
			this.type = opt?.type || 1;
			if (this.type == 1) {
				// 手机号
				this.Api_ = Api_getSmsSend
				this.title = '绑定手机'
			}
			if (this.type == 2) {
				// 邮箱
				this.Api_ = Api_getEmailCode;
				this.title = '绑定邮箱'
			}
		},
		mounted() {

		},
		watch: {
			account: {
				handler(newContent) {
					if (newContent.user_string && newContent.code && (this.type == 1 ? newContent.area_code : true)) {
						this.next = true
					} else {
						this.next = false
					}
				},
				immediate: true,
				deep: true
			},
			'account.area_code': {
				handler(newCode) {
					if (newCode && this.errIndex === 1) {
						this.errIndex = 0
					}
				},
				immediate: true
			},
			'account.user_string': {
				handler(newCode) {
					if (newCode && [2, 3].includes(this.errIndex)) {
						this.errIndex = 0
					}
				},
				immediate: true
			}
		},
		methods: {
			selectAreaCode() {
				uni.navigateTo({
					url: '/pages/login/area-code'
				})
			},
			setAreaCode(e) {
				if (e) {
					this.account.area_code = e.area_code;
				}
			},

			// 校验
			jiaoyan() {
				if ([1, '1'].includes(this.type)) {
					if (!this.account.area_code) {
						this.errIndex = 1
						return false
					};
					if (!this.account.user_string) {
						this.errIndex = 2
						return false
					};
				} else if ([2, '2'].includes(this.type)) {
					if (!this.account.user_string) {
						this.errIndex = 3
						return false
					};
				} else {
					return false
				}
				return true
			},

			getCode() {
				if (this.codeText !== '获取验证码') {
					return false
				}


				const errStatus = this.jiaoyan()

				if (!errStatus) {
					return false
				}

				let obj = {
					user_string: this.account.user_string
				};
				if (this.account.area_code) {
					obj.area_code = this.account.area_code
				}
				if (this.Api_) {
					this.Api_(obj).then(res => {

					}).catch(err => {

					})
					let num = 60
					this.timeInterval = setInterval(() => {
						num--;
						if (num <= 0) {
							clearInterval(this.timeInterval);
							this.codeText = '获取验证码';
							return false
						};
						this.codeText = `${num}秒后重新发送`;
					}, 1000)
				}
			},
			submitBindAccount(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bangding-box {
		width: 100%;
		padding: 0 $pages-padding;

		.bangding-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			border-bottom: 1rpx solid $border-color2;
			font-size: 28rpx;
			padding-top: 20rpx;

			.item-lable {
				flex-shrink: 0;
				width: 120rpx;
			}

			.item-area {
				flex-shrink: 0;
				width: 196rpx;
				color: $SizeColor1;
				font-weight: bold;
				display: flex;
				align-items: center;

				.iconfont {
					margin-left: 3px;
					color: #5b5b5b;
					font-size: 20rpx;
				}

				// border-right: 1rpx solid $border-color6;

			}

			.item-link {
				display: inline-block;
				margin-right: 30rpx;
				width: 3rpx;
				height: 24rpx;
				background-color: $border-color4;
			}

			.item-input {
				flex: 1;
				font-size: 28rpx;
			}

			.placeholder-class {
				font-size: 28rpx;
				color: $SizeColor1;
				font-weight: bold;
			}

			.item-code {
				color: $Theme-Color;
			}
		}

		.code-item {
			padding-top: 0;
			height: 80rpx;
		}

		.err-hint {
			width: 100%;
			height: 70rpx;
			font-size: 28rpx;
			padding-top: 20rpx;
			color: red;
		}

	}

	.bangding-btn {
		width: 100%;
		margin-top: 80rpx;
		height: 90rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 90rpx;
		color: #fff;
		background-color: $btnBgColor;
	}

	.active-btn {
		background-color: $Theme-Color;
	}
</style>