2025.10.17

This commit is contained in:
2025-10-17 17:21:39 +08:00
parent da61a7955b
commit 83a0ffa446
3 changed files with 189 additions and 105 deletions

View File

@@ -12,19 +12,17 @@
<view class="product-list" :style="'height:'+scrollHeight+'px'">
<scroll-view scroll-y="true" style="height: 100%;" v-if="productList.length!=0" @scrolltolower="loadData">
<view class="product-item" v-for="item in productList" >
<view class="product-name">
{{item.name}}
</view>
<view class="product-rate">
利率{{item.rate}}%
</view>
<view class="product-intro">
产品简介{{item.introduction }}
<view class="product-item" v-for="item in productList" :key="item.id">
<view class="product-name">
{{item.name}}
</view>
<view class="product-detail-link" @click="handleproduction" >
<view class="product-rate">
利率{{item.rate}}%
</view>
<view class="product-intro">
产品简介{{item.introduction}}
</view>
<view class="product-detail-link" @click="handleproduction(item)">
查看详情
</view>
</view>
@@ -38,12 +36,12 @@
</view>
</view>
<Tabbar id="tabbarId"></Tabbar>
<Tabbar id="tabbarId"></Tabbar>
</view>
</template>
<script setup lang="ts">
import { ref, computed, getCurrentInstance, onMounted } from 'vue';
import { ref, getCurrentInstance, onMounted } from 'vue';
import { onReady, onPullDownRefresh } from '@dcloudio/uni-app';
import { financeAPI } from '../../api/finnancial';
@@ -84,7 +82,8 @@
if (res.data && res.data.list) {
// 检查数据结构并映射字段
const mappedList = res.data.list.map((item: any) => ({
const mappedList = res.data.list.map((item: any, index: number) => ({
id: item.id || index,
name: item.productName || item.name || '未知产品',
rate: item.interestRate || item.rate || '0',
introduction: item.desc || item.introduction || item.productDesc || '暂无简介'
@@ -103,11 +102,25 @@
})
}
// 查看详情
// 查看详情 - 传递完整产品数据
const handleproduction = (item: any) => {
console.log('查看产品详情:', item)
console.log('点击查看详情,产品数据:', item)
// 确保数据包含必要的字段
const productData = {
name: item.name || '未知产品',
rate: item.rate || '0',
introduction: item.introduction || '暂无简介'
}
console.log('准备传递的产品数据:', productData)
// 将产品数据转换为JSON字符串传递
const encodedData = encodeURIComponent(JSON.stringify(productData))
console.log('编码后的数据:', encodedData)
uni.navigateTo({
url: `/pages/finance/production?name=${encodeURIComponent(item.name)}&rate=${item.rate}&intro=${encodeURIComponent(item.introduction)}`
url: `/pages/finance/production?productData=${encodedData}`
})
}
@@ -157,7 +170,6 @@
.search {
padding: 20rpx 42rpx 0;
}
}
@@ -171,38 +183,34 @@
margin-bottom: 20rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
.product-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.product-name {
font-size: 32rpx;
font-weight: 600;
color: #333;
margin-bottom: 15rpx;
}
.product-rate {
font-size: 28rpx;
color: #ff6b6b;
font-weight: 500;
margin-bottom: 20rpx;
}
.product-name {
font-size: 32rpx;
font-weight: 600;
color: #333;
margin-bottom: 15rpx;
}
.product-rate {
font-size: 28rpx;
color: #333;
font-weight: 500;
margin-bottom: 20rpx;
}
// 移除产品简介显示 */
.product-intro {
font-size: 26rpx;
color: #666;
line-height: 1.5;
margin-bottom: 20rpx;
}
font-size: 26rpx;
color: #666;
line-height: 1.5;
margin-bottom: 20rpx;
display: block; // 确保显示
}
.product-detail-link {
font-size: 24rpx;
color: #458cf9;
text-align: right;
padding-top: 10rpx;
}
}
@@ -211,7 +219,5 @@
}
}
}
}
</style>
</style>

View File

@@ -4,16 +4,18 @@
back-icon-color="#fff" title-color="#fff">
</u-navbar>
<!-- 产品头部信息 -->
<view class="product-header">
<view class="product-name">
理财产品名称
{{ productInfo.name }}
</view>
<view class="product-date">
开始时间2025/09/13
开始时间{{ productInfo.startDate }}
</view>
<view class="profit-info">
近期盈亏XXXX
近期盈亏{{ productInfo.recentProfit }}
</view>
</view>
@@ -21,23 +23,23 @@
<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">浙江-宁波</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">xx区xx路xxx号</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">XXX</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">按月结算次月支付50%</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">xxxx公司</u-col>
<u-col span="6" class="card-value">{{ productInfo.company }}</u-col>
</u-row>
</view>
@@ -51,8 +53,8 @@
<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-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>
@@ -77,11 +79,11 @@
<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">2025-09-13</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">xxx%</u-col>
<u-col span="6" class="card-value">{{ productInfo.rate }}%</u-col>
</u-row>
</view>
</view>
@@ -94,26 +96,73 @@
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getUserInfo } from '../../util/common';
import { programAPI } from '../../api/program';
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import { groupAPI } from '../../api/group';
// 产品信息响应式数据
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((val) => {
// 如果有传递产品ID可以在这里加载具体产品数据
if (val.productId) {
// loadProductData(val.productId)
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>
@@ -150,7 +199,7 @@
}
}
// 卡片样式 - 调整为白色背景
// 卡片样式
.card {
margin: 20rpx 30rpx;
background-color: #ffffff;
@@ -202,7 +251,7 @@
}
}
// 底部按钮 - 调整为深蓝色
// 底部按钮
.bottom-actions {
position: fixed;
bottom: 0;
@@ -235,4 +284,4 @@
.u-m-b-20 {
margin-bottom: 20rpx;
}
</style>
</style>

View File

@@ -68,9 +68,15 @@
<!-- 输入框模式 -->
<view class="input-mode" v-if="isInputMode">
<view class="input-container">
<!-- 左侧切换按钮 -->
<view class="switch-icon" @click="toggleInputMode">
<u-icon name="keyboard" color="#458CF9" size="40"></u-icon>
</view>
<!-- 中间输入框 -->
<u-input
v-model="inputText"
placeholder="请在这里输入文字"
placeholder="点击输入文字"
:border="false"
:clearable="false"
class="custom-input"
@@ -79,29 +85,31 @@
borderRadius: '44rpx',
padding: '0 30rpx',
height: '88rpx',
fontSize: '28rpx'
fontSize: '28rpx',
flex: 1,
margin: '0 20rpx',
textAlign: 'center'
}"
></u-input>
<view class="switch-icon" @click="toggleInputMode">
<u-icon name="chat" color="#458CF9" size="40"></u-icon>
</view>
<!-- 右侧发送按钮 -->
<u-button
class="send-btn"
@click="handleSendMessage"
:custom-style="{
background: 'linear-gradient(270deg, #65A7FF 0%, #458CF9 100%)',
color: '#fff',
border: 'none',
height: '88rpx',
width: '140rpx',
borderRadius: '44rpx',
fontSize: '28rpx',
fontWeight: '500'
}"
>
发送
</u-button>
</view>
<u-button
class="send-btn"
@click="handleSendMessage"
:custom-style="{
background: 'linear-gradient(270deg, #65A7FF 0%, #458CF9 100%)',
color: '#fff',
border: 'none',
height: '60rpx',
borderRadius: '30rpx',
fontSize: '26rpx',
fontWeight: '500',
marginTop: '20rpx'
}"
>
发送
</u-button>
</view>
<!-- 按钮模式 -->
@@ -506,12 +514,7 @@ const handleHumanService = () => {
.input-container {
display: flex;
align-items: center;
gap: 20rpx;
.custom-input {
flex: 1;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
justify-content: space-between;
.switch-icon {
width: 80rpx;
@@ -523,16 +526,27 @@ const handleHumanService = () => {
justify-content: center;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
transition: all 0.3s;
flex-shrink: 0;
&:active {
transform: scale(0.95);
}
}
}
.send-btn {
width: 200rpx;
align-self: flex-end;
.custom-input {
flex: 1;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
margin: 0 20rpx;
}
.send-btn {
flex-shrink: 0;
transition: all 0.3s;
&:active {
transform: scale(0.98);
}
}
}
}
@@ -540,7 +554,6 @@ const handleHumanService = () => {
.button-mode {
display: flex;
align-items: center;
gap: 20rpx;
.switch-icon {
width: 80rpx;
@@ -552,6 +565,7 @@ const handleHumanService = () => {
justify-content: center;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
transition: all 0.3s;
flex-shrink: 0;
&:active {
transform: scale(0.95);
@@ -559,6 +573,9 @@ const handleHumanService = () => {
}
.consult-btn {
flex: 1;
margin-left: 20rpx;
.btn-icon {
margin-right: 15rpx;
}
@@ -583,5 +600,17 @@ const handleHumanService = () => {
grid-template-columns: repeat(4, 1fr);
gap: 10rpx;
}
.human-service .input-mode .input-container {
gap: 10rpx;
.custom-input {
margin: 0 10rpx;
}
.send-btn {
width: 120rpx;
}
}
}
</style>