239 lines
5.5 KiB
Vue
239 lines
5.5 KiB
Vue
<template>
|
||
<view class="detail-container">
|
||
<u-navbar :is-fixed="false" title="产品详情" :background="{background: 'transparent' }" :border-bottom="false"
|
||
back-icon-color="#fff" title-color="#fff">
|
||
</u-navbar>
|
||
|
||
<!-- 产品头部信息 -->
|
||
<view class="product-header">
|
||
<view class="product-name">
|
||
理财产品名称
|
||
</view>
|
||
<view class="product-date">
|
||
开始时间：2025/09/13
|
||
</view>
|
||
<view class="profit-info">
|
||
近期盈亏：XXXX
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 基本信息卡片 -->
|
||
<view class="card">
|
||
<u-row class="u-m-b-20">
|
||
<u-col span="6" class="card-name">所在地</u-col>
|
||
<u-col span="6" class="card-value">浙江-宁波</u-col>
|
||
</u-row>
|
||
<u-row class="u-m-b-20">
|
||
<u-col span="6" class="card-name">详细地址</u-col>
|
||
<u-col span="6" class="card-value">xx区xx路xxx号</u-col>
|
||
</u-row>
|
||
<u-row class="u-m-b-20">
|
||
<u-col span="6" class="card-name">联系人</u-col>
|
||
<u-col span="6" class="card-value">XXX</u-col>
|
||
</u-row>
|
||
<u-row class="u-m-b-20">
|
||
<u-col span="6" class="card-name">结算方式</u-col>
|
||
<u-col span="6" class="card-value">按月结算，次月支付50%</u-col>
|
||
</u-row>
|
||
<u-row>
|
||
<u-col span="6" class="card-name">产品企业</u-col>
|
||
<u-col span="6" class="card-value">xxxx公司</u-col>
|
||
</u-row>
|
||
</view>
|
||
|
||
<!-- 产品需求 -->
|
||
<view class="card">
|
||
<view class="card-title">
|
||
产品需求<span>（4）</span>
|
||
</view>
|
||
<view class="card-body">
|
||
<u-row class="sub-title u-m-b-20">
|
||
<u-col span="12">需求名称</u-col>
|
||
</u-row>
|
||
<u-row class="u-m-b-20">
|
||
<u-col span="6" text-align="left" class="card-name">限制</u-col>
|
||
<u-col span="6" class="card-value">详情</u-col>
|
||
</u-row>
|
||
<u-row class="u-m-b-20">
|
||
<u-col span="6" text-align="left" class="card-name">限价</u-col>
|
||
<u-col span="6" class="card-value">详情</u-col>
|
||
</u-row>
|
||
<u-row class="u-m-b-20">
|
||
<u-col span="6" text-align="left" class="card-name">时间</u-col>
|
||
<u-col span="6" class="card-value">详情</u-col>
|
||
</u-row>
|
||
<u-row class="u-m-b-20">
|
||
<u-col span="6" text-align="left" class="card-name">其他要求</u-col>
|
||
<u-col span="6" class="card-value">详情</u-col>
|
||
</u-row>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 产品动态 -->
|
||
<view class="card">
|
||
<view class="card-title">
|
||
产品动态
|
||
</view>
|
||
<view class="card-body">
|
||
<u-row class="u-m-b-20">
|
||
<u-col span="6" text-align="left" class="card-name">发布时间</u-col>
|
||
<u-col span="6" class="card-value">2025-09-13</u-col>
|
||
</u-row>
|
||
<u-row>
|
||
<u-col span="6" text-align="left" class="card-name">年化增长</u-col>
|
||
<u-col span="6" class="card-value">xxx%</u-col>
|
||
</u-row>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部按钮 -->
|
||
<view class="bottom-actions">
|
||
<u-button class="consult-btn" @click="handleConsult">立即咨询</u-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
|
||
import { onMounted, ref } from 'vue';
|
||
import { getUserInfo } from '../../util/common';
|
||
import { programAPI } from '../../api/program';
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { groupAPI } from '../../api/group';
|
||
|
||
|
||
|
||
// 立即咨询 - 跳转到客服中心页面
|
||
const handleConsult = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/finance/service'
|
||
});
|
||
}
|
||
|
||
onLoad((val) => {
|
||
// 如果有传递产品ID，可以在这里加载具体产品数据
|
||
if (val.productId) {
|
||
// loadProductData(val.productId)
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.detail-container {
|
||
width: 100%;
|
||
min-height: 100vh;
|
||
background: linear-gradient(180deg, #2F75F9 0%, #F0F3FF 34.13%);
|
||
padding-bottom: 120rpx;
|
||
|
||
// 产品头部信息
|
||
.product-header {
|
||
background: transparent;
|
||
color: #fff;
|
||
margin: 0 80rpx;
|
||
|
||
.product-name {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
margin-bottom: 20rpx;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.product-date {
|
||
font-size: 28rpx;
|
||
margin-bottom: 15rpx;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.profit-info {
|
||
font-size: 28rpx;
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
// 卡片样式 - 调整为白色背景
|
||
.card {
|
||
margin: 20rpx 30rpx;
|
||
background-color: #ffffff;
|
||
padding: 30rpx;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||
|
||
.card-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 25rpx;
|
||
padding-bottom: 15rpx;
|
||
border-bottom: 2rpx solid #f0f0f0;
|
||
|
||
span {
|
||
color: #666;
|
||
font-size: 28rpx;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.card-body {
|
||
background: #f8f9fa;
|
||
border-radius: 12rpx;
|
||
padding: 25rpx;
|
||
|
||
.sub-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
padding-bottom: 15rpx;
|
||
border-bottom: 1rpx solid #e8e8e8;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
|
||
.card-name {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.card-value {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
// 底部按钮 - 调整为深蓝色
|
||
.bottom-actions {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: #fff;
|
||
padding: 20rpx 30rpx;
|
||
border-top: 1rpx solid #f0f0f0;
|
||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||
|
||
.consult-btn {
|
||
background: #1a5fd8;
|
||
color: #fff;
|
||
border: none;
|
||
height: 88rpx;
|
||
border-radius: 44rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
box-shadow: 0 4rpx 12rpx rgba(26, 95, 216, 0.3);
|
||
|
||
&:active {
|
||
background: #164db3;
|
||
transform: translateY(1rpx);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 通用样式调整
|
||
.u-m-b-20 {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
</style>
|