You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
261 lines
6.9 KiB
261 lines
6.9 KiB
<template>
|
|
<view>
|
|
<!-- pages/register/register.wxml -->
|
|
<view class="header">
|
|
<view class="left">
|
|
<image src="/static/images/login/hi.png" mode="" />
|
|
<view style="margin-top: 30rpx">欢迎加入e联社区</view>
|
|
</view>
|
|
<view class="right">
|
|
<image src="/static/images/login/right_bg.png" mode="" />
|
|
</view>
|
|
</view>
|
|
<view class="login">
|
|
<view class="input_box">
|
|
<image src="/static/images/login/user.png" mode="" />
|
|
<!-- 失去焦点的时候bindblur="handelBlurMobile" -->
|
|
<input type="text" placeholder="请输入手机号" @blur="handelBlurMobile" :value="formData.phone" confirm-type="next" />
|
|
<image src="/static/images/login/password.png" mode="" />
|
|
<!-- 将值绑定formData.password中 -->
|
|
<input type="text" confirm-type="go" :password="true" placeholder="请输入密码" @input="handelBlurPassword" @blur="handelBlurPassword" :value="formData.password" />
|
|
</view>
|
|
<text v-if="'{true}'">忘记密码</text>
|
|
<!-- tap事件绑定到handelClickSubmit。tab事件，当触摸屏时 -->
|
|
<button @tap="handelClickSubmit" style="font-weight: 600">登录</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// pages/register/register.js
|
|
// 到入一个
|
|
import { userLoginlog } from '../../utils/api';
|
|
export default {
|
|
data() {
|
|
return {
|
|
formData: {
|
|
phone: '',
|
|
password: '',
|
|
app:'gov',
|
|
client:'h5',
|
|
customerId:'45687aa479955f9d06204d415238f7cc'
|
|
// appId: ''
|
|
}
|
|
};
|
|
}
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/,
|
|
onLoad(options) {
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面初次渲染完成
|
|
*/
|
|
onReady() {},
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow() {},
|
|
/**
|
|
* 生命周期函数--监听页面隐藏
|
|
*/
|
|
onHide() {},
|
|
/**
|
|
* 生命周期函数--监听页面卸载
|
|
*/
|
|
onUnload() {},
|
|
/**
|
|
* 页面相关事件处理函数--监听用户下拉动作
|
|
*/
|
|
onPullDownRefresh() {},
|
|
/**
|
|
* 页面上拉触底事件的处理函数
|
|
*/
|
|
onReachBottom() {},
|
|
/**
|
|
* 用户点击右上角分享
|
|
*/
|
|
onShareAppMessage() {},
|
|
methods: {
|
|
handelBlurMobile(e) {
|
|
this.setData({
|
|
// 获取绑定过的值，付给fromData.mobile
|
|
'formData.phone': e.detail.value
|
|
});
|
|
console.log(this.formData);
|
|
},
|
|
|
|
handelBlurPassword(e) {
|
|
this.setData({
|
|
// 获取绑定过的值，付给fromData.password
|
|
'formData.password': e.detail.value
|
|
});
|
|
console.log(this.formData);
|
|
},
|
|
|
|
handelClickSubmit() {
|
|
if (!this.formData.phone) {
|
|
// 微信的轻量级api
|
|
uni.showToast({
|
|
title: '请填写手机号',
|
|
// 不显示图标
|
|
icon: 'none',
|
|
duration: 3000
|
|
});
|
|
return;
|
|
}
|
|
if (!this.formData.password) {
|
|
uni.showToast({
|
|
title: '请输入密码',
|
|
icon: 'none',
|
|
// 提示时间为3s
|
|
duration: 3000
|
|
});
|
|
return;
|
|
}
|
|
const parm = {
|
|
...this.formData
|
|
};
|
|
// 轻量级api,在加载时进行显示
|
|
uni.showLoading({
|
|
title: '登录中'
|
|
});
|
|
userLoginlog(parm)
|
|
.then((res) => {
|
|
console.log(res);
|
|
// 判断登录是否成功
|
|
if (res.code == 0) {
|
|
// 用于跳转的api,跳转到某某某
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
});
|
|
//加入本地内存的api
|
|
uni.setStorageSync('token', res.data.token);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 3000
|
|
});
|
|
console.log(err);
|
|
});
|
|
uni.hideLoading();
|
|
// uni.login({
|
|
// success: (res) => {
|
|
// parm.wxCode = res.code;
|
|
// console.log(parm.wxCode);
|
|
// // 调用登录的接口
|
|
|
|
// }
|
|
// });
|
|
//微信的api,获取登录凭证,用户获取凭证
|
|
// uni.getUserProfile({
|
|
// desc: '用于获取用户个人信息',
|
|
// success: function (res) {
|
|
// var userInfo = res.userInfo;
|
|
// var avatarUrl = userInfo.avatarUrl;
|
|
// uni.setStorageSync('avatarUrl', avatarUrl);
|
|
// console.log("User's Avatar URL:", avatarUrl);
|
|
|
|
// }
|
|
// });
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
/* pages/register/register.wxss */
|
|
page {
|
|
/*宽度为100% */
|
|
width: 100%;
|
|
/* 最小高度 */
|
|
min-height: 100vh;
|
|
/* 垂直方向.元素溢出时,显示滚动条 */
|
|
overflow-y: auto;
|
|
}
|
|
.header {
|
|
height: 500rpx;
|
|
width: 100%;
|
|
/*渐变色 */
|
|
background: linear-gradient(180deg, #1673ee 0%, #66a6fd 63%, #f7f7f7 100%);
|
|
box-sizing: border-box;
|
|
padding: 140rpx 0rpx 100rpx 50rpx;
|
|
font-size: 40rpx;
|
|
color: #ffffff;
|
|
display: flex;
|
|
}
|
|
.header .left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.header .left image {
|
|
width: 106rpx;
|
|
height: 94rpx;
|
|
}
|
|
.header .right image {
|
|
width: 280rpx;
|
|
height: 232rpx;
|
|
position: relative;
|
|
top: -30rpx;
|
|
left: 100rpx;
|
|
}
|
|
.header view {
|
|
margin-top: 30rpx;
|
|
}
|
|
.login {
|
|
width: 100%;
|
|
height: auto;
|
|
position: relative;
|
|
top: -90rpx;
|
|
border-radius: 60rpx 60rpx 0 0;
|
|
background-color: #fff;
|
|
box-sizing: border-box;
|
|
padding: 80rpx 60rpx 0;
|
|
}
|
|
.login .input_box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
.login input {
|
|
width: auto;
|
|
height: 93rpx;
|
|
background: #f5f5fa;
|
|
border-radius: 47rpx;
|
|
padding-left: 80rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
.login image {
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
position: relative;
|
|
left: 20rpx;
|
|
top: 70rpx;
|
|
}
|
|
.login text {
|
|
display: inline-block;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #3e92ff;
|
|
margin-top: 36rpx;
|
|
padding-left: 20rpx;
|
|
}
|
|
.login button {
|
|
display: block;
|
|
background: linear-gradient(87deg, #81b5fb 0%, #3e92ff 100%);
|
|
border-radius: 43rpx;
|
|
width: auto !important;
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC;
|
|
margin: 85rpx 0 0 !important;
|
|
box-sizing: border-box;
|
|
font-weight: 300;
|
|
height: 86rpx;
|
|
line-height: 86rpx;
|
|
padding: 0 !important;
|
|
}
|
|
</style>
|
|
|