修复移动端输入聚焦放大,并补全商品详情价格拆分

- 触控设备输入框字号至少 16px,避免 iOS Safari 聚焦自动放大
- 商品管理详情「号主与价格」对齐订单资金拆分字段展示
This commit is contained in:
yml2213
2026-07-13 21:14:43 +08:00
parent acd9d9b7f1
commit a2a9ade68e
7 changed files with 99 additions and 18 deletions
@@ -9,7 +9,11 @@ import { fetchAdminUsers, type AdminUserItem } from '@/features/admin/api/adminU
import { fetchAdminFileBlob } from '@/shared/api/files'
import AuthImage from '@/shared/components/business/AuthImage.vue'
import { adminPath } from '@/shared/utils/adminPath'
import { formatCentWithSymbol } from '@/shared/utils/money'
import {
formatCentWithSymbol,
formatMoneyWithSymbol,
roundMoney,
} from '@/shared/utils/money'
import {
adminMarkListingAbnormal,
adminOfflineListing,
@@ -31,7 +35,9 @@ import {
getCoinWan,
getDailyLoss,
getListingConsumablePrice,
getListingDisplayPrice,
getListingResources,
getListingSellerPrice,
getOnlineTimeText,
getResourceQuantity,
getSkinNames,
@@ -88,21 +94,28 @@ const assetRows = computed(() => {
})
const ownerRows = computed(() => {
if (!listing.value) return []
const row = listing.value
const renterPrice = buyerTotalPrice(row)
const ownerCoinBase = sellerCoinBasePrice(row)
const ownerLoss = getListingConsumablePrice(row)
const ownerTotal = sellerTotalPrice(row)
const platformFee = platformMarkupAmount(row)
return [
{
label: '号主',
value: listing.value.owner_phone || listing.value.owner_nickname || listing.value.owner_id,
},
{ label: '号主 ID', value: listing.value.owner_id },
{ label: '价格', value: listingPrice(listing.value) },
{ label: '押金', value: moneyCent(listing.value.deposit_amount_cent) },
{ label: '哈夫币', value: formatHafCoinM(getCoinWan(listing.value)) },
{ label: '每日损耗', value: getDailyLoss(listing.value) || '-' },
{ label: '预计可租', value: formatEstimatedRentalDuration(listing.value) },
{
label: '额外消耗',
value: moneyCent(Math.round(getListingConsumablePrice(listing.value) * 100)),
value: row.owner_phone || row.owner_nickname || row.owner_id,
},
{ label: '号主 ID', value: row.owner_id },
// 价格字段与订单详情「资金拆分」对齐,便于客服核对
{ label: '租客租金', value: moneyYuan(renterPrice) },
{ label: '号主纯币价格', value: moneyYuan(ownerCoinBase) },
{ label: '号主损耗', value: moneyYuan(ownerLoss) },
{ label: '号主租金合计', value: moneyYuan(ownerTotal) },
{ label: '平台费用', value: moneyYuan(platformFee) },
{ label: '押金', value: moneyCent(row.deposit_amount_cent) },
{ label: '哈夫币', value: formatHafCoinM(getCoinWan(row)) },
{ label: '每日损耗', value: getDailyLoss(row) || '-' },
{ label: '预计可租', value: formatEstimatedRentalDuration(row) },
]
})
const resourceCards = computed(() => {
@@ -240,8 +253,56 @@ function moneyCent(value: number) {
return formatCentWithSymbol(value)
}
function moneyYuan(value: number) {
return formatMoneyWithSymbol(value)
}
function listingPrice(row: Listing) {
return moneyCent(row.price_cent)
return moneyYuan(buyerTotalPrice(row))
}
function priceBreakdown(row: Listing) {
const breakdown = row.asset_summary?.price_breakdown
return typeof breakdown === 'object' && breakdown !== null
? (breakdown as Record<string, unknown>)
: {}
}
function breakdownNumber(row: Listing, key: string) {
const value = priceBreakdown(row)[key]
if (typeof value === 'number') return value
if (typeof value === 'string' && value.trim()) {
const parsed = Number(value)
return Number.isFinite(parsed) ? parsed : 0
}
return 0
}
/** 租客侧展示总价(含平台加价与额外消耗) */
function buyerTotalPrice(row: Listing) {
const value = breakdownNumber(row, 'buyer_total_price')
return value > 0 ? roundMoney(value) : roundMoney(getListingDisplayPrice(row))
}
/** 号主纯币基础价 */
function sellerCoinBasePrice(row: Listing) {
const value = breakdownNumber(row, 'seller_coin_base_price')
if (value > 0) return roundMoney(value)
return Math.max(0, roundMoney(sellerTotalPrice(row) - getListingConsumablePrice(row)))
}
/** 号主租金合计 = 纯币基础价 + 额外消耗 */
function sellerTotalPrice(row: Listing) {
const value = breakdownNumber(row, 'seller_total_price')
if (value > 0) return roundMoney(value)
return roundMoney(getListingSellerPrice(row))
}
/** 平台费用 = 租客价 - 号主价 */
function platformMarkupAmount(row: Listing) {
const value = breakdownNumber(row, 'platform_markup_amount')
if (value > 0) return roundMoney(value)
return Math.max(0, roundMoney(buyerTotalPrice(row) - sellerTotalPrice(row)))
}
function assetText(row: Listing, key: string) {
@@ -464,7 +464,8 @@ function sectionTopInBody(section: HTMLElement, body: HTMLElement) {
border-radius: 8px;
background: #fff;
color: #333;
font-size: 13px;
/* iOS Safarifont-size < 16px 时聚焦会自动放大页面,需手动缩小才能恢复 */
font-size: 16px;
text-align: center;
}
@@ -81,7 +81,8 @@
}
.home-search :deep(.van-field__control) {
font-size: 14px;
/* iOS Safarifont-size < 16px 时聚焦会自动放大页面 */
font-size: 16px;
}
.mobile-service {
@@ -634,7 +634,8 @@ function updateNumberField(field: 'coin_consumed_m' | 'otherAmountYuan', event:
border: none;
outline: none;
background: transparent;
font-size: 14px;
/* iOS Safarifont-size < 16px 时聚焦会自动放大页面 */
font-size: 16px;
color: #182232;
}
@@ -821,7 +821,8 @@ async function copyListingCode() {
border: none;
background: transparent;
outline: none;
font-size: 14px;
/* iOS Safarifont-size < 16px 时聚焦会自动放大页面 */
font-size: 16px;
flex: 1;
}
@@ -84,7 +84,8 @@
.publish-field :deep(.van-field__control) {
color: #20242a;
font-size: 14px;
/* iOS Safarifont-size < 16px 时聚焦会自动放大页面 */
font-size: 16px;
}
.hint-label,
+15
View File
@@ -37,6 +37,21 @@ a {
text-decoration: none;
}
/*
* iOS Safari 在 input/textarea/select 的 font-size < 16px 时,
* 聚焦会自动放大页面,导致 UI 被轻微放大且需手动缩小才能恢复。
* 在触控设备上统一保证可编辑控件至少 16px。
* 组件内若需更小视觉字号,请用 transform: scale() 等方式,不要直接用 <16px 的 font-size。
*/
@media (hover: none) and (pointer: coarse) {
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']):not([type='button']):not([type='submit']):not([type='reset']):not([type='image']),
textarea,
select,
.van-field__control {
font-size: 16px !important;
}
}
/* ── Vant Toast 保护规则 ──────────────────────────────────
.van-popup 声明 background: var(--van-popup-background) = #fff (白色)
.van-toast 声明 background: var(--van-toast-background) = rgba(0,0,0,.7) (黑色)