添加页面及部分多语言切换
This commit is contained in:
浅念
+98
-136
@@ -1,66 +1,66 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="title">
|
||||
<view>Hello！<br>欢迎来到XXX</view>
|
||||
<image src="/static/image/hesu.png" mode=""></image>
|
||||
</view>
|
||||
|
||||
<view class="form">
|
||||
<view class="tab">
|
||||
<view :class="loginType==1? 'select type1' : 'type1'" @click="loginType=1">快捷登录</view>
|
||||
<view :class="loginType==2? 'select type2' : 'type2'" @click="loginType=2">账号登陆</view>
|
||||
</view>
|
||||
<view class="inputs_button">
|
||||
<view class="inputs">
|
||||
<view class="account">
|
||||
<input type="number" v-model="account" :adjust-position="false" placeholder="手机号" />
|
||||
<input type="number" v-model="email" :adjust-position="false" placeholder="手机号" />
|
||||
</view>
|
||||
<view class="password" v-if="loginType==2">
|
||||
<view class="password">
|
||||
<u--input
|
||||
type="password"
|
||||
placeholder="请输入内容"
|
||||
border="none"
|
||||
></u--input>
|
||||
<!-- <input :type="pwdShow? 'text' : 'password'" v-model="password" :adjust-position="false"
|
||||
placeholder="密码" /> -->
|
||||
<uni-icons :type="pwdShow? 'eye-filled' : 'eye-slash-filled'" size="24" color="#cccccc"
|
||||
@click="pwdShow=!pwdShow"></uni-icons>
|
||||
</view>
|
||||
<view class="vcode" v-if="loginType==1">
|
||||
<input type="number" v-model="vcode" :adjust-position="false" placeholder="验证码" />
|
||||
<text v-if="vcodeTime==0" style="color:#3264ed" @click="getVcode">获取验证码</text>
|
||||
<text v-else style="color:#ccc">重新获取({{vcodeTime}}s)</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="forgot-password">
|
||||
<text @click="forgotPassword">忘记密码？</text>
|
||||
</view>
|
||||
<view class="button">
|
||||
<view @click="login">
|
||||
登录
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="three">
|
||||
<u-divider text="第三方登录" style="padding: 0px 40px;"></u-divider>
|
||||
<u-grid :border="false" @click="click" align="center">
|
||||
<u-grid-item>
|
||||
<image src="/static/image/login/fenshu.png" mode=""></image>
|
||||
<text class="grid-text">飞书</text>
|
||||
</u-grid-item>
|
||||
<u-grid-item>
|
||||
<image src="/static/image/login/emali.png" mode=""></image>
|
||||
<text class="grid-text">邮箱</text>
|
||||
</u-grid-item>
|
||||
<u-grid-item>
|
||||
<image src="/static/image/login/phone.png" mode=""></image>
|
||||
<text class="grid-text">手机</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
<view class="pact">
|
||||
<radio :checked="pactChecked" activeBackgroundColor="#3264ed" activeBorderColor="#3264ed"
|
||||
<view>我已经阅读并同意<text @click="toPact">《用户协议》</text>和<text @click="toPact">《隐私协议》</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pact">
|
||||
<radio :checked="pactChecked" activeBackgroundColor="#3264ed" activeBorderColor="#3264ed"
|
||||
borderColor="#3264ed" color="#fff" @click="pactChange" />
|
||||
<view>我已阅读并同意<text @click="toPact">《用户协议》</text>和<text @click="toPact">《隐私协议》</text></view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request,showToast } from '@/api/apiT.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
account: "",
|
||||
email: "",
|
||||
password: "",
|
||||
vcode: "",
|
||||
|
||||
loginType: 1,
|
||||
|
||||
pwdShow: false,
|
||||
pactChecked: false,
|
||||
|
||||
vcodeTime: 0,
|
||||
vcodeTimer: null
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
@@ -68,29 +68,50 @@
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
uni.showToast({
|
||||
title: "登录方式" + this.loginType,
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
getVcode() {
|
||||
this.vcodeTime = 60
|
||||
this.vcodeTimer = setInterval(() => {
|
||||
if (this.vcodeTime > 0) {
|
||||
this.vcodeTime--
|
||||
} else {
|
||||
clearInterval(this.vcodeTimer)
|
||||
this.vcodeTimer = null
|
||||
if(this.email==''){
|
||||
uni.showToast({
|
||||
title:'邮箱不能为空',
|
||||
icon: 'none'
|
||||
});
|
||||
return false
|
||||
}
|
||||
if(this.password==''){
|
||||
uni.showToast({
|
||||
title:'密码不能为空',
|
||||
icon: 'none'
|
||||
});
|
||||
return false
|
||||
}
|
||||
if(!this.pactChecked){
|
||||
uni.showToast({
|
||||
title:'请先勾选同意用户服务协议以及隐私政策',
|
||||
icon: 'none'
|
||||
});
|
||||
return false
|
||||
}
|
||||
request({
|
||||
url:'user/login',
|
||||
method:'POST',
|
||||
data:{
|
||||
email: this.email,
|
||||
password: this.password,
|
||||
}
|
||||
}).then(res => {
|
||||
console.log(res.data.data)
|
||||
if (res.data.code == -1) {
|
||||
uni.showToast({
|
||||
title: res.data.msg,
|
||||
icon: 'none'
|
||||
});
|
||||
|
||||
} else if (res.data.code == 0) {
|
||||
//返回数据接收成功
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index',// 替换为你要跳转的页面路径
|
||||
});
|
||||
}
|
||||
}, 1000)
|
||||
uni.showToast({
|
||||
title: "获取验证码",
|
||||
icon: 'none'
|
||||
})
|
||||
},
|
||||
pactChange() {
|
||||
this.pactChecked = !this.pactChecked
|
||||
},
|
||||
toPact() {
|
||||
uni.showToast({
|
||||
title: "协议",
|
||||
@@ -104,8 +125,7 @@
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background-image: url("../../static/image/loginBg.png");
|
||||
// background: url("../../static/image/loginBg.png") no-repeat top center;
|
||||
background-image: url("../../static/image/login/loginbg.png");
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
@@ -114,87 +134,30 @@
|
||||
|
||||
.title {
|
||||
padding-top: 220rpx;
|
||||
padding-bottom: 70rpx;
|
||||
|
||||
view {
|
||||
padding-left: 64rpx;
|
||||
font-size: 48rpx;
|
||||
font-weight: 700;
|
||||
color: #383838;
|
||||
text-align: center;
|
||||
image{
|
||||
width: 160px;
|
||||
height: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
flex: 1;
|
||||
margin: 0 32rpx;
|
||||
border-radius: 40rpx;
|
||||
background-color: #fff;
|
||||
margin: 0 76rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #ecf1fb;
|
||||
height: 100rpx;
|
||||
background: linear-gradient(180deg, #e3ebf9 0%, #ffffff 100%);
|
||||
|
||||
view {
|
||||
width: 340rpx;
|
||||
line-height: 100rpx;
|
||||
text-align: center;
|
||||
color: #9e9e9e;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
view::after {
|
||||
content: '';
|
||||
width: 50rpx;
|
||||
height: 8rpx;
|
||||
display: block;
|
||||
background-color: #3264ed;
|
||||
border-radius: 4rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 14rpx;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
view.select {
|
||||
background-color: #fff;
|
||||
color: #3264ed;
|
||||
}
|
||||
|
||||
view.type1.select {
|
||||
border-radius: 0 40rpx 0 0;
|
||||
}
|
||||
|
||||
view.type2.select {
|
||||
border-radius: 40rpx 0 0;
|
||||
}
|
||||
|
||||
view.select::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.inputs_button {
|
||||
background-color: #fff;
|
||||
|
||||
.inputs {
|
||||
padding: 150rpx 32rpx 0;
|
||||
margin-bottom: 80rpx;
|
||||
|
||||
padding: 150rpx 0px 0;
|
||||
margin-bottom: 20rpx;
|
||||
.account,
|
||||
.password,
|
||||
.vcode {
|
||||
height: 96rpx;
|
||||
border-radius: 20rpx;
|
||||
.password{
|
||||
height: 80rpx;
|
||||
border-radius: 50px;
|
||||
padding: 0 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f7fafc;
|
||||
background-color: #F6F6F6;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
@@ -204,39 +167,38 @@
|
||||
.account {
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.vcode {
|
||||
text {
|
||||
text-wrap: nowrap;
|
||||
font-size: 26rpx;
|
||||
background-color: #fff;
|
||||
padding: 14rpx 30rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0 32rpx;
|
||||
|
||||
view {
|
||||
line-height: 96rpx;
|
||||
border-radius: 20rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 50px;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
background-color: #3264ed;
|
||||
background: linear-gradient(to right, #3471FF, #6776FF);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.three{
|
||||
margin: 40rpx 0px;
|
||||
padding: 20rpx 40rpx;
|
||||
image{
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.forgot-password {
|
||||
text-align: right;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.pact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 120rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
text {
|
||||
|
||||
Reference in New Issue
Block a user