admin/jurong_circle_front_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增路径

Browse Source
This commit is contained in:
interest
2025-10-14 14:08:44 +08:00
parent 4de66f880f
commit ccbeddbb83
3 changed files with 474 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
pages/finance/production.vue Normal file
View File

@@ -0,0 +1,239 @@
<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>