storage-wechat/pages/user/login.vue

<template>
	<view class="login" style="background: url(../../static/login-bg.png);background-size: 100% 100%;">
		<view style="height:120rpx;width: 100%;">

		</view>
		<view class="login-form">
			<image src="../../static/logo.png" mode=""></image>
			<view class="">
				<uni-forms :modelValue="loginForm">
					<uni-forms-item required label="账号" name="name">
						<uni-easyinput type="text" v-model="loginForm.username" placeholder="请输入账号" />
					</uni-forms-item>
					<uni-forms-item required name="hobby" label="密码">
						<uni-easyinput type="password" v-model="loginForm.password" placeholder="请输入密码" />
					</uni-forms-item>
				</uni-forms>
				<button type="default" @click="lodingFn">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		TOKEN_NAME,
		OPENID
	} from '../../util/cacheConstant.js'
	import {
		usernameLogin,
		isBind
	} from "@/util/api.js";
	
	export default {
		data() {
			return {
				image: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
				loginForm: {
					//租户ID
					tenantId: '849380',
					//部门ID
					deptId: '',
					//角色ID
					roleId: '',
					//用户名
					username: '',
					//密码
					password: '',
					//账号类型
					type: 'account',
					//验证码的值
					code: '',
					//验证码的索引
					key: '',
					grant_type: 'captcha',
					scope: 'all',
					type:'storageApplet',
					jsCode:""
					//预加载白色背景

				},
			}
		},
		onLoad() {
			
			setTimeout(() => {
				this.init()
			}, 500)
		},
		methods: {
			init() {
				const v = this
				//v.getCodeImg()
				Vue.prototype.$token = null
				wx.login({
					success: res => {
						v.loginForm.jsCode = res.code
						function filter(str) { // 特殊字符转义
							str += ''; // 隐式转换
							str = str.replace(/%/g, '%25');
							str = str.replace(/\+/g, '%2B');
							str = str.replace(/ /g, '%20');
							str = str.replace(/\//g, '%2F');
							str = str.replace(/\?/g, '%3F');
							str = str.replace(/&/g, '%26');
							str = str.replace(/\=/g, '%3D');
							str = str.replace(/#/g, '%23');
							return str;
						}
						
						function formateObjToParamStr(paramObj) {
							const sdata = [];
							for (let attr in paramObj) {
								sdata.push(`${attr}=${filter(paramObj[attr])}`);
							}
							return sdata.join('&');
						}
						const loginForm = {...v.loginForm}
						
						loginForm.password = this.$w_md5.hex_md5_32(loginForm.password)
						uni.request({
							url: 'https://cfm.bytesail.cn/api' + '/blade-auth/oauth/token?' + formateObjToParamStr(loginForm),
							method: 'POST',
							header: {
								'Tenant-Id': v.loginForm.tenantId,
								'Authorization':'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
								'Content-Type':'application/json;charset=UTF-8',
							},
							success: (res) => {
								
								if(res.statusCode == 200){
									wx.setStorageSync(TOKEN_NAME,  res.data)
									Vue.prototype.$token = res.data
									wx.reLaunch({
										url: '/pages/home'
									})
								}else{
									uni.showToast({
										icon: "error",
										title: res.data.error_description,
										duration: 2000
									});
								}
								
							},
							fail: (err) => {
								
							}
						});
					},

					fail: (response) => {
						wx.showToast({
							title: response,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getCodeImg() {
				const v = this
				v.$get('/blade-auth/oauth/captcha', {}).then(data => {
					v.loginForm.key = data.key
					v.image = data.image
				})
			},
			lodingFn() {
				const v = this
				const loginForm = {...v.loginForm}
				loginForm.password = this.$w_md5.hex_md5_32(loginForm.password)
				function filter(str) { // 特殊字符转义
					str += ''; // 隐式转换
					str = str.replace(/%/g, '%25');
					str = str.replace(/\+/g, '%2B');
					str = str.replace(/ /g, '%20');
					str = str.replace(/\//g, '%2F');
					str = str.replace(/\?/g, '%3F');
					str = str.replace(/&/g, '%26');
					str = str.replace(/\=/g, '%3D');
					str = str.replace(/#/g, '%23');
					return str;
				}
				function formateObjToParamStr(paramObj) {
					const sdata = [];
					for (let attr in paramObj) {
						sdata.push(`${attr}=${filter(paramObj[attr])}`);
					}
					return sdata.join('&');
				}
				wx.login({
					success: res => {
						v.loginForm.jsCode = res.code
						const loginForm = {...v.loginForm}
						loginForm.password = this.$w_md5.hex_md5_32(loginForm.password)
						uni.request({
							url: 'https://cfm.bytesail.cn/api' + '/blade-auth/oauth/token?' + formateObjToParamStr(loginForm),
							method: 'POST',
							header: {
								'Captcha-Key': v.loginForm.key,
								'Captcha-Code': v.loginForm.code,
								'Tenant-Id': v.loginForm.tenantId,
								'Authorization':'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
								'Content-Type':'application/json;charset=UTF-8',
							},
							success: (res) => {
								console.log(res)
								
								if(res.statusCode == 200){
									wx.setStorageSync(TOKEN_NAME,  res.data)
									Vue.prototype.$token = res.data
									wx.reLaunch({
										url: '/pages/home'
									})
								}else{
									uni.showToast({
										icon: "none",
										title: res.data.error_description,
										duration: 2000
									});
								}
								
							},
							fail: (err) => {
								uni.showToast({
									title: '失败' + err,
									duration: 12000
								});
							}
						});
					}
				})
				
			},
		},
	}
</script>

<style lang="less">
	.login {
		height: 100vh;
		width: 100vw;
		background-size: 100% 100%;

		image {
			width: 550rpx;
			height: 125rpx;
			margin: 0 auto 100rpx;
			display: block;
		}

		.login-form {
			margin: 0 auto;
			width: 80%;
			background: #fff;
			border-radius: 10rpx;
			padding: 150rpx 50rpx;
		}
	}
</style>