Files
taimed/pages/user/login.vue
liuyuan a26581fd81 提交
2025-06-10 17:52:06 +08:00

884 lines
19 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view style="background-color: #fff">
<view class="logo_bg">
<text class="">您好<br />欢迎来到 太湖云医</text>
<image src="@/static/icon/login_icon_1.png" mode="aspectFit" class="icon_hua_1"></image>
<image src="@/static/icon/login_icon_2.png" mode="aspectFit" class="icon_hua_2"></image>
</view>
<view class="register_page">
<view class="login_method">
<view class="title" :class="{ active: type == 2000 }" v-if="type == 2000">验证码登录/注册</view>
<view class="title" :class="{ active: type == 1000 }" v-if="type == 1000">密码登录</view>
</view>
<!-- 验证码登录 -->
<view v-if="type == 2000">
<view class="flexbox" style="margin-top: 50rpx">
<view class="input_tit emaPho" style="margin-top: 0; margin-right: 20rpx">
<view @click="changeBrand(3000)" :class="{ active: brand == 3000 }">手机号</view>
<span>/</span>
<view @click="changeBrand(4000)" :class="{ active: brand == 4000 }">邮箱</view>
</view>
</view>
<!-- 带区号手机号 -->
<view class="flexbox" v-if="brand == 3000" style="margin: 36rpx 0; justify-content: space-between">
<view class="quhao">
<uni-data-select class="myselect" placeholder="请选择区号" v-model="loginForm.quCode"
:localdata="quCodeList" style="height: 30rpx !important"
@change="quChange"></uni-data-select>
</view>
<view class="triangle borderBottom phoneNumberInput"
:clasfs="[type == 1000 ? 'left_triangle' : 'right_triangle']">
<u--input class="form_input_box" type="number" v-model="loginForm.phone"
placeholder="请输入您的手机号" placeholder-class="grey" />
</view>
</view>
<view class="input_box" v-if="brand == 4000">
<u--input class="form_input_box" v-model="loginForm.email" placeholder="请输入您的邮箱"
placeholder-class="grey"/>
</view>
<view class="input_tit">验证码</view>
<view class="input_box">
<u--input class="form_input_box" v-model="loginForm.code" placeholder="请输入您的验证码"
placeholder-class="grey" maxlength="6" @confirm="onSubmit" />
<button class="active" @click="onSetCode">{{ codeText }}</button>
</view>
</view>
<!-- 密码登录 -->
<view v-if="type == 1000">
<!-- 手机号/邮箱 -->
<view class="input_tit" style="margin-top: 80rpx">手机号 / 邮箱</view>
<view class="input_box">
<u--input class="form_input_box" v-model="loginForm.phoneEmail" placeholder="请输入您的手机号或者邮箱"
placeholder-class="grey" />
</view>
<view class="input_tit">密码</view>
<view class="input_box">
<u--input v-model="loginForm.password" :password="!isSee" placeholder="请输入密码"
placeholder-class="grey" @confirm="onSubmit" class="form_input_box">
</u--input><u-icon class="active" :name="isSee ? 'eye-fill' : 'eye-off'" @click="isSee = !isSee"
:color="isSee ? '#5188e5' : '#b0b0b0'" size="22"
style="display: block; margin-right: 10rpx"></u-icon>
</view>
</view>
<view class="protocol_box">
<view class="select" :class="{ active: agree }" @click="agree = !agree"></view>
我已同意
<span class="highlight" @click="yhxyShow = true">用户协议</span>
<span class="highlight" @click="yszcShow = true">隐私协议</span>
</view>
<view class="btn_box">
<button @click="onSubmit"> </button>
</view>
<view class="loginHelp" v-if="submitClickNum > 0">
<text>登录遇到问题</text><text class="link"
@click="onPageJump('/pages/user/workOrder', 'login')">去反馈问题</text>
</view>
<view class="qie_huan" style="display: flex; justify-content: center">
<view style="width: 30%" @click="changeType(1000)" v-if="type == 2000">密码登录</view>
<view style="width: 50%; display: flex; justify-content: space-between" v-if="type == 1000">
<text @click="changeType(2000)">验证码登录</text>
<text v-if="type == 1000" @click="onPageJump('/pages/user/forget')">忘记密码</text>
</view>
</view>
<view class="youKeL" v-if="$platform=='ios'">
<view @click="onPageJump('/pages/visitor/index')">免登录体验</view>
</view>
<u-popup :show="yhxyShow" title="用户协议" :round="10" @close="yhxyShow = false">
<view class="tanchu">
<view class="dp_title" v-html="yhxyText.title"></view>
<view class="dp_content" v-html="yhxyText.content"></view>
</view>
</u-popup>
<u-popup :show="yszcShow" title="隐私政策" :round="10" @close="yszcShow = false">
<view class="tanchu">
<view class="dp_title" v-html="yszcText.title"></view>
<view class="dp_content" v-html="yszcText.content"></view>
</view>
</u-popup>
</view>
</view>
</template>
<script>
var clear;
import { mapState, mapMutations } from "vuex";
import socket from "@/config/socket";
export default {
data() {
return {
appForm: {
loginName: 18834844847,
loginPwd: "Zy123456",
},
passShowIcon: require("@/static/icon/ic_logon_display.png"),
passHideIcon: require("@/static/icon/ic_logon_hide.png"),
type: 2000,
brand: 3000,
isSee: false,
//验证码
codeText: "获取验证码",
//验证码已发
readonly: false,
agree: false,
isIos: true,
system: 13,
clearTime: null,
HealthOpen: false,
health_phone: "",
health_password: "",
isSee_H: false,
yhxyShow: false,
yszcShow: false,
yhxyText: {
title: "",
content: "",
},
yszcText: {
title: "",
content: ""
},
quShow: false,
quCodeList: [], // 国家区域码
loginForm: {},
urlList: {
registerOrLogin: "common/user/registerOrLogin", //验证码登录
passwordLogin: "common/user/login", //密码登录
sendcode: "common/user/sms/sendcode", //密码登录
sendEmailcode: "common/user/getMailCaptcha", //密码登录
apiLogin: "app/phone.do?loginV2",
},
submitClickNum: 0, //登录按钮点击次数
};
},
//第一次加载
onLoad(e) {
// #ifdef APP-PLUS
this.isIos = plus.os.name == "iOS";
let systemInfo = uni.getSystemInfoSync();
this.system = parseFloat(systemInfo["system"].replace(/[a-zA-Z]/g, ""));
this.type = 2000;
this.brand = 3000;
this.loginForm = {};
// #endif
},
created() {
this.getCountyCode();
},
//页面显示
onShow() {
this.getSettlement(113, "yszcText");
this.getSettlement(112, "yhxyText");
},
//方法
methods: {
...mapMutations(["setUserInfo"]),
...mapMutations(["setHealthMes"]),
changeType(val) {
this.loginForm = {};
this.type = 2000;
this.type = val;
this.isSee = false;
this.agree = false;
if (val == 2000) {
this.loginForm.quCode = this.quCodeList[0].value;
}
},
changeBrand(val) {
this.loginForm = {};
this.loginForm.quCode = this.quCodeList[0].value;
this.brand = val;
},
// 获取国家区域编码
getCountyCode() {
this.$http
.request({
url: "book/baseArea/getAllBaseArea",
method: "POST",
data: {},
header: {
"Content-Type": "application/json",
},
})
.then((res) => {
if (res.code == 0 && res.baseAreas.length > 0) {
this.quCodeList = res.baseAreas.map((item) => {
let obj = {
text: item.title + " (+" + item.code + ")",
value: item.code,
};
return obj;
});
this.loginForm.quCode = this.quCodeList[0].value;
this.$forceUpdate();
} else {
this.quCodeList = [];
}
})
.catch((e) => {
console.log(e, "e");
});
},
// 获取协议内容
async getSettlement(id, type) {
//隐私策略
var data = await this.$commonJS.getAgreement(id);
if (data.content) {
data.content = data.content.replace(
/<h5>/g,
'<view style="font-weight: bold;font-size: 32rpx;margin-top: 20rpx;margin-bottom: 20rpx;">'
);
data.content = data.content.replace(/<\/h5>/g, "</view>");
}
if (type == "yszcText") {
this.yszcText = data;
}
if (type == "yhxyText") {
this.yhxyText = data;
}
},
quChange(e) {
console.log(e, "e");
},
onPageJump(url, name) {
if(name){
uni.navigateTo({
url: `${url}?name=${name}`
});
}else{
uni.navigateTo({
url: url
});
}
},
//验证码按钮文字状态
getCodeState() {
clear && clearInterval(clear);
const _this = this;
this.readonly = true;
this.codeText = "60S";
var s = 60;
clear = setInterval(() => {
s--;
_this.codeText = s + "S";
if (s <= 0) {
clearInterval(clear);
_this.codeText = "获取验证码";
_this.readonly = false;
}
}, 1000);
},
// 发送验证码
onSetCode() {
if (this.readonly) {
return;
}
if (!this.agree) {
uni.showToast({
title: "请先同意《用户协议》和《隐私协议》",
icon: "none",
});
return;
}
if (this.brand == 3000) {
if (!this.loginForm.phone) {
uni.showToast({
title: "请输入手机号",
icon: "none",
});
return;
}
if (this.loginForm.quCode == null || this.loginForm.quCode == 86) {
// 如果没选择国家code默认是中国大陆
if (!this.$base.phoneRegular.test(this.loginForm.phone)) {
this.submitClickNum += 1
uni.showToast({
title: "手机格式不正确",
icon: "none",
});
return;
}
}
this.$http
.post(this.urlList.sendcode, {
phone: this.loginForm.phone,
areaCode: this.loginForm.quCode,
type: 2000,
})
.then((res) => {
uni.showToast({
title: "验证码发送成功",
icon: "none",
});
this.getCodeState();
});
} else {
if (!this.loginForm.email) {
uni.showToast({
title: "请输入邮箱",
icon: "none",
});
return;
}
if (!this.$base.mailRegular.test(this.loginForm.email)) {
uni.showToast({
title: "邮箱格式不正确",
icon: "none",
});
return;
}
this.$http
.get(this.urlList.sendEmailcode, {
email: this.loginForm.email,
})
.then((res) => {
uni.showToast({
title: "验证码发送成功",
icon: "none",
});
this.getCodeState();
});
}
},
// 手机密码登录
async onSubmit() {
if (!this.agree) {
this.$commonJS.showToast("请先同意《用户协议》和《隐私协议》");
return;
}
let httpData = {};
if (this.type == 2000) {
if (this.brand == 3000) {
if (!this.loginForm.phone) {
uni.showToast({
title: "请输入手机号",
icon: "none",
});
return;
}
if (this.loginForm.quCode == null || this.loginForm.quCode == 86) {
if (!this.$base.phoneRegular.test(this.loginForm.phone)) {
this.submitClickNum += 1
this.$commonJS.showToast("手机格式不正确");
return;
}
}
httpData.tel = this.loginForm.phone;
} else {
if (!this.loginForm.email) {
this.$commonJS.showToast("请输入邮箱");
return;
}
if (!this.$base.mailRegular.test(this.loginForm.email)) {
this.$commonJS.showToast("邮箱格式不正确");
return;
}
httpData.tel = this.loginForm.email;
}
if (!this.loginForm.code) {
this.$commonJS.showToast("请输入验证码");
return;
}
httpData.code = this.loginForm.code;
await this.$http
.get(this.urlList.registerOrLogin, httpData)
.then(async (res) => {
this.submitClickNum = 0
res.userInfo.token = res.token.token;
await this.setUserInfo(res.userInfo);
console.log(
"res.userInfo哈哈红红火火恍恍惚惚 at line 593:",
res.token
);
uni.setStorageSync("token", res.token.token);
uni.showToast({
title: "登录成功",
});
setTimeout(() => {
uni.setStorageSync("isJump", "false");
uni.reLaunch({
url: "/pages/home/index"
});
}, 100);
}).catch(e => {
uni.showToast({
title: '登录失败',
icon: 'none'
})
this.submitClickNum += 1
});
} else {
if (!this.loginForm.phoneEmail) {
uni.showToast({
title: "请输入手机号或邮箱",
icon: "none",
});
return;
}
if (!this.loginForm.password) {
uni.showToast({
title: "请输入密码",
icon: "none",
});
return;
}
httpData.password = this.loginForm.password;
httpData.phone = this.loginForm.phoneEmail;
await this.$http
.post(this.urlList.passwordLogin, httpData)
.then(async (res) => {
this.submitClickNum = 0
res.userInfo.token = res.token.token;
await this.setUserInfo(res.userInfo);
uni.setStorageSync("token", res.token.token);
uni.showToast({
title: "登录成功",
});
setTimeout(() => {
uni.reLaunch({
url: "/pages/home/index"
});
}, 500);
}).catch(e => {
uni.showToast({
title: '登录失败',
icon: 'none'
})
this.submitClickNum += 1
});
}
},
},
};
</script>
<style lang="scss" scoped>
@import "@/static/mixin.scss";
.phoneNumberInput {
width: calc(100% - 160rpx);
// width: 100%;
height: 67rpx;
input {
font-size: 28rpx;
margin: 20rpx 0;
}
}
.borderBottom {
border-bottom: 1px solid #efeef4;
}
.flexbox {
display: flex;
}
.quhao {
height: 50rpx;
width: 290rpx;
margin: 12rpx 15rpx 0 0;
}
.myselect {
width: 240rpx;
height: 50rpx !important;
/deep/.uni-select {
font-size: 24rpx;
}
/deep/.uni-select__selector-item {
font-size: 24rpx;
}
}
.highlight {
color: $themeColor;
}
.tanchu {
padding: 40rpx 30rpx 40rpx 30rpx;
position: relative;
}
.logo_bg {
background-image: url("@/static/login_bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 25vh;
position: relative;
text {
font-size: 45upx;
line-height: 65rpx;
position: absolute;
bottom: 140rpx;
left: 45rpx;
color: #fff;
font-weight: bold;
letter-spacing: 6rpx;
}
.icon_hua_1 {
position: absolute;
bottom: 60rpx;
left: 245rpx;
width: 150rpx;
height: 150rpx;
opacity: 0.08;
}
.icon_hua_2 {
position: absolute;
bottom: 10rpx;
right: 30rpx;
width: 250rpx;
height: 250rpx;
opacity: 0.15;
}
}
.register_page {
padding: calc(var(--status-bar-height)) 50rpx 40rpx;
background-color: #fff;
min-height: 75vh;
.login_method {
justify-content: space-between;
padding: 0 96rpx;
text-align: center;
.title {
margin: 0 auto;
font-size: 40rpx;
letter-spacing: 3rpx;
color: #666;
}
}
.left_triangle {
&::before {
left: 140rpx;
}
&::after {
left: 140rpx;
}
}
.right_triangle {
&::before {
left: 470rpx;
}
&::after {
left: 470rpx;
}
}
.input_tit {
margin-top: 20rpx;
font-size: 38rpx;
font-weight: bold;
color: $themeColor;
}
.emaPho {}
.emaPho>view {
display: inline-block;
padding: 10rpx 0;
color: #888;
}
.emaPho>view.active {
color: $themeColor;
padding: 10rpx 10rpx;
border-bottom: 2px solid $themeColor;
font-weight: bold;
}
.emaPho>span {
display: inline-block;
margin: 0 30rpx;
color: #ccc;
}
.input_box {
display: flex;
align-items: center;
border-radius: 8rpx;
border-bottom: solid 2rpx #efeef4;
margin: 30rpx 0;
image {
width: 36rpx;
height: 24rpx;
}
input {
flex: 1;
font-size: 28rpx;
color: #333;
height: 70rpx;
}
.input_item {
font-size: 28rpx;
border: 0px;
flex: 1;
height: 70rpx;
width: 100%;
outline: none;
}
button {
height: 60rpx;
background-color: #f8f9fb;
font-size: 28rpx;
padding: 0 14rpx;
color: $themeColor;
line-height: 60rpx;
margin-left: 20rpx;
}
.grey {
color: #999999;
}
}
.btn_box {
margin-top: 40rpx;
button {
font-size: 32rpx;
background-color: $themeBgColor;
color: #fff;
height: 80rpx;
line-height: 80rpx;
border-radius: 50rpx;
&.active {
@include theme("btn_bg") color: #fff;
}
}
}
.password_register {
margin-top: 40rpx;
display: flex;
justify-content: space-between;
text {
font-size: 28rpx;
color: #333333;
}
}
.protocol_box {
margin-top: 60rpx;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
font-size: 30rpx;
color: #333333;
.select {
width: 35rpx;
height: 35rpx;
background-image: url("@/static/icon/ic_gender_unselected.png");
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
margin-right: 10rpx;
&.active {
background-image: url("@/static/icon/ic_agreed.png");
}
}
>text {
color: $themeColor;
}
}
}
.station {
height: 230rpx;
}
.third_party_login_box {
position: fixed;
bottom: 60rpx;
width: 100%;
left: 0;
padding: 0 30rpx;
.third_party_title {
display: flex;
align-items: center;
&:before,
&:after {
content: "";
flex: 1;
height: 2rpx;
background-color: #f5f5f5;
}
text {
font-size: 24rpx;
color: #999999;
flex-shrink: 0;
padding: 0 20rpx;
}
}
.third_party_content {
margin-top: 60rpx;
display: flex;
justify-content: center;
align-items: center;
image {
width: 80upx;
height: 80upx;
margin: 0 20rpx;
}
}
}
.popup_box {
width: 600upx;
border-radius: 10rpx;
.popup_title {
display: flex;
justify-content: center;
height: 88upx;
line-height: 88upx;
view {
align-items: center;
font-size: 30upx;
display: flex;
image {
width: 50upx;
height: 50upx;
margin: 0 20rpx 0 0;
}
}
}
.popup_content {
padding: 30rpx 40rpx;
}
.popup_footer {
display: flex;
justify-content: center;
view {
width: 45%;
flex-shrink: 0;
text-align: center;
font-size: 28upx;
color: #999;
line-height: 70upx;
margin: 0 0 30rpx 0;
}
view:last-child {
background-color: $themeColor;
color: #fff;
border-radius: 50rpx;
}
}
}
.dp_title {
font-size: 36rpx;
margin-bottom: 50rpx;
color: #555;
text-align: center;
font-weight: bold;
}
.dp_content {
max-height: 1000rpx;
overflow-y: scroll;
font-size: 28rpx;
color: #555;
line-height: 45rpx;
.dp_con1 {
font-weight: bold;
font-size: 32rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
}
}
.qie_huan {
font-size: 26rpx;
margin: 20rpx 0 0 0;
text-align: center;
}
.comTy {
font-size: 28rpx;
line-height: 46rpx;
text-align: left;
}
.youKeL {
display: flex;
justify-content: center;
margin: 60rpx 0 0 0;
font-size: 28rpx;
color: $themeColor;
view {
border: 1px solid $themeColor;
border-radius: 10rpx;
padding: 5rpx 15rpx;
}
}
.loginHelp {
border: 1px solid #f5dab1;
margin-top: 16rpx;
font-size: 26rpx;
text-align: center;
padding: 10rpx;
background-color: #fdf6ec;
border-radius: 15rpx;
.link {
color: #e6a23c;
}
}
</style>