yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Snow Team] final-check: auto-commit work

Browse Source
This commit is contained in:
yml
2026-05-22 19:28:09 +08:00
parent 4e5eee9d01
commit a7011668ff
1 changed files with 107 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/mobile/MobileHomeView.vue
+107 -80
View File
@@ -1,36 +1,36 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted, ref } from 'vue' import { computed, onMounted, ref } from "vue";
import { RouterLink } from 'vue-router' import { RouterLink } from "vue-router";
import { fetchListings, type Listing } from '@/api/listings' import { fetchListings, type Listing } from "@/api/listings";
const loading = ref(false) const loading = ref(false);
const loadFailed = ref(false) const loadFailed = ref(false);
const listings = ref<Listing[]>([]) const listings = ref<Listing[]>([]);
const filterOpen = ref(false) const filterOpen = ref(false);
const activeSort = ref('默认') const activeSort = ref("默认");
const channels = [ const channels = [
{ label: '全部', icon: '🔥' }, { label: "全部", icon: "🔥" },
{ label: '高哈夫币', icon: '💰' }, { label: "高哈夫币", icon: "💰" },
{ label: '低押金', icon: '🛡️' }, { label: "低押金", icon: "🛡️" },
{ label: '扫码号', icon: '📱' }, { label: "扫码号", icon: "📱" },
{ label: '包夜', icon: '🌙' }, { label: "包夜", icon: "🌙" },
] ];
const sortOptions = ['默认', '价格', '比例', '哈夫币', '筛选'] const sortOptions = ["默认", "价格", "比例", "哈夫币", "筛选"];
const quickFilters = ['三角洲行动', '安卓/扫码', '高段位', '可包夜'] const quickFilters = ["三角洲行动", "安卓/扫码", "高段位", "可包夜"];
const fallbackListings: Listing[] = [ const fallbackListings: Listing[] = [
{ {
id: 9001, id: 9001,
account_id: 0, account_id: 0,
owner_id: 0, owner_id: 0,
title: '烽火地带 · 80W 哈夫币安全号', title: "烽火地带 · 80W 哈夫币安全号",
description: '支持扫码上号，号主在线交接，适合快速体验高资产账号。', description: "支持扫码上号，号主在线交接，适合快速体验高资产账号。",
game_name: '三角洲行动', game_name: "三角洲行动",
server_region: '微信区', server_region: "微信区",
login_platform: '安卓扫码', login_platform: "安卓扫码",
rank_level: '机密行动 王牌', rank_level: "机密行动 王牌",
haf_coin_amount: 800000, haf_coin_amount: 800000,
screenshot_urls: [], screenshot_urls: [],
price_hourly: 6.8, price_hourly: 6.8,
@@ -39,22 +39,22 @@ const fallbackListings: Listing[] = [
deposit_amount: 200, deposit_amount: 200,
min_rent_hours: 2, min_rent_hours: 2,
max_rent_hours: 168, max_rent_hours: 168,
status: 'published', status: "published",
review_status: 'approved', review_status: "approved",
review_reason: '', review_reason: "",
created_at: '', created_at: "",
updated_at: '', updated_at: "",
}, },
{ {
id: 9002, id: 9002,
account_id: 0, account_id: 0,
owner_id: 0, owner_id: 0,
title: '航天基地 · 高配皮肤成品号', title: "航天基地 · 高配皮肤成品号",
description: '热门枪皮齐全，低押金，新手友好。', description: "热门枪皮齐全，低押金，新手友好。",
game_name: '三角洲行动', game_name: "三角洲行动",
server_region: 'QQ区', server_region: "QQ区",
login_platform: 'iOS扫码', login_platform: "iOS扫码",
rank_level: '钻石', rank_level: "钻石",
haf_coin_amount: 520000, haf_coin_amount: 520000,
screenshot_urls: [], screenshot_urls: [],
price_hourly: 4.5, price_hourly: 4.5,
@@ -63,22 +63,22 @@ const fallbackListings: Listing[] = [
deposit_amount: 120, deposit_amount: 120,
min_rent_hours: 1, min_rent_hours: 1,
max_rent_hours: 72, max_rent_hours: 72,
status: 'published', status: "published",
review_status: 'approved', review_status: "approved",
review_reason: '', review_reason: "",
created_at: '', created_at: "",
updated_at: '', updated_at: "",
}, },
{ {
id: 9003, id: 9003,
account_id: 0, account_id: 0,
owner_id: 0, owner_id: 0,
title: '零号大坝 · 搬砖专用稳定号', title: "零号大坝 · 搬砖专用稳定号",
description: '可长租，支持包周，交接说明完整。', description: "可长租，支持包周，交接说明完整。",
game_name: '三角洲行动', game_name: "三角洲行动",
server_region: '微信区', server_region: "微信区",
login_platform: '安卓/模拟器', login_platform: "安卓/模拟器",
rank_level: '铂金', rank_level: "铂金",
haf_coin_amount: 360000, haf_coin_amount: 360000,
screenshot_urls: [], screenshot_urls: [],
price_hourly: 3.9, price_hourly: 3.9,
@@ -87,54 +87,61 @@ const fallbackListings: Listing[] = [
deposit_amount: 80, deposit_amount: 80,
min_rent_hours: 3, min_rent_hours: 3,
max_rent_hours: 168, max_rent_hours: 168,
status: 'published', status: "published",
review_status: 'approved', review_status: "approved",
review_reason: '', review_reason: "",
created_at: '', created_at: "",
updated_at: '', updated_at: "",
}, },
] ];
const displayListings = computed(() => (listings.value.length > 0 ? listings.value : fallbackListings)) const displayListings = computed(() =>
listings.value.length > 0 ? listings.value : fallbackListings
);
const platformStats = computed(() => { const platformStats = computed(() => {
const items = displayListings.value const items = displayListings.value;
const totalCoin = items.reduce((sum, item) => sum + Number(item.haf_coin_amount || 0), 0) const totalCoin = items.reduce(
const lowDeposit = items.filter((item) => Number(item.deposit_amount || 0) <= 120).length (sum, item) => sum + Number(item.haf_coin_amount || 0),
0
);
const lowDeposit = items.filter(
(item) => Number(item.deposit_amount || 0) <= 120
).length;
return [ return [
{ value: `${items.length}+`, label: '在线租号' }, { value: `${items.length}+`, label: "在线租号" },
{ value: formatCoin(totalCoin), label: '哈夫币总量' }, { value: formatCoin(totalCoin), label: "哈夫币总量" },
{ value: `${lowDeposit}个`, label: '低押账号' }, { value: `${lowDeposit}个`, label: "低押账号" },
] ];
}) });
onMounted(loadListings) onMounted(loadListings);
async function loadListings() { async function loadListings() {
loading.value = true loading.value = true;
loadFailed.value = false loadFailed.value = false;
try { try {
listings.value = await fetchListings() listings.value = await fetchListings();
} catch { } catch {
loadFailed.value = true loadFailed.value = true;
} finally { } finally {
loading.value = false loading.value = false;
} }
} }
function formatCoin(amount: number) { function formatCoin(amount: number) {
if (amount >= 10000) { if (amount >= 10000) {
return `${Math.round(amount / 10000)}W` return `${Math.round(amount / 10000)}W`;
} }
return `${amount}` return `${amount}`;
} }
function formatRatio(item: Listing) { function formatRatio(item: Listing) {
if (!item.price_hourly) { if (!item.price_hourly) {
return '--' return "--";
} }
return `${Math.round(item.haf_coin_amount / item.price_hourly / 10000)}W/元` return `${Math.round(item.haf_coin_amount / item.price_hourly / 10000)}W/元`;
} }
</script> </script>
@@ -193,21 +200,32 @@ function formatRatio(item: Listing) {
:key="item" :key="item"
:class="{ active: activeSort === item }" :class="{ active: activeSort === item }"
type="button" type="button"
@click="item === '筛选' ? (filterOpen = !filterOpen) : (activeSort = item)" @click="
item === '筛选' ? (filterOpen = !filterOpen) : (activeSort = item)
"
> >
{{ item }}<span v-if="item === '筛选'">▾</span> {{ item }}<span v-if="item === '筛选'">▾</span>
</button> </button>
</div> </div>
<div v-if="filterOpen" class="filter-panel"> <div v-if="filterOpen" class="filter-panel">
<button v-for="item in quickFilters" :key="item" type="button">{{ item }}</button> <button v-for="item in quickFilters" :key="item" type="button">
{{ item }}
</button>
</div> </div>
<p v-if="loadFailed" class="mobile-tip">接口暂不可用，当前展示移动端示例数据。</p> <p v-if="loadFailed" class="mobile-tip">
接口暂不可用，当前展示移动端示例数据。
</p>
<p v-else-if="loading" class="mobile-tip">正在加载优质账号...</p> <p v-else-if="loading" class="mobile-tip">正在加载优质账号...</p>
<div class="mobile-list"> <div class="mobile-list">
<RouterLink v-for="item in displayListings" :key="item.id" class="mobile-card" :to="`/listings/${item.id}`"> <RouterLink
v-for="item in displayListings"
:key="item.id"
class="mobile-card"
:to="`/m/listings/${item.id}`"
>
<div class="card-cover"> <div class="card-cover">
<span>{{ formatCoin(item.haf_coin_amount) }}</span> <span>{{ formatCoin(item.haf_coin_amount) }}</span>
<small>哈夫币</small> <small>哈夫币</small>
@@ -217,7 +235,10 @@ function formatRatio(item: Listing) {
<h2>{{ item.title }}</h2> <h2>{{ item.title }}</h2>
<em>可租</em> <em>可租</em>
</div> </div>
<p>{{ item.server_region }} · {{ item.login_platform }} · {{ item.rank_level || '未填写段位' }}</p> <p>
{{ item.server_region }} · {{ item.login_platform }} ·
{{ item.rank_level || "未填写段位" }}
</p>
<div class="card-tags"> <div class="card-tags">
<span>担保</span> <span>担保</span>
<span>秒接单</span> <span>秒接单</span>
@@ -230,7 +251,11 @@ function formatRatio(item: Listing) {
</div> </div>
<div class="card-footer"> <div class="card-footer">
<strong>¥{{ item.price_hourly }}<small>/小时</small></strong> <strong>¥{{ item.price_hourly }}<small>/小时</small></strong>
<span>日租 ¥{{ item.price_daily || '--' }} · 周租 ¥{{ item.price_weekly || '--' }}</span> <span
>日租 ¥{{ item.price_daily || "--" }} · 周租 ¥{{
item.price_weekly || "--"
}}</span
>
</div> </div>
</div> </div>
</RouterLink> </RouterLink>
@@ -238,11 +263,13 @@ function formatRatio(item: Listing) {
</section> </section>
<nav class="mobile-tabbar" aria-label="底部导航"> <nav class="mobile-tabbar" aria-label="底部导航">
<RouterLink to="/" class="tab-item active">首页</RouterLink> <RouterLink to="/m" class="tab-item active">首页</RouterLink>
<RouterLink to="/listings" class="tab-item">租号</RouterLink> <RouterLink to="/m/listings" class="tab-item">租号</RouterLink>
<RouterLink to="/seller/listings/create" class="publish-tab">发布</RouterLink> <RouterLink to="/m/seller/listings/create" class="publish-tab"
<RouterLink to="/orders" class="tab-item">订单</RouterLink> >发布</RouterLink
<RouterLink to="/login" class="tab-item">我的</RouterLink> >
<RouterLink to="/m/orders" class="tab-item">订单</RouterLink>
<RouterLink to="/m/login" class="tab-item">我的</RouterLink>
</nav> </nav>
</main> </main>
</template> </template>