zoujing/longli-mp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 登录页增加返回按钮

Browse Source
This commit is contained in:
zoujing
2026-09-18 15:47:16 +08:00
parent dd0341d76f
commit 450325c986
1 changed files with 19 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/pages/login/index.vue
View File

@@ -7,7 +7,7 @@
import { computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useUserStore } from "@/store";
import { goAfterLogin, goAgreement } from "@/utils/nav";
import { goAfterLogin, goAgreement, goBack } from "@/utils/nav";
const userStore = useUserStore();
@@ -75,10 +75,18 @@ const toggleAgree = () => {
<view class="min-h-screen px-[30px] flex flex-col text-center">
<AppStatusBar />
<!-- 返回按钮：登录非强制，浮在左上角、不占布局 -->
<view class="relative h-0 z-20">
<view
class="absolute top-[8px] w-9 h-9 rounded-full flex items-center justify-center bg-white border-[0.5px] border-[#E6F8F1] shadow-[0_8px_20px_rgba(8,30,22,0.12)]"
hover-class="opacity-80" @click="goBack">
<AppIcon name="back" tone="ink" :size="20" />
</view>
</view>
<!-- 品牌 -->
<view
class="w-24 h-24 mx-auto mt-[58px] rounded-[24px] bg-white border-[0.5px] border-[#E6F8F1] overflow-hidden shadow-[0_16px_36px_rgba(0,181,120,0.24),0_4px_10px_rgba(8,30,22,0.08)]"
>
class="w-24 h-24 mx-auto mt-[58px] rounded-[24px] bg-white border-[0.5px] border-[#E6F8F1] overflow-hidden shadow-[0_16px_36px_rgba(0,181,120,0.24),0_4px_10px_rgba(8,30,22,0.08)]">
<image class="block w-full h-full" src="/static/logo.png" mode="aspectFill" />
</view>
<view class="mt-5 text-ink text-[26px] font-bold tracking-[4px] indent-[4px]">龙里文旅</view>
@@ -89,8 +97,7 @@ const toggleAgree = () => {
<view v-for="(item, i) in VALUES" :key="item.title" class="flex-1 relative flex flex-col items-center">
<view v-if="i" class="absolute left-0 top-[18%] bottom-[18%] w-[0.5px] grad-divider" />
<view
class="w-[38px] h-[38px] rounded-full flex items-center justify-center bg-white border-[0.5px] border-[rgba(0,181,120,0.16)] shadow-[0_8px_18px_rgba(8,30,22,0.09)]"
>
class="w-[38px] h-[38px] rounded-full flex items-center justify-center bg-white border-[0.5px] border-[rgba(0,181,120,0.16)] shadow-[0_8px_18px_rgba(8,30,22,0.09)]">
<AppIcon :name="item.icon" tone="brandDeep" :size="17" />
</view>
<text class="mt-[9px] text-[12px] font-semibold text-ink">{{ item.title }}</text>
@@ -102,24 +109,18 @@ const toggleAgree = () => {
<view class="mt-auto pb-[132px]">
<view
class="h-[50px] rounded-full flex items-center justify-center gap-2 text-[16px] font-semibold border-[0.5px]"
:class="
agreed
:class="agreed
? 'grad-brand text-white border-[rgba(255,255,255,0.5)] shadow-[0_14px_30px_rgba(0,181,120,0.36)]'
: 'bg-[#E4EAEE] text-[#87909A] border-[rgba(20,24,28,0.05)]'
"
hover-class="opacity-90"
@click="onLoginTap"
>
" hover-class="opacity-90" @click="onLoginTap">
<AppIcon name="wx" :tone="wxTone" :size="21" />
<text>微信一键登录</text>
</view>
<view class="mt-4 flex gap-2 items-start text-[11px] leading-[1.7] text-ink2 text-left">
<view
class="w-4 h-4 rounded-full shrink-0 mt-px flex items-center justify-center border-[1.2px]"
<view class="w-4 h-4 rounded-full shrink-0 mt-px flex items-center justify-center border-[1.2px]"
:class="agreed ? 'grad-brand border-transparent shadow-[0_4px_12px_rgba(0,181,120,0.34)]' : 'bg-white border-[rgba(20,24,28,0.18)]'"
@click="toggleAgree"
>
@click="toggleAgree">
<AppIcon v-if="agreed" name="check" tone="white" :size="11" />
</view>
@@ -139,25 +140,15 @@ const toggleAgree = () => {
</view>
<!-- 协议确认弹窗（居中，与使用弹窗同一套语言） -->
<AppDialog
variant="agree"
:visible="agreeVisible"
title="服务协议与隐私政策"
icon="shield"
cancel-text="不同意"
confirm-text="同意并登录"
:mask-closable="false"
@close="agreeVisible = false"
@confirm="onAgreeConfirm"
>
<AppDialog variant="agree" :visible="agreeVisible" title="服务协议与隐私政策" icon="shield" cancel-text="不同意"
confirm-text="同意并登录" :mask-closable="false" @close="agreeVisible = false" @confirm="onAgreeConfirm">
<view class="mt-4 text-cap leading-[1.75] text-ink2">
<view class="mb-[13px] text-ink font-medium leading-[1.7]">
为向你提供龙里文旅导览与权益服务，我们需要收集你的微信头像、昵称与手机号。
</view>
<view v-for="(point, i) in AGREEMENT_POINTS" :key="i" class="flex items-start gap-[9px] mt-[9px]">
<view
class="shrink-0 w-[18px] h-[18px] mt-px rounded-full flex items-center justify-center bg-[rgba(0,181,120,0.1)]"
>
class="shrink-0 w-[18px] h-[18px] mt-px rounded-full flex items-center justify-center bg-[rgba(0,181,120,0.1)]">
<AppIcon name="check" tone="brand" :size="11" />
</view>
<text class="flex-1 text-cap leading-[1.6] text-ink2">{{ point }}</text>