From 01d453a6d5a751a78eab5f56ad0f35a0a2ebf281 Mon Sep 17 00:00:00 2001 From: whycq <913841844@qq.com> Date: 星期三, 17 一月 2024 16:01:48 +0800 Subject: [PATCH] # --- pages/LoginDemo/LoginDemo.vue | 319 ++++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 288 insertions(+), 31 deletions(-) diff --git a/pages/LoginDemo/LoginDemo.vue b/pages/LoginDemo/LoginDemo.vue index 2a4b096..7eb0309 100644 --- a/pages/LoginDemo/LoginDemo.vue +++ b/pages/LoginDemo/LoginDemo.vue @@ -1,85 +1,342 @@ <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" titleIcon="person" title="璐﹀彿" placeholder="璇疯緭鍏ヨ处鍙�" inputType="text" optIcon="bottom" /> + <My-input class="my-input" 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> + <!-- <view class="button" @click="login" :loading="load.loading"> + {{load.btnText}} + </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" style="height: 23vh;touch-action: none;"> + <view style="margin: 4px; color: #606266;font-size: 12px; " v-for="net in network"> + <text style="font-size: 14px;">{{net.name}}</text> + <view style="display: flex;align-items: center;"> + <input class="settings-input1" type="text" v-model="net.ip"> + <text style="font-weight: 900;">:</text> + <input class="settings-input2" type="text" v-model="net.port"> + <text style="font-weight: 900;">/</text> + <input class="settings-input3" type="text" v-model="net.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 md5 from '../../static/js/md5.js' export default { data() { return { - + version: '', + remberPassword: true, + network: [ + {name: 'wms',ip:'192.168.1.1',port: '8080',address: 'pswms'}, + {name: 'wcs',ip:'192.168.1.1',port: '9090',address: 'pswcs'} + ], + load: { + loading: false, + btnText: '鐧诲綍' + }, } }, + computed: mapState({ + project: state => state.project + }) , mounted() { uni.getSystemInfo({ success(res) { - console.log(res); + // console.log(res); } }) + // 鎵嬫満绔増鏈彿 + // #ifdef APP-PLUS + var that = this + plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) { + that.version = wgtinfo.version + }); + // #endif }, methods: { - + remberChange() { + + }, + settings() { + this.$refs.settings.open() + }, + cancel() { + this.$refs.settings.close() + }, + confirm() { + uni.setStorageSync('Network', this.network); + this.$refs.settings.close() + }, + onLogin() { + let _this = this,path = 'demo',network = uni.getStorageSync('Network'); + if(!network) { + uni.showToast({ + icon: 'error', + title: '璇烽厤缃綉缁滀俊鎭�' + }) + } + // path = network[0].address + // path = path.substring(0, path.length - 3); + path = _this.project.name + let baseUrl = `http://${network[0].ip}:${network[0].port}/${network[0].address}` + uni.request({ + url: `${baseUrl}/login.action`, + data: { + username: 'super', + password: md5.hex_md5('xltys1995') + }, + success(res) { + res = res.data + if (res.code === 200) { + _this.load.loading = true; + _this.load.btnText = '鐧诲綍涓�'; + uni.setStorageSync('token', res.data.token); + _this.load.btnText = '鐧诲綍涓�'; + setTimeout(() => { + uni.showToast({ + title: '鐧诲綍鎴愬姛' + }) + setTimeout(() => { + uni.reLaunch({ + url: `/pages/home/home`, + }); + }, 300) + }, 700) + } + // uni.navigateTo({ + // url: `/pages/project/${path}/home/home`, + // fail(res) { + // console.log(`娌℃湁${path}椤圭洰,璇疯仈绯荤鐞嗗厓`); + // } + + // }) + } + }) + } } } </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: 40%; + 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; + } + .right { + height: 100%; + width: 50%; } .logo-box { - height: 40%; - background-color: aliceblue; + height: 60%; + width: 80%; } - image { - height: 100%; - } + } + .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-input1 { + border: 1px solid #dcdfe6; + flex: 2; + margin: 2px; + padding: 4px; + border-radius: 4px; + } + .settings-input2 { + border: 1px solid #dcdfe6; + flex: 1; + margin: 2px; + padding: 4px; + border-radius: 4px; + } + .settings-input3 { + border: 1px solid #dcdfe6; + flex: 2; + 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