Merge branch 'wangying' of http://192.168.2.91/gitlab/iot-project-js/doorlock into zjx

# Conflicts:
#	dev/src/lang/zh.json
#	dev/src/view/addDevice/v_wifiAdd.js
#	dev/src/view/device/v_index.js
#	dev/src/view/device/v_remoteOpendoor.js
#	web/resources/lang/zh.json
#	web/view/device/index.html
#	web/view/myInfo/index.html

History.md

-1.0.6 / 2017-09-25
+1.0.8 / 2017-10-10
+
+==================
+ * 1.上传门锁用户、门锁管理框架（标签、多语言、基本功能）
+ * 2.主页添加绑定门锁
+
+1.0.7 / 2017-09-30
+
+==================
+ * 1.智能指纹锁页面添加动画效果
+
+1.0.6 / 2017-09-25
 
 ==================
  * 1.修改智能指纹锁页面样式

dev/src/view/myInfo/v_editPassword.js → dev/src/view/doorlockUsers/v_addUnlockInfo.js

 /**
-* v_editPassword.js
+* v_addUnlockInfo.js
 * Version: 0.1
-* User: zjx
-* Date: 2017-09-29
+* User: wy
+* Date: 2017-10-09
 * Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
-* 引导页面
+* 绑定开锁信息页面
 */
 
 import {iot, uPublic, uComponents} from '../../public/public.js';
 
 iot.ready(init);
 function init() {
-    //通用 dialog、loading组件
-    uPublic.componentsInit(['u-dialog','u-loading','u-text']);
+    //通用 select、按钮、dialog、loading组件
+    uPublic.componentsInit(['u-select','u-button','u-dialog','u-loading']);
     const app = new Vue({
         data:{     
+            recordSelectIndex: 0,
+            recordSelectList: [],                                 
             //配置组件
-            textNewPassword: null,
-            textOldPassword: null,
-            textOldPasswordAgain: null,
-            textErrorTip: '密码不能为空',
             componentsConfig: initComponentsConfig()   
         },
         mounted(){           
-        	
         },
         methods:{
-        	onSaveTap(){
-        		saveTap();
-        	},
+            //tap <
             onBackTap(){
                 backTap();
+            },
+            onRecordSelectChange(value) {
+                recordSelectChange(this, value);
+            },
+            //tap 添加
+            onAddButtonTap(){
+                addButtonTap();
             }                                     
         }   
     }).$mount('#app');
@@ -39,29 +41,22 @@ function init() {
 //配置组件参数
 function initComponentsConfig() {
     return {
-    	newPassword: {
-            initParam: {
-                class: 'custom-editPassword-text',
-                placeholder: Vue.t('editPassword.newPasswordInputTip')
-            }
-        },
-        oldPassword: {
+        recordSelect: {
             initParam: {
-                class: 'custom-editPassword-text',
-                placeholder: Vue.t('editPassword.oldPasswordInputTip')
+                class: 'custom-select',
+                list: [
+                    {value: 1, title: '16:35',subtitle: 'ID:001'},
+                    {value: 2, title: '15:33',subtitle: 'ID:002'},
+                    {value: 3, title: '15:06',subtitle: 'ID:007'}
+                ],
+                pagesize: Number.MAX_VALUE
             }
         },
-        oldPasswordAgain: {
-            initParam: {
-                class: 'custom-editPassword-text',
-                placeholder: Vue.t('editPassword.oldPasswordInputTipAgain')
-            }
-        },
-        //保存 button 参数
-        saveButton: {   
+        //添加 button 参数
+        addButton: {   
             initParam: {
                 class: 'custom-button',
-                text: Vue.t('btn.save')
+                text: Vue.t('btn.add')
             }
         },
         dialog: {
@@ -77,12 +72,17 @@ function initComponentsConfig() {
     }
 }
 
-//保存昵称
-function saveTap(){
+//tap <
+function backTap(){
+    iot.navigator.back();
+}
 
+function recordSelectChange(self, value) {
+    self.recordSelectIndex = value;
+    console.log('recordSelectChange:' + self.recordSelectIndex);
 }
 
-//返回上一页
-function backTap(){
+//tap 添加 
+function addButtonTap(){
     iot.navigator.back();
 }
\ No newline at end of file

dev/src/view/doorlockUsers/v_addUser.js

+/**
+* v_addUser.js
+* Version: 0.1
+* User: wy
+* Date: 2017-10-09
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 添加用户页面
+*/
+
+import {iot, uPublic, uComponents} from '../../public/public.js';
+
+iot.ready(init);
+function init() {
+    //通用 input、按钮、dialog、loading组件
+    uPublic.componentsInit(['u-text','u-button','u-dialog','u-loading']);
+    const app = new Vue({
+        data:{  
+            textName: null,  
+            textErrorTip: null,
+            //配置组件
+            componentsConfig: initComponentsConfig()  
+        },
+        mounted(){           
+        },
+        methods:{
+            //tap <
+            onBackTap(){
+                backTap();
+            },            
+            onNameChange(text){
+                nameChange(this,text);            
+            },        
+            //tap 确定
+            onConfirmButtonTap(){
+                confirmButtonTap();
+            }                      
+        }   
+    }).$mount('#app');
+}
+
+//配置组件参数
+function initComponentsConfig() {
+    return {
+        nameInput: {
+            initParam: {
+                class: 'custom-text',
+                icon: '&#xe6b0;',
+                placeholder: Vue.t('addUser.nameInputTip')
+            }
+        },
+        //确定 button 参数
+        confirmButton: {   
+            initParam: {
+                class: 'custom-button',
+                text: Vue.t('btn.confirm')
+            }
+        },      
+        dialog: {
+            initParam: {
+                class: 'custom-dialog'
+            }
+        },
+        loading: {
+            initParam: {
+                class: 'custom-loading'
+            }
+        }               
+    }
+}
+
+//tap <
+function backTap(){
+    iot.navigator.back();
+}
+
+function nameChange(self,text){
+    self.textName = text;
+    console.log('nameChange: ' + self.textName);
+}
+
+//tap 确定
+function confirmButtonTap(){
+    iot.navigator.openWindow({
+        url: './doorlockUsers.html',
+        id: 'doorlockUsers'
+    });
+}
\ No newline at end of file

dev/src/view/doorlockUsers/v_doorlockUsers.js

+/**
+* v_doorlockUsers.js
+* Version: 0.1
+* User: wy
+* Date: 2017-10-09
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 门锁用户页面
+*/
+
+import {iot, uPublic, uComponents} from '../../public/public.js';
+
+iot.ready(init);
+function init() {
+    //通用 按钮、dialog、loading组件
+    uPublic.componentsInit(['u-button','u-dialog','u-loading']);
+    const app = new Vue({
+        data:{ 
+            userInfo: {
+                image: '../../resources/image/gray_unbindHead_icon.png',
+                role: 1,
+                title: '我是个用户二号',
+                subtitle: ''
+            },
+            bindShowFlag: true,  
+            unbindShowFlag: false,
+            stateShowFlag: false,
+            guideShowFlag: false,   
+            guideStep1ShowFlag: false, 
+            guideStep2ShowFlag: false,  
+            guideStep3ShowFlag: false,   
+            guideStep4ShowFlag: false,
+            //配置组件
+            componentsConfig: initComponentsConfig()   
+        },
+        mounted(){           
+        },
+        methods:{
+            getBindShowFlag(){
+                return this.bindShowFlag;
+            },
+            setBindShowFlag(boolean){
+                this.bindShowFlag = boolean;
+            },
+            getUnbindShowFlag(){
+                return this.unbindShowFlag;
+            },
+            setUnbindShowFlag(boolean){
+                this.unbindShowFlag = boolean;
+            },
+            getStateShowFlag(){
+                return this.stateShowFlag;
+            },
+            setStateShowFlag(boolean){
+                this.stateShowFlag = boolean;
+            },
+            getGuideShowFlag(){
+                return this.guideShowFlag;
+            },
+            setGuideShowFlag(boolean){
+                this.guideShowFlag = boolean;
+            },
+            getGuideStep1ShowFlag(){
+                return this.guideStep1ShowFlag;
+            },
+            setGuideStep1ShowFlag(boolean){
+                this.guideStep1ShowFlag = boolean;
+            },
+            getGuideStep2ShowFlag(){
+                return this.guideStep2ShowFlag;
+            },
+            setGuideStep2ShowFlag(boolean){
+                this.guideStep2ShowFlag = boolean;
+            },
+            getGuideStep3ShowFlag(){
+                return this.guideStep3ShowFlag;
+            },
+            setGuideStep3ShowFlag(boolean){
+                this.guideStep3ShowFlag = boolean;
+            },
+            getGuideStep4ShowFlag(){
+                return this.guideStep4ShowFlag;
+            },
+            setGuideStep4ShowFlag(boolean){
+                this.guideStep4ShowFlag = boolean;
+            },
+            //tap <
+            onBackTap(){
+                backTap();
+            },
+            onEditNameTap(){
+                editNameTap();
+            },
+            //tap 邀请绑定
+            onBindTap(){
+                bindTap();
+            },
+            //tap 解绑
+            onUnbindButtonTap(){
+                unbindButtonTap(this);
+            },
+            //tap 绑定开锁信息
+            onBindUnlockInfoTap(){
+                bindUnlockInfoTap();
+            },
+            //tap 历史开门记录
+            onOpendoorRecordTap(){
+                opendoorRecordTap();
+            },
+            //tap 删除该用户
+            onDeleteUserButtonTap(){
+                deleteUserButtonTap(this);
+            },
+            onUnbindStateDialogTap(){
+                unbindStateDialogTap(this);
+            },
+            //tap 下一步
+            onNextButtonTap(){
+                nextButtonTap(this);
+            },
+            //tap 我知道了
+            onISeeButtonTap(){
+                iSeeButtonTap(this);
+            }                
+        }   
+    }).$mount('#app');
+}
+
+//配置组件参数
+function initComponentsConfig() {
+    return {
+        //解绑 button 参数
+        unbindButton: {   
+            initParam: {
+                class: 'custom-unbind-button',
+                text: Vue.t('btn.unbind')
+            }
+        }, 
+        //删除该用户 button 参数
+        deleteUserButton: {   
+            initParam: {
+                class: 'custom-button',
+                text: Vue.t('btn.deleteUser')
+            }
+        }, 
+        //下一步 button 参数
+        nextButton: {   
+            initParam: {
+                class: 'custom-dialog-button',
+                text: Vue.t('btn.next')
+            }
+        },
+        //我知道了 button 参数
+        iSeeButton: {   
+            initParam: {
+                class: 'custom-dialog-button',
+                text: Vue.t('btn.iSee')
+            }
+        },     
+        dialog: {
+            initParam: {
+                class: 'custom-dialog'
+            }
+        },
+        loading: {
+            initParam: {
+                class: 'custom-loading'
+            }
+        }               
+    }
+}
+
+//tap <
+function backTap(){
+    iot.navigator.back();
+}
+
+function editNameTap(){
+    iot.navigator.openWindow({
+        url: './editName.html',
+        id: 'editName'
+    });
+}
+
+//tap 邀请绑定
+function bindTap(){
+    iot.navigator.openWindow({
+        url: './inviteBind.html',
+        id: 'inviteBind'
+    });
+}
+
+//tap 解绑
+function unbindButtonTap(self){
+    uComponents.openConfirm(self, Vue.t('doorlockUsers.unbindDialogTip'),
+                           {text: Vue.t('dialog.cancel'), callback: function () {}},
+                           {text: Vue.t('dialog.unbind'), callback: function () {
+                                self.setStateShowFlag(true);
+                           }}
+    );
+}
+
+function unbindStateDialogTap(self){
+    self.setStateShowFlag(false);
+    self.setBindShowFlag(true);
+    self.setUnbindShowFlag(false);
+}
+
+//tap 绑定开锁信息
+function bindUnlockInfoTap(){
+    iot.navigator.openWindow({
+        url: './unlockInfo.html',
+        id: 'unlockInfo'
+    });
+}
+
+//tap 历史开门记录
+function opendoorRecordTap(){
+    iot.navigator.openWindow({
+        url: '../device/opendoorRecord.html',
+        id: 'opendoorRecord'
+    });
+}
+
+//tap 删除该用户
+function deleteUserButtonTap(self){
+    uComponents.openConfirm(self, Vue.t('doorlockUsers.deleteUserDialogTip'),
+                           {text: Vue.t('dialog.cancel'), callback: function () {}},
+                           {text: Vue.t('dialog.delete'), callback: function () {}}
+    );
+}
+
+//tap 下一步
+function nextButtonTap(self){
+    self.setGuideStep1ShowFlag(false);
+    self.setGuideStep2ShowFlag(false);
+    self.setGuideStep3ShowFlag(true);
+    self.setGuideStep4ShowFlag(true);
+}
+
+//tap 我知道了
+function iSeeButtonTap(self){
+    self.setGuideShowFlag(false);
+}
\ No newline at end of file

dev/src/view/doorlockUsers/v_editName.js

+/**
+* v_editName.js
+* Version: 0.1
+* User: wy
+* Date: 2017-10-09
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 修改名称页面
+*/
+
+import {iot, uPublic, uComponents} from '../../public/public.js';
+
+iot.ready(init);
+function init() {
+    //通用 input、dialog、loading组件
+    uPublic.componentsInit(['u-text','u-dialog','u-loading']);
+    const app = new Vue({
+        data:{  
+            textName: '我是个用户二号',  
+            textErrorTip: null,
+            //配置组件
+            componentsConfig: initComponentsConfig()  
+        },
+        mounted(){           
+        },
+        methods:{
+            //tap <
+            onBackTap(){
+                backTap();
+            }, 
+            //tap 保存
+            onSaveTap(){
+                saveTap();
+            },           
+            onNameChange(text){
+                nameChange(this,text);            
+            }                     
+        }   
+    }).$mount('#app');
+}
+
+//配置组件参数
+function initComponentsConfig() {
+    return {
+        nameInput: {
+            initParam: {
+                class: 'custom-text',
+                placeholder: Vue.t('editName.nameInputTip')
+            }
+        },      
+        dialog: {
+            initParam: {
+                class: 'custom-dialog'
+            }
+        },
+        loading: {
+            initParam: {
+                class: 'custom-loading'
+            }
+        }               
+    }
+}
+
+//tap <
+function backTap(){
+    iot.navigator.back();
+}
+
+//tap 保存
+function saveTap(){
+    iot.navigator.back();
+}
+
+function nameChange(self,text){
+    self.textName = text;
+    console.log('nameChange: ' + self.textName);
+}
\ No newline at end of file

dev/src/view/doorlockManage/v_qrcode.js → dev/src/view/doorlockUsers/v_inviteBind.js

 /**
-* v_qrcode.js
+* v_inviteBind.js
 * Version: 0.1
 * User: wy
-* Date: 2017-09-06
+* Date: 2017-10-09
 * Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
-* 生成绑定二维码页面
+* 邀请绑定页面
 */
 
-var QRCode = require('qrcode');
-console.log(QRCode);
 import {iot, uPublic, uComponents} from '../../public/public.js';
+
 iot.ready(init);
 function init() {
     //通用 按钮、dialog、loading组件
@@ -17,34 +16,18 @@ function init() {
     const app = new Vue({
         data:{  
             //配置组件
-            componentsConfig: initComponentsConfig(),     
-            //页面传递参数
-            extras: [],
-            uuid: null,
-            qrCodeDisabled: false
+            componentsConfig: initComponentsConfig()  
         },
         mounted(){           
-        	this.extras = iot.navigator.getExtras();
-        	console.log(this.extras);
-        	this.setUuid(this.extras.uuid);
         },
         methods:{
-        	getUuid(){
-        		return this.uuid;
-        	},
-        	setUuid(id){
-        		this.uuid = id;
-        	},
-        	setQrCodeDisabled(boolean){
-        		this.qrCodeDisabled = boolean;
-        	},
             //tap <
             onBackTap(){
                 backTap();
             },          
-            //tap 生成二维码
+            //tap 重新生成二维码
             onQRcodeButtonTap(){
-                qrcodeButtonTap(this);
+                qrcodeButtonTap();
             }                      
         }   
     }).$mount('#app');
@@ -53,11 +36,11 @@ function init() {
 //配置组件参数
 function initComponentsConfig() {
     return {
-        //生成二维码 button 参数
+        //重新生成二维码 button 参数
         qrcodeButton: {   
             initParam: {
                 class: 'custom-button',
-                text: Vue.t('btn.qrcode')
+                text: Vue.t('btn.qrcodeReset')
             }
         },      
         dialog: {
@@ -78,41 +61,7 @@ function backTap(){
     iot.navigator.back();
 }
 
-//tap 生成二维码
-function qrcodeButtonTap(self){
-	uComponents.showLoading(self);
-	iot.business.sds.saveqr({
-	    data: {
-	        uuid: self.getUuid()
-	    },
-	    success: (response) => {
-	    	let data = uPublic.checkResponseData(response.data);
-	    	if(data){
-	    		let qrKey = response.data.qrKey;
-				let qr = self.$refs.qrcode;
-				QRCode.toCanvas(qr, qrKey, {
-					scale: 5,
-					margin: 2
-				},(error) => {
-			        if (error) {
-			          console.log(error)
-			        } else {
-			          console.log('success');
-			          uComponents.hideLoading(self);
-			          qr.style.width = "5.280rem";
-			          qr.style.height = "5.280rem";
-			          console.log(qr.style);
-			          setTimeout(() => {
-			          	self.setQrCodeDisabled(true);
-			          },1000*60*10);
-			        }
-			    });
-	    	}else{}
-	    },
-	    error: (error) => {
-	    	console.log(error);
-	    	//请求失败
-    		uPublic.openRequestErrorAlert(self);
-	    }
-	});
+//tap 重新生成二维码
+function qrcodeButtonTap(){
+    alert('重新生成二维码');
 }
\ No newline at end of file

dev/src/view/doorlockUsers/v_unlockInfo.js

+/**
+* v_unlockInfo.js
+* Version: 0.1
+* User: wy
+* Date: 2017-10-09
+* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
+* 绑定开锁信息页面
+*/
+
+import {iot, uPublic, uComponents} from '../../public/public.js';
+
+iot.ready(init);
+function init() {
+    //通用 dialog、loading组件
+    uPublic.componentsInit(['u-dialog','u-loading']);
+    const app = new Vue({
+        data:{ 
+            unlockInfoList: [{value: 1, title: '指纹1', rightText: 123456},
+                             {value: 2, title: '指纹2', rightText: 123456}],
+            loadShowFlag: false,
+            loadFlag: false,
+            loadText: Vue.t('scroll.clickToLoadMore'),
+            pagesize: 10,
+            tip: Vue.t('unlockInfo.noInfoTip'),                                   
+            //配置组件
+            componentsConfig: initComponentsConfig()   
+        },
+        mounted(){           
+        },
+        methods:{
+            //tap <
+            onBackTap(){
+                backTap();
+            },
+            //tap 添加
+            onAddTap(){
+                addTap();
+            }, 
+            onTapLoad(){
+                tapLoad();
+            }                          
+        }   
+    }).$mount('#app');
+}
+
+//配置组件参数
+function initComponentsConfig() {
+    return {
+        dialog: {
+            initParam: {
+                class: 'custom-dialog'
+            }
+        },
+        loading: {
+            initParam: {
+                class: 'custom-loading'
+            }
+        }               
+    }
+}
+
+//tap <
+function backTap(){
+    iot.navigator.back();
+}
+
+//tap 添加 
+function addTap(){
+    iot.navigator.openWindow({
+        url: './addUnlockInfo.html',
+        id: 'addUnlockInfo'
+    });
+}
+
+//点击加载更多
+function tapLoad(){
+    if (!self.loadFlag) {
+        self.loadText = Vue.t('scroll.loading');
+        self.loadFlag = true;
+        //再次发送获取用户列表请求
+    }
+}
\ No newline at end of file

dev/src/view/myInfo/v_editNickname.js

-/**
-* v_editNickname.js
-* Version: 0.1
-* User: zjx
-* Date: 2017-09-29
-* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
-* 引导页面
-*/
-
-import {iot, uPublic, uComponents} from '../../public/public.js';
-
-iot.ready(init);
-function init() {
-    //通用 dialog、loading组件
-    uPublic.componentsInit(['u-dialog','u-loading','u-text']);
-    const app = new Vue({
-        data:{          
-            //配置组件
-            textNickName: iot.navigator.getExtras().nickname,
-            textErrorTip: null,
-            componentsConfig: initComponentsConfig()   
-        },
-        mounted(){
-        },
-        methods:{
-        	getTextNickName(){
-        		return this.textNickName;
-        	},
-        	setTextNickName(text){
-        		this.textNickName = this;
-        	},
-        	onSaveTap(){
-        		saveTap(this);
-        	},
-        	onBackTap(){
-        		backTap();
-        	},
-        	onNicknameChange(text){
-        		nicknameChange(this, text);
-        	}
-        }   
-    }).$mount('#app');
-}
-
-//配置组件参数
-function initComponentsConfig() {
-    return {
-    	nameInput: {
-            initParam: {
-                class: 'custom-editNickname-text',
-                placeholder: Vue.t('editNickname.nickNameInputTip')
-            }
-        },
-        //保存 button 参数
-        saveButton: {   
-            initParam: {
-                class: 'custom-button',
-                text: Vue.t('btn.save')
-            }
-        },
-        dialog: {
-            initParam: {
-                class: 'custom-dialog'
-            }
-        },
-        loading: {
-            initParam: {
-                class: 'custom-loading'
-            }
-        }
-    }
-}
-
-
-//保存昵称
-function saveTap(self){
-	if(self.textNickName == null || self.textNickName.trim() == ''){
-		self.textErrorTip = Vue.t('editNickname.nickNameInputTip');
-	}else{
-		uComponents.showLoading(self);
-		iot.business.user.setInfo({
-		    data: {
-		        nickname: self.textNickName,
-		        head: '',
-		        info: {}
-		    },
-		    success: (response) => {
-		    	if(response.data = 'success'){
-					iot.navigator.fire(plus.webview.currentWebview().opener(),'returnPage',{
-//						name: 'zhu'
-					});
-		    		iot.navigator.back();
-		    	}
-		    },
-		    error: (error) => {
-		    	console.log(error);
-		    },
-		    complete: () => {
-				uComponents.hideLoading(self);
-		    }
-		});
-	}
-}
-
-//返回上一页
-function backTap(){
-	iot.navigator.back();
-}
-
-function nicknameChange(self, text){
-	self.textNickName = text;
-	self.textErrorTip = '';
-}

dev/src/view/myInfo/v_index.js

-/**
-* v_index.js
-* Version: 0.1
-* User: zjx
-* Date: 2017-09-26
-* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
-* 引导页面
-*/
-
-import {iot, uPublic, uComponents} from '../../public/public.js';
-
-iot.ready(init);
-function init() {
-    //通用 dialog、loading组件
-    uPublic.componentsInit(['u-dialog','u-loading']);
-    const app = new Vue({
-        data:{          
-            //配置组件
-            nickname: 'bank',
-            componentsConfig: initComponentsConfig()   
-        },
-        mounted(){
-        	let self  = this;
-        	getInfo(this);
-			window.addEventListener('returnPage',function(event){
-				console.log("in");
-				getInfo(self);
-			});
-        },
-        methods:{
-        	//tap 修改昵称
-        	onEditNicknameTap(){
-        		editNicknameTap(this);
-        	},
-        	//tap 修改密码
-        	onEditPasswordTap(){
-        		editPasswordTap();
-        	},
-        	onBackTap(){
-        		backTap();
-        	}
-        }   
-    }).$mount('#app');
-}
-
-//配置组件参数
-function initComponentsConfig() {
-    return {
-    	loading: {
-            initParam: {
-                class: 'custom-loading'
-            }
-        }
-    }
-}
-
-//tap 修改昵称
-function editNicknameTap(self){
-	iot.navigator.openWindow({
-        url: '../myInfo/editNickname.html',
-        id: 'editNickname',
-		extras: {
-			nickname: self.nickname
-		}
-    });
-}
-
-//tap 修改密码
-function editPasswordTap(){
-	iot.navigator.openWindow({
-        url: '../myInfo/editPassword.html',
-        id: 'editPassword'
-    });
-}
-
-function backTap(){
-	iot.navigator.back();
-}
-
-function getInfo(self){
-	iot.business.user.getInfo({
-	    success: (response) => {
-	    	let data = uPublic.checkResponseData(response.data);
-			if(data){
-				console.log(data);
-	    		self.nickname = data.nickname;
-			}else{
-				
-			}
-	    },
-	    error: (error) => {},
-	    complete: () => {}
-	});
-}

web/lib/less/device/device.less

@@ -89,6 +89,16 @@
 			background-repeat: no-repeat;
 			background-color: #242635;
 			.background-size(80px 80px);
+			&:before,
+			&:after{
+			    content: '';
+			    position: absolute;
+			    top: 0;
+			    left: 0;
+			    width: 100%;
+			    height: 100%;
+			    border-radius: 50%;
+			}
 			p{
 				position: absolute;
 			    top: 30px;
@@ -96,7 +106,7 @@
 				right: 0;
 				margin: 0 auto;
 				.bgImgSize(40px,40px,"green_doorbell_icon.png",center,cover);
-				.transform-origin(top center);
+				.transform-origin(center 5px);
 			}
 	    }
 	}
@@ -113,6 +123,31 @@
 	}
 }
 
+.active .doorbellCircle .doorbell{
+	&:before,
+	&:after{
+		.animation(aperture 2s linear infinite);
+	}
+	&:after{
+		.animation-delay(-1s);
+	}
+	p{
+		.animation(shake 1s linear infinite);
+	}
+}
+
+.keyframes(shake,{
+	0%,50%,100%{
+		.transform(rotate(0deg));
+	}
+	25%{
+		.transform(rotate(-30deg));
+	}
+	75%{
+		.transform(rotate(30deg));
+	}
+});
+
 .batteryState{
 	text-align: right;
 	padding-right: 22px;
@@ -283,7 +318,7 @@
 	    height: 55px;
 	    border-width: 1px;/*no*/
     	border-radius: 50%;
-	    margin-right: 6px;
+	    margin-right: 7px;
 	    display: inline-block;
 	    vertical-align: middle;
     	&:before{
@@ -337,7 +372,7 @@
 	content: '\e681';
 	position: absolute;
 	top: 0;
-    right: 52px;
+    right: 104px;
 	.iconfont(@NEWMSG-ICON-FONTSIZE);
 	color: @NEWMSG-ICON-COLOR;
 	z-index: 3;

web/lib/less/doorlockManage/doorlockManage.less

@@ -161,3 +161,7 @@
 .errorTip{
     .errorTip();
 }
+
+.unbindState-dialog{
+    .mask();
+}
\ No newline at end of file

web/lib/less/doorlockUsers/doorlockUsers.less

 @import "../public/public.less";
 @import "../public/header.less";
 
-//侧滑列表
-    .user-list{
-        width: 100%;
-        height: 100%;
-        overflow: auto;
-        position: absolute;
-        top: 44px;
-        bottom: 0;
-        left: 0;
-        height: auto;   
-    }   
-    .user-list-scroll .user-list-row{     
-        position: relative;
-        overflow: hidden;
-        .user-list-handle{
-            position: relative;
-            .transition(left 0.4s ease);
-            left: 0;
-            background-color: @BODY-BG-COLOR;
-            padding: 15px 20px;
-            .display-box();
-            .box-vertical-alignment();
-            z-index: 2;
-            .user-list-image{
-                width: 50px;
-                height: 50px;
-                margin-right: 10px;
-            }   
-            .user-list-icon{
-                margin-right: 10px;
-                .iconfont(@SWIPELIST-COMPONENT-ICON-FONTSIZE);
-            }
-            div{
-                .flex();
-                min-width: 0;
-            }
-            .user-list-title{
-                .text_oneRow_ellipsis();
-            }   
-            .user-sub-image{
-                width: 17px;
-                height: 17px;
-            }
-            .user-list-subtitle{
-                .text_oneRow_ellipsis();
-                display: inline-block;
-            }   
-            &.user-list-selected{
-                left: -120px;
-            }  
-            &:after{
-                content: "\e611";
-                display: block;
-                .iconfont(@TEXT-COMPONENT-ICON-FONTSIZE);
-                .transform(rotate(180deg));
-            }                    
-        }
-        .user-list-button{
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            right: 0;
-            z-index: 1;
-            div{
-                width: 60px;
-                height: 100%;
-                .display-box();
-                .box-horizontal-alignment();
-                .box-vertical-alignment();
-                color: @SWIPELIST-COMPONENT-BUTTON-COLOR;
-                float: left;
-                &:nth-last-of-type(1){
-                    background-color: transparent;
-                    .iconfont(@TEXT-COMPONENT-ICON-FONTSIZE);
-                    color: #00FFFF;
-                }
-            }
-        }                   
-        &:after{
-            .defaultBorder();
-            z-index: 2;
-            .white_gradient_border();
-        }
-    }
+.u-text();
+
+.u-button();
+
+.unbindState-dialog{
+	.mask();
+}
+
+.guide-dialog{
+	.mask();
+}
\ No newline at end of file

web/lib/less/doorlockUsers/unlockInfo.less

+@import "../public/public.less";
+@import "../public/header.less";
+
+.u-select();
+
+.u-button();
\ No newline at end of file

web/lib/less/doorlockUsers/userList.less

+@import "../public/public.less";
+@import "../public/header.less";
+
+//侧滑列表
+.user-list{
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    position: absolute;
+    top: 44px;
+    bottom: 0;
+    left: 0;
+    height: auto;   
+}   
+.user-list-scroll .user-list-row{     
+    position: relative;
+    overflow: hidden;
+    .user-list-handle{
+        position: relative;
+        .transition(left 0.4s ease);
+        left: 0;
+        background-color: @BODY-BG-COLOR;
+        padding: 15px 20px;
+        .display-box();
+        .box-vertical-alignment();
+        z-index: 2;
+        .user-list-image{
+            width: 50px;
+            height: 50px;
+            margin-right: 10px;
+        }   
+        .user-list-icon{
+            margin-right: 10px;
+            .iconfont(@SWIPELIST-COMPONENT-ICON-FONTSIZE);
+        }
+        div{
+            .flex();
+            min-width: 0;
+        }
+        .user-list-title{
+            .text_oneRow_ellipsis();
+        }   
+        .user-sub-image{
+            width: 17px;
+            height: 17px;
+        }
+        .user-list-subtitle{
+            .text_oneRow_ellipsis();
+            display: inline-block;
+        }   
+        &.user-list-selected{
+            left: -120px;
+        }  
+        &:after{
+            content: "\e611";
+            display: block;
+            .iconfont(@TEXT-COMPONENT-ICON-FONTSIZE);
+            .transform(rotate(180deg));
+        }                    
+    }
+    .user-list-button{
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        z-index: 1;
+        div{
+            width: 60px;
+            height: 100%;
+            .display-box();
+            .box-horizontal-alignment();
+            .box-vertical-alignment();
+            color: @SWIPELIST-COMPONENT-BUTTON-COLOR;
+            float: left;
+            &:nth-last-of-type(1){
+                background-color: transparent;
+                .iconfont(@TEXT-COMPONENT-ICON-FONTSIZE);
+                color: #00FFFF;
+            }
+        }
+    }                   
+    &:after{
+        .defaultBorder();
+        z-index: 2;
+        .white_gradient_border();
+    }
+}
\ No newline at end of file

web/view/device/remoteOpendoor.html

@@ -32,6 +32,11 @@
             </div>
             <u-button :init-param="componentsConfig.confirmButton.initParam" v-on:u-button-tap="onConfirmButtonTap"></u-button>
         </div>
+        <u-commstatus-loading ref="ucommstatusloading" :text="textLoading"  :status="status" 
+            :init-param="componentsConfig.ucommstatusloading.initParam" v-on:u-commstatus-loading-tap="onCommstatusLoadingButtonTap()">
+            <p class="loader"></p>
+            <p class="icon"></p>
+        </u-commstatus-loading>  
         <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
         <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
     </div>

web/view/doorlockManage/doorlockManage.css~HEAD

-@font-face {
-  font-family: 'defaultIconfont';
-  src: url('../../resources/font/defaultIconfont.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'iconfont';
-  src: url('//at.alicdn.com/t/font_372681_ifeqlzhn1k9e8kt9.ttf') format('truetype');
-}
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-}
-
-body {
-  -webkit-user-select: none;
-  user-select: none;
-  color: #fff;
-  font-size: 0.373rem;
-  background: -webkit-linear-gradient(left, #242635, #fff, #242635);
-  background: linear-gradient(to right, #242635, #fff, #242635);
-  background-color: #242635;
-  -webkit-background-size: 100% 1px;
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-  background-position: bottom center;
-}
-
-ul {
-  padding-left: 0;
-  list-style: none;
-  margin-bottom: 0;
-}
-
-p {
-  margin-bottom: 0;
-}
-
-.u-loading {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1050;
-  background-color: rgba(0, 0, 0, 0.8);
-}
-
-.u-loading .u-loading-box {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-}
-
-.u-loading .u-loading-box .u-loading-icon {
-  width: 30px;
-  height: 30px;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-image: url("../../resources/image/white_loading_icon.png");
-  -webkit-background-size: cover;
-  background-size: cover;
-  margin: 0 auto;
-  -webkit-animation: uLoading 1s steps(12, end) infinite;
-  animation: uLoading 1s steps(12, end) infinite;
-}
-
-.u-loading .u-loading-box .u-loading-text {
-  color: #fff;
-  margin-top: 0.32rem;
-  text-align: center;
-}
-
-@-webkit-keyframes uLoading {
-  0% {
-    -webkit-transform: rotate3d(0, 0, 1, 0deg);
-    transform: rotate3d(0, 0, 1, 0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0, 0, 1, 360deg);
-    transform: rotate3d(0, 0, 1, 360deg);
-  }
-}
-
-@keyframes uLoading {
-  0% {
-    -webkit-transform: rotate3d(0, 0, 1, 0deg);
-    transform: rotate3d(0, 0, 1, 0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0, 0, 1, 360deg);
-    transform: rotate3d(0, 0, 1, 360deg);
-  }
-}
-
-.u-dialog {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1050;
-  background-color: rgba(0, 0, 0, 0.8);
-}
-
-.u-dialog .u-dialog-box {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-  width: 6.667rem;
-  background-color: #fff;
-  border-radius: 0.32rem;
-}
-
-.u-dialog .u-dialog-box .u-dialog-content {
-  padding: 0.4rem;
-  text-align: center;
-  position: relative;
-}
-
-.u-dialog .u-dialog-box .u-dialog-content:after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: #bbb;
-}
-
-.u-dialog .u-dialog-box .u-dialog-button {
-  display: table;
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: separate;
-}
-
-.u-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
-.u-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
-  display: table-cell;
-  color: #007aff;
-  text-align: center;
-  padding: 0.4rem 0;
-  line-height: 1;
-  position: relative;
-}
-
-.u-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: 1px;
-  -webkit-transform: scaleX(0.5);
-  transform: scaleX(0.5);
-  background-color: #bbb;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  -webkit-transition: opacity 0.5s linear;
-  transition: opacity 0.5s linear;
-}
-
-.fade-enter,
-.fade-leave-active {
-  opacity: 0;
-}
-
-.custom-dialog .u-dialog-box {
-  width: 7.2rem;
-  height: 4rem;
-  border-radius: 0.133rem;
-}
-
-.custom-dialog .u-dialog-box .u-dialog-content {
-  width: 100%;
-  height: 2.667rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-  font-size: 0.48rem;
-  line-height: 0.587rem;
-  padding: 0 0.4rem;
-}
-
-.custom-dialog .u-dialog-box .u-dialog-content:after {
-  height: 0;
-}
-
-.custom-dialog .u-dialog-box .u-dialog-button {
-  border-spacing: 0.613rem 0;
-}
-
-.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
-.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
-  background-color: ;
-  padding: 0.213rem 0;
-  border-radius: 0.8rem;
-}
-
-.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
-.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm:active {
-  background-color: ;
-}
-
-.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel {
-  color: ;
-}
-
-.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
-  width: 0;
-}
-
-.header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 1.173rem;
-  z-index: 1030;
-  background-color: #010d19;
-}
-
-.header p {
-  position: absolute;
-  top: 0;
-  left: 1.467rem;
-  right: 1.467rem;
-  line-height: 1.173rem;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  color: #fff;
-  font-size: 0.507rem;
-  text-align: center;
-}
-
-.header span {
-  color: #fff;
-  width: 1.467rem;
-  line-height: 1.173rem;
-  display: block;
-}
-
-.header span:active {
-  opacity: 0.5;
-}
-
-.header .header-left {
-  float: left;
-  padding-left: 0.133rem;
-}
-
-.header .header-right {
-  float: right;
-  padding-right: 0.133rem;
-  text-align: right;
-}
-
-.header .icon {
-  font-family: iconfont;
-  font-size: 0.667rem;
-  -webkit-font-smoothing: antialiased;
-  line-height: 1.173rem;
-}
-
-.header ~ .content {
-  padding-top: 1.173rem;
-}
-
-.u-text {
-  width: 100%;
-  display: table;
-  position: relative;
-}
-
-.u-text input {
-  display: table-cell;
-  width: 100%;
-  border: 0;
-  outline: 0;
-  -webkit-appearance: none;
-  padding: 0.533rem 1.867rem 0.533rem 0.533rem;
-  background-color: transparent;
-}
-
-.u-text input[type=text] ~ .u-text-see {
-  color: #007aff;
-}
-
-.u-text .u-text-icon {
-  font-family: iconfont;
-  font-size: 0.533rem;
-  -webkit-font-smoothing: antialiased;
-  line-height: 1;
-  width: 1.173rem;
-  padding-left: 0.453rem;
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.u-text .u-text-icon ~ input {
-  padding-left: 0;
-}
-
-.u-text .u-text-title {
-  width: 1.92rem;
-  padding-left: 0.533rem;
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.u-text .u-text-title ~ input {
-  padding-left: 0;
-}
-
-.u-text .u-text-clear,
-.u-text .u-text-see {
-  position: absolute;
-  top: 0;
-  width: 0.8rem;
-  height: 100%;
-}
-
-.u-text .u-text-clear:before,
-.u-text .u-text-see:before {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-  font-family: defaultIconfont;
-  font-size: 0.667rem;
-  -webkit-font-smoothing: antialiased;
-  line-height: 1;
-}
-
-.u-text .u-text-clear {
-  right: 0.8rem;
-}
-
-.u-text .u-text-clear:before {
-  content: '\e724';
-}
-
-.u-text .u-text-see {
-  right: 0;
-}
-
-.u-text .u-text-see:before {
-  content: '\e73c';
-}
-
-.u-text:after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: #bbb;
-}
-
-@media (max-height: 400px /*no*/) {
-  #app {
-    height: 17.253rem;
-    position: relative;
-  }
-}
-
-.u-button {
-  width: 6.4rem;
-  color: #fff;
-  font-size: inherit;
-  background-color: #007aff;
-  border-radius: 0.533rem;
-  text-align: center;
-  line-height: 1;
-  margin: 0 auto;
-  padding: 0.267rem 0;
-  -webkit-transition: all 0.2s linear;
-  transition: all 0.2s linear;
-  background-clip: padding-box;
-}
-
-.u-button:active {
-  background-color: #0065ff;
-}
-
-.u-button.disabled {
-  background-color: #bbb;
-}
\ No newline at end of file

web/view/doorlockManage/doorlockManage.css~HEAD_0

-@font-face {
-  font-family: 'defaultIconfont';
-  src: url('../../resources/font/defaultIconfont.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'iconfont';
-  src: url('//at.alicdn.com/t/font_372681_ifeqlzhn1k9e8kt9.ttf') format('truetype');
-}
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-}
-
-body {
-  -webkit-user-select: none;
-  user-select: none;
-  color: #fff;
-  font-size: 0.373rem;
-  background: -webkit-linear-gradient(left, #242635, #fff, #242635);
-  background: linear-gradient(to right, #242635, #fff, #242635);
-  background-color: #242635;
-  -webkit-background-size: 100% 1px;
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-  background-position: bottom center;
-}
-
-ul {
-  padding-left: 0;
-  list-style: none;
-  margin-bottom: 0;
-}
-
-p {
-  margin-bottom: 0;
-}
-
-.u-loading {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1050;
-  background-color: rgba(0, 0, 0, 0.8);
-}
-
-.u-loading .u-loading-box {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-}
-
-.u-loading .u-loading-box .u-loading-icon {
-  width: 30px;
-  height: 30px;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-image: url("../../resources/image/white_loading_icon.png");
-  -webkit-background-size: cover;
-  background-size: cover;
-  margin: 0 auto;
-  -webkit-animation: uLoading 1s steps(12, end) infinite;
-  animation: uLoading 1s steps(12, end) infinite;
-}
-
-.u-loading .u-loading-box .u-loading-text {
-  color: #fff;
-  margin-top: 0.32rem;
-  text-align: center;
-}
-
-@-webkit-keyframes uLoading {
-  0% {
-    -webkit-transform: rotate3d(0, 0, 1, 0deg);
-    transform: rotate3d(0, 0, 1, 0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0, 0, 1, 360deg);
-    transform: rotate3d(0, 0, 1, 360deg);
-  }
-}
-
-@keyframes uLoading {
-  0% {
-    -webkit-transform: rotate3d(0, 0, 1, 0deg);
-    transform: rotate3d(0, 0, 1, 0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate3d(0, 0, 1, 360deg);
-    transform: rotate3d(0, 0, 1, 360deg);
-  }
-}
-
-.u-dialog {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1050;
-  background-color: rgba(0, 0, 0, 0.8);
-}
-
-.u-dialog .u-dialog-box {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-  width: 6.667rem;
-  background-color: #fff;
-  border-radius: 0.32rem;
-}
-
-.u-dialog .u-dialog-box .u-dialog-content {
-  padding: 0.4rem;
-  text-align: center;
-  position: relative;
-}
-
-.u-dialog .u-dialog-box .u-dialog-content:after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: #bbb;
-}
-
-.u-dialog .u-dialog-box .u-dialog-button {
-  display: table;
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: separate;
-}
-
-.u-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
-.u-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
-  display: table-cell;
-  color: #007aff;
-  text-align: center;
-  padding: 0.4rem 0;
-  line-height: 1;
-  position: relative;
-}
-
-.u-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  width: 1px;
-  -webkit-transform: scaleX(0.5);
-  transform: scaleX(0.5);
-  background-color: #bbb;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  -webkit-transition: opacity 0.5s linear;
-  transition: opacity 0.5s linear;
-}
-
-.fade-enter,
-.fade-leave-active {
-  opacity: 0;
-}
-
-.custom-dialog .u-dialog-box {
-  width: 7.2rem;
-  height: 4rem;
-  border-radius: 0.133rem;
-}
-
-.custom-dialog .u-dialog-box .u-dialog-content {
-  width: 100%;
-  height: 2.667rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  align-items: center;
-  font-size: 0.48rem;
-  line-height: 0.587rem;
-  padding: 0 0.4rem;
-}
-
-.custom-dialog .u-dialog-box .u-dialog-content:after {
-  height: 0;
-}
-
-.custom-dialog .u-dialog-box .u-dialog-button {
-  border-spacing: 0.613rem 0;
-}
-
-.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel,
-.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm {
-  background-color: ;
-  padding: 0.213rem 0;
-  border-radius: 0.8rem;
-}
-
-.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:active,
-.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-confirm:active {
-  background-color: ;
-}
-
-.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel {
-  color: ;
-}
-
-.custom-dialog .u-dialog-box .u-dialog-button .u-dialog-cancel:after {
-  width: 0;
-}
-
-.header {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 1.173rem;
-  z-index: 1030;
-  background-color: #010d19;
-}
-
-.header p {
-  position: absolute;
-  top: 0;
-  left: 1.467rem;
-  right: 1.467rem;
-  line-height: 1.173rem;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  color: #fff;
-  font-size: 0.507rem;
-  text-align: center;
-}
-
-.header span {
-  color: #fff;
-  width: 1.467rem;
-  line-height: 1.173rem;
-  display: block;
-}
-
-.header span:active {
-  opacity: 0.5;
-}
-
-.header .header-left {
-  float: left;
-  padding-left: 0.133rem;
-}
-
-.header .header-right {
-  float: right;
-  padding-right: 0.133rem;
-  text-align: right;
-}
-
-.header .icon {
-  font-family: iconfont;
-  font-size: 0.667rem;
-  -webkit-font-smoothing: antialiased;
-  line-height: 1.173rem;
-}
-
-.header ~ .content {
-  padding-top: 1.173rem;
-}
-
-.u-text {
-  width: 100%;
-  display: table;
-  position: relative;
-}
-
-.u-text input {
-  display: table-cell;
-  width: 100%;
-  border: 0;
-  outline: 0;
-  -webkit-appearance: none;
-  padding: 0.533rem 1.867rem 0.533rem 0.533rem;
-  background-color: transparent;
-}
-
-.u-text input[type=text] ~ .u-text-see {
-  color: #007aff;
-}
-
-.u-text .u-text-icon {
-  font-family: iconfont;
-  font-size: 0.533rem;
-  -webkit-font-smoothing: antialiased;
-  line-height: 1;
-  width: 1.173rem;
-  padding-left: 0.453rem;
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.u-text .u-text-icon ~ input {
-  padding-left: 0;
-}
-
-.u-text .u-text-title {
-  width: 1.92rem;
-  padding-left: 0.533rem;
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.u-text .u-text-title ~ input {
-  padding-left: 0;
-}
-
-.u-text .u-text-clear,
-.u-text .u-text-see {
-  position: absolute;
-  top: 0;
-  width: 0.8rem;
-  height: 100%;
-}
-
-.u-text .u-text-clear:before,
-.u-text .u-text-see:before {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-  font-family: defaultIconfont;
-  font-size: 0.667rem;
-  -webkit-font-smoothing: antialiased;
-  line-height: 1;
-}
-
-.u-text .u-text-clear {
-  right: 0.8rem;
-}
-
-.u-text .u-text-clear:before {
-  content: '\e724';
-}
-
-.u-text .u-text-see {
-  right: 0;
-}
-
-.u-text .u-text-see:before {
-  content: '\e73c';
-}
-
-.u-text:after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: #bbb;
-}
-
-@media (max-height: 400px /*no*/) {
-  #app {
-    height: 17.253rem;
-    position: relative;
-  }
-}
-
-.u-button {
-  width: 6.4rem;
-  color: #fff;
-  font-size: inherit;
-  background-color: #007aff;
-  border-radius: 0.533rem;
-  text-align: center;
-  line-height: 1;
-  margin: 0 auto;
-  padding: 0.267rem 0;
-  -webkit-transition: all 0.2s linear;
-  transition: all 0.2s linear;
-  background-clip: padding-box;
-}
-
-.u-button:active {
-  background-color: #0065ff;
-}
-
-.u-button.disabled {
-  background-color: #bbb;
-}
\ No newline at end of file

web/view/doorlockManage/editName.html

@@ -23,12 +23,14 @@
         <div class="header">
             <v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch> 
             <p>{{ $t('title.editName') }}</p>
+            <v-touch tag="span" class="header-right" v-on:tap="onSaveTap">{{ $t('btn.save') }}</v-touch>
         </div>
         <div class="content">
+            <div class="inputBox">
                 <u-text :init-param="componentsConfig.nameInput.initParam" :text="textName"
                     v-on:u-text-change="onNameChange(arguments[0])"></u-text>  
                 <p class="errorTip" v-if="textErrorTip">{{ textErrorTip }}</p>
-            <u-button :init-param="componentsConfig.saveButton.initParam" v-on:u-button-tap="onSaveButtonTap"></u-button>
+            </div>
         </div>
         <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
         <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>

web/view/doorlockManage/index.html

@@ -23,10 +23,21 @@
         <div class="header">
             <v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch>           
             <p>{{ $t('title.doorlockManage') }}</p>  
-            <v-touch tag="span" class="header-right icon" v-on:tap="onAddTap">&#xe600;</v-touch>   
         </div> 
-        <grid-list ref="gridlist" :init-param="componentsConfig.doorlockList.initParam" v-on:grid-list-tap="onDoorlockListTap(arguments[0])" v-on:grid-list-button-tap="onDoorlockListButtonTap(arguments[0],arguments[1])"></grid-list>
-        <u-button :init-param="componentsConfig.logoutButton.initParam" v-on:u-button-tap="onLogoutButtonTap"></u-button>
+        <div class="content"> 
+            <v-touch tag="div" class="doorlockManage" v-on:tap="onEditNameTap">
+                {{ $t('doorlockManage.name') }}
+                <p>{{ textDoorlock }}</p>
+            </v-touch>
+            <u-button :init-param="componentsConfig.unbindDoorlockButton.initParam" v-on:u-button-tap="onUnbindDoorlockButtonTap"></u-button>
+        </div>
+        <transition name="fade">
+            <v-touch tag="div" class="unbindState-dialog" v-show="stateShowFlag" v-on:tap="onUnbindStateDialogTap">
+                <div>
+                    <p>{{ $t('doorlockUsers.unbindSuccess') }}</p>
+                </div>
+            </<v-touch>
+        </transition>              
         <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
         <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
     </div>

web/view/doorlockUsers/addUnlockInfo.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <meta name="format-detection" content="telephone=no"/>
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="../../lib/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="./unlockInfo.css">
+    <style type="text/css">
+        [v-cloak]{
+            display: none;
+        }
+    </style>
+    <script type="text/javascript" src="../../lib/js/p.js"></script>
+    <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
+</head>
+<body ontouchstart="">
+
+    <div id="app" v-cloak>
+        <div class="header">
+            <v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch>
+            <p>{{ $t('title.unlockInfo') }}</p>
+        </div>
+        <div class="content"> 
+            <div class="opendoorMode">
+                <p class="title">{{ $t('addUnlockInfo.opendoorMode') }}</p>
+                <ul>
+                    <li class="active">{{ $t('addUnlockInfo.fingerprint') }}</li>
+                    <li>{{ $t('addUnlockInfo.password') }}</li>
+                    <li>{{ $t('addUnlockInfo.icCard') }}</li>
+                    <li>{{ $t('addUnlockInfo.key') }}</li>
+                    <li>{{ $t('addUnlockInfo.hijackFingerprint') }}</li>
+                </ul>
+            </div>
+            <div class="opendoorRecord">
+                <p class="title">{{ $t('addUnlockInfo.opendoorRecord') }}</p>
+                <u-select ref="uselect" :value="recordSelectIndex" :init-param="componentsConfig.recordSelect.initParam"
+                  v-on:u-select-change="onRecordSelectChange(arguments[0])"></u-select>
+                <p class="tip">{{ $t('addUnlockInfo.tip') }}</p>
+            </div>
+            <u-button :init-param="componentsConfig.addButton.initParam" v-on:u-button-tap="onAddButtonTap"></u-button>
+        </div>   
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+
+    <script type="text/javascript" src="./addUnlockInfo.js" defer async></script>
+    
+</body>
+</html>
\ No newline at end of file

web/view/myInfo/editPassword.html → web/view/doorlockUsers/addUser.html

 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="UTF-8">
+<head>
+    <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
     <meta name="apple-mobile-web-app-capable" content="yes"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
     <meta name="format-detection" content="telephone=no"/>
     <title></title>
     <link rel="stylesheet" type="text/css" href="../../lib/css/bootstrap.min.css">
-	    <link rel="stylesheet" type="text/css" href="./myInfo.css">
+    <link rel="stylesheet" type="text/css" href="./doorlockUsers.css">
     <style type="text/css">
         [v-cloak]{
             display: none;
@@ -16,26 +16,27 @@
     </style>
     <script type="text/javascript" src="../../lib/js/p.js"></script>
     <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
-	</head>
-	<body  ontouchstart="">
+</head>
+<body ontouchstart="">
+
     <div id="app" v-cloak>
         <div class="header">
             <v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch>
-	            <p>{{ $t('title.doorlockUsers') }}</p>   
-	            <v-touch tag="span" class="header-right" v-on:tap="onSaveTap">{{ $t('btn.save') }}</v-touch>           
+            <p>{{ $t('title.addUser') }}</p>
         </div>
         <div class="content"> 
-		        <u-text :init-param="componentsConfig.newPassword.initParam" :text="textNewPassword"
-	                v-on:u-text-change="onNewPasswordChange(arguments[0])"></u-text>  
-	            <u-text :init-param="componentsConfig.oldPassword.initParam" :text="textOldPassword"
-	                v-on:u-text-change="onOldPasswordChange(arguments[0])"></u-text> 
-	            <u-text :init-param="componentsConfig.oldPasswordAgain.initParam" :text="textOldPasswordAgain"
-	                v-on:u-text-change="onOldPasswordAgainChange(arguments[0])"></u-text> 
+            <div class="inputBox">
+                <u-text :init-param="componentsConfig.nameInput.initParam" :text="textName"
+                v-on:u-text-change="onNameChange(arguments[0])"></u-text>
                 <p class="errorTip" v-if="textErrorTip">{{ textErrorTip }}</p>
+            </div>
+            <u-button :init-param="componentsConfig.confirmButton.initParam" v-on:u-button-tap="onConfirmButtonTap"></u-button>
+        </div>   
         <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
         <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
     </div>
-		</div>
-    	<script type="text/javascript" src="./editPassword.js" defer async></script>
-	</body>
+
+    <script type="text/javascript" src="./addUser.js" defer async></script>
+    
+</body>
 </html>
\ No newline at end of file

web/view/doorlockUsers/doorlockUsers.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <meta name="format-detection" content="telephone=no"/>
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="../../lib/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="./doorlockUsers.css">
+    <style type="text/css">
+        [v-cloak]{
+            display: none;
+        }
+    </style>
+    <script type="text/javascript" src="../../lib/js/p.js"></script>
+    <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
+</head>
+<body ontouchstart="">
+
+    <div id="app" v-cloak>
+        <div class="header">
+            <v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch>
+            <p>{{ $t('title.doorlockUsers') }}</p>
+        </div>
+        <div class="content">  
+            <ul class="userInfoLink">
+                <li class="userInfo" v-bind:class="{noBind: userInfo.role != 0}">
+                    <img class="userInfo-image" v-if="userInfo.image && userInfo.role == 0" v-bind:src="userInfo.image">
+                    <div>
+                        <v-touch tag="p" class="userInfo-title" v-on:tap="onEditNameTap">{{ userInfo.title }}</v-touch>
+                        <p class="userInfo-subtitle">
+                            <img class="userInfo-subimage" v-if="userInfo.image && userInfo.role != 0" v-bind:src="userInfo.image">
+                            {{ $t('doorlockUsers.name') }}<span class="userInfo-name" v-if="userInfo.subtitle">{{ userInfo.subtitle }}</span>
+                            <v-touch tag="span" class="userInfo-toBind" v-show="bindShowFlag" v-on:tap="onBindTap">{{ $t('doorlockUsers.inviteBind') }}</v-touch>
+                            <u-button :init-param="componentsConfig.unbindButton.initParam" v-on:u-button-tap="onUnbindButtonTap" v-show="unbindShowFlag"></u-button>
+                        </p>
+                    </div>
+                </li>
+                <v-touch tag="li" v-on:tap="onBindUnlockInfoTap">{{ $t('doorlockUsers.bindUnlockInfo') }}</v-touch>
+                <v-touch tag="li" v-on:tap="onOpendoorRecordTap">{{ $t('doorlockUsers.opendoorRecord') }}</v-touch>
+            </ul>
+            <u-button :init-param="componentsConfig.deleteUserButton.initParam" v-on:u-button-tap="onDeleteUserButtonTap"></u-button>
+        </div>  
+        <transition name="fade">
+            <v-touch tag="div" class="unbindState-dialog" v-show="stateShowFlag" v-on:tap="onUnbindStateDialogTap">
+                <div>
+                    <p>{{ $t('doorlockUsers.unbindSuccess') }}</p>
+                </div>
+            </<v-touch>
+        </transition>  
+        <transition name="fade">
+            <div class="guide-dialog" v-show="guideShowFlag">
+                <transition name="fade">
+                    <div class="guideStep1" v-show="guideStep1ShowFlag">
+                        <div class="guideStep1Cont">
+                            <p>我是个用户</p>
+                            <p><img src="../../resources/image/gray_unbindHead_icon.png">{{ $t('doorlockUsers.name') }}<span>{{ $t('doorlockUsers.inviteBind') }}</span></p>
+                        </div>
+                        <div class="guideStep1Tip">
+                            <p>{{ $t('doorlockUsers.guideStep1Tip1') }}</p>
+                            <p v-html="$t('doorlockUsers.guideStep1Tip2')"></p>
+                        </div>
+                    </div>
+                </transition> 
+                <transition name="fade">
+                    <div class="guideStep2" v-show="guideStep2ShowFlag">
+                        <u-button :init-param="componentsConfig.nextButton.initParam" v-on:u-button-tap="onNextButtonTap"></u-button>
+                    </div>
+                </transition> 
+                <transition name="fade">
+                    <div class="guideStep3" v-show="guideStep3ShowFlag">
+                        <div class="guideStep3Cont">
+                            <p>{{ $t('doorlockUsers.bindUnlockInfo') }}</p>
+                        </div>
+                        <div class="guideStep3Tip" v-html="$t('doorlockUsers.guideStep3Tip')"></div>
+                    </div>
+                </transition>
+                <transition name="fade">
+                    <div class="guideStep4" v-show="guideStep4ShowFlag">
+                        <u-button :init-param="componentsConfig.iSeeButton.initParam" v-on:u-button-tap="onISeeButtonTap"></u-button>
+                    </div>
+                </transition>                                                                                     
+            </div>
+        </transition>             
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+
+    <script type="text/javascript" src="./doorlockUsers.js" defer async></script>
+    
+</body>
+</html>
\ No newline at end of file

web/view/myInfo/editNickname.html → web/view/doorlockUsers/editName.html

 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="UTF-8">
+<head>
+    <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
     <meta name="apple-mobile-web-app-capable" content="yes"/>
     <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
     <meta name="format-detection" content="telephone=no"/>
     <title></title>
     <link rel="stylesheet" type="text/css" href="../../lib/css/bootstrap.min.css">
-	    <link rel="stylesheet" type="text/css" href="./myInfo.css">
+    <link rel="stylesheet" type="text/css" href="./doorlockUsers.css">
     <style type="text/css">
         [v-cloak]{
             display: none;
@@ -16,22 +16,27 @@
     </style>
     <script type="text/javascript" src="../../lib/js/p.js"></script>
     <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
-	</head>
-	<body  ontouchstart="">
+</head>
+<body ontouchstart="">
+
     <div id="app" v-cloak>
         <div class="header">
             <v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch>
-	            <p>{{ $t('title.doorlockUsers') }}</p>   
+            <p>{{ $t('title.editName') }}</p>
             <v-touch tag="span" class="header-right" v-on:tap="onSaveTap">{{ $t('btn.save') }}</v-touch>
         </div>
         <div class="content"> 
-		        <u-text :init-param="componentsConfig.nameInput.initParam" :text="textNickName"
-	                v-on:u-text-change="onNicknameChange(arguments[0])"></u-text>
+            <div class="inputBox">
+                <u-text :init-param="componentsConfig.nameInput.initParam" :text="textName"
+                v-on:u-text-change="onNameChange(arguments[0])"></u-text>
                 <p class="errorTip" v-if="textErrorTip">{{ textErrorTip }}</p>
+            </div>
+        </div>   
         <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
         <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
     </div>
-		</div>
-    	<script type="text/javascript" src="./editNickname.js" defer async></script>
-	</body>
+
+    <script type="text/javascript" src="./editName.js" defer async></script>
+    
+</body>
 </html>
\ No newline at end of file

web/view/doorlockManage/qrcode.html → web/view/doorlockUsers/inviteBind.html

@@ -8,7 +8,7 @@
     <meta name="format-detection" content="telephone=no"/>
     <title></title>
     <link rel="stylesheet" type="text/css" href="../../lib/css/bootstrap.min.css">
-    <link rel="stylesheet" type="text/css" href="./doorlockManage.css">
+    <link rel="stylesheet" type="text/css" href="./doorlockUsers.css">
     <style type="text/css">
         [v-cloak]{
             display: none;
@@ -22,20 +22,16 @@
     <div id="app" v-cloak>
         <div class="header">
             <v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch>
-            <p>{{ $t('title.qrcode') }}</p>
+            <p>{{ $t('title.inviteBind') }}</p>
         </div>
         <div class="content"> 
-            <ul class="qrcodeHelp">
-                <li>{{ $t('qrcode.helpTitle') }}</li>
-                <li>{{ $t('qrcode.helpCont1') }}</li>
-                <li>{{ $t('qrcode.helpCont2') }}</li>
-                <li>{{ $t('qrcode.helpCont3') }}</li>
-                <li>{{ $t('qrcode.helpCont4') }}</li>
+            <ul class="inviteBind">
                 <li>
-                    <p>
-                    	<canvas ref="qrcode"></canvas>
-                    </p>
+                    <p></p>
                 </li>
+                <li>{{ $t('inviteBind.title') }}</li>                
+                <li>{{ $t('inviteBind.cont1') }}</li>
+                <li>{{ $t('inviteBind.cont2') }}</li>
             </ul>
             <u-button :init-param="componentsConfig.qrcodeButton.initParam" v-on:u-button-tap="onQRcodeButtonTap"></u-button>
         </div>   
@@ -43,7 +39,7 @@
         <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
     </div>
 
-    <script type="text/javascript" src="./qrcode.js" defer async></script>
+    <script type="text/javascript" src="./inviteBind.js" defer async></script>
     
 </body>
 </html>
\ No newline at end of file

web/view/doorlockManage/doorlockManage.css~remotes_origin_wangying_0 → web/view/doorlockUsers/unlockInfo.css

@@ -51,9 +51,10 @@ p {
 .u-loading .u-loading-box {
   position: absolute;
   top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
+  left: 0;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: 0;
 }
 
 .u-loading .u-loading-box .u-loading-icon {
@@ -65,8 +66,8 @@ p {
   -webkit-background-size: cover;
   background-size: cover;
   margin: 0 auto;
-  -webkit-animation: uLoading 1s steps(12, end) infinite;
-  animation: uLoading 1s steps(12, end) infinite;
+  -webkit-animation: loading 1s steps(12, end) infinite;
+  animation: loading 1s steps(12, end) infinite;
 }
 
 .u-loading .u-loading-box .u-loading-text {
@@ -75,7 +76,7 @@ p {
   text-align: center;
 }
 
-@-webkit-keyframes uLoading {
+@-webkit-keyframes loading {
   0% {
     -webkit-transform: rotate3d(0, 0, 1, 0deg);
     transform: rotate3d(0, 0, 1, 0deg);
@@ -87,7 +88,7 @@ p {
   }
 }
 
-@keyframes uLoading {
+@keyframes loading {
   0% {
     -webkit-transform: rotate3d(0, 0, 1, 0deg);
     transform: rotate3d(0, 0, 1, 0deg);
@@ -99,6 +100,132 @@ p {
   }
 }
 
+.custom-loading {
+  background-color: rgba(36, 38, 53, 0.9);
+}
+
+.custom-loading .u-loading-box {
+  color: #00ffff;
+}
+
+.custom-loading .u-loading-box .u-loading-icon {
+  font-size: 0.427rem;
+  margin: 0 auto;
+  width: 3.750em;
+  height: 3.750em;
+  position: relative;
+  background: none;
+  -webkit-animation: none;
+  animation: none;
+}
+
+.custom-loading .u-loading-box .u-loading-icon:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 0.5em;
+  height: 0.5em;
+  margin: auto;
+  border-radius: 50%;
+  -webkit-transform: translateZ(0) scale(0.55);
+  transform: translateZ(0) scale(0.55);
+  -webkit-animation: loading 1.3s infinite linear;
+  animation: loading 1.3s infinite linear;
+}
+
+.custom-loading .u-loading-box .u-loading-text {
+  color: inherit;
+  font-size: 0.427rem;
+  margin-top: 0.533rem;
+}
+
+@-webkit-keyframes loading {
+  0%, 100% {
+    -webkit-box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+  }
+
+  12.5% {
+    -webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+
+  25% {
+    -webkit-box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+
+  37.5% {
+    -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+
+  50% {
+    -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+
+  62.5% {
+    -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+  }
+
+  75% {
+    -webkit-box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+  }
+
+  87.5% {
+    -webkit-box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+  }
+}
+
+@keyframes loading {
+  0%, 100% {
+    -webkit-box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+  }
+
+  12.5% {
+    -webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+
+  25% {
+    -webkit-box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+
+  37.5% {
+    -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+
+  50% {
+    -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+
+  62.5% {
+    -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+  }
+
+  75% {
+    -webkit-box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+  }
+
+  87.5% {
+    -webkit-box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+  }
+}
+
 .u-dialog {
   position: fixed;
   top: 0;
@@ -303,94 +430,8 @@ p {
   padding-top: 1.173rem;
 }
 
-.qrcodeHelp {
-  margin: 0.8rem 0.8rem 0;
-}
-
-.qrcodeHelp li {
-  color: #91929a;
-  font-size: 0.427rem;
-  padding-left: 0.32rem;
-  text-indent: -0.32rem;
-  line-height: 0.48rem;
-  margin-bottom: 0.747rem;
-}
-
-.qrcodeHelp li:first-child {
-  color: inherit;
-  font-size: 0.48rem;
-  margin-bottom: 0.48rem;
-}
-
-.qrcodeHelp li p {
-  width: 5.333rem;
-  height: 5.333rem;
-  margin: 0 auto;
-  border: 1px solid;
-}
-
-.u-button {
-  width: 6.4rem;
-  color: #fff;
-  font-size: inherit;
-  background-color: #007aff;
-  border-radius: 0.533rem;
-  text-align: center;
-  line-height: 1;
-  margin: 0 auto;
-  padding: 0.267rem 0;
-  -webkit-transition: all 0.2s linear;
-  transition: all 0.2s linear;
-  background-clip: padding-box;
-}
-
-.u-button:active {
-  background-color: #0065ff;
-}
-
-.u-button.disabled {
-  background-color: #bbb;
-}
-
-.custom-button {
-  width: 7.333rem;
-  border-radius: 0.133rem;
-  background-color: transparent;
-  border: 1px solid;
-  color: #00ffff;
-  font-size: 0.427rem;
-  position: absolute;
-  bottom: 1.733rem;
-  left: 0;
-  right: 0;
-}
-
-.custom-button:active {
-  background-color: #153D4C;
-}
-
-.custom-button.disabled {
-  background-color: transparent;
-  color: #999;
-}
-
-.grid-list {
-  position: absolute;
-  top: 1.173rem;
-  bottom: 3.68rem;
-  left: 0;
-  width: 100%;
-  overflow: auto;
-}
-
-.grid-list-scroll .grid-list-row {
-  margin: 0.267rem;
-  border: 1px solid #00ffff;
-  border-radius: 0.133rem;
-}
-
-.grid-list-scroll .grid-list-row .grid-list-handle {
-  height: 1.493rem;
+.u-select .u-select-row {
+  padding: 0.4rem 1.2rem 0.4rem 0.533rem;
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -398,198 +439,56 @@ p {
   -webkit-box-align: center;
   -webkit-align-items: center;
   align-items: center;
-  padding: 0 0.32rem;
 }
 
-.grid-list-scroll .grid-list-row .grid-list-handle .grid-list-left-image {
-  width: 0.693rem;
-  height: 0.693rem;
-  margin-right: 0.133rem;
+.u-select .u-select-row .u-select-image {
+  width: 1.333rem;
+  height: 1.333rem;
+  margin-right: 0.267rem;
+}
+
+.u-select .u-select-row .u-select-icon {
+  margin-right: 0.267rem;
+  font-family: iconfont;
+  font-size: 0.533rem;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1;
 }
 
-.grid-list-scroll .grid-list-row .grid-list-handle div {
+.u-select .u-select-row div {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
   flex: 1;
   min-width: 0;
 }
 
-.grid-list-scroll .grid-list-row .grid-list-handle .grid-list-title {
-  font-size: 0.48rem;
+.u-select .u-select-row .u-select-title {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-.grid-list-scroll .grid-list-row .grid-list-handle .grid-list-right-icon {
-  font-family: iconfont;
-  font-size: 0.587rem;
-  -webkit-font-smoothing: antialiased;
-  line-height: 1;
-  -webkit-transform: rotate(180deg);
-  transform: rotate(180deg);
-}
-
-.grid-list-scroll .grid-list-row .grid-list-handle:after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: -webkit-linear-gradient(left, #242635, #fff, #242635);
-  background: linear-gradient(to right, #242635, #fff, #242635);
-}
-
-.grid-list-scroll .grid-list-row .grid-list-content {
-  height: 1.12rem;
-  display: table;
-  width: 100%;
-  table-layout: fixed;
-}
-
-.grid-list-scroll .grid-list-row .grid-list-content .grid-list-button {
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.grid-list-scroll .grid-list-row .grid-list-content .grid-list-button .grid-list-button-bg {
-  width: 0.8rem;
-  height: 0.8rem;
-  text-align: center;
-  color: #00ffff;
-  border: 1px solid;
-  border-radius: 50%;
-  font-family: iconfont;
-  font-size: 0.427rem;
-  -webkit-font-smoothing: antialiased;
-  line-height: 0.8rem;
-  display: inline-block;
-}
-
-.grid-list-scroll .grid-list-row .grid-list-content .grid-list-button:nth-child(1) {
-  padding-left: 0.427rem;
-}
-
-.grid-list-scroll .grid-list-row .grid-list-content .grid-list-button:nth-child(2) {
-  padding-left: 0.667rem;
-}
-
-.grid-list-scroll .grid-list-row .grid-list-content .grid-list-button:nth-child(3) {
-  padding-left: 0.907rem;
-}
-
-.grid-list-scroll .grid-list-row .grid-list-content .grid-list-button:nth-child(4) {
-  text-align: right;
-  padding-right: 0.427rem;
-}
-
-.grid-list-load {
-  color: #00ffff;
-  font-size: 0.427rem;
-  -webkit-transform: scale(0.7);
-  transform: scale(0.7);
-  height: 0.933rem;
-  line-height: 0.933rem;
-  text-align: center;
+.u-select .u-select-row .u-select-subtitle {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
-.grid-list-tip {
+.u-select .u-select-row:before {
+  content: '\e7a1';
   position: absolute;
   top: 50%;
-  left: 0;
+  right: 0.4rem;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
-  width: 100%;
-  text-align: center;
-  color: #00ffff;
-  font-size: 0.48rem;
-}
-
-.u-text {
-  width: 100%;
-  display: table;
-  position: relative;
-}
-
-.u-text input {
-  display: table-cell;
-  width: 100%;
-  border: 0;
-  outline: 0;
-  -webkit-appearance: none;
-  padding: 0.533rem 1.867rem 0.533rem 0.533rem;
-  background-color: transparent;
-}
-
-.u-text input[type=text] ~ .u-text-see {
-  color: #007aff;
-}
-
-.u-text .u-text-icon {
-  font-family: iconfont;
-  font-size: 0.533rem;
-  -webkit-font-smoothing: antialiased;
-  line-height: 1;
-  width: 1.12rem;
-  padding-left: 0.453rem;
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.u-text .u-text-icon ~ input {
-  padding-left: 0;
-}
-
-.u-text .u-text-title {
-  width: 1.92rem;
-  padding-left: 0.533rem;
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.u-text .u-text-title ~ input {
-  padding-left: 0;
-}
-
-.u-text .u-text-clear,
-.u-text .u-text-see {
-  position: absolute;
-  top: 0;
-  width: 0.8rem;
-  height: 100%;
-}
-
-.u-text .u-text-clear:before,
-.u-text .u-text-see:before {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
   font-family: defaultIconfont;
   font-size: 0.667rem;
   -webkit-font-smoothing: antialiased;
   line-height: 1;
+  display: none;
 }
 
-.u-text .u-text-clear {
-  right: 0.8rem;
-}
-
-.u-text .u-text-clear:before {
-  content: '\e724';
-}
-
-.u-text .u-text-see {
-  right: 0;
-}
-
-.u-text .u-text-see:before {
-  content: '\e73c';
-}
-
-.u-text:after {
+.u-select .u-select-row:after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -599,44 +498,33 @@ p {
   background: #bbb;
 }
 
-@media (max-height: 400px /*no*/) {
-  #app {
-    height: 17.253rem;
-    position: relative;
-  }
-}
-
-.custom-editName-text input {
-  font-size: 0.48rem;
-  padding-left: 1.227rem;
-}
-
-.custom-editName-text input::-webkit-input-placeholder {
-  color: #91929a;
+.u-select .u-select-row.active:before {
+  display: block;
 }
 
-.custom-editName-text .u-text-clear {
-  right: 1.093rem;
+.u-select-load {
+  text-align: center;
 }
 
-.custom-editName-text .u-text-clear:before {
-  content: '\e601';
-  font-family: iconfont;
-  color: #00ffff;
-  font-size: 0.533rem;
+.u-button {
+  width: 6.4rem;
+  color: #fff;
+  font-size: inherit;
+  background-color: #007aff;
+  border-radius: 0.533rem;
+  text-align: center;
+  line-height: 1;
+  margin: 0 auto;
+  padding: 0.267rem 0;
+  -webkit-transition: all 0.2s linear;
+  transition: all 0.2s linear;
+  background-clip: padding-box;
 }
 
-.custom-editName-text:after {
-  background: -webkit-linear-gradient(left, #242635, #fff, #242635);
-  background: linear-gradient(to right, #242635, #fff, #242635);
+.u-button:active {
+  background-color: #0065ff;
 }
 
-.errorTip {
-  color: #fc2168;
-  font-size: 0.427rem;
-  -webkit-transform: scale(0.7);
-  transform: scale(0.7);
-  text-align: center;
-  height: 1.067rem;
-  line-height: 1.067rem;
+.u-button.disabled {
+  background-color: #bbb;
 }
\ No newline at end of file

web/view/doorlockUsers/unlockInfo.html

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <meta name="format-detection" content="telephone=no"/>
+    <title></title>
+    <link rel="stylesheet" type="text/css" href="../../lib/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="./unlockInfo.css">
+    <style type="text/css">
+        [v-cloak]{
+            display: none;
+        }
+    </style>
+    <script type="text/javascript" src="../../lib/js/p.js"></script>
+    <script type="text/javascript" src="../../lib/js/UIOT.js"></script>
+</head>
+<body ontouchstart="">
+
+    <div id="app" v-cloak>
+        <div class="header">
+            <v-touch tag="span" class="header-left icon" v-on:tap="onBackTap">&#xe611;</v-touch>
+            <p>{{ $t('title.unlockInfo') }}</p>
+            <v-touch tag="span" class="header-right" v-on:tap="onAddTap">{{ $t('btn.add') }}</v-touch>
+        </div>
+        <div class="content"> 
+            <p class="title" v-show="unlockInfoList.length">{{ $t('unlockInfo.bindUnlockInfo') }}</p>
+            <div class="unlockInfo-list">
+                <ul class="unlockInfo-list-scroll" v-show="unlockInfoList.length">
+                    <li class="unlockInfo-list-row" v-for="item in unlockInfoList">
+                        {{ item.title }}
+                        <p>ID:{{ item.rightText }}</p>
+                    </li>
+                    <v-touch tag="li" class="uunlockInfo-list-load" v-on:tap="onTapLoad" v-show="loadShowFlag">{{ loadText }}</v-touch>
+                </ul>
+                <p class="unlockInfo-list-tip" v-show="(unlockInfoList.length == 0)">{{ tip }}</p>
+            </div>
+        </div>   
+        <u-dialog ref="udialog" :init-param="componentsConfig.dialog.initParam"></u-dialog>
+        <u-loading ref="uloading" :init-param="componentsConfig.loading.initParam"></u-loading>
+    </div>
+
+    <script type="text/javascript" src="./unlockInfo.js" defer async></script>
+    
+</body>
+</html>
\ No newline at end of file

web/view/doorlockManage/doorlockManage.css~remotes_origin_wangying → web/view/doorlockUsers/userList.css

@@ -51,9 +51,10 @@ p {
 .u-loading .u-loading-box {
   position: absolute;
   top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
+  left: 0;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: 0;
 }
 
 .u-loading .u-loading-box .u-loading-icon {
@@ -65,8 +66,8 @@ p {
   -webkit-background-size: cover;
   background-size: cover;
   margin: 0 auto;
-  -webkit-animation: uLoading 1s steps(12, end) infinite;
-  animation: uLoading 1s steps(12, end) infinite;
+  -webkit-animation: loading 1s steps(12, end) infinite;
+  animation: loading 1s steps(12, end) infinite;
 }
 
 .u-loading .u-loading-box .u-loading-text {
@@ -75,7 +76,7 @@ p {
   text-align: center;
 }
 
-@-webkit-keyframes uLoading {
+@-webkit-keyframes loading {
   0% {
     -webkit-transform: rotate3d(0, 0, 1, 0deg);
     transform: rotate3d(0, 0, 1, 0deg);
@@ -87,7 +88,7 @@ p {
   }
 }
 
-@keyframes uLoading {
+@keyframes loading {
   0% {
     -webkit-transform: rotate3d(0, 0, 1, 0deg);
     transform: rotate3d(0, 0, 1, 0deg);
@@ -99,6 +100,132 @@ p {
   }
 }
 
+.custom-loading {
+  background-color: rgba(36, 38, 53, 0.9);
+}
+
+.custom-loading .u-loading-box {
+  color: #00ffff;
+}
+
+.custom-loading .u-loading-box .u-loading-icon {
+  font-size: 0.427rem;
+  margin: 0 auto;
+  width: 3.750em;
+  height: 3.750em;
+  position: relative;
+  background: none;
+  -webkit-animation: none;
+  animation: none;
+}
+
+.custom-loading .u-loading-box .u-loading-icon:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 0.5em;
+  height: 0.5em;
+  margin: auto;
+  border-radius: 50%;
+  -webkit-transform: translateZ(0) scale(0.55);
+  transform: translateZ(0) scale(0.55);
+  -webkit-animation: loading 1.3s infinite linear;
+  animation: loading 1.3s infinite linear;
+}
+
+.custom-loading .u-loading-box .u-loading-text {
+  color: inherit;
+  font-size: 0.427rem;
+  margin-top: 0.533rem;
+}
+
+@-webkit-keyframes loading {
+  0%, 100% {
+    -webkit-box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+  }
+
+  12.5% {
+    -webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+
+  25% {
+    -webkit-box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+
+  37.5% {
+    -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+
+  50% {
+    -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+
+  62.5% {
+    -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+  }
+
+  75% {
+    -webkit-box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+  }
+
+  87.5% {
+    -webkit-box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+  }
+}
+
+@keyframes loading {
+  0%, 100% {
+    -webkit-box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+  }
+
+  12.5% {
+    -webkit-box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+
+  25% {
+    -webkit-box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+  }
+
+  37.5% {
+    -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+
+  50% {
+    -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+  }
+
+  62.5% {
+    -webkit-box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+  }
+
+  75% {
+    -webkit-box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+  }
+
+  87.5% {
+    -webkit-box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+  }
+}
+
 .u-dialog {
   position: fixed;
   top: 0;
@@ -303,293 +430,126 @@ p {
   padding-top: 1.173rem;
 }
 
-.qrcodeHelp {
-  margin: 0.8rem 0.8rem 0;
-}
-
-.qrcodeHelp li {
-  color: #91929a;
-  font-size: 0.427rem;
-  padding-left: 0.32rem;
-  text-indent: -0.32rem;
-  line-height: 0.48rem;
-  margin-bottom: 0.747rem;
-}
-
-.qrcodeHelp li:first-child {
-  color: inherit;
-  font-size: 0.48rem;
-  margin-bottom: 0.48rem;
-}
-
-.qrcodeHelp li p {
-  width: 5.333rem;
-  height: 5.333rem;
-  margin: 0 auto;
-  border: 1px solid;
-}
-
-.u-button {
-  width: 6.4rem;
-  color: #fff;
-  font-size: inherit;
-  background-color: #007aff;
-  border-radius: 0.533rem;
-  text-align: center;
-  line-height: 1;
-  margin: 0 auto;
-  padding: 0.267rem 0;
-  -webkit-transition: all 0.2s linear;
-  transition: all 0.2s linear;
-  background-clip: padding-box;
-}
-
-.u-button:active {
-  background-color: #0065ff;
-}
-
-.u-button.disabled {
-  background-color: #bbb;
-}
-
-.custom-button {
-  width: 7.333rem;
-  border-radius: 0.133rem;
-  background-color: transparent;
-  border: 1px solid;
-  color: #00ffff;
-  font-size: 0.427rem;
-  position: absolute;
-  bottom: 1.733rem;
-  left: 0;
-  right: 0;
-}
-
-.custom-button:active {
-  background-color: #153D4C;
-}
-
-.custom-button.disabled {
-  background-color: transparent;
-  color: #999;
-}
-
-.grid-list {
+.user-list {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
   position: absolute;
   top: 1.173rem;
-  bottom: 3.68rem;
+  bottom: 0;
   left: 0;
-  width: 100%;
-  overflow: auto;
+  height: auto;
 }
 
-.grid-list-scroll .grid-list-row {
-  margin: 0.267rem;
-  border: 1px solid #00ffff;
-  border-radius: 0.133rem;
+.user-list-scroll .user-list-row {
+  position: relative;
+  overflow: hidden;
 }
 
-.grid-list-scroll .grid-list-row .grid-list-handle {
-  height: 1.493rem;
+.user-list-scroll .user-list-row .user-list-handle {
   position: relative;
+  -webkit-transition: left 0.4s ease;
+  transition: left 0.4s ease;
+  left: 0;
+  background-color: #242635;
+  padding: 0.4rem 0.533rem;
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
   align-items: center;
-  padding: 0 0.32rem;
+  z-index: 2;
+}
+
+.user-list-scroll .user-list-row .user-list-handle .user-list-image {
+  width: 1.333rem;
+  height: 1.333rem;
+  margin-right: 0.267rem;
 }
 
-.grid-list-scroll .grid-list-row .grid-list-handle .grid-list-left-image {
-  width: 0.693rem;
-  height: 0.693rem;
-  margin-right: 0.133rem;
+.user-list-scroll .user-list-row .user-list-handle .user-list-icon {
+  margin-right: 0.267rem;
+  font-family: iconfont;
+  font-size: 0.533rem;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1;
 }
 
-.grid-list-scroll .grid-list-row .grid-list-handle div {
+.user-list-scroll .user-list-row .user-list-handle div {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
   flex: 1;
   min-width: 0;
 }
 
-.grid-list-scroll .grid-list-row .grid-list-handle .grid-list-title {
-  font-size: 0.48rem;
+.user-list-scroll .user-list-row .user-list-handle .user-list-title {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-.grid-list-scroll .grid-list-row .grid-list-handle .grid-list-right-icon {
-  font-family: iconfont;
-  font-size: 0.587rem;
-  -webkit-font-smoothing: antialiased;
-  line-height: 1;
-  -webkit-transform: rotate(180deg);
-  transform: rotate(180deg);
-}
-
-.grid-list-scroll .grid-list-row .grid-list-handle:after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 1px;
-  background: -webkit-linear-gradient(left, #242635, #fff, #242635);
-  background: linear-gradient(to right, #242635, #fff, #242635);
-}
-
-.grid-list-scroll .grid-list-row .grid-list-content {
-  height: 1.12rem;
-  display: table;
-  width: 100%;
-  table-layout: fixed;
-}
-
-.grid-list-scroll .grid-list-row .grid-list-content .grid-list-button {
-  display: table-cell;
-  vertical-align: middle;
+.user-list-scroll .user-list-row .user-list-handle .user-sub-image {
+  width: 0.453rem;
+  height: 0.453rem;
 }
 
-.grid-list-scroll .grid-list-row .grid-list-content .grid-list-button .grid-list-button-bg {
-  width: 0.8rem;
-  height: 0.8rem;
-  text-align: center;
-  color: #00ffff;
-  border: 1px solid;
-  border-radius: 50%;
-  font-family: iconfont;
-  font-size: 0.427rem;
-  -webkit-font-smoothing: antialiased;
-  line-height: 0.8rem;
+.user-list-scroll .user-list-row .user-list-handle .user-list-subtitle {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   display: inline-block;
 }
 
-.grid-list-scroll .grid-list-row .grid-list-content .grid-list-button:nth-child(1) {
-  padding-left: 0.427rem;
-}
-
-.grid-list-scroll .grid-list-row .grid-list-content .grid-list-button:nth-child(2) {
-  padding-left: 0.667rem;
-}
-
-.grid-list-scroll .grid-list-row .grid-list-content .grid-list-button:nth-child(3) {
-  padding-left: 0.907rem;
-}
-
-.grid-list-scroll .grid-list-row .grid-list-content .grid-list-button:nth-child(4) {
-  text-align: right;
-  padding-right: 0.427rem;
-}
-
-.grid-list-load {
-  color: #00ffff;
-  font-size: 0.427rem;
-  -webkit-transform: scale(0.7);
-  transform: scale(0.7);
-  height: 0.933rem;
-  line-height: 0.933rem;
-  text-align: center;
-}
-
-.grid-list-tip {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
-  width: 100%;
-  text-align: center;
-  color: #00ffff;
-  font-size: 0.48rem;
+.user-list-scroll .user-list-row .user-list-handle.user-list-selected {
+  left: -3.2rem;
 }
 
-.u-text {
-  width: 100%;
-  display: table;
-  position: relative;
-}
-
-.u-text input {
-  display: table-cell;
-  width: 100%;
-  border: 0;
-  outline: 0;
-  -webkit-appearance: none;
-  padding: 0.533rem 1.867rem 0.533rem 0.533rem;
-  background-color: transparent;
-}
-
-.u-text input[type=text] ~ .u-text-see {
-  color: #007aff;
-}
-
-.u-text .u-text-icon {
+.user-list-scroll .user-list-row .user-list-handle:after {
+  content: "\e611";
+  display: block;
   font-family: iconfont;
   font-size: 0.533rem;
   -webkit-font-smoothing: antialiased;
   line-height: 1;
-  width: 1.12rem;
-  padding-left: 0.453rem;
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.u-text .u-text-icon ~ input {
-  padding-left: 0;
-}
-
-.u-text .u-text-title {
-  width: 1.92rem;
-  padding-left: 0.533rem;
-  display: table-cell;
-  vertical-align: middle;
-}
-
-.u-text .u-text-title ~ input {
-  padding-left: 0;
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 
-.u-text .u-text-clear,
-.u-text .u-text-see {
+.user-list-scroll .user-list-row .user-list-button {
   position: absolute;
   top: 0;
-  width: 0.8rem;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+}
+
+.user-list-scroll .user-list-row .user-list-button div {
+  width: 1.6rem;
   height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  color: #fff;
+  float: left;
 }
 
-.u-text .u-text-clear:before,
-.u-text .u-text-see:before {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
-  font-family: defaultIconfont;
-  font-size: 0.667rem;
+.user-list-scroll .user-list-row .user-list-button div:nth-last-of-type(1) {
+  background-color: transparent;
+  font-family: iconfont;
+  font-size: 0.533rem;
   -webkit-font-smoothing: antialiased;
   line-height: 1;
+  color: #00FFFF;
 }
 
-.u-text .u-text-clear {
-  right: 0.8rem;
-}
-
-.u-text .u-text-clear:before {
-  content: '\e724';
-}
-
-.u-text .u-text-see {
-  right: 0;
-}
-
-.u-text .u-text-see:before {
-  content: '\e73c';
-}
-
-.u-text:after {
+.user-list-scroll .user-list-row:after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -597,46 +557,7 @@ p {
   right: 0;
   height: 1px;
   background: #bbb;
-}
-
-@media (max-height: 400px /*no*/) {
-  #app {
-    height: 17.253rem;
-    position: relative;
-  }
-}
-
-.custom-editName-text input {
-  font-size: 0.48rem;
-  padding-left: 1.227rem;
-}
-
-.custom-editName-text input::-webkit-input-placeholder {
-  color: #91929a;
-}
-
-.custom-editName-text .u-text-clear {
-  right: 1.093rem;
-}
-
-.custom-editName-text .u-text-clear:before {
-  content: '\e601';
-  font-family: iconfont;
-  color: #00ffff;
-  font-size: 0.533rem;
-}
-
-.custom-editName-text:after {
+  z-index: 2;
   background: -webkit-linear-gradient(left, #242635, #fff, #242635);
   background: linear-gradient(to right, #242635, #fff, #242635);
 }
\ No newline at end of file
-
-.errorTip {
-  color: #fc2168;
-  font-size: 0.427rem;
-  -webkit-transform: scale(0.7);
-  transform: scale(0.7);
-  text-align: center;
-  height: 1.067rem;
-  line-height: 1.067rem;
-}
\ No newline at end of file