153 lines
4.5 KiB
Vue
153 lines
4.5 KiB
Vue
<template>
|
|
<view class="login">
|
|
<view class="orderdetail_header p30">
|
|
<view :style="{ height: statusBarHeight }"></view>
|
|
<view style="height: 44px; display: flex; align-items: center">
|
|
<up-icon name="arrow-left" bold color="#000" @click="back"></up-icon>
|
|
</view>
|
|
</view>
|
|
|
|
<image class="login_bei" src="/static/logoB.png"></image>
|
|
|
|
<statusBar />
|
|
<view class="login_logo">
|
|
<image class="login_logo_img" src="/static/logo.png"></image>
|
|
<view class="login_logo_tit">欢迎来到投资者平台</view>
|
|
</view>
|
|
<view style="margin-top: 150rpx">
|
|
<view style="margin-bottom: 30rpx">
|
|
<up-input fontSize="30rpx" v-model="dataFrom.userName" placeholder="请输入您的用户名" border="bottom" clearable></up-input>
|
|
</view>
|
|
<view style="margin-bottom: 30rpx">
|
|
<up-input fontSize="30rpx" v-model="dataFrom.passwd" type="password" placeholder="请输入您的密码" border="bottom" clearable></up-input>
|
|
</view>
|
|
<view style="margin-bottom: 30rpx">
|
|
<up-input fontSize="30rpx" v-model="dataFrom.confirmPasswd" type="password" placeholder="请再次输入您的密码" border="bottom" clearable></up-input>
|
|
</view>
|
|
<view style="margin-bottom: 30rpx">
|
|
<up-input fontSize="30rpx" v-model="dataFrom.phone" placeholder="请输入您的手机号" border="bottom" clearable></up-input>
|
|
</view>
|
|
<view style="margin-bottom: 30rpx; display: flex; align-items: center">
|
|
<up-input fontSize="30rpx" v-model="dataFrom.smsCode" placeholder="请输入验证码" border="bottom" clearable></up-input>
|
|
<up-code ref="uCode" @change="codeChange2" keep-running start-text="点我获取验证码"></up-code>
|
|
<text @click="getCode2" :text="tips" style="font-size: 28rpx; color: rgba(111, 162, 86, 1)">{{ tips }}</text>
|
|
</view>
|
|
</view>
|
|
<view style="display: flex; justify-content: center; margin-top: 80rpx">
|
|
<view class="login_btn" @click="submit">确认</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive } from 'vue';
|
|
import { findPassword, smsCode } from '@/api/api.js';
|
|
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
|
|
let tips = ref('');
|
|
let uCode = ref(null);
|
|
let dataFrom = reactive({
|
|
userName: '',
|
|
passwd: '',
|
|
phone: '',
|
|
smsCode: '',
|
|
confirmPasswd:""
|
|
});
|
|
|
|
let toLogin = () => {
|
|
uni.navigateBack();
|
|
};
|
|
|
|
let codeChange2 = (text) => {
|
|
tips.value = text;
|
|
};
|
|
|
|
let getCode2 = () => {
|
|
if (!dataFrom.phone) return uni.showToast({ title: '请输入手机号', icon: 'none' });
|
|
if (uCode.value.canGetCode) {
|
|
// 模拟向后端请求验证码
|
|
uni.showLoading({
|
|
title: '正在获取验证码'
|
|
});
|
|
smsCode({
|
|
phone: dataFrom.phone
|
|
}).then((res) => {
|
|
uni.hideLoading();
|
|
uni.$u.toast('验证码已发送');
|
|
uCode.value.start();
|
|
});
|
|
} else {
|
|
uni.$u.toast('倒计时结束后再发送');
|
|
}
|
|
};
|
|
|
|
let submit = async () => {
|
|
if (!dataFrom.userName) return uni.showToast({ title: '请输入用户名', icon: 'none' });
|
|
if (!dataFrom.phone) return uni.showToast({ title: '请输入手机号', icon: 'none' });
|
|
if (dataFrom.phone.length != 11) return uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
|
|
if (!dataFrom.smsCode) return uni.showToast({ title: '请输入验证码', icon: 'none' });
|
|
if (!dataFrom.passwd) return uni.showToast({ title: '请输入密码', icon: 'none' });
|
|
if (!dataFrom.confirmPasswd) return uni.showToast({ title: '请再次输入密码', icon: 'none' });
|
|
if (dataFrom.passwd != dataFrom.confirmPasswd) return uni.showToast({ title: '两次密码输入不一致', icon: 'none' });
|
|
let _res = await findPassword(dataFrom);
|
|
uni.showToast({ title: '修改成功', icon: 'none' });
|
|
setTimeout(() => {
|
|
uni.navigateBack();
|
|
}, 200);
|
|
};
|
|
|
|
let back = () => {
|
|
uni.navigateBack();
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.login {
|
|
padding: 0 60rpx;
|
|
|
|
&_bei {
|
|
position: fixed;
|
|
right: -120rpx;
|
|
top: -206rpx;
|
|
width: 728rpx;
|
|
height: 728rpx;
|
|
}
|
|
|
|
&_logo {
|
|
margin-top: 150rpx;
|
|
&_img {
|
|
width: 280rpx;
|
|
height: 200rpx;
|
|
// background: #e6e6e6;
|
|
// box-shadow: 0rpx 0rpx 110rpx 2rpx rgba(115, 192, 76, 0.19);
|
|
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
&_tit {
|
|
font-weight: bold;
|
|
font-size: 44rpx;
|
|
color: #232323;
|
|
}
|
|
}
|
|
&_btn {
|
|
width: 474rpx;
|
|
height: 78rpx;
|
|
background: rgba(111, 162, 86, 1);
|
|
border-radius: 54rpx 54rpx 54rpx 54rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.orderdetail_header {
|
|
width: 750rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 99;
|
|
}
|
|
</style>
|