|
|
|
|
@ -26,22 +26,26 @@
|
|
|
|
|
<!-- 账号输入框 -->
|
|
|
|
|
<view class="account_box login_form_item">
|
|
|
|
|
<view class="form_input_box">
|
|
|
|
|
<input class="account" name="account" type="text" placeholder="请输入你的电话号码"/>
|
|
|
|
|
<input class="account" v-model="phone_number" type="text" placeholder="请输入你的电话号码"/>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="error_tip" v-if="isPhoneError">*该手机号未注册</view>
|
|
|
|
|
</view>
|
|
|
|
|
<!-- 密码输入框 -->
|
|
|
|
|
<view class="passage_box login_form_item" v-if="isPassagePage">
|
|
|
|
|
<view class="form_input_box passage_input_box">
|
|
|
|
|
<input class="passage" name="passage" :password="isOpened" type="text" placeholder="请输入你的密码"/>
|
|
|
|
|
<input class="passage" v-model="password" :password="isOpened" type="text" placeholder="请输入你的密码"/>
|
|
|
|
|
<image @click="openEyesEvent" class="eyes" :src="eyesStateIcon"></image>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="error_tip" v-if="isPassageError">*密码错误</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 验证码输入框 -->
|
|
|
|
|
<view class="captcha_box login_form_item" v-else>
|
|
|
|
|
<view class="form_input_box captcha_input_box">
|
|
|
|
|
<input class="captcha" name="captcha" type="text" placeholder="请输入你的验证码"/>
|
|
|
|
|
<input class="captcha" v-model="code" name="captcha" type="text" placeholder="请输入你的验证码"/>
|
|
|
|
|
<button class="captcha_button" @click="sendCaptchaEvent"
|
|
|
|
|
:style="{color:captchaButtonColor, backgroundColor:captchaButtonBackgroundColor}">
|
|
|
|
|
{{captchaButtonText}}
|
|
|
|
|
@ -65,13 +69,13 @@
|
|
|
|
|
<image class="goto_register" src="../../../static/login/account_login/register.png"></image>
|
|
|
|
|
</navigator>
|
|
|
|
|
<!-- 其他登录部分 -->
|
|
|
|
|
<view class="otherways_part">
|
|
|
|
|
<!-- <view class="otherways_part">
|
|
|
|
|
<image class="otherways_tips" src="../../../static/login/account_login/other_ways.png"></image>
|
|
|
|
|
<view class="two_ways">
|
|
|
|
|
<image class="qq_icon" src="../../../static/login/account_login/qq_icon.png"></image>
|
|
|
|
|
<image class="weixin_icon" src="../../../static/login/account_login/weixin_icon.png"></image>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>-->
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
@ -84,6 +88,17 @@ var codeTime = ref(0); //验证码的倒计时
|
|
|
|
|
const captchaButtonBackgroundColor = computed(() => isSendCaptcha.value ? "#ABCBFF" : "#ffffff"); //验证码按钮的背景颜色
|
|
|
|
|
const captchaButtonColor = computed(() => isSendCaptcha.value ? "#ffffff" : "#000364");//验证码按钮的字体颜色
|
|
|
|
|
const captchaButtonText = computed(() => isSendCaptcha.value ? (codeTime.value+"s后重新发送"):"发送验证码")
|
|
|
|
|
const phone_number=ref("");
|
|
|
|
|
const password=ref("");
|
|
|
|
|
const code=ref("");//发送的验证码
|
|
|
|
|
|
|
|
|
|
const which_way_to_login = ref("0"); //登录方式 使用0为密码登录 使用1为验证码登录
|
|
|
|
|
const access_token = ref("0"); //登录成功后返回的token
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const isPassagePage = ref(true); //是否是密码登录页的标志；
|
|
|
|
|
const passageWordsBottomBorder = computed(() => isPassagePage.value? "0.1rem solid #094ABC":"none"); //密码登录导航的下边框
|
|
|
|
|
@ -99,11 +114,24 @@ const isCaptchaError = ref(false);
|
|
|
|
|
//进入验证码登录页面
|
|
|
|
|
function toCaptchaEvent(){
|
|
|
|
|
isPassagePage.value = false;
|
|
|
|
|
which_way_to_login.value=1;//切换到验证码登录界面
|
|
|
|
|
}
|
|
|
|
|
//发送验证码事件
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function sendCaptchaEvent(){
|
|
|
|
|
console.log("send captcha");
|
|
|
|
|
if (codeTime.value>0){ //说明在倒计时
|
|
|
|
|
// 校验手机号是否是中国手机号
|
|
|
|
|
const isChinaPhone = /^1[3-9]\d{9}$/.test(phone_number.value);
|
|
|
|
|
if (!isChinaPhone) {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '请输入有效的中国大陆手机号',
|
|
|
|
|
icon: "none"
|
|
|
|
|
});
|
|
|
|
|
return; // 如果手机号无效，停止执行
|
|
|
|
|
}
|
|
|
|
|
if (codeTime.value>0){ //说明在倒计时
|
|
|
|
|
uni.showToast({ //弹出提示框
|
|
|
|
|
title: '不能重复获取',
|
|
|
|
|
icon:"none"
|
|
|
|
|
@ -119,41 +147,184 @@ function sendCaptchaEvent(){
|
|
|
|
|
codeTime.value = 0;
|
|
|
|
|
}
|
|
|
|
|
},1000)
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
function login(){
|
|
|
|
|
|
|
|
|
|
// 获取后端服务器地址
|
|
|
|
|
const serverAddress = app.globalData.fit_journey_login_address + '/phone_code_register/getPhoneCode';
|
|
|
|
|
console.log(String(phoneNumber.value));
|
|
|
|
|
// 发送请求到后端
|
|
|
|
|
}
|
|
|
|
|
//这里向后端执行请求
|
|
|
|
|
const app = getApp();
|
|
|
|
|
// 向后端发送请求
|
|
|
|
|
uni.request({
|
|
|
|
|
url: serverAddress,
|
|
|
|
|
url: app.globalData.fit_journey_login_address + '/phone_code_register/getPhoneCode',
|
|
|
|
|
method: 'POST',
|
|
|
|
|
header: {
|
|
|
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
|
|
|
'content-type': 'application/x-www-form-urlencoded',
|
|
|
|
|
},
|
|
|
|
|
data: {
|
|
|
|
|
phone: phoneNumber.value
|
|
|
|
|
phone:String(phone_number.value)
|
|
|
|
|
},
|
|
|
|
|
success: (res) => {
|
|
|
|
|
console.log(res.data);
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '发送验证码成功，请注意查收~',
|
|
|
|
|
icon: "none"
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
fail: (err) => {
|
|
|
|
|
console.log("请求失败", err);
|
|
|
|
|
error: (res) => {
|
|
|
|
|
console.log("请求失败！请求数据是", res);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function login() {
|
|
|
|
|
console.log(which_way_to_login.value);
|
|
|
|
|
if (which_way_to_login.value === 0) { //密码登录
|
|
|
|
|
|
|
|
|
|
console.log("这里开始运行了");
|
|
|
|
|
// 获取后端服务器地址
|
|
|
|
|
const serverAddress = app.globalData.fit_journey_login_address + '/AccountLogin/PhonePasswordLogin';
|
|
|
|
|
console.log("后端服务器的地址是" + serverAddress);
|
|
|
|
|
console.log("发送的账号是" + String(phone_number.value));
|
|
|
|
|
console.log("发送的密码是" + String(password.value));
|
|
|
|
|
if(phone_number.value==null||code.value==null){
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '手机号和密码不能为空',
|
|
|
|
|
icon: "none"
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// 向后端发送请求
|
|
|
|
|
uni.request({
|
|
|
|
|
url: serverAddress,
|
|
|
|
|
method: 'POST',
|
|
|
|
|
header: {
|
|
|
|
|
'content-type': 'application/x-www-form-urlencoded',
|
|
|
|
|
},
|
|
|
|
|
data: {
|
|
|
|
|
phone: String(phone_number.value),
|
|
|
|
|
password: String(password.value)
|
|
|
|
|
},
|
|
|
|
|
success: (res) => {
|
|
|
|
|
if (res.statusCode === 500) {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '账号或密码错误',
|
|
|
|
|
icon: "none"
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '登录成功',
|
|
|
|
|
icon: "none"
|
|
|
|
|
});
|
|
|
|
|
access_token.value = res.data.data.token;
|
|
|
|
|
console.log("登录成功!从后端收集的token是：", access_token.value);
|
|
|
|
|
// 存储 token 到本地
|
|
|
|
|
uni.setStorage({
|
|
|
|
|
key: 'access_token', // 本地存储的键名
|
|
|
|
|
data: access_token.value, // 存储的值
|
|
|
|
|
success: () => {
|
|
|
|
|
console.log("Token 已存储到本地！");
|
|
|
|
|
},
|
|
|
|
|
fail: () => {
|
|
|
|
|
console.error("Token 存储失败！");
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
console.log(access_token.value);
|
|
|
|
|
console.log("登录成功!从后端收集的token是：", uni.getStorageSync('access_token'));
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url: '/pages/information/sex/sex'//登录成功后跳转的页面
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
error: (res) => {
|
|
|
|
|
console.log("请求失败！请求数据是", res);
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '登录失败，服务器错误',
|
|
|
|
|
icon: "none"
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
} else if (which_way_to_login.value === 1) { //验证码登录
|
|
|
|
|
console.log("验证码登录部分开始运行了");
|
|
|
|
|
// 获取后端服务器地址
|
|
|
|
|
const serverAddress = app.globalData.fit_journey_login_address + '/PhoneLogin/phoneLogin';
|
|
|
|
|
console.log("后端服务器的地址是" + serverAddress);
|
|
|
|
|
console.log("发送的账号是" + String(phone_number.value));
|
|
|
|
|
console.log("发送的code是" + String(code.value));
|
|
|
|
|
if(phone_number.value==null||code.value==null){
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '手机号和验证码不能为空',
|
|
|
|
|
icon: "none"
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// 向后端发送请求
|
|
|
|
|
uni.request({
|
|
|
|
|
url: serverAddress,
|
|
|
|
|
method: 'POST',
|
|
|
|
|
header: {
|
|
|
|
|
'content-type': 'application/x-www-form-urlencoded',
|
|
|
|
|
},
|
|
|
|
|
data: {
|
|
|
|
|
phone: String(phone_number.value),
|
|
|
|
|
code: String(code.value)
|
|
|
|
|
},
|
|
|
|
|
success: (res) => {
|
|
|
|
|
console.log(res);
|
|
|
|
|
if (res.statusCode === 500) {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '账号或密码错误,或账号没有进行注册',
|
|
|
|
|
icon: "none"
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '登录成功',
|
|
|
|
|
icon: "none"
|
|
|
|
|
});
|
|
|
|
|
access_token.value = res.data.data.token;
|
|
|
|
|
console.log("登录成功!从后端收集的token是：", access_token.value);
|
|
|
|
|
// 存储 token 到本地
|
|
|
|
|
uni.setStorage({
|
|
|
|
|
key: 'access_token', // 本地存储的键名
|
|
|
|
|
data: access_token.value, // 存储的值
|
|
|
|
|
success: () => {
|
|
|
|
|
console.log("Token 已存储到本地！");
|
|
|
|
|
},
|
|
|
|
|
fail: () => {
|
|
|
|
|
console.error("Token 存储失败！");
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
console.log(access_token.value);
|
|
|
|
|
console.log("登录成功!从后端收集的token是：", uni.getStorageSync('access_token'));
|
|
|
|
|
|
|
|
|
|
//登录成功进行界面的跳转操作
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url: '/pages/information/sex/sex'//登录成功后跳转的页面
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
error: (res) => {
|
|
|
|
|
console.log("请求失败！请求数据是", res);
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '登录失败，服务器错误',
|
|
|
|
|
icon: "none"
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//TODO:登录操作
|
|
|
|
|
console.log("login");
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url: '/pages/information/sex/sex'//登录成功后跳转的页面
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})*/
|
|
|
|
|
|
|
|
|
|
//进入密码登录页面
|
|
|
|
|
function toPassageEvent(){
|
|
|
|
|
isPassagePage.value = true;
|
|
|
|
|
which_way_to_login.value=0;
|
|
|
|
|
}
|
|
|
|
|
// 判断密码是否要明文显示
|
|
|
|
|
function openEyesEvent()
|
|
|
|
|
|
Gary
3 months ago