front/pages/user/bind/mobile.vue

<template>
	<view class="container bg-main pos-r">
		<use-tabbar :tabbar="false"></use-tabbar>

		<form>
			<view class="padding-xl dflex-c dflex-flow-c">
				<!-- 头像 -->
				<view class="headimg-box margin-top margin-bottom-xl" style="width: 100px; height: 100px;">
					<image class="headimg border-radius-c" :src="logo"
						style="width: 100%; height: 100%; object-fit: cover;" />
				</view>

				<!-- swiper 轮播登录方式 -->
				<swiper class="w-full" :current="current">
					<!-- 验证码登录 -->
					<swiper-item>
						<view class="w-full dflex padding-bottom-sm">
							<view class="iconfont iconshouji margin-right"></view>
							<view class="flex1 dflex">
								<input class="border-line padding-sm flex1" type="number" maxlength="11" v-model="phone"
									placeholder="请输入手机号" />
							</view>
						</view>

						<view class="w-full dflex padding-bottom-sm">
							<view class="iconfont iconyanzheng margin-right"></view>
							<view class="border-line flex1 dflex">
								<input class="padding-sm flex1" type="number" maxlength="6" v-model="code"
									placeholder="请输入验证码" />
								<view class="pos-r" @tap="sendCode">
									<view class="vertical-line" style="right: calc(100% + 9px);"></view>
									<view class="padding-tb-sm ft-dark-4">{{ codeText }}</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>

				<!-- 登录按钮 -->
				<view class="w-full margin-top-xxl">
					<view class="dflex-b border-radius-lg">
						<view class="tac padding-tb-sm flex1 bg-base fs" @tap="login">绑定手机号</view>
					</view>
				</view>

				<!-- 协议勾选 -->
				<view class="dflex w-full margin-top" @tap="toggleAgree">
					<view class="iconfont" :class="agree ? 'iconxuanzhongzhuangtai' : 'iconweixuanzhongzhuangtai'">
					</view>
					<view class="ft-dark-3" style="margin-left:10rpx;margin-top:5rpx;">
						已阅读并同意
						<text class="ft-base" @click.stop="Dever.location('tool/page?title=隐私政策')">《隐私政策》</text>
						<text class="ft-base" @click.stop="Dever.location('tool/page?title=使用协议')">《使用协议》</text>
					</view>
				</view>
			</view>

			<view class="pos-f pos-bottom dflex-c w-full padding-bottom-lg safe-area-inset-bottom-plus"></view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logo: '',
				inputType: 'text',
				current: 0,
				phone: '',
				password: '',
				code: '',
				codeText: '发送验证码',
				countdown: 0,
				agree: false
			}
		},
		onLoad() {
			if (!this.DeverApi.getToken()) {
				return this.Dever.goHome();
			}
			this.Dever.config().then(config => {
				this.logo = config.l;
			});
			this.loadData()
		},
		methods: {
			loadData() {
				this.DeverApi.get(this, 'user.my', {}, res => {
					if (res.user.avatar) {
						this.logo = res.user.avatar
					}
				});
			},
			switchLoginType() {
				this.current = this.current === 0 ? 1 : 0
			},
			toggleAgree() {
				this.agree = !this.agree
			},
			sendCode() {
				if (!/^1\d{10}$/.test(this.phone)) {
					return this.Dever.alert('请输入有效手机号')
				}
				if (this.countdown > 0) return
				this.DeverApi.post('bind.sms', {
					mobile: this.phone
				}, r => {
					if (r.indexOf('::') != -1) {
						var t = r.split('::');
						r = t[0];
						this.code = t[1];
					}
					this.Dever.success(r)
					this.countdown = 60
					this.updateCodeText()
				});
			},
			updateCodeText() {
				if (this.countdown === 0) {
					this.codeText = '发送验证码'
					return
				}
				this.codeText = `${this.countdown}s`
				setTimeout(() => {
					this.countdown--
					this.updateCodeText()
				}, 1000)
			},
			async login() {
				if (!this.agree) {
					return this.Dever.alert('请勾选协议');
				}
				if (!/^1\d{10}$/.test(this.phone)) {
					return this.Dever.alert('请输入有效手机号');
				}
				var param = {}
				param.mobile = this.phone;
				if (this.Dever.env === 5) { // 小程序
					try {
						const loginRes = await new Promise((resolve, reject) => {
							uni.login({
								provider: 'weixin',
								success: resolve,
								fail: reject
							})
						})
						param.applet_code = loginRes.code
					} catch (err) {
						return this.Dever.alert('登录失败，请重试')
					}
				}
				if (!this.code) {
					return this.Dever.alert('请输入验证码');
				}
				param.code = this.code;
				this.DeverApi.post('bind.mobile', param, r => {
					this.Dever.success('绑定成功')
					this.DeverApi.setToken(r.t);
					this.Dever.location('user/index');
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f4f4f4;
	}

	.container {
		padding-top: 5vh;
		width: 100vw;
		min-height: 100vh;
		overflow: hidden;
	}

	.headimg-box {
		image {
			width: 130rpx;
			height: 130rpx;
			border: 5rpx solid #fff;
		}
	}
</style>