jurong_circle_front_app/pages/finance/production.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>