239 lines
5.7 KiB
Vue
239 lines
5.7 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">
|
||
{{productInfo.name}}
|
||
</view>
|
||
<view class="product-date">
|
||
开始时间：{{productInfo.startDate}}
|
||
</view>
|
||
<view class="profit-info">
|
||
近期盈亏：{{productInfo.recentProfit}}
|
||
</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">{{productInfo.location}}</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">{{productInfo.detailAddress}}</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">{{productInfo.contactPerson}}</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">{{productInfo.settlementMethod}}</u-col>
|
||
</u-row>
|
||
<u-row>
|
||
<u-col span="6" class="card-name">产品企业</u-col>
|
||
<u-col span="6" class="card-value">{{productInfo.company}}</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">{{productInfo.publishDate}}</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">{{productInfo.annualGrowth}}%</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 { ref, onMounted } from 'vue';
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
|
||
// 产品信息
|
||
const productInfo = ref({
|
||
name: '理财产品名称',
|
||
startDate: '2025/09/13',
|
||
recentProfit: 'XXXX',
|
||
location: '浙江-宁波',
|
||
detailAddress: 'xx区xx路xxx号',
|
||
contactPerson: 'XXX',
|
||
settlementMethod: '按月结算，次月支付50%',
|
||
company: 'xxxx公司',
|
||
publishDate: '2025-09-13',
|
||
annualGrowth: 'x.x' // 注意：图片中是 %0x，这里调整为更合理的格式
|
||
})
|
||
|
||
// 立即咨询
|
||
const handleConsult = () => {
|
||
uni.showToast({
|
||
title: '客服即将联系您',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
|
||
onLoad((val) => {
|
||
// 如果有传递产品ID，可以在这里加载具体产品数据
|
||
if (val.productId) {
|
||
// loadProductData(val.productId)
|
||
}
|
||
})
|
||
|
||
onMounted(() => {
|
||
// 组件挂载后的逻辑
|
||
})
|
||
</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;
|
||
padding: 40rpx 30rpx 30rpx;
|
||
|
||
.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: #eeeeee;
|
||
padding: 30rpx;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
|
||
|
||
.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 {
|
||
.sub-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
padding-bottom: 15rpx;
|
||
border-bottom: 1rpx solid #e8e8e8;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
|
||
.consult-btn {
|
||
background: linear-gradient(270deg, #65A7FF 0%, #458CF9 100%);
|
||
color: #fff;
|
||
border: none;
|
||
height: 80rpx;
|
||
border-radius: 40rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 通用样式调整
|
||
.u-m-b-20 {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
</style> |