jingrunTechnology-ui/pages/login/index.vue

<template>
	<view class="content">
		<view class="logo">
			<image src="../../static/logo.png" mode=""></image>
		</view>
		<h3>版本：V{{vuex_version}}</h3>
		<u-button v-if="approval === false" class="butto_N" open-type="getUserInfo" lang="zh_CN"
			@getuserinfo="appLoginWx" type="primary" size="default">微信授权登录</u-button>
		<!-- <u-button v-if="approval === true" class="butto_N" open-type="getUserInfo" lang="zh_CN" @getuserinfo="appLoginWx" type="primary" size="default">授权手机号</u-button> -->

		<u-button v-if="approval === true" class="butto_N" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"
			lang="zh_CN" type="primary" size="default">授权手机号</u-button>

		<view style="position:absolute; bottom:20rpx;font-size: 20rpx;">说明：本小程序仅限青岛靖润科技物流有限公司内部员工使用</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		request
	} from '@/common/request/request'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				approval: false,
				time: '',
				code: ''
			}
		},
		onLoad() {

		},
		created() {
			// uni.redirectTo({
			// 	url: '../home/myorder/index'
			// });
			// #ifdef MP-WEIXIN
			if (wx.hideHomeButton) {
				wx.hideHomeButton();
			}
			// #endif
			this.testing()
		},
		computed: {
			...mapState(['hasLogin'])
		},
		methods: {
			...mapMutations(['login']),
			onGetPhoneNumber(e) {
				console.log(e)
				let this_ = this
				if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
					//拒绝授权
					this.$refs.uToast.show({
						title: '授权失败',
					})
				} else {
					console.log(this_.code)
					//允许授权
					wx.getUserInfo({
					  success: function(s) {
						  console.log(s)
						  request({
						  	url: '/wechat/programLogin',
						  	method: 'post',
						  	data: {
						  		code: this_.code,
						  		iv: e.detail.iv,
						  		encryptedIv: s.iv,
						  		phonenumber: e.detail.encryptedData,
						  		encryptedData:s.encryptedData
						  	}
						  }).then(res => {
						  	console.log(res)
						  	if (res.data.code == 200) {
						  		this_.$refs.uToast.show({
						  			title: '登录成功',
						  		})
						  		uni.setStorage({
						  			key: 'vuex_token',
						  			data: res.data.data.token,
						  			success(res) {
						  				console.log("成功")
						  			}
						  		})
						  		let time = new Date(new Date().setDate(new Date().getDate() + 6))
						  		// console.log(time.getTime())
						  		uni.setStorage({
						  			key: 'effective_time',
						  			data: time.getTime(),
						  			success(res) {
						  				console.log("成功")
						  			}
						  		})
						  		uni.setStorage({
						  			key: 'cell_phone',
						  			data: res.data.data.phonenumber,
						  			success(res) {
						  				// console.log(res)
						  				console.log("成功")
						  			}
						  		})
						  		uni.redirectTo({
						  			url: '../home/index'
						  		});
						  	} else if (res.data.code === 500) {
						  		this_.$refs.uToast.show({
						  			title: res.data.msg,
						  		})
						  	}
						  }).catch(err => {
						  	console.log(err)
						  	this_.$refs.uToast.show({
						  		title: err,
						  	})
						  })
					  }
					})
				}
			},
			appLoginWx() {
				let this_ = this
				// #ifdef MP-WEIXIN
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: (res2) => {
									uni.getUserInfo({
										provider: 'weixin',
										success: (info) => { //这里请求接口
											this_.code = res2.code
											this_.approval = true
											console.log(res)
										},
										fail: () => {
											uni.showToast({
												title: "微信登录授权失败",
												icon: "none"
											});
										}
									})
								},
								fail: () => {
									uni.showToast({
										title: "微信登录授权失败",
										icon: "none"
									});
								}
							})
						} else {
							uni.showToast({
								title: '请先安装微信或升级版本',
								icon: "none"
							});
						}
					}
				});
				//#endif
			},
			testing() {
				let this_ = this
				// #ifdef MP-WEIXIN
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.userInfo']) {
							//这里调用授权
							this_.approval = false
						} else {
							//用户已经授权过了
							console.log("当前已授权");
							this_.appLoginWx()
							let time = new Date().getTime()
							this_.approval = true
							console.log(uni.getStorageSync('vuex_token'))
							console.log(uni.getStorageSync('cell_phone'))
							console.log(uni.getStorageSync('effective_time'))
							// request({
							// 	url: '/wechat/programLogin',
							// 	method: 'post',
							// 	data: {
							// 		phonenumber: uni.getStorageSync('cell_phone'),
							// 		token: uni.getStorageSync('vuex_token')
							// 	}
							// }).then(res => {
							// 	console.log(res)
							// 	uni.setStorage({
							// 		key: 'vuex_token',
							// 		data: res.data.data.token,
							// 		success(es) {
							// 			console.log(res)
							// 			console.log("成功")
							// 		}
							// 	})
							// 	let time = new Date(new Date().setDate(Date().getDate() + 6))
							// 	console.log(time.getTime())
							// 	uni.setStorage({
							// 		key: 'effective_time',
							// 		data: time.getTime(),
							// 		success(res) {
							// 			console.log(res)
							// 		}
							// 	})
							// 	uni.redirectTo({
							// 		url: '../home/index'
							// 	});
							// }).catch(err => {
							// 	console.log(err)
							// })
						}
					}
				})
				//#endif
			},
		}
	}
</script>

<style scoped lang="scss">
	.butto_N {
		width: 80%;
		margin-top: 100px;
	}

	.text {
		margin-top: 20px;

		view {
			margin-bottom: 20rpx;
		}
	}

	.logo {
		width: 200rpx;
		height: 200rpx;
		border-radius: 40rpx;
		background-color: #3481f6;
		margin-top: 100px;
		margin-bottom: 20px;

		image {
			width: 200rpx;
			height: 200rpx;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>