first
This commit is contained in:
158
pages/login/components/EnvChangeTips.vue
Normal file
158
pages/login/components/EnvChangeTips.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<!--
|
||||
环境变量切换组件
|
||||
|
||||
@author terrfly
|
||||
@site https://www.jeequan.com
|
||||
@date 2022/04/12 10:14
|
||||
-->
|
||||
<template>
|
||||
<view>
|
||||
<!-- 当包含环境变量 && 不是生产环境时 -->
|
||||
<view
|
||||
class="login-test"
|
||||
v-if="
|
||||
vdata.currentEnvEnum &&
|
||||
vdata.currentEnvEnum != appConfig.ENV_ENUM.PRODUCTION
|
||||
"
|
||||
><text>{{ vdata.currentEnvEnum }}</text></view
|
||||
>
|
||||
<!-- 切换环境提示 -->
|
||||
<uni-popup ref="uniPopupRef" :mask-click="false" :open="true">
|
||||
<view class="uni-popup-dialog">
|
||||
<image
|
||||
@tap="uniClose"
|
||||
class="uni-dialog-close"
|
||||
src="/static/indexImg/del.svg"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<view class="uni-dialog-button-box">
|
||||
<view
|
||||
class="uni-dialog-button"
|
||||
style="border-bottom: 2rpx solid #e1e1e1"
|
||||
@click="changeEnvFunc(appConfig.ENV_ENUM.DEVELOPMENT)"
|
||||
><text>开发环境</text></view
|
||||
>
|
||||
<view
|
||||
class="uni-dialog-button"
|
||||
style="border-bottom: 2rpx solid #e1e1e1"
|
||||
@click="changeEnvFunc(appConfig.ENV_ENUM.TEST)"
|
||||
><text>测试环境</text></view
|
||||
>
|
||||
<view
|
||||
class="uni-dialog-button"
|
||||
style="border-bottom: 2rpx solid #e1e1e1"
|
||||
@click="changeEnvFunc(appConfig.ENV_ENUM.DEMO)"
|
||||
><text>演示环境</text></view
|
||||
>
|
||||
<view
|
||||
class="uni-dialog-button"
|
||||
@click="changeEnvFunc(appConfig.ENV_ENUM.PRODUCTION)"
|
||||
><text>生产环境</text></view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted } from 'vue'
|
||||
import appConfig from '@/config/appConfig.js'
|
||||
import envConfig from '@/env/config.js'
|
||||
import storageManage from '@/commons/utils/storageManage.js'
|
||||
import { $getSiteInfos } from '@/http/apiManager.js';
|
||||
|
||||
const uniPopupRef = ref()
|
||||
|
||||
// emit
|
||||
const emit = defineEmits(['change'])
|
||||
|
||||
const vdata = reactive({
|
||||
currentEnvEnum: '', // 当前环境变量
|
||||
count: 0, // 当前点击次数
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
vdata.currentEnvEnum = storageManage.env()
|
||||
})
|
||||
|
||||
// 父组件的点击事件
|
||||
function tapFunc() {
|
||||
vdata.count++
|
||||
if (vdata.count >= 10) {
|
||||
vdata.count = 0
|
||||
uniPopupRef.value.open()
|
||||
}
|
||||
}
|
||||
|
||||
// 改变环境函数
|
||||
function changeEnvFunc(envMode) {
|
||||
vdata.currentEnvEnum = envMode //显示信息
|
||||
envConfig.changeEnv(envMode) //更改请求包
|
||||
storageManage.env(envMode) // 改变存储
|
||||
|
||||
// 更改公司信息
|
||||
$getSiteInfos().then( ( { bizData } ) => {
|
||||
storageManage.siteInfos(bizData)
|
||||
|
||||
// 调起外层页面
|
||||
emit("change")
|
||||
|
||||
})
|
||||
|
||||
uniPopupRef.value.close() //弹层关闭
|
||||
}
|
||||
// 关闭弹窗
|
||||
function uniClose() {
|
||||
uniPopupRef.value.close()
|
||||
}
|
||||
defineExpose({ tapFunc })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uni-popup-dialog {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 500rpx;
|
||||
height: 600rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 30rpx;
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
.uni-dialog-close {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
.uni-dialog-button-box {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 0 40rpx;
|
||||
.uni-dialog-button {
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
line-height: 150rpx;
|
||||
text {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-test {
|
||||
position: absolute;
|
||||
bottom: 70rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
text {
|
||||
color: #666f80;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
169
pages/login/forgetPassword.vue
Normal file
169
pages/login/forgetPassword.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<view class="forget-password">
|
||||
<view v-if="vdata.isRetrieve" class="tips">
|
||||
<text>我们已将短信验证码发送至您的手机</text>
|
||||
<text style="margin-top: 30rpx; font-size: 46rpx; font-weight: 500; color: rgba(0,0,0,1);">{{ vdata.userInfo.telphone }}</text>
|
||||
</view>
|
||||
<view v-else class="tips">
|
||||
<text>您正在尝试找回密码</text>
|
||||
<text>请在下方输入注册手机号,并填写短信验证码</text>
|
||||
</view>
|
||||
|
||||
<view class="jeepay-form">
|
||||
<uni-forms ref="formRef" label-width="0" :model="vdata.formData" :rules="rules">
|
||||
<uni-forms-item v-if="vdata.isRetrieve !== '1'" 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>
|
||||
<template #suffixIcon> <view class='show-tips' 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>
|
||||
<!-- 手机验证码, 不限制数字还是本文, 如果发送为文本则无需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>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<view v-if="vdata.isRetrieve" style="font-size: 29rpx; text-align: center; color: rgba(128,128,128,1);" @tap="sendSmscodeFunc">{{ vdata.sendMsgText }}</view>
|
||||
<Button @tap="nextRetrieve">下一步</Button>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, getCurrentInstance } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { $sendSms, $retrieve,$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 = {
|
||||
phone: {
|
||||
rules:[ formUtil.rules.requiredInputShowToast('手机号') ],
|
||||
},
|
||||
code: {
|
||||
rules:[ formUtil.rules.requiredInputShowToast('短信验证码') ],
|
||||
},
|
||||
}
|
||||
const formRef = ref()
|
||||
const vdata = reactive({
|
||||
formData: {
|
||||
phone: '', // 手机号
|
||||
code: '' // 短信验证码
|
||||
},
|
||||
sendMsgText : '发送验证码',
|
||||
allowSendMsgFlag : true, // 是否可发送短信验证码
|
||||
isRetrieve: '' ,// 是否在设置中找回密码跳转
|
||||
userInfo: storageManage.userInfo()
|
||||
})
|
||||
// const instance = getCurrentInstance()
|
||||
// console.log('instance', instance)
|
||||
|
||||
onLoad((options) => {
|
||||
Object.assign(vdata, options)
|
||||
console.log(vdata)
|
||||
if (vdata.isRetrieve) {
|
||||
vdata.formData.phone = vdata.userInfo.telphone
|
||||
sendSmscodeFunc()
|
||||
}
|
||||
})
|
||||
|
||||
const getCode=()=>{
|
||||
$isCode().then(res=>
|
||||
{
|
||||
console.log(res);
|
||||
vdata.formData.imgCodeUrl=res.bizData.imageBase64Data
|
||||
vdata.formData.vercodeToken=res.bizData.vercodeToken
|
||||
})
|
||||
}
|
||||
|
||||
getCode()
|
||||
|
||||
// 验证验证码是否正确进行下一步
|
||||
const nextRetrieve = () => {
|
||||
let phone = vdata.formData.phone;
|
||||
if(phone && !formUtil.regexp.mobile.test(phone)){
|
||||
return infoBox.showToast("请输入正确的手机号")
|
||||
}
|
||||
formUtil.validate(formRef.value).then(() => {
|
||||
$retrieve(vdata.formData).then(() => {
|
||||
go.to('PAGES_SET_NEW_PASSWORD', vdata.formData)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 点击发送验证码的函数
|
||||
const 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, 'retrieve').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">
|
||||
.forget-password {
|
||||
padding: 142rpx 50rpx 0;
|
||||
.tips {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 56rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
color: rgba(128,128,128,1);
|
||||
}
|
||||
.jeepay-form {
|
||||
.jeepay-btn {
|
||||
width: 400rpx;
|
||||
margin-top: 120rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
415
pages/login/index.vue
Normal file
415
pages/login/index.vue
Normal file
@@ -0,0 +1,415 @@
|
||||
<template>
|
||||
<view class="login-wrapper">
|
||||
|
||||
<!-- 切换环境提示 -->
|
||||
<EnvChangeTips ref="envChangeTipsRef" @change="vdata.siteInfos = storageManage.siteInfos()"/>
|
||||
|
||||
<view class="login-top">
|
||||
<text>欢迎回来,请登录</text>
|
||||
<image @tap="envChangeTipsRef.tapFunc()" style="width: 320rpx; height: 76rpx" :src="vdata.siteInfos.appTopImgUrl" />
|
||||
</view>
|
||||
<view class="login-bottom jeepay-form">
|
||||
|
||||
<!-- 不需要label, 需要修改: label-width="0" -->
|
||||
<uni-forms ref="loginFormRef" label-width="0" :model="vdata.formData" :rules="rules">
|
||||
|
||||
<view v-if="vdata.loginType == 'pwd' ">
|
||||
<uni-forms-item name="username">
|
||||
<uni-easyinput class='jeepay-easyinput' placeholder="请输入登录名/手机号" v-model="vdata.formData.username" :clearable="false">
|
||||
<template #prefixIcon><image src="@/static/login/icon-user.svg" class="input-icon" /></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' @tap="vdata.isShowPwd = !vdata.isShowPwd ">{{ vdata.isShowPwd ? '隐藏' : '显示' }}</view> </template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item v-if="vdata.isShowSafetyCode" name="safetyCode">
|
||||
<uni-easyinput v-model="vdata.formData.safetyCode" type="number" class='jeepay-easyinput' placeholder="请输入安全码" :maxlength="6" :clearable="false">
|
||||
<template #prefixIcon><image src="@/static/login/icon-pw.svg" class="input-icon" /></template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
|
||||
</view>
|
||||
|
||||
<view v-if="vdata.loginType == 'sms' ">
|
||||
<uni-forms-item name="loginPhone">
|
||||
<uni-easyinput class='jeepay-easyinput' v-model="vdata.formData.loginPhone" type="number" :maxlength="11" :disabled="!vdata.allowSendMsgFlag" placeholder="请输入手机号" :clearable="false">
|
||||
<template #prefixIcon><image src="@/static/login/icon-phone.svg" class="input-icon" /></template>
|
||||
<template #suffixIcon> <view class='show-tips' @tap="sendSmscodeFunc">{{ vdata.sendMsgText }}</view> </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="smsCode">
|
||||
<!-- 手机验证码, 不限制数字还是本文, 如果发送为文本则无需app升级。 -->
|
||||
<uni-easyinput class='jeepay-easyinput' :maxlength="6" placeholder="请输入手机验证码" v-model="vdata.formData.smsCode" :clearable="false">
|
||||
<template #prefixIcon><image src="@/static/login/icon-sms-code.svg" class="input-icon" /></template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
|
||||
</view>
|
||||
|
||||
</uni-forms>
|
||||
|
||||
<view class="agreement-policy">
|
||||
<JeepayCheckbox v-model:checked="vdata.isSelectedAgreement" />
|
||||
同意
|
||||
<text class="agreement" @click="go.to('PAGES_STATIC_AGREEMENT')">《用户服务协议》</text>
|
||||
<text>与</text>
|
||||
<!-- <text class="policy" @click="toPrivacy">《隐私政策》</text> -->
|
||||
<text class="policy" @click="go.to('PAGES_STATIC_POLICY')">《隐私政策》</text>
|
||||
</view>
|
||||
|
||||
<Button @tap="loginFunc">登录</Button>
|
||||
|
||||
<view class="register-box">
|
||||
<view class="register">
|
||||
<text>还没有账号?</text> <text @tap="go.to('PAGES_REGISTER')">去注册></text>
|
||||
</view>
|
||||
<view class="forget" @tap="go.to('PAGES_FORGET_PASSWORD')">忘记密码</view>
|
||||
</view>
|
||||
<view class="swidth-login" @click="changeLoginType">
|
||||
{{ vdata.loginType == 'pwd' ? '短信验证码登录' : '账号密码登录' }}
|
||||
<image src="@/static/login/icon-arrow-left.svg"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<JAgree service="PAGES_STATIC_AGREEMENT" privacy="PAGES_FORGET_PASSWORD" ref="refAgr" @agree="vdata.isSelectedAgreement = true"/>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { $loginByPwd, $phoneCodeLogin, $userInfo, $sendSms, $getSiteInfos,$getUploadImgSize,$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'
|
||||
import EnvChangeTips from './components/EnvChangeTips.vue'
|
||||
import { getExtStoreId } from "@/commons/utils/versionManage.js"
|
||||
import {
|
||||
$login
|
||||
} from '@/http/newApi/login.js';
|
||||
const loginFormRef = ref()
|
||||
const envChangeTipsRef = ref()
|
||||
const refAgr = ref()
|
||||
// #ifdef MP-WEIXIN
|
||||
// 控制 音乐播放 和暂停
|
||||
import { getPushStatus } from "@/commons/utils/pushmsg/wxTextToSpeach.js"
|
||||
// #endif
|
||||
const rules = {
|
||||
username: {
|
||||
rules:[ formUtil.rules.requiredInputShowToast('用户名') ],
|
||||
},
|
||||
pwd: {
|
||||
rules:[ formUtil.rules.requiredInputShowToast('密码') ],
|
||||
},
|
||||
safetyCode: {
|
||||
rules:[ formUtil.rules.requiredInputShowToast('安全码') ],
|
||||
},
|
||||
|
||||
loginPhone: {
|
||||
rules:[ formUtil.rules.requiredInputShowToast('手机号') ],
|
||||
},
|
||||
|
||||
smsCode: {
|
||||
rules:[ formUtil.rules.requiredInputShowToast('短信验证码') ],
|
||||
},
|
||||
}
|
||||
|
||||
const vdata = reactive({
|
||||
|
||||
isShowPwd: false, // 是否显示密码
|
||||
loginType: 'pwd', // 类型切换: pwd or sms
|
||||
isShowSafetyCode: false, // 是否显示安全码输入框
|
||||
allowSendMsgFlag : true, // 是否可发送短信验证码
|
||||
sendMsgText : '发送验证码',
|
||||
isSelectedAgreement: false, // 勾选隐私协议
|
||||
|
||||
siteInfos: storageManage.siteInfos() || { },
|
||||
|
||||
formData: {
|
||||
username: '', // 账密登录: 用户名
|
||||
pwd: '', // 账密登录: 密码
|
||||
safetyCode: '', // 账密登录: 安全码
|
||||
|
||||
loginPhone: '', // 短信登录: 手机号
|
||||
smsCode: '', // 验证码
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
vdata.formData.username='19502966242'
|
||||
vdata.formData.pwd='11280923'
|
||||
|
||||
const getCode=()=>{
|
||||
$isCode().then(res=>
|
||||
{
|
||||
vdata.formData.imgCodeUrl=res.bizData.imageBase64Data
|
||||
vdata.formData.vercodeToken=res.bizData.vercodeToken
|
||||
})
|
||||
}
|
||||
|
||||
// getCode()
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
getExtStoreId()
|
||||
|
||||
// 查询是否包含网站信息, 否则更新
|
||||
|
||||
// if(!vdata.siteInfos || Object.keys(vdata.siteInfos) <= 0){
|
||||
// $getSiteInfos().then( ( { bizData } ) => {
|
||||
// vdata.siteInfos = storageManage.siteInfos(bizData)
|
||||
// })
|
||||
// }
|
||||
|
||||
})
|
||||
|
||||
|
||||
// 切换登录方式
|
||||
function changeLoginType () {
|
||||
vdata.loginType = vdata.loginType == 'pwd' ? 'sms' : 'pwd';
|
||||
}
|
||||
|
||||
|
||||
function loginFunc(){
|
||||
|
||||
|
||||
|
||||
// 表单验证
|
||||
formUtil.validate(loginFormRef.value).then(() => {
|
||||
if (!vdata.isSelectedAgreement) {
|
||||
refAgr.value.open()
|
||||
return false
|
||||
// return infoBox.showToast('请勾选用户隐私政策')
|
||||
}
|
||||
let loginPromise = null;
|
||||
|
||||
if(vdata.loginType == 'pwd'){ // 用户名密码登录
|
||||
// loginPromise = $loginByPwd(vdata.formData.username, vdata.formData.pwd, vdata.formData.safetyCode)
|
||||
loginPromise = $login({
|
||||
account: vdata.formData.username,
|
||||
password: vdata.formData.pwd
|
||||
})
|
||||
|
||||
}else if(vdata.loginType == 'sms'){ // 短信验证码登录
|
||||
loginPromise = $phoneCodeLogin(vdata.formData.loginPhone, vdata.formData.smsCode)
|
||||
}
|
||||
|
||||
if(loginPromise == null){
|
||||
return false;
|
||||
}
|
||||
|
||||
// 请求后的操作
|
||||
loginPromise.then(({bizData}) => {
|
||||
console.log(bizData);
|
||||
if(bizData.isMFA){ // 需要 二次认证登录
|
||||
|
||||
infoBox.showToast('请输入安全码')
|
||||
vdata.isShowSafetyCode = true
|
||||
return false;
|
||||
}
|
||||
// 登录成功
|
||||
loginFinishFunc(bizData)
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
const toPrivacy = () => {
|
||||
// #ifdef APP-PLUS
|
||||
go.to('PAGES_STATIC_POLICY')
|
||||
// #endif
|
||||
// 打开小程序隐私政策
|
||||
// #ifdef APP-PLUS
|
||||
wx.openPrivacyContract(
|
||||
{
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '打开失败请稍后重试', // 打开失败
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
}
|
||||
)
|
||||
// #endif
|
||||
}
|
||||
// 封装登录成功后的操作
|
||||
async function loginFinishFunc(loginBizData){
|
||||
|
||||
// 保存 token
|
||||
storageManage.token(loginBizData.iToken||loginBizData.tokenValue)
|
||||
console.log(loginBizData.iToken||loginBizData.tokenValue);
|
||||
storageManage.shopId(loginBizData.shopId)
|
||||
|
||||
// 请求用户信息
|
||||
return $userInfo().then(({bizData}) => {
|
||||
console.log('userInf',bizData);
|
||||
// 保存用户数据
|
||||
storageManage.userInfo(bizData)
|
||||
// 存储上传 图片大小限制
|
||||
$getUploadImgSize().then(({bizData})=>{
|
||||
storageManage.uploadImgSize(bizData.applymentImgUploadSize)
|
||||
})
|
||||
// #ifdef MP-WEIXIN
|
||||
getPushStatus()
|
||||
// #endif
|
||||
// 跳转到首页
|
||||
go.to("PAGES_INDEX", { isGetCid: true }, go.GO_TYPE_RELAUNCH)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
// 点击发送验证码的函数
|
||||
function sendSmscodeFunc(){
|
||||
// 按钮禁用
|
||||
if(!vdata.allowSendMsgFlag){
|
||||
return false;
|
||||
}
|
||||
|
||||
// 验证失败
|
||||
if(!formUtil.regexp.mobile.test(vdata.formData.loginPhone)){
|
||||
return infoBox.showToast("请输入正确的手机号")
|
||||
}
|
||||
|
||||
if(!vdata.formData.vercode){
|
||||
return infoBox.showToast("请输入图像验证码");
|
||||
}
|
||||
|
||||
vdata.allowSendMsgFlag = false; // 按钮禁用
|
||||
|
||||
|
||||
let data= {
|
||||
phone:vdata.formData.loginPhone,
|
||||
vercode:vdata.formData.vercode,
|
||||
vercodeToken:vdata.formData.vercodeToken,
|
||||
}
|
||||
|
||||
// 发送短信验证码
|
||||
$sendSms(data, 'auth').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") center center 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;
|
||||
.show-tips{
|
||||
color: rgba(88,132,204,1);
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.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;
|
||||
margin-top: 50rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
.register {
|
||||
text:last-child {
|
||||
color: #1D79FD;
|
||||
}
|
||||
}
|
||||
.forget {
|
||||
color: #1D79FD;
|
||||
}
|
||||
}
|
||||
.swidth-login {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 212rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: rgba(77,77,77,1);
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
69
pages/login/privacyPolicy.vue
Normal file
69
pages/login/privacyPolicy.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<!-- #ifdef APP || H5 -->
|
||||
<web-view src="/static/privacy.html"></web-view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<mp-html :content='vdata.content'/>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { $getTreaty } from '@/http/apiManager.js'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { nextTick } from 'vue';
|
||||
|
||||
let vdata = reactive({
|
||||
content: '',
|
||||
})
|
||||
onLoad(() => {
|
||||
$getTreaty().then(({ bizData }) => {
|
||||
vdata.content = bizData.privacyPolicy
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
padding: 0 50rpx;
|
||||
.first-title {
|
||||
text {
|
||||
font-size: 33rpx;
|
||||
}
|
||||
}
|
||||
.first-title,
|
||||
.second-title {
|
||||
margin-bottom: 20rpx;
|
||||
text {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.07em;
|
||||
}
|
||||
}
|
||||
.second-title {
|
||||
text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
.paragraph {
|
||||
margin-bottom: 50rpx;
|
||||
text {
|
||||
font-weight: 500;
|
||||
font-size: 25rpx;
|
||||
letter-spacing: 0.07em;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
.link {
|
||||
color: #175be6;
|
||||
}
|
||||
}
|
||||
.three-item {
|
||||
.item-text {
|
||||
margin-bottom: 30rpx;
|
||||
text {
|
||||
font-weight: 500;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
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>
|
||||
28
pages/login/serviceAgreement.vue
Normal file
28
pages/login/serviceAgreement.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<!-- #ifdef APP || H5 -->
|
||||
<web-view src="/static/service.html"></web-view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<mp-html :content='vdata.content'/>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { $getTreaty } from '@/http/apiManager.js'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
|
||||
let vdata = reactive({
|
||||
content: '',
|
||||
})
|
||||
onLoad(() => {
|
||||
$getTreaty().then(({ bizData }) => {
|
||||
vdata.content = bizData.serviceAgreement
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content-wrapper{
|
||||
padding: 30rpx;
|
||||
}
|
||||
</style>
|
||||
119
pages/login/setNewPassword.vue
Normal file
119
pages/login/setNewPassword.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<view class="new-password">
|
||||
<uni-forms ref="formRef" label-align="left" :model="vdata.formData" :rules="rules">
|
||||
<uni-forms-item label="新密码" name="pwd">
|
||||
<uni-easyinput class='jeepay-easyinput' :inputBorder="false" :type="vdata.isShowPwd ? 'text' : 'password'" v-model="vdata.formData.pwd" :clearable="false" placeholder="请输入登录密码" >
|
||||
<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 ? '隐藏' : '显示' }}</view> </template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="确认新密码" name="newPwd">
|
||||
<uni-easyinput class='jeepay-easyinput' :inputBorder="false" :type="vdata.isShowNewPwd ? 'text' : 'password'" v-model="vdata.formData.newPwd" :clearable="false" placeholder="请输入登录密码" >
|
||||
<template #suffixIcon> <view class='show-tips' style="color: rgba(88,132,204,1);font-weight: 400;font-size: 32rpx;" @tap="vdata.isShowNewPwd = !vdata.isShowNewPwd ">{{ vdata.isShowNewPwd ? '隐藏' : '显示' }}</view> </template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<view class="btn-box">
|
||||
<Button @tap="confirmRetrieve">确认修改</Button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import { $retrieve, $getPasswordRules } 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 = {
|
||||
pwd: {
|
||||
rules:[ formUtil.rules.requiredInputShowToast('新密码') ],
|
||||
},
|
||||
newPwd: {
|
||||
rules:[ formUtil.rules.requiredInputShowToast('确认密码') ],
|
||||
},
|
||||
}
|
||||
const formRef = ref()
|
||||
const vdata = reactive({
|
||||
formData: {
|
||||
pwd: '', // 新密码
|
||||
newPwd: '' // 确认新密码
|
||||
},
|
||||
isShowPwd: false, // 是否显示新密码
|
||||
isShowNewPwd: false, // 是否显示确认新密码
|
||||
params: null,
|
||||
passwordRules: /^$/, //密码规则
|
||||
passwordRulesText: '',//密码规则提示文字
|
||||
})
|
||||
|
||||
onLoad(options => {
|
||||
vdata.params = options
|
||||
getPasswordRules()
|
||||
});
|
||||
|
||||
const getPasswordRules = () => {
|
||||
$getPasswordRules().then(({bizData}) => {
|
||||
vdata.passwordRules = new RegExp(bizData.regexpRules)
|
||||
vdata.passwordRulesText = bizData.errTips
|
||||
})
|
||||
}
|
||||
|
||||
const confirmRetrieve = () => {
|
||||
formUtil.validate(formRef.value).then(() => {
|
||||
let { pwd, newPwd } = vdata.formData;
|
||||
if(!vdata.passwordRules.test(pwd) || !vdata.passwordRules.test(newPwd)) {
|
||||
return infoBox.showToast(vdata.passwordRulesText)
|
||||
}
|
||||
if (pwd !== newPwd) {
|
||||
return infoBox.showToast('两次密码输入不一致')
|
||||
}
|
||||
$retrieve({
|
||||
...vdata.params,
|
||||
newPwd
|
||||
}).then(() => {
|
||||
storageManage.token() && storageManage.token(null, true)
|
||||
infoBox.showToast('设置成功').then(() => {
|
||||
go.to('PAGES_LOGIN', {}, go.GO_TYPE_RELAUNCH)
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.new-password {
|
||||
min-height: 100vh;
|
||||
background-color: $v-color-bgrey;
|
||||
::v-deep.uni-forms-item.is-direction-left {
|
||||
padding: 0 40rpx;
|
||||
.uni-forms-item__label {
|
||||
width: 190rpx !important;
|
||||
font-size: 32rpx !important;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
color: rgba(102,102,102,1);
|
||||
text-indent: 0 !important;
|
||||
|
||||
}
|
||||
.uni-easyinput__placeholder-class {
|
||||
font-size: 32rpx !important;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 200rpx;
|
||||
border: 1rpx solid rgba(237,237,237,1);
|
||||
background: rgba(255,255,255,0.85);
|
||||
.jeepay-btn {
|
||||
margin: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user