287 lines
7.2 KiB
Vue
287 lines
7.2 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">{{ productInfo.introduction }}</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.rate }}%</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 } 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',
|
||
rate: '0',
|
||
introduction: '暂无简介'
|
||
})
|
||
|
||
// 立即咨询
|
||
const handleConsult = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/finance/service'
|
||
});
|
||
}
|
||
|
||
onLoad((options) => {
|
||
console.log('=== 详情页面开始加载 ===')
|
||
console.log('接收到的参数:', options)
|
||
|
||
// 解析传递过来的产品数据
|
||
if (options.productData) {
|
||
try {
|
||
console.log('原始 productData:', options.productData)
|
||
|
||
// 解码数据
|
||
const decodedData = decodeURIComponent(options.productData)
|
||
console.log('解码后的数据:', decodedData)
|
||
|
||
// 解析JSON
|
||
const receivedData = JSON.parse(decodedData)
|
||
console.log('解析后的数据对象:', receivedData)
|
||
console.log('接收到的产品名称:', receivedData.name)
|
||
console.log('接收到的产品利率:', receivedData.rate)
|
||
console.log('接收到的产品简介:', receivedData.introduction)
|
||
|
||
// 直接更新产品信息
|
||
if (receivedData.name) {
|
||
productInfo.value.name = receivedData.name
|
||
}
|
||
if (receivedData.rate) {
|
||
productInfo.value.rate = receivedData.rate
|
||
}
|
||
if (receivedData.introduction) {
|
||
productInfo.value.introduction = receivedData.introduction
|
||
}
|
||
|
||
console.log('=== 更新后的产品信息 ===')
|
||
console.log('产品名称:', productInfo.value.name)
|
||
console.log('产品利率:', productInfo.value.rate)
|
||
console.log('产品简介:', productInfo.value.introduction)
|
||
|
||
} catch (error) {
|
||
console.error('解析产品数据失败:', error)
|
||
console.log('错误详情:', error.message)
|
||
}
|
||
} else {
|
||
console.log('未接收到 productData 参数')
|
||
}
|
||
})
|
||
</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> |