feat: improve login and express company management

This commit is contained in:
wushumin
2026-05-27 11:29:22 +08:00
parent 231c26bd32
commit 4cadf1298b
4 changed files with 551 additions and 269 deletions

3
.gitignore vendored
View File

@@ -23,3 +23,6 @@ releases/
# logs # logs
*.log *.log
# local Codex artifacts
.codex-artifacts/

View File

@@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted, reactive, ref } from "vue"; import { computed, onMounted, reactive, ref } from "vue";
import { Refresh } from "@element-plus/icons-vue"; import { Plus, Refresh, Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { import {
adminApi, adminApi,
@@ -15,6 +15,10 @@ type CatalogSuggestion = AdminExpressCompanyCatalogItem & { value: string };
const loading = ref(false); const loading = ref(false);
const submitting = ref(false); const submitting = ref(false);
const dialogVisible = ref(false); const dialogVisible = ref(false);
const catalogAddVisible = ref(false);
const catalogAddSubmitting = ref(false);
const catalogAddKeyword = ref("");
const selectedCatalogItem = ref<CatalogSuggestion | null>(null);
const companies = ref<AdminExpressCompanyItem[]>([]); const companies = ref<AdminExpressCompanyItem[]>([]);
const defaultCompany = ref(""); const defaultCompany = ref("");
const catalogTotal = ref(0); const catalogTotal = ref(0);
@@ -24,6 +28,15 @@ const catalogLoading = ref(false);
const enabledCount = computed(() => companies.value.filter((item) => item.status === "enabled").length); const enabledCount = computed(() => companies.value.filter((item) => item.status === "enabled").length);
const displaySyncedAt = computed(() => (catalogSyncedAt.value && catalogSyncedAt.value !== "0" ? catalogSyncedAt.value : "-")); const displaySyncedAt = computed(() => (catalogSyncedAt.value && catalogSyncedAt.value !== "0" ? catalogSyncedAt.value : "-"));
const duplicateCatalogCompany = computed(() => {
const companyName = catalogAddForm.company_name.trim();
const companyCode = catalogAddForm.company_code.trim();
if (!companyName && !companyCode) {
return null;
}
return companies.value.find((item) => item.company_name === companyName || item.company_code === companyCode) || null;
});
const form = reactive<AdminExpressCompanyPayload>({ const form = reactive<AdminExpressCompanyPayload>({
company_name: "", company_name: "",
@@ -34,6 +47,15 @@ const form = reactive<AdminExpressCompanyPayload>({
remark: "", remark: "",
}); });
const catalogAddForm = reactive<AdminExpressCompanyPayload>({
company_name: "",
company_code: "",
status: "enabled",
is_default: false,
sort_order: 0,
remark: "",
});
async function fetchCompanies() { async function fetchCompanies() {
loading.value = true; loading.value = true;
try { try {
@@ -95,6 +117,23 @@ function openDialog(row?: AdminExpressCompanyItem) {
dialogVisible.value = true; dialogVisible.value = true;
} }
async function openCatalogAddDialog() {
catalogAddKeyword.value = "";
selectedCatalogItem.value = null;
catalogAddForm.id = undefined;
catalogAddForm.company_name = "";
catalogAddForm.company_code = "";
catalogAddForm.status = "enabled";
catalogAddForm.is_default = companies.value.length === 0;
catalogAddForm.sort_order = companies.value.length + 1;
catalogAddForm.remark = "从快递100官方码表新增";
catalogAddVisible.value = true;
if (catalogTotal.value <= 0) {
await fetchCatalogSummary();
}
}
async function resolveCatalogCode() { async function resolveCatalogCode() {
const keyword = form.company_code.trim() || form.company_name.trim(); const keyword = form.company_code.trim() || form.company_name.trim();
if (!keyword) { if (!keyword) {
@@ -176,6 +215,49 @@ function handleCatalogSelect(item: CatalogSuggestion) {
} }
} }
function handleCatalogAddSelect(item: CatalogSuggestion) {
selectedCatalogItem.value = item;
catalogAddKeyword.value = item.display_text;
catalogAddForm.company_name = item.company_name;
catalogAddForm.company_code = item.company_code;
}
function clearCatalogAddSelection() {
selectedCatalogItem.value = null;
catalogAddForm.company_name = "";
catalogAddForm.company_code = "";
}
async function submitCatalogAdd() {
if (!catalogAddForm.company_name.trim() || !catalogAddForm.company_code.trim()) {
ElMessage.warning("请先从官方码表选择快递公司");
return;
}
if (duplicateCatalogCompany.value) {
ElMessage.warning(`${duplicateCatalogCompany.value.company_name} 已在运营快递公司列表中`);
return;
}
catalogAddSubmitting.value = true;
try {
await adminApi.saveExpressCompany({
...catalogAddForm,
company_name: catalogAddForm.company_name.trim(),
company_code: catalogAddForm.company_code.trim(),
remark: catalogAddForm.remark.trim(),
});
ElMessage.success("快递公司已加入运营列表");
catalogAddVisible.value = false;
await fetchCompanies();
} catch (error: any) {
console.error(error);
ElMessage.error(error?.message || "快递公司保存失败");
} finally {
catalogAddSubmitting.value = false;
}
}
function statusTagText(row: AdminExpressCompanyItem) { function statusTagText(row: AdminExpressCompanyItem) {
return row.is_default ? `${row.status_text} / 默认` : row.status_text; return row.is_default ? `${row.status_text} / 默认` : row.status_text;
} }
@@ -189,9 +271,9 @@ onMounted(async () => {
<div v-loading="loading"> <div v-loading="loading">
<div class="metric-grid" style="margin-bottom: 18px"> <div class="metric-grid" style="margin-bottom: 18px">
<div class="metric-card"> <div class="metric-card">
<div class="metric-card__label">快递公司总数</div> <div class="metric-card__label">运营快递公司</div>
<div class="metric-card__value">{{ companies.length }}</div> <div class="metric-card__value">{{ companies.length }}</div>
<div class="metric-card__desc">当前已维护的可选快递公司</div> <div class="metric-card__desc">仓管寄回可选公司</div>
</div> </div>
<div class="metric-card"> <div class="metric-card">
<div class="metric-card__label">启用中</div> <div class="metric-card__label">启用中</div>
@@ -220,9 +302,14 @@ onMounted(async () => {
<div style="color: var(--admin-text-subtle);"> <div style="color: var(--admin-text-subtle);">
维护仓管寄回时可选的快递公司公司码优先从快递100官方码表检索停用后不会出现在寄回下拉列表中 维护仓管寄回时可选的快递公司公司码优先从快递100官方码表检索停用后不会出现在寄回下拉列表中
</div> </div>
<el-button :icon="Refresh" :loading="catalogSyncing" type="primary" @click="syncCatalog"> <div class="filters-row">
同步快递100公司码表 <el-button :icon="Plus" type="primary" @click="openCatalogAddDialog">
</el-button> 从官方码表新增
</el-button>
<el-button :icon="Refresh" :loading="catalogSyncing" @click="syncCatalog">
同步快递100公司码表
</el-button>
</div>
</div> </div>
</el-card> </el-card>
@@ -301,6 +388,95 @@ onMounted(async () => {
<el-button type="primary" :loading="submitting" @click="submit">保存</el-button> <el-button type="primary" :loading="submitting" @click="submit">保存</el-button>
</template> </template>
</el-dialog> </el-dialog>
<el-dialog v-model="catalogAddVisible" title="从官方码表新增快递公司" width="620px">
<div class="catalog-add">
<el-alert
v-if="catalogTotal <= 0"
title="官方码表为空请先同步快递100公司码表后再新增。"
type="warning"
show-icon
:closable="false"
/>
<el-form label-position="top">
<el-form-item label="搜索官方码表">
<el-autocomplete
v-model="catalogAddKeyword"
:fetch-suggestions="queryCatalog"
:loading="catalogLoading"
clearable
placeholder="输入快递公司名称或快递100编码"
style="width: 100%"
@clear="clearCatalogAddSelection"
@select="handleCatalogAddSelect"
>
<template #prefix>
<el-icon><Search /></el-icon>
</template>
<template #default="{ item }">
<div class="catalog-option">
<div class="catalog-option__name">{{ item.company_name }}</div>
<div class="catalog-option__meta">
{{ item.company_code }}{{ item.company_type ? ` / ${item.company_type}` : "" }}
</div>
</div>
</template>
</el-autocomplete>
<div class="form-help">
官方码表共有 {{ catalogTotal }} 只选中的公司会加入运营快递公司列表
</div>
</el-form-item>
<div v-if="selectedCatalogItem" class="catalog-selection">
<div>
<div class="catalog-selection__label">已选择</div>
<div class="catalog-selection__title">{{ catalogAddForm.company_name }}</div>
<div class="catalog-selection__meta">
{{ catalogAddForm.company_code }}{{ selectedCatalogItem.company_type ? ` / ${selectedCatalogItem.company_type}` : "" }}
</div>
</div>
<OrderStatusTag v-if="duplicateCatalogCompany" status="已存在" />
<OrderStatusTag v-else status="待加入" />
</div>
<el-row :gutter="16">
<el-col :span="12">
<el-form-item label="状态">
<el-select v-model="catalogAddForm.status" style="width: 100%">
<el-option label="启用" value="enabled" />
<el-option label="停用" value="disabled" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="排序值">
<el-input v-model.number="catalogAddForm.sort_order" type="number" placeholder="越小越靠前" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="默认设置">
<el-checkbox v-model="catalogAddForm.is_default">设为默认快递公司</el-checkbox>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="catalogAddForm.remark" :rows="3" maxlength="255" placeholder="内部备注,可不填" type="textarea" />
</el-form-item>
</el-form>
</div>
<template #footer>
<el-button @click="catalogAddVisible = false">取消</el-button>
<el-button
type="primary"
:disabled="!selectedCatalogItem || !!duplicateCatalogCompany || catalogTotal <= 0"
:loading="catalogAddSubmitting"
@click="submitCatalogAdd"
>
加入运营列表
</el-button>
</template>
</el-dialog>
</div> </div>
</template> </template>
@@ -311,4 +487,51 @@ onMounted(async () => {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.catalog-add {
display: grid;
gap: 16px;
}
.catalog-option {
display: grid;
gap: 4px;
}
.catalog-option__name {
font-weight: 700;
}
.catalog-option__meta,
.form-help,
.catalog-selection__label,
.catalog-selection__meta {
color: var(--admin-text-subtle);
font-size: 12px;
}
.form-help {
margin-top: 6px;
}
.catalog-selection {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border: 1px solid var(--admin-border);
border-radius: 8px;
background: #fbf8f2;
}
.catalog-selection__title {
margin-top: 4px;
font-size: 18px;
font-weight: 700;
}
.catalog-selection__meta {
margin-top: 4px;
}
</style> </style>

View File

@@ -3,7 +3,8 @@
{ {
"path": "pages/auth/login", "path": "pages/auth/login",
"style": { "style": {
"navigationBarTitleText": "登录" "navigationBarTitleText": "登录",
"navigationStyle": "custom"
} }
}, },
{ {

View File

@@ -29,6 +29,7 @@ const wechatMessage = ref("");
const countdown = ref(0); const countdown = ref(0);
const redirect = ref(""); const redirect = ref("");
const sendCodeErrorMessage = ref(""); const sendCodeErrorMessage = ref("");
const agreementAccepted = ref(false);
const appraisalStore = useAppraisalStore(); const appraisalStore = useAppraisalStore();
const form = reactive({ const form = reactive({
@@ -39,17 +40,20 @@ const form = reactive({
let countdownTimer: ReturnType<typeof setInterval> | null = null; let countdownTimer: ReturnType<typeof setInterval> | null = null;
const browserHint = computed(() =>
isWechatBrowser()
? "微信内将自动使用公众号授权登录;授权失败时也可继续用手机号登录。"
: "当前为非微信浏览器环境,可直接使用手机号验证码或密码登录。",
);
const sendButtonText = computed(() => (countdown.value > 0 ? `${countdown.value}s 后重发` : "发送验证码")); const sendButtonText = computed(() => (countdown.value > 0 ? `${countdown.value}s 后重发` : "发送验证码"));
const countdownHint = computed(() => const countdownHint = computed(() =>
countdown.value > 0 ? `${countdown.value} 秒后可重新发送验证码` : "验证码有效期 5 分钟,请注意查收短信。", countdown.value > 0 ? `${countdown.value} 秒后可重新发送验证码` : "验证码有效期 5 分钟,请注意查收短信。",
); );
function openAgreement(keyword: "privacy" | "service") {
const query = encodeURIComponent(keyword === "privacy" ? "隐私政策" : "服务协议");
uni.navigateTo({ url: `/pages/help/index?q=${query}` });
}
function toggleAgreement() {
agreementAccepted.value = !agreementAccepted.value;
}
function resolveSendCodeError(error: unknown) { function resolveSendCodeError(error: unknown) {
const message = error instanceof Error ? error.message : String(error || ""); const message = error instanceof Error ? error.message : String(error || "");
@@ -139,10 +143,6 @@ function validateMobile() {
return true; return true;
} }
function goHome() {
uni.reLaunch({ url: "/pages/home/index" });
}
function currentQueryValue(key: string) { function currentQueryValue(key: string) {
// #ifdef H5 // #ifdef H5
const url = new URL(window.location.href); const url = new URL(window.location.href);
@@ -303,6 +303,10 @@ async function handleSendCode() {
async function handleSubmit() { async function handleSubmit() {
if (submitting.value) return; if (submitting.value) return;
if (!agreementAccepted.value) {
showInfoToast("请先阅读并同意隐私权政策和用户协议");
return;
}
if (!validateMobile()) return; if (!validateMobile()) return;
submitting.value = true; submitting.value = true;
@@ -361,379 +365,430 @@ onUnmounted(clearCountdown);
<template> <template>
<view class="auth-page"> <view class="auth-page">
<view class="auth-backdrop auth-backdrop--gold"></view> <view class="auth-visual">
<view class="auth-backdrop auth-backdrop--mist"></view> <view class="auth-visual__shade"></view>
<view class="auth-brand">
<view class="auth-shell"> <view class="auth-brand__name">
<view class="auth-hero"> <text class="auth-brand__emblem"></text>
<view class="auth-brand-row"> <text>心验</text>
<view class="auth-brand-mark"></view> <text class="auth-brand__registered">®</text>
<view>
<view class="auth-brand-title">安心验</view>
<view class="auth-brand-subtitle">独立第三方奢侈品鉴定平台</view>
</view>
</view> </view>
<view class="auth-brand__subtitle">鉴真守正 · 安心之选</view>
</view>
</view>
<view class="auth-title">手机号登录</view> <view class="auth-panel">
<view class="auth-desc">{{ browserHint }}</view> <view class="auth-switch">
<view :class="['auth-switch__item', mode === 'code' ? 'auth-switch__item--active' : '']" @click="mode = 'code'">
<view class="auth-feature-list"> 验证码登录
<view class="auth-feature">订单进度自动同步</view> </view>
<view class="auth-feature">报告与验真统一管理</view> <view :class="['auth-switch__item', mode === 'password' ? 'auth-switch__item--active' : '']" @click="mode = 'password'">
<view class="auth-feature">工单地址消息集中查看</view> 账号密码
</view> </view>
</view> </view>
<view class="auth-panel"> <view v-if="wechatProcessing || wechatMessage" class="auth-wechat-status">
<view v-if="wechatProcessing || wechatMessage" class="auth-wechat-status"> <view class="auth-wechat-status__icon"></view>
<view class="auth-wechat-status__icon"></view> <view>
<view> <view class="auth-wechat-status__title">{{ wechatProcessing ? "微信授权登录" : "微信授权提示" }}</view>
<view class="auth-wechat-status__title">{{ wechatProcessing ? "微信授权登录" : "微信授权提示" }}</view> <view class="auth-wechat-status__desc">{{ wechatMessage || "正在打开微信授权" }}</view>
<view class="auth-wechat-status__desc">{{ wechatMessage || "正在打开微信授权" }}</view> </view>
</view>
<view class="auth-form">
<view class="auth-field">
<view class="auth-input-wrap">
<input v-model="form.mobile" class="auth-input" maxlength="11" type="number" placeholder="请输入手机号" />
</view> </view>
</view> </view>
<view class="auth-switch"> <view v-if="mode === 'code'" class="auth-field">
<view :class="['auth-switch__item', mode === 'code' ? 'auth-switch__item--active' : '']" @click="mode = 'code'"> <view class="auth-input-wrap auth-code-field">
验证码登录 <input v-model="form.code" class="auth-input" maxlength="6" type="number" placeholder="请输入验证码" />
<view :class="['auth-code-btn', countdown > 0 || sending ? 'auth-code-btn--disabled' : '']" @click="handleSendCode">
{{ sending ? "发送中..." : sendButtonText }}
</view>
</view> </view>
<view :class="['auth-switch__item', mode === 'password' ? 'auth-switch__item--active' : '']" @click="mode = 'password'"> <view v-if="sendCodeErrorMessage" class="auth-error-banner">
账号密码登录 {{ sendCodeErrorMessage }}
</view> </view>
<view class="auth-field__hint auth-field__hint--countdown">{{ countdownHint }}</view>
</view> </view>
<view class="auth-form"> <view v-else class="auth-field">
<view class="auth-field"> <view class="auth-input-wrap">
<view class="auth-field__label">手机号</view> <input v-model="form.password" class="auth-input" password placeholder="请输入登录密码" />
<view class="auth-input-wrap">
<input v-model="form.mobile" class="auth-input" maxlength="11" type="number" placeholder="请输入登录手机号" />
</view>
</view>
<view v-if="mode === 'code'" class="auth-field">
<view class="auth-field__label">验证码</view>
<view class="auth-code-row">
<view class="auth-input-wrap auth-code-row__input">
<input v-model="form.code" class="auth-input" maxlength="6" type="number" placeholder="请输入 6 位验证码" />
</view>
<view :class="['auth-code-btn', countdown > 0 ? 'auth-code-btn--disabled' : '']" @click="handleSendCode">
{{ sending ? "发送中..." : sendButtonText }}
</view>
</view>
<view v-if="sendCodeErrorMessage" class="auth-error-banner">
{{ sendCodeErrorMessage }}
</view>
<view class="auth-field__hint auth-field__hint--countdown">{{ countdownHint }}</view>
</view>
<view v-else class="auth-field">
<view class="auth-field__label">登录密码</view>
<view class="auth-input-wrap">
<input v-model="form.password" class="auth-input" password placeholder="请输入登录密码" />
</view>
<view class="auth-field__hint">如果当前账号还未设置密码请先使用验证码登录后设置 - 登录与安全中设置密码</view>
</view> </view>
<view class="auth-field__hint">未设置密码时请先使用验证码登录后到设置中创建密码</view>
</view> </view>
</view>
<view class="auth-note"> <view :class="['auth-submit', submitting ? 'auth-submit--disabled' : '']" @click="handleSubmit">
登录后即可查看订单报告消息地址和售后工单扫码打开的公开报告页与验真页无需登录 {{ submitting ? "登录中..." : "登录" }}
</view> </view>
<view class="auth-actions"> <view class="auth-agreement" @click="toggleAgreement">
<view class="btn btn--secondary auth-actions__button" @click="goHome">返回首页</view> <view :class="['auth-agreement__check', agreementAccepted ? 'auth-agreement__check--active' : '']"></view>
<view :class="['btn', 'btn--primary', 'auth-actions__button', submitting ? 'btn--disabled' : '']" @click="handleSubmit"> <view class="auth-agreement__text">
{{ submitting ? "登录中..." : "立即登录" }} 登录及同意
</view> <text class="auth-agreement__link" @click.stop="openAgreement('privacy')">隐私权政策</text>
<text class="auth-agreement__link" @click.stop="openAgreement('service')">用户协议</text>
</view> </view>
</view> </view>
</view> </view>
<view class="auth-home-indicator"></view>
</view> </view>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.auth-page { .auth-page {
position: relative; position: relative;
display: flex;
flex-direction: column;
min-height: 100vh; min-height: 100vh;
overflow: hidden; overflow: hidden;
padding: 36rpx 28rpx 48rpx;
background: #f2f2f4;
}
.auth-backdrop {
display: none;
}
.auth-backdrop--gold {
top: -120rpx;
right: -60rpx;
width: 360rpx;
height: 360rpx;
background: radial-gradient(circle, rgba(237, 189, 0, 0.28), transparent 68%);
}
.auth-backdrop--mist {
left: -80rpx;
bottom: 140rpx;
width: 320rpx;
height: 320rpx;
background: radial-gradient(circle, rgba(21, 21, 21, 0.08), transparent 70%);
}
.auth-shell {
position: relative;
display: grid;
gap: 28rpx;
}
.auth-hero {
padding: 36rpx 34rpx;
border-radius: 16rpx;
background: #ffffff; background: #ffffff;
color: #252527; color: #282a31;
border: 1px solid var(--card-border); font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
box-shadow: var(--shadow-sm);
} }
.auth-brand-row { .auth-page,
display: flex; .auth-page view,
align-items: center; .auth-page text,
gap: 18rpx; .auth-page input {
box-sizing: border-box;
} }
.auth-brand-mark { .auth-visual {
width: 78rpx;
height: 78rpx;
border-radius: 16rpx;
background: #edbd00;
color: #ffffff;
font-size: 36rpx;
font-weight: 700;
line-height: 78rpx;
text-align: center;
box-shadow: var(--shadow-sm);
}
.auth-brand-title {
font-size: 38rpx;
font-weight: 700;
line-height: 1.1;
}
.auth-brand-subtitle {
margin-top: 8rpx;
color: #777;
font-size: 22rpx;
line-height: 1.6;
}
.auth-title {
margin-top: 30rpx;
font-size: 52rpx;
font-weight: 800;
line-height: 1.08;
}
.auth-desc {
margin-top: 16rpx;
color: #666;
font-size: 28rpx;
line-height: 1.7;
}
.auth-feature-list {
display: grid;
gap: 14rpx;
margin-top: 28rpx;
}
.auth-feature {
position: relative; position: relative;
padding-left: 26rpx; flex: 0 0 690rpx;
color: #666; width: 100vw;
font-size: 24rpx; overflow: hidden;
line-height: 1.7; background-image: url("../../static/home/home-reference.jpg");
background-size: 1400rpx auto;
background-position: center top;
background-repeat: no-repeat;
} }
.auth-feature::before { .auth-visual__shade {
content: "";
position: absolute; position: absolute;
left: 0; inset: 0;
top: 14rpx; background:
width: 10rpx; linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(8, 8, 9, 0.12) 42%, rgba(50, 22, 8, 0.5) 100%),
height: 10rpx; linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.02) 50%, rgba(0, 0, 0, 0.18));
border-radius: 50%; }
background: #edbd00;
.auth-brand {
position: absolute;
left: 50%;
top: calc(172rpx + env(safe-area-inset-top));
z-index: 1;
width: 520rpx;
transform: translateX(-50%);
color: #ffffff;
text-align: center;
text-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.34);
}
.auth-brand__name {
display: inline-flex;
align-items: flex-end;
justify-content: center;
color: #ffffff;
font-size: 66rpx;
font-weight: 900;
line-height: 1;
letter-spacing: 0;
}
.auth-brand__emblem {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72rpx;
height: 72rpx;
margin-right: 6rpx;
border: 6rpx solid #ffffff;
border-radius: 10rpx 10rpx 20rpx 20rpx;
background: rgba(237, 189, 0, 0.94);
color: #ffffff;
font-size: 34rpx;
font-weight: 900;
line-height: 1;
text-shadow: none;
box-shadow: 0 8rpx 22rpx rgba(0, 0, 0, 0.24);
}
.auth-brand__registered {
align-self: flex-start;
margin-left: 4rpx;
font-size: 18rpx;
line-height: 1;
}
.auth-brand__subtitle {
margin-top: 18rpx;
color: rgba(255, 255, 255, 0.92);
font-size: 25rpx;
font-weight: 700;
line-height: 1.2;
} }
.auth-panel { .auth-panel {
padding: 30rpx 28rpx; position: relative;
border: 1px solid var(--card-border); z-index: 2;
border-radius: 16rpx; flex: 1;
width: 100vw;
min-height: calc(100vh - 612rpx);
margin-top: -78rpx;
padding: 0 40rpx calc(58rpx + env(safe-area-inset-bottom));
border-radius: 34rpx 34rpx 0 0;
background: #ffffff; background: #ffffff;
box-shadow: var(--shadow-sm); box-shadow: 0 -14rpx 34rpx rgba(0, 0, 0, 0.08);
} }
.auth-wechat-status { .auth-wechat-status {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 18rpx; gap: 16rpx;
margin-bottom: 22rpx; margin-top: 24rpx;
padding: 20rpx 22rpx; padding: 18rpx 20rpx;
border-radius: 16rpx; border-radius: 16rpx;
background: #edf7f0; background: #eef8f1;
border: 1px solid rgba(47, 107, 79, 0.14); border: 1rpx solid rgba(47, 107, 79, 0.14);
} }
.auth-wechat-status__icon { .auth-wechat-status__icon {
width: 64rpx; flex-shrink: 0;
height: 64rpx; width: 58rpx;
border-radius: 16rpx; height: 58rpx;
border-radius: 14rpx;
background: #2f6b4f; background: #2f6b4f;
color: #ffffff; color: #ffffff;
font-size: 26rpx; font-size: 24rpx;
font-weight: 700; font-weight: 800;
line-height: 64rpx; line-height: 58rpx;
text-align: center; text-align: center;
flex-shrink: 0;
} }
.auth-wechat-status__title { .auth-wechat-status__title {
color: #244f3b; color: #244f3b;
font-size: 26rpx; font-size: 24rpx;
font-weight: 700; font-weight: 800;
} }
.auth-wechat-status__desc { .auth-wechat-status__desc {
margin-top: 6rpx; margin-top: 4rpx;
color: #4f7662; color: #4f7662;
font-size: 22rpx; font-size: 21rpx;
line-height: 1.6; line-height: 1.45;
} }
.auth-switch { .auth-switch {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 14rpx; gap: 0;
padding: 10rpx; height: 78rpx;
border-radius: 16rpx; border-radius: 34rpx 34rpx 0 0;
background: #f4f4f6; overflow: hidden;
} }
.auth-switch__item { .auth-switch__item {
min-height: 82rpx; position: relative;
border-radius: 22rpx; color: #8a8b8f;
color: #666;
font-size: 26rpx; font-size: 26rpx;
font-weight: 600; font-weight: 800;
line-height: 82rpx; line-height: 78rpx;
text-align: center; text-align: center;
} }
.auth-switch__item--active { .auth-switch__item--active {
background: #252527; color: #2b2d33;
color: #ffffff; }
box-shadow: var(--shadow-sm);
.auth-switch__item--active::after {
content: "";
position: absolute;
left: 50%;
bottom: 6rpx;
width: 30rpx;
height: 6rpx;
border-radius: 8rpx;
background: #edbd00;
transform: translateX(-50%);
} }
.auth-form { .auth-form {
display: grid; display: grid;
gap: 24rpx; gap: 28rpx;
margin-top: 28rpx; margin-top: 54rpx;
}
.auth-field__label {
margin-bottom: 12rpx;
color: #252527;
font-size: 24rpx;
font-weight: 600;
} }
.auth-field__hint { .auth-field__hint {
margin-top: 12rpx; margin-top: 14rpx;
color: #777; color: #777;
font-size: 22rpx; font-size: 22rpx;
line-height: 1.7; line-height: 1.55;
} }
.auth-field__hint--countdown { .auth-field__hint--countdown {
color: #c89b00; color: #b78f00;
} }
.auth-error-banner { .auth-error-banner {
margin-top: 14rpx; margin-top: 14rpx;
padding: 18rpx 20rpx; padding: 16rpx 18rpx;
border-radius: 20rpx; border-radius: 14rpx;
background: rgba(159, 59, 50, 0.08); background: rgba(159, 59, 50, 0.08);
border: 1px solid rgba(159, 59, 50, 0.16); border: 1rpx solid rgba(159, 59, 50, 0.16);
color: #9f3b32; color: #9f3b32;
font-size: 22rpx; font-size: 22rpx;
line-height: 1.7; line-height: 1.55;
} }
.auth-input-wrap { .auth-input-wrap {
display: flex; display: flex;
align-items: center; align-items: center;
min-height: 92rpx; width: 100%;
height: 72rpx;
padding: 0 24rpx; padding: 0 24rpx;
border: 1px solid #ededf0; border-radius: 14rpx;
border-radius: 16rpx; background: #f5f6f8;
background: #fff; border: 1rpx solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
} }
.auth-input { .auth-input {
flex: 1;
width: 100%; width: 100%;
color: #252527; color: #252527;
font-size: 28rpx; font-size: 27rpx;
font-weight: 700;
line-height: 72rpx;
} }
.auth-code-row { .auth-input::placeholder {
display: grid; color: #b4b7be;
grid-template-columns: minmax(0, 1fr) 212rpx; font-weight: 500;
gap: 14rpx;
align-items: center;
} }
.auth-code-row__input { .auth-code-field {
min-width: 0; gap: 16rpx;
} }
.auth-code-btn { .auth-code-btn {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 92rpx; flex-shrink: 0;
border-radius: 16rpx; min-width: 136rpx;
background: rgba(237, 189, 0, 0.12); height: 48rpx;
color: #c89b00; padding: 0 18rpx;
font-size: 24rpx; border-radius: 12rpx;
font-weight: 600; background: #ffffff;
border: 1px solid rgba(237, 189, 0, 0.24); color: #edbd00;
font-size: 21rpx;
font-weight: 800;
line-height: 48rpx;
} }
.auth-code-btn--disabled { .auth-code-btn--disabled {
opacity: 0.52; color: #b8a86a;
opacity: 0.7;
} }
.auth-note { .auth-submit {
margin-top: 26rpx; display: flex;
padding: 22rpx 24rpx; align-items: center;
border-radius: 16rpx; justify-content: center;
background: #f7f7f8; height: 68rpx;
color: #666; margin-top: 58rpx;
font-size: 22rpx; border-radius: 14rpx;
line-height: 1.8; background: #edbd00;
border: 1px solid rgba(228, 219, 200, 0.72); color: #ffffff;
font-size: 27rpx;
font-weight: 800;
line-height: 68rpx;
box-shadow: 0 10rpx 20rpx rgba(237, 189, 0, 0.22);
} }
.auth-actions { .auth-submit--disabled {
display: grid; opacity: 0.58;
grid-template-columns: 1fr 1fr; box-shadow: none;
gap: 16rpx;
margin-top: 28rpx;
} }
.auth-actions__button { .auth-agreement {
min-width: 0; display: flex;
align-items: flex-start;
justify-content: center;
gap: 9rpx;
margin-top: 164rpx;
padding: 0 8rpx;
}
.auth-agreement__check {
flex-shrink: 0;
width: 22rpx;
height: 22rpx;
margin-top: 4rpx;
border: 3rpx solid #edbd00;
border-radius: 50%;
background: #ffffff;
}
.auth-agreement__check--active {
border-width: 6rpx;
background: #ffffff;
box-shadow: inset 0 0 0 5rpx #edbd00;
}
.auth-agreement__text {
color: #a0a2a8;
font-size: 20rpx;
line-height: 1.45;
}
.auth-agreement__link {
color: #e0ad00;
font-weight: 700;
}
.auth-home-indicator {
position: fixed;
left: 50%;
bottom: calc(16rpx + env(safe-area-inset-bottom));
z-index: 3;
width: 216rpx;
height: 7rpx;
border-radius: 999rpx;
background: rgba(0, 0, 0, 0.86);
transform: translateX(-50%);
pointer-events: none;
}
@media (max-width: 360px) {
.auth-visual {
flex-basis: 650rpx;
}
.auth-panel {
min-height: calc(100vh - 578rpx);
margin-top: -72rpx;
padding-left: 32rpx;
padding-right: 32rpx;
}
.auth-form {
margin-top: 42rpx;
}
.auth-submit {
margin-top: 46rpx;
}
.auth-agreement {
margin-top: 116rpx;
}
} }
</style> </style>