root/financial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加产品页面，展示基金产品列表及相关信息

Browse Source
This commit is contained in:
Seven
2026-01-16 22:43:21 +07:00
parent d59995e522
commit 029f8d7be6
2 changed files with 209 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
src/views/product/index.vue Normal file
View File

@@ -0,0 +1,205 @@
<script lang='ts' setup>
import {
calendarOutline,
cardOutline,
chevronForwardOutline,
timeOutline,
trendingUpOutline,
walletOutline,
} from "ionicons/icons";
// 基金产品数据
const fundProducts = ref([
{
id: 1,
name: "稳健增长基金",
endTime: "2026-01-25 23:59",
image: "https://picsum.photos/seed/fund1/200/200",
currentPrice: 1.258,
expectedReturn: "15.8%",
period: "90天",
tag: "稳健",
tagColor: "#1890ff",
},
{
id: 2,
name: "积极进取基金",
endTime: "2026-01-28 23:59",
image: "https://picsum.photos/seed/fund2/200/200",
currentPrice: 1.482,
expectedReturn: "22.5%",
period: "180天",
tag: "积极",
tagColor: "#c41e3a",
},
{
id: 3,
name: "均衡配置基金",
endTime: "2026-02-01 23:59",
image: "https://picsum.photos/seed/fund3/200/200",
currentPrice: 1.356,
expectedReturn: "18.6%",
period: "120天",
tag: "均衡",
tagColor: "#52c41a",
},
{
id: 4,
name: "价值投资基金",
endTime: "2026-02-05 23:59",
image: "https://picsum.photos/seed/fund4/200/200",
currentPrice: 1.189,
expectedReturn: "16.2%",
period: "90天",
tag: "价值",
tagColor: "#faad14",
},
]);
function handleProductClick(product: any) {
console.log("查看产品:", product.name);
// TODO: 跳转到产品详情
}
function handleSubscribe(product: any, event: Event) {
event.stopPropagation();
console.log("申购产品:", product.name);
// TODO: 实现申购功能
}
</script>
<template>
<ion-page>
<!-- <ion-header class="ion-no-border">
<ion-toolbar class="header-toolbar">
<div class="px-5 py-3">
<div class="text-xl font-bold text-white m-0">
业务办理
</div>
<p class="text-sm text-white/80 m-0 mt-1">
精选优质基金产品
</p>
</div>
</ion-toolbar>
</ion-header> -->
<ion-content class="ion-padding">
<div class="absolute top-0 left-0 w-full h-30 header-bg -z-1" />
<!-- 基金产品列表 -->
<section class="mb-5">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center gap-2">
<ion-icon :icon="walletOutline" class="text-2xl text-[#c41e3a]" />
<h3 class="text-lg font-bold text-[#1a1a1a] m-0">
热门产品
</h3>
</div>
<ion-button fill="clear" size="small" class="text-sm text-[#c41e3a] h-8 font-semibold">
全部
<ion-icon slot="end" :icon="chevronForwardOutline" />
</ion-button>
</div>
<div class="flex flex-col gap-4">
<div
v-for="product in fundProducts"
:key="product.id"
class="bg-white rounded-2xl overflow-hidden shadow-sm cursor-pointer transition-all active:translate-y-0.5 active:shadow-sm flex"
@click="handleProductClick(product)"
>
<!-- 左侧缩略图 -->
<div class="relative w-28 h-36 flex-shrink-0 overflow-hidden bg-gradient-to-br from-[#f5f5f5] to-[#e8e8e8]">
<img :src="product.image" :alt="product.name" class="w-full h-full object-cover">
<div
class="fund-tag absolute top-2 left-2 text-white px-2 py-0.5 rounded-lg text-xs font-semibold shadow-lg"
:style="{ background: product.tagColor }"
>
{{ product.tag }}
</div>
</div>
<!-- 右侧信息 -->
<div class="flex-1 p-4 flex flex-col justify-between">
<div>
<h4 class="text-base font-bold text-[#1a1a1a] mb-1 leading-snug">
{{ product.name }}
</h4>
<div class="flex items-center gap-1 text-xs text-[#999] mb-2">
<ion-icon :icon="timeOutline" class="text-sm" />
<span>申购截止：{{ product.endTime }}</span>
</div>
<!-- 产品信息 -->
<div class="grid grid-cols-3 gap-2 mb-2">
<div class="flex flex-col">
<span class="text-xs text-[#999]">当前价格</span>
<span class="text-sm font-bold text-[#c41e3a]">¥{{ product.currentPrice }}</span>
</div>
<div class="flex flex-col">
<span class="text-xs text-[#999]">到期收益</span>
<span class="text-sm font-bold text-[#52c41a] flex items-center gap-0.5">
<ion-icon :icon="trendingUpOutline" class="text-xs" />
{{ product.expectedReturn }}
</span>
</div>
<div class="flex flex-col">
<span class="text-xs text-[#999]">产品周期</span>
<span class="text-sm font-bold text-[#1a1a1a] flex items-center gap-0.5">
<ion-icon :icon="calendarOutline" class="text-xs" />
{{ product.period }}
</span>
</div>
</div>
</div>
<!-- 申购按钮 -->
<div class="flex items-center gap-2 mt-2">
<ion-button
size="small"
class="subscribe-btn flex-1"
@click="handleSubscribe(product, $event)"
>
<ion-icon slot="start" :icon="cardOutline" />
我要申购
</ion-button>
</div>
</div>
</div>
</div>
</section>
</ion-content>
</ion-page>
</template>
<style lang='css' scoped>
.header-toolbar {
--background: #c32120;
--color: #fff;
}
.header-bg {
background: linear-gradient(180deg, #c32120 0%, transparent 100%);
}
.fund-tag {
backdrop-filter: blur(4px);
}
.subscribe-btn {
--background: linear-gradient(135deg, #c41e3a 0%, #8b1a2e 100%);
--background-activated: linear-gradient(135deg, #8b1a2e 0%, #c41e3a 100%);
--border-radius: 12px;
--padding-start: 16px;
--padding-end: 16px;
--box-shadow: 0 2px 8px rgba(196, 30, 58, 0.3);
font-weight: 600;
font-size: 13px;
height: 32px;
text-transform: none;
}
.subscribe-btn::part(native) {
font-weight: 600;
}
</style>