spark-coach/pages/login/index.vue

<template>
	<view class="content">
		<u-image :src="logo" mode="aspectFit" width="208rpx" height="272rpx" class="logo"></u-image>
		<u-card :show-head="false" :show-foot="false" padding="40" margin="40rpx 40rpx" borderRadius="40" box-shadow="0 0 8px rgba(0, 0, 0, 0.2)"
		 class="card-box">
			<view slot="body">
				<u-cell-group :border="false">
					<u-cell-item icon="account" icon-size="46" :icon-style="iconStyle" :arrow="false">
						<u-input v-model="account" />
					</u-cell-item>
					<u-cell-item icon="lock" icon-size="46" :icon-style="iconStyle" :arrow="false">
						<u-input v-model="password" type="password" :password-icon="true" />
					</u-cell-item>
				</u-cell-group>
				<u-button type="warning" :ripple="true" :custom-style="{...customStyle, margin: '10px 0'}" @click="login()">登录</u-button>
				<u-button type="warning" :ripple="true" :custom-style="{...customStyle, margin: '10px 0'}" @click="login1()">app微信授权登录</u-button>
				<u-button type="warning" :ripple="true" :custom-style="{...customStyle, backgroundColor: '#07c160'}" open-type="getPhoneNumber"
				 @getphonenumber="getUserinfoWechat" withCredentials="true">微信一键登录</u-button>
			</view>
		</u-card>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		computed: {
			...mapGetters([
				'customStyle',
			])
		},
		data() {
			return {
				logo: API.getServerImg + 'logo.png',
				account: '',
				password: '',
				iconStyle: {
					color: '#999999',
					marginRight: '10px'
				}
			}
		},
		onLoad() {},
		methods: {
			login() {
				if (!this.account || !this.password) {
					this.$refs.uTips.show({
						title: '请输入账号密码',
						type: 'warning',
					})
					return
				}
				NET.request(API.loginByPassword, {
					phone: this.account,
					pwd: this.password,
				}, 'POST').then(res => {
					uni.setStorage({
						key: 'token',
						data: res.data.token
					})
					uni.setStorage({
						key: 'userData',
						data: {
							headImage: res.data.url,
							userId: res.data.id,
							nickName: res.data.nickName,
							userName: res.data.username,
							phone: res.data.phone,
						}
					})
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}).catch(error => {
					this.$refs.uTips.show({
						title: '登录失败',
						type: 'warning',
					})
				})
			},
			loginApp() {
				let that = this
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						uni.getUserInfo({
							provider: 'weixin',
							success: (infoRes) => {}
						});
					}
				});
			},
			getUserinfoWechat(data) {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						let wxLoginData = {
							code: res.code,
							encryptedData: data.target.encryptedData,
							iv: data.target.iv,
						}
						uni.setStorage({
							key: 'wxLoginData',
							data: wxLoginData
						})
						this.getUserInfo(wxLoginData)
					},
					fail: () => {
						this.$refs.uTips.show({
							title: '微信登录授权失败',
							type: 'warning',
						})
					}
				})
			},
			// 发请求获取个人数据
			getUserInfo(wxLoginData) {
				NET.request(API.wxLogin, wxLoginData, 'POST').then(res => {
					uni.setStorage({
						key: 'token',
						data: res.data.token
					})
					uni.setStorage({
						key: 'userData',
						data: {
							headImage: res.data.url,
							userId: res.data.id,
							nickName: res.data.nickName,
							userName: res.data.username,
							phone: res.data.phone,
						}
					})
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		padding: 480rpx 0 60px 0;
		float: left;

		.logo {
			top: 140rpx;
			left: 50%;
			transform: translateX(-50%);
			position: absolute;
		}

		.card-box {
			/deep/.u-cell {
				border: 1px solid #eeeeee;
				border-radius: 8px;
				padding: 8px 10px;
				margin-bottom: 16px;
			}
		}
	}
</style>