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.productName }}
			</view>
			<view class="product-date">
				产品代码：{{ productInfo.productCode }}
			</view>
			<view class="product-date">
				开始时间：{{ productInfo.createDate }}
			</view>
			<view class="profit-info">
				近期盈亏：{{ productInfo.expectedReturnRate }}
			</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.riskLevel }}</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.productType }}</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.company }}</u-col>
			</u-row>
			<u-row v-if="productInfo.user">
				<u-col span="6" class="card-name">联系人</u-col>
				<u-col span="6" class="card-value">{{ productInfo.user.username }}</u-col>
			</u-row>
		</view>

		<view class="card">
			<view class="card-title">
				<view class="icon">
					<image style="width: 100%;height: 100%;" src="/static/icon/card-title-icon.png" mode=""></image>
				</view>
				项目介绍<span></span>
			</view>
			<view class="u-m-t-10 editor-content-view">
				<view v-html="productInfo.introduction"></view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-actions">
			<u-button hover-class="none" class="consult-btn" @click="handleConsult">立即咨询</u-button>
		</view>
	</view>

	<u-toast ref="msgToast"></u-toast>

</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { financeAPI } from '../../api/finnancial';

	const msgToast = ref()


	// 立即咨询
	const handleConsult = () => {
		msgToast.value.show({
			title: '暂未开发，请耐心等待~'
		})
	}

	// 产品信息响应式数据
	const productInfo = ref({})
	const id = ref()

	const loadData = () => {
		financeAPI.getProgram(id.value).then(res => {
			productInfo.value = res.data
		})
	}

	onLoad((val) => {
		id.value = val.id
	})

	onMounted(() => {
		loadData()
	})
</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>