frontend-app/pages/login_package/register/register.vue

<template>
	<view class="register_warp">
		<view class="register_title_warp">
			<text class="register_title_warp_title">注册</text>
			<!-- #ifdef H5 -->
			<text class="register_title_warp_download" @click="downloadApp"> 去下载</text>
			<!-- #endif -->
		</view>

		<view class="register_ifo_warp">
			<view class="register_info_item">
				<up-input placeholder="请输入手机号" border="surround" v-model="form.mobile" :customStyle="inputCss"></up-input>
			</view>
			<view class="register_info_item">
				<up-input placeholder="请输入验证码" border="surround" v-model="form.smsCode" :customStyle="inputCss">
					<template #suffix style="margin-right: 10rpx;">
						<view v-if="countdown" class="code-warp">
							<up-count-down :time="60 * 1000" format="ss" @finish="countdown = false"></up-count-down>
							<text style="margin-left: 10rpx;">s</text>
						</view>
						<view v-else @click="getMobileCode" class="code_msg">
							获取验证码
						</view>
					</template>
				</up-input>
			</view>
			<view class="register_info_item">
				<up-input placeholder="请输入登录密码" border="surround" v-model="form.loginPassword" :customStyle="inputCss"
					:type="loginPasswordIsShow ? 'text' : 'password'">
					<template #suffix style="margin-right: 10rpx;">
						<up-image v-if="loginPasswordIsShow" src="/pages/login_package/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00"
							@click="loginPasswordIsShow = false;"></up-image>
						<up-image v-else src="/pages/login_package/static/login/hidden.png" width="20" height="20" bgColor="#f1f6ff00"
							@click="loginPasswordIsShow = true;"></up-image>
					</template>
				</up-input>
			</view>
			<view class="register_info_item">
				<up-input placeholder="再次输入登录密码" border="surround" v-model="form.loginPassword2" :customStyle="inputCss"
					:type="loginPassword2IsShow ? 'text' : 'password'">
					<template #suffix style="margin-right: 10rpx;">
						<up-image v-if="loginPassword2IsShow" src="/pages/login_package/static/login/show.png" width="20" height="20"
							bgColor="#f1f6ff00" @click="loginPassword2IsShow = false;"></up-image>
						<up-image v-else src="/pages/login_package/static/login/hidden.png" width="20" height="20" bgColor="#f1f6ff00"
							@click="loginPassword2IsShow = true;"></up-image>
					</template>
				</up-input>
			</view>
			<!-- <view class="register_info_item">
				<up-input
					placeholder="请输入交易密码"
					border="surround"
					v-model="form.transactionCode"
					:customStyle="inputCss"
					:type="transactionCodeIsShow ?'text':'password'"
				>
					<template #suffix style="margin-right: 10rpx;">
						<up-image v-if="transactionCodeIsShow" src="/pages/login_package/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00" @click="transactionCodeIsShow=false;"></up-image>
						<up-image v-else src="/pages/login_package/static/login/hidden.png" width="20" height="20" bgColor="#f1f6ff00" @click="transactionCodeIsShow=true;"></up-image>
					</template>
				</up-input>
			</view> -->
		
			<view class="register_info_item">
				<up-input placeholder="推荐码(选填)" border="surround" v-model="form.referralCode" :customStyle="inputCss"
					:disabled="disabled"></up-input>

			</view>

		</view>

		<view class="login_comm_but login_comm_but_yes" @click="registerFun" :loading="butLoading">
			注册
		</view>
		<view class="policy_warp">
			<up-checkbox name="isCheck" usedAlone v-model:checked="isPolicy" shape="circle" activeColor="#7934F6" size="19"
				iconSize="18">
				<template #label>
					<text>已阅读并同意</text>
					<text class="policy_a_warp" @click="jumpUserAgreement">《服务协议》</text>
					<text>、</text>
					<text class="policy_a_warp" @click="jumpPrivacyAgreement">《隐私政策》</text>
					<text>、</text>
					<text class="policy_a_warp" @click="jumpProductAgreement">《售后保障协议》</text>
				</template>
			</up-checkbox>
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
import { SMS_TYPE } from '@/utils/enumUtils.js';
import { getUserList } from '@/api/common.js';
import { register } from '@/api/auth.js';
import { setStorageFun, TOKEN_NAME, USER_KEY, USER_DATA, USER_LOGIN_TIME } from '@/utils/auth.js';
import CryptoJS from 'crypto-js';

export default {
	data() {
		return {
			form: {
				mobile: null,
				smsCode: null,// 验证码
				loginPassword: null,
				loginPassword2: null,
				transactionCode: null,// 交易密码
				referralCode: null,// 推荐码
			},
			inputCss: {
				"height": '80rpx',
				"background": "#F3F3F3FF",
				"border-radius": "30rpx",
				"border": "0rpx",
				"padding-left": "16px",
			},
			countdown: false,// 清空倒计时
			loginPasswordIsShow: false,
			loginPassword2IsShow: false,
			transactionCodeIsShow: false,// 交易密码
			isPolicy: false,
			butLoading: false,
			disabled: false,

		}
	},
	onLoad() {
		const pages = getCurrentPages();
		const currentPage = pages[pages.length - 1];
		const id = currentPage.options?.key;
		if (id) {
			this.disabled = true;
		}

		this.form.referralCode = id;
	},
	computed: {
		/* 判断运行平台 */
		isIOS() {
			return /iPhone|iPad|iPod/i.test(navigator.userAgent);
		},

		/* 下载地址：iOS 去 App Store，Android 去应用宝/直链 APK */
		storeUrl() {
			return 'https://app.tbmall.xin/';
			// return this.isIOS
			// 	? 'https://apps.apple.com/cn/app/id123456789'  // ← 换成你的 App Store 地址
			// 	: 'https://a.app.qq.com/o/simple.jsp?pkgname=com.xxx.app'; // ← 应用宝地址或 APK 直链
		},

		/* 唤起协议：iOS 用 Universal Link，Android 用 URL Scheme */
		openUrl() {
			return this.isIOS
				? 'https://ulink.trustbridgeapp.com/open?scene=h5'   // ← 你的 iOS Universal Link
				: 'trustbridgeapp://open?scene=h5';                // ← 你的 Android URL Scheme
		}
	},

	methods: {

		downloadApp() {
			window.location.href = this.storeUrl;
		},

		async registerFun() {
			const form = this.form;
			if (!form.mobile) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请输入手机号",
				});
				return;
			}
			if (!form.smsCode) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请输入验证码",
				});
				return;
			}
			if (!form.loginPassword) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请输入登录密码",
				});
				return;
			}
			if (!form.loginPassword2) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请输入二次确认密码",
				});
				return;
			}
			if (form.loginPassword !== form.loginPassword2) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "两次输入的登录密码不一致",
				});
				return;
			}
			// if (!form.referralCode) {
			// 	this.$refs.uToastRef.show({
			// 		type: 'error',
			// 		message: "请输入推荐码",
			// 	});
			// 	return;
			// }
			if (!this.isPolicy) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请阅读完相关协议以及政策，并且勾选同意选项",
				});
				return;
			}
			this.butLoading = true;
			const params = {
				mobile: form.mobile,
				smsCode: form.smsCode,
				password: CryptoJS.MD5(form.loginPassword).toString(),
				inviteCode: form.referralCode,
			}

			const resp = await register(params);
			if (resp && resp.bizcode === 100) {
				// #ifdef APP-PLUS || MP-WEIXIN
				const data = resp.data;
				setStorageFun(TOKEN_NAME, data.token);
				// 用于无感登录
				setStorageFun(USER_KEY, '');
				const userInfo = {
					avatar: data.avatarUrl,
					name: data.name,
					userId: data.userId,
					grade: data.grade,
					inviteCode: data.inviteCode,
				};
				setStorageFun(USER_DATA, userInfo);
				// 当前登录得时间戳
				let currentTimeStamp = new Date().getTime();
				setStorageFun(USER_LOGIN_TIME, currentTimeStamp);
				this.$refs.uToastRef.show({
					type: 'success',
					message: resp.msg,
				});
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/home/home',
					})
				}, 2000);
				// #endif

				// #ifdef H5
				this.openOrDownload();
				// #endif
			}
			this.butLoading = false;

		},

		openOrDownload() {

			/* 1. 先尝试唤起 */
			window.location.href = this.openUrl;

			/* 2. 2 秒后未成功则跳商店 */
			setTimeout(() => {
				// 简单兼容检测：如果页面仍然可见，就认为没唤起成功
				const hidden = document.hidden || document.webkitHidden || document.mozHidden || document.msHidden;
				if (hidden === undefined || !hidden) {
					window.location.href = this.storeUrl;
				}
			}, 2000);
		},
		/**
		 * 获取手机验证码
		 */
		async getMobileCode() {
			const form = this.form;
			if (!form.mobile) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请输入手机号码",
				});
				return;
			}
			this.countdown = true;

			const params = {
				mobile: form.mobile,
				type: SMS_TYPE.REGISTER,
			}
			const response = await getUserList(params);
			if (response && response.bizcode === 100) {
				this.$refs.uToastRef.show({
					type: 'success',
					message: response.msg,
				});
			} else {
				this.countdown = false;
			}
		},
		// 用户协议
		jumpUserAgreement() {
			uni.navigateTo({
				url: '/pages/mine_package/mine_user_agreement/mine_user_agreement?backPath=register'
			})
		},
		// 隐私协议
		jumpPrivacyAgreement() {
			uni.navigateTo({
				url: '/pages/mine_package/mine_privacy_agreement/mine_privacy_agreement?backPath=register'
			})
		},
		// 售后保障协议
		jumpProductAgreement() {
			uni.navigateTo({
				url: '/pages/mine_package/mine_product_agreement/mine_product_agreement?backPath=login'
			})
		},
	}
}
</script>

<style lang="scss">
.register_warp {
	height: calc(100vh - 280rpx);
	padding: 40rpx;
	margin-top: 60rpx;
}

.register_title_warp {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #333333;

	.register_title_warp_title {
		font-weight: bold;
		font-size: 62rpx;
	}

	.register_title_warp_download {
		font-size: 30rpx;
		padding: 0 25rpx;
		height: 70rpx;
		border-radius: 20rpx;
		color: #fff;
		background-color: #7934F6;
		display: flex;
		align-items: center;
		justify-content: center;

	}

}

.register_ifo_warp {
	margin-top: 30rpx;

	.register_info_item {
		margin-bottom: 40rpx;
	}
}
</style>