bocai_supplyChain_uni/root/other/register.vue

<template>
	<view class="p-login-index">
		<!-- 15936360682 -->
		<view class="g_h_70"></view>
		<button open-type="chooseAvatar" style="background-color: transparent" @chooseavatar="handleStartChangeAvatar" class="g_flex_row_center g_w_80 g_mb_60 g_p_0">
			<!-- <img :src="localBaseImg + 'yicaiLogoBgf913.png'" alt="" class="g_w_56 g_h_56 g_radius_8" /> -->
			<img :src="logo" alt="" class="g_w_80 g_h_80 g_radius_8" />
		</button>
		<view class="m-form g_mb_90 g_pl_40 g_pr_40">
			<view class="g_bg_f_5 g_radius_6 g_pl_16 g_pr_0 g_flex_row_between flex_center g_pt_10 g_pb_10 g_mb_20">
				<i class="iconfont icon-yonghuming-01-01 g_fs_18 g_mr_4"></i>
				<u-input v-model="form.userName" maxlength="8" type="nickname" class="g_fs_16 g_flex_1" placeholder="请输入用户名" placeholder-style="color:#999999;font-size:18px !important;line-height:1" />
				<!-- <button class="get-info g_c_main g_mr_0" :open-type="getPhoneNumber">获取</button> -->
			</view>
			<view class="g_position_rela g_bg_f_5 g_radius_6 g_pl_16 g_pr_0 g_flex_row_between flex_center g_pt_10 g_pb_10 g_mb_20">
				<i class="iconfont icon-shouji g_fs_18 g_mr_4"></i>
				<u-input maxlength="11" v-model="form.tel" type="number" class="g_fs_16 g_flex_1" placeholder="请输入手机号" placeholder-style="color:#999999;font-size:18px !important;line-height:1" />
				<button v-if="showBtn" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; z-index: 9999" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button>
				<!-- <button class="get-info g_c_main g_mr_0" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取</button> -->
			</view>
			<view class="g_bg_f_5 g_radius_6 g_pl_16 g_flex_column_center g_position_rela" v-if="isLoginCode">
				<view class="g_flex_row_between">
					<view class="g_flex_row_start flex_center g_flex_1 g_pt_10 g_pb_10">
						<i class="iconfont icon-yanzhengma g_fs_18 g_mr_4"></i>
						<u-input maxlength="4" v-model="msgCode.code" type="number" class="g_fs_16 g_flex_1" placeholder="请输入验证码" placeholder-style="color:#999999;font-size:36rpx !important;line-height:1" />
					</view>
					<view class="btn-text g_flex_column_center g_bg_f_5 g_radius_6 g_flex_none g_pt_8 g_pb_8" @click="handleSendMsg">
						<button :class="form.tel.length == 11 ? (msgCode.countdown > 0 ? 'g_c_9' : 'g_c_main') : 'g_c_9'" class="btn-con g_w_126 g_flex_row_center" style="font-size: 32rpx">{{ msgCode.btnText }}</button>
					</view>
				</view>
			</view>
		</view>
		<view class="g_flex_row_center">
			<g-button btnText="注册" type="primary" @clickBtn="goHome" width="260" height="48" />
		</view>
		<view class="g_fs_12 c045 g_flex_row_center" style="align-items: center; margin-top: 16px; ">
			<radio-group class="dib">
				<radio :checked="switchChecked" @click="switchChange" value="0" class="dib" color="#3578f6"
					style="transform: scale(0.7)" />
			</radio-group>
			我已阅读并同意
			<navigator url="/root/person/agreeUser" class="aLink">《用户服务协议》</navigator>
			及
			<navigator url="/root/person/agreePrive" class="aLink">《隐私政策》</navigator>
		</view>
		<g-panel-fixed>
			<view class="g_flex_row_center" style="text-align: center; font-size: 12px; color: #999; line-height: 32px; box-sizing: border-box">
				<view>
					<image :src="svgBaseImg + 'b.svg'" style="width: 16px; height: 16px; vertical-align: text-bottom; position: relative"></image>
				</view>
				<view> 伯才人力资源供应链平台 技术支持 </view>
			</view>
		</g-panel-fixed>
	</view>
</template>

<script>
export default {
	onShareAppMessage() {
		return this.G.shareFun();
	},
	data() {
		return {
			tip: "",
			logo: "https://matripe-cms.oss-cn-beijing.aliyuncs.com/pugongying/avater_default.jpg",
			// logo: getApp().globalData.logo,
			miniAppInfo: uni.getStorageSync("miniApp-info"),
			localBaseImg: this.G.store().localBaseImg,
			svgBaseImg: this.G.store().svgBaseImg,
			isLoginCode: true,
			form: {
				tel: "",
			},
			showBtn: true,

			path: "",
			level: "",

			msgCode: {
				// 短信倒计时
				code: "",
				btnText: "获取验证码", // 6s
				countdown: 0,
				timer: null,
			},
			fromPageType: "",
			currentId: null,
			switchChecked: false
		};
	},
	onLoad(options) {},
	onShow() {
		let that = this;
		that.tip = that.miniAppInfo.slogan || "全心全意为老乡服务";

	},
	onHide() {
		if (this.msgCode.timer) {
			clearInterval(this.msgCode.timer);
		}
	},
	methods: {
		switchChange() {
			console.log(this.switchChecked);
			this.switchChecked = !this.switchChecked;
		},
		setOptions(options) {
			console.log("options", options);
			this.fromPageType = options.type;
			if (options.type == "detail") {
				this.currentId = options.id;
			}
		},
		handleStartChangeAvatar(e) {
			let that = this;
			console.log("获取用户头像：", e);
			that.logo = e.detail.avatarUrl;
		},
		goHome() {
			let that = this,
				url = "",
				params = {};

			if (that.form.tel == "") {
				uni.showToast({
					title: "请输入手机号",
					icon: "none",
				});
				return false;
			}
			if (that.msgCode.code == "") {
				uni.showToast({
					title: "请输入验证码",
					icon: "none",
				});
				return false;
			}

			if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(that.form.tel)) {
				uni.showToast({
					title: "请输入正确的手机号",
					icon: "none",
				});
				return false;
			}
			if(that.switchChecked){
				uni.showToast({
					title: "注册成功",
				});
			}else{
				uni.showToast({
					icon:'none',
					title:'请阅读协议'
				})
			}
		},

		loginAccount(url, params) {
			let that = this,
				_params = {};
			params.wxCode = uni.getStorageSync("apply-code");
			_params = Object.assign(params, {
				path: that.path,
			});
			console.log("登录参数：", _params, " 获取分享参数：", uni.getStorageSync("apply-jobdetail-id"));
			that.G.Get(url, _params, (res) => {
				console.log("登录成功：", res);
				that.setToken(res);
			});
		},
		getCode(callback = () => {}) {
			uni.login({
				success(wxRes) {
					callback(wxRes.code);
				},
				fail(res) {
					console.log(res);
				},
			});
		},
		getPhoneNumber(e) {
			let that = this;
			console.log(e);
			this.showBtn = false;
			if (uni.getStorageSync("TEMPORARY_CODE")) {
				that.form.tel = uni.getStorageSync("TEMPORARY_CODE").phoneNumber;
				return;
			}
			if (e.detail.code) {
				that.G.Get(
					that.api.login_getWxInfo,
					{
						code: uni.getStorageSync("apply-code"),
						// code: e.detail.code,
						btnCode: e.detail.code,
						iv: e.detail.iv,
						encryptedData: e.detail.encryptedData,
					},
					(wxRes) => {
						console.log("获取微信手机号：", wxRes);
            // 授权后存储获取的手机号以及登录需要的openid, 并在下一次获取手机授权时自动填充手机号
						uni.setStorageSync("TEMPORARY_CODE", wxRes);
						that.form.tel = wxRes.phoneNumber;
						// that.bindTel = wxRes.phoneNumber;
						that.$forceUpdate();
					}
				);
			}
		},
		loginWX(e) {
			let that = this;
			that.G.Get(
				that.api.login_getWxInfo,
				{
					code: uni.getStorageSync("apply-code"),
					btnCode: e.detail.code,
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData,
				},
				(wxRes) => {
					that.G.Get(
						that.api.login_wechat,
						{
							openId: wxRes.openId,
							tel: wxRes.phoneNumber,
							unionid: wxRes.unionid,
						},
						(res) => {
							that.setToken(res);
						}
					);
				}
			);
		},
		// 处理存储token

		setToken($data) {
			let that = this;
			console.log("获取登录用户信息：", $data);
			uni.setStorageSync("apply-userinfo", $data); // 获取用户信息, 参与实际逻辑
			uni.setStorageSync("apply-userinfo-copy", JSON.stringify($data)); // 仅用于查看数据，不参与实际逻辑
			uni.setStorageSync("apply-avatar", $data.imgSrc); // 单独存储 -- 头像，方便修改
			uni.setStorageSync("apply-username", $data.userName); // 单独存储 -- 用户名，方便修改
			uni.setStorageSync("apply-tel", $data.tel); // 单独存储 -- 手机号，方便修改
			uni.setStorageSync("apply-token", $data.token); // 单独存储 -- token，方便获取
			uni.setStorageSync("apply-agencyId", $data.user.agencyId); // 单独存储 -- 代理id，方便获取
			uni.setStorageSync("apply-supplierAccount", $data.supplierAccount); // 单独存储 -- 是否是发单号，方便获取 0.不是发单号 1.是发单号
			if (that.fromPageType == "detail") {
				uni.navigateBack({
					delta: 1,
				});
				return;
			}
			// 登录跳转到首页的判断
			uni.setStorageSync("SHOW_INVITE", 1);

			if (that.path == "") {
				uni.switchTab({
					url: "/pages/home/index",
				});
			} else {
				// 固定跳首页
				uni.switchTab({
					url: "/pages/home/index",
				});
			}
			uni.setStorageSync("IS_CREATOR", 1); // 1是创建者 2是普通成员
			// that.G.Get(that.api.login_agencyInfo, {}, (aRes) => {
			// 	console.log("获取团队信息:", aRes);
			// 	uni.setStorageSync("IS_CREATOR", aRes.agency.userId == $data.user.id || $data.admin == true ? 1 : 2); // 1是创建者 2是普通成员
			// });
		},

		// 发送验证码
		handleSendMsg() {
			let that = this;
			if (this.msgCode.countdown > 0) {
				return false;
			}
			if (that.form.tel == "") {
				uni.showToast({
					title: "请输入手机号后再获取",
					icon: "none",
				});
				return false;
			}
			if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(that.form.tel)) {
				uni.showToast({
					title: "请输入正确的手机号",
					icon: "none",
				});
				return false;
			}
			that.G.Get(
				that.api.login_sendMsg,
				{
					tel: that.form.tel,
				},
				(res) => {
					that.msgCode.countdown = 60;
					that.msgCode.btnText = that.msgCode.countdown + "s";
					clearInterval(that.msgCode.timer);
					that.msgCode.timer = setInterval(() => {
						if (that.msgCode.countdown > 0) {
							that.msgCode.countdown--;
							that.msgCode.btnText = that.msgCode.countdown + "s";
						} else {
							clearInterval(that.msgCode.timer);
							that.msgCode.timer = null;
							that.msgCode.btnText = "获取验证码";
						}
					}, 1000);
				}
			);
		},
	},
};
</script>

<style lang="scss">
.p-login-index {
	/* #ifdef MP-TOUTIAO || MP-KUAISHOU */
	min-height: 100%;
	background-color: #fff;
	/* #endif */
	.btn-text {
		.btn-con {
			border-left: 2rpx solid #e5e5e5;
			padding: 0 32rpx;
			background-color: transparent;
			border-radius: 0;
			height: 40rpx;
			line-height: 40rpx;
		}
	}

	.g-components-panel-fixed {
		border-top: none;
	}
	.get-info {
		font-size: 16px;
		background-color: transparent;
		color: #027aff;
	}
}
</style>