hz/ebiz-h5
1
0
Fork 0
mirror of http://112.124.100.131/GFRS/ebiz-h5.git synced 2025-12-10 01:06:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

数据看板页面以及产品列表页面和编辑客户信息页面基础代码编写

Browse Source
This commit is contained in:
liu.xiaofeng@ebiz-digits.com
2024-01-03 15:16:11 +08:00
parent c83787b3a4
commit b87be77ec3
3 changed files with 134 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
src/views/GBC/ProductDetail.vue
View File

@@ -1,213 +0,0 @@
<template>
<div class="product-detail-container">
<!-- tab 栏 -->
<van-sticky>
<van-tabs v-model="active" color="#E9332EFF" title-active-color="#E9332EFF" class="">
<van-tab title="产品特色" class="mt10"> </van-tab>
<van-tab title="产品资料" class="mt10"> </van-tab>
</van-tabs>
</van-sticky>
<div v-show="active == '0'" class="pt10 pb45 clearfix">
<img class="product-detail-introduct-image fl" :src="item" alt="" v-for="(item, index) in introductImages" :key="index" />
</div>
<van-list v-show="active == '1'">
<van-cell
class="product-detail-list-item p10 fs12 fw400 bg-white"
:title="item.name"
is-link
v-for="(item, index) in docuList"
:key="index"
@click="goDocu(item.url, item.type, item.name)"
/>
</van-list>
<!-- 底部按钮 -->
<div class="bottom-area bottom-btn" v-if="branchType != 3">
<van-button class="m-btn fl green" color="#FEEFD8" @click="goProposal">制作建议书</van-button>
<van-button class="m-btn fr" type="danger" @click="goInsure">立即投保</van-button>
</div>
</div>
</template>
<script>
import { Tab, Tabs, List, Row, Col, Icon, Cell, Sticky } from 'vant'
import { getProductInfo } from '@/api/ebiz/product/product.js'
import { funcPermCheck } from '@/api/ebiz/common/common'
import riskRules from '@/views/common/risk-rules.js'
import { getAgentInfo } from '@/api/ebiz/my/my.js'
export default {
components: {
[Tab.name]: Tab,
[Tabs.name]: Tabs,
[List.name]: List,
[Row.name]: Row,
[Col.name]: Col,
[Icon.name]: Icon,
[Cell.name]: Cell,
[Sticky.name]: Sticky
},
data() {
return {
isCheck: 0, //查看是否有权限
active: 2,
docuList: [], // 产品资料文件
introductImages: [], // 产品特色图片
itemProductDTOS: [], // 产品信息
branchType:'3',
}
},
created() {
//获取展示的产品的 code
// let code = localStorage.productDetailCode
let code = this.$route.params.productDetailCode
console.log(code)
this.getProductDetail(code)
funcPermCheck({}).then(res => {
this.isCheck = res.result
})
},
mounted(){
this.getAgentInfo()
},
methods: {
getAgentInfo(){
getAgentInfo({}).then(res=>{
if(res.result == 0){
console.log('getAgentInfo',res)
this.branchType = res.branchType
}
})
},
goDocu(url, type, name) {
let pdfUrl = encodeURIComponent(url)
this.$jump({
flag: 'h5',
extra: {
title: name,
// url: 'http://47.96.143.111/pdfjs/web/viewer.html?file=' + url //测试代码
url: this.$mainUrl + '/pdfjs/web/viewer.html?file=' + pdfUrl
}
})
// 跳转到产品资料详情
// 保存url
// window.localStorage.setItem('documentInfo', JSON.stringify({ documentUrl: url, documentType: type }))
// // 保存文件类型
// // 0-图片, 1-pdf, 2-word, 3-excel
// window.localStorage.setItem('documentType', type)
// this.$jump({
// flag: 'h5',
// extra: {
// url: location.origin + '/#/product/productDocument'
// },
// routerInfo: {
// path: `/product/productDocument`
// }
// })
},
goProposal() {
this.$CacheUtils.removeLocItem('orderNo')
// 跳转到制作建议书( 投保人信息 )
this.$jump({
flag: 'h5',
extra: {
url: location.origin + '/#/proposal/appnt'
},
routerInfo: {
path: `/proposal/appnt`
}
})
},
async goInsure() {
if (this.isCheck == '1') {
//校验该代理人是否有该产品的售卖权限
return this.$toast('您暂无使用权限！如有问题咨询，请联系个险业务部。')
}
localStorage.orderNo = ''
localStorage.chooseProductCodes = '' //置空所选险种
let path = `/sale/insuredInfo`
let flagPermission = {
flag:true
}
if (this.$route.params.productDetailCode == 'GFRSPRO_M0024' || this.$route.params.productDetailCode == 'GFRSPRO_M0040') {
flagPermission = await riskRules.getProductSellPermissionList('GFRS_M0040', this)
let specilFlag = '1'
path = `${path}?specilFlag=${specilFlag}`
} else if (this.$route.params.productDetailCode == 'GFRSPRO_M0044') {
flagPermission = await riskRules.getProductSellPermissionList('GFRS_M0044', this)
let specilFlag = '1'
path = `${path}?specilFlag=${specilFlag}`
}else if (this.$route.params.productDetailCode == 'GFRSPRO_M0051') {
flagPermission = await riskRules.getProductSellPermissionList('GFRS_M0051', this)
let specilFlag = '1'
path = `${path}?specilFlag=${specilFlag}`
} else {
flagPermission.flag = false
}
if (flagPermission.flag) {
//校验该代理人是否有该产品的售卖权限
return this.$toast(flagPermission.resultMessage)
}
// 从产品列表进入时，存储所选产品的code--如果是选择产品, 进入电子投保, 在主险列表能默认选中我在产品列表选择的产品
localStorage.productCodeChooseFromList = this.itemProductDTOS[0].productCode // 跳转到投保建议
this.$jump({
flag: 'h5',
extra: {
url: location.origin + '/#' + path
},
routerInfo: {
path: path
}
})
},
async getProductDetail(code) {
// 获取产品详情数据
console.log(code)
const res = await getProductInfo({
itemCode: code,
platform: 'app'
})
console.log(res)
if (res.result == 0) {
// 获取产品特色图片
this.introductImages = res.productShowInfo.introductImages
// 获取产品资料文件
this.docuList = res.productShowInfo.documents
this.itemProductDTOS = res.productShowInfo.itemProductDTOS
}
}
},
beforeRouteLeave(to, from, next) {
document.body.style.backgroundColor = ''
next()
}
}
</script>
<style lang="scss" scoped>
.product-detail-container {
/deep/.van-sticky {
background: #fff;
}
.product-detail-introduct-image {
width: 100%;
}
// /deep/.van-tabs__content {
// margin-bottom: 45px;
// }
// /deep/.van-tabs__content::after {
// content: '';
// display: table;
// clear: both;
// }
}
.bottom-area {
/deep/.m-btn {
width: 50%;
border-color: transparent;
}
/deep/.van-button--default {
background-color: #feefd8;
color: #e9332e;
}
}
</style>

45
src/views/GBC/customerDetail.vue
View File

@@ -1,6 +1,30 @@
<template>
<div>
编辑客户信息
<div style="background: #fff;margin: 10px;padding: 10px;border-radius: 5px;">
<div style="display: flex;font-size: 14px;font-weight: bold;">
<span style="width: 25%;display: flex;align-items: center;align-items: center;line-height: 30px;justify-content: center;">保单数量</span>
<span style="width: 25%;display: flex;align-items: center;align-items: center;line-height: 30px;justify-content: center">家庭成员</span>
<span style="width: 25%;display: flex;align-items: center;align-items: center;line-height: 30px;justify-content: center;">总保额</span>
<span style="width: 25%;display: flex;align-items: center;align-items: center;line-height: 30px;justify-content: center;">总保费</span>
</div>
<div style="display: flex;font-size: 13px;color: #999;margin-top: 10px;">
<span style="width: 25%;display: flex;align-items: flex-end;align-items: baseline;justify-content: center;">
<span style="color: #EC5449;font-size: 22px;margin-right: 7px;font-weight: bold;">4</span>份
</span>
<span style="width: 25%;display: flex;align-items: flex-end;align-items: baseline;justify-content: center;">
<span style="color: #EC5449;font-size: 22px;margin-right: 7px;font-weight: bold;">5</span>人
</span>
<span style="width: 25%;display: flex;align-items: flex-end;align-items: baseline;justify-content: center;">
<span style="color: #EC5449;font-size: 22px;margin-right: 7px;font-weight: bold;">60</span>万元
</span>
<span style="width: 25%;display: flex;align-items: flex-end;align-items: baseline;justify-content: center;">
<span style="color: #EC5449;font-size: 22px;margin-right: 7px;font-weight: bold;">10</span>万元
</span>
</div>
</div>
<div v-for="(item,index) in dataList1" :key="index">
<div class="triangle"></div>
</div>
</div>
</template>
@@ -17,7 +41,16 @@ export default {
},
data() {
return {
dataList1:[
{name:'刘亚丽',type:'妻子',src:"",sex:'女'},
{name:'刘桂芬',type:'母亲',src:"",sex:'女'},
{name:'谢居安',type:'父亲',src:"",sex:'女'},
{name:'谢危',type:'儿子',src:"",sex:'女'},
{name:'刘亚丽',type:'妻子',src:"",sex:'女'},
{name:'刘桂芬',type:'母亲',src:"",sex:'女'},
{name:'谢居安',type:'父亲',src:"",sex:'女'},
{name:'谢危',type:'儿子',src:"",sex:'女'},
],
}
},
created() {
@@ -36,5 +69,11 @@ export default {
</script>
<style lang="scss" scoped>
.triangle {
width: 0;
height: 0;
border-width: 15px; /* 设置边长 */
border-style: solid;
border-color: transparent transparent #000000 transparent; /* 透明色为背景色，#000000为需要显示的颜色 */
}
</style>

96
src/views/GBC/projectDetail.vue
View File

@@ -64,23 +64,65 @@
<p style="font-size: 18px;line-height: 35px;font-weight: bold;">项目成员分配</p>
<p style="color: #a7a7a7;font-size: 14px;">数据截止日期：2024-03-30</p>
</div>
<div style="margin-top: 10px;margin-bottom: 5px;background: rgba(255, 87, 83, 1);line-height: 30px;display: flex;align-items: center;color: #fff;font-size: 14px;">
<div style="margin-top: 10px;margin-bottom: 3px;background: rgba(255, 87, 83, 0.7);line-height: 30px;display: flex;align-items: center;color: #fff;font-size: 14px;">
<span style="width: 18%;display: flex;justify-content: center;">成员</span>
<span style="width: 22%;display: flex;justify-content: center;">角色</span>
<span style="width: 30%;display: flex;justify-content: center;">累计标保(元)</span>
<span style="width: 30%;display: flex;justify-content: center;">受理标保(元)</span>
</div>
<div>
<div v-for="item in dataList2" style="background: rgba(251, 235, 230, 0.44);margin-bottom: 1px;line-height: 30px;display: flex;align-items: center;color: #333;font-size: 13px;">
<span style="width: 18%;display: flex;justify-content: center;">{{item.name}}</span>
<span style="width: 22%;display: flex;justify-content: center;">{{item.role}}</span>
<span style="width: 30%;display: flex;justify-content: center;">{{item.value1}}</span>
<span style="width: 30%;display: flex;justify-content: center;">{{item.value2}}</span>
</div>
</div>
</div>
<div style="margin: 10px;padding: 10px;background: #fff;border-radius: 5px;">
<div style="border-bottom: 1px dashed #666;padding-bottom: 15px;">
<p style="font-size: 18px;line-height: 35px;font-weight: bold;">项目数据统计</p>
<p style="color: #a7a7a7;font-size: 14px;">数据截止日期：2024-03-30</p>
</div>
<div style="margin-top: 10px;margin-bottom: 3px;background: rgba(255, 87, 83, 0.7);line-height: 30px;display: flex;align-items: center;color: #fff;font-size: 14px;">
<span style="width: 25%;display: flex;justify-content: center;">小组</span>
<span style="width: 25%;display: flex;justify-content: center;">组长</span>
<span style="width: 25%;display: flex;justify-content: center;">获客人数</span>
<span style="width: 25%;display: flex;justify-content: center;">获客率</span>
</div>
<div>
<div style="background: rgba(251, 235, 230, 0.44);margin-bottom: 1px;line-height: 30px;display: flex;align-items: center;color: #333;font-size: 13px;">
<span style="width: 50%;display: flex;justify-content: center;">项目合并</span>
<span style="width: 25%;display: flex;justify-content: center;">890</span>
<span style="width: 25%;display: flex;justify-content: center;">89%</span>
</div>
</div>
<div>
<div v-for="(item,index) in dataList3" :key="index" style="background: rgba(251, 235, 230, 0.44);margin-bottom: 1px;line-height: 30px;display: flex;align-items: center;color: #333;font-size: 13px;">
<span style="width: 25%;display: flex;justify-content: center;">{{item.name}}</span>
<span style="width: 25%;display: flex;justify-content: center;">{{item.role}}</span>
<span style="width: 25%;display: flex;justify-content: center;">{{item.value1}}</span>
<span style="width: 25%;display: flex;justify-content: center;">{{item.value2}}</span>
</div>
</div>
</div>
</div>
<div v-if="tabActive == 'productList'">
<div>产品列表</div>
<div v-for="(item,index) in dataList4" @click="goProductDetail(item.productCode)" :key="index" style="background: #fff;border-radius: 5px;margin: 5px;display: flex;padding: 5px;">
<img :src="item.productImageUrl" style="display: inline-block;width: 35%;border-radius: 5px;"/>
<div style="display: inline-block;width: 65%;padding-left: 10px;">
<p style="font-size: 16px;">{{item.productName}}</p>
<p style="font-size: 14px;color: #bdbdbd;margin-top: 20px;">{{item.productDesc}}</p>
</div>
</div>
</div>
</div>
</template>
<script>
import { Tab, Tabs, Search, DropdownMenu, DropdownItem, Circle } from 'vant'
import { getList } from '@/api/ebiz/product/product.js'
export default {
components: {
[Tab.name]: Tab,
@@ -156,13 +198,32 @@ export default {
{name:'累计承保人数(人)',value:'9569'},
{name:'累计承保件数(件)',value:'262'},
],
dataList2:[
{name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
{name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
{name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
{name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
{name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
{name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
{name:'张大大',role:'项目经理',value1:'15,000.00',value2:'15,000.00'},
],
dataList3:[
{name:'A组',role:'李艾',value1:'600',value2:'60'},
{name:'A组',role:'李艾',value1:'600',value2:'60'},
{name:'A组',role:'李艾',value1:'600',value2:'60'},
{name:'A组',role:'李艾',value1:'600',value2:'60'},
{name:'A组',role:'李艾',value1:'600',value2:'60'},
{name:'A组',role:'李艾',value1:'600',value2:'60'},
{name:'A组',role:'李艾',value1:'600',value2:'60'},
],
dataList4:[],
}
},
created() {
},
mounted(){
this.getProductList()
},
methods: {
goCustomerDetail(data){
@@ -173,6 +234,33 @@ export default {
},
})
},
getProductList(){
let params = {
type: 'app'
}
getList(params).then(res=>{
if(res.result == '0') {
this.dataList4 = this.dataList4.concat(res.productList)
this.dataList4 = this.dataList4.concat(res.productList)
this.dataList4 = this.dataList4.concat(res.productList)
this.dataList4 = this.dataList4.concat(res.productList)
} else {
this.$toast(res.resultMessage)
}
})
},
goProductDetail(productCode) {
localStorage.productDetailCode = productCode
this.$jump({
flag: 'h5',
extra: {
url: location.origin + `/#/product/ProductDetail/${productCode}`
},
routerInfo: {
path: `/product/ProductDetail/${productCode}`
}
})
},
},
computed: {
text() {