feat(login): 优化登录逻辑及环境配置展示
- 修改环境变量配置,新增 VUE_APP_ENV_NAME 用于区分环境名称显示 - 调整登录接口请求,pdaLogin与pdaLogout改为相对路径调用 - 登录页面新增环境名称显示,区分不同环境使用状态 - 登录流程支持开发环境动态选择服务器地址,支持自定义地址输入及存储 - 增加请求和响应拦截器日志输出,方便调试接口请求问题 - 优化登录表单输入清除按钮显示与密码显示切换交互体验 - 修复和改善登录相关本地存储,自动保存账号密码和服务器地址 - 调整manifest包配置,禁用app-plus子包 - 格式化和规范登录页面样式调整,提升页面结构与样式一致性
This commit is contained in:
parent
8a9bb09c18
commit
7043a49206
1
.env
1
.env
@ -1,4 +1,5 @@
|
||||
NODE_ENV = development
|
||||
VUE_APP_ENV_NAME = 默认环境
|
||||
VUE_APP_UPGRADE_NAME = erp_pda
|
||||
VUE_APP_PRODUCTION_API_URL = https://www.haotopai.com/hcscm/mes/server/pda/v1
|
||||
VUE_APP_DEV_API_URL = https://www.haotopai.com/hcscm/mes/server/pda/v1
|
||||
|
||||
1
.env.mes
1
.env.mes
@ -1,4 +1,5 @@
|
||||
NODE_ENV = development
|
||||
VUE_APP_ENV_NAME = mes环境
|
||||
VUE_APP_UPGRADE_NAME = erp_pda
|
||||
VUE_APP_PRODUCTION_API_URL = https://www.haotopai.com/hcscm/mes/server/pda/v1
|
||||
VUE_APP_DEV_API_URL = https://www.haotopai.com/hcscm/mes/server/pda/v1
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
NODE_ENV = development
|
||||
VUE_APP_ENV_NAME = zhisheng环境
|
||||
VUE_APP_UPGRADE_NAME = erp_pda_pre
|
||||
VUE_APP_PRODUCTION_API_URL = https://hcscmpre.zzfzyc.com/hcscm/pda/v1
|
||||
VUE_APP_DEV_API_URL = https://hcscmpre.zzfzyc.com/hcscm/pda/v1
|
||||
|
||||
@ -16,8 +16,8 @@ const install = (Vue, vm) => {
|
||||
getUserInfo: (params = {}) => vm.$u.get(config.productionApiUrl+'/mobile/user/getUserInfo', params),
|
||||
login: (params = {}) => vm.$u.post(config.productionApiUrl+'/mobile/login/loginByPassword', params),
|
||||
// PDA登录接口
|
||||
pdaLogin: (params = {}) => vm.$u.postJson(config.productionApiUrl+'/login', params),
|
||||
pdaLogout: (params = {}) => vm.$u.postJson(config.productionApiUrl+'/logout', params),
|
||||
pdaLogin: (params = {}) => vm.$u.postJson('/login', params),
|
||||
pdaLogout: (params = {}) => vm.$u.postJson('/logout', params),
|
||||
// 获取配布单列表
|
||||
getFpmArrangeOrderList: (params = {}) => vm.$u.get('/product/fpmArrangeOrder/getFpmArrangeOrderList', params),
|
||||
// 获取成品配布单详情
|
||||
|
||||
@ -22,6 +22,9 @@ const install = (Vue, vm) => {
|
||||
|
||||
// 请求拦截,配置Token等参数
|
||||
Vue.prototype.$u.http.interceptor.request = (req) => {
|
||||
console.log('request', req);
|
||||
console.log('baseUrl', vm.$store.state.apiurl);
|
||||
console.log('完整URL', vm.$store.state.apiurl + req.url);
|
||||
if (!req.header){
|
||||
req.header = [];
|
||||
}
|
||||
@ -42,13 +45,15 @@ const install = (Vue, vm) => {
|
||||
req.header[rememberMeHeader] = vm.vuex_remember;
|
||||
req.remember = false;
|
||||
}
|
||||
console.log('request', req);
|
||||
return req;
|
||||
}
|
||||
|
||||
// 响应拦截,判断状态码是否通过
|
||||
Vue.prototype.$u.http.interceptor.response = async (res, req) => {
|
||||
console.log('response', res);
|
||||
console.log('response statusCode', res?.statusCode);
|
||||
console.log('response data', res?.data);
|
||||
console.log('response errMsg', res?.errMsg);
|
||||
|
||||
// 处理401未授权状态码
|
||||
if (res.statusCode === 401) {
|
||||
@ -63,6 +68,7 @@ const install = (Vue, vm) => {
|
||||
});
|
||||
return false;
|
||||
}
|
||||
console.log('res',res)
|
||||
if (!(res.data)){
|
||||
vm.$u.toast('未连接到服务器')
|
||||
return Promise.reject(new Error('未连接到服务器'));
|
||||
@ -125,7 +131,7 @@ const install = (Vue, vm) => {
|
||||
|
||||
// 封装 post json 请求
|
||||
vm.$u.postJson = (url, data = {}, header = {}) => {
|
||||
console.log('header', header, url, vm.$u)
|
||||
console.log('header', header, url, vm.$store.state.apiurl)
|
||||
header['content-type'] = 'application/json';
|
||||
return vm.$u.http.request({
|
||||
url,
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
"transformPx" : false,
|
||||
"app-plus" : {
|
||||
"optimization" : {
|
||||
"subPackages" : true
|
||||
"subPackages" : false
|
||||
},
|
||||
"safearea" : {
|
||||
"bottom" : {
|
||||
|
||||
@ -20,28 +20,22 @@
|
||||
</view>
|
||||
<view class="list-call" v-if="selectedApiUrl === 'custom'">
|
||||
<!-- 当选择自定义时显示输入框 -->
|
||||
<input
|
||||
class="u-input"
|
||||
type="text"
|
||||
v-model="customApiUrl"
|
||||
maxlength="100"
|
||||
placeholder="请输入服务器地址"
|
||||
@blur="handleBlurInputUrl"
|
||||
/>
|
||||
<input class="u-input" type="text" v-model="customApiUrl" maxlength="100" placeholder="请输入服务器地址"
|
||||
@blur="handleBlurInputUrl" />
|
||||
</view>
|
||||
</template>
|
||||
<view class="list-call">
|
||||
<view class="iconfont icon-avatar" style="font-size: 22px;color:#5473e8;"></view>
|
||||
<input class="u-input" type="text" v-model="login.username" maxlength="32"
|
||||
:placeholder="$t('login.placeholderAccount')" value="admin" @input="clearInput" />
|
||||
<u-icon :size="50" v-if="showClearIcon" name="close-circle-fill" color="#c0c4cc" class="u-clear-icon" @click="clearIcon"/>
|
||||
<u-icon :size="50" v-if="showClearIcon" name="close-circle-fill" color="#c0c4cc" class="u-clear-icon"
|
||||
@click="clearIcon" />
|
||||
</view>
|
||||
<view class="list-call">
|
||||
<view class="iconfont icon-key" style="font-size: 22px;color:#5473e8;"></view>
|
||||
<input class="u-input" type="text" v-model="login.password" maxlength="32"
|
||||
:placeholder="$t('login.placeholderPassword')" :password="!showPassword" value="admin123" />
|
||||
<image class="u-icon-right"
|
||||
:src="'/static/aidex/login/eye_' + (showPassword ? 'open' : 'close') + '.png'"
|
||||
<image class="u-icon-right" :src="'/static/aidex/login/eye_' + (showPassword ? 'open' : 'close') + '.png'"
|
||||
@click="showPass()"></image>
|
||||
</view>
|
||||
<div style="padding:15rpx 0 0;">
|
||||
@ -53,7 +47,8 @@
|
||||
<u-checkbox v-model="remember" active-color="#5473e8">{{ $t('login.autoLogin') }}</u-checkbox>
|
||||
</div>
|
||||
</view>
|
||||
<button class="button" :disabled="login.loading" @click="submit('1')" :loading="login.loading"><text>登录</text></button>
|
||||
<button class="button" :disabled="login.loading" @click="submit('1')"
|
||||
:loading="login.loading"><text>登录</text></button>
|
||||
<!-- <view class="login-bottom-box">
|
||||
<u-divider> 更多登录方式 </u-divider>
|
||||
<view class="oauth2">
|
||||
@ -110,17 +105,12 @@
|
||||
<!-- </view>-->
|
||||
<!-- </view>-->
|
||||
<!-- </div>-->
|
||||
<u-picker
|
||||
v-model="showApiUrlPicker"
|
||||
mode="selector"
|
||||
:range="apiUrlList"
|
||||
range-key="label"
|
||||
@confirm="onApiUrlConfirm"
|
||||
@cancel="showApiUrlPicker = false"
|
||||
></u-picker>
|
||||
<u-picker v-model="showApiUrlPicker" mode="selector" :range="apiUrlList" range-key="label"
|
||||
@confirm="onApiUrlConfirm" @cancel="showApiUrlPicker = false"></u-picker>
|
||||
<!-- 版本信息显示 -->
|
||||
<view class="version-info">
|
||||
<text class="version-text">版本: {{ appVersion }}</text>
|
||||
<text class="env-text" v-if="envName">({{ envName }})</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -170,6 +160,9 @@
|
||||
computed: {
|
||||
appVersion() {
|
||||
return manifest.versionName;
|
||||
},
|
||||
envName() {
|
||||
return process.env.VUE_APP_ENV_NAME || '';
|
||||
}
|
||||
},
|
||||
|
||||
@ -444,6 +437,7 @@
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import 'index.scss';
|
||||
|
||||
.server-selector {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -451,14 +445,17 @@
|
||||
padding: 10rpx 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.list-call {
|
||||
.u-select {
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.u-input {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.haotoplogo {
|
||||
width: 300rpx;
|
||||
height: 150rpx;
|
||||
@ -466,6 +463,7 @@
|
||||
// max-height: 5%;
|
||||
margin: 10rpx auto 10rpx auto;
|
||||
}
|
||||
|
||||
.logoimg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -537,6 +535,7 @@
|
||||
width: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.u-tabs {
|
||||
padding: 0 70rpx;
|
||||
}
|
||||
@ -544,11 +543,20 @@
|
||||
.version-info {
|
||||
text-align: center;
|
||||
margin-top: 30rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.version-text {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
|
||||
.env-text {
|
||||
font-size: 24rpx;
|
||||
color: #5473e8;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -9,12 +9,14 @@ module.exports = {
|
||||
console.log('VUE_APP_UPGRADE_NAME',JSON.stringify(process.env.VUE_APP_UPGRADE_NAME))
|
||||
console.log('VUE_APP_PRODUCTION_API_URL',JSON.stringify(process.env.VUE_APP_PRODUCTION_API_URL))
|
||||
console.log('VUE_APP_DEV_API_URL',JSON.stringify(process.env.VUE_APP_DEV_API_URL))
|
||||
console.log('VUE_APP_ENV_NAME',JSON.stringify(process.env.VUE_APP_ENV_NAME))
|
||||
Object.assign(definitions[0], {
|
||||
'process.env': {
|
||||
...definitions[0]['process.env'],
|
||||
VUE_APP_UPGRADE_NAME: JSON.stringify(process.env.VUE_APP_UPGRADE_NAME),
|
||||
VUE_APP_PRODUCTION_API_URL: JSON.stringify(process.env.VUE_APP_PRODUCTION_API_URL),
|
||||
VUE_APP_DEV_API_URL: JSON.stringify(process.env.VUE_APP_DEV_API_URL),
|
||||
VUE_APP_ENV_NAME: JSON.stringify(process.env.VUE_APP_ENV_NAME),
|
||||
}
|
||||
})
|
||||
return definitions
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user