huling
/
center-talent-pool-h5
1
0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Activity
Selaa lähdekoodia

增加登录、注册、忘记密码页面

develop
胡玲 6 kuukautta sitten
vanhempi
3c0f9e3dd1
commit
d795fb19df
9 muutettua tiedostoa jossa 815 lisäystä ja 40 poistoa
Jaettu näkymä
Diff Options
Show Stats Download Patch File Download Diff File
  1. +69
    -40
      src/pages.json
  2. +64
    -0
      src/pages/infoCollection/index.vue
  3. +243
    -0
      src/pages/login/forgetPassword/index.vue
  4. +244
    -0
      src/pages/login/index.vue
  5. +195
    -0
      src/pages/login/register/index.vue
  6. BIN
      src/static/login_background.png
  7. BIN
      src/static/login_logo.png
  8. BIN
      src/static/login_rc_logo.png
  9. BIN
      src/static/password_pass.png

+ 69
- 40
src/pages.json Näytä tiedosto

@@ -1,47 +1,76 @@
{
"lazyCodeLoading": "requiredComponents",
"easycom": {
"autoscan": true,
"custom": {
"^u-(.*)": "vk-uview-ui/components/u-$1/u-$1.vue"
}
"lazyCodeLoading": "requiredComponents",
"easycom": {
"autoscan": true,
"custom": {
"^u-(.*)": "vk-uview-ui/components/u-$1/u-$1.vue"
}
},
"pages": [
{
"path": "pages/login/index",
"style": {
"navigationStyle": "custom"
}
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"subPackages": [
{
"root": "pages/childPages",
"pages": [{
"path": "child/index",
"navigationBarTitleText": "分包子页"
}]
}
],
"preloadRule": {
"pages/childPages/child/index": {
"network": "all",
"packages": ["__APP__"]
{
"path": "pages/login/register/index",
"style": {
"navigationStyle": "custom"
}
},
"condition": {
"current": 0,
"list": [{
"name": "分包子页",
"path": "pages/childPages/child/index",
"query": ""
{
"path": "pages/login/forgetPassword/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/infoCollection/index",
"style": {
"navigationBarTitleText": "基本信息"
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"subPackages": [
{
"root": "pages/childPages",
"pages": [
{
"path": "child/index",
"navigationBarTitleText": "分包子页"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
],
"preloadRule": {
"pages/childPages/child/index": {
"network": "all",
"packages": [
"__APP__"
]
}
},
"condition": {
"current": 0,
"list": [
{
"name": "分包子页",
"path": "pages/childPages/child/index",
"query": ""
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}

+ 64
- 0
src/pages/infoCollection/index.vue Näytä tiedosto

@@ -0,0 +1,64 @@
<template>
<scroll-view scroll-y="true">
<view class="content">
<view class="tip_back">
<text class="tip_text">* 页面内所有信息请如实填写；</text>
<text class="tip_text">* 信息确认提交审核后，您可以在审核记录页面内查看本次填报信息的审核进度。</text>
</view>
<view class="form_back">
<u-form :model="form" ref="uFormRef" id="uFormRef" >
<u-form-item prop="phone" label="姓名" required>
<u-input v-model="value" type="text" :border="false" input-align="right"
placeholder="请输入人员姓名"></u-input>
</u-form-item>
<u-form-item prop="phone" label="性别" required>
<u-input v-model="value" type="text" :border="false"
placeholder="请输入您的登录账号（企业名称）"></u-input>
</u-form-item>
</u-form>
</view>
</view>
</scroll-view>
</template>

<script setup>

</script>

<style lang="scss" scoped>

scroll-view {
width: 100%;
white-space: nowrap;
display: flex;
}

.content {
background-color: #F5F7FA;
display: flex ;
flex-direction: column;
height: 100%;

.form_back {
background-color: #FDFDFD;
padding-left: 30rpx;
padding-right: 24rpx;
}
}

.tip_back{
display: flex;
flex-direction: column;
margin: 20rpx 24rpx 20rpx 24rpx;

.tip_text {
color: #FB3737;
font-size: 24rpx;
line-height: 33rpx;
}
}




</style>

+ 243
- 0
src/pages/login/forgetPassword/index.vue Näytä tiedosto

@@ -0,0 +1,243 @@
<template>
<scroll-view scroll-y="true">
<view class="content">
<view class="logo_back">
<u-image width="100%" height="596rpx" src="/static/login_background.png"></u-image>
<u-image width="240rpx" height="50rpx" src="/static/login_logo.png" class="logo"></u-image>
<view class="overlay">
<u-image width="334rpx" height="52rpx" src="/static/login_rc_logo.png"></u-image>
</view>
</view>
<view class="login_back">
<text class="title">重置密码</text>
<view class="input_back">
<u-form :model="form" ref="uFormRef" id="uFormRef" :border-bottom="false">
<u-form-item prop="phone" :border-bottom="false">
<u-input v-model="value" type="text" :border="true" border-color="#F6F9FE"
class="input_text"
placeholder="请输入您的手机号码"
clearable></u-input>
</u-form-item>
<u-form-item prop="phone" :border-bottom="false">
<u-input v-model="value" type="text" :border="true" border-color="#F6F9FE"
class="input_pass"
placeholder="请输入短信验证码"></u-input>
</u-form-item>
<u-form-item prop="phone" :border-bottom="false">
<u-input v-model="value" type="text" :border="true" border-color="#F6F9FE"
class="input_pass"
placeholder="请设置新密码"
clearable></u-input>
</u-form-item>
<u-form-item prop="phone" :border-bottom="false">
<u-input v-model="value" type="text" :border="true" border-color="#F6F9FE"
class="input_pass"
placeholder="请再次输入新密码"
clearable></u-input>
</u-form-item>
</u-form>
</view>
<view class="login_back_button">
<u-button class="register_text" shape="circle" type="primary" @click="toSubmit">提交</u-button>
<u-button class="login_text" shape="circle" @click="toLogin">登录</u-button>
</view>
</view>
<!-- <view class="submit_back">-->
<!-- <u-image class="icon_back" width="120rpx" height="120rpx" src="/static/password_pass.png"></u-image>-->
<!-- <text class="title_text">密码重置成功</text>-->
<!-- <view class="login_back">-->
<!-- <u-button class="login_text_button" shape="circle" type="primary" @click="toLogin">返回登录</u-button>-->
<!-- </view>-->
<!-- </view>-->

</view>
</scroll-view>
</template>


<script setup>

const toSubmit =() =>{

}

const toLogin =() =>{
uni.navigateTo({
url: `/pages/login/index`
})
}

</script>

<style lang="scss" scoped>
scroll-view {
width: 100%;
white-space: nowrap;
display: flex;
}
::v-deep uni-page-wrapper {
display: flex !important;
}

.content {
display: flex ;
flex-direction: column;
height: 100%;
}

.logo_back {
height: 596rpx;

.logo {
top: 24rpx;
left: 24rpx;
position: absolute;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 380rpx;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
}

.login_back {
z-index: 1000;
margin-top: -295rpx;
display: flex;
flex: 1;
background-color: #ffffff;
border-top-left-radius: 30rpx;
border-top-right-radius: 30rpx;
/*align-items: center;*/
flex-direction: column;

.input_back {
padding-left: 50rpx;
padding-right: 50rpx;
width: 100%;
}

.input_text {
margin-top: 30rpx;
align-items: center;
text-align: center !important;
height: 100rpx;
border-radius: 50rpx;
font-size: 32rpx;
background-color: #F6F9FE;
}

.input_pass {
align-items: center;
text-align: center !important;
height: 100rpx;
border-radius: 50rpx;
font-size: 32rpx;
background-color: #F6F9FE;
}
}
.agreement{
margin-left: 50rpx;
margin-top: 20rpx;
.checkBox {
/*color: #000000;*/
/*opacity: 0.5;*/
}
.privacyAgreement{
color: #0466FC;
margin-left: -40rpx;
font-size: 26rpx;
}
}
.login_back_button {
margin-top: 15rpx;
margin-bottom: 15;
padding-left: 50rpx;
padding-right: 50rpx;
width: 100%;

.register_text {
color: #ffffff;
box-shadow: 0 10rpx 10rpx 0 #D4D6F7;
background-color: #0466FC;
border-radius: 50rpx;
height: 100rpx;
font-size: 36rpx;
}

.login_text {
margin-top: 40rpx;
color: #2E5AFE;
background-color: #FFFFFF;
border-radius: 50rpx;
height: 100rpx;
font-size: 36rpx;
border-style: solid;
border-color: #2E5AFE;
}
}

.title {
text-align: center;
overflow-wrap: break-word;
letter-spacing: 1px;
white-space: nowrap;
font-weight: bold;
color: #0D0E21;
font-size: 38rpx;
margin-top: 50rpx;
}

.submit_back{
z-index: 1000;
margin-top: -295rpx;
display: flex;
flex: 1;
background-color: #ffffff;
border-top-left-radius: 30rpx;
border-top-right-radius: 30rpx;
align-items: center;
flex-direction: column;

.title_text {
text-align: center;
overflow-wrap: break-word;
letter-spacing: 1px;
white-space: nowrap;
font-weight: bold;
color: #0D0E21;
font-size: 38rpx;
margin-top: 20rpx;
}

.icon_back{
margin-top: 160rpx;
}

.login_back{
margin-top: 50rpx;
margin-bottom: 30rpx;
padding-left: 50rpx;
padding-right: 50rpx;
width: 100%;

.login_text_button {
width: 100%;
color: #ffffff;
box-shadow: 0 10rpx 10rpx 0 #D4D6F7;
background-color: #0466FC;
border-radius: 50rpx;
height: 100rpx;
font-size: 36rpx;
}
}
}


</style>

+ 244
- 0
src/pages/login/index.vue Näytä tiedosto

@@ -0,0 +1,244 @@
<template>
<scroll-view scroll-y="true">
<view class="content">
<view class="logo_back">
<u-image width="100%" height="596rpx" src="/static/login_background.png"></u-image>
<u-image width="240rpx" height="50rpx" src="/static/login_logo.png" class="logo"></u-image>
<view class="overlay">
<u-image width="334rpx" height="52rpx" src="/static/login_rc_logo.png"></u-image>
</view>
</view>
<view class="login_back">
<text class="title">欢迎登录人才库系统</text>
<view class="input_back">
<u-form :model="form" ref="uFormRef" id="uFormRef" :border-bottom="false">
<u-form-item prop="phone" :border-bottom="false">
<u-input v-model="value" type="text" :border="true" border-color="#F6F9FE"
class="input_text"
placeholder="请输入您的登录账号（企业名称）"
clearable></u-input>
</u-form-item>
<u-form-item prop="phone" :border-bottom="false">
<u-input v-model="value" type="password" :border="true" border-color="#F6F9FE"
class="input_pass"
placeholder="请输入您的登录密码"
password-icon></u-input>
</u-form-item>
</u-form>
</view>
<view class="agreement">
<u-checkbox label-size="26rpx" v-model="isSelect" @change="changeCheckbox" size="26rpx"
shape="circle"
icon-size="28rpx" active-color="#0466FC" label="阅读" class="checkBox">已阅读并同意
</u-checkbox>
<text class="privacyAgreement"
@tap="goWebView('https://www.51trust.com/trt/trt-uni-userprivacy.html')">
《用户服务协议》
</text>
</view>
<view class="login_back_button">
<u-button class="login_text" shape="circle" type="primary" @click="toInfoPage">登录</u-button>
<view class="text_back">
<text class="text_button" @tap="toRegister">
立即注册
</text>
<text class="text_button" @tap="toForgetPassword">
忘记密码
</text>
</view>
<view class="tip_text_back">
<text class="star_text">
*
<text class="tip_text">登录时请注意区分登录账号的角色</text>
</text>
<text class="tip_text">
{{`&nbsp;&nbsp;·填报单位请使用填报单位登录入口进行登录；`}}
</text>
<text class="tip_text">
{{`&nbsp;&nbsp;·各省级主管单位（局）请使用主管部门登录入口进行登录；`}}
</text>
<text class="star_text">
*
<text class="tip_text">登录账号形式均为单位名称</text>
</text>
</view>
</view>

</view>
</view>
</scroll-view>
</template>


<script setup>

const toRegister =() =>{
uni.navigateTo({
url: `/pages/login/register/index`
})
}

const toForgetPassword =() =>{
uni.navigateTo({
url: `/pages/login/forgetPassword/index`
})
}

const toInfoPage =() =>{
uni.navigateTo({
url: `/pages/infoCollection/index`
})
}

</script>

<style lang="scss" scoped>
scroll-view {
width: 100%;
white-space: nowrap;
display: flex;
}
::v-deep uni-page-wrapper {
display: flex !important;
}

.content {
display: flex ;
flex-direction: column;
height: 100%;
}

.logo_back {
height: 596rpx;

.logo {
top: 24rpx;
left: 24rpx;
position: absolute;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 380rpx;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
}

.login_back {
z-index: 1000;
margin-top: -295rpx;
display: flex;
flex: 1;
background-color: #ffffff;
border-top-left-radius: 30rpx;
border-top-right-radius: 30rpx;
/*align-items: center;*/
flex-direction: column;

.title {
text-align: center;
overflow-wrap: break-word;
letter-spacing: 1px;
white-space: nowrap;
font-weight: bold;
color: #0D0E21;
font-size: 38rpx;
margin-top: 50rpx;
}

.input_back {
padding-left: 50rpx;
padding-right: 50rpx;
width: 100%;
}

.input_text {
margin-top: 40rpx;
align-items: center;
text-align: center !important;
height: 100rpx;
border-radius: 50rpx;
font-size: 32rpx;
background-color: #F6F9FE;
}

.input_pass {
margin-top: 10rpx;
align-items: center;
text-align: center !important;
height: 100rpx;
border-radius: 50rpx;
font-size: 32rpx;
background-color: #F6F9FE;
}
}
.agreement{
margin-left: 50rpx;
margin-top: 20rpx;
.checkBox {
/*color: #000000;*/
/*opacity: 0.5;*/
}
.privacyAgreement{
color: #0466FC;
margin-left: -40rpx;
font-size: 26rpx;
}
}
.login_back_button {
margin-top: 15rpx;
padding-left: 50rpx;
padding-right: 50rpx;
width: 100%;

.login_text {
color: #ffffff;
box-shadow: 0 10rpx 10rpx 0 #D4D6F7;
background-color: #0466FC;
border-radius: 50rpx;
height: 100rpx;
font-size: 36rpx;
}
.text_back {
margin-top: 40rpx;
flex-direction: row;
display: flex;
justify-content: space-between;
margin-left: 10rpx;
margin-right: 10rpx;

.text_button{
font-size: 30rpx;
line-height: 42rpx;
color: #0466FC;
}
}
.tip_text_back{
display: flex;
flex-direction: column;
margin-top: 60rpx;
margin-bottom: 10rpx;
background-color: #F2F7FF;
border-radius: 10rpx;
padding: 20rpx;
.star_text {
color: #FB3737;
font-size: 24rpx;
line-height: 40rpx;
}
.tip_text{
color: #9B9BA4;
font-size: 24rpx;
line-height: 40rpx;
}
}

}


</style>

+ 195
- 0
src/pages/login/register/index.vue Näytä tiedosto

@@ -0,0 +1,195 @@
<template>
<scroll-view scroll-y="true">
<view class="content">
<view class="logo_back">
<u-image width="100%" height="596rpx" src="/static/login_background.png"></u-image>
<u-image width="240rpx" height="50rpx" src="/static/login_logo.png" class="logo"></u-image>
<view class="overlay">
<u-image width="334rpx" height="52rpx" src="/static/login_rc_logo.png"></u-image>
</view>
</view>
<view class="login_back">
<text class="title">欢迎登录人才库系统</text>
<view class="input_back">
<u-form :model="form" ref="uFormRef" id="uFormRef" :border-bottom="false">
<u-form-item prop="phone" :border-bottom="false">
<u-input v-model="value" type="text" :border="true" border-color="#F6F9FE"
class="input_text"
placeholder="请输入您的手机号码"
clearable></u-input>
</u-form-item>
<u-form-item prop="phone" :border-bottom="false">
<u-input v-model="value" type="text" :border="true" border-color="#F6F9FE"
class="input_pass"
placeholder="请输入短信验证码"></u-input>
</u-form-item>
<u-form-item prop="phone" :border-bottom="false">
<u-input v-model="value" type="text" :border="true" border-color="#F6F9FE"
class="input_pass"
placeholder="请设置密码"
clearable></u-input>
</u-form-item>
<u-form-item prop="phone" :border-bottom="false">
<u-input v-model="value" type="text" :border="true" border-color="#F6F9FE"
class="input_pass"
placeholder="请再次输入密码"
clearable></u-input>
</u-form-item>
</u-form>
</view>
<view class="agreement">
<u-checkbox label-size="26rpx" v-model="isSelect" @change="changeCheckbox" size="26rpx"
shape="circle"
icon-size="28rpx" active-color="#0466FC" label="阅读" class="checkBox">已阅读并同意
</u-checkbox>
<text class="privacyAgreement"
@tap="goWebView('https://www.51trust.com/trt/trt-uni-userprivacy.html')">
《用户服务协议》
</text>
</view>
<view class="login_back_button">
<u-button class="register_text" shape="circle" type="primary">注册</u-button>
<u-button class="login_text" shape="circle" @click="toLogin">登录</u-button>
</view>
</view>
</view>
</scroll-view>
</template>


<script setup>

const toLogin =() =>{
uni.navigateTo({
url: `/pages/login/index`
})
}

</script>

<style lang="scss" scoped>
scroll-view {
width: 100%;
white-space: nowrap;
display: flex;
}
::v-deep uni-page-wrapper {
display: flex !important;
}

.content {
display: flex ;
flex-direction: column;
height: 100%;
}

.logo_back {
height: 596rpx;

.logo {
top: 24rpx;
left: 24rpx;
position: absolute;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 380rpx;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
}

.login_back {
z-index: 1000;
margin-top: -295rpx;
display: flex;
flex: 1;
background-color: #ffffff;
border-top-left-radius: 30rpx;
border-top-right-radius: 30rpx;
/*align-items: center;*/
flex-direction: column;

.title {
text-align: center;
overflow-wrap: break-word;
letter-spacing: 1px;
white-space: nowrap;
font-weight: bold;
color: #0D0E21;
font-size: 38rpx;
margin-top: 50rpx;
}

.input_back {
padding-left: 50rpx;
padding-right: 50rpx;
width: 100%;
}

.input_text {
margin-top: 30rpx;
align-items: center;
text-align: center !important;
height: 100rpx;
border-radius: 50rpx;
font-size: 32rpx;
background-color: #F6F9FE;
}

.input_pass {
align-items: center;
text-align: center !important;
height: 100rpx;
border-radius: 50rpx;
font-size: 32rpx;
background-color: #F6F9FE;
}
}
.agreement{
margin-left: 50rpx;
margin-top: 20rpx;
.checkBox {
/*color: #000000;*/
/*opacity: 0.5;*/
}
.privacyAgreement{
color: #0466FC;
margin-left: -40rpx;
font-size: 26rpx;
}
}
.login_back_button {
margin-top: 15rpx;
padding-left: 50rpx;
padding-right: 50rpx;
width: 100%;

.register_text {
color: #ffffff;
box-shadow: 0 10rpx 10rpx 0 #D4D6F7;
background-color: #0466FC;
border-radius: 50rpx;
height: 100rpx;
font-size: 36rpx;
}

.login_text {
margin-top: 40rpx;
color: #2E5AFE;
background-color: #FFFFFF;
border-radius: 50rpx;
height: 100rpx;
font-size: 36rpx;
border-style: solid;
border-color: #2E5AFE;
}
}


</style>

BIN
src/static/login_background.png Näytä tiedosto

Before After
Width: 750  |  Height: 596  |  Size: 152KB

BIN
src/static/login_logo.png Näytä tiedosto

Before After
Width: 240  |  Height: 50  |  Size: 9.8KB

BIN
src/static/login_rc_logo.png Näytä tiedosto

Before After
Width: 334  |  Height: 52  |  Size: 4.9KB

BIN
src/static/password_pass.png Näytä tiedosto

Before After
Width: 120  |  Height: 120  |  Size: 1.4KB

Write Preview
Loading…
Peruuta
Tallenna