From 1bea37073f305929215bf2c3f28e2263acb6fc20 Mon Sep 17 00:00:00 2001
From: whycq <913841844@qq.com>
Date: 星期一, 13 二月 2023 19:53:42 +0800
Subject: [PATCH] #
---
pages/login/login.vue | 577 ++++++++++++++++++++++++++-------------------------------
1 files changed, 265 insertions(+), 312 deletions(-)
diff --git a/pages/login/login.vue b/pages/login/login.vue
index 8069b36..ea7e997 100644
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -1,335 +1,288 @@
- <template>
- <view class="zai-box">
-
- <scroll-view scroll-y class="page">
-
- <view class="text-center" :style="[{animation: 'show ' + 0.4+ 's 1'}]">
- <image src="../../static/logo.png" mode='aspectFit' class="zai-logo" @longtap='longpressImg'></image>
+<template>
+ <!-- 璁剧疆 -->
+ <label class="settings">
+ <uni-icons type="gear" size="30" color="#707070" @click="settings"></uni-icons>
+ </label>
+ <!-- logo -->
+ <view class="head">
+ <view class="logo">
+ <image src="../../static/img/logo.png" mode="aspectFit"></image>
+ </view>
+ </view>
+ <view class="content">
+ <!-- 璐﹀彿 -->
+ <view class="box shadow-warp">
+ <view class="box-icon">
+ <uni-icons type="person" size="20" color="#707070"></uni-icons>
</view>
- <view class="box padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
- <block v-if="loginWay==1">
- <view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
- <view class="title"><text class="cuIcon-people margin-right-xs"></text>璐﹀彿:</view>
- <input placeholder="璇疯緭鍏ヨ处鍙�" name="input" v-model="userName"></input>
- </view>
- <view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
- <view class="title"><text class="cuIcon-lock margin-right-xs"></text>瀵嗙爜:</view>
- <input class="uni-input" placeholder="璇疯緭鍏ュ瘑鐮�" :password="!showPassword" v-model="password" />
- <view class="action text-lg">
- <text :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']" @click="changePassword"></text>
- </view>
- </view>
- <view class="flex margin-xs justify-between">
- <checkbox-group class="rember">
- <label>
- <checkbox value="cb" :checked="rember" @tap="rember = !rember" style="transform:scale(0.7)" /><text>璁颁綇瀵嗙爜</text>
- </label>
- </checkbox-group>
- <text class="changeIP" @click="changeIP()">璁剧疆IP</text>
- </view>
- <view class="flex padding justify-center margin-top">
- <button class="cu-btn bg-blue lg shadow" :loading="loading" :class="[shape=='round'?'round':'']"
- @tap="onLogin"><text space="emsp">{{loading ? "鐧诲綍涓�...":" 鐧诲綍 "}}</text>
- </button>
- </view>
- </block>
-
- <!-- #ifdef APP-PLUS -->
- <view class="padding flex flex-direction text-center">
- 褰撳墠鐗堟湰:{{version}}
- </view>
- <!-- #endif -->
-
- </view>
- </scroll-view>
- <!-- 鐧诲綍鍔犺浇寮圭獥 -->
- <view class="cu-load load-modal" v-if="loading">
- <!-- <view class="cuIcon-emojifill text-orange"></view> -->
- <image src="../../static/logo1.png" mode="aspectFit" class="round"></image>
- <view class="gray-text">鐧诲綍涓�...</view>
+ <view class="box-text">璐﹀彿:</view>
+ <view class="box-input">
+ <input type="text">
+ </view>
+ <view class="box-show"></view>
</view>
- <view>
- <uni-popup ref="inputDialog" type="dialog">
- <uni-popup-dialog ref="inputClose" mode="input" title="璁剧疆IP" v-model="IP"
- placeholder="璇疯緭鍏ユ湇鍔″櫒IP" @confirm="dialogInputConfirm">
- </uni-popup-dialog>
- </uni-popup>
+ <!-- 瀵嗙爜 -->
+ <view class="box shadow-warp">
+ <view class="box-icon">
+ <uni-icons type="locked" size="20" color="#707070"></uni-icons>
+ </view>
+ <view class="box-text">瀵嗙爜:</view>
+ <view class="box-input">
+ <input type="text">
+ </view>
+ <view class="box-show">
+ <uni-icons type="eye-filled" size="20" color="#707070"></uni-icons>
+ </view>
</view>
- <view style="margin-top: 10rpx;">
- <uni-popup ref="serverPort" type="dialog">
- <uni-popup-dialog ref="inputClose" mode="input" title="璁剧疆绔彛" v-model="PORT"
- placeholder="璇疯緭鍏ユ湇鍔″櫒绔彛鍙�" @confirm="serverPortConfirm">
- </uni-popup-dialog>
- </uni-popup>
+ <!-- 璁颁綇瀵嗙爜 -->
+ <view class="check">
+ <view class="check-left">
+ <view>璁颁綇瀵嗙爜</view>
+ </view>
+ <view class="check-right">
+ <switch checked color="#FFCC33" style="zoom:.5"/>
+ </view>
</view>
- </view>
+ </view>
+ <!-- 鐧诲綍鎸夐挳 -->
+ <view class="submit">
+ <view class="" style="width: 400rpx;">
+ <button type="primary" size="default">鐧诲綍</button>
+ </view>
+ </view>
+
+ <!-- 璁剧疆寮圭獥鍖哄煙 -->
+ <view>
+ <uni-popup ref="inputDialog" type="dialog">
+ <view class="popup">
+ <!-- 鏍囬 -->
+ <view class="title title-font">閰嶇疆</view>
+ <view class="input">
+ <view class="input-left">ip:</view>
+ <view class="input-right"><input type="text"></view>
+ </view>
+ <view class="input">
+ <view class="input-left">绔彛:</view>
+ <view class="input-right"><input type="text"></view>
+ </view>
+ <view class="input">
+ <view class="input-left">椤圭洰:</view>
+ <view class="input-right"><input type="text"></view>
+ </view>
+ <view class="btn">
+ <view class="btn-left" @click="close">鍙栨秷</view>
+ <view class="btn-right">纭</view>
+ </view>
+ </view>
+ </uni-popup>
+ </view>
+
+
+ <!-- 鐗堟湰鍙� -->
+ <!-- #ifdef APP-PLUS -->
+ <view class="version">
+ 褰撳墠鐗堟湰:{{version}}
+ </view>
+ <!-- #endif -->
</template>
<script>
- // import { ACCESS_TOKEN,USER_NAME,USER_INFO } from "@/common/util/constants"
- import { mapActions } from "vuex"
- import md5 from '../../common/md5.js'
- // import configService from '@/common/service/config.service.js';
-
- export default {
- data() {
- return {
- shape:'',//round 鍦嗗舰
- loading: false,
- phoneNo: '',
- smsCode: '',
- showPassword: false, //鏄惁鏄剧ず鏄庢枃
- loginWay: 1, //1: 璐﹀瘑锛�2锛氶獙璇佺爜
- smsCountDown: 0,
- smsCountInterval: null,
- toggleDelay: false,
- version:'',
- //绗笁鏂圭櫥褰曠浉鍏充俊鎭�
- thirdType:"",
- thirdLoginInfo:"",
- thirdLoginState:false,
- bindingPhoneModal:false,
- thirdUserUuid:'',
- url: {
- bindingThirdPhone: '/sys/thirdLogin/bindingThirdPhone'
- },
- type:'',
- userName:'',
- password:'',
- rember:true,
- IP:'',
- PORT:'',
- };
- },
- mounted() {
- let that = this;
- //缂撳瓨鐨勮处鍙�
- const HCuname = uni.getStorageSync('HCuname');
- //缂撳瓨鐨勫瘑鐮�
- const HCpassw = uni.getStorageSync('HCpassw');
- //鏈夌紦瀛樺氨璧嬪�肩粰鏂囨湰娌℃湁灏辨竻绌�
- if (HCuname && HCpassw) {
- that.userName = HCuname;
- that.password = HCpassw;
- } else {
- that.userName = '';
- that.password = '';
- }
-
- const UIP = uni.getStorageSync('UIP');
- if (UIP) {
- that.IP = UIP;
- that.baseIP = UIP;
- } else {
- that.IP = '';
- }
-
- const UPORT = uni.getStorageSync('UPORT');
- if (UPORT) {
- that.PORT = UPORT;
- that.basePORT = UPORT;
- } else {
- that.PORT = '8080';
+ export default {
+ data() {
+ return {
+ version: '',
+ value: ''
}
},
- onLoad:function(){
+ onLoad() {
+ // 鎵嬫満绔増鏈彿
// #ifdef APP-PLUS
- var that=this
- plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {
- that.version=wgtinfo.version
+ var that = this
+ plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
+ that.version = wgtinfo.version
});
// #endif
},
- computed: {
- isSendSMSEnable() {
- return this.smsCountDown <= 0 && this.phoneNo.length > 4;
- },
- getSendBtnText() {
- if (this.smsCountDown > 0) {
- return this.smsCountDown + '绉掑悗鍙戦��';
- } else {
- return '鍙戦�侀獙璇佺爜';
- }
- },
- canSMSLogin() {
- return this.userName.length > 4 && this.smsCode.length > 4;
- },
- canPwdLogin() {
- return this.userName.length > 4 && this.password.length > 4;
- },
- },
- methods: {
- longpressImg() { // 闀挎寜鍥剧墖
- this.$refs.serverPort.open()
- },
- serverPortConfirm(type) {
- this.basePORT = type
- // 瀛樺叆鏈湴缂撳瓨
- uni.setStorageSync('UPORT',this.basePORT)
- },
- changeIP(){
+ methods: {
+ // 璁剧疆绐楀彛寮�鍚寜閽�
+ settings() {
this.$refs.inputDialog.open()
},
- dialogInputConfirm(type){
- this.baseIP = type
- // 瀛樺叆鏈湴缂撳瓨
- uni.setStorageSync('UIP',this.baseIP)
+ // 璁剧疆绐楀彛纭淇敼鎸夐挳
+ dialogInputConfirm() {
+ this.$refs.inputDialog.close()
},
- checkboxChange: function(e) {
- if (e.detail.value.length == 1) {
-
- //鑾峰彇缂撳瓨鐨勮处鍙�
- uni.getStorageSync('HCuname',this.userName);
- uni.getStorageSync('HCpassw',this.password);
- } else {
- uni.removeStorageSync('HCuname');
- uni.removeStorageSync('HCpassw');
- }
- },
- onLogin: function (){
- if(!this.userName || this.userName.length==0){
- uni.showToast({title: '璇峰～鍐欒处鍙�',icon: "none"})
- return;
- }
- if(!this.password || this.password.length==0){
- uni.showToast({title: '璇峰～鍐欏瘑鐮�',icon: "none"})
- return;
- }
- uni.showLoading();
- uni.request({
- url: this.baseHttp + this.baseIP + ':' +this.basePORT + this.baseUrl + '/login.action',
- data: {
- mobile:this.userName,
- password:md5.hex_md5(this.password)
- },
- header: {
- "content-type": "application/json"
- },
- success: (result) => {
- let res = result.data;
- uni.hideLoading();
- if (res.code == 200) {
- uni.showToast({
- title: '鐧诲綍鎴愬姛',
- position: 'bottom',
- duration: 1000
- });
- if(this.rember){
- uni.setStorageSync('HCuname', this.userName);
- uni.setStorageSync('HCpassw', this.password);
- }else{
- uni.removeStorageSync('HCuname');
- uni.removeStorageSync('HCpassw');
- }
- uni.setStorageSync('token', res.data.token);
- setTimeout(() => {
- uni.navigateBack(); // 灏忕▼搴忕敤杩欎釜 鎶婇椤佃矾鐢辨斁绗竴涓�
- uni.reLaunch({
- url: '../index/index'
- });
- }, 1000);
- } else {
- uni.showToast({
- title: res.msg,
- icon: "none",
- position: 'top'
- })
- }
-
- }
- });
- },
- saveClientId(){
- var info = plus.push.getClientInfo();
- var cid = info.clientid;
- this.$http.get("/sys/user/saveClientId",{params:{clientId:cid}}).then(res=>{
- this.$tip.success('鐧诲綍鎴愬姛!')
- this.$Router.replaceAll({name:'index'})
- })
- },
- changePassword() {
- this.showPassword = !this.showPassword;
- },
- loginSuccess() {
- // 鐧婚檰鎴愬姛锛岄噸瀹氬悜鍒颁富椤�
- this.$Router.replace({name:'index'})
- },
- requestFailed(err) {
- this.$message.warning("鐧诲綍澶辫触")
- },
- },
- beforeDestroy() {
- if (this.smsCountInterval) {
- clearInterval(this.smsCountInterval);
- }
- },
-
-
- }
+ // 璁剧疆绐楀彛鍏抽棴鎸夐挳
+ close() {
+ this.$refs.inputDialog.close()
+ }
+ }
+ }
</script>
-<style>
- @import "../../colorui/main.css";
- @import "../../colorui/icon.css";
- @import "../../colorui/animation.css";
-
- .login-paddingtop {
- padding-top: 50upx;
- }
-
- .zai-box {
- padding: 0 20upx;
- padding-top: 100upx;
- position: relative;
- }
-
- .zai-logo {
- width: 600upx;
- height: 150px;
- }
-
- .zai-title {
- font-size: 58upx;
- color: #000000;
- text-align: center;
- }
-
- .input-placeholder, .zai-input {
- color: #94afce;
- }
-
- .zai-label {
- padding: 60upx 0;
- text-align: center;
- font-size: 30upx;
- color: #a7b6d0;
- }
-
- .zai-btn {
- background: #ff65a3;
- color: #fff;
- border: 0;
- border-radius: 100upx;
- font-size: 36upx;
- }
-
- .zai-btn:after {
- border: 0;
- }
-
- /*鎸夐挳鐐瑰嚮鏁堟灉*/
- .zai-btn.button-hover {
- transform: translate(1upx, 1upx);
- }
- .changeBox {
- margin-top: 20upx;
+<style lang="less">
+ .title-font {
+ color: #606266;
+ font-size: 18px;
+ letter-spacing: 3px;
+ font-weight: 500;
}
- .rember {
- display: inline-block;
+ // 璁剧疆鍖哄煙
+ .settings {
+ width: 100rpx;
+ height: 100rpx;
+ line-height: 100rpx;
+ text-align: center;
+ position: fixed;
+ // background-color: #007aff;
+ right: 0;
+ top: 70rpx;
}
- .changeIP {
- float: right;
- margin-right: 15upx;
+ // 璁剧疆鍖哄煙 - 鎵嬫満
+ <!-- #ifdef APP-PLUS -->
+ .settings {
+ width: 100rpx;
+ height: 100rpx;
+ line-height: 100rpx;
+ text-align: center;
+ position: fixed;
+ right: 0rpx;
+ top: 0rpx;
+ }
+ <!-- #endif -->
+ .head {
+ height: 400rpx;
+ width: 100%;
+ display: grid;
+ grid-template-columns: 1fr;
+ // background-color: aqua;
+ justify-items: center;
+ align-items: center;
+
+ .logo {
+ image {
+ height: 300rpx;
+ }
+ }
+ }
+ // 杈撳叆妗嗗尯鍩�
+ .content {
+ min-height: 250rpx;
+ width: 100%;
+ // background-color: bisque;
+ display: grid;
+ grid-template-columns: 1fr;
+ justify-items: center;
+ align-items: flex-start;
+ // 杈撳叆澶у尯
+ .box {
+ width: 80%;
+ height: 80rpx;
+ background-color: #FFFFFF;
+ display: grid;
+ grid-template-columns: 1fr 1fr 5fr 1fr;
+ align-items: center;
+ font-size: 12px;
+ // 鍥炬爣
+ &-icon {
+ display: grid;
+ justify-items: center;
+ }
+ // 杈撳叆妗�
+ &-input {
+ background-color: aquamarine;
+ }
+ // 闅愯棌鏄剧ず瀵嗙爜
+ &-show {
+ display: grid;
+ justify-items: center;
+ }
+ }
+ // 璁颁綇瀵嗙爜
+ .check {
+ width: 80%;
+ // background-color: blueviolet;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ align-items: center;
+ text-align: left;
+ &-left {
+ display: grid;
+ align-items: center;
+ font-size: 12px;
+ text-indent: 10rpx;
+ }
+ &-right {
+ display: grid;
+ align-items: center;
+ justify-items: flex-end;
+ }
+ }
+ }
+ // 鐧诲綍鎸夐挳
+ .submit {
+ position: fixed;
+ width: 100%;
+ bottom: 200rpx;
+ display: grid;
+ grid-template-columns: 1fr;
+ justify-items: center;
+ }
+ // 寮瑰嚭灞�
+ .popup {
+ width: 650rpx;
+ min-height: 400rpx;
+ background-color: #FFF;
+ border-radius: 25rpx;
+ .title {
+ width: 100%;
+ height: 80rpx;
+ line-height: 80rpx;
+ text-align: center;
+ }
+ .input {
+ width: 100%;
+ height: 80rpx;
+ line-height: 80rpx;
+ display: grid;
+ grid-template-columns: 1fr 3fr;
+ align-items: center;
+ &-left {
+ text-align: right;
+ }
+ &-right {
+ display: grid;
+ align-items: center;
+ height: 50rpx;
+ padding: 5rpx;
+ margin-left: 20rpx;
+ width: 400rpx;
+ border-bottom: 1px solid #e7e6e4;
+
+ }
+ }
+ .btn {
+ margin-top: 20rpx;
+ width: 100%;
+ height: 80rpx;
+ line-height: 80rpx;
+ text-align: center;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ border-top: 1px solid #e7e6e4;
+ &-left {
+ border-right: 1px solid #e7e6e4;
+ }
+ &-right {
+ color: #007aff;
+ }
+ }
+ }
+ .version {
+ position: fixed;
+ width: 100%;
+ bottom: 0;
+ text-align: center;
}
</style>
--
Gitblit v1.9.1