微信登录功能

pages.json

@@ -8,6 +8,12 @@
 			}
         },
 		{
+		    "path" : "pages/Login/loginWeixin",
+		    "style" : {
+				"navigationStyle": "custom"
+			}
+		},
+		{
 		    "path" : "pages/Charts/mainStatistics",
 		    "style" : {
 				"navigationBarTitleText":"统计图表"
@@ -57,6 +63,15 @@
 				"navigationBarTitleText": "销售排行"
 			}
 		}
+        
+        ,{
+            "path" : "pages/WeixinSwicth/WeixinSwicth",
+            "style" : {
+				// "navigationStyle": "custom",
+				 "enablePullDownRefresh": true,
+				"disableScroll": true
+			}
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "white",

pages/Login/Login.vue

@@ -15,12 +15,54 @@
 				<button type="primary" formType="submit" :loading="isLoading">{{loginBtnLabel}}</button>
 			</view>
 		</form>
+		<!-- 第三方登录H5不支持，所以隐藏掉 -->
+		<!-- #ifndef H5 -->
+		<view class="third-wapper">
+
+			<view class="third-line">
+				<view class="single-line">
+					<view class="line"></view>
+				</view>
+
+				<view class="third-words">第三方账号登录</view>
+
+				<view class="single-line">
+					<view class="line"></view>
+				</view>
+			</view>
+
+			<view class="third-icos-wapper">
+				<!-- 5+app 用qq/微信/微博 登录 小程序用微信小程序登录 h5不支持 -->
+				<!-- #ifdef APP-PLUS -->
+				<!-- <image src="../../static/icos/weixin.png" data-logintype="weixin" @click="appOAuthLogin" class="third-ico"></image>
+				<image src="../../static/icos/QQ.png" data-logintype="qq" @click="appOAuthLogin" class="third-ico" style="margin-left: 80upx;"></image>
+				<image src="../../static/icos/weibo.png" data-logintype="sinaweibo" @click="appOAuthLogin" class="third-ico" style="margin-left: 80upx;"></image>
+ -->				<!-- #endif -->
+				<!-- #ifdef MP-WEIXIN -->
+				<button open-type='getUserInfo' @getuserinfo="wxLogin" class="third-btn-ico">
+				</button>
+				<!-- #endif -->
+			</view>
+		</view>
+		<!-- #endif -->
+	</view>
 	</view>
 </template>
 
 <script>
-	import { mapState } from 'vuex';
+	import {
+		mapState
+	} from 'vuex';
 	export default {
+		data() {
+			return {
+				parm: {
+					avatarUrl: "",
+					nickName: "",
+					openId: ""
+				}
+			};
+		},
 		computed: {
 			...mapState(['isLoading']),
 			loginBtnLabel() {
@@ -30,19 +72,81 @@
 		methods: {
 			loginSubmit(event) {
 				uni.hideKeyboard();
-				const { value: loginForm } = event.detail;
+				const {
+					value: loginForm
+				} = event.detail;
 				this.$store.dispatch('login', loginForm)
 					.then(_ => {
-						// uni.redirectTo({
-						// 	url: '/pages/Charts/column',
-						// });
 						//标记刚登录跳转
 						uni.setStorageSync('test', '1');
 						uni.reLaunch({
-						    url: '/pages/Charts/mainStatistics',
+							url: '/pages/Charts/mainStatistics',
 						});
 					});
-			}
+			},
+
+			// 实现在微信小程序端的微信登录
+			async wxLogin(e) {
+				var serverUrl = this.serverurl;
+				// 通过微信开发能力，获得微信用户的基本信息
+				var userInfo = e.detail.userInfo;
+				var parm1 = '';
+				// 实现微信登录
+				await uni.login({
+					provider: "weixin",
+					success:(loginResult)=> {
+						// 获得微信登录的code：授权码
+						var code = loginResult.code;
+						var appid = "wx3844925af1740a7d";
+						var secret = "c1f0363a78d1c580388d6c4f14674733";
+						var openid = "";
+						uni.request({
+							url: serverUrl+"/TWeixin/getOpenid?code="+code,
+							mothod: "GET",
+							success: (userResult) => {
+								openid = userResult.data.data;
+								var parm = {
+									avatarUrl: "",
+									nickName: "",
+									openId: ""
+								};
+								parm['avatarUrl'] = userInfo.avatarUrl;
+								parm['nickName'] = userInfo.nickName;
+								parm['openId'] = openid;
+								uni.setStorageSync("newparm", parm);
+								this.loginweixin();
+							}
+						});
+
+					}
+				});
+
+			},
+			loginweixin() {
+				var parm = uni.getStorageSync("newparm");
+				if (parm.openId != null) {
+					this.$store.dispatch('loginWX', parm)
+						.then(data => {
+							var result = data.message;
+							var userInfo = data.data;
+							if (result == "off") {
+								uni.setStorageSync("weixinInfo", userInfo);
+								//没有绑定，跳转到微信绑定页面
+								uni.reLaunch({
+									url: "loginWeixin",
+								});
+							};
+							if (result == "SUCCESS") {
+								// uni.setStorageSync("weixinInfo", weixinInfo);
+								uni.setStorageSync('test', '1');
+								uni.reLaunch({
+									url: '/pages/Charts/mainStatistics',
+								});
+								uni.setStorageSync("globalUser", userInfo);
+							}
+						});
+				}
+			},
 		}
 	}
 </script>
@@ -58,25 +162,31 @@
 		left: 0;
 		right: 0;
 		bottom: 0;
+
 		.content {
 			padding: 0 20upx;
 			display: flex;
 			flex-flow: column nowrap;
 			align-items: center;
+
 			.logo {
 				width: 401upx;
 				height: 125upx;
 				text-align: center;
 				margin: 50upx;
 			}
+
 			form {
 				width: calc(100% - 100upx);
 				padding: 50upx;
+
 				.section {
 					margin: 50upx 0;
 				}
+
 				.btn-area {
 					margin-top: 100upx;
+
 					button {
 						background-color: $uni-color-primary;
 					}
@@ -84,4 +194,67 @@
 			}
 		}
 	}
+
+	/* 第三方登录 start */
+	.third-wapper {
+		width: 100%;
+		/* 固定底部 */
+		/* bottom: 0;
+		position: fixed; */
+
+		margin-top: 60upx;
+
+	}
+
+	.third-line {
+		display: flex;
+		flex-direction: row;
+		justify-content: center
+	}
+
+	.third-words {
+		color: #A9A9A9;
+		font-size: 13px;
+
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.single-line {
+		padding: 15upx 20upx;
+		width: 25%;
+		align-items: center;
+	}
+
+	.third-icos-wapper {
+		margin-top: 30upx;
+
+		display: flex;
+		flex-direction: row;
+		justify-content: center
+	}
+
+	.third-ico {
+		width: 60upx;
+		height: 60upx;
+	}
+
+	.third-btn-ico {
+		// background-image:url(http://122.152.205.72:88/group1/M00/00/05/CpoxxFxFO-yAOjTaAAATCIZEzRU503.png);
+		background-image: url('~@/static/backgrounds/weixin.png');
+		width: 120upx;
+		height: 120upx;
+		background-color: white;
+		background-size: 120upx 120upx;
+		// background-repeat:no-repeat;
+		border: none;
+		padding: 0;
+	}
+
+	button::after {
+		border: none;
+	}
+
+	/* 第三方登录 end */
 </style>

pages/Login/loginWeixin.vue

@@ -0,0 +1,128 @@
+<template>
+	<view class="content">
+		<image class="logo" :src="avatarUrl"></image>
+		<view class="title">
+			{{nickName}}
+		</view>
+		<form @submit="loginwxSubmit">
+			<view class="section">
+				<input class="input-account" name="username" placeholder="请输入用户名" />
+			</view>
+			<view class="section">
+				<input class="input-pwd" password name="password" placeholder="请输入密码" />
+			</view>
+			<view class="btn-area">
+				<button type="primary" formType="submit" :loading="isLoading">绑定微信</button>
+			</view>
+		</form>
+	</view>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex';
+	import MD5 from '@/assets/scripts/md5';
+	export default {
+		data() {
+			return {
+				nickName: '',
+				openId: '',
+				avatarUrl: '',
+				pname: '',
+				password: '',
+				parm: {
+					username: "",
+					password: "",
+					avatarUrl: "",
+					nickName: "",
+					openId: ""
+				}
+			};
+		},
+		onShow() {
+
+			var weixinInfo = uni.getStorageSync("weixinInfo");
+			this.nickName = weixinInfo.nickName;
+			this.openId = weixinInfo.openId;
+			this.avatarUrl = weixinInfo.avatarUrl;
+		},
+		computed: {
+			...mapState(['isLoading']),
+		},
+		methods: {
+			loginwxSubmit(event) {
+				uni.hideKeyboard();
+				// const { value: loginForm } = event.detail;
+				var username = event.detail.value.username;
+				var pass = event.detail.value.password;
+				var password = MD5(pass);
+				var serverUrl = this.serverurl;
+				this.parm['username'] = username;
+				this.parm['password'] = password;
+				this.parm['avatarUrl'] = this.avatarUrl;
+				this.parm['nickName'] = this.nickName;
+				this.parm['openId'] = this.openId;
+				// debugger;
+				this.$store.dispatch('loginWXCZ', this.parm)
+					.then(data => {
+						var result = data.message;
+						var weixinInfo = data.data;
+						var code = data.code;
+						uni.setStorageSync("globalUser", weixinInfo);
+						if (code == true) {
+							uni.reLaunch({
+								url: '/pages/Charts/mainStatistics',
+							});
+						}
+					}, _ => void uni.stopPullDownRefresh());
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+	page {
+		padding: 200upx 0 0 0;
+		background-image: url('~@/static/backgrounds/login_bg.png');
+		background-repeat: no-repeat;
+		background-size: 100% 100%;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+
+		.content {
+			padding: 0 20upx;
+			display: flex;
+			flex-flow: column nowrap;
+			align-items: center;
+
+			.logo {
+				width: 150upx;
+				height: 150upx;
+				text-align: center;
+				margin: 50upx;
+			}
+
+			form {
+				width: calc(100% - 100upx);
+				padding: 50upx;
+
+				.section {
+					margin: 50upx 0;
+				}
+
+				.btn-area {
+					margin-top: 100upx;
+
+					button {
+						background-color: $uni-color-primary;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/User/user.vue

@@ -2,15 +2,21 @@
 	<view class="page-fill">
 		<view class="headimg"></view>
 		<view class="header">
-			<image src="../../static/img/userimg.png" class="face"></image>
-
+			<view v-if="weixinUp" class="face3">
+				<image :src="avatarUrl" class="face2"></image>
+			</view>
+			<view v-if="weixinDown">
+				<image src="../../static/img/userimg.png" class="face"></image>
+			</view>
 			<view class="info-wapper">
 				<view class="nickname">
 					{{name}}
 				</view>
 			</view>
 			<view class="tuichu">
-				<button  @tap="bindLogout" class="settings"><p class="p3">退出</p></button>
+				<button @tap="bindLogout" class="settings">
+					<p class="p3">退出</p>
+				</button>
 			</view>
 		</view>
 		<view v-if="show">
@@ -30,6 +36,12 @@
 
 			</view>
 		</view>
+		<view class="xiugai2">
+			<button type="primary" @click="trant()" class="xiugai2">
+				<p class="xiugai3">解除微信绑定</p>
+			</button>
+			<!-- <font @click="trant()">解除微信绑定</font> -->
+		</view>
 	</view>
 
 </template>
@@ -52,7 +64,10 @@
 					name: null,
 					id: null
 				},
-				showOrNo: null
+				showOrNo: null,
+				avatarUrl: null,
+				weixinUp: false,
+				weixinDown:true
 			};
 		},
 		onPullDownRefresh() {
@@ -73,11 +88,22 @@
 					me.show = true;
 				}
 			}
+			var newparm = uni.getStorageSync("newparm");
+			if (newparm.avatarUrl.length>1) {
+				this.avatarUrl = newparm.avatarUrl;
+				this.weixinUp = true;
+				this.weixinDown = false;
+			}
 		},
 		onLoad() {
 
 		},
 		methods: {
+			trant(){
+				uni.reLaunch({
+					url: '../WeixinSwicth/WeixinSwicth',
+				});
+			},
 			bindLogout() {
 				//清楚缓存
 				uni.clearStorageSync();
@@ -91,29 +117,6 @@
 			setStyle2() {
 				this.showOrNo = "none";
 			},
-			// updata() {
-			// 	//挂载方式
-			// 	var serverurl = this.serverurl;
-			// 	var id = this.id;
-			// 	var value = this.value;
-			// 	if (value != null && value != '') {
-			// 		uni.request({
-			// 			url: serverurl+'/TEquipment/updateName',
-			// 			data: {
-			// 				id: id,
-			// 				name: value
-			// 			},
-			// 			dataType: 'json',
-			// 			method: "POST",
-			// 			success: (res) => {
-			// 				uni.showModal({
-			// 					title: '提示',
-			// 					content: '名称:' + value + res.data.message,
-			// 				});
-			// 			}
-			// 		});
-			// 	}
-			// },
 			getValue: function(event) {
 				// 绕过v-model 获取input输入框的值  
 				var value = event.target.value;
@@ -146,19 +149,22 @@
 		width: 100%;
 		height: 100%;
 		background: #FFFFFF;
+		padding-bottom: 100upx;
 	}
-	.headimg{
+
+	.headimg {
 		height: 120upx;
 		background: #206DC3;
 		width: 750upx;
 	}
+
 	.header {
-		height:160upx;
+		height: 160upx;
 		width: 690upx;
-		background:#FFFFFF;
+		background: #FFFFFF;
 		margin: auto;
 		padding-top: 50upx;
-		box-shadow:0upx -1upx   20upx #D3D3D3;
+		box-shadow: 0upx -1upx 20upx #D3D3D3;
 		border-radius: 15upx;
 		transform: translateY(-90upx);
 		display: flex;
@@ -174,6 +180,24 @@
 		flex-shrink: 0;
 	}
 
+	.face2 {
+		/* border-left: 10upx; */
+		width: 120upx;
+		height: 120upx;
+		/* padding-left: 30upx; */
+		padding-right: 0upx;
+		border-radius: 50%;
+		flex-shrink: 0;
+	}
+	.face3{
+		/* border-left: 10upx; */
+		width: 120upx;
+		height: 120upx;
+		padding-left: 30upx;
+		padding-right: 0upx;
+		border-radius: 50%;
+		flex-shrink: 0;
+	}
 	.info-wapper {
 		width: 50%;
 		margin-left: 30upx;
@@ -195,14 +219,16 @@
 		justify-content: flex-end;
 		width: 15%;
 	}
-	.tuichu{
+
+	.tuichu {
 		width: 100upx;
 		height: 64upx;
 		padding-top: 30upx;
 		/* padding-right: 30upx; */
 		text-align: center;
-		margin:0 auto;
+		margin: 0 auto;
 	}
+
 	.settings {
 		width: 100upx;
 		height: 64upx;
@@ -211,9 +237,10 @@
 		/* padding-right: 50upx; */
 		/* padding-top: 5upx; */
 		text-align: center;
-		margin:0 auto;
+		margin: 0 auto;
 	}
-	.p3{
+
+	.p3 {
 		/* #ifdef H5 */
 		top: -13%;
 		/* #endif */
@@ -225,28 +252,32 @@
 		/* #ifndef H5 */
 		padding-top: 3upx;
 		/* #endif */
-		position:absolute;
+		position: absolute;
 		/* 水平居中 */
-		left:50%;
-		-webkit-transform:translateX(-50%);
-		transform:translateX(-50%);
+		left: 50%;
+		-webkit-transform: translateX(-50%);
+		transform: translateX(-50%);
 	}
-	.centerY{
-		position:absolute;
-		top:50%;
-		-webkit-transform:translateY(-50%);
-		transform:translateY(-50%);
+
+	.centerY {
+		position: absolute;
+		top: 50%;
+		-webkit-transform: translateY(-50%);
+		transform: translateY(-50%);
 	}
-	.button2{
+
+	.button2 {
 		padding-right: 60upx;
 		padding-top: 2upx;
 	}
+
 	.button {
 		/* padding: 5upx 10upx 10upx 0upx; */
 		width: 80upx;
 		height: 60upx;
 		border-radius: 10upx;
 	}
+
 	.p {
 		/* #ifdef H5 */
 		top: -13%;
@@ -257,13 +288,14 @@
 		/* #ifndef H5 */
 		padding-top: 3upx;
 		/* #endif */
-		
-		position:absolute;
+
+		position: absolute;
 		/* 水平居中 */
-		left:50%;
-		-webkit-transform:translateX(-50%);
-		transform:translateX(-50%);
+		left: 50%;
+		-webkit-transform: translateX(-50%);
+		transform: translateX(-50%);
 	}
+
 	.input {
 		/* padding: 10upx 20upx 10upx 0upx; */
 		padding-left: 20upx;
@@ -271,10 +303,11 @@
 		background-color: #FFFFFF;
 		width: 500upx;
 		height: 50upx;
-		box-shadow:0upx 0upx   20upx #D3D3D3;
+		box-shadow: 0upx 0upx 20upx #D3D3D3;
 		border-radius: 5upx;
 	}
-	.xiugai{
+
+	.xiugai {
 		width: 92%;
 		border-left: 20upx;
 		border-left: 10upx solid #206DC3;
@@ -287,6 +320,26 @@
 		font-size: 32upx;
 		color: #363D44;
 	}
+	.xiugai2 {
+		width: 100%;
+		height: 80upx;
+		font-family: "PingFang-SC-Bold";
+		font-weight: bold;
+		margin: auto;
+		font-size: 50upx;
+		color: #363D44;
+		position:fixed;
+		bottom:0;
+	}
+	.xiugai3 {
+		height: 80upx;
+		font-family: "PingFang-SC-Bold";
+		font-weight: bold;
+		margin: auto;
+		font-size: 40upx;
+		color: #363D44;
+		
+	}
 	.body {
 		background-color: #FFFFFF;
 		padding: 10upx 10upx 10upx 10upx;

pages/WeixinSwicth/WeixinSwicth.vue

@@ -0,0 +1,170 @@
+<template>
+	<view>
+		<view class="xiugai">
+			微信绑定情况
+		</view>
+		<view v-for="(item,index) in list" :key="index" class="body">
+			<view class="input-two">
+				<input type="text" class="input" :value=title+item.nickName />
+			</view>
+
+			<view class="button2">
+				<button type="primary" @click="delet(item.id,item.adminId)" class="button">
+					<p class="p">解除绑定</p>
+				</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				adminId: '',
+				title: "微信名:",
+				list: []
+			}
+		},
+		onShow() {
+			var UserInfo = uni.getStorageSync("globalUser");
+			this.adminId = UserInfo.id;
+			var serverurl = this.serverurl;
+			uni.request({
+				url: serverurl + "/TWeixin/weiXinSearch",
+				method: "POST",
+				data: {
+					adminId: this.adminId
+				},
+				success: (data) => {
+					var list = data.data.data;
+					this.list = list;
+				}
+			});
+		},
+
+		methods: {
+			delet(id,adminid) {
+				console.log("id==" + id);
+				var serverurl = this.serverurl;
+				uni.showModal({
+					title: '提示',
+					content: '是否取消绑定？',
+					success: function(res) {
+						if (res.confirm) {
+							uni.request({
+								url: serverurl + "/TWeixin/deleteWeixin",
+								method: "POST",
+								data: {
+									id: id
+								},
+								success: (data) => {
+									var list = data.data.data;
+									if (list == 1) {
+										uni.showModal({
+											title: '提示',
+											content: '解绑成功',
+											success: function(res) {
+												var UserInfo = uni.getStorageSync("globalUser");
+												if (UserInfo.id == adminid) {
+													uni.reLaunch({
+														url: '../Login/Login',
+													});
+												}else{
+													uni.reLaunch({
+														url: '../User/user',
+													});
+												}
+
+											}
+										});
+									}
+								}
+							});
+						} else if (res.cancel) {
+							setTimeout(function() {
+								uni.startPullDownRefresh();
+							}, 100);
+							setTimeout(function() {
+								uni.stopPullDownRefresh();
+							}, 3000);
+						}
+					}
+				});
+			}
+		}
+	}
+</script>
+
+<style>
+	.body {
+		background-color: #FFFFFF;
+		padding: 10upx 10upx 10upx 10upx;
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+	}
+
+	.input-two {
+		width: 600upx;
+		height: 100upx;
+		padding-left: 30upx;
+		padding-right: 20upx;
+	}
+
+	.p {
+		/* #ifdef H5 */
+		top: -13%;
+		/* #endif */
+		width: 120upx;
+		height: 60upx;
+		font-size: 30upx;
+		/* #ifndef H5 */
+		padding-top: 3upx;
+		/* #endif */
+
+		position: absolute;
+		/* 水平居中 */
+		left: 50%;
+		-webkit-transform: translateX(-50%);
+		transform: translateX(-50%);
+	}
+
+	.input {
+		/* padding: 10upx 20upx 10upx 0upx; */
+		padding-left: 20upx;
+		padding-top: 10upx;
+		background-color: #FFFFFF;
+		width: 500upx;
+		height: 50upx;
+		box-shadow: 0upx 0upx 20upx #D3D3D3;
+		border-radius: 5upx;
+	}
+
+	.button {
+		/* padding: 5upx 10upx 10upx 0upx; */
+		width: 120upx;
+		height: 60upx;
+		border-radius: 10upx;
+	}
+
+	.button2 {
+		padding-right: 120upx;
+		padding-top: 2upx;
+	}
+
+	.xiugai {
+		width: 92%;
+		padding-top: 20upx;
+		border-left: 20upx;
+		border-left: 10upx solid #FFFFFF;
+		padding-left: 10upx;
+		height: 38upx;
+		padding-bottom: 30upx;
+		font-family: "PingFang-SC-Bold";
+		font-weight: bold;
+		margin: auto;
+		font-size: 32upx;
+		color: #363D44;
+	}
+</style>

store/index.js

@@ -41,6 +41,7 @@ const store = new Vuex.Store({
 					//用户名缓存
 					uni.setStorageSync("name", res.data.name);
 					const userObj = res.data;
+					uni.setStorageSync("globalUser", res.data);
 					commit('setLoading', false);
 					commit('setLoginUser', userObj);
 					// commit('setToken', token);
@@ -48,6 +49,38 @@ const store = new Vuex.Store({
 					commit('setLoading', false);
 					return Promise.reject();
 				});
+		},
+		loginWXCZ({ commit },parm) {
+			commit('setLoading', true);
+			return apis.sz.post('/TWeixin/weiXinZhuce',parm)
+				.then(res => {
+					//用户名缓存
+					uni.setStorageSync("name", res.data.name);
+					const userObj = res.data;
+					commit('setLoading', false);
+					commit('setLoginUser', userObj);
+					
+					return res;
+				}, _ => {
+					commit('setLoading', false);
+					return Promise.reject();
+				});
+		},
+		loginWX({ commit },parm) {
+			commit('setLoading', true);
+			return apis.sz.post('/TWeixin/weiXinLogin',parm)
+				.then(res => {
+					//用户名缓存
+					uni.setStorageSync("name", res.data.name);
+					const userObj = res.data;
+					commit('setLoading', false);
+					commit('setLoginUser', userObj);
+					
+					return res;
+				}, _ => {
+					commit('setLoading', false);
+					return Promise.reject();
+				});
 		}
 	}
 });