mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-24 21:52:53 +08:00
359 lines
11 KiB
Vue
359 lines
11 KiB
Vue
<template>
|
||
<div>
|
||
<div class="own_content">
|
||
<ul class="index-bar">
|
||
<li @click="changePage(item.pageNo)" v-for="(item, index) in pageTitle" :key="index" :class="item.tabClass" :id="item.tabClass" v-if="item.show">
|
||
<!-- 选中 -->
|
||
<div v-if="item.tabClass" class="flex justify-content-fs align-items-c">
|
||
<div class="flex flex-direction-colunm align-items-c">
|
||
<van-image :src="item.imgCheckedUrl" class="image_head" />
|
||
<span class="fs12 mt12">{{ item.pageItem }}</span>
|
||
</div>
|
||
<van-image :src="doneUrl" v-if="index !== 10" class="image_done" />
|
||
</div>
|
||
<div v-if="!item.tabClass" class="flex justify-content-fs align-items-c">
|
||
<div class="flex flex-direction-colunm align-items-c">
|
||
<van-image :src="item.imgNoCheckedUrl" class="image_head" />
|
||
<span class="fs12 mt12" style="color: #999999">{{ item.pageItem }}</span>
|
||
</div>
|
||
<van-image :src="doneNurl" v-if="index !== 10" class="image_done" />
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<p v-if="isFrom == 'GBCsale'" style="margin-top: 10px;color: red;background-color: #ffdddc;padding: 5px 10px;">提示：您目前正在投保的项目为【{{projectName}}】</p>
|
||
</div>
|
||
|
||
</template>
|
||
<script>
|
||
import { Icon, Image } from 'vant'
|
||
import { getOrderDetail1 } from '@/api/ebiz/sale/sale'
|
||
import { gbcProjectDetail } from '@/api/GBC/GBC'
|
||
export default {
|
||
name: 'IndexBar',
|
||
props: {
|
||
value: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
required: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
data: {
|
||
type: Array,
|
||
default: () => {}
|
||
},
|
||
//选项对象中，文字对应的 key
|
||
valueKey: {
|
||
type: String,
|
||
default: 'text'
|
||
}
|
||
},
|
||
components: {
|
||
[Icon.name]: Icon,
|
||
[Image.name]: Image
|
||
},
|
||
data() {
|
||
return {
|
||
isFrom:'',
|
||
projectName:'',
|
||
thisShow: false,
|
||
doneUrl: this.$assetsUrl + 'images/kmh/done.png',
|
||
doneNurl: this.$assetsUrl + 'images/kmh/done_n.png',
|
||
pageTitle: [
|
||
{
|
||
pageNo: 1,
|
||
pageItem: '投保人信息',
|
||
urlStr: '/sale/insuredInfo',
|
||
tabClass: '',
|
||
show:true,
|
||
imgCheckedUrl: this.$assetsUrl + 'images/kmh/tbrxx.png',
|
||
imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/tbrxx_n.png'
|
||
},
|
||
{
|
||
pageNo: 2,
|
||
pageItem: '被保险人信息',
|
||
urlStr: '/sale/insuredPerson',
|
||
tabClass: '',
|
||
show:true,
|
||
imgCheckedUrl: this.$assetsUrl + 'images/kmh/bbrxx.png',
|
||
imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/bbrxx_n.png'
|
||
},
|
||
{
|
||
pageNo: 3,
|
||
pageItem: '选择产品',
|
||
urlStr: '/common/selectedProduct',
|
||
tabClass: '',
|
||
show:true,
|
||
imgCheckedUrl: this.$assetsUrl + 'images/kmh/xzcp.png',
|
||
imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/xzcp_n.png'
|
||
},
|
||
{
|
||
pageNo: 4,
|
||
pageItem: '受益人信息',
|
||
urlStr: '/sale/beneficiary',
|
||
tabClass: '',
|
||
show:true,
|
||
imgCheckedUrl: this.$assetsUrl + 'images/kmh/syrxx.png',
|
||
imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/syrxx_n.png'
|
||
},
|
||
{
|
||
pageNo: 5,
|
||
pageItem: '告知信息',
|
||
urlStr: '/sale/notifyingMessage',
|
||
tabClass: '',
|
||
show:true,
|
||
imgCheckedUrl: this.$assetsUrl + 'images/kmh/gzxx.png',
|
||
imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/gzxx_n.png'
|
||
},
|
||
{
|
||
pageNo: 6,
|
||
pageItem: '风险测评',
|
||
urlStr: '/sale/answerPage',
|
||
tabClass: '',
|
||
show:false,
|
||
imgCheckedUrl: this.$assetsUrl + 'images/kmh/fx1.png',
|
||
imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/fx2.png'
|
||
},
|
||
{
|
||
pageNo: 7,
|
||
pageItem: '风险测评结果',
|
||
urlStr: '/sale/answerSuccess',
|
||
tabClass: '',
|
||
show:false,
|
||
imgCheckedUrl: this.$assetsUrl + 'images/kmh/fxjg1.png',
|
||
imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/fxjg2.png'
|
||
},
|
||
{
|
||
pageNo: 7.1,
|
||
pageItem: '风险告知',
|
||
urlStr: '/sale/universalRiskNotifyingMessage',
|
||
tabClass: '',
|
||
show:false,
|
||
imgCheckedUrl: this.$assetsUrl + 'images/kmh/zhxx.png',
|
||
imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/zhxx_n.png'
|
||
},
|
||
{
|
||
pageNo: 8,
|
||
pageItem: '账户信息',
|
||
urlStr: '/sale/accountInformation',
|
||
tabClass: '',
|
||
show:true,
|
||
imgCheckedUrl: this.$assetsUrl + 'images/kmh/zhxx.png',
|
||
imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/zhxx_n.png'
|
||
},
|
||
{
|
||
pageNo: 9,
|
||
pageItem: '附件上传',
|
||
urlStr: '/sale/attachmentManagement',
|
||
tabClass: '',
|
||
show:true,
|
||
imgCheckedUrl: this.$assetsUrl + 'images/kmh/fjsc.png',
|
||
imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/fjsc_n.png'
|
||
},
|
||
{
|
||
pageNo: 10,
|
||
pageItem: '签名确认',
|
||
urlStr: '/sale/signatureConfirmation',
|
||
tabClass: '',
|
||
show:true,
|
||
imgCheckedUrl: this.$assetsUrl + 'images/kmh/qmqr.png',
|
||
imgNoCheckedUrl: this.$assetsUrl + 'images/kmh/qmqr_n.png'
|
||
}
|
||
],
|
||
//localStorage.salePageFlag:控制导航是否可以直接跳转页面 1-投保人信息 2-被保人信息 3-选择产品 4-受益人信息 5-告知信息 6-账户信息 7-附件上传 8-签名确认
|
||
salePageFlag: Number(localStorage.salePageFlag)
|
||
}
|
||
},
|
||
async mounted() {
|
||
let that = this
|
||
let data = {
|
||
orderNo: that.$route.query.orderNo
|
||
}
|
||
getOrderDetail1(data).then(res => {
|
||
if (res.result == '0') {
|
||
if(res.orderDTO.universalRiskNotifyDTO){
|
||
if(res.orderDTO.universalRiskNotifyDTO.isUniversalRiskNotifyShowPoint == 1){
|
||
this.pageTitle.forEach(item=>{
|
||
if(item.pageNo == 7.1){
|
||
item.show = true
|
||
}
|
||
})
|
||
}
|
||
}
|
||
if(res.orderDTO.riskEvaluationDTO){
|
||
if(res.orderDTO.riskEvaluationDTO.isShowEvaluationPoint == 1){
|
||
this.pageTitle.forEach(item=>{
|
||
if(item.pageNo == 6){
|
||
item.show = true
|
||
}
|
||
if(item.pageNo == 7){
|
||
item.show = true
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
this.selectTab()
|
||
if(window.localStorage.getItem('isFrom') == 'GBCsale') {
|
||
this.isFrom = 'GBCsale'
|
||
that.gbcProjectDetail()
|
||
}
|
||
},
|
||
methods: {
|
||
gbcProjectDetail(){
|
||
let params = {
|
||
|
||
}
|
||
gbcProjectDetail(params).then(res=>{
|
||
if(res.result == '0') {
|
||
this.projectName = res.content.projectName
|
||
} else {
|
||
this.$toast(res.resultMessage)
|
||
}
|
||
})
|
||
},
|
||
changePage(pageIndex) {
|
||
let url = ''
|
||
//由 localStorage.salePageFlag 来控制是否可跳到指定页面
|
||
if (localStorage.salePageFlag == '-10' && pageIndex != 10) {
|
||
this.$toast('已到达签名确认流程，不可以回到前面的流程')
|
||
}
|
||
if (Number(localStorage.salePageFlag) < Number(pageIndex)) return
|
||
switch (pageIndex) {
|
||
case 1: //跳到投保人页面
|
||
url = `/sale/insuredInfo?edit=1&salePageFlag=${pageIndex}&orderNo=` + this.$route.query.orderNo
|
||
break
|
||
case 2: //跳到被保人页面
|
||
url = `/sale/insuredPerson?edit=1&salePageFlag=${pageIndex}&orderNo=` + this.$route.query.orderNo
|
||
break
|
||
case 3: //跳到已选产品列表页面
|
||
url = `/common/selectedProduct?edit=1&salePageFlag=${pageIndex}&orderNo=` + this.$route.query.orderNo
|
||
break
|
||
case 4: //跳到受益人信息页面
|
||
url = `/sale/beneficiary?edit=1&salePageFlag=${pageIndex}&orderNo=` + this.$route.query.orderNo
|
||
break
|
||
case 5: //跳到告知信息页面
|
||
url = `/sale/NotifyingMessage?edit=1&salePageFlag=${pageIndex}&orderNo=` + this.$route.query.orderNo
|
||
break
|
||
case 6: //跳到风险评估
|
||
url = `/sale/answerPage?edit=1&salePageFlag=${pageIndex}&orderNo=` + this.$route.query.orderNo
|
||
break
|
||
case 7: //跳到风险评估结果页
|
||
url = `/sale/answerSuccess?edit=1&salePageFlag=${pageIndex}&orderNo=` + this.$route.query.orderNo
|
||
break
|
||
case 7.1: //跳到万能险风险告知页面
|
||
url = `/sale/universalRiskNotifyingMessage?edit=1&salePageFlag=${pageIndex}&orderNo=` + this.$route.query.orderNo
|
||
break
|
||
case 8: //跳到账户信息页面
|
||
url = `/sale/AccountInformation?edit=1&salePageFlag=${pageIndex}&orderNo=` + this.$route.query.orderNo
|
||
break
|
||
case 9: //跳到附件上传页面
|
||
url = `/sale/AttachmentManagement?edit=1&salePageFlag=${pageIndex}&orderNo=` + this.$route.query.orderNo
|
||
break
|
||
case 10: //跳到签名确认页面
|
||
url = `/sale/SignatureConfirmation?edit=1&salePageFlag=${pageIndex}&orderNo=` + this.$route.query.orderNo
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
let str = location.hash
|
||
let i = str.search(/AttachmentManagement/i)
|
||
if (i !== -1 && pageIndex != 9 && pageIndex != 10) {
|
||
this.$dialog
|
||
.confirm({
|
||
className: 'dialog-delete',
|
||
title: '提示',
|
||
message: '离开此页可能会丢失部分数据，是否确认离开？',
|
||
cancelButtonColor: '#E9332E',
|
||
confirmButtonColor: '#FFFFFF'
|
||
})
|
||
.then(() => {
|
||
this.$jump({
|
||
flag: 'h5',
|
||
extra: {
|
||
forbidSwipeBack: '1',
|
||
url: location.origin + `/#${url}`
|
||
},
|
||
routerInfo: { path: url }
|
||
})
|
||
})
|
||
.catch(() => {
|
||
return
|
||
})
|
||
} else {
|
||
this.$jump({
|
||
flag: 'h5',
|
||
extra: {
|
||
forbidSwipeBack: '1',
|
||
url: location.origin + `/#${url}`
|
||
},
|
||
routerInfo: { path: url }
|
||
})
|
||
}
|
||
},
|
||
selectTab() {
|
||
let endIndex = location.hash.indexOf('?', 1)
|
||
let str = endIndex == -1 ? location.hash.slice(1) : location.hash.slice(1, endIndex)
|
||
this.pageTitle.forEach(v => {
|
||
if (v.urlStr.toLowerCase() == str.toLowerCase()) {
|
||
v.tabClass = 'active'
|
||
}
|
||
})
|
||
this.$nextTick(() => {
|
||
this.$el.querySelector('#active').scrollIntoView(true)
|
||
})
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.index-bar {
|
||
display: flex;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
white-space: nowrap;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.index-bar li {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.index-bar::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
li {
|
||
display: flex;
|
||
}
|
||
.index-bar span,
|
||
.index-bar van-icon {
|
||
align-items: center;
|
||
}
|
||
.active {
|
||
color: #e9332e;
|
||
}
|
||
.activeline {
|
||
background: #e9332e;
|
||
}
|
||
.image_head {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
.image_done {
|
||
width: 8px;
|
||
height: 14px;
|
||
padding-left: 20px;
|
||
padding-right: 20px;
|
||
}
|
||
.own_content {
|
||
padding-top: 19px;
|
||
padding-bottom: 15px;
|
||
margin-left: 10px;
|
||
margin-right: 10px;
|
||
}
|
||
</style>
|