用户登录模块

App.vue

@@ -137,8 +137,12 @@
 
     },
     onShow: function() {},
-    onHide: function() {}
-
+    onHide: function() {},
+    methods:{
+      islockOrientation: function(){
+        plus.screen.lockOrientation('portrait')
+      }
+    }
   }
 </script>
 

components/login/main.css

+.content {
+	display: flex;
+	flex-direction: column;
+	justify-content:center;
+	/* margin-top: 128rpx; */
+}
+
+/* 头部 logo */
+.header {
+	width:161rpx;
+	height:161rpx;
+	box-shadow:0rpx 0rpx 60rpx 0rpx rgba(0,0,0,0.1);
+	border-radius:50%;
+	background-color: #000000; 
+	margin-top: 128rpx;
+	margin-bottom: 72rpx;
+	margin-left: auto;
+	margin-right: auto;
+}
+.header image{
+	width:161rpx;
+	height:161rpx;
+	border-radius:50%;
+}
+
+/* 主体 */
+.main {
+	display: flex;
+	flex-direction: column;
+	padding-left: 70rpx;
+	padding-right: 70rpx;
+}
+.tips {
+	color: #999999;
+	font-size: 28rpx;
+	margin-top: 64rpx;
+	margin-left: 48rpx;
+}
+
+/* 登录按钮 */
+.wbutton{
+	margin-top: 96rpx;
+}
+
+/* 其他登录方式 */
+.other_login{
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	margin-top: 256rpx;
+	text-align: center;
+}
+.login_icon{
+	border: none;
+	font-size: 64rpx;
+	margin: 0 64rpx 0 64rpx;
+	color: rgba(0,0,0,0.7)
+}
+.wechat_color{
+	color: #83DC42;
+}
+.weibo_color{
+	color: #F9221D;
+}
+.github_color{
+	color: #24292E;
+}
+
+/* 底部 */
+.footer{
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	font-size: 28rpx;
+	margin-top: 64rpx;
+	color: rgba(0,0,0,0.7);
+	text-align: center;
+	height: 40rpx;
+	line-height: 40rpx;
+}
+.footer text{
+	font-size: 24rpx;
+	margin-left: 15rpx;
+	margin-right: 15rpx;
+}
\ No newline at end of file

components/watch-login/watch-button.vue

+<template>
+	<view>
+		<!-- 按钮 -->
+		<button 
+			:class="['buttonBorder',!_rotate?'dlbutton':'dlbutton_loading']" 
+			:style="{'background':bgColor, 'color': fontColor}"
+            
+			@click="$emit('click', $event)"
+			@contact="$emit('contact', $event)"
+			@error="$emit('error', $event)"
+			@getphonenumber="$emit('getphonenumber', $event)"
+			@getuserinfo="$emit('getuserinfo', $event)"
+			@launchapp="$emit('launchapp', $event)"
+			@longtap="$emit('longtap', $event)"
+			@opensetting="$emit('opensetting', $event)"
+			@touchcancel="$emit('touchcancel', $event)"
+			@touchend="$emit('touchend', $event)"
+			@touchmove="$emit('touchmove', $event)"
+			@touchstart="$emit('touchstart', $event)"
+		>
+			<view :class="_rotate?'rotate_loop':''">
+				<text v-if="_rotate" class="cuIcon cuIcon-loading1 "></text>
+				<view v-if="!_rotate"><slot name="text">{{ text }}</slot></view>
+			</view>
+		</button>
+	</view>
+</template>
+
+<script>
+	export default{
+		props:{
+			text: String, //显示文本
+			rotate:{
+				//是否启动加载
+				type: [Boolean,String],
+				default: false,
+			}, 
+			bgColor:{
+				//按钮背景颜色
+				type: String,
+				default: "linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6))",
+			},
+			fontColor:{
+				//按钮字体颜色
+				type: String,
+				default: "#FFFFFF",
+			},
+		},
+		computed:{
+			_rotate() {
+				//处理值
+				return String(this.rotate) !== 'false'
+			},
+		}
+	}
+</script>
+
+<style>
+	@import url("./css/icon.css");
+	
+	.dlbutton {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		color: #FFFFFF;
+		font-size: 30rpx;
+		white-space:nowrap;
+		overflow: hidden;
+		width:601rpx;
+		height:100rpx;
+		background:linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6));
+		box-shadow:0rpx 0rpx 13rpx 0rpx rgba(164,217,228,0.4);
+		border-radius:2.5rem;
+		margin-top: 0rpx;
+	}
+	.dlbutton_loading {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		color: #FFFFFF;
+		font-size: 30rpx;
+		width:100rpx;
+		height:100rpx;
+		background:linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6));
+		box-shadow:0rpx 0rpx 13rpx 0rpx rgba(164,217,228,0.4);
+		border-radius:2.5rem;
+		margin-top: 0rpx;
+	}
+	.buttonBorder{
+	    border: none ;
+	    border-radius: 2.5rem ;
+	    -webkit-box-shadow: 0 0 60rpx 0 rgba(0,0,0,.2) ;
+	    box-shadow: 0 0 60rpx 0 rgba(0,0,0,.2) ;
+	    -webkit-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
+	    -moz-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
+	    -ms-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
+	    -o-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
+	    transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
+	}
+	
+	/* 旋转动画 */
+	.rotate_loop{
+		-webkit-transition-property: -webkit-transform;
+	    -webkit-transition-duration: 1s;
+	    -moz-transition-property: -moz-transform;
+	    -moz-transition-duration: 1s;
+	    -webkit-animation: rotate 1s linear infinite;
+	    -moz-animation: rotate 1s linear infinite;
+	    -o-animation: rotate 1s linear infinite;
+	    animation: rotate 1s linear infinite;
+	}
+	@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
+	    to{-webkit-transform: rotate(360deg)}
+	}
+	@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
+	    to{-moz-transform: rotate(359deg)}
+	}
+	@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
+	    to{-o-transform: rotate(359deg)}
+	}
+	@keyframes rotate{from{transform: rotate(0deg)}
+	    to{transform: rotate(359deg)}
+	}
+</style>

components/watch-login/watch-input.vue

+<template>
+	<view class="main-list oBorder">
+		<!-- 文本框 -->
+		<input 
+			class="main-input" 
+			:value="value" 
+			:type="_type" 
+			:maxlength="maxlength" 
+			:placeholder="placeholder" 
+			:password="type==='password'&&!showPassword" 
+			
+			@input="$emit('input', $event.target.value)"
+			@blur="$emit('blur', $event)"
+			@focus="$emit('focus', $event)"
+			@longpress="$emit('longpress', $event)"
+			@confirm="$emit('confirm', $event)"
+			@click="$emit('click', $event)"
+			@longtap="$emit('longtap', $event)"
+			@touchcancel="$emit('touchcancel', $event)"
+			@touchend="$emit('touchend', $event)"
+			@touchmove="$emit('touchmove', $event)"
+			@touchstart="$emit('touchstart', $event)"
+		/>
+		<!-- 是否可见密码 -->
+		<image 
+			v-if="_isShowPass&&type==='password'&&!_isShowCode"
+			class="img cuIcon" 
+			:class="showPassword?'cuIcon-attention':'cuIcon-attentionforbid'" 
+			@tap="showPass"
+		></image>
+		<!-- 倒计时 -->
+		<view 
+			v-if="_isShowCode&&!_isShowPass"
+			:class="['vercode',{'vercode-run': second>0}]" 
+			@click="setCode"
+		>{{ getVerCodeSecond }}</view>
+		
+	</view>
+</template>
+
+<script>
+	var _this, countDown;
+	export default{
+		data(){
+			return{
+				showPassword: false, //是否显示明文
+				second: 0, //倒计时
+				isRunCode: false, //是否开始倒计时
+			}
+		},
+		props:{
+			type: String, //类型
+			value: String, //值
+			placeholder: String, //框内提示
+			maxlength: {
+				//最大长度
+				type: [Number,String],
+				default: 20,
+			},
+			isShowPass:{
+				//是否显示密码图标（二选一）
+				type: [Boolean,String],
+				default: false,
+			},
+			isShowCode:{
+				//是否显示获取验证码（二选一）
+				type: [Boolean,String],
+				default: false,
+			},
+			codeText:{
+				type: String,
+				default: "获取验证码",
+			},
+			setTime:{
+				//倒计时时间设置
+				type: [Number,String],
+				default: 60,
+			}
+		},
+		model: {
+			prop: 'value',
+			event: 'input'
+		},
+		mounted() {
+			_this=this
+			//准备触发
+			this.$on('runCode',(val)=>{
+                this.runCode(val);
+            });
+			clearInterval(countDown);//先清理一次循环，避免缓存
+		},
+		methods:{
+			showPass(){
+				//是否显示密码
+				this.showPassword = !this.showPassword
+			},
+			setCode(){
+				//设置获取验证码的事件
+				if(this.isRunCode){
+					//判断是否开始倒计时，避免重复点击
+					return false;
+				}
+				this.$emit('setCode')
+			},
+			runCode(val){
+				//开始倒计时
+				if(String(val)=="0"){
+					
+					//判断是否需要终止循环
+					this.second = 0; //初始倒计时
+					clearInterval(countDown);//清理循环
+					this.isRunCode= false; //关闭循环状态
+					return false;
+				}
+				if(this.isRunCode){
+					//判断是否开始倒计时，避免重复点击
+					return false;
+				}
+				this.isRunCode= true
+				this.second = this._setTime //倒数秒数
+				
+				let _this=this;
+				countDown = setInterval(function(){
+					_this.second--
+					if(_this.second==0){
+						_this.isRunCode= false
+						clearInterval(countDown)
+					}
+				},1000)
+			}
+		},
+		computed:{
+			_type(){
+				//处理值
+				const type = this.type
+				return type == 'password' ? 'text' : type
+			},
+			_isShowPass() {
+				//处理值
+				return String(this.isShowPass) !== 'false'
+			},
+			_isShowCode() {
+				//处理值
+				return String(this.isShowCode) !== 'false'
+			},
+			_setTime() {
+				//处理值
+				const setTime = Number(this.setTime)
+				return setTime>0 ? setTime : 60
+			},
+			getVerCodeSecond(){
+				//验证码倒计时计算
+				if(this.second<=0){
+					return this.codeText;
+				}else{
+					if(this.second<10){
+						return '0'+this.second;
+					}else{
+						return this.second;
+					}
+				}
+				
+			}
+		}
+	}
+</script>
+
+<style>
+	@import url("./css/icon.css");
+	
+	.main-list{
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		/* height: 36rpx; */   /* Input 高度 */
+		color: #333333;
+		padding: 40rpx 32rpx;
+		margin:32rpx 0;
+	}
+	.img{
+		width: 32rpx;
+		height: 32rpx;
+		font-size: 32rpx;
+	}
+	.main-input{
+		flex: 1;
+		text-align: left;
+		font-size: 28rpx;
+		/* line-height: 100rpx; */
+		padding-right: 10rpx;
+		margin-left: 20rpx;
+	}
+	.vercode {
+		color: rgba(0,0,0,0.7);
+		font-size: 24rpx;
+		/* line-height: 100rpx; */
+	}
+	.vercode-run {
+		color: rgba(0,0,0,0.4) !important;
+	}
+	.oBorder{
+	    border: none;
+	    border-radius: 2.5rem ;
+	    -webkit-box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1) ;
+	    box-shadow: 0 0 60rpx 0 rgba(43,86,112,.1) ;
+	}
+</style>

manifest.json

@@ -74,7 +74,7 @@
                 "androidStyle" : "default",
                 "iosStyle" : "common",
                 "android" : {
-                    "xhdpi" : "unpackage/status/泽宏启动页/728.1242.png",
+                    "xhdpi" : "unpackage/status/泽宏启动页/720.1242.png",
                     "hdpi" : "unpackage/status/泽宏启动页/480.762.png",
                     "xxhdpi" : "unpackage/status/泽宏启动页/1080.1882.png"
                 }

pages.json

@@ -48,6 +48,9 @@
     }, {
       "path": "pages/adddevice/mpnaddlink",
       "style": {}
+    }, {
+      "path": "pages/login/userlogin",
+      "style": {}
     }
   ],
   // "tabBar": {

pages/adddevice/home.vue

@@ -77,7 +77,8 @@
           <view class="title">设备备注</view>
           <textarea maxlength="-1" :disabled="modalName1!=null" @input="textareaBInput" placeholder="请输入设备备注" name='deviceremark'></textarea>
         </view>
-        <button form-type="submit" class="cu-btn bg-grey lg" style="width: 90%;height: 80upx;margin-left: 40upx;margin-top: 20upx;z-index: 999;">提交</button>
+        <button form-type="submit" class="cu-btn bg-grey lg" style="width: 90%;height: 80upx;margin-left: 40upx;margin-top: 20upx;z-index: 999;"
+          :disabled="disabled">提交</button>
       </form>
       <view v-if="isnpms" class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
         <view class="cu-dialog" style="border-radius: 1;height: 92%;">
@@ -93,6 +94,20 @@
           </scroll-view>
         </view>
       </view>
+      <!-- 提示框 -->
+      <view class="cu-modal" :class="modalName2=='Modal'?'show':''">
+        <view class="cu-dialog">
+          <view class="cu-bar bg-white justify-end">
+            <view class="content">错误提示</view>
+            <view class="action" @tap="hideModal">
+              <text class="cuIcon-close text-red"></text>
+            </view>
+          </view>
+          <view class="padding-xl">
+            {{ ingonh }}
+          </view>
+        </view>
+      </view>
     </view>
   </view>
 </template>
@@ -108,6 +123,7 @@
       return {
         modalName: null,
         modalName1: null,
+        modalName2: null,
         picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
         index1: -1,
         index2: -1,
@@ -127,6 +143,8 @@
         mapShow: true,
         positionObj: {},
         isnpms: false,
+        ingonh: '',
+        disabled: false,
       };
     },
     methods: {
@@ -182,36 +200,32 @@
           devicemonad: this.danweiid,
           uid: this.addUserDeviceid,
         }
-        uni.showLoading({
-          title: '加载中'
-        });
-        // if (this.isdatadevice(data)) {
-        let opts = {
-          url: 'devices/adddevice',
-          method: 'post'
-        };
-        http.httpRequest(opts, data).then(res => {
-          if (res.data.code === 200) {
-            uni.hideLoading();
-            uni.removeStorageSync('longitislongir');
-            uni.navigateTo({
-              url: '/pages/main/main',
-            });
-          } else {
-            uni.hideLoading();
-            if (uni.getSystemInfoSync().platform == "Android" || uni.getSystemInfoSync().platform == "iOS") {
-              plus.nativeUI.toast(this.errorsshow(res.data.errors));
-            } else {
-              uni.showToast({
-                title: this.errorsshow(res.data.errors),
-                duration: 2000
+        if (this.isdatadevice(data)) {
+          uni.showLoading({
+            title: '加载中'
+          });
+          this.disabled = true;
+          let opts = {
+            url: 'devices/adddevice',
+            method: 'post'
+          };
+          http.httpRequest(opts, data).then(res => {
+            if (res.data.code === 200) {
+              uni.hideLoading();
+              this.disabled = false;
+              uni.removeStorageSync('longitislongir');
+              uni.navigateTo({
+                url: '/pages/main/main',
               });
+            } else {
+              this.disabled = false;
+              uni.hideLoading();
+              this.onshowToast(this.errorsshow(res.data.errors));
             }
-          }
-        }, error => {
-          console.log(error);
-        })
-        // }
+          }, error => {
+            console.log(error);
+          })
+        }
       },
       // 更新地址并关闭地图
       updateAddress(addressObj) {
@@ -235,6 +249,7 @@
       hideModal(e) {
         this.modalName = null;
         this.isnpms = false;
+        this.modalName2 = null;
       },
       larces(e) {
         console.log(e);
@@ -339,14 +354,8 @@
       },
       //显示提示信息
       onshowToast(data) {
-        uni.showToast({
-          title: data,
-          duration: 2000
-        });
-      },
-      //将手机竖屏回来
-      starye(){
-        plus.screen.lockOrientation('portrait-primary');
+        this.modalName2 = "Modal";
+        this.ingonh = data;
       },
     },
     created() {
@@ -356,7 +365,6 @@
     },
   }
 </script>
-
 <style>
   .content {
     display: flex;

pages/adddevice/latitude.vue

@@ -20,14 +20,8 @@
       plus.screen.lockOrientation('landscape-primary')
     },
     //监听安卓返回键
-    onBackPress() {
-      const that = this;
-      var pages = getCurrentPages(); //当前页面栈  
-      if (pages.length > 1) {
-        var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象 
-         console.log(beforePage);
-        // beforePage.$vm.(); //触发父页面中的方法change()  
-      }
+    onBackPress() {
+      getApp().islockOrientation();
     },
   }
 </script>

pages/basics/home.vue

@@ -541,8 +541,6 @@
       this.devicetypes();
       this.devicelist();
       this.isapp();
-      var info = plus.push.getClientInfo();
-      console.log(JSON.stringify(info));
     },
     onLaunch() {
       console.log("success")

pages/login/login.vue

@@ -10,6 +10,9 @@
         <button class="zai-btn" form-type="submit">立即登录</button>
       </view>
     </form>
+    <view style="position: absolute;left: 50%;top: 50%;margin-top: 590upx;margin-left: -40upx;" @click="isuserlogin()">
+      <image src="/static/userlogin.png" mode="aspectFit" style="width: 80upx; height: 80upx;"></image>
+    </view>
     <!-- 加载 -->
     <view class="loading-white" v-if="loadingwhite">
       <image src="/static/loading-white.gif" mode="aspectFit"></image>
@@ -320,7 +323,7 @@
         this.reset = false;
       },
       //监测网络状态
-      ifwifi() {
+      ifwifi() {
         let that = this;
         uni.getNetworkType({
           success: function(res) {
@@ -328,12 +331,19 @@
               uni.navigateTo({
                 url: '../wifiisin/home'
               });
-            }else{
-              // 监测登入
-              that.showislogin();
+            } else {
+              // 监测登入
+              that.showislogin();
             }
           }
         });
+      },
+      isuserlogin() {
+        uni.navigateTo({
+          url: '/pages/login/userlogin',
+          animationType:'pop-in',
+          animationDuration:200,
+        });
       }
     },
     mounted() {},

pages/userme/userme.vue

@@ -12,7 +12,6 @@
         class="gif-wave"></image> -->
     </view>
     <!-- 用户信息end -->
-
     <view class="padding flex text-center text-grey bg-white shadow-warp">
 
       <view class="flex flex-sub flex-direction solid-right" bindtap='toPraise'>
@@ -32,8 +31,6 @@
       </view>
 
     </view>
-
-
     <!-- 设置详细 -->
     <view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
       <view class="cu-item arrow">
@@ -63,10 +60,10 @@
       </view>
     </view>
     <view class="cu-tabbar-height"></view>
-    <!-- 设置详细end -->
+    <!-- 设置详细end -->
+    
   </view>
 </template>
-
 <script>
   import http from '@/components/utils/http.js';
   export default {

pages/wifiisin/home.vue

 <template>
-  <view style="margin-left: 10%;vertical-align: middle;position: absolute;top: 10%;">
-    <image src="/static/togif/iswifinone.gif"></image>
-    <view style="margin-top: 450upx;">
+  <view>
+    <view style="padding-top: 90upx;margin-left: 30upx;">
+      <image src="/static/togif/iswifinone.gif"></image>
+    </view>
+    <view style="margin-top: 400upx; width: 90%; margin-left: 35upx;">
       <button @click="iswifi" class="cu-btn block bg-blue margin-tb-sm lg">刷新</button>
     </view>
   </view>