sct/pagesT/binding/bindPhone.vue

<template>
	<view class="box" :class="['qn-page-' + theme]">
		<view class="close-view"><text class="ibonfont ibonguanbi1" @click="closePage"></text></view>
		<view class="top-bg"></view>
		<view class="welcome-title">
			<view>嗨～朋友</view>
			<view>欢迎使用{{ baseSet.shop || '' }}</view>
		</view>
		<view class="logo-img"><image :src="baseSet.images" mode="aspectFill"></image></view>
		<view class="login-bg">
			<block v-if="login_type === 1">
				<image src="https://onlineimg.qianniao.vip/login-img.jpg" mode="aspectFill"></image>
				<view class="login-btn-view"><button class="wx-Btn primary-bg" open-type="getPhoneNumber" @getphonenumber="getphonenumber">一键授权登录</button></view>
				<!-- <view class="wx-change-btn" @click="login_type = 2">
					<text class="ibonfont ibonshouji1 wxicon" style="transform: translateY(-4rpx);display: inline-block;"></text>
					短信验证登录
				</view> -->
			</block>
			<block v-if="login_type === 2">
				<view class="tab-ul">
					<view class="tab-li" @click="login_type = 1">微信快捷登录</view>
					<!-- <view class="tab-on">手机验证登录</view> -->
				</view>
				<view class="input-ul">
					<view class="input-li">
						<text class="ibonfont ibonshouji1"></text>
						<input type="number" placeholder-class="input-pl" v-model="phoneNumber" placeholder="请输入手机号" />
					</view>
					<view class="input-li">
						<text class="ibonfont ibonyanzhengma"></text>
						<input type="number" placeholder-class="input-pl" v-model="smsCode" placeholder="请输入验证码" />
						<view class="yzm-view">
							<text v-if="is_dis_yzm">{{ num }}s后重新发送</text>
							<text v-else @click="getYzm()">获取验证码</text>
						</view>
					</view>
				</view>
				<view class="login-btn primary-bg" @click="appletsBindMobile()">登录</view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			is_dis_yzm: false,
			num: 60,
			source: 5,
			smsCode: '',
			phoneNumber: '',
			login_type: 1
		};
	},
	computed: {
		baseSet() {
			return this.$store.state.baseSet;
		},
		source() {
			return this.$common.source();
		},
		staffId() {
			return this.$store.state.staffId;
		},
		businessmanId() {
			return this.$store.state.businessmanId;
		}
	},
	onShow() {
		// #ifdef MP
		uni.hideHomeButton();
		// #endif
	},
	onLoad() {},
	methods: {
		// 拒绝跳转主页面
		closePage() {
			this.goPage('/pages/index/index', 'switchTab');
		},
		// 一键绑定
		getphonenumber(e) {
			const iv = e.detail.iv;
			const encryptedData = e.detail.encryptedData;
			this.$u.api
				.decryptData({
					openid: this.$common.getOpenid(),
					iv: iv,
					encryptedData: encryptedData
				})
				.then(data => {
					this.phoneNumber = data.data.phoneNumber;
					uni.setStorageSync('phoneNumber', this.phoneNumber);
					// #ifdef MP-WEIXIN
					this.appletsBindMobile('wx');
					// #endif
					// #ifdef MP-TOUTIAO
					this.appletsBindMobile('byteDance');
					// #endif
				});
		},
		// 绑定手机号
		appletsBindMobile(source) {
			if (!this.phoneNumber) {
				this.$api.msg('请输入手机号');
				return;
			}
			if (!source) {
				if (!this.smsCode) {
					this.$api.msg('请输入验证码');
					return;
				}
			}

			console.log('staffId', this.staffId);
			const params = {
				mobile: this.phoneNumber,
				smsCode: this.smsCode,
				openId: this.$common.getOpenid(),
				unionId: this.$common.getUnionId(),
				salesManId: this.staffId || '',
				avatar: this.$common.getAvator(),
				name: this.$common.getName(),
				source: source || 'sms',
				type: this.source,
				shopId: 0
			};
			this.$u.api.appletsBindMobile(params).then(data => {
				this.$api.msg('绑定成功');
				uni.setStorageSync('token', data.data.token);
				uni.setStorageSync('expireTime', data.data.expireTime);
				// 更新登录状态
				this.$store.commit('commit_hasLogin', true);
				// 添加分销上下级关系
				this.relationshipBusinessman();
				// this.goPage(`/pages/index/index`, 'switchTab');
			});
		},
		// 添加分销上下级关系 source: 1:首次点击链接 2:首次下单 3:首次付款'
		relationshipBusinessman() {
			if (!this.businessmanId) {
				// 是否立即去完善资料
				if (this.baseSet.finishDataGo) {
					this.goPage('/pagesT/user/editUserInfo');
				} else {
					this.goPage(`/pages/index/index`, 'switchTab');
				}
				return;
			}
			this.$u.api
				.relationshipBusinessman({
					businessmanId: this.businessmanId,
					source: 1
				})
				.then(data => {
					console.log('上下级关系绑定成功:', data.data);
					// 是否立即去完善资料
					if (this.baseSet.finishDataGo) {
						this.goPage('/pagesT/user/editUserInfo');
					} else {
						this.goPage(`/pages/index/index`, 'switchTab');
					}
				});
		},
		// 验证码
		getYzm() {
			const re = /^1[3456789]\d{9}$/;
			if (!re.test(this.phoneNumber)) {
				this.$api.msg('手机号格式不正确');
				return;
			}

			this.$u.api
				.sendMobileCode({
					mobile: this.phoneNumber,
					source: 6
				})
				.then(res => {
					this.$api.msg('发送成功');
					// 发送验证码
					this.is_dis_yzm = !this.is_dis_yzm;
					const secondNumIn = setInterval(() => {
						this.num--;
						if (this.num === 0) {
							// 清除定时器
							clearInterval(secondNumIn);
							this.is_dis_yzm = false;
							this.num = 60;
						}
					}, 1000);
				});
		}
	}
};
</script>
<style>
page {
	background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.input-pl {
	color: #b8c0c8;
	font-size: 28rpx;
}
.box {
	.close-view {
		position: fixed;
		left: 0;
		padding-left: 30upx;
		width: 100%;
		top: 70upx;
		z-index: 99;
		.ibonguanbi1 {
			font-size: 30upx;
		}
	}
	.top-bg {
		width: 385rpx;
		height: 385rpx;
		background: linear-gradient(315deg, #fa6400 6%, #b620e0 49%, #32c5ff 88%);
		opacity: 0.08;
		filter: blur(50px);
		position: fixed;
		top: 20rpx;
		left: 0;
		z-index: 0;
	}

	.welcome-title {
		position: fixed;
		top: 162rpx;
		left: 56rpx;
		font-weight: bold;
		z-index: 1;
		line-height: 80rpx;
		font-size: 46rpx;
		font-family: jiangxikaiti;
	}

	.logo-img {
		position: fixed;
		top: 150rpx;
		right: 56rpx;

		image {
			width: 120rpx;
			border-radius: 34rpx;
			height: 120rpx;
			display: block;
			box-shadow: 0px 0px 20rpx 8rpx rgba(250, 100, 0, 0.08);
		}
	}

	.login-bg {
		position: fixed;
		top: 370rpx;
		left: 0;
		width: 100%;

		image {
			width: 360rpx;
			height: 360rpx;
			display: block;
			margin: 0 auto;
		}

		.login-btn-view {
			width: 638rpx;
			margin: 40rpx auto;

			.wx-Btn {
				margin-top: 106rpx;
				width: 638rpx;
				height: 89rpx;
				background: #fa6400;
				border-radius: 11rpx;
				line-height: 89rpx;
				text-align: center;
				font-weight: 500;
				color: #ffffff;
				font-size: 28rpx;
			}

			.yzm-Btn {
				margin-top: 40rpx;
				text-align: center;
				width: 638rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 11rpx;
				border: 1px solid #cad0d7;
				color: #2d405e;
				font-size: 26rpx;

				.ibonshouji1 {
					font-size: 26rpx;
					margin-right: 14rpx;
				}
			}
		}

		.tab-ul {
			display: flex;
			padding: 56rpx;

			.tab-li {
				width: 328rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 16rpx;
				color: #fa6400;
				text-align: center;
				background: linear-gradient(-62deg, transparent 32rpx, rgba(250, 100, 0, 0.08) 0) top right;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				margin-right: 40rpx;
			}

			.tab-on {
				width: 328rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 16rpx;
				text-align: center;
				color: #ffffff;
				font-weight: 500;
				background: linear-gradient(117deg, transparent 32rpx, #fa6400 0) top left;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				margin-left: -25px;
			}
		}

		.input-ul {
			.input-li {
				color: #2d405e;
				width: 638rpx;
				margin: 40rpx auto;
				height: 80rpx;
				background: #f5f5f6;
				border-radius: 4rpx;
				position: relative;
				padding-left: 88rpx;

				.ibonfont {
					position: absolute;
					font-size: 40rpx;
					top: 50%;
					transform: translateY(-50%);
					left: 24rpx;
				}

				input {
					color: #2d405e;
					height: 80rpx;
					line-height: 80rpx;
					width: 400rpx;
				}

				.yzm-view {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 32rpx;
					color: #fa6400;
				}
			}
		}

		.login-btn {
			margin: 56rpx auto 170rpx;
			width: 638rpx;
			height: 89rpx;
			background: #fa6400;
			border-radius: 11rpx;
			line-height: 89rpx;
			text-align: center;
			font-weight: 500;
			color: #ffffff;
		}

		.divider-text {
			margin: 0 27rpx;
		}

		.wx-change-btn {
			color: #2d405e;
			margin: 50rpx auto 0;
			width: 638rpx;
			font-size: 26rpx;
			height: 80rpx;
			border-radius: 11rpx;
			line-height: 80rpx;
			text-align: center;
			border: 1px solid #cad0d7;

			.wxicon {
				vertical-align: middle;
				margin-right: 10rpx;
			}
		}
	}
}
</style>