第一次提交

2023-08-04 13:04:21 +08:00
commit 7a73b38bd5
764 changed files with 166417 additions and 0 deletions
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -0,0 +1,207 @@
+<template>
+	<view class="ws-page">
+		<view class="logo">
+			<image src="../../static/logo.png" mode="widthFix"></image>
+		</view>
+		<!-- 支付宝授权手机号一键登录 -->
+		<view class="alipay-auth">
+			<button @click="login" :disabled="loding">支付宝授权一键登录</button>
+		</view>
+		<!-- 手机号登录 -->
+		<view class="mobile-auth">
+			<button @click="loginByUserName">账号登录</button>
+		</view>
+		<!-- <view class="xieyi">
+			<checkbox-group @change="onAgree" style="display: flex; align-items: center;">
+				<checkbox :checked="agree" class="agree" />登录即代表您已同意<div class="xieyi-text" @click="showXieyi">《服务协议与隐私协议》</div>
+			</checkbox-group>
+		</view> -->
+	</view>
+</template>
+
+<script>
+	import store from '@/store'
+	import { getAuthCode, getPhoneNumber, login, alipayLogin, register } from '@/websoft/api/login.js'
+	import { ACCESS_TOKEN, USER_ID } from '@/store/mutation-types'
+	import storage from '@/utils/storage'
+	import http from '@/websoft/api'
+	import { roleId } from '@/config.js'
+	import {
+		isEmpty,
+		inArray
+	} from '@/utils/util'
+
+	export default {
+		data() {
+			return {
+				agree: true,
+				userId: '',
+				loding: false
+			}
+		},
+
+		methods: {
+
+			// 按钮点击事件: 获取支付宝手机号按钮
+			login() {
+				const app = this
+				my.getAuthCode({
+					scopes: 'auth_user',
+					success: ({ authCode }) => {
+						console.log("获取支付宝授权码: ",authCode);
+						app.loding = true
+						// 跟进授权码获取支付宝用户ID
+						getAuthCode({authCode})
+							.then(res => {
+								store.dispatch('setUserInfo',res.data.user)
+								store.dispatch('setUserId',res.data.user.userId)
+								store.dispatch('setToken',res.data.access_token)
+								const expiryTime = 30 * 86400 // 过期时间30天
+								storage.set(ACCESS_TOKEN, res.data.access_token, expiryTime)
+								storage.set(USER_ID, res.data.user.userId, expiryTime)
+								// 显示登录成功
+								http.setConfig((config) => {
+								    config.header = {
+										Authorization: res.data.access_token
+								    }
+								    return config
+								})
+								app.$toast(res.message)
+								// 跳转回原页面
+								setTimeout(() => {
+									app.$navTo('pages/user/user')
+								}, 2000)
+							})
+							.catch(e => {
+								app.$error(e.message)
+							})
+					}
+				});
+			},
+
+			onAgree() {
+				this.agree = !this.agree
+			},
+			
+			loginByUserName(){
+				this.$navTo('pages/login/index')
+			},
+			
+			// // #ifdef MP-ALIPAY
+			// my.getPhoneNumber({
+			//   success: (res) => {
+			//     let encryptedData = res.response;
+			//     getPhoneNumber({encryptedData}).then(response => {
+			// 		console.log("授权手机号码: ",response);
+			// 		const json = JSON.parse(response.data)
+			// 		console.log("json: ",json);
+			// 		if(json.mobile){
+			// 			// 执行登录
+			// 			app.onAuthSuccess(json.mobile)
+			// 		}
+			// 	})
+			//   },
+			//   fail: (res) => {
+			//     console.log(res);
+			//   },
+			// });
+			// // #endif
+
+			/**
+			 * 登录成功-跳转回原页面
+			 */
+			onNavigateBack(delta = 1) {
+				const pages = getCurrentPages()
+				if (pages.length > 1) {
+					uni.navigateBack({
+						delta: Number(delta || 1)
+					})
+				} else {
+					this.$navTo('pages/user/user')
+				}
+			},
+			showXieyi(){
+				this.$navTo('pages/help/xieyi')
+			}
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.ws-page {
+		padding: 40rpx;
+		height: 70vh;
+		display: flex;
+		flex-direction: column;
+
+		.logo {
+			margin: 100rpx auto;
+			text-align: center;
+
+			image {
+				width: 140rpx;
+				height: 140rpx;
+				border-radius: 20rpx;
+			}
+		}
+
+		.alipay-auth {
+			margin: 12rpx 0;
+
+			button {
+				background-color: #3869ea;
+				color: #ffffff;
+				border-radius: 12rpx;
+			}
+		}
+
+		.mobile-auth {
+			margin: 12rpx 0;
+
+			button {
+				border-radius: 12rpx;
+			}
+		}
+
+		.xieyi {
+			margin-top: 100rpx;
+			font-size: 28rpx;
+			text-align: center;
+
+			text {
+				color: #3869ea;
+			}
+
+			.agree {
+				border-radius: 100%;
+			}
+		}
+	}
+
+	// 微信授权登录
+	.wechat-auth {
+		width: 320rpx;
+		margin: 50rpx auto 0 auto;
+
+		.wechat-auth-container {
+			display: flex;
+			justify-content: center;
+		}
+
+		.icon {
+			width: 38rpx;
+			height: 38rpx;
+			margin-right: 15rpx;
+		}
+
+		.title {
+			font-size: 28rpx;
+			color: #666666;
+		}
+	}
+	
+	.xieyi-text{
+		color: #0000ff;
+	}
+</style>