登录样式修改

components/login/Login.vue

@@ -0,0 +1,532 @@
+<template>
+	<view>
+		<view v-show="accountIsShow">
+			<view class="title">账号密码登录</view>
+			<view class="usernameAndPassword">
+				<view class="usernameContent">
+					<input type="text" v-model="username" placeholder="账号" @input="usernameInput"/>
+				</view>
+				<view class="passwordContent">
+					<input type="text" v-model="password" :password="passwordShow" placeholder="请输入密码" @input="passwordInput"/>
+					<sunui-password @change="showPass" />
+				</view>
+			</view>
+			<view class="type" :style="{ 'margin-top': typeMarginTop }">
+				<a @tap="changeType('phone')">手机验证码登录</a>
+			</view>
+			<button class="cu-btn bg-red lg" @tap="falseLogin" :disabled="usernameLoginDisabled" type="" :style="{ 'height': buttonHeight}">登录</button>
+			<view class="bottomWord" :style="{ 'font-size': bottomWordFontSize,'margin-top':bottomWordMarginTop}">
+				点击登录，即代表已阅读并同意<a href="#">隐私政策</a>和<a href="#">用户协议</a>
+			</view>
+		</view>
+		<view v-show="phoneIsShow">
+			<view class="title">手机验证码登录</view>
+			<view class="usernameAndPassword">
+				<view class="phoneContent">
+					<span>+86</span>
+					<input type="text" v-model="phone" placeholder="请输入手机号码" @input="phoneInput" />					
+				</view>
+				<view class="codeContent">
+					<input type="text" v-model="code" placeholder="请输入验证码" @input="codeInput"/>
+					<span :style="{ 'color': codeColor,'width':codeWidth }" @tap="getCode">获取验证码</span>
+				</view>
+			</view>			
+			<view class="type" :style="{ 'margin-top': typeMarginTop }">
+				<a @tap="changeType('account')">账号登录</a>
+			</view>
+			<button class="cu-btn bg-red lg" :disabled="codeLoginDisabled" type="" :style="{ 'height': buttonHeight}">登录</button>
+			<view class="bottomWord" :style="{ 'font-size': bottomWordFontSize,'margin-top':bottomWordMarginTop}">
+				点击登录，即代表已阅读并同意<a href="#">隐私政策</a>和<a href="#">用户协议</a>
+			</view>
+		</view>
+		
+		
+	</view>
+</template>
+
+<script>
+export default {
+	data: function() {
+		return {
+			passwordShow: true,
+			accountIsShow:true,
+			phoneIsShow:false,
+			usernameLoginDisabled:true,
+			codeLoginDisabled:true,
+			username: '',
+			password: '',
+			phone:"",
+			code:"",
+			codeColor:"#808080",
+			usernameFlag:false,
+			passwordFlag:false,
+			phoneFlag:false,
+			codeFlag:false,
+			getCodeFlag:false,
+			lastUserName: '',
+			lastPassWord: '',
+			windowWidth:"",
+			windowHeight:"",
+			typeMarginTop:"",
+			codeWidth:"",
+			bottomWordFontSize:"",
+			bottomWordMarginTop:"",
+			buttonHeight:""
+		};
+	},
+	created() {
+		this.windowWidth = uni.getSystemInfoSync().windowWidth;
+		this.windowHeight = uni.getSystemInfoSync().windowHeight;
+		//console.log(this.windowWidth);
+		if (this.windowWidth >= 768) {
+			this.typeMarginTop="10%";
+			this.codeWidth="200px";
+			this.bottomWordFontSize="18px";
+			this.bottomWordMarginTop="500px";
+			this.buttonHeight="50px";
+		} else {
+			this.typeMarginTop="0";
+			this.codeWidth="100px";
+			this.bottomWordFontSize="13px";
+			this.bottomWordMarginTop="270px";
+			this.buttonHeight="40px";
+		}
+		//this.removeUsernamePassword();
+		this.getUsernamePassword();
+	},
+	methods: {
+		showPass(e) {
+			this.passwordShow = e;
+		},
+		usernameInput(e){
+			if(e.detail.value!=""){
+				this.usernameFlag=true;
+				if(this.passwordFlag){
+					this.usernameLoginDisabled=false;
+				}
+			}else{
+				this.usernameFlag=false;
+				this.usernameLoginDisabled=true;
+			}
+		},
+		passwordInput(e){
+			if(e.detail.value!=""){
+				this.passwordFlag=true;
+				if(this.usernameFlag){
+					this.usernameLoginDisabled=false;
+				}
+			}else{
+				this.passwordFlag=false;
+				this.usernameLoginDisabled=true;
+			}
+		},
+		phoneInput(e){
+			// console.log(e.detail.value)
+			var phoneStr = e.detail.value;
+			    if(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phoneStr)){ 
+					this.codeColor="black";
+					this.getCodeFlag=true;
+					this.phoneFlag=true;
+					if(this.codeFlag){
+						this.codeLoginDisabled=false;
+					}
+			    }
+				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phoneStr))){
+					this.codeColor="#808080";
+					this.getCodeFlag=false;
+					this.phoneFlag=false;
+					this.codeLoginDisabled=true;
+				}
+		},
+		codeInput(e){
+			if(e.detail.value!=""){
+				this.codeFlag=true;
+				if(this.phoneFlag){
+					this.codeLoginDisabled=false;
+				}
+			}else{
+				this.codeFlag=false;
+				this.codeLoginDisabled=true;
+			}
+		},
+		getCode:function(){
+			if(this.getCodeFlag){
+				console.log("获取验证码")
+			}else{
+				console.log("不能获取验证码")
+			}
+			
+		},
+		changeType:function(type){
+			if(type=="account"){
+				this.accountIsShow=true;
+				this.phoneIsShow=false;
+			}
+			if(type=="phone"){
+				this.phoneIsShow=true;
+				this.accountIsShow=false;
+			}
+		},
+		falseLogin: function() {
+			if (this.username == 'abc' && this.password == '123') {
+				this.setUsernamePassword();
+				uni.switchTab({
+					url: '/pages/index/Index'
+				});
+			}else{
+				uni.showModal({
+					content: '用户名密码输入错误，请核对'
+				});
+				this.username = '';
+				this.password = '';
+			}
+		},
+		setUsernamePassword: function() {
+			uni.setStorageSync('gyeeusername', this.username);
+			uni.setStorageSync('gyeepassword', this.password);
+		},
+		getUsernamePassword: function() {
+			this.lastUserName = uni.getStorageSync('gyeeusername');
+			this.lastPassWord = uni.getStorageSync('gyeepassword');
+			if (this.lastUserName != '' && this.lastPassWord != '') {
+				uni.switchTab({
+					url: '/pages/index/Index'
+				});
+			}
+		},
+		removeUsernamePassword: function() {
+			uni.removeStorageSync('gyeeusername');
+			uni.removeStorageSync('gyeepassword');
+		},
+		login: function() {
+			let _this = this;
+			uni.request({
+				url: 'http://49.4.78.143:8081/admin/appLogin?username=' + this.username + '&password=' + this.password,
+				data: {},
+				method: 'GET',
+				success: function(res) {
+					console.log(res.data);
+					if (res.data.code == 200) {
+						_this.loginFalg = true;
+						_this.getUser();
+					} else {
+						uni.showModal({
+							content: '用户名密码输入错误，请核对'
+						});
+						_this.username = '';
+						_this.password = '';
+					}
+				},
+				fail: () => {
+					_this.tips = '网络错误，小程序端请检查合法域名';
+				}
+			});
+		},
+		getUser: function() {
+			let _this = this;
+			uni.request({
+				url: 'http://49.4.78.143:8081/UserauthorityController/getUserSession',
+				data: {},
+				method: 'GET',
+				success: function(res) {
+					_this.lastUserName = res.data[0];
+					_this.lastPassWord = res.data[1];
+					_this.getWindPowerStation();
+				},
+				fail: () => {
+					_this.tips = '网络错误，小程序端请检查合法域名';
+				}
+			});
+		},
+		getWindPowerStation: function() {
+			let _this = this;
+			uni.request({
+				url: 'http://49.4.78.143:8081/UserauthorityController/selectuserauthority?userName=' + this.lastUserName + '&password=' + this.lastPassWord,
+				data: {},
+				method: 'GET',
+				success: function(res) {
+					_this.windPowerStations = res.data;
+					//console.log(_this.windPowerStations);
+					_this.windPowerStationId = _this.windPowerStations[0];
+					if (_this.loginFalg) {
+						if (_this.windPowerStationId == 'MHS_FDC') {
+							_this.windpowerstationName = '麻黄山';
+						}
+						if (_this.windPowerStationId == 'NSS_FDC') {
+							_this.windpowerstationName = '牛首山';
+						}
+						if (_this.windPowerStationId == 'XS_FDC') {
+							_this.windpowerstationName = '香山';
+						}
+						if (_this.windPowerStationId == 'SBQ_FDC') {
+							_this.windpowerstationName = '石板泉';
+						}
+						if (_this.windPowerStationId == 'QS_FDC') {
+							_this.windpowerstationName = '青山';
+						}
+						if (_this.windPowerStationId == 'CL_FDC') {
+							_this.windpowerstationName = '崇礼';
+						}
+						if (_this.windPowerStationId == 'KB_FDC') {
+							_this.windpowerstationName = '康保';
+						}
+						if (_this.windPowerStationId == 'YMG_FDC') {
+							_this.windpowerstationName = '雁门关';
+						}
+						if (_this.windPowerStationId == 'TY_FDC') {
+							_this.windpowerstationName = '天源';
+						}
+						if (_this.windPowerStationId == 'AL_FDC') {
+							_this.windpowerstationName = '熬伦';
+						}
+						if (_this.windPowerStationId == 'DBS_FDC') {
+							_this.windpowerstationName = '调兵山';
+						}
+						if (_this.windPowerStationId == 'BZ_FDC') {
+							_this.windpowerstationName = '北镇';
+						}
+						if (_this.windPowerStationId == 'XC_FDC') {
+							_this.windpowerstationName = '兴城';
+						}
+						if (_this.windPowerStationId == 'FS_FDC') {
+							_this.windpowerstationName = '芳山';
+						}
+						if (_this.windPowerStationId == 'LH_FDC') {
+							_this.windpowerstationName = '凌海';
+						}
+						if (_this.windPowerStationId == 'XBQ_FDC') {
+							_this.windpowerstationName = '西八千';
+						}
+						if (_this.windPowerStationId == 'TZS_FDC') {
+							_this.windpowerstationName = '台子山';
+						}
+						if (_this.windPowerStationId == 'YM_FDC') {
+							_this.windpowerstationName = '永茂';
+						}
+						if (_this.windPowerStationId == 'WF_FDC') {
+							_this.windpowerstationName = '万发';
+						}
+					} else {
+						_this.windpowerstationName = '游客身份浏览';
+					}
+
+					_this.pushWindPowerStationNameToSessionStorage(_this.windpowerstationName);
+				},
+				fail: () => {
+					_this.tips = '网络错误，小程序端请检查合法域名';
+				}
+			});
+		},
+		pushWindPowerStationNameToSessionStorage(windpowerstationName) {
+			uni.setStorageSync('windpowerstationName', windpowerstationName);
+			uni.setStorageSync('windpowerstationNames', JSON.stringify(this.windPowerStations));
+			uni.setStorageSync('windPowerStationId', this.windPowerStationId);
+			uni.switchTab({
+				url: '/pages/index/Index'
+			});
+			//sessionStorage.setItem('windpowerstationName', windpowerstationName);
+			//alert("v"+ sessionStorage.getItem("windpowerstationName"));
+			//this.common.goback('/pages/index/Index');
+		},
+		noLogin: function() {
+			let _this = this;
+
+			uni.request({
+				url: 'http://49.4.78.143:8081/admin/appLogin?username=abc&password=123',
+				data: {},
+				method: 'GET',
+				success: function(res) {
+					console.log(res.data);
+					if (res.data.code == 200) {
+						_this.loginFalg = false;
+						_this.getUser();
+					}
+				},
+				fail: () => {
+					_this.tips = '网络错误，小程序端请检查合法域名';
+				}
+			});
+		}
+	}
+	
+};
+</script>
+
+<style>
+page {
+	height: 100%;
+	/* background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#2f698e), color-stop(0.15, #5c757c), to(#004c90)); */
+}
+.title {
+	width: 90%;
+	height: 100px;
+	font-size: 25px;
+	font-weight: bold;
+	padding-top: 50px;
+	/* margin-top: 80px; */
+	margin-left: 10%;
+}
+.usernameAndPassword {
+	width: 100%;
+	height: 100px;
+	margin-top: 50px;
+}
+.usernameContent {
+	width: 80%;
+	margin-left: 10%;
+	border-bottom: 2upx solid #D3D3D3;
+}
+.passwordContent {
+	width: 80%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	border-bottom: 2upx solid #D3D3D3;
+	margin-top: 20px;
+	margin-left: 10%;
+}
+input {
+	width: 100%;
+	height: 30px;
+}
+.type{
+	width: 80%;
+	height: 20px;
+	line-height: 20px;
+	margin-left: 10%;
+}
+.cu-btn {
+	width: 80%;
+	height: 40px;
+	margin-left: 10%;
+	margin-top: 25px;
+}
+.phoneContent{
+	width: 80%;
+	margin-left: 10%;
+	border-bottom: 2upx solid #D3D3D3;
+	display: flex;
+}
+.phoneContent span{
+	line-height: 30px;
+	margin-right: 5px;
+
+}
+.codeContent{
+	width: 80%;
+	margin-left: 10%;
+	border-bottom: 2upx solid #D3D3D3;
+	display: flex;
+	margin-top: 20px;
+}
+.codeContent span{
+	width: 100px; 
+}
+.bottomWord{
+	width: 80%;
+	margin-left: 10%;
+	color: #808080;
+	font-size: 13px;
+	margin-top: 270px;
+	text-align: center;
+}
+a{
+	text-decoration: none;
+}
+.bottomWord a:link {
+	color: #5C97E4;
+}
+.bottomWord a:hover {
+	color: #5C97E4;
+}
+.bottomWord a:visited {
+	color: #5C97E4;
+}
+.bottomWord a:active {
+	color: #5C97E4;
+}
+/* .container {
+	border-radius: 20px;
+	width: 90%;
+	height: 700upx;
+	margin: 0px auto;
+	position: absolute;
+	top: 20%;
+	left: 5%;
+	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#024f93), color-stop(1.5, #cccccc), to(#437193));
+	background: rgba(0, 0, 0, 0.1);
+}
+.title {
+	width: 100%;
+	height: 50px;
+	color: white;
+	line-height: 50px;
+	text-align: center;
+	margin-top: 5%;
+}
+.usernameContainer {
+	width: 100%;
+	height: 40px;
+	line-height: 40px;
+	margin-top: 10%;
+}
+.usernameContainer span {
+	float: left;
+	font-size: 18px;
+	color: white;
+	margin-left: 10px;
+}
+.username {
+	width: 70%;
+	height: 40px;
+	border: 1px solid white;
+	float: left;
+	border-radius: 5px;
+}
+.passwordContainer {
+	width: 100%;
+	height: 40px;
+	line-height: 40px;
+	margin-top: 10%;
+}
+.passwordContainer span {
+	float: left;
+	font-size: 18px;
+	color: white;
+	margin-left: 10px;
+}
+.password {
+	width: 70%;
+	height: 40px;
+	border: 1px solid white;
+	float: left;
+	border-radius: 5px;
+}
+.noLogin {
+	width: calc(70% + 84px);
+	height: 40px;
+	text-align: right;
+	color: white;
+	//margin-left:15% ;
+	//margin-right: 10px;
+	line-height: 40px;
+}
+.noLogin a:link {
+	color: white;
+}
+.noLogin a:hover {
+	color: white;
+}
+.noLogin a:visited {
+	color: white;
+}
+.noLogin a:active {
+	color: white;
+}
+.cu-btn {
+	width: 80%;
+	height: 50px;
+	margin-left: 10%;
+	//margin-top: 10%;
+} */
+</style>

main.js

@@ -2,6 +2,8 @@ import Vue from 'vue'
 import App from './App'
 import cuCustom from './colorui/components/cu-custom.vue'
 Vue.component('cu-custom',cuCustom)
+import sunUiPassword from './sunui-password/sunui-password.vue'
+Vue.component('sunui-password',sunUiPassword);
 Vue.config.productionTip = false
 
 App.mpType = 'app'

pages.json

@@ -1,6 +1,12 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages	
 		{
+		    "path" : "components/login/Login",
+		    "style" : {
+				"navigationBarTitleText": "登录"
+			}
+		},
+		{
 			"path": "pages/index/Index",
 			"style": {
 				"navigationBarTitleText": "监视"