<template>
|
<view class="wrap">
|
<view class="login-back-img"></view>
|
<!--国际化-->
|
<js-lang title="login.title" :showBtn="false"></js-lang>
|
<view
|
style="background-color: #fff;z-index:20;width:750rpx;margin-top:514rpx;padding-bottom: 70rpx;border-radius: 20rpx;">
|
<view class="logo">欢迎登录</view>
|
|
<!--用户名密码登录-->
|
<user-password />
|
|
|
<view class="chooseServer" @click="chooseServer.visible = true" v-if="env == 'production'">
|
服务器地址选择
|
</view>
|
</view>
|
<u-popup v-model="chooseServer.visible" mode="bottom">
|
<view class="chooseServer__content">
|
<u-radio-group v-model="chooseServer.type" :wrap="true">
|
<u-radio v-for="(item, index) in serverList" :key="item.type" :name="item.type">
|
<view v-if="index < 2">
|
<u-field v-model="item.url" :label="item.name" label-width="70" disabled />
|
</view>
|
<view v-else>
|
<u-field v-model="chooseServer.url" label-width="70" :label="item.name" />
|
</view>
|
</u-radio>
|
</u-radio-group>
|
<view class="button" hover-class="button-hover" @click="serverSure()">
|
<text>确认</text>
|
</view>
|
</view>
|
</u-popup>
|
|
<!-- #ifdef MP -->
|
<button class="button" @click.stop="getUserProfile" :disabled="btnLoading" :loading="btnLoading">
|
<text>{{ $t("login.vxLoginButton") }}</text>
|
</button>
|
<!-- #endif -->
|
<!-- <view class="login-bottom-box">
|
<view class="copyright">
|
江苏中天互联科技有限公司版权所有</br>Copyright ©2024.All Rights Reserved.
|
</view>
|
</view> -->
|
</view>
|
</template>
|
<script>
|
import userPassword from "./userPassword";
|
import config from '@/common/config.js';
|
|
export default {
|
components: {
|
userPassword
|
},
|
data() {
|
return {
|
env: config.env,
|
btnLoading: false,
|
chooseServer: {
|
visible: false,
|
type: 2,
|
url: ''
|
}
|
};
|
},
|
computed: {
|
serverList() {
|
return [{
|
type: 0,
|
name: '内网',
|
url: 'http://rfcable.chinaztt.cn'
|
}, {
|
type: 1,
|
name: '外网',
|
url: 'http://rfcable.chinaztt.cn:8200'
|
}, {
|
type: 2,
|
name: '其他',
|
url: ''
|
}]
|
}
|
},
|
onLoad() {
|
//已经登录 跳转到首页
|
if (this.vuex_token) {
|
uni.reLaunch({
|
url: "/pages/sys/home/index",
|
});
|
}
|
},
|
onShow() {
|
if (this.vuex_config.baseUrl === 'http://rfcable.chinaztt.cn') {
|
this.chooseServer.type = 0
|
} else if (this.vuex_config.baseUrl === 'http://rfcable.chinaztt.cn:8200') {
|
this.chooseServer.type = 1
|
} else {
|
this.chooseServer.type = 2
|
this.chooseServer.url = this.vuex_config.baseUrl
|
}
|
},
|
methods: {
|
serverSure() {
|
let baseUrl = ''
|
if (this.chooseServer.type == 0) {
|
baseUrl = 'http://rfcable.chinaztt.cn'
|
} else if (this.chooseServer.type == 1) {
|
baseUrl = 'http://rfcable.chinaztt.cn:8200'
|
} else {
|
if (this.IsURL(this.chooseServer.url)) {
|
baseUrl = this.chooseServer.url
|
} else {
|
this.$u.toast("地址输入不正确");
|
return
|
}
|
}
|
let config = this.vuex_config
|
config.baseUrl = baseUrl
|
this.$u.vuex("vuex_config", config);
|
this.$u.http.setConfig({
|
baseUrl
|
});
|
this.$u.toast("设置成功");
|
this.chooseServer.visible = false
|
},
|
IsURL(str_url) {
|
var strRegex = "^((https|http|ftp|rtsp|mms)?://)" +
|
"?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" //ftp的user@
|
+
|
"(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184
|
+
|
"|" // 允许IP和DOMAIN（域名）
|
+
|
"([0-9a-z_!~*'()-]+\.)*" // 域名- www.
|
+
|
"([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二级域名
|
+
|
"[a-z]{2,6})" // first level domain- .com or .museum
|
+
|
"(:[0-9]{1,4})?" // 端口- :80
|
+
|
"((/?)|" // a slash isn't required if there is no file name
|
+
|
"(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
|
var re = new RegExp(strRegex);
|
//re.test()
|
if (re.test(str_url)) {
|
return (true);
|
} else {
|
return (false);
|
}
|
},
|
getUserProfile() {
|
this.btnLoading = true;
|
//获取code，然后调用微信登录接口判断是否登录 401则跳转到绑定页面
|
var tmp = this;
|
uni.login({
|
provider: "weixin",
|
success: function (res) {
|
console.log("code", res.code);
|
|
let grant_type = "mobile";
|
let code = res.code;
|
|
tmp.$u.api
|
.vxLogin({
|
grant_type,
|
code,
|
}, {
|
Authorization: "Basic c29jaWFsOnNvY2lhbA==",
|
})
|
.then((res) => {
|
tmp.btnLoading = false;
|
//提示
|
tmp.$u.toast("恭喜您，登录成功！");
|
|
// 登陆成功，存储相关信息
|
tmp.$u.vuex("vuex_token", res.access_token);
|
tmp.$u.vuex("vuex_refresh_token", res.refresh_token);
|
tmp.$u.vuex("vuex_username", res.username);
|
tmp.$u.vuex("vuex_userId", res.user_id);
|
tmp.$u.vuex("vuex_client_id", res.client_id);
|
|
//查询用户详细信息并储存
|
tmp.$u.api.user.getUserInfo().then((res) => {
|
console.log("获取用户信息:", res);
|
tmp.$u.vuex("vuex_user", res.data.sysUser);
|
});
|
|
//跳转页面
|
setTimeout(() => {
|
uni.reLaunch({
|
url: "/pages/sys/home/index",
|
});
|
}, 500);
|
})
|
.catch((e) => {
|
tmp.btnLoading = false;
|
if (e.statusCode === 401 || e.message === "用户不存在") {
|
console.log(
|
"用户未绑定，请使用 sys_user 表存在的手机号进行绑定"
|
);
|
tmp.$u.toast(
|
"用户未绑定，请使用 sys_user 表存在的手机号进行绑定"
|
);
|
uni.reLaunch({
|
url: "/pages/sys/login/bindUser",
|
});
|
console.log("页面跳转...");
|
}
|
});
|
},
|
});
|
},
|
},
|
};
|
</script>
|
<style lang="scss">
|
@import "index.scss";
|
|
.login-back-img {
|
background-image: url('~@/static/custom/login/img_bg.png');
|
background-size: 100% auto;
|
background-repeat: no-repeat;
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 750rpx;
|
height: 540rpx;
|
}
|
|
|
.logo {
|
width: 90%;
|
font-size: 48rpx;
|
color: #333333;
|
margin: 50rpx auto 0;
|
margin-left: 80rpx;
|
text-align: left;
|
font-weight: bold;
|
}
|
|
.list-call-icon {
|
color: #ff0000;
|
}
|
|
.currentPhone-box {
|
text-align: center;
|
padding: 40rpx 80rpx;
|
|
.number-text {
|
color: #000000;
|
font-size: 60rpx;
|
}
|
|
.other-text {
|
color: #999999;
|
font-size: 26rpx;
|
padding: 20rpx 0;
|
}
|
|
.u-btn {
|
margin: 30rpx auto;
|
}
|
|
.u-hairline-border {
|
border: 1px solid #fff;
|
}
|
}
|
|
|
|
.register {
|
display: inline-block;
|
color: #497bff;
|
height: 40rpx;
|
line-height: 40rpx;
|
font-size: 28rpx;
|
float: right;
|
margin-top: 6rpx;
|
}
|
|
.register-link {
|
float: right;
|
padding: 0 16rpx;
|
}
|
|
.reg-link {
|
display: inline-block;
|
color: #497bff;
|
}
|
|
.oauth2 {
|
display: flex;
|
flex-direction: row;
|
justify-content: space-around;
|
margin: 0rpx 100rpx 30rpx;
|
|
image {
|
height: 80rpx;
|
width: 80rpx;
|
}
|
}
|
|
.u-tabs {
|
padding: 0 70rpx;
|
}
|
|
.chooseServer {
|
margin: 20px 35px 20px 35px;
|
text-align: right;
|
text-decoration: underline;
|
}
|
|
.chooseServer__content {
|
padding: 20rpx 40rpx;
|
|
::v-deep .u-radio__label {
|
flex: 1;
|
}
|
}
|
</style>
|
