Skip to content

C
CFFP-HB
Commit e96d7c40 by Sweet Zhang
Options

公告佣率展示

parent d836b97a
Showing with 162 additions and 131 deletions
myPackageA/product-list/commission-detail.vue
...@@ -7,60 +7,99 @@ ...@@ -7,60 +7,99 @@
</view> </view>
</view> </view>
<!-- 费率详情 --> <!-- 费率详情 -->
<!-- 费率详情 --> <view class="info-card" v-if="rateData && rateData.length > 0">
<view class="info-card" v-if="rateData && rateData.length > 0"> <view class="info-title">费率详情</view>
<view class="info-title">费率详情</view> <view class="contract-detail">
<view class="contract-detail"> <!-- 合约名称 -->
<view class="contract-title">
<text class="contract-name">合约名称：2025年第三季度佣金表</text>
<!-- 表格 --> </view>
<view class="detail-table">
<!-- 表格容器 -->
<!-- 保险公司 --> <view class="table-container">
<view class="table-row"> <!-- 固定左侧列 -->
<view class="table-cell first-column"> <view class="fixed-column">
<text class="cell-text">保险公司</text> <!-- 表头 -->
</view> <view class="table-row header-row">
<view class="table-cell" v-for="(plan, index) in rateData" :key="index"> <view class="table-cell first-column">
<text class="cell-text">{{ plan.companyName }}</text> <text class="cell-text">险种</text>
</view> </view>
</view> </view>
<!-- 产品名称 --> <!-- 保险公司 -->
<view class="table-row"> <view class="table-row">
<view class="table-cell first-column"> <view class="table-cell first-column">
<text class="cell-text">产品名称</text> <text class="cell-text">保险公司</text>
</view> </view>
<view class="table-cell" v-for="(plan, index) in rateData" :key="index"> </view>
<text class="cell-text">{{ plan.planName }}</text>
</view> <!-- 产品名称 -->
</view> <view class="table-row">
<view class="table-cell first-column">
<!-- 条件 --> <text class="cell-text">产品名称</text>
<view class="table-row"> </view>
<view class="table-cell first-column"> </view>
<text class="cell-text">条件</text>
</view> <!-- 条件 -->
<view class="table-cell" v-for="(plan, index) in rateData" :key="index"> <view class="table-row">
<text class="cell-text">供款年期 = {{ plan.term }} </text> <view class="table-cell first-column">
</view> <text class="cell-text">条件</text>
</view> </view>
</view>
<!-- 各年保费 -->
<view class="table-row" v-for="year in maxYears" :key="year"> <!-- 各年保费 -->
<view class="table-cell first-column"> <view class="table-row" v-for="year in maxYears" :key="year">
<text class="cell-text">保费（第{{ year }}年）</text> <view class="table-cell first-column">
</view> <text class="cell-text">保费（第{{ year }}年）</text>
<view class="table-cell" v-for="(plan, index) in rateData" :key="index"> </view>
<text class="cell-text commission-value"> </view>
{{ getCommissionRate(plan, year) }} </view>
</text>
</view> <!-- 可滚动右侧内容 -->
</view> <scroll-view class="scroll-content" scroll-x="true">
</view> <view class="scroll-inner">
</view> <!-- 表头 -->
</view> <view class="table-row header-row">
<view class="table-cell" v-for="(plan, index) in rateData" :key="index">
<text class="cell-text">{{ plan.categoryName }}</text>
</view>
</view>
<!-- 保险公司 -->
<view class="table-row">
<view class="table-cell" v-for="(plan, index) in rateData" :key="index">
<text class="cell-text">{{ plan.companyName }}</text>
</view>
</view>
<!-- 产品名称 -->
<view class="table-row">
<view class="table-cell" v-for="(plan, index) in rateData" :key="index">
<text class="cell-text">{{ plan.planName }}</text>
</view>
</view>
<!-- 条件 -->
<view class="table-row">
<view class="table-cell" v-for="(plan, index) in rateData" :key="index">
<text class="cell-text">供款年期 = {{ plan.term }} </text>
</view>
</view>
<!-- 各年保费 -->
<view class="table-row" v-for="year in maxYears" :key="year">
<view class="table-cell" v-for="(plan, index) in rateData" :key="index">
<text class="cell-text commission-value">
{{ getCommissionRate(plan, year) }}
</text>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
<!-- 加载状态 --> <!-- 加载状态 -->
<view class="loading" v-if="loading"> <view class="loading" v-if="loading">
<text>加载中...</text> <text>加载中...</text>
...@@ -70,6 +109,11 @@ ...@@ -70,6 +109,11 @@
<view class="error" v-if="error"> <view class="error" v-if="error">
<text>{{ error }}</text> <text>{{ error }}</text>
</view> </view>
<!-- 无数据 -->
<view class="error" v-if="rateData && rateData.length==0">
<text>暂无数据</text>
</view>
</view> </view>
</template> </template>
...@@ -239,14 +283,35 @@ onMounted(() => { ...@@ -239,14 +283,35 @@ onMounted(() => {
color: #303133; color: #303133;
} }
.detail-table { /* 表格容器 */
.table-container {
display: flex;
background: white; background: white;
position: relative;
}
/* 固定左侧列 */
.fixed-column {
width: 100px;
flex-shrink: 0;
z-index: 10;
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}
/* 可滚动右侧内容 */
.scroll-content {
flex: 1;
overflow-x: auto; overflow-x: auto;
} }
.scroll-inner {
min-width: max-content;
}
/* 表格行通用样式 */
.table-row { .table-row {
display: flex; display: flex;
min-width: 600px; min-height: 44px;
border-bottom: 1px solid #ebeef5; border-bottom: 1px solid #ebeef5;
} }
...@@ -259,30 +324,37 @@ onMounted(() => { ...@@ -259,30 +324,37 @@ onMounted(() => {
font-weight: 600; font-weight: 600;
} }
/* 表格单元格通用样式 */
.table-cell { .table-cell {
flex: 1;
padding: 12px 15px;
min-height: 44px; min-height: 44px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
border-right: 1px solid #ebeef5; border-right: 1px solid #ebeef5;
padding: 12px 8px;
} }
.table-cell:last-child { .table-cell:last-child {
border-right: none; border-right: none;
} }
.table-cell.first-column { /* 固定列样式 */
background: #fafafa; .fixed-column .table-cell {
width: 60px; width: 100px;
flex: none;
justify-content: flex-start; justify-content: flex-start;
padding-left: 15px;
background: #fafafa;
}
/* 滚动列样式 */
.scroll-inner .table-cell {
min-width: 120px;
flex: 1;
} }
.cell-text { .cell-text {
font-size: 14px; font-size: 13px;
color: #606266; color: #606266;
line-height: 1.4; line-height: 1.4;
} }
......
myPackageA/product-list/product-commission.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<view class="container"> <view class="container">
<!-- 头部 --> <!-- 头部 -->
<view class="header"> <view class="header">
<view class="title">产品查询</view> <view class="title">产品佣率查询</view>
</view> </view>
<!-- 搜索区域 --> <!-- 搜索区域 -->
...@@ -12,9 +12,8 @@ ...@@ -12,9 +12,8 @@
type="text" type="text"
placeholder="请输入产品名称" placeholder="请输入产品名称"
v-model="searchKeyword" v-model="searchKeyword"
@input="handleSearch"
/> />
<view class="search-icon">🔍</view> <view class="search-icon" @click="fetchProducts(1)">🔍</view>
</view> </view>
<!-- 产品列表 --> <!-- 产品列表 -->
...@@ -27,7 +26,7 @@ ...@@ -27,7 +26,7 @@
> >
<view class="product-header"> <view class="product-header">
<view class="product-name">{{ product.planName }}</view> <view class="product-name">{{ product.planName }}</view>
<view class="product-term">{{ product.term }}年</view> <!-- <view class="product-term">{{ product.term }}年</view> -->
</view> </view>
<view class="product-info"> <view class="product-info">
<view class="info-item"> <view class="info-item">
...@@ -36,11 +35,7 @@ ...@@ -36,11 +35,7 @@
</view> </view>
<view class="info-item"> <view class="info-item">
<text class="info-label">险种类别：</text> <text class="info-label">险种类别：</text>
<text class="info-value">{{ getCategoryName(product.category) }}</text> <text class="info-value">{{ product.categoryName }}</text>
</view>
<view class="info-item">
<text class="info-label">适用年龄：</text>
<text class="info-value">{{ product.minAge }} - {{ product.maxAge }}岁</text>
</view> </view>
</view> </view>
<view class="arrow">›</view> <view class="arrow">›</view>
...@@ -61,52 +56,12 @@ ...@@ -61,52 +56,12 @@
<script setup> <script setup>
import { ref, computed, onMounted } from 'vue' import { ref, computed, onMounted } from 'vue'
import api from '@/api/api';
// 响应式数据 // 响应式数据
const searchKeyword = ref('') const searchKeyword = ref('')
const products = ref([]) const products = ref([])
const loading = ref(false) const loading = ref(false)
// 模拟产品数据 - 实际应从API获取
const mockProducts = [
{
"planBizId": "1387023335996522496",
"planName": "環宇盈活儲蓄保險計劃",
"category": "SAV",
"companyName": "友邦保險(國際)有限公司",
"term": 3,
"minAge": 0,
"maxAge": 60
},
{
"planBizId": "1387023335996522496",
"planName": "環宇盈活儲蓄保險計劃",
"category": "SAV",
"companyName": "友邦保險(國際)有限公司",
"term": 5,
"minAge": 0,
"maxAge": 65
},
{
"planBizId": "1387023335996522497",
"planName": "卓越醫療保障計劃",
"category": "MED",
"companyName": "保誠保險有限公司",
"term": 10,
"minAge": 18,
"maxAge": 55
},
{
"planBizId": "1387023335996522498",
"planName": "豐盛退休年金",
"category": "RET",
"companyName": "宏利人壽保險公司",
"term": 20,
"minAge": 30,
"maxAge": 50
}
]
// 计算属性 - 筛选后的产品列表 // 计算属性 - 筛选后的产品列表
const filteredProducts = computed(() => { const filteredProducts = computed(() => {
if (!searchKeyword.value) { if (!searchKeyword.value) {
...@@ -129,35 +84,39 @@ const goToCommissionDetail = (product) => { ...@@ -129,35 +84,39 @@ const goToCommissionDetail = (product) => {
}) })
} }
const getCategoryName = (category) => {
const categoryMap = {
'SAV': '储蓄保险',
'MED': '医疗保险',
'RET': '退休年金',
'LIF': '人寿保险'
}
return categoryMap[category] || category
}
// 获取产品数据 // 获取产品数据
const fetchProducts = async () => { const fetchProducts = async (type=0) => {
loading.value = true loading.value = true
try { try {
let params = {
name:searchKeyword.value
}
// 搜索时，默认只查询10条
if(type===1){
params = {
name:searchKeyword.value,
paginationInfo:{
noLimitFlag:'',
number: 1,
size:10
}
}
}
// 实际API调用 // 实际API调用
// const response = await uni.request({ const response = await api.productSearch(params)
// url: '/insurance_product/list',
// method: 'GET'
// })
// 模拟API延迟 if(response.success){
await new Promise(resolve => setTimeout(resolve, 1000)) products.value = response.data.list || [];
products.value = mockProducts }
} catch (err) { } catch (err) {
console.error('获取产品列表失败:', err) console.error('获取产品列表失败:', err)
// 使用模拟数据 // 使用模拟数据
products.value = mockProducts products.value = []
} finally { } finally {
loading.value = false loading.value = false
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment