feat: 添加产品页面，展示基金产品列表及相关信息
This commit is contained in:
@@ -25,6 +25,10 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
path: "service",
|
path: "service",
|
||||||
component: () => import("@/views/service/index.vue"),
|
component: () => import("@/views/service/index.vue"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "product",
|
||||||
|
component: () => import("@/views/product/index.vue"),
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
205
src/views/product/index.vue
Normal file
205
src/views/product/index.vue
Normal 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>
|
||||||
Reference in New Issue
Block a user