From ccdc55062883495b4a4c7bfe47289582b7664aca Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期五, 23 二月 2024 00:52:34 +0800
Subject: [PATCH] #
---
pages/LoginDemo/LoginDemo.vue | 389 ++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 354 insertions(+), 35 deletions(-)
diff --git a/pages/LoginDemo/LoginDemo.vue b/pages/LoginDemo/LoginDemo.vue
index 2a4b096..788e345 100644
--- a/pages/LoginDemo/LoginDemo.vue
+++ b/pages/LoginDemo/LoginDemo.vue
@@ -1,85 +1,404 @@
<template>
<view class="main">
+ <!-- 璁剧疆鎸夐挳 -->
+ <uni-icons type="gear" size="30" color="#b1b3b8" class="setting" @click="settings"></uni-icons>
<view class="left">
<!-- logo -->
<view class="logo-box">
<image src="../../static/img/logo.png" mode="aspectFit"></image>
</view>
</view>
- <view class="right">right</view>
+ <view class="right">
+ <view class="input-box">
+ <My-input class="my-input" v-model="user.username" titleIcon="person" title="璐﹀彿" placeholder="璇疯緭鍏ヨ处鍙�"
+ inputType="text" optIcon="bottom" />
+ <My-input class="my-input" v-model="user.password" titleIcon="locked" title="瀵嗙爜" placeholder="璇疯緭鍏ュ瘑鐮�"
+ inputType="password" optIcon="eye" optIconShow />
+ <view class="rember-password">
+ <view class="text">璁颁綇瀵嗙爜</view>
+ <switch :checked='remberPassword' color="#FFCC33" style="zoom:.5" @change="remberChange" />
+ </view>
+ </view>
+ <button class="button" @click="onLogin()" :loading="load.loading">{{load.btnText}}</button>
+ </view>
+ <!-- 璁剧疆寮圭獥鍖哄煙 -->
+ <uni-popup ref="settings" type="dialog">
+ <view class="popup">
+ <!-- 鏍囬 -->
+ <view class="title">缃� 缁� 閰� 缃�</view>
+ <scroll-view scroll-y="true" class="settings-scroll">
+ <view class="scroll-item">
+ <view class="item-title" style="">{{network.name}}</view>
+ <view style="display: flex;align-items: center;">
+ <input class="settings-input1" type="text" v-model="network.ip">
+ <text style="font-weight: 900;">:</text>
+ <input class="settings-input2" type="text" v-model="network.port">
+ <text style="font-weight: 900;">/</text>
+ <input class="settings-input3" type="text" v-model="network.address">
+ </view>
+ </view>
+ </scroll-view>
+ <view class="operate">
+ <view class="operate-cancel" @click="cancel">
+ 鍙栨秷
+ </view>
+ <view class="operate-confirm" @click="confirm">
+ 纭
+ </view>
+ </view>
+ </view>
+ </uni-popup>
+
+ <!-- 鐗堟湰鍙� -->
+ <!-- #ifdef APP-PLUS -->
+ <view class="version">
+ 褰撳墠鐗堟湰:{{version}}
+ </view>
+ <!-- #endif -->
</view>
</template>
<script>
+ // import { data } from 'jquery'
+ import { mapState } from 'vuex' //寮曞叆mapState
+ import store from '@/store/index.js';
+ import md5 from '../../static/js/md5.js'
+ import common from '../api/common/common.js'
+ import login from '../api/login/login.js'
export default {
data() {
return {
-
+ version: '',
+ remberPassword: true,
+ user: {
+ username: '',
+ password: ''
+ },
+ network: {
+ name: 'wms',
+ ip: '192.168.1.1',
+ port: '8080',
+ address: 'pswms'
+ },
+ load: {
+ loading: false,
+ btnText: '鐧诲綍'
+ },
}
},
+ computed: mapState({
+ project: state => state.project,
+
+ }),
+ onShow() {
+ },
mounted() {
- uni.getSystemInfo({
- success(res) {
- console.log(res);
- }
- })
+ // 浠� state 鑾峰彇缃戠粶淇℃伅
+ // 浠� state 鑾峰彇璐﹀彿淇℃伅
+ console.log(store.state);
+ this.user = store.state.userInfo
+ this.network = store.state.network
+ // 鎵嬫満绔増鏈彿
+ // #ifdef APP-PLUS
+ var _this = this
+ plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
+ _this.version = wgtinfo.version
+ });
+ // #endif
},
methods: {
-
+ remberChange() {
+ this.remberPassword = !this.remberPassword
+ },
+ settings() {
+ if (uni.getStorageSync('Network')) {
+ this.network = uni.getStorageSync('Network')
+ }
+ this.$refs.settings.open()
+
+ },
+ cancel() {
+ this.$refs.settings.close()
+ },
+ confirm() {
+ let baseUrl = `http://${this.network.ip}:${this.network.port}/${this.network.address}`
+ this.$store.commit("setNetwork", this.network);
+ this.$store.commit("setBaseUrl", baseUrl);
+ this.$refs.settings.close()
+ },
+ async onLogin() {
+ // 楠岃瘉ip淇℃伅
+ // 楠岃瘉璐﹀彿淇℃伅
+ if (!this.user.username ) {
+ uni.showToast({ icon: 'none', title: '璇疯緭鍏ヨ处鍙�' })
+ return
+ }
+ if (!this.user.password ) {
+ uni.showToast({ icon: 'none', title: '璇疯緭鍏ュ瘑鐮�' })
+ return
+ }
+ this.load.loading = true;
+ this.load.btnText = '鐧诲綍涓�';
+ let res = await login.onLogin(this.user)
+ if (res.code === 200) {
+ setTimeout(() => {
+ uni.showToast({
+ title: '鐧诲綍鎴愬姛'
+ })
+ setTimeout(() => {
+ uni.reLaunch({
+ url: `/pages/home/home`,
+ });
+ }, 300)
+ if (!this.remberPassword) {
+ this.user.password = ''
+ }
+ // uni.setStorageSync('user', this.user);
+ this.$store.commit("setUserInfo", this.user);
+ }, 700)
+ } else if (res.code === 0) {
+ this.load.loading = false;
+ this.load.btnText = '鐧诲綍';
+ uni.showToast({
+ icon: 'none',
+ title: '杩炴帴澶辫触锛岃妫�鏌ヨ澶囩綉缁�/IP鍦板潃鏄惁姝ｇ‘锛�'
+ })
+ } else {
+ this.load.loading = false;
+ this.load.btnText = '鐧诲綍';
+ uni.showToast({
+ icon: 'none',
+ title: `${this.user.username} ${res.msg}`
+ })
+ }
+ },
}
}
</script>
-<style>
+<style lang="scss" scoped>
+ .setting {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ border-radius: 10px;
+ box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .3),
+ inset -2px -2px 2px rgba(255, 255, 255, .7),
+ -2px -2px 2px rgba(0, 0, 0, .4);
+ }
+
+ .main {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ background-color: #ECF0F1;
+ position: absolute;
+ }
+
+ .left {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .logo-box {
+ background-color: #ECF0F1;
+ border-radius: 15px;
+ box-shadow: inset 8px 8px 8px rgba(0, 0, 0, .3),
+ inset -8px -8px 8px rgba(255, 255, 255, .7),
+ -8px -8px 10px rgba(0, 0, 0, .4);
+ }
+
+ image {
+ height: 100%;
+ width: 100%;
+ }
+
+ .right {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ }
+
+ .input-box {
+ width: 100%;
+ }
+
+ .my-input {
+ width: 80%;
+ margin: 16px 10% 16px 10%;
+ }
+
+ .rember-password {
+ width: 78%;
+ margin: 0 11% 0 11%;
+ display: flex;
+ justify-content: space-between;
+
+ .text {
+ font-size: 12px;
+ color: #606266;
+ line-height: 1;
+ }
+ }
+
+ .button {
+ width: 40%;
+ margin: 0 auto;
+ height: 50px;
+ text-align: center;
+ line-height: 50px;
+ font-size: 20px;
+ background-color: #409EFF;
+ color: #ECF0F1;
+ border-radius: 7px;
+ box-shadow: inset 4px 4px 4px rgba(0, 0, 0, .3),
+ inset -4px -4px 4px rgba(255, 255, 255, .4),
+ -4px -4px 5px rgba(0, 0, 0, .4);
+ }
+
+ .button:active {
+ transform: translateY(5px) scale(0.99, 0.99);
+ box-shadow: inset 4px 4px 4px rgba(0, 0, 0, .3),
+ inset -4px -4px 8px rgba(255, 255, 255, .7),
+ -5px -5px 5px rgba(0, 0, 0, .3);
+ }
+
@media screen and (orientation: portrait) {
+
/* 绔栧睆 */
.main {
- position: absolute;
- height: 100%;
- width: 100%;
- background-color: crimson;
- display: flex;
flex-direction: column;
}
+
.left {
height: 40%;
width: 100%;
- background-color: aqua;
- display: flex;
- align-items: center;
- justify-content: center;
}
+
+ .right {
+ height: 50%;
+ width: 100%;
+ }
+
.logo-box {
height: 60%;
- background-color: aliceblue;
- }
- image {
- height: 100%;
+ width: 80%;
}
}
+
@media screen and (orientation: landscape) {
+
/* 妯睆 */
.main {
- position: absolute;
- height: 100%;
- width: 100%;
- background-color: crimson;
display: flex;
}
+
.left {
height: 100%;
width: 50%;
- background-color: aqua;
- display: flex;
- align-items: center;
- justify-content: center;
}
- .logo-box {
- height: 40%;
- background-color: aliceblue;
- }
- image {
+
+ .right {
height: 100%;
+ width: 50%;
}
+
+ .logo-box {
+ height: 60%;
+ width: 80%;
+ }
+ }
+
+ .version {
+ position: fixed;
+ width: 100%;
+ bottom: 0;
+ text-align: center;
+ font-size: 10px;
+ color: #909399;
+ }
+
+ .popup {
+ width: 90vw;
+ height: 40vh;
+ background-color: #fff;
+ border-radius: 16px;
+ }
+
+ .title {
+ height: 10vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 24px;
+ color: #a8abb2;
+ }
+
+ .settings-scroll {
+ height: 23vh;
+ touch-action: none;
+ }
+
+ .scroll-item {
+ margin: 4px 16px;
+ color: #606266;
+ font-size: 12px;
+ }
+
+ .item-title {
+ font-size: 14px;
+ width: 100%;
+ text-align: center;
+ }
+
+ .settings-input1 {
+ border: 1px solid #dcdfe6;
+ flex: 5;
+ margin: 2px;
+ padding: 4px;
+ border-radius: 4px;
+ }
+
+ .settings-input2 {
+ border: 1px solid #dcdfe6;
+ flex: 3;
+ margin: 2px;
+ padding: 4px;
+ border-radius: 4px;
+ }
+
+ .settings-input3 {
+ border: 1px solid #dcdfe6;
+ flex: 3;
+ margin: 2px;
+ padding: 4px;
+ border-radius: 4px;
+
+ }
+
+ .operate {
+ height: 7vh;
+ display: flex;
+ text-align: center;
+ border-top: 1px solid #dcdfe6;
+ font-size: 16px;
+ }
+
+ .operate-cancel {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #606266;
+ }
+
+ .operate-confirm {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-left: 1px solid #dcdfe6;
+ color: #00aeec;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.1