|
|
@@ -1,37 +1,22 @@
|
|
|
<template>
|
|
|
- <view class="login-page">
|
|
|
- <view class="login-card">
|
|
|
- <view class="brand">
|
|
|
- <image
|
|
|
- class="logo"
|
|
|
- src="/static/images/map-logo.png"
|
|
|
- mode="aspectFit"
|
|
|
- />
|
|
|
- <text class="brand-name">充电桩</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="welcome mt-48">
|
|
|
- <text class="heading">授权登录</text>
|
|
|
- <text class="desc mt-12">使用微信手机号一键登录,即可开始充电</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="actions mt-56">
|
|
|
- <button
|
|
|
- class="login-btn"
|
|
|
- open-type="getPhoneNumber"
|
|
|
- hover-class="login-btn-press"
|
|
|
- :loading="submitting"
|
|
|
- :disabled="submitting"
|
|
|
- @getphonenumber="handleLogin"
|
|
|
- >
|
|
|
- {{ submitting ? '登录中...' : '微信手机号一键登录' }}
|
|
|
- </button>
|
|
|
- <text class="notice mt-20">授权仅用于账号注册,不会泄露隐私信息</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view v-if="errorMsg" class="error mt-28">
|
|
|
- <text>{{ errorMsg }}</text>
|
|
|
- </view>
|
|
|
+ <view class="root">
|
|
|
+ <view class="center">
|
|
|
+ <image class="logo" src="/static/images/map-logo.png" mode="aspectFit" />
|
|
|
+
|
|
|
+ <view class="spacer" />
|
|
|
+
|
|
|
+ <button
|
|
|
+ class="btn"
|
|
|
+ open-type="getPhoneNumber"
|
|
|
+ hover-class="btn-press"
|
|
|
+ :loading="submitting"
|
|
|
+ :disabled="submitting"
|
|
|
+ @getphonenumber="handleLogin"
|
|
|
+ >
|
|
|
+ 微信手机号一键登录
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <text v-if="errorMsg" class="err">{{ errorMsg }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -57,48 +42,33 @@ onLoad((query: Record<string, string | undefined>) => {
|
|
|
});
|
|
|
|
|
|
const handleLogin = (e: WechatMiniprogram.ButtonGetPhoneNumber) => {
|
|
|
- if (submitting.value) {
|
|
|
- return;
|
|
|
- }
|
|
|
+ if (submitting.value) return;
|
|
|
errorMsg.value = "";
|
|
|
submitting.value = true;
|
|
|
|
|
|
login(e)
|
|
|
.then(() => {
|
|
|
- uni.showToast({
|
|
|
- title: "登录成功",
|
|
|
- icon: "success",
|
|
|
- duration: 800,
|
|
|
- });
|
|
|
- setTimeout(() => {
|
|
|
- performRedirect(redirect.value);
|
|
|
- }, 800);
|
|
|
+ uni.showToast({ title: "登录成功", icon: "success", duration: 800 });
|
|
|
+ setTimeout(() => performRedirect(redirect.value), 800);
|
|
|
})
|
|
|
.catch(() => {
|
|
|
submitting.value = false;
|
|
|
- errorMsg.value = "登录失败,请检查网络后重试";
|
|
|
+ errorMsg.value = "登录失败,请重试";
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const performRedirect = (url: string) => {
|
|
|
- if (url && isTabBarPage(url)) {
|
|
|
- uni.switchTab({ url });
|
|
|
- return;
|
|
|
- }
|
|
|
+ if (url && isTabBarPage(url)) return uni.switchTab({ url });
|
|
|
if (url) {
|
|
|
uni.navigateBack({
|
|
|
- fail() {
|
|
|
- uni.switchTab({ url: "/pages/map/map" });
|
|
|
- },
|
|
|
+ fail() { uni.switchTab({ url: "/pages/map/map" }); },
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
const pages = getCurrentPages();
|
|
|
if (pages.length > 1) {
|
|
|
uni.navigateBack({
|
|
|
- fail() {
|
|
|
- uni.switchTab({ url: "/pages/map/map" });
|
|
|
- },
|
|
|
+ fail() { uni.switchTab({ url: "/pages/map/map" }); },
|
|
|
});
|
|
|
} else {
|
|
|
uni.switchTab({ url: "/pages/map/map" });
|
|
|
@@ -107,100 +77,54 @@ const performRedirect = (url: string) => {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.login-page {
|
|
|
+.root {
|
|
|
min-height: 100vh;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
background: var(--color-sec);
|
|
|
- padding: 48rpx;
|
|
|
+ padding: 64rpx 56rpx;
|
|
|
}
|
|
|
|
|
|
-.login-card {
|
|
|
+.center {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
-.brand {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
.logo {
|
|
|
- width: 140rpx;
|
|
|
- height: 140rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.brand-name {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: var(--color-primary);
|
|
|
- margin-top: 16rpx;
|
|
|
- letter-spacing: 8rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.welcome {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.heading {
|
|
|
- font-size: 40rpx;
|
|
|
- font-weight: 700;
|
|
|
- color: rgba(0, 0, 0, 0.85);
|
|
|
- line-height: 1.3;
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
}
|
|
|
|
|
|
-.desc {
|
|
|
- font-size: 26rpx;
|
|
|
- color: rgba(0, 0, 0, 0.45);
|
|
|
- line-height: 1.5;
|
|
|
+.spacer {
|
|
|
+ height: 80rpx;
|
|
|
}
|
|
|
|
|
|
-.actions {
|
|
|
+.btn {
|
|
|
width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.login-btn {
|
|
|
- width: 100%;
|
|
|
- height: 96rpx;
|
|
|
+ height: 100rpx;
|
|
|
background: var(--color-primary);
|
|
|
color: #fff;
|
|
|
- font-size: 30rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
font-weight: 600;
|
|
|
- border-radius: 48rpx;
|
|
|
- line-height: 96rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ line-height: 100rpx;
|
|
|
border: none;
|
|
|
- transition: opacity 0.2s;
|
|
|
+ letter-spacing: 2rpx;
|
|
|
}
|
|
|
|
|
|
-.login-btn::after {
|
|
|
+.btn::after {
|
|
|
border: none;
|
|
|
}
|
|
|
|
|
|
-.login-btn-press {
|
|
|
- opacity: 0.85;
|
|
|
-}
|
|
|
-
|
|
|
-.notice {
|
|
|
- font-size: 22rpx;
|
|
|
- color: rgba(0, 0, 0, 0.25);
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-.error {
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
+.btn-press {
|
|
|
+ opacity: 0.82;
|
|
|
}
|
|
|
|
|
|
-.error text {
|
|
|
+.err {
|
|
|
+ margin-top: 28rpx;
|
|
|
font-size: 24rpx;
|
|
|
color: var(--color-warning);
|
|
|
}
|