| | |
| | | <template> |
| | | <view class="login-page"> |
| | | <!-- 服务器设置按钮 --> |
| | | <view class="settings-btn" @tap="showServerDialog"> |
| | | <text class="settings-icon">⚙</text> |
| | | </view> |
| | | |
| | | <view class="login-content"> |
| | | <view class="logo-area"> |
| | | <image src="../../static/img/bj/gs.png" alt="广深科技" class="company-logo"></image> |
| | |
| | | <text class="version">版本号 v1.0.1</text> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 服务器设置弹窗 --> |
| | | <view class="dialog-mask" v-if="showDialog" @tap="hideServerDialog"> |
| | | <view class="dialog-content" @tap.stop> |
| | | <view class="dialog-header"> |
| | | <text class="dialog-title">服务器设置</text> |
| | | <text class="dialog-close" @tap="hideServerDialog">✕</text> |
| | | </view> |
| | | |
| | | <view class="dialog-body"> |
| | | <view class="server-url-display"> |
| | | <text class="url-text">{{ tempServerUrl }}</text> |
| | | </view> |
| | | |
| | | <view class="quick-select"> |
| | | <text class="quick-select-label">快速选择:</text> |
| | | <view class="preset-buttons"> |
| | | <view |
| | | v-for="(preset, index) in serverPresets" |
| | | :key="index" |
| | | class="preset-btn" |
| | | :class="{ 'active': tempServerUrl === preset.url }" |
| | | @tap="selectPreset(preset)"> |
| | | <text class="preset-btn-text">{{ preset.name }}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="current-server-info"> |
| | | <text class="info-text">当前地址: {{ tempServerUrl }}</text> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="dialog-footer"> |
| | | <button class="dialog-btn cancel-btn" @tap="hideServerDialog">取消</button> |
| | | <button class="dialog-btn confirm-btn" @tap="saveServerSetting">保存</button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | |
| | |
| | | //selectFactory: { value: this.$loginInfo.factoryKey||'',text:this.$loginInfo.factoryName||'',index: this.$loginInfo.factoryIndex}, //选择的账套信息 |
| | | selectFactory: {}, |
| | | selectLanguage: {}, //选择的语言 |
| | | showDialog: false, // 是否显示服务器设置弹窗 |
| | | tempServerUrl: '', // 临时存储选择的服务器地址 |
| | | } |
| | | }, |
| | | computed: { |
| | | // 获取服务器预设列表 |
| | | serverPresets() { |
| | | return this.$store.state.serverInfo.serverPresets || []; |
| | | } |
| | | }, |
| | | async onReady() { |
| | |
| | | this.selectLanguage = this.$loginInfo.language || 0; |
| | | }, |
| | | methods: { |
| | | // 显示服务器设置弹窗 |
| | | showServerDialog() { |
| | | this.tempServerUrl = this.$store.state.serverInfo.serverAPI; |
| | | this.showDialog = true; |
| | | }, |
| | | // 隐藏服务器设置弹窗 |
| | | hideServerDialog() { |
| | | this.showDialog = false; |
| | | }, |
| | | // 选择预设服务器 |
| | | selectPreset(preset) { |
| | | this.tempServerUrl = preset.url; |
| | | }, |
| | | // 保存服务器设置 |
| | | saveServerSetting() { |
| | | this.$store.commit('updateServerAPI', this.tempServerUrl); |
| | | |
| | | // 查找服务器名称 |
| | | const preset = this.serverPresets.find(item => item.url === this.tempServerUrl); |
| | | const serverName = preset ? preset.name : '自定义'; |
| | | |
| | | uni.showToast({ |
| | | title: `已切换到${serverName}`, |
| | | icon: 'success', |
| | | duration: 1500 |
| | | }); |
| | | |
| | | this.hideServerDialog(); |
| | | }, |
| | | toggleShowPassword() { |
| | | this.showPassword = !this.showPassword; |
| | | }, |
| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | background-color: #f5f7fa; |
| | | position: relative; |
| | | } |
| | | |
| | | /* 设置按钮样式 */ |
| | | .settings-btn { |
| | | position: absolute; |
| | | top: 20px; |
| | | right: 20px; |
| | | width: 50px; |
| | | height: 50px; |
| | | background-color: rgba(255, 255, 255, 0.9); |
| | | border-radius: 50%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
| | | z-index: 10; |
| | | cursor: pointer; |
| | | transition: all 0.3s; |
| | | } |
| | | |
| | | .settings-btn:active { |
| | | background-color: rgba(255, 255, 255, 1); |
| | | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
| | | transform: scale(0.95); |
| | | } |
| | | |
| | | .settings-icon { |
| | | font-size: 24px; |
| | | color: #666; |
| | | } |
| | | |
| | | .login-content { |
| | |
| | | font-size: 13px; |
| | | } |
| | | } |
| | | |
| | | /* 弹窗样式 */ |
| | | .dialog-mask { |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | background-color: rgba(0, 0, 0, 0.5); |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | z-index: 1000; |
| | | } |
| | | |
| | | .dialog-content { |
| | | background-color: white; |
| | | border-radius: 12px; |
| | | width: 85%; |
| | | max-width: 500px; |
| | | max-height: 80vh; |
| | | display: flex; |
| | | flex-direction: column; |
| | | overflow: hidden; |
| | | box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); |
| | | } |
| | | |
| | | .dialog-header { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 20px; |
| | | border-bottom: 1px solid #e0e0e0; |
| | | } |
| | | |
| | | .dialog-title { |
| | | font-size: 18px; |
| | | font-weight: 500; |
| | | color: #333; |
| | | } |
| | | |
| | | .dialog-close { |
| | | font-size: 24px; |
| | | color: #999; |
| | | cursor: pointer; |
| | | width: 30px; |
| | | height: 30px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .dialog-body { |
| | | padding: 20px; |
| | | flex: 1; |
| | | overflow-y: auto; |
| | | } |
| | | |
| | | .server-url-display { |
| | | background-color: #f5f7fa; |
| | | padding: 15px; |
| | | border-radius: 8px; |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .url-text { |
| | | font-size: 14px; |
| | | color: #666; |
| | | word-break: break-all; |
| | | } |
| | | |
| | | .quick-select { |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .quick-select-label { |
| | | font-size: 15px; |
| | | color: #666; |
| | | margin-bottom: 12px; |
| | | display: block; |
| | | } |
| | | |
| | | .preset-buttons { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 10px; |
| | | } |
| | | |
| | | .preset-btn { |
| | | padding: 10px 20px; |
| | | border: 1px solid #e0e0e0; |
| | | border-radius: 6px; |
| | | background-color: white; |
| | | cursor: pointer; |
| | | transition: all 0.3s; |
| | | } |
| | | |
| | | .preset-btn.active { |
| | | background-color: #3498db; |
| | | border-color: #3498db; |
| | | } |
| | | |
| | | .preset-btn-text { |
| | | font-size: 14px; |
| | | color: #333; |
| | | } |
| | | |
| | | .preset-btn.active .preset-btn-text { |
| | | color: white; |
| | | } |
| | | |
| | | .current-server-info { |
| | | background-color: #f0f8ff; |
| | | padding: 12px; |
| | | border-radius: 6px; |
| | | border-left: 3px solid #3498db; |
| | | } |
| | | |
| | | .info-text { |
| | | font-size: 13px; |
| | | color: #666; |
| | | word-break: break-all; |
| | | } |
| | | |
| | | .dialog-footer { |
| | | display: flex; |
| | | border-top: 1px solid #e0e0e0; |
| | | padding: 15px 20px; |
| | | gap: 10px; |
| | | } |
| | | |
| | | .dialog-btn { |
| | | flex: 1; |
| | | padding: 12px; |
| | | border-radius: 6px; |
| | | font-size: 16px; |
| | | border: none; |
| | | cursor: pointer; |
| | | transition: all 0.3s; |
| | | } |
| | | |
| | | .cancel-btn { |
| | | background-color: #f5f7fa; |
| | | color: #666; |
| | | } |
| | | |
| | | .cancel-btn:active { |
| | | background-color: #e8eaed; |
| | | } |
| | | |
| | | .confirm-btn { |
| | | background-color: #3498db; |
| | | color: white; |
| | | } |
| | | |
| | | .confirm-btn:active { |
| | | background-color: #2980b9; |
| | | } |
| | | </style> |