365 lines
10 KiB
Vue
365 lines
10 KiB
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="/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00"
|
||
@click="loginPasswordIsShow = false;"></up-image>
|
||
<up-image v-else src="/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="/static/login/show.png" width="20" height="20"
|
||
bgColor="#f1f6ff00" @click="loginPassword2IsShow = false;"></up-image>
|
||
<up-image v-else src="/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="/static/login/show.png" width="20" height="20" bgColor="#f1f6ff00" @click="transactionCodeIsShow=false;"></up-image>
|
||
<up-image v-else src="/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;
|
||
}
|
||
|
||
.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>
|