mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-22 22:16:44 +08:00
Merge branch 'feature/GFRS-453【】贺报功能' into release/0911上线测试(贺报,续期)
# Conflicts: # src/router/ebiz/index.js # src/views/app/Home.vue
This commit is contained in:
10
src/api/ebiz/congratulation/congratulation.js
Normal file
10
src/api/ebiz/congratulation/congratulation.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import request from '@/assets/js/utils/request'
|
||||
import getUrl from '@/assets/js/utils/get-url'
|
||||
|
||||
export function getCongratulationList(data) {
|
||||
return request({
|
||||
url: getUrl('/data/performance/getAgentTop', 1),
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
34
src/router/ebiz/congratulation.js
Normal file
34
src/router/ebiz/congratulation.js
Normal file
@@ -0,0 +1,34 @@
|
||||
//保全 定义相关组件
|
||||
const congratulationTop = () => import('@/views/ebiz/congratulation/CongratulationTop')
|
||||
const congratulationList = () => import('@/views/ebiz/congratulation/CongratulationList')
|
||||
const congratulationPreview = () => import('@/views/ebiz/congratulation/CongratulationPreview')
|
||||
|
||||
export default [
|
||||
{
|
||||
path: '/congratulation/congratulationTop',
|
||||
name: 'congratulationTop',
|
||||
component: congratulationTop,
|
||||
meta: {
|
||||
title: '上头条',
|
||||
index: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/congratulation/congratulationList',
|
||||
name: 'congratulationList',
|
||||
component: congratulationList,
|
||||
meta: {
|
||||
title: '大单榜',
|
||||
index: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/congratulation/congratulationPreview',
|
||||
name: 'congratulationPreview',
|
||||
component: congratulationPreview,
|
||||
meta: {
|
||||
title: '大单榜',
|
||||
index: 3
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -9,6 +9,7 @@ import product from './product'
|
||||
import agentEenter from './agentEenter.js'
|
||||
import milestone from './milestone'
|
||||
import poster from './poster'
|
||||
import congratulation from './congratulation'
|
||||
import report from './report'
|
||||
import survey from './survey'
|
||||
import nbs from './nbs'
|
||||
@@ -43,5 +44,6 @@ export default [
|
||||
...claims,
|
||||
...productStore,
|
||||
...performance,
|
||||
...attendance
|
||||
...attendance,
|
||||
...congratulation
|
||||
] //根据需要进行删减
|
||||
|
||||
141
src/views/ebiz/congratulation/CongratulationList.vue
Normal file
141
src/views/ebiz/congratulation/CongratulationList.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div v-if="posterList.length !== 0">
|
||||
<van-grid :column-num="3" :gutter="5">
|
||||
<van-grid-item v-for="(item, index) in posterList" :key="index" @click="previewImg(index)">
|
||||
<van-image class="fill" :src="item.narrowUrl" />
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
<div class="pageWrapper">
|
||||
<van-pagination class="bottom-btn" v-model="pageNum" :page-count="totalPage" @change="pageChange" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="posterList.length === 0" class="text-center">
|
||||
<img class="mt40 w250" src="@/assets/images/pic_page-non.png" />
|
||||
<div class="fs17 c-gray-dark mt40">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Sticky, Grid, GridItem, Pagination, ImagePreview, List, Image } from 'vant'
|
||||
import { getPosterList } from '@/api/ebiz/poster/poster'
|
||||
import config from '@/config'
|
||||
export default {
|
||||
name: 'posterList',
|
||||
components: {
|
||||
[Sticky.name]: Sticky,
|
||||
[Grid.name]: Grid,
|
||||
[GridItem.name]: GridItem,
|
||||
[Pagination.name]: Pagination,
|
||||
[List.name]: List,
|
||||
[Image.name]: Image
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
posterType: 'hb',
|
||||
srcUrl: '@/images/u10199.png',
|
||||
pageNum: 1,
|
||||
pageSize: 9,
|
||||
posterList: [], // 贺报列表
|
||||
realImgUrls: [],
|
||||
index: 0,
|
||||
totalPage: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getPostList()
|
||||
},
|
||||
methods: {
|
||||
onChange(index) {
|
||||
this.index = index
|
||||
},
|
||||
// 贺报列表查询
|
||||
async getPostList() {
|
||||
let param = {
|
||||
posterInfoDTO: {
|
||||
posterType: this.posterType
|
||||
},
|
||||
pageNum: this.pageNum,
|
||||
pageSize: this.pageSize
|
||||
}
|
||||
this.$toast.loading({
|
||||
message: '加载中...',
|
||||
forbidClick: true,
|
||||
loadingType: 'spinner'
|
||||
})
|
||||
let res = await getPosterList(param)
|
||||
if (res.result == 0) {
|
||||
this.realImgUrls.splice(0)
|
||||
this.totalPage = res.pageInfo.pages
|
||||
this.posterList = res.pageInfo.list
|
||||
for (let item of this.posterList) {
|
||||
let narrowUrl = (config.imgDomain + `/returnImageStream?a=b.jpg&imgPath=${item.posterNarrowUrl}`).replace(/\+/g, '%2B')
|
||||
let url = (config.imgDomain + `/returnImageStream?a=b.jpg&imgPath=${item.posterUrl}`).replace(/\+/g, '%2B')
|
||||
item.narrowUrl = narrowUrl
|
||||
this.realImgUrls.push(url)
|
||||
}
|
||||
} else {
|
||||
this.$toast(res.resultMessage)
|
||||
}
|
||||
},
|
||||
previewImg(index) {
|
||||
ImagePreview({
|
||||
images: this.realImgUrls,
|
||||
startPosition: index
|
||||
})
|
||||
},
|
||||
pageChange(pageNum) {
|
||||
this.pageNum = pageNum
|
||||
this.getPostList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .van-grid-item {
|
||||
height: 30vh;
|
||||
}
|
||||
|
||||
/deep/ .fill {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding-top: 12px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.post-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.post {
|
||||
width: 28vw;
|
||||
padding: 3px;
|
||||
background: #fff;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/deep/ .van-list__loading,
|
||||
/deep/ .van-list__finished-text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/deep/ .van-pagination__item {
|
||||
color: #ff4040;
|
||||
}
|
||||
|
||||
/deep/.van-pagination__item:active,
|
||||
/deep/.van-pagination__item--active {
|
||||
background-color: #ff4040;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
73
src/views/ebiz/congratulation/CongratulationPreview.vue
Normal file
73
src/views/ebiz/congratulation/CongratulationPreview.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div class="poster-preview-container">
|
||||
<div class="flex align-items-c justify-content-c top30 relative">
|
||||
<img class="w300" :src="imgPath | urlFormat" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPosterInfo } from '@/api/ebiz/poster/poster'
|
||||
// import { getAgentInfo } from '@/api/ebiz/my/my'
|
||||
import config from '@/config'
|
||||
export default {
|
||||
name: 'congratulationPreview',
|
||||
data() {
|
||||
let isWeixin = this.$utils.device().isWeixin //判断环境
|
||||
return {
|
||||
srcUrl: '',
|
||||
isWeixin,
|
||||
id: '',
|
||||
posterType: 'congratulation',
|
||||
posterInfo: {},
|
||||
userName: '', // 代理人姓名
|
||||
userMobile: '', // 用户手机号
|
||||
manageComName: '', // 公司名称
|
||||
imgUrl: '', // 分享的图片
|
||||
base64: '', // 分享的base64
|
||||
imgPath: '',
|
||||
isShow: false
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
debugger
|
||||
this.id = this.$route.query.id
|
||||
if (this.isWeixin) {
|
||||
localStorage.token = this.$route.query.token
|
||||
}
|
||||
// await this.getPosterDetail()
|
||||
},
|
||||
methods: {
|
||||
async getPosterDetail() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$toast.loading({
|
||||
duration: 0, // 持续展示 toast
|
||||
forbidClick: true, // 禁用背景点击
|
||||
loadingType: 'spinner',
|
||||
message: '加载中……'
|
||||
})
|
||||
getPosterInfo({
|
||||
posterInfoDTO: {
|
||||
posterId: this.id
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.result == 0) {
|
||||
this.posterInfo = res.infoDTOList[0]
|
||||
this.imgPath = this.posterInfo.posterUrl
|
||||
resolve()
|
||||
} else {
|
||||
reject()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
urlFormat(url) {
|
||||
return (config.imgDomain + `/returnImageStream?a=b.jpg&imgPath=${url}`).replace(/\+/g, '%2B')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
210
src/views/ebiz/congratulation/CongratulationTop.vue
Normal file
210
src/views/ebiz/congratulation/CongratulationTop.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<!-- 上头条 -->
|
||||
<template>
|
||||
<div style="min-height: 100vh;" class="bg-white">
|
||||
<div class="congratulationTop text-center bg-white" v-show="showData.topList.length !== 0">
|
||||
<van-row><van-col class="congratulationTitle" span="24">全国TOP30本月业绩排名</van-col></van-row>
|
||||
<div class="rankWrapper">
|
||||
<van-row class="rankTitle">
|
||||
<van-col span="3">排名</van-col>
|
||||
<van-col span="4">姓名</van-col>
|
||||
<van-col span="7">分公司</van-col>
|
||||
<van-col span="5">预收规保</van-col>
|
||||
<van-col span="5">承保标保</van-col>
|
||||
</van-row>
|
||||
<template>
|
||||
<van-row v-for="(item, index) in showData.topList" :key="item.code" class="rankLine" :class="{ top3: index <= 2 }">
|
||||
<van-col class="rankCell bl" span="3">{{ index + 1 }}</van-col>
|
||||
<van-col class="rankCell" span="4">{{ item.name }}</van-col>
|
||||
<van-col class="rankCell" span="7">{{ item.comName }}</van-col>
|
||||
<van-col class="rankCell" span="5">{{ item.ysbb }}</van-col>
|
||||
<van-col class="rankCell" span="5">{{ item.bzbf }}</van-col>
|
||||
</van-row>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="deadline">
|
||||
<span>数据截止时间:{{ deadline }}</span>
|
||||
<span>单位:万元</span>
|
||||
</div>
|
||||
<van-row>
|
||||
<van-col span="24" class="detail score">您的业绩</van-col>
|
||||
<van-col span="20" offset="2" style="border-bottom: 1px solid #ff4040;"></van-col>
|
||||
<van-col span="24" class="detail">您本月预收规保{{ showData.achievement.selfAdvanceStand }}万元</van-col>
|
||||
<van-col span="24" class="detail">您本月承保标保{{ showData.achievement.selfAcceptStand }}万元</van-col>
|
||||
<van-col span="24" class="detail">预收规保全系统排名第{{ showData.achievement.ranking }}名</van-col>
|
||||
<van-col span="24" class="detail">距上一名差距{{ showData.achievement.previousGap }}元</van-col>
|
||||
<van-col span="24" class="detail">承保标保排名第{{ showData.achievement.rankingBb }}名</van-col>
|
||||
<van-col span="24" class="detail">距上一名承保标保差距{{ showData.achievement.previousCbbbGap }}元</van-col>
|
||||
</van-row>
|
||||
<van-button color="#ff4d4d" class="bottom-btn" @click="nextStep" v-no-more-click="1000">大单榜</van-button>
|
||||
</div>
|
||||
<div v-if="showData.topList.length === 0" class="text-center">
|
||||
<img class="mt40 w250" src="@/assets/images/pic_page-non.png" />
|
||||
<div class="fs17 c-gray-dark mt40">暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Col, Row, Loading } from 'vant'
|
||||
import { getCongratulationList } from '@/api/ebiz/congratulation/congratulation.js'
|
||||
import dateUtil from '@/assets/js/utils/date-utils.js'
|
||||
|
||||
export default {
|
||||
name: 'congratulationTop',
|
||||
filters: {},
|
||||
data() {
|
||||
return {
|
||||
showData: {
|
||||
achievement: {
|
||||
selfAdvanceStand: '',
|
||||
selfAcceptStand: '',
|
||||
ranking: '',
|
||||
rankingBb: '',
|
||||
previousGap: '',
|
||||
previousCbbbGap: ''
|
||||
},
|
||||
topList: []
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
deadline() {
|
||||
let now = new Date()
|
||||
let deadlineTime = now.getTime() - 1000 * 3600
|
||||
return dateUtil.formatDate(new Date(deadlineTime), 'yyyy-MM-dd HH:mm:ss')
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$toast.loading({
|
||||
message: '加载中...',
|
||||
duration: 0,
|
||||
forbidClick: true,
|
||||
loadingType: 'spinner'
|
||||
})
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
let currMonth = dateUtil.formatDate(new Date(), 'yyyy-MM-dd')
|
||||
let data = await getCongratulationList({ date: currMonth, queryType: 'm' })
|
||||
let result = data.content
|
||||
let topList = result.list.splice(0, 30)
|
||||
topList.map(value => {
|
||||
value.comName = value.comName.substr(12)
|
||||
return value
|
||||
})
|
||||
this.showData.topList.push(...topList)
|
||||
this.showData.achievement.selfAdvanceStand = result.ysbb
|
||||
this.showData.achievement.selfAcceptStand = result.bzbf
|
||||
this.showData.achievement.ranking = result.top
|
||||
this.showData.achievement.previousGap = result.xcbf
|
||||
this.showData.achievement.rankingBb = result.topBB
|
||||
// 后端精度处理有问题, 让前端先直接截取处理
|
||||
if (result.xccbbb.includes('.')) {
|
||||
let nums = result.xccbbb.split('.')
|
||||
this.showData.achievement.previousCbbbGap = `${nums[0]}.${nums[1].substring(0, 2)}`
|
||||
} else {
|
||||
this.showData.achievement.previousCbbbGap = result.xccbbb
|
||||
}
|
||||
this.$toast.clear()
|
||||
},
|
||||
nextStep() {
|
||||
this.$jump({
|
||||
flag: 'h5',
|
||||
extra: {
|
||||
url: location.origin + `/#/congratulation/congratulationList`,
|
||||
forbidSwipeBack: '1'
|
||||
},
|
||||
routerInfo: {
|
||||
path: `/congratulation/congratulationList`
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
components: {
|
||||
[Col.name]: Col,
|
||||
[Row.name]: Row,
|
||||
[Loading.name]: Loading
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="scoped" lang="scss">
|
||||
$border: 1px solid #ff4040;
|
||||
|
||||
.congratulationTop {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.congratulationTitle {
|
||||
height: 60px;
|
||||
font-size: 30px;
|
||||
text-shadow: 1px 1px 5px #333;
|
||||
}
|
||||
|
||||
.rankTitle {
|
||||
font-size: 14px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.rankTitle,
|
||||
.congratulationTitle {
|
||||
background-color: #ff4040;
|
||||
color: #ffffff;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.rankLine {
|
||||
font-size: 14px;
|
||||
line-height: 2em;
|
||||
border-top: $border;
|
||||
}
|
||||
|
||||
.rankWrapper {
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
margin-top: 3px;
|
||||
border-bottom: $border;
|
||||
}
|
||||
|
||||
.rankTable {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.rankCell {
|
||||
border-right: $border;
|
||||
}
|
||||
|
||||
.deadline {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.detail {
|
||||
color: #ff4040;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.score {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.bl {
|
||||
border-left: $border;
|
||||
}
|
||||
|
||||
.top3 {
|
||||
color: #ff9900;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user