【开门红需求】首页开门红元素配置功能开发 --提交人:白金岩

This commit is contained in:
bai.jinyan
2021-11-10 13:12:13 +08:00
parent 836e4454bd
commit fb42ebfa5c

View File

@@ -1,7 +1,7 @@
<template>
<div ref="product" class="home-product-container pb20">
<!-- 非个险 -->
<template v-if="!isGoodStart">
<template v-if="!isPersonalInsu">
<div class="home-product-content">
<!-- 产品中心 -->
<div class="pcenter-title flex pt10 mr20 mb10 ml15 justify-content-s align-items-c" style="height: 30px;">
@@ -53,21 +53,21 @@
</div>
</template>
<!-- 个险 -->
<template v-if="isGoodStart">
<template v-if="isPersonalInsu">
<div class="home-product-content">
<!-- 机构排名/业绩排名 -->
<div class="pcenter-title flex pt10 pb10 mr15 justify-content-s align-items-c" style="height: 50px;">
<img v-if="isInner" class="title-img" :src="$assetsUrl + 'images/goodStart/organizationTitle.png'" />
<img v-else class="title-img" :src="$assetsUrl + 'images/goodStart/performanceTitle.png'" />
<img v-if="isInner" class="title-img" :src="organizationImgUrl" />
<img v-else class="title-img" :src="performanceImgUrl" />
</div>
<div class="home-product-pcenter performance">
<div class="pcenter-list">
<table class="myTable" style="width: 100vw;" cellspacing="0" cellpadding="0">
<table class="myTable" cellspacing="0" cellpadding="0">
<tr>
<th v-for="(thead, index) in theads" :class="{ 'sticky-col': index <= 1 }" :key="index">{{ thead }}</th>
<th v-for="(thead, index) in theads" :class="{ 'sticky-col': index <= 1 }" :key="index" :style="{ backgroundColor: isGoodStart ? '#FF4A28' : '#4473ee' }">{{ thead }}</th>
</tr>
<template v-if="isInner">
<tr v-for="(org, i) in organizationData" :key="i" :class="{ hidden: i >= 5 && !idMoreDataShow }">
<tr v-for="(org, i) in organizationData" :key="i" :class="{ hidden: i >= 5 && !idMoreDataShow,'goodStart':isGoodStart }">
<td class="sticky-col">{{ i == 0 ? '-' : i + '' }}</td>
<td class="org-name sticky-col">{{ org.name | blankFilter }}</td>
<td>{{ org.ysbfDay | blankFilter }}</td>
@@ -83,7 +83,7 @@
</tr>
</template>
<template v-else>
<tr v-for="(org, i) in performanceData" :key="i" :class="{ hidden: i >= 5 && !idMoreDataShow }">
<tr v-for="(org, i) in performanceData" :key="i" :class="{ hidden: i >= 5 && !idMoreDataShow,'goodStart':isGoodStart }">
<td class="sticky-col">{{ org.rank | blankFilter }}</td>
<td class="sticky-col">{{ org.name | blankFilter }}</td>
<td class="org-name">{{ org.comName | blankFilter }}</td>
@@ -101,7 +101,7 @@
</div>
</div>
<div class="ml15 mr15 mb10 mt10 more-text" @click="showMore">
<van-icon :class="{ arrowUp: idMoreDataShow }" color="#7C9DF3" name="play" />
<van-icon :class="{ arrowUp: idMoreDataShow }" :style="{color : isGoodStart ? '#E13929' : '#7C9DF3' }" name="play" />
<span>{{ !idMoreDataShow ? '查看更多' : '收起' }}</span>
</div>
</div>
@@ -109,7 +109,7 @@
<div class="home-product-content">
<!-- 产品中心 -->
<div class="pcenter-title flex pt10 mr20 mb10 justify-content-s align-items-c">
<img class="title-img" :src="product" />
<img class="title-img" :src="productCenterImgUrl" />
<span class="more fs13 c-gray-base" @click="getMore"><span>查看更多</span><van-icon name="arrow"/></span>
</div>
<div class="home-product-pcenter">
@@ -146,12 +146,23 @@ export default {
isTableDataLoad: false,
performance,
product,
isGoodStart: true,
isGoodStart: true, // 是否开门红
isPersonalInsu: true, // 是否个险渠道
isInner: false,
organizationTheads: ['排名', '机构', '当日预收(标保)', '月预收标保', '日承保标保', '月承保标保'],
performanceTheads: ['排名', '姓名', '营销服务部', '预收规保', '承保标保'],
organizationData: [],
performanceData: []
performanceData: [],
organizationImgUrl: '', // 机构排名图片
organizationKmhImgUrl: this.$assetsUrl + '/images/goodStart/organizationKmh.png', // 机构排名开门红图片
organizationNormalImgUrl: this.$assetsUrl + '/images/goodStart/organizationTitle.png', // 机构排名普通蓝色图片
performanceImgUrl: '', // 业绩排名图片
performanceKmhImgUrl: this.$assetsUrl + '/images/goodStart/performanceKmh.png', // 业绩排名开门红图片
performanceNormalImgUrl: this.$assetsUrl + '/images/goodStart/performanceTitle.png', // 业绩排名普通蓝色图片
productCenterImgUrl: '', // 产品中心图片
productCenterKmhImgUrl: this.$assetsUrl + 'images/goodStart/productKmh.png', // 产品中心开门红图片
productCenterNormalImgUrl: this.$assetsUrl + 'images/goodStart/product.png', // 产品中心普通蓝色图片
personalInsu: ['1','N1','T','S'] // 个险渠道编码
}
},
computed: {
@@ -169,7 +180,7 @@ export default {
CacheUtils.setLocItem('token', arr[1])
}
await this.getAgentInfo()
if (this.isGoodStart) {
if (this.isPersonalInsu) {
await this.getTableData()
}
},
@@ -212,10 +223,13 @@ export default {
async getAgentInfo() {
const result = await getAgentInfo({})
if (result.result === '0') {
// 纯数字为外勤
let reg = /^[0-9]+$/
this.isInner = !reg.test(result.branchType)
this.isGoodStart = result.showTemplateKmh === 'KMH'
// 内外勤判断
this.isInner = /^N{1}/.test(result.branchType) // 判断是否内勤
this.isGoodStart = result.showTemplateKmh === 'KMH' // 判断是否开门红
this.isPersonalInsu = this.personalInsu.indexOf(result.branchType) > -1 // 判断是否个险渠道
this.organizationImgUrl = this.isGoodStart?this.organizationKmhImgUrl:this.organizationNormalImgUrl
this.performanceImgUrl = this.isGoodStart?this.performanceKmhImgUrl:this.performanceNormalImgUrl
this.productCenterImgUrl = this.isGoodStart?this.productCenterKmhImgUrl:this.productCenterNormalImgUrl
} else {
this.$toast(result.resultMessage)
}
@@ -389,6 +403,12 @@ td.sticky-col:nth-of-type(2) {
}
}
.goodStart{
td {
background-color: #FFE4DF
}
}
.performance {
overflow: hidden;
overflow-x: auto;