mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-10 02:16:44 +08:00
503 lines
17 KiB
Vue
503 lines
17 KiB
Vue
<template>
|
|
<div ref="product" class="home-product-container pb20">
|
|
<!-- 非个险 -->
|
|
<template v-if="!isPersonalInsu">
|
|
<div class="home-product-content" v-if="branchType != '12' && branchType != '14'">
|
|
<!-- 产品中心 -->
|
|
<div class="pcenter-title flex pt10 mr20 mb10 ml15 justify-content-s align-items-c" style="height: 30px;">
|
|
<h3 class="center-title fs15 pl10" style="border-left: 4px solid red;">知识社区</h3>
|
|
<span class="more fs13 c-gray-base" @click="checkZssqMore"><span>查看更多</span><van-icon name="arrow"/></span>
|
|
</div>
|
|
<div class="home-product-pcenter">
|
|
<div class="pcenter-list">
|
|
<div class="pcenter-title flex mt4 mb10 mr15 ml10 justify-content-s">
|
|
<div class="zssq zssq_1" @click="checkZssq">
|
|
<p class="zssq_p1">人到中年</p>
|
|
<p class="zssq_p2">是时候给自己填份保障了</p>
|
|
</div>
|
|
<div class="zssq zssq_2" @click="checkZssq">
|
|
<p class="zssq_p1">加班劳累</p>
|
|
<p class="zssq_p2">是时候给自己填份保障了</p>
|
|
</div>
|
|
</div>
|
|
<div class="pcenter-title flex mt4 mr15 mb10 ml10 justify-content-s">
|
|
<div class="zssq zssq_3" @click="checkZssq">
|
|
<p class="zssq_p1">年金保障</p>
|
|
<p class="zssq_p2">是时候给自己填份保障了</p>
|
|
</div>
|
|
<div class="zssq zssq_4" @click="checkZssq">
|
|
<p class="zssq_p1">高危工种</p>
|
|
<p class="zssq_p2">是时候给自己填份保障了</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="height: 10px;width: 100%;background-color: #f5f5f5;" />
|
|
<div class="home-product-content" v-if="branchType != '14'">
|
|
<!-- 产品中心 -->
|
|
<div class="pcenter-title flex pt10 mr20 mb10 justify-content-s align-items-c">
|
|
<h3 class="center-title fs15 pl10 ml15" style="border-left: 4px solid red;">产品中心</h3>
|
|
<span class="more fs13 c-gray-base" @click="getMore"><span>查看更多</span><van-icon name="arrow"/></span>
|
|
</div>
|
|
<div class="home-product-pcenter">
|
|
<div class="pcenter-list mr20 mb10 ml15">
|
|
<template v-if="branchType != '6'">
|
|
<div class="pcenter-item text-center">
|
|
<img src="../../../assets/images/home_product_center_m0092.png" style="width: 100%;" @click="goDetail('GFRSPRO_M0095')" />
|
|
</div>
|
|
<div class="pcenter-item text-center">
|
|
<img src="../../../assets/images/home_product_center_m0094.png" style="width: 100%;" @click="goDetail('GFRSPRO_M0094')" />
|
|
</div>
|
|
</template>
|
|
<template v-else-if="branchType == '6'">
|
|
<div class="pcenter-item text-center">
|
|
<img src="../../../assets/images/home_cp_3.png" style="width: 100%;" @click="goDetail('GFRSPRO_M0036')" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<!-- 个险 -->
|
|
<template v-if="isPersonalInsu">
|
|
<div class="home-product-content" v-if="branchType != '12'">
|
|
<!-- 机构排名/业绩排名 -->
|
|
<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="organizationImgUrl" />
|
|
<img v-else class="title-img" :src="performanceImgUrl" />
|
|
</div>
|
|
<div class="home-product-pcenter performance">
|
|
<div class="pcenter-list">
|
|
<table class="myTable" cellspacing="0" cellpadding="0">
|
|
<tr>
|
|
<th v-for="(thead, index) in theads" :class="{ 'sticky-col': index <= 1 }" :key="index" :style="{ backgroundColor: isGoodStart =='0' ? '#fff':isGoodStart =='1' ? '#FF4A28' : '#4473ee' }">{{ thead }}</th>
|
|
</tr>
|
|
<template v-if="isInner">
|
|
<tr v-for="(org, i) in organizationData" :key="i" :class="{ hidden: i >= 5 && !idMoreDataShow,'goodStartWhite':isGoodStart == '0','goodStart':isGoodStart == '1','goodStartBlue':isGoodStart == '2' }">
|
|
<td class="sticky-col">{{ i == 0 ? '-' : i + '' }}</td>
|
|
<td class="org-name sticky-col">{{ org.name | blankFilter }}</td>
|
|
<td>{{ org.ysbfDay | blankFilter }}</td>
|
|
<td>{{ org.ysbfMon | blankFilter }}</td>
|
|
<td>{{ org.cbbfDay | blankFilter }}</td>
|
|
<td>{{ org.cbbfMon | blankFilter }}</td>
|
|
</tr>
|
|
<tr v-if="organizationData.length === 0">
|
|
<td :colspan="theads.length" style="text-align: left; padding-left: 28%;">
|
|
<span v-if="isTableDataLoad">暂无数据</span>
|
|
<van-loading v-if="!isTableDataLoad" type="spinner" />
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<template v-else>
|
|
<tr v-for="(org, i) in performanceData" :key="i" :class="{ hidden: i >= 5 && !idMoreDataShow,'goodStartWhite':isGoodStart == '0','goodStart':isGoodStart == '1','goodStartBlue':isGoodStart == '2' }">
|
|
<td class="sticky-col">{{ org.rank | blankFilter }}</td>
|
|
<td class="sticky-col">{{ org.name | blankFilter }}</td>
|
|
<td class="org-name">{{ org.comName | blankFilter }}</td>
|
|
<td>{{ org.ysbb | blankFilter }}</td>
|
|
<td>{{ org.bzbf | blankFilter }}</td>
|
|
</tr>
|
|
<tr v-if="performanceData.length === 0">
|
|
<td :colspan="theads.length" style="text-align: left; padding-left: 28%;">
|
|
<span v-if="isTableDataLoad">暂无数据</span>
|
|
<van-loading v-if="!isTableDataLoad" type="spinner" />
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="ml15 mr15 mb10 mt10 more-text" @click="showMore">
|
|
<van-icon :class="{ arrowUp: idMoreDataShow }" :style="{color : isGoodStart =='0' ? '#fff':isGoodStart =='1' ? '#E13929' : '#7C9DF3' }" name="play" />
|
|
<span>{{ !idMoreDataShow ? '查看更多' : '收起' }}</span>
|
|
</div>
|
|
</div>
|
|
<div style="height: 10px;width: 100%;background-color: #f5f5f5;" />
|
|
<div class="home-product-content" v-if="branchType != '14'">
|
|
<!-- 银保渠道不显示 产品中心 -->
|
|
<div class="pcenter-title flex pt10 mr20 mb10 justify-content-s align-items-c">
|
|
<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">
|
|
<div class="pcenter-list mr20 mb10 ml15">
|
|
<div class="pcenter-item text-center">
|
|
<img src="../../../assets/images/home_product_center_m0105.png" style="width: 100%;" @click="goDetail('GFRSPRO_M0105')" />
|
|
</div>
|
|
<div class="pcenter-item text-center">
|
|
<img src="../../../assets/images/home_product_center_m0109.png" style="width: 100%;" @click="goDetail('GFRSPRO_M0109')" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template>
|
|
<!-- 后台配置图 -->
|
|
<div class="home-product-content pt20" v-if="branchType == '14'">
|
|
<div class="pcenter-list mr20 mb10 ml15">
|
|
<div class="pcenter-item text-center">
|
|
<img src="../../../assets/images/home-companyProfile.png" style="width: 100%" alt=""/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Loading } from 'vant'
|
|
import performance from '@/assets/images/goodStart/performanceIcon.png'
|
|
import product from '@/assets/images/goodStart/product.png'
|
|
import { getAgentInfo } from '@/api/ebiz/my/my'
|
|
import { getCongratulationList } from '@/api/ebiz/congratulation/congratulation.js'
|
|
import { getHomeBottomPic } from '@/api/ebiz/product/product.js'
|
|
import dateUtil from '@/assets/js/utils/date-utils.js'
|
|
// import { orgShortNames } from '@/assets/js/utils/orgShortName'
|
|
import CacheUtils from '@/assets/js/utils/cacheUtils'
|
|
export default {
|
|
components: {
|
|
[Loading.name]: Loading
|
|
},
|
|
data() {
|
|
return {
|
|
branchType:'',
|
|
idMoreDataShow: false,
|
|
isTableDataLoad: false,
|
|
performance,
|
|
product,
|
|
isGoodStart: '0', // 是否开门红 0-默认
|
|
isPersonalInsu: true, // 是否个险渠道
|
|
isInner: false,
|
|
organizationTheads: ['排名', '机构', '当日预收(保费)', '月预收保费', '日承保保费', '月承保保费'],
|
|
performanceTheads: ['排名', '姓名', '营销服务部', '预收期交', '承保期交'],
|
|
organizationData: [],
|
|
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','N2','N3','N5','T','S','JZG'], // 个险渠道编码及其他展示个险渠道类型的渠道编码
|
|
homeBottomPicUrl: null
|
|
}
|
|
},
|
|
computed: {
|
|
theads() {
|
|
if (this.isInner) {
|
|
return this.organizationTheads
|
|
} else {
|
|
return this.performanceTheads
|
|
}
|
|
}
|
|
},
|
|
async created() {
|
|
let arr = window.location.href.split('?token=')
|
|
if (!!arr && arr.length > 1) {
|
|
CacheUtils.setLocItem('token', arr[1])
|
|
}
|
|
await this.getAgentInfo()
|
|
if (this.isPersonalInsu) {
|
|
await this.getTableData()
|
|
}
|
|
},
|
|
methods: {
|
|
async getHomeBottomImg() {
|
|
const result = await getHomeBottomPic({ operateType: 'nonRealYB' })
|
|
if (result.result === '0' && result.content && result.content.length > 0) {
|
|
const timestamp = new Date().getTime()
|
|
const originalUrl = result.content[0].picUrl
|
|
this.homeBottomPicUrl = originalUrl.includes('?')
|
|
? `${originalUrl}&t=${timestamp}`
|
|
: `${originalUrl}?t=${timestamp}`
|
|
}
|
|
},
|
|
async getTableData() {
|
|
let currMonth = dateUtil.formatDate(new Date(), 'yyyy-MM-dd')
|
|
let data = await getCongratulationList({ date: currMonth, queryType: 'm', type: 'kmh' })
|
|
if (this.isInner) {
|
|
this.organizationData = data.content
|
|
// for (let org of this.organizationData) {
|
|
// for (let shortName of orgShortNames) {
|
|
// if (org.code === shortName.code) {
|
|
// org.name = shortName.name
|
|
// }
|
|
// }
|
|
// }
|
|
} else {
|
|
this.performanceData = data.content.list
|
|
// for (let org of this.performanceData) {
|
|
// for (let shortName of orgShortNames) {
|
|
// if (org.comCode === shortName.code) {
|
|
// org.comName = shortName.name
|
|
// }
|
|
// }
|
|
// }
|
|
}
|
|
this.$nextTick(() => {
|
|
this.isTableDataLoad = true
|
|
const width = this.$refs.product.offsetWidth
|
|
const height = this.$refs.product.offsetHeight
|
|
console.log('after width: ', width)
|
|
console.log('after height: ', height)
|
|
window.EWebBridge.webCallAppInJs('updateWebHeight', {
|
|
width,
|
|
height,
|
|
isLoadMore: this.idMoreDataShow
|
|
})
|
|
})
|
|
},
|
|
async getAgentInfo() {
|
|
const result = await getAgentInfo({})
|
|
if (result.result === '0') {
|
|
// 内外勤判断
|
|
this.isInner = /^N{1}/.test(result.branchType) || /^S/.test(result.branchType) || /^T/.test(result.branchType) || /^JZG/.test(result.branchType) // 判断是否内勤
|
|
this.branchType = result.branchType //6 网销渠道
|
|
this.isGoodStart = result.showTemplateKmh === 'KMH' ? '1' : '2' // 判断是否开门红 1-开门红 2-否
|
|
this.isPersonalInsu = this.personalInsu.indexOf(result.branchType) > -1 // 判断是否个险渠道
|
|
this.organizationImgUrl = this.isGoodStart == '1' ? this.organizationKmhImgUrl : this.organizationNormalImgUrl
|
|
this.performanceImgUrl = this.isGoodStart == '1' ? this.performanceKmhImgUrl : this.performanceNormalImgUrl
|
|
this.productCenterImgUrl = this.isGoodStart == '1' ? this.productCenterKmhImgUrl : this.productCenterNormalImgUrl
|
|
if (this.branchType == '14') {
|
|
// this.getHomeBottomImg()
|
|
}
|
|
} else {
|
|
this.$toast(result.resultMessage)
|
|
}
|
|
},
|
|
showMore() {
|
|
this.idMoreDataShow = !this.idMoreDataShow
|
|
this.$nextTick(() => {
|
|
const width = this.$refs.product.offsetWidth
|
|
const height = this.$refs.product.offsetHeight
|
|
console.log('after width: ', width)
|
|
console.log('after height: ', height)
|
|
window.EWebBridge.webCallAppInJs('updateWebHeight', {
|
|
width,
|
|
height,
|
|
isLoadMore: this.idMoreDataShow
|
|
})
|
|
})
|
|
},
|
|
//查看更多
|
|
getMore() {
|
|
this.$jump({
|
|
flag: 'h5',
|
|
extra: {
|
|
url: location.origin + '/#/product/productList'
|
|
},
|
|
routerInfo: {
|
|
path: '/product/productList'
|
|
}
|
|
})
|
|
},
|
|
//查看详情
|
|
goDetail(code) {
|
|
//将产品 code 存起来
|
|
localStorage.productDetailCode = code
|
|
this.$jump({
|
|
flag: 'h5',
|
|
extra: {
|
|
url: location.origin + `/#/product/productDetail/${code}`
|
|
},
|
|
routerInfo: {
|
|
path: `/product/productDetail/${code}`
|
|
}
|
|
})
|
|
},
|
|
checkZssq() {
|
|
// eslint-disable-next-line no-undef
|
|
EWebBridge.webCallAppInJs('bridge', {
|
|
flag: 'webview_toast',
|
|
extra: { content: '功能开发中，敬请期待' }
|
|
})
|
|
},
|
|
checkZssqMore() {
|
|
let that = this
|
|
let zssqUrl = that.$zssqUrl
|
|
if (zssqUrl == '') {
|
|
// eslint-disable-next-line no-undef
|
|
EWebBridge.webCallAppInJs('bridge', {
|
|
flag: 'webview_toast',
|
|
extra: { content: '功能开发中，敬请期待' }
|
|
})
|
|
} else {
|
|
this.$jump({
|
|
flag: 'h5',
|
|
extra: {
|
|
// title: '知识社区',
|
|
url: zssqUrl
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
filters: {
|
|
blankFilter(val) {
|
|
if (val) {
|
|
return val
|
|
} else {
|
|
return '-'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.sticky-col {
|
|
text-align: center;
|
|
}
|
|
|
|
th.sticky-col:nth-of-type(1),
|
|
td.sticky-col:nth-of-type(1) {
|
|
width: 40px;
|
|
position: sticky;
|
|
left: 0;
|
|
}
|
|
|
|
/*th.sticky-col:nth-of-type(2),
|
|
td.sticky-col:nth-of-type(2) {
|
|
position: sticky;
|
|
left: 50px;
|
|
}*/
|
|
|
|
.home-product-container {
|
|
background-color: #ffffff;
|
|
.home-product-selected-item {
|
|
box-sizing: border-box;
|
|
box-shadow: 0 4px 10px 0px rgba(90, 125, 189, 0.13);
|
|
img {
|
|
width: 50px;
|
|
height: 60px;
|
|
}
|
|
}
|
|
}
|
|
.zssq {
|
|
width: 48%;
|
|
height: 40px;
|
|
padding: 8px 0px 8px 0;
|
|
}
|
|
.zssq_p1 {
|
|
padding-left: 16px;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
}
|
|
.zssq_p2 {
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
transform: scale(0.8);
|
|
}
|
|
.zssq_1 {
|
|
background: url(../../../assets/images/zssq_1.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #c26b58;
|
|
}
|
|
.zssq_2 {
|
|
background: url(../../../assets/images/zssq_2.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #4f74a6;
|
|
}
|
|
.zssq_3 {
|
|
background: url(../../../assets/images/zssq_3.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #be8054;
|
|
}
|
|
.zssq_4 {
|
|
background: url(../../../assets/images/zssq_4.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #4fa1a6;
|
|
}
|
|
.myTable {
|
|
text-align: center;
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
td,
|
|
th {
|
|
padding: 10px 2px;
|
|
background-color: #fff;
|
|
color: #2e323d;
|
|
font-size: 14px;
|
|
}
|
|
th {
|
|
border: none;
|
|
background: #4473ee;
|
|
font-weight: normal;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
}
|
|
tr {
|
|
border-top: 2px solid #ffffff;
|
|
}
|
|
tr:first-child {
|
|
border-bottom: 6px solid #ffffff;
|
|
}
|
|
}
|
|
|
|
.goodStart{
|
|
td {
|
|
background-color: #FFE4DF
|
|
}
|
|
}
|
|
.goodStartBlue{
|
|
td {
|
|
background-color: #e6edff
|
|
}
|
|
}
|
|
.goodStartWhite{
|
|
td {
|
|
background-color: #fff
|
|
}
|
|
}
|
|
|
|
.performance {
|
|
overflow: hidden;
|
|
overflow-x: auto;
|
|
margin: 0 15px;
|
|
}
|
|
|
|
.performance::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 8px;
|
|
}
|
|
|
|
.performance::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background-color: #dadada;
|
|
}
|
|
|
|
.performance::-webkit-scrollbar-track {
|
|
box-shadow: 0 0 1px inset #dddddd;
|
|
}
|
|
|
|
.title-img {
|
|
height: 40px;
|
|
}
|
|
|
|
.more-text {
|
|
color: #666666;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.van-icon {
|
|
transform: rotate(90deg);
|
|
}
|
|
.arrowUp {
|
|
transform: rotate(270deg);
|
|
}
|
|
}
|
|
|
|
span,
|
|
i {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.org-name {
|
|
width: 5em;
|
|
}
|
|
</style>
|