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.

542 lines
14 KiB

3 months ago
<template>
<view class="loginBack">
<view class="loginForm">
<view class="welcomeLogin">欢迎登录</view>
<view class="tip">yoga</view>
<view class="formregion">
<uni-forms :model="form" ref="uForm">
<uni-forms-item prop="phonenumber" >
<uni-easyinput type="number" placeholder="请输入手机号码" v-model="form.phonenumber" @blur="zhhandleBlur" :inputBorder="false" :clearable="false" :placeholderStyle="placeholderStyle"/>
</uni-forms-item>
<uni-forms-item prop="password" >
<uni-easyinput type="password" placeholder="请输入密码" v-model="form.password" @blur="mmhandleBlur" :inputBorder="false" :clearable="false" :placeholderStyle="placeholderStyle"/>
</uni-forms-item>
<uni-forms-item prop="code" >
<uni-easyinput type="text" placeholder="请输入验证码" v-model.trim="form.code" :inputBorder="false" :clearable="false" :placeholderStyle="placeholderStyle"/>
<image :src="checkimg" class="checkimg" mode="scaleToFill"></image>
<view class="codebtn" @click="getcode">?</view>
</uni-forms-item>
<button type="primary" class="logincla" @click="loginpwdDo"></button>
<view v-if="iflogin" class="loginno">..</view>
<view class="regcon">
<!-- <view class="regtxt" @click="gotopwd"></view>
<view class="regtxtl"></view> -->
<view class="regtxtr" @click="gotoregister"> </view>
</view>
</uni-forms>
</view>
<u-toast ref="uToast" />
</view>
</view>
</template>
<script>
//#ifdef APP-PLUS
// const jpushModule = uni.requireNativePlugin('JG-JPush');
//#endif
import {myCache} from '../../utils/utils.js';
export default {
data() {
return {
checkimg: require("@/static/image/check.jpg"),
placeholderStyle:"font-size: 28rpx;color: #c3c4c6; text",
form: {
phonenumber:"",
password:"",
code:"",
uuid:"",
registerId:"", // 设备id
position:"123.357586,41.862907", // 默认拾取 三朵兰瑜伽默认坐标
},
iflogin:false,
gcj02:"1",
address:'',
longitude:'', // 经度
latitude:'', // 维度
}
},
onLoad(){
this.getcheckImg();
this.getsystemInfo();
this.getPosition();
},
methods: {
gotoregister() {
// 注册账号
uni.navigateTo({
url: `/pages/login/register`
});
},
gotopwd() {
// 修改密码
uni.navigateTo({
url: `/pages/user/pwdset`
});
},
// 获取定位
getPosition(){
const _this=this;
uni.getLocation({
type:'gcj02',//'gcj02','wgs84', // 返回的坐标类型wgs84 表示国际标准的经纬度
success: function (res) {
console.log('当前位置的经度:' + res.longitude);
console.log('当前位置的纬度:' + res.latitude);
_this.form.position=res.latitude+','+res.longitude;
_this.$forceUpdate();
},
fail: function (err) {
console.log('获取位置失败:' + err.errMsg);
uni.showModal({
title: '提示',
content: '请在设置中开启定位服务,注册默认地址信息!',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
// 跳转到设置页面
plus.device.vendor = 'apple'; // 如果是iOS系统
if (plus.os.name == 'iOS') {
plus.runtime.openURL('prefs:root=LOCATION_SERVICES');
} else {
plus.runtime.openURL('package:' + plus.android.runtimeMainActivity());
}
}
}
});
_this.form.position="123.357586,41.862907";
_this.$forceUpdate();
}
});
},
// 获取设备信息
getsystemInfo(){
const info = uni.getSystemInfoSync();
const platform = info.platform; // 手机安卓还是苹果
if (info.platform === 'ios') {
// ios
console.log('iOS 设备唯一标识:', info.deviceId);
}
else{
//安卓
console.log('设备信息ID:',info.deviceId);
}
this.form.registerId=info.deviceId;
this.$forceUpdate();
// const iosApp = info.platform;
console.log('iOS 设备名称:', info.model);
console.log('iOS 系统版本:', info.system);
console.log('iOS 设备唯一标识:', info.deviceId);
console.log('iOS 设备像素比:', info.devicePixelRatio);
console.log('iOS 设备屏幕宽度:', info.screenWidth);
console.log('iOS 设备屏幕高度:', info.screenHeight);
console.log('iOS 设备方向:', info.deviceOrientation);
// uni.showModal({
// title: '提示',
// content: info.deviceId,
// success(res) {
// if (res.confirm) {
// console.log('用户点击了确定');
// } else if (res.cancel) {
// console.log('用户点击了取消');
// }
// }
// });
},
async getcheckImg(){
// 验证图片信息
const {data: res} = await uni.$http.get('/captchaImage');
if (res&&res.img&&res.uuid) {
this.checkimg= 'data:image/png;base64,'+res.img;
this.form.uuid=res.uuid;
this.$forceUpdate();
}
},
// 判断密码是否合规
mmhandleBlur(e){
console.log(e)
if(e.detail.value&&e.detail.value.length<6){
// if(e.detail.value&&!this.checkMM(e.detail.value)){
// '密码必须是由6-20位长度的字母、数字组成请核实',
// '密码必须是8-20位字符至少包括大写字母、小写字母、数字、特殊符号中3种以上请核实'
this.$refs.uToast.show({
title: "密码必须是6-20位字符至少包括英文、数字、特殊符号中2种以上请核实",
type: 'error',
duration: 2000
});
}
},
// 校验密码
checkMM(mm) {
// if (!(/^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{6,20}$/.test(mm))) {
// // if (!(/((^(?=.*[a-z])(?=.*[A-Z])(?=.*[^A-Za-z0-9])[\da-zA-Z_\W]{8,20}$)|(^(?=.*\d)(?=.*[A-Z])(?=.*[^A-Za-z0-9])[\da-zA-Z_\W]{8,20}$)|(^(?=.*\d)(?=.*[a-z])(?=.*[^A-Za-z0-9])[\da-zA-Z_\W]{8,20}$)|(^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[\da-zA-Z_\W]{8,20}$))/.test(mm))) {
// return false;
// }
return true;
},
// 判断手机号码是否合法
zhhandleBlur(e){
console.log(e)
// 判断手机号码是否合法
if(!this.$u.test.mobile(e.detail.value)){
this.$refs.uToast.show({
title: '手机号码输入错误,请核实!',
type: 'warning',
duration: 2000
});
}
},
async getcode(){
uni.showLoading({
title: '验证码请求中...'
});
const {data: res} = await uni.$http.get('/captchaImage');
console.log(res);
if(res&&res.img&&res.uuid){
this.checkimg= 'data:image/png;base64,'+res.img;
this.form.uuid=res.uuid;
this.$forceUpdate();
}
else{
this.$refs.uToast.show({
title: "验证码请求失败!请重试!",
type: 'error',
duration: 2000
});
}
},
// 校验手机号码
checkPhone(phone) {
if (!(/^1[3456789]\d{9}$/.test(phone))) {
return false;
}
return true;
},
//地图选择地址
chooseLocation(){
var _this=this;
uni.chooseLocation({
success: (data)=> {
console.log(data)
_this.gcj02="1";
var adrname = ((data.name===undefined||data.name===null)?'':data.name);
_this.address = ((data.address===undefined||data.address===null)?'':data.address) + adrname;
_this.latitude=data.latitude;
_this.longitude=data.longitude;
_this.form.position=_this.latitude+','+_this.longitude;
_this.$forceUpdate();
},
fail:(Error)=> {
_this.gcj02="1";
_this.address = "";
_this.latitude="";
_this.longitude="";
_this.form.position="";
_this.$forceUpdate();
}
});
},
login() {
// 测试
// myCache('token', "12345678");
// myCache('user', {
// phonenumber:"测试人",
// userid:"1",
// userphone:"18900000001",
// avatar:"/static/image/girl.jpg"
// });
// this.$refs.uToast.show({
// title: '登录成功',
// type: 'success',
// isTab: true,
// duration: 2000,
// url: '/pages/index/index'
// });
// 正式
this.loginpwdDo();
},
// 密码登录
async loginpwdDo(){
// 手机号码 密码是否输入
if(!this.form.phonenumber){
this.$refs.uToast.show({
title: "请输入手机号码!",
type: 'warn',
duration: 2000
});
return false;
}
if(!this.form.password){
this.$refs.uToast.show({
title: "请输入密码!",
type: 'warn',
duration: 2000
});
return false;
}
if(!this.form.code){
this.$refs.uToast.show({
title: "请输入验证码!",
type: 'warn',
duration: 2000
});
return false;
}
uni.setStorageSync('iftoken', "1");
uni.showLoading({
title: '正在登录...'
});
const {data: res} = await uni.$http.post('/api/login',this.form);
console.log(res);
if(res&&res.code=="200"){
uni.setStorageSync('token', res.token);
// 保存用户登录信息
this.getUserInfo();
this.$refs.uToast.show({
title: '登录成功',
type: 'success',
isTab: true,
duration: 2000,
url: '/pages/index/index'
});
}
else{
if(res.msg=='验证码错误'){
// 重新获取验证码
this.getcode();
}
// uni.setStorageSync('token', this.form.uuid);
this.$refs.uToast.show({
title: res.msg?res.msg: "此账号登录失败!请重试!",
type: 'error',
duration: 2000
});
}
},
// 验证码登录
async getUserInfo(){
var _this=this;
const {data: res} = await uni.$http.get('/api/getInfo');
console.log(res);
if(res&&res.appLoginUser){
var user=res.appLoginUser;
myCache('user',{
userid:user.userId,
nickName:user.nickName,
username:user.userName,
userphone:user.phoneNumber,
avatar:user.avatar
});
myCache('userInfo',user);
myCache('phone',user.phoneNumber);
}
if(res&&res.visitStore){
var shop=res.visitStore;
myCache('shop',shop);
myCache('myshop',shop.storeName);
myCache('myshopid',shop.id);
var shoplist=[shop]
myCache('shoplist',shoplist);
}
},
async getUserShopList(){
var _this=this;
const {data: res} = await uni.$http.get('/api/getStoreList');
console.log(res);
if(res&&res.appLoginUser){
var user=res.appLoginUser;
myCache('user',{
userid:user.userId,
nickName:user.nickName,
username:user.userName,
userphone:user.phoneNumber,
avatar:user.avatar
});
myCache('userInfo',user);
myCache('phone',user.phoneNumber);
}
if(res&&res.visitStore){
var shop=res.visitStore;
myCache('shop',shop);
myCache('myshop',shop.storeName);
myCache('myshopid',shop.id);
var shoplist=[shop]
myCache('shoplist',shoplist);
}
},
}
}
</script>
<style>
</style>
<style lang="scss" scoped>
::v-deep .u-checkbox__label{
color:#bdbfc1
}
::v-deep .uni-easyinput__content-input {
width: 500rpx;
height: 80rpx;
background: #fff;
box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(137, 150, 95, 0.3);
border-radius: 254rpx 254rpx 254rpx 254rpx;
}
::v-deep .uni-easyinput__content{
border-radius: 254rpx 254rpx 254rpx 254rpx;
text-indent: 20rpx;
}
.lttxt{
font-size: 30rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color:#333333;
line-height: 38rpx;
height: 45rpx;
margin: 30rpx auto;
text-align: center;
}
.timetxt{
position: absolute;
top:20rpx;
right: 28rpx;
display: block;
font-size: 36rpx;
color:#89965f;
line-height: 38rpx;
height: 45rpx;
margin-left: 50rpx;
}
.checkimg{
position: absolute;
top:14rpx;
right: 130rpx;
width: 150rpx;
height: 50rpx;
}
.codebtn{
position: absolute;
top:12rpx;
right: 20rpx;
display: block;
color:#89965f;
height: 60rpx;
line-height: 60rpx;
font-size: 26rpx;
padding: 0 10rpx;
}
.regcon{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 36rpx;
.regtxt{
color:#89965f;
font-size: 28rpx;
display: flex;
align-items: center;
}
.regtxtl{
color:#89965f;
width: 2rpx;
height: 26rpx;
font-size: 26rpx;
margin-left: 10rpx;
margin-right: 10rpx;
border-right: 1rpx solid #89965f;
display: flex;
align-items: center;
}
.regtxtr{
color:#89965f;
height: 28rpx;
font-size: 28rpx;
display: flex;
align-items: center;
margin-right: 10rpx;
}
}
.loginno{
display: block;
background-color:rgba(137, 150, 95, 0.3);
width: 100%;
line-height: 2;
margin-top: 30rpx;
border-radius:12rpx;
font-size: 30rpx;
text-align: center;
box-sizing:border-box;
}
.logincla{
display: block;
background-color:#00A99A;
width: 100%;
line-height: 2;
}
.loginBack {
color: #fff;
height: 100vh;
padding:60rpx 50rpx 200rpx 50rpx;
width: 100%;
overflow: hidden;
background-size: 100% 100%;
background-image: url('../../static/image/lgbg.jpg');
.inpuIcon {
width: 46rpx;
height: 46rpx;
margin-right: 30rpx;
}
.formregion {
width: 100%;
padding: 30px 50rpx;
background-color: #fff;
border-radius: 10px;
margin-top: 20rpx;
position: relative;
display: block;
overflow: hidden;
.logo{
position: absolute;
top: -20rpx;
left: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.define {
width: 120rpx;
height: 120rpx;
}
}
}
.welcomeLogin {
font-size: 30rpx;
letter-spacing: 2rpx;
padding: 20rpx 0 10rpx;
margin: 0 auto;
width: 100%;
}
.tip{
font-weight: 600;
font-size: 42rpx;
letter-spacing: 4rpx;
padding: 0 0 40rpx 0;
}
</style>