同步代码
This commit is contained in:
GaoHao
317
pages/login/register.vue
Normal file
317
pages/login/register.vue
Normal file
@@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<view class="login-wrapper">
|
||||
<view class="login-top">
|
||||
<text>欢迎注册</text>
|
||||
<image style="width: 320rpx; height: 76rpx" :src="vdata.siteInfos.appTopImgUrl" />
|
||||
</view>
|
||||
<view class="login-bottom jeepay-form">
|
||||
<uni-forms ref="formRef" label-width="0" :model="vdata.formData" :rules="rules">
|
||||
<!-- <uni-forms-item name="mchName">
|
||||
<uni-easyinput class="jeepay-easyinput" placeholder="请输入商户名称" v-model="vdata.formData.mchName" :clearable="false">
|
||||
<template #prefixIcon><image src="@/static/login/icon-merchantuser.svg" class="input-icon" /></template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item> -->
|
||||
<uni-forms-item name="phone">
|
||||
<uni-easyinput
|
||||
class="jeepay-easyinput"
|
||||
v-model="vdata.formData.phone"
|
||||
type="number"
|
||||
:maxlength="11"
|
||||
:disabled="!vdata.allowSendMsgFlag"
|
||||
placeholder="请输入手机号"
|
||||
:clearable="false"
|
||||
>
|
||||
<template #prefixIcon><image src="@/static/login/icon-phone.svg" class="input-icon" /></template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item>
|
||||
<!-- 手机验证码， 不限制数字还是本文， 如果发送为文本则无需app升级。 -->
|
||||
<view style="display: flex">
|
||||
<uni-easyinput class="jeepay-easyinput" :maxlength="6" placeholder="请输入验证码" v-model="vdata.formData.vercode" :clearable="false">
|
||||
<template #prefixIcon><image src="@/static/login/icon-sms-code.svg" class="input-icon" /></template>
|
||||
</uni-easyinput>
|
||||
<image :src="vdata.formData.imgCodeUrl" style="width: 200rpx; height: 110rpx; margin-left: 10rpx" @click="getCode" mode=""></image>
|
||||
</view>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="code">
|
||||
<!-- 手机验证码， 不限制数字还是本文， 如果发送为文本则无需app升级。 -->
|
||||
<uni-easyinput class="jeepay-easyinput" :maxlength="6" placeholder="请输入手机验证码" v-model="vdata.formData.code" :clearable="false">
|
||||
<template #prefixIcon><image src="@/static/login/icon-sms-code.svg" class="input-icon" /></template>
|
||||
<template #suffixIcon>
|
||||
<view style="color: rgba(88, 132, 204, 1); font-weight: 400; font-size: 32rpx" @tap="sendSmscodeFunc">{{ vdata.sendMsgText }}</view>
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="pwd">
|
||||
<uni-easyinput
|
||||
class="jeepay-easyinput"
|
||||
:type="vdata.isShowPwd ? 'text' : 'password'"
|
||||
v-model="vdata.formData.pwd"
|
||||
:clearable="false"
|
||||
placeholder="请输入登录密码"
|
||||
>
|
||||
<template #prefixIcon><image src="@/static/login/icon-pw.svg" class="input-icon" /></template>
|
||||
<template #suffixIcon>
|
||||
<view class="show-tips" style="color: rgba(88, 132, 204, 1); font-weight: 400; font-size: 32rpx" @tap="vdata.isShowPwd = !vdata.isShowPwd">
|
||||
<!-- {{ vdata.isShowPwd ? '隐藏' : '显示' }} -->
|
||||
<uni-icons type="eye" size="24" v-if="vdata.isShowPwd"></uni-icons>
|
||||
<uni-icons type="eye-slash" size="24" v-else></uni-icons>
|
||||
</view>
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="confirmPwd">
|
||||
<uni-easyinput
|
||||
class="jeepay-easyinput"
|
||||
:type="vdata.isShowConfirmPwd ? 'text' : 'password'"
|
||||
placeholder="请确认登录密码"
|
||||
v-model="vdata.formData.confirmPwd"
|
||||
:clearable="false"
|
||||
:passwordIcon="false"
|
||||
>
|
||||
<template #prefixIcon><image src="@/static/login/icon-confirm-pw.svg" class="input-icon" /></template>
|
||||
<template #suffixIcon>
|
||||
<view
|
||||
class="show-tips"
|
||||
style="color: rgba(88, 132, 204, 1); font-weight: 400; font-size: 32rpx"
|
||||
@tap="vdata.isShowConfirmPwd = !vdata.isShowConfirmPwd"
|
||||
>
|
||||
<!-- {{ vdata.isShowConfirmPwd ? '隐藏' : '显示' }} -->
|
||||
<uni-icons type="eye" size="24" v-if="vdata.isShowConfirmPwd"></uni-icons>
|
||||
<uni-icons type="eye-slash" size="24" v-else></uni-icons>
|
||||
</view>
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item>
|
||||
<uni-easyinput class="jeepay-easyinput" placeholder="请输入邀请码(选填)" v-model="vdata.formData.inviteCode" :clearable="false">
|
||||
<template #prefixIcon><image src="@/static/login/icon-invite-code.svg" class="input-icon" /></template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<view class="agreement-policy">
|
||||
<view class="select-box">
|
||||
<JeepayCheckbox v-model:checked="vdata.isSelectedAgreement" />
|
||||
同意商户通
|
||||
</view>
|
||||
<text class="agreement" @click="go.to('PAGES_STATIC_AGREEMENT')">《用户服务协议》</text>
|
||||
<text>与</text>
|
||||
<text class="policy" @click="go.to('PAGES_STATIC_POLICY')">《隐私政策》</text>
|
||||
</view>
|
||||
<Button @tap="mchRegister">注册</Button>
|
||||
<view class="register-box">
|
||||
<view class="register">
|
||||
<text>已有账号？</text>
|
||||
<text @tap="go.back()">去登录></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { $mchRegister, $sendSms, $getPasswordRules, $isCode } from '@/http/apiManager.js';
|
||||
import storageManage from '@/commons/utils/storageManage.js';
|
||||
import infoBox from '@/commons/utils/infoBox.js';
|
||||
import go from '@/commons/utils/go.js';
|
||||
import timer from '@/commons/utils/timer.js';
|
||||
import formUtil from '@/commons/utils/formUtil.js';
|
||||
|
||||
const rules = {
|
||||
mchName: {
|
||||
rules: [formUtil.rules.requiredInputShowToast('用户名称')]
|
||||
},
|
||||
pwd: {
|
||||
rules: [formUtil.rules.requiredInputShowToast('登录密码')]
|
||||
},
|
||||
confirmPwd: {
|
||||
rules: [formUtil.rules.requiredInputShowToast('确认密码')]
|
||||
},
|
||||
inviteCode: {
|
||||
rules: [formUtil.rules.requiredInputShowToast('邀请码')]
|
||||
},
|
||||
phone: {
|
||||
rules: [formUtil.rules.requiredInputShowToast('手机号')]
|
||||
},
|
||||
code: {
|
||||
rules: [formUtil.rules.requiredInputShowToast('短信验证码')]
|
||||
}
|
||||
};
|
||||
|
||||
const formRef = ref();
|
||||
const vdata = reactive({
|
||||
formData: {
|
||||
mchName: '', // 用户名称
|
||||
pwd: '', // 登录密码
|
||||
confirmPwd: '', // 确认密码
|
||||
inviteCode: '', // 邀请码
|
||||
phone: '', // 手机号
|
||||
code: '', // 短信验证码
|
||||
imgCodeUrl: ''
|
||||
},
|
||||
siteInfos: storageManage.siteInfos() || {},
|
||||
isSelectedAgreement: false, //是否勾选同意协议
|
||||
sendMsgText: '发送验证码',
|
||||
allowSendMsgFlag: true, // 是否可发送短信验证码
|
||||
passwordRules: /^$/, //密码规则
|
||||
passwordRulesText: '' //密码规则提示文字
|
||||
});
|
||||
|
||||
const getCode = () => {
|
||||
$isCode().then((res) => {
|
||||
console.log(res);
|
||||
vdata.formData.imgCodeUrl = res.bizData.imageBase64Data;
|
||||
vdata.formData.vercodeToken = res.bizData.vercodeToken;
|
||||
});
|
||||
};
|
||||
|
||||
getCode();
|
||||
onMounted(() => {
|
||||
getPasswordRules();
|
||||
});
|
||||
|
||||
const getPasswordRules = () => {
|
||||
$getPasswordRules().then(({ bizData }) => {
|
||||
vdata.passwordRules = new RegExp(bizData.regexpRules);
|
||||
vdata.passwordRulesText = bizData.errTips;
|
||||
});
|
||||
};
|
||||
|
||||
const mchRegister = () => {
|
||||
if (!vdata.isSelectedAgreement) {
|
||||
return infoBox.showToast('请勾选用户隐私政策');
|
||||
}
|
||||
// 表单验证
|
||||
formUtil.validate(formRef.value).then(() => {
|
||||
let { pwd, confirmPwd } = vdata.formData;
|
||||
if (!vdata.passwordRules.test(pwd) || !vdata.passwordRules.test(confirmPwd)) {
|
||||
return infoBox.showToast(vdata.passwordRulesText);
|
||||
}
|
||||
if (pwd !== confirmPwd) {
|
||||
return infoBox.showToast('两次密码输入不一致');
|
||||
}
|
||||
vdata.formData.mchName = vdata.formData.phone
|
||||
$mchRegister(vdata.formData).then(() => {
|
||||
infoBox.showToast('注册成功').then(() => {
|
||||
go.back();
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 点击发送验证码的函数
|
||||
function sendSmscodeFunc() {
|
||||
// 按钮禁用
|
||||
if (!vdata.allowSendMsgFlag) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!vdata.formData.vercode) {
|
||||
return infoBox.showToast('请输入图像验证码');
|
||||
}
|
||||
|
||||
// 验证失败
|
||||
if (!formUtil.regexp.mobile.test(vdata.formData.phone)) {
|
||||
return infoBox.showToast('请输入正确的手机号');
|
||||
}
|
||||
|
||||
vdata.allowSendMsgFlag = false; // 按钮禁用
|
||||
|
||||
let data = {
|
||||
phone: vdata.formData.phone,
|
||||
vercode: vdata.formData.vercode,
|
||||
vercodeToken: vdata.formData.vercodeToken
|
||||
};
|
||||
// 发送短信验证码
|
||||
$sendSms(data, 'register')
|
||||
.then(({ bizData }) => {
|
||||
infoBox.showSuccessToast('验证码发送成功');
|
||||
timer.startTimeoutTask(1, 60, (subTime) => {
|
||||
if (subTime <= 0) {
|
||||
// 任务结束
|
||||
vdata.sendMsgText = '发送验证码';
|
||||
vdata.allowSendMsgFlag = true;
|
||||
return false;
|
||||
}
|
||||
|
||||
vdata.sendMsgText = `${subTime}s后可重新发送`;
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
vdata.allowSendMsgFlag = true;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.login-wrapper {
|
||||
min-height: 100vh;
|
||||
background-color: $v-color-bgrey;
|
||||
.login-top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 376rpx;
|
||||
padding: 176rpx 70rpx 0;
|
||||
box-sizing: border-box;
|
||||
background: url('/static/indexImg/user-bg.svg') no-repeat;
|
||||
background-size: cover;
|
||||
text:first-child {
|
||||
margin-bottom: 30rpx;
|
||||
font-size: 38rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
text:last-child {
|
||||
font-size: 50rpx;
|
||||
font-weight: 600;
|
||||
color: #48c0ff;
|
||||
}
|
||||
}
|
||||
.login-bottom {
|
||||
height: calc(100vh - 376rpx);
|
||||
padding: 50rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 60rpx 60rpx 0 0;
|
||||
background-color: #fff;
|
||||
.agreement-policy {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
margin-top: 10rpx;
|
||||
margin-bottom: 50rpx;
|
||||
font-size: 26rpx;
|
||||
color: #8c8c8c;
|
||||
.select-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.select-img {
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
}
|
||||
}
|
||||
.agreement,
|
||||
.policy {
|
||||
color: #1d79fd;
|
||||
}
|
||||
}
|
||||
.register-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 30rpx;
|
||||
padding-bottom: 100rpx;
|
||||
margin-top: 50rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
.register {
|
||||
text:last-child {
|
||||
color: #1d79fd;
|
||||
}
|
||||
}
|
||||
.forget {
|
||||
color: #1d79fd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user