gzh_chuanyuan/pages/user/common.vue

<template>
	<view class="login">
		<view class="login-form" v-if="isShow">
			<u--form labelPosition="left" :model="model" :rules="rules" ref="uForm" labelWidth="80" labelAlign="center">
				<u-form-item label="手机号" prop="mobile" borderBottom>
					<u--input v-model="model.mobile" border="none" maxlength="11" placeholder="请输入账号"></u--input>
				</u-form-item>
				<u-form-item label="验证码" prop="code" borderBottom>
					<view class="verify">
						<view class="l">
							<u--input v-model="model.code" border="none" maxlength="6" placeholder="请输入验证码"></u--input>
						</view>
						<view class="r">
							<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
							<button @tap="getCode">{{tips}}</button>
						</view>
					</view>
				</u-form-item>
			</u--form>
		</view>
		<view class="btn" v-if="isShow" @click="toLogin()">立即绑定</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				tips: '',
				id: "",
				code: "",
				seconds: 60,
				model: {
					mobile: '',
					code: '',
				},
				openid: "",
				unionid: "",
				rules: {
					'mobile': {
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur']
					},
					'code': {
						type: 'string',
						required: true,
						message: '请填写验证码',
						trigger: ['blur']
					},
				},
			}
		},
		onLoad(o) {
			this.id = o.id?o.id:""
			this.code = o.code
			this.getInit();
		},
		methods: {
			async getInit() {
				// const { code, data, msg } = {"code":200,
				// "msg":"success",
				// "data":{
				// 	"unionid":"obO1o6odWMgu1hpxY151cy2MRLzE",
				// 	"openid":"onvCW6kw0ulqnuvdqPhLfvzyUO1g",
				// 	"is_bind":false,
				// 	"recommend_id":0,
				// 	"userToken":"",
				// },
				// }
				const { code, data, msg } = await this.$api.wxPublicLogin({
					code: this.code,
					recommend_id: this.id
				})
				if(code == 200){
					if(data.is_bind==false){
						this.isShow = true
						this.openid = data.openid
						this.unionid = data.unionid
						document.title="绑定手机号"
					}else {
						this.isShow = false
						uni.setStorageSync("userToken", data.userToken)
						this.getUserInfo(data.userToken)
						document.title=""
					}
					
				}
			},
			async getUserInfo(userToken) {
				const {
					code,
					data,
					msg
				} = await this.$api.loginInfo({
				})
				if (code == 200) {
					uni.showToast({
						title: "登录成功"
					})
					uni.setStorageSync("userInfo", data)
					if (this.id) {
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/index/index"
							})
						}, 2000)
					} else {
						console.log(222)
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/user/index"
							})
						}, 2000)
					}
				} else {
					uni.showToast({
						icon: "none",
						title: msg
					})
				}
			},
			toLogin() {
				this.$refs.uForm.validate().then(async (res) => {
					const {
						code,
						data,
						msg
					} = await this.$api.bindMobile({
						recommend_id: '',
						openid: this.openid,
						unionid: this.unionid,
						mobile: this.model.mobile,
						mobile_code: this.model.code
					})
					if (code == 200) {
						uni.setStorageSync("userToken", data.userToken)
						this.getUserInfo(data.userToken)
					} else {
						uni.showToast({
							icon: "none",
							title: msg
						})
					}
				}).catch(errors => {
					// uni.$u.toast(errors.msg)
				})
			},
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					if (this.model.mobile.length > 0) {
						uni.showLoading({
							title: '正在获取验证码'
						})
						const {
							code,
							data,
							msg
						} = await this.$api.sendSms({
							mobile: this.model.mobile,
							note: 'bind'
						})
						if (code == 200) {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							uni.showToast({
								icon: "none",
								title: msg
							})
						}
					} else {
						uni.$u.toast('请输入手机号');
					}
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.tips = text.replace('秒重新获取', '秒');
			},
		}
	}
</script>
<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.login {
		overflow: hidden;
		&-form {
			width: 90%;
			margin: 240rpx auto 0;
			.verify{
				display: flex;
				justify-content: space-between;
				.l {
					width: calc(100% - 180rpx);
				}
				
				.r {
					width: 160rpx;
				
					button {
						width: 100%;
						padding: 0;
						font-size: 20rpx;
						text-align: center;
					}
				}
			}
			
		}
		.logo{
			width: 650rpx;
			height: 650rpx;
			display: block;
			margin: 0 auto;
		}
		.btn {
			width: 580rpx;
			line-height: 98rpx;
			background: #2B62B2;
			border-radius: 98rpx;
			position: relative;
			font-size: 30rpx;
			color: #fff;
			text-align: center;
			margin: 220rpx auto 0;

			button {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				opacity: 0;
			}
		}

		.tip {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			color: #333333;
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 80rpx;
			z-index: 2;

			.txt {
				margin-bottom: 8px;

				text {
					color: #2B62B2;
					padding: 0 10rpx;

				}
			}
		}
	}
</style>