From e2bca469225e167da4c9f07319fbeb056111b5e2 Mon Sep 17 00:00:00 2001
From: "liujw155@outlook.com" <liujw155@outlook.com>
Date: Fri, 5 Nov 2021 18:00:36 +0800
Subject: [PATCH] add author

---
 src/components/author_modal/author_modal.vue | 184 +++++++++++++++
 src/pages.json                               |   9 +
 src/pages/index/index.vue                    | 340 ++++++++++-----------------
 src/pages/login_and_bind/login_and_bind.vue  | 117 +++++++++
 4 files changed, 429 insertions(+), 221 deletions(-)
 create mode 100644 src/components/author_modal/author_modal.vue
 create mode 100644 src/pages/login_and_bind/login_and_bind.vue

diff --git a/src/components/author_modal/author_modal.vue b/src/components/author_modal/author_modal.vue
new file mode 100644
index 0000000..4fc281a
--- /dev/null
+++ b/src/components/author_modal/author_modal.vue
@@ -0,0 +1,184 @@
+<template>
+    <view class="ox-dark-mask">
+        <view class="ic-author-modal">
+            <view class="iam-title">微信授权</view>
+            <view class="iam-tip">您的信息和数据将受到保护</view>
+            <image class="iam-pic" mode="aspectFit" src="/static/images/icon/author_modal.png"></image>
+            <view class="iam-btns">
+                <button plain hover-class="hover-active" @click="cancelAuthor">取消</button>
+
+                <button 
+                    v-if="isProfile"
+                    plain 
+                    hover-class="hover-active" 
+                    @click="profileConfirm"
+                >授权并登录</button>
+                <button 
+                    v-else
+                    plain 
+                    hover-class="hover-active" 
+                    open-type="getUserInfo"
+                    lang="zh_CN"
+                    @getuserinfo="confirmAuthor"
+                >授权并登录</button>
+            </view>
+        </view>
+    </view>
+    
+</template>
+
+<script>
+import { API } from '../../js/api';
+import { servers } from '../../js/server';
+import util from '../../utils/util'
+const uniLogin = util.promisify(uni.login);
+const APPID = uni.getAccountInfoSync().miniProgram.appId;
+const app = getApp();
+export default {
+    computed: {
+        isProfile: _=>util.isProfile(),
+    },
+    methods: {
+        // 新获取用户信息
+        profileConfirm(){
+            uni.getUserProfile({
+                lang: 'zh_CN', desc: '授权登陆',
+                success: res => {
+                    this.confirmAuthor({detail: {...res}});
+                },
+                fail: function(err) {
+                    util.showNone('获取用户信息失败！请重试');
+                    console.warn('getUserProfile Err', err)
+                }
+            })
+        },	
+        getLoginQuery({
+            userInfo,
+            loginRes
+        }){
+            return {
+                appid: APPID,
+                code: loginRes.code,
+                encryptedData: userInfo.encryptedData,
+                // is_details: 1,
+                // 后端解密错误，直接传用户信息
+                user_info: userInfo.userInfo,
+                user_raw_data: userInfo.rawData,
+                ...userInfo.userInfo,
+            }
+        },
+        async confirmAuthor(userRes){
+            if(!userRes.detail.userInfo){
+                // this.closeAuthor();
+                return util.showNone('获取用户信息失败！请稍后重试');
+            }
+            let loginRes = await uniLogin();
+
+            if(!loginRes.code){
+                // this.closeAuthor();
+                return util.showNone('获取登陆凭证失败！稍后重试');
+            }
+
+            servers.post({
+                url: API.wechatMiniAppLoginAndSync,
+                data: this.getLoginQuery({
+                    userInfo: userRes.detail,
+                    loginRes
+                }),
+                isDefaultGet: false,
+            })
+            .then(res=>{
+                util.hideLoad();
+                let _data = res.data || {};
+                if(_data.code == 0){
+                    if(_data.data == '')return util.routeTo(`/pages/login/login`,'rL');
+                    util.showNone(_data.message || '登陆成功！');
+                    // let _data = res.data.data;
+                    // if(_data.user.role == '')return util.routeTo(`/pages/merchant_login/merchant_login`,'rL');
+                    
+                    uni.setStorageSync('token',_data.data);
+                    
+                    setTimeout(_=>{
+                        this.$emit('success', _data);
+                        // this.getIndexInfo();
+                        // this.closeAuthor();
+                        // this.loginStatus = app.isLogin();
+                    }, 1200);
+                }else{
+                    
+                    util.showNone(_data.message || '后台登陆失败！');
+                    setTimeout(_=>{
+                        this.$emit('fail', _data);
+                    }, 1200)
+                    // setTimeout(_=>this.closeAuthor(), 1200);
+                }
+                
+            }).catch(err=>{
+                util.hideLoad();
+                setTimeout(_=>{
+                    this.$emit('fail', err);
+                }, 1200)
+            })
+
+        },
+        cancelAuthor(){
+            this.$emit('cancel')
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+    @import "~style/public.scss";
+    .ic-author-modal{
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		padding-top: 60upx;
+		width: 662upx;
+		height: 884upx;
+		border-radius: 10upx;
+		background-color: #fff;
+		.iam-title{
+			margin-bottom: 22upx;
+			text-align: center;
+			line-height: 60upx;
+			font-size: 44upx;
+			font-weight: 500;
+			color: #1a1a1a;
+		}
+		.iam-tip{
+			margin-bottom: 52upx;
+			line-height: 40upx;
+			text-align: center;
+			font-size: 28upx;
+			color: #9c9c9f;
+		}
+		.iam-pic{
+			margin: 0 auto 62upx;
+			display: block;
+			width: 488upx;
+			height: 416upx;
+		}
+		.iam-btns{
+			@include centerFlex(center);
+			>button{
+				margin: 0 20upx;
+				width: 240upx;
+				height: 92upx;
+				line-height: 88upx;
+				text-align: center;
+				border-radius: 46upx;
+				border: 2upx solid $themeColor;
+				font-size: 32upx;
+				color: $themeColor;
+				&+button{
+					background-color: $themeColor;
+					color: #fff;
+				}
+			}
+		}
+
+	}
+</style>    
\ No newline at end of file
diff --git a/src/pages.json b/src/pages.json
index 72a67ad..762916e 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -4,6 +4,15 @@
 		{
 			"path": "pages/index/index",
 			"style": {
+				"mp-weixin": {
+					"navigationStyle": "custom"
+				}
+			}
+		},
+		{
+			"path": "pages/login_and_bind/login_and_bind",
+			"style": {
+				"navigationBarTitleText": "登录"
 			}
 		},
 		{
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 1d05548..790d392 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,5 +1,8 @@
 <template>
 	<view class="index-container">
+		<view class="ic-custom-bar" :style="customBarStyle">
+			
+		</view>
 		<view class="ic-content">
 			<view class="ic-header">
 				<view class="ih-address" v-if="loginStatus" @click="toStoreList">
@@ -42,32 +45,14 @@
 				
 			</view>
 		</view>
-		<view class="ox-dark-mask" v-if="isShowAuthorModal">
-			<view class="ic-author-modal">
-				<view class="iam-title">微信授权</view>
-				<view class="iam-tip">您的信息和数据将受到保护</view>
-				<image class="iam-pic" mode="aspectFit" src="/static/images/icon/author_modal.png"></image>
-				<view class="iam-btns">
-					<button plain hover-class="hover-active" @click="cancelAuthor">取消</button>
+		<author-modal 
+			v-if="isShowAuthorModal"
+			@cancel="authorCancel"
+			@fail='authorFail'
+			@success='authorSuccess'
 
-					<button 
-						v-if="isProfile"
-						plain 
-						hover-class="hover-active" 
-						@click="profileConfirm"
-					>授权并登录</button>
-					<button 
-						v-else
-						plain 
-						hover-class="hover-active" 
-						open-type="getUserInfo"
-						lang="zh_CN"
-						@getuserinfo="confirmAuthor"
-					>授权并登录</button>
-				</view>
-			</view>
-		</view>
-		<view class="ox-dark-mask">
+		></author-modal>
+		<view class="ox-dark-mask" v-if="false">
 			<view class="ic-account-change">
 				<view class="iac-tit">轻触头像切换账号</view>
 				<view class="iac-account-ls">
@@ -98,87 +83,29 @@
 	import util from '../../utils/util';
 	import { servers } from '../../js/server';
 	import { API } from '../../js/api';
-	const tabList = [
-		{
-			id: 0,
-			name: '营业额',
-			path: '/pages/turnover/turnover',
-			serverKey: 1001  // 后端对应权限编号
-		},
-		{
-			id: 1,
-			name: '收款记录',
-			path: '/pages/collection/record/record',
-			serverKey: 1002  // 后端对应权限编号
-		},
-		{
-			id: 2,
-			name: '订单管理',
-			path: '/subpackage/order/pages/order_manage/order_manage',
-			serverKey: 1012  // 后端对应权限编号
-		},
-		{
-			id: 3,
-			name: '员工管理',
-			path: '/pages/employee/manage/manage',
-			serverKey: 1007  // 后端对应权限编号
-		},
-		{
-			id: 4,
-			name: '核销查询',
-			path: '/pages/write_off/search_result/search_result',
-			serverKey: 1008  // 后端对应权限编号
-		},
-		{
-			id: 5,
-			name: '场地看板',
-			// path: '/pages/site/order_list/order_list', // 20210804 不要占用列表
-			path: '/pages/site/manage/manage',
-			serverKey: 1009  // 后端对应权限编号
-		},
-		{
-			id: 6,
-			name: '设备管理',
-			path: '/subpackage/device/pages/index/index',
-			serverKey: 1010  // 后端对应权限编号
-		},
-		{
-			id: 7,
-			name: '商品零售',
-			path: '/subpackage/retail/pages/index/index',
-			serverKey: 1011  // 后端对应权限编号
-		},
-		{
-			id: 8,
-			name: '课程管理',
-			path: '/subpackage/course/pages/index/index',
-			serverKey: 1013  // 后端对应权限编号 1013
-		}
-	];
-	
+	import author_modal from '../../components/author_modal/author_modal.vue'
 	const app = getApp();
-
-	//#ifndef H5
-	
-	const uniGetSetting = util.promisify(uni.getSetting);
 	const uniLogin = util.promisify(uni.login);
-	const uniGetUserInfo= util.promisify(uni.getUserInfo);
 	const APPID = uni.getAccountInfoSync().miniProgram.appId;
 
-	//#endif
 	export default {
+		components: {
+			'author-modal': author_modal
+		},
 		computed: {
 			isProfile: _=>util.isProfile(),
-			// loginStatus(){
-			// 	return app.isLogin();
-			// }
+			customBarStyle(){
+				let { customBarInfo } = this;
+				return `height: ${customBarInfo.height}px;`
+			}
 		},
 		data() {
 			return {
-				tabList,
+				tabList: tabList(),
 				isShowAuthorModal: false,
 				indexData: {},
 				loginStatus: false,
+				customBarInfo: {},
 			}
 		},
 		async onLoad() {	
@@ -199,12 +126,44 @@
 			// #endif
 		},
 		onShow(){
+			this.initCustomBarInfo();
 			// #ifndef H5
 			let { indexData } = this; 
 			if(JSON.stringify(indexData)!='{}'&&!!app.isLogin())this.getIndexInfo();
 			// #endif
 		},
 		methods: {
+			// 初始化状态栏信息
+			initCustomBarInfo(){
+				let _timer = null; // 防止小程序api未初始化完成
+				const sysInfo = uni.getSystemInfoSync();
+				const capsuleInfo = uni.getMenuButtonBoundingClientRect();
+				// const capsuleInfo = null;
+				let _data = {
+					statusBarHeight: sysInfo.statusBarHeight,
+					capsuleInfo,
+				}
+				clearTimeout(_timer);
+				_timer = null;
+				if(capsuleInfo&&capsuleInfo.top&&capsuleInfo.bottom){
+					_data[ 'height' ] = capsuleInfo.bottom + capsuleInfo.top - sysInfo.statusBarHeight + 4;
+				}else{
+					_timer = setTimeout(_=>this.initCustomBarInfo(),700); // 防止小程序api未初始化完成
+					_data[ 'height' ] = sysInfo.statusBarHeight + 50;
+				}
+				this.customBarInfo = _data;
+			},
+			authorCancel(){
+				this.closeAuthor();
+			},
+			authorFail(){
+				this.closeAuthor();
+			},
+			authorSuccess(){
+				this.getIndexInfo();
+				this.closeAuthor();
+				this.loginStatus = app.isLogin();
+			},
 			toNoticeList(){
 				if(!app.isLogin())return this.showAuthor();
 				util.routeTo(`/pages/message/list/list`,'nT');
@@ -218,7 +177,6 @@
 				if(!_permission[tabInfo.serverKey])return util.showNone('暂无权限，请联系管理员开启！')
 				util.routeTo(tabInfo.path,'nT');
 			},
-			
 			getIndexInfo(){	
 				servers.get({
 					url: API.calc,
@@ -248,12 +206,13 @@
 						let _data = res.data;
 						if(_data.code == 0){
 							// let _data = res.data.data;
+							
 							if(_data.data == ''){
 								uni.removeStorageSync('token');
 								this.loginStatus = app.isLogin();
 								return util.routeTo(`/pages/login/login`,'rL');
 							}
-							uni.setStorageSync('token',_data.data);
+							uni.setStorageSync('token', _data.data);
 							return _data;
 						}else{
 							util.showNone(_data.message || '校验身份失败！');
@@ -274,81 +233,6 @@
 			closeAuthor(){
 				this.isShowAuthorModal = false
 			},
-			cancelAuthor(){
-				this.closeAuthor();
-			},
-			getLoginQuery({
-				userInfo,
-				loginRes
-			}){
-				return {
-					appid: APPID,
-					code: loginRes.code,
-					encryptedData: userInfo.encryptedData,
-					// is_details: 1,
-					// 后端解密错误，直接传用户信息
-					user_info: userInfo.userInfo,
-					user_raw_data: userInfo.rawData,
-					...userInfo.userInfo,
-				}
-			},
-			// 新获取用户信息
-			profileConfirm(){
-				uni.getUserProfile({
-					lang: 'zh_CN', desc: '授权登陆',
-					success: res => {
-						this.confirmAuthor({detail: {...res}});
-					},
-					fail: function(err) {
-						util.showNone('获取用户信息失败！请重试');
-						console.warn('getUserProfile Err', err)
-					}
-				})
-			},	
-
-			async confirmAuthor(userRes){
-				if(!userRes.detail.userInfo){
-					this.closeAuthor();
-					return util.showNone('获取用户信息失败！请稍后重试');
-				}
-				let loginRes = await uniLogin();
-
-				if(!loginRes.code){
-					this.closeAuthor();
-					return util.showNone('获取登陆凭证失败！稍后重试');
-				}
-
-				servers.post({
-					url: API.wechatMiniAppLoginAndSync,
-					data: this.getLoginQuery({
-						userInfo: userRes.detail,
-						loginRes
-					}),
-					isDefaultGet: false,
-				})
-				.then(res=>{
-					util.hideLoad();
-					let _data = res.data || {};
-					if(_data.code == 0){
-						if(_data.data == '')return util.routeTo(`/pages/login/login`,'rL');
-						util.showNone(_data.message || '登陆成功！');
-						// let _data = res.data.data;
-						// if(_data.user.role == '')return util.routeTo(`/pages/merchant_login/merchant_login`,'rL');
-						
-						uni.setStorageSync('token',_data.data);
-						setTimeout(_=>{
-							this.getIndexInfo();
-							this.closeAuthor();
-							this.loginStatus = app.isLogin();
-						}, 1200);
-					}else{
-						util.showNone(_data.message || '后台登陆失败！');
-						setTimeout(_=>this.closeAuthor(), 1200);
-					}
-					
-				}).catch(util.hideLoad)
-
-			},
 			
 			toStoreList(){
 				if(!app.isLogin())return this.showAuthor();
@@ -357,10 +241,75 @@
 			},
 		}
 	}
+
+	function tabList(){
+		return [
+			{
+				id: 0,
+				name: '营业额',
+				path: '/pages/turnover/turnover',
+				serverKey: 1001  // 后端对应权限编号
+			},
+			{
+				id: 1,
+				name: '收款记录',
+				path: '/pages/collection/record/record',
+				serverKey: 1002  // 后端对应权限编号
+			},
+			{
+				id: 2,
+				name: '订单管理',
+				path: '/subpackage/order/pages/order_manage/order_manage',
+				serverKey: 1012  // 后端对应权限编号
+			},
+			{
+				id: 3,
+				name: '员工管理',
+				path: '/pages/employee/manage/manage',
+				serverKey: 1007  // 后端对应权限编号
+			},
+			{
+				id: 4,
+				name: '核销查询',
+				path: '/pages/write_off/search_result/search_result',
+				serverKey: 1008  // 后端对应权限编号
+			},
+			{
+				id: 5,
+				name: '场地看板',
+				// path: '/pages/site/order_list/order_list', // 20210804 不要占用列表
+				path: '/pages/site/manage/manage',
+				serverKey: 1009  // 后端对应权限编号
+			},
+			{
+				id: 6,
+				name: '设备管理',
+				path: '/subpackage/device/pages/index/index',
+				serverKey: 1010  // 后端对应权限编号
+			},
+			{
+				id: 7,
+				name: '商品零售',
+				path: '/subpackage/retail/pages/index/index',
+				serverKey: 1011  // 后端对应权限编号
+			},
+			{
+				id: 8,
+				name: '课程管理',
+				path: '/subpackage/course/pages/index/index',
+				serverKey: 1013  // 后端对应权限编号 1013
+			}
+		];
+	}
 </script>
 
 <style lang="scss" scoped>
 	@import "~style/public.scss";
+	.ic-custom-bar{
+		background-color: $themeColor;
+		margin-bottom: 24upx;
+
+	}
 	.index-container{
 		position: relative;
 	}
@@ -532,57 +481,6 @@
 			
 		}
 	}
-	.ic-author-modal{
-		position: absolute;
-		left: 50%;
-		top: 50%;
-		transform: translate(-50%, -50%);
-		padding-top: 60upx;
-		width: 662upx;
-		height: 884upx;
-		border-radius: 10upx;
-		background-color: #fff;
-		.iam-title{
-			margin-bottom: 22upx;
-			text-align: center;
-			line-height: 60upx;
-			font-size: 44upx;
-			font-weight: 500;
-			color: #1a1a1a;
-		}
-		.iam-tip{
-			margin-bottom: 52upx;
-			line-height: 40upx;
-			text-align: center;
-			font-size: 28upx;
-			color: #9c9c9f;
-		}
-		.iam-pic{
-			margin: 0 auto 62upx;
-			display: block;
-			width: 488upx;
-			height: 416upx;
-		}
-		.iam-btns{
-			@include centerFlex(center);
-			>button{
-				margin: 0 20upx;
-				width: 240upx;
-				height: 92upx;
-				line-height: 88upx;
-				text-align: center;
-				border-radius: 46upx;
-				border: 2upx solid $themeColor;
-				font-size: 32upx;
-				color: $themeColor;
-				&+button{
-					background-color: $themeColor;
-					color: #fff;
-				}
-			}
-		}
-
-	}
 	.ic-account-change{
 		position: absolute;
 		left: 0;
diff --git a/src/pages/login_and_bind/login_and_bind.vue b/src/pages/login_and_bind/login_and_bind.vue
new file mode 100644
index 0000000..785e608
--- /dev/null
+++ b/src/pages/login_and_bind/login_and_bind.vue
@@ -0,0 +1,117 @@
+<template>
+    <view class="login-and-bind">
+        <view class="lab-header">
+            <view class="lh-txt"><text>您好，\n\r欢迎使用商家助手</text></view>
+        </view>
+        <view class="lab-main">
+            <view class="lm-bar"></view>
+            <view class="lm-logo"></view>
+            <view class="lm-ipt-ls">
+                <view class="lil-item">
+                    <input placeholder="请输入密码" />
+                    <view class="li-tip">您输入的账号信息有误，请检查重新输入</view>
+                </view>
+                <view class="lil-item"><input placeholder="请输入密码" /></view>
+                <view class="lil-item"><input placeholder="请输入密码" /></view>
+            </view>
+            <view class="lm-btn">登录</view>
+            <view class="lm-tip">账号登录成功后即被激活且绑定微信号</view>
+            <view class="lm-help-link">使用帮助</view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss">
+    @import '~style/public.scss';
+    page{
+        background-color: #fff;
+    }
+    .login-and-bind{
+        padding-bottom: 0upx;
+        padding-bottom: calc( 0upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
+        padding-bottom: calc( 0upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
+    }
+    .lab-header{
+        padding:  88upx 40upx 0;
+        height: 300upx;
+        background-color: #17a181;
+        .lh-txt{
+            font-size: 56upx;
+            line-height: 66upx;
+            font-weight: 500;
+            color: #fff;
+        }
+    }
+    .lab-main{
+        position: relative;
+        .lm-bar{
+            height: 160upx;
+            background-color: skyblue;
+
+        }
+        .lm-logo{
+            margin: -146upx auto 68upx;
+            width: 176upx;
+            height: 176upx;
+            border-radius: 50%;
+            background-color: $themeColor;
+        }
+        .lm-ipt-ls{
+            padding: 68upx 74upx 10upx;
+            .lil-item{
+                position: relative;
+                margin-bottom: 50upx;
+                padding: 0 40upx;
+                height: 108upx;
+                border-radius: 54upx;
+                border: 2upx solid #D8D8D8;
+                @include centerFlex(center);
+                >input{
+                    flex-grow: 1;
+                    height: 100%;
+                    font-size: 32upx;
+                    color: #1a1a1a;
+                }
+                .li-tip{
+                    position: absolute;
+                    right: 0;
+                    bottom: -42upx;
+                    padding: 0 40upx;
+                    font-size: 28upx;
+                    line-height: 40upx;
+                    color: #EA5061;
+                }
+            }
+        }
+        .lm-btn{
+            margin: 0 auto 20upx;
+            width: 610upx;
+            line-height: 108upx;
+            border-radius: 54upx;
+            text-align: center;
+            font-size: 32upx;
+            color: #fff;
+            background-color: $themeColor;
+        }
+        .lm-tip{
+            margin-bottom: 122upx;
+            text-align: center;
+            line-height: 40upx;
+            font-size: 28upx;
+            color: #B2B2B2;
+        }
+        .lm-help-link{
+            text-align: center;
+            font-size: 28upx;
+            line-height: 40upx;
+            color: $themeColor;
+        }
+
+    }
+</style>
\ No newline at end of file