| | |
| | | <template> |
| | | |
| | | <view class="bodyView"> |
| | | <view> |
| | | <uni-nav-bar :fixed="true" :title="$t('page.login')" right-icon="gear" @clickRight="openSettings"></uni-nav-bar> |
| | | </view> |
| | | <view class="topView"> |
| | | <image src="/static/img/login_top.png" mode="aspectFill"> |
| | | </image> |
| | |
| | | </view> |
| | | </view> |
| | | <view class="langView"> |
| | | <!-- 语言选择下拉菜单 --> |
| | | <view class="language-dropdown"> |
| | | <view class="selected-language" @click="toggleLanguageDropdown"> |
| | | <text>{{getCurrentLanguageText()}}</text> |
| | | <uni-icons type="bottom" size="14" color="#707070"></uni-icons> |
| | | </view> |
| | | <view class="language-options" v-if="showLanguageDropdown"> |
| | | <view class="language-option" v-for="(item, index) in locales" :key="index" @click="onLocaleChange(item)"> |
| | | <text>{{item.text}}</text> |
| | | <uni-icons type="checkmarkempty" size="14" color="#007AFF" v-if="item.code == applicationLocale"></uni-icons> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | </view> |
| | | </view> |
| | | <view class="itemView"> |
| | | <button class="loadingButton" @click="onLogin()" :loading="loading">{{btnText}}</button> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 设置菜单 --> |
| | | <uni-popup ref="settingsMenu" type="bottom" background-color="#fff"> |
| | | <view class="settings-menu"> |
| | | <view class="settings-item" @click="openIpSetting"> |
| | | <text>设置IP</text> |
| | | <uni-icons type="arrowright" size="16" color="#999"></uni-icons> |
| | | </view> |
| | | <view class="settings-item" @click="openLangSetting"> |
| | | <text>国际化</text> |
| | | <uni-icons type="arrowright" size="16" color="#999"></uni-icons> |
| | | </view> |
| | | <view class="settings-cancel" @click="closeSettingsMenu">取消</view> |
| | | </view> |
| | | </uni-popup> |
| | | |
| | | <!-- IP配置弹窗 --> |
| | | <uni-popup ref="inputDialog" type="center" :mask-click="false"> |
| | | <view class="modal-container"> |
| | | <view class="modal-header"> |
| | | <text class="cuIcon-settings" style="font-size: 48rpx; color: #0081ff"></text> |
| | | <text class="modal-title">配置</text> |
| | | </view> |
| | | <view class="modal-body"> |
| | | <view class="form-item"> |
| | | <text class="form-label">IP</text> |
| | | <view class="modal-input-wrapper"> |
| | | <input class="agv-input" type="text" v-model="url.ip" /> |
| | | </view> |
| | | </view> |
| | | <view class="form-item"> |
| | | <text class="form-label">端口</text> |
| | | <view class="modal-input-wrapper"> |
| | | <input class="agv-input" type="text" v-model="url.port" /> |
| | | </view> |
| | | </view> |
| | | <view class="form-item"> |
| | | <text class="form-label">项目</text> |
| | | <view class="modal-input-wrapper"> |
| | | <input class="agv-input" type="text" v-model="url.project" /> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="modal-footer"> |
| | | <button class="modal-btn modal-btn-cancel" @click="closeIpDialog">取消</button> |
| | | <button class="modal-btn modal-btn-confirm" @click="settingConfirm">确认</button> |
| | | </view> |
| | | </view> |
| | | </uni-popup> |
| | | |
| | | <!-- 语言设置弹窗 --> |
| | | <uni-popup ref="langDialog" type="center"> |
| | | <view class="modal-container"> |
| | | <view class="modal-header"> |
| | | <text class="cuIcon-global" style="font-size: 48rpx; color: #0081ff"></text> |
| | | <text class="modal-title">选择语言</text> |
| | | </view> |
| | | <view class="modal-body"> |
| | | <view class="language-list"> |
| | | <view class="language-item" v-for="(item, index) in locales" :key="index" @click="onLocaleConfirm(item)"> |
| | | <text>{{item.text}}</text> |
| | | <uni-icons type="checkmarkempty" size="20" color="#007AFF" v-if="item.code == applicationLocale"></uni-icons> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="modal-footer"> |
| | | <button class="modal-btn modal-btn-cancel" @click="closeLangDialog" style="width: 100%; border-right: none;">取消</button> |
| | | </view> |
| | | </view> |
| | | </uni-popup> |
| | | </view> |
| | | </template> |
| | | |
| | |
| | | userName: '', |
| | | password: '', |
| | | }, |
| | | url: { |
| | | ip: '', |
| | | port: '', |
| | | project: '' |
| | | }, |
| | | baseUrl: '', |
| | | } |
| | | }, |
| | | computed:{ |
| | |
| | | this.showLanguageDropdown = !this.showLanguageDropdown; |
| | | }, |
| | | |
| | | openSettings() { |
| | | this.$refs.settingsMenu.open() |
| | | }, |
| | | openIpSetting() { |
| | | this.$refs.settingsMenu.close() |
| | | setTimeout(() => { |
| | | this.$refs.inputDialog.open() |
| | | }, 300) |
| | | }, |
| | | openLangSetting() { |
| | | this.$refs.settingsMenu.close() |
| | | setTimeout(() => { |
| | | this.$refs.langDialog.open() |
| | | }, 300) |
| | | }, |
| | | closeSettingsMenu() { |
| | | this.$refs.settingsMenu.close() |
| | | }, |
| | | closeIpDialog() { |
| | | this.$refs.inputDialog.close() |
| | | }, |
| | | closeLangDialog() { |
| | | this.$refs.langDialog.close() |
| | | }, |
| | | settingConfirm() { |
| | | this.baseUrl = "http://" + this.url.ip + ':' + this.url.port + '/' + this.url.project |
| | | uni.setStorageSync('baseUrl', this.baseUrl); |
| | | uni.setStorageSync('url', this.url); |
| | | // uni.setStorageSync('project', 'tzsk') |
| | | this.$refs.inputDialog.close() |
| | | uni.showToast({ |
| | | title: '配置已保存', |
| | | icon: 'success' |
| | | }) |
| | | }, |
| | | onLocaleConfirm(item) { |
| | | this.onLocaleChange(item) |
| | | this.$refs.langDialog.close() |
| | | }, |
| | | |
| | | // 获取当前选择的语言文本 |
| | | getCurrentLanguageText() { |
| | | const currentLocale = this.locales.find(item => item.code === this.applicationLocale); |
| | |
| | | .language-option:active { |
| | | background-color: #f5f5f5; |
| | | } |
| | | |
| | | /* Settings Menu */ |
| | | .settings-menu { |
| | | background-color: #fff; |
| | | padding: 20rpx 0; |
| | | border-radius: 20rpx 20rpx 0 0; |
| | | } |
| | | .settings-item { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding: 30rpx 40rpx; |
| | | border-bottom: 1px solid #f0f0f0; |
| | | font-size: 32rpx; |
| | | color: #333; |
| | | } |
| | | .settings-item:active { |
| | | background-color: #f5f5f5; |
| | | } |
| | | .settings-cancel { |
| | | text-align: center; |
| | | padding: 30rpx; |
| | | margin-top: 20rpx; |
| | | border-top: 10rpx solid #f8f8f8; |
| | | font-size: 32rpx; |
| | | color: #333; |
| | | } |
| | | |
| | | /* Custom Popup Styles */ |
| | | /* 弹窗容器 */ |
| | | .modal-container { |
| | | width: 600rpx; |
| | | background-color: #ffffff; |
| | | border-radius: 24rpx; |
| | | overflow: hidden; |
| | | box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.15); |
| | | } |
| | | |
| | | /* 弹窗头部 */ |
| | | .modal-header { |
| | | padding: 40rpx 30rpx 20rpx; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | background: linear-gradient(135deg, #f0f7ff 0%, #e8f4ff 100%); |
| | | } |
| | | |
| | | .modal-title { |
| | | font-size: 34rpx; |
| | | font-weight: bold; |
| | | color: #333; |
| | | margin-top: 16rpx; |
| | | } |
| | | |
| | | /* 弹窗内容 */ |
| | | .modal-body { |
| | | padding: 30rpx; |
| | | } |
| | | |
| | | .form-item { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-bottom: 24rpx; |
| | | } |
| | | |
| | | .form-item:last-child { |
| | | margin-bottom: 0; |
| | | } |
| | | |
| | | .form-label { |
| | | width: 100rpx; |
| | | font-size: 28rpx; |
| | | color: #333; |
| | | font-weight: 500; |
| | | margin-right: 20rpx; |
| | | text-align: right; |
| | | } |
| | | |
| | | /* 输入框容器 - 弹窗专用 */ |
| | | .modal-input-wrapper { |
| | | flex: 1; |
| | | background-color: #f5f7fa; |
| | | border-radius: 12rpx; |
| | | padding: 10rpx; |
| | | border: 2rpx solid #e4e7ed; |
| | | transition: border-color 0.2s; |
| | | } |
| | | |
| | | .modal-input-wrapper:focus-within { |
| | | border-color: #0081ff; |
| | | } |
| | | |
| | | .agv-input { |
| | | width: 100%; |
| | | height: 70rpx; |
| | | line-height: 70rpx; |
| | | font-size: 30rpx; |
| | | color: #333; |
| | | background-color: transparent; |
| | | } |
| | | |
| | | /* 弹窗底部按钮 */ |
| | | .modal-footer { |
| | | display: flex; |
| | | border-top: 1rpx solid #eee; |
| | | } |
| | | |
| | | .modal-btn { |
| | | flex: 1; |
| | | height: 100rpx; |
| | | line-height: 100rpx; |
| | | font-size: 32rpx; |
| | | border: none; |
| | | border-radius: 0; |
| | | background-color: #fff; |
| | | } |
| | | |
| | | .modal-btn::after { |
| | | border: none; |
| | | } |
| | | |
| | | .modal-btn-cancel { |
| | | color: #999; |
| | | border-right: 1rpx solid #eee; |
| | | } |
| | | |
| | | .modal-btn-confirm { |
| | | color: #fff; |
| | | background: linear-gradient(135deg, #0081ff 0%, #1890ff 100%); |
| | | font-weight: bold; |
| | | } |
| | | |
| | | .modal-btn-confirm:active { |
| | | background: linear-gradient(135deg, #0070dd 0%, #1480e8 100%); |
| | | } |
| | | |
| | | .modal-btn-cancel:active { |
| | | background-color: #f5f5f5; |
| | | } |
| | | |
| | | /* Language List in Popup */ |
| | | .language-list { |
| | | max-height: 200px; |
| | | overflow-y: auto; |
| | | } |
| | | .language-item { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding: 15px 0; |
| | | border-bottom: 1px solid #f0f0f0; |
| | | } |
| | | </style> |