mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-24 05:32:52 +08:00
添加电投问题件页面和路由
This commit is contained in:
mengxiaolong
31
src/api/ebiz/questions/index.js
Normal file
31
src/api/ebiz/questions/index.js
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
const g = filename => () => import(`@/views/ebiz/questions/${filename}.vue`)
|
||||||
|
|
||||||
|
export default [
|
||||||
|
{
|
||||||
|
path: '/questions/list',
|
||||||
|
name: 'QuestionsList',
|
||||||
|
component: g('QuestionsList'),
|
||||||
|
meta: {
|
||||||
|
title: '电投问题件',
|
||||||
|
index: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/questions/detail',
|
||||||
|
name: 'QuestionsDetail',
|
||||||
|
component: g('QuestionsDetail'),
|
||||||
|
meta: {
|
||||||
|
title: '问题处理',
|
||||||
|
index: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/questions/result',
|
||||||
|
name: 'result',
|
||||||
|
component: g('Result'),
|
||||||
|
meta: {
|
||||||
|
title: '提交结果',
|
||||||
|
index: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
174
src/components/ebiz/question/ShortMessage.vue
Normal file
174
src/components/ebiz/question/ShortMessage.vue
Normal file
@@ -0,0 +1,174 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="{ message: 1, show }">
|
||||||
|
<div class="box">
|
||||||
|
<div class="title">短信验证</div>
|
||||||
|
<div class="content">
|
||||||
|
<p>{{ text }}</p>
|
||||||
|
<div class="enter" v-if="type === 'confirm'">
|
||||||
|
<input type="text" v-model="code" placeholder="请输入短信验证码" maxlength="6" />
|
||||||
|
<button type="button" @click="getMessage">获取验证码</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div @click="cancel" v-if="type === 'confirm'">取消</div>
|
||||||
|
<div @click="confirm" :style="{ width: type === 'alert' ? '100%' : '50%' }">确定</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'shortMessage',
|
||||||
|
props: {
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'confirm'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
show(n) {
|
||||||
|
if (n)
|
||||||
|
return (document.body.style.cssText = `
|
||||||
|
overflow-y:hidden;
|
||||||
|
height:100vh;
|
||||||
|
`)
|
||||||
|
document.body.style.cssText = `
|
||||||
|
overflow-y:visible;
|
||||||
|
height:auto;
|
||||||
|
`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
cancel() {
|
||||||
|
this.$emit('update:show', false)
|
||||||
|
},
|
||||||
|
confirm() {
|
||||||
|
if (this.type === 'confirm') {
|
||||||
|
if (this.code.length !== 6) return this.$toast('请输入正确的验证码')
|
||||||
|
this.getMessage(this.code)
|
||||||
|
} else {
|
||||||
|
this.getMessage(false)
|
||||||
|
}
|
||||||
|
this.cancel()
|
||||||
|
},
|
||||||
|
getMessage(data) {
|
||||||
|
this.$emit('getMessage', {
|
||||||
|
type: this.type,
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.message {
|
||||||
|
position: fixed;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: all 0.2s ease 0.2s;
|
||||||
|
opacity: 0;
|
||||||
|
&.show {
|
||||||
|
z-index: 9;
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
transition: all 0.2s;
|
||||||
|
.box {
|
||||||
|
transform: translateY(0);
|
||||||
|
transition: all 0.2s ease 0.2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.box {
|
||||||
|
width: 300px;
|
||||||
|
// height: 200px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transform: translateY(-10px);
|
||||||
|
transition: all 0.2s;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
.title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e4393c;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
padding: 0 10px 15px;
|
||||||
|
p {
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 10px 0 15px 0;
|
||||||
|
}
|
||||||
|
.enter {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
padding: 0 10px 5px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
input,
|
||||||
|
button {
|
||||||
|
border: 0;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
width: 150px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background: 0;
|
||||||
|
border: 1px solid #e4393c;
|
||||||
|
color: #e4393c;
|
||||||
|
font-size: 13px;
|
||||||
|
text-align: center;
|
||||||
|
width: 90px;
|
||||||
|
border-radius: 4px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
div {
|
||||||
|
width: 50%;
|
||||||
|
height: 40px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 40px;
|
||||||
|
&:first-child {
|
||||||
|
border-radius: 0 0 0 10px;
|
||||||
|
border: 1px solid #e4393c;
|
||||||
|
color: #e4393c;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
color: #fff;
|
||||||
|
background: #e4393c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -18,6 +18,7 @@ import claims from './claims'
|
|||||||
import productStore from './product-store'
|
import productStore from './product-store'
|
||||||
// 机构业绩
|
// 机构业绩
|
||||||
import institutionalPerform from './institutionalPerform'
|
import institutionalPerform from './institutionalPerform'
|
||||||
|
import question from './question'
|
||||||
export default [
|
export default [
|
||||||
...proposal,
|
...proposal,
|
||||||
...sale,
|
...sale,
|
||||||
@@ -36,5 +37,6 @@ export default [
|
|||||||
...manpower,
|
...manpower,
|
||||||
...institutionalPerform,
|
...institutionalPerform,
|
||||||
...claims,
|
...claims,
|
||||||
...productStore
|
...productStore,
|
||||||
] //根据需要进行删减
|
...question
|
||||||
|
] //根据需要进行删减
|
||||||
|
|||||||
31
src/router/ebiz/question.js
Normal file
31
src/router/ebiz/question.js
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
const g = filename => () => import(`@/views/ebiz/questions/${filename}.vue`)
|
||||||
|
|
||||||
|
export default [
|
||||||
|
{
|
||||||
|
path: '/questions/list',
|
||||||
|
name: 'QuestionsList',
|
||||||
|
component: g('QuestionsList'),
|
||||||
|
meta: {
|
||||||
|
title: '电投问题件',
|
||||||
|
index: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/questions/detail',
|
||||||
|
name: 'QuestionsDetail',
|
||||||
|
component: g('QuestionsDetail'),
|
||||||
|
meta: {
|
||||||
|
title: '问题处理',
|
||||||
|
index: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/questions/result',
|
||||||
|
name: 'result',
|
||||||
|
component: g('Result'),
|
||||||
|
meta: {
|
||||||
|
title: '提交结果',
|
||||||
|
index: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
421
src/views/ebiz/questions/QuestionsDetail.vue
Normal file
421
src/views/ebiz/questions/QuestionsDetail.vue
Normal file
@@ -0,0 +1,421 @@
|
|||||||
|
<template>
|
||||||
|
<div class="detail-container">
|
||||||
|
<div class="pdf">
|
||||||
|
<!-- <iframe :src="src + pdfUrl" class="iframe"></iframe> -->
|
||||||
|
</div>
|
||||||
|
<!-- 补充材料问题件 -->
|
||||||
|
<div class="update" v-if="issueType === 1">
|
||||||
|
<div class="updateInfo">
|
||||||
|
<div class="title">被保险人身份证明</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="query">
|
||||||
|
<div>问题说明</div>
|
||||||
|
<p>
|
||||||
|
{{ supplement.problemDescription }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<van-uploader :after-read="afterRead" name="id" v-model="supplement.idImgList" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="updateInfo">
|
||||||
|
<div class="title">被保险人身份证明</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="query">
|
||||||
|
<div>问题说明</div>
|
||||||
|
<p>
|
||||||
|
{{ supplement.problemDescription }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<van-uploader :after-read="afterRead" name="copy" v-model="supplement.copyImgList" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 新契约基本问题件 -->
|
||||||
|
<div class="feedback" v-if="issueType === 2">
|
||||||
|
<div class="title">问题件回复：</div>
|
||||||
|
<textarea placeholder="请输入" v-model="newContract.feedback"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="checkedBox" v-if="issueType !== 3">
|
||||||
|
<van-checkbox v-model="checked" class="checked" icon-size="16px" shape="square"
|
||||||
|
>本人认真阅读本新契约基本问题件，对其有关内容已全部了解，确认所上传资料均为真实资料，如有虚假资料或不如实告知，一切法律后果本人承担，同意将其作为投保要约的有效组成部分并承诺遵守。</van-checkbox
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<!-- 转账不成功基本问题件 -->
|
||||||
|
<div class="selectList" v-if="issueType === 3">
|
||||||
|
<div class="item">
|
||||||
|
<van-field label-class="labels" label="处理方式">
|
||||||
|
<template #input>
|
||||||
|
<van-radio-group v-model="transfer.mode" direction="horizontal" class="radioGroup" @change="modeChange">
|
||||||
|
<van-radio name="1" icon-size="16px">继续转账</van-radio>
|
||||||
|
<van-radio name="2" icon-size="16px">终止转账</van-radio>
|
||||||
|
<van-radio name="3" icon-size="16px">更换卡号</van-radio>
|
||||||
|
</van-radio-group>
|
||||||
|
</template>
|
||||||
|
</van-field>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<van-field v-model="transfer.back" @click="getBankListItem" label-class="labels" readonly label="开户银行" placeholder="请选择">
|
||||||
|
<template #button>
|
||||||
|
<van-button size="small" class="button" round color="#e4393c" type="primary" @click.stop="getBankInfo(true)">银行卡扫描</van-button>
|
||||||
|
</template>
|
||||||
|
</van-field>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<van-field v-model="transfer.card" label-class="labels" label="银行卡号" placeholder="请输入用户名" />
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<van-field label-class="labels" readonly label="银行卡照片"></van-field>
|
||||||
|
<div class="cardList">
|
||||||
|
<van-uploader :after-read="afterRead" name="card" v-model="transfer.cardPhoto" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="checkedBox" v-if="issueType === 3">
|
||||||
|
<van-checkbox v-model="checked" class="checked" icon-size="16px" shape="square"
|
||||||
|
>本人已认真阅读和理解上述通知书内容，同意将其作为投保要约的有效组成部分并承诺遵守。</van-checkbox
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- end -->
|
||||||
|
<div class="autograph" v-if="issueType !== 3">
|
||||||
|
<div class="list">
|
||||||
|
<span>投保人/监护人亲笔签名：</span>
|
||||||
|
<van-button class="button" round type="info" size="mini" color="#e4393c" @click="autograph">签名</van-button>
|
||||||
|
</div>
|
||||||
|
<div class="list">
|
||||||
|
<span>被投保人亲笔签名：</span>
|
||||||
|
<van-button class="button" round type="info" size="mini" color="#e4393c" @click="autograph">签名</van-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<van-button type="primary" block color="#e4393c" class="next" @click="submit">下一步</van-button>
|
||||||
|
<short-message :show.sync="dialog.show" :type="dialog.type" :text="dialog.text" @getMessage="getMessage"></short-message>
|
||||||
|
<van-popup v-model="transfer.show" position="bottom">
|
||||||
|
<ul class="bankList">
|
||||||
|
<li v-for="item in transfer.bankList" :key="item.code" @click="getBankListItem(item)">{{ item.bankName }}</li>
|
||||||
|
</ul>
|
||||||
|
</van-popup>
|
||||||
|
<div :class="{ showDiscern: 1, show: transfer.showDiscern }">
|
||||||
|
<van-icon name="cross" class="icon" @click="getBankInfo(false)" size="20" />
|
||||||
|
<bank-card-scan class="backContent" :scanShow="true" :clear="transfer.clear" @getScanInfo="getBankInfo"></bank-card-scan>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Uploader, Checkbox, Field, Radio, RadioGroup, Popup, Overlay } from 'vant'
|
||||||
|
import { getBankList, uploadImg } from '@/api/ebiz/sale/sale'
|
||||||
|
import { getQuestionDetail } from '@/api/ebiz/questions'
|
||||||
|
import BankCardScan from '@/components/ebiz/sale/BankCardScan'
|
||||||
|
import ShortMessage from '@/components/ebiz/question/ShortMessage.vue'
|
||||||
|
import shareIcon from '@/assets/images/share@3x.png'
|
||||||
|
export default {
|
||||||
|
name: 'QuestionsDetail',
|
||||||
|
components: {
|
||||||
|
[Uploader.name]: Uploader,
|
||||||
|
[Checkbox.name]: Checkbox,
|
||||||
|
ShortMessage,
|
||||||
|
BankCardScan,
|
||||||
|
[Field.name]: Field,
|
||||||
|
[Radio.name]: Radio,
|
||||||
|
[RadioGroup.name]: RadioGroup,
|
||||||
|
[Popup.name]: Popup,
|
||||||
|
[Overlay.name]: Overlay
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
supplement: {
|
||||||
|
//补充材料
|
||||||
|
problemDescription: '',
|
||||||
|
idImgList: [],
|
||||||
|
copyImgList: []
|
||||||
|
},
|
||||||
|
newContract: {
|
||||||
|
//新契约
|
||||||
|
feedback: ''
|
||||||
|
},
|
||||||
|
transfer: {
|
||||||
|
//转账失败
|
||||||
|
mode: '',
|
||||||
|
back: '',
|
||||||
|
card: '',
|
||||||
|
cardPhoto: [],
|
||||||
|
backList: [],
|
||||||
|
show: false, //显示银行列表
|
||||||
|
showDiscern: false, //是否开启银行卡识别
|
||||||
|
clear: false //是否清空银行卡识别数据
|
||||||
|
},
|
||||||
|
checked: false, //勾选协议
|
||||||
|
dialog: {
|
||||||
|
//弹窗
|
||||||
|
show: false,
|
||||||
|
type: 'confirm',
|
||||||
|
text: ''
|
||||||
|
},
|
||||||
|
issueType: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
problemType() {
|
||||||
|
if (!this.issueType === 0) {
|
||||||
|
return this.issueType
|
||||||
|
} else {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//签名
|
||||||
|
async autograph() {
|
||||||
|
// eslint-disable-next-line
|
||||||
|
const result = await EWebBridge.webCallAppInJs('ca_sign', {
|
||||||
|
name: 'likai',
|
||||||
|
type: '1',
|
||||||
|
number: '142727199301063550',
|
||||||
|
keyword: '签字签字',
|
||||||
|
pageNo: '4',
|
||||||
|
index: 1,
|
||||||
|
offset: 20,
|
||||||
|
pos: 3
|
||||||
|
})
|
||||||
|
console.log(result)
|
||||||
|
},
|
||||||
|
getBankInfo(data) {
|
||||||
|
// 银行卡识别
|
||||||
|
console.log(1)
|
||||||
|
if (Object.prototype.toString.call(data) === '[object Boolean]') return (this.transfer.showDiscern = data)
|
||||||
|
console.log(2)
|
||||||
|
},
|
||||||
|
getBankListItem(item) {
|
||||||
|
this.transfer.show = !this.transfer.show
|
||||||
|
this.transfer.bank = item.code
|
||||||
|
},
|
||||||
|
async getBankList() {
|
||||||
|
this.transfer.bankList = (
|
||||||
|
await getBankList({
|
||||||
|
operateType: 'bank_type'
|
||||||
|
})
|
||||||
|
).content
|
||||||
|
},
|
||||||
|
async setTopRightBtn() {
|
||||||
|
// eslint-disable-next-line
|
||||||
|
await EWebBridge.webCallAppInJs('webview_right_button', {
|
||||||
|
btns: [{ img: shareIcon }]
|
||||||
|
}).catch(() => {})
|
||||||
|
console.log(123123123)
|
||||||
|
},
|
||||||
|
shareConfig() {
|
||||||
|
window.appCallBack = async ({ trigger }) => {
|
||||||
|
if (trigger === 'right_button_click')
|
||||||
|
// eslint-disable-next-line
|
||||||
|
await EWebBridge.webCallAppInJs('bridge', {
|
||||||
|
flag: 'share',
|
||||||
|
extra: {
|
||||||
|
title: '测测试试',
|
||||||
|
content: '测试测试',
|
||||||
|
shareType: 0,
|
||||||
|
img: '',
|
||||||
|
url: window.location.href
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
modeChange(mode) {
|
||||||
|
if (mode > 1) {
|
||||||
|
this.dialog.type = 'alert'
|
||||||
|
this.dialog.show = true
|
||||||
|
this.dialog.text =
|
||||||
|
mode === 2 ? '如您选择终止转账，我公司将按照承保前撤单处理，请您谨慎选择' : '变更银行账号后，续期保险费（如有）默认使用新账号信息进行转账支付。'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
afterRead(file, type) {
|
||||||
|
console.log(file)
|
||||||
|
console.log(type)
|
||||||
|
// uploadImg()
|
||||||
|
},
|
||||||
|
submit() {
|
||||||
|
this.dialog = {
|
||||||
|
type: 'confirm',
|
||||||
|
show: true,
|
||||||
|
text: '为确定用户身份，我们将向186xxxx8972此手机号发送验证码'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getMessage({ type, data }) {
|
||||||
|
// 获取dialog信息，type为confirm时为短信框，alert时是确定框
|
||||||
|
console.log(type, data)
|
||||||
|
},
|
||||||
|
async getQuestionDetail() {
|
||||||
|
// if (!this.$route.query.id)
|
||||||
|
// // eslint-disable-next-line
|
||||||
|
// return EWebBridge.webCallAppInJs('goBack',{
|
||||||
|
// refresh: '0',
|
||||||
|
// index: '-1'
|
||||||
|
// })
|
||||||
|
const rs = await getQuestionDetail({
|
||||||
|
id: this.$route.query.id
|
||||||
|
})
|
||||||
|
console.log(rs)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async created() {
|
||||||
|
this.setTopRightBtn()
|
||||||
|
this.shareConfig()
|
||||||
|
this.getBankList()
|
||||||
|
this.getQuestionDetail()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
#app .van-cell:not(:last-child):after {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.detail-container {
|
||||||
|
background: #fff;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.showDiscern {
|
||||||
|
position: fixed;
|
||||||
|
z-index: -1;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: all 0.3s ease 0.3s;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
background: #fff;
|
||||||
|
&.show {
|
||||||
|
z-index: 999;
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
transition: all 0.3s;
|
||||||
|
.backContent {
|
||||||
|
transform: translateY(0);
|
||||||
|
transition: all 0.3s ease 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 10px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.backContent {
|
||||||
|
transition: all 0.3s;
|
||||||
|
width: 100%;
|
||||||
|
transform: translateY(10px);
|
||||||
|
height: 95%;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 5px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bankList {
|
||||||
|
height: 300px;
|
||||||
|
li {
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pdf {
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
.checkedBox {
|
||||||
|
padding: 10px;
|
||||||
|
.checked {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.update {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
.updateInfo {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
.title {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
padding: 10px 20px;
|
||||||
|
.query {
|
||||||
|
color: #e4393c;
|
||||||
|
font-size: 13px;
|
||||||
|
div {
|
||||||
|
padding-bottom: 2px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
line-height: 22px;
|
||||||
|
padding-bottom: 7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.feedback {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 0 10px;
|
||||||
|
.title {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
font-size: 13px;
|
||||||
|
border: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.selectList {
|
||||||
|
.item {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
/deep/.labels {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.radioGroup {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
height: 18px;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
.cardList {
|
||||||
|
padding: 10px 10px 0;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.autograph {
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
.list {
|
||||||
|
&:first-child {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
|
border-radius: 5px;
|
||||||
|
height: 18px;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.next {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
279
src/views/ebiz/questions/QuestionsList.vue
Normal file
279
src/views/ebiz/questions/QuestionsList.vue
Normal file
@@ -0,0 +1,279 @@
|
|||||||
|
<template>
|
||||||
|
<div class="question-container">
|
||||||
|
<div class="header">
|
||||||
|
<van-search show-action @cancel="searchCancel" v-model="searchValue" placeholder="请输入投保人/被保人/险种名称/问题件类型关键字">
|
||||||
|
<template #action>
|
||||||
|
<div>搜索</div>
|
||||||
|
</template>
|
||||||
|
</van-search>
|
||||||
|
<van-tabs v-model="active" @change="changeProblemList">
|
||||||
|
<van-tab title="待处理">
|
||||||
|
<van-list
|
||||||
|
class="vanList"
|
||||||
|
:immediate-check="false"
|
||||||
|
v-model="pendingListLoading"
|
||||||
|
:finished="pendingListFinished"
|
||||||
|
finished-text="没有更多了"
|
||||||
|
@load="loadMore"
|
||||||
|
>
|
||||||
|
<van-notice-bar wrapable :scrollable="false" text="温馨提示：请在收到问题件之日起10日内处理，否则系统将逾期自动撤单。" />
|
||||||
|
<div class="item" v-for="item in pendingList" :key="item.id">
|
||||||
|
<div class="time">{{ item.createdTime | createTimeFormatFilter }}</div>
|
||||||
|
<div class="top">
|
||||||
|
<div class="col">
|
||||||
|
<van-tag class="tag" plain type="primary" color="#77bbff">投保</van-tag>
|
||||||
|
<div class="text">{{ item.prtName }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<van-tag class="tag" plain type="primary" color="#da9887">被保</van-tag>
|
||||||
|
<div class="text">{{ item.insuredName }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<van-tag class="tag" plain type="primary" color="#95ddd1">主险</van-tag>
|
||||||
|
<div class="text">{{ item.mainRiskName }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<van-tag class="tag" plain type="primary" color="#ffcc99">类型</van-tag>
|
||||||
|
<div class="text">{{ item.businessType }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="list">
|
||||||
|
<van-tag class="tag" plain color="#77bbff">投保单号</van-tag>
|
||||||
|
<div class="text">{{ item.prtNo }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="list">
|
||||||
|
<van-tag class="tag" plain>状态</van-tag>
|
||||||
|
<div class="text">{{ item.statusComment }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="buttons">
|
||||||
|
<van-button class="button" round type="info" size="small" color="#e4393c" @click="toDetail(item)">去处理</van-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</van-list>
|
||||||
|
</van-tab>
|
||||||
|
<van-tab title="已处理">
|
||||||
|
<van-list
|
||||||
|
class="vanList"
|
||||||
|
:immediate-check="false"
|
||||||
|
v-model="processedListLoading"
|
||||||
|
:finished="processedListFinished"
|
||||||
|
finished-text="没有更多了"
|
||||||
|
@load="loadMore"
|
||||||
|
>
|
||||||
|
<div class="item" v-for="item in processedList" :key="item.id">
|
||||||
|
<div class="time">{{ item.createdTime | createTimeFormatFilter }}</div>
|
||||||
|
<div class="top">
|
||||||
|
<div class="col">
|
||||||
|
<van-tag class="tag" plain type="primary" color="#77bbff">投保</van-tag>
|
||||||
|
<div class="text">{{ item.prtName }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<van-tag class="tag" plain type="primary" color="#da9887">被保</van-tag>
|
||||||
|
<div class="text">{{ item.insuredName }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<van-tag class="tag" plain type="primary" color="#95ddd1">主险</van-tag>
|
||||||
|
<div class="text">{{ item.mainRiskName }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<van-tag class="tag" plain type="primary" color="#ffcc99">类型</van-tag>
|
||||||
|
<div class="text">{{ item.businessType }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="list">
|
||||||
|
<van-tag class="tag" plain type="primary" color="#77bbff">投保单号</van-tag>
|
||||||
|
<div class="text">{{ item.prtNo }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="list">
|
||||||
|
<van-tag class="tag" plain>状态</van-tag>
|
||||||
|
<div class="text">{{ item.statusComment }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</van-list>
|
||||||
|
</van-tab>
|
||||||
|
</van-tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { getQuestionList } from '@/api/ebiz/questions'
|
||||||
|
import { Sticky, Search, Swipe, SwipeItem, List, Tag, Tabs, Tab, NoticeBar } from 'vant'
|
||||||
|
import dateUtil from '@/assets/js/utils/date-utils.js'
|
||||||
|
export default {
|
||||||
|
name: 'questionsList',
|
||||||
|
components: {
|
||||||
|
[Sticky.name]: Sticky,
|
||||||
|
[Search.name]: Search,
|
||||||
|
[Swipe.name]: Swipe,
|
||||||
|
[SwipeItem.name]: SwipeItem,
|
||||||
|
[List.name]: List,
|
||||||
|
[Tag.name]: Tag,
|
||||||
|
[Tabs.name]: Tabs,
|
||||||
|
[Tab.name]: Tab,
|
||||||
|
[NoticeBar.name]: NoticeBar
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
active: 0,
|
||||||
|
pendingListLoading: false,
|
||||||
|
processedListLoading: false,
|
||||||
|
pendingListFinished: false,
|
||||||
|
processedListFinished: false,
|
||||||
|
pendingList: [],
|
||||||
|
processedList: [],
|
||||||
|
searchValue: '',
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 10
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toDetail(item) {
|
||||||
|
this.$jump({
|
||||||
|
flag: 'h5',
|
||||||
|
extra: {
|
||||||
|
url: `${window.location.origin}/#/questions/detail`
|
||||||
|
},
|
||||||
|
routerInfo: {
|
||||||
|
path: `/questions/detail?id=${item.id}`
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
searchCancel() {
|
||||||
|
this.searchValue = ''
|
||||||
|
},
|
||||||
|
async loadMore() {
|
||||||
|
const rs = await getQuestionList({
|
||||||
|
type: this.active,
|
||||||
|
pageInfo: {
|
||||||
|
pageNum: this.currentPage,
|
||||||
|
pageSize: this.pageSize
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (rs && rs.result === '0') {
|
||||||
|
this.currentPage++
|
||||||
|
if (this.active === 0) {
|
||||||
|
this.pendingListLoading = false
|
||||||
|
this.pendingList.push(...rs.content.list)
|
||||||
|
} else {
|
||||||
|
this.processedListLoading = false
|
||||||
|
this.processedList.push(...rs.content.list)
|
||||||
|
}
|
||||||
|
if (rs.content.pageNum >= rs.content.pages && this.active === 0) {
|
||||||
|
this.pendingListFinished = true
|
||||||
|
} else if (rs.content.pageNum >= rs.content.pages && this.active === 1) {
|
||||||
|
this.processedListFinished = true
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.pendingListFinished = true
|
||||||
|
this.processedListFinished = true
|
||||||
|
this.pendingListLoading = false
|
||||||
|
this.processedListLoading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
changeProblemList() {
|
||||||
|
this.currentPage = 1
|
||||||
|
this.pendingList.splice(0)
|
||||||
|
this.processedList.splice(0)
|
||||||
|
this.pendingListFinished = false
|
||||||
|
this.processedListFinished = false
|
||||||
|
if (this.active === 0) {
|
||||||
|
this.pendingListLoading = true
|
||||||
|
} else {
|
||||||
|
this.processedListLoading = true
|
||||||
|
}
|
||||||
|
this.loadMore()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.loadMore()
|
||||||
|
},
|
||||||
|
filters: {
|
||||||
|
createTimeFormatFilter(val) {
|
||||||
|
return dateUtil.formatDate(new Date(val), 'yyyy-MM-dd HH:mm:ss')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.question-container {
|
||||||
|
overflow-x: hidden;
|
||||||
|
.contentList {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 750px;
|
||||||
|
display: flex;
|
||||||
|
transition: all 0.4s;
|
||||||
|
position: relative;
|
||||||
|
overflow-y: auto;
|
||||||
|
.vanList {
|
||||||
|
width: 375px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.alert {
|
||||||
|
background: rgba(255, 204, 153, 1);
|
||||||
|
color: #e4393c;
|
||||||
|
font-size: 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
padding: 0 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
background: #fff;
|
||||||
|
.time {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #888;
|
||||||
|
padding: 10px 0;
|
||||||
|
}
|
||||||
|
.top {
|
||||||
|
.col {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 12px;
|
||||||
|
.tag {
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 1em;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
padding: 0.5em 0;
|
||||||
|
border-top: 1px solid #efefef;
|
||||||
|
.list {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
.tag {
|
||||||
|
padding: 0.5em 1.5em;
|
||||||
|
width: 5em;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 1em;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 12px;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
padding-bottom: 0.5em;
|
||||||
|
.button {
|
||||||
|
width: 83px;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
51
src/views/ebiz/questions/Result.vue
Normal file
51
src/views/ebiz/questions/Result.vue
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
<template>
|
||||||
|
<div class="result-container">
|
||||||
|
<!-- <div class="success">
|
||||||
|
<van-icon name="checked" color="#99CCFF" size="120" />
|
||||||
|
<p>提交成功</p>
|
||||||
|
</div> -->
|
||||||
|
<div class="fail">
|
||||||
|
<van-icon name="clear" color="#FF6633" size="120" />
|
||||||
|
<p>提交失败</p>
|
||||||
|
<div class="reason">
|
||||||
|
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur tenetur itaque labore quas amet accusamus quam in dicta officia, qui quidem maxime
|
||||||
|
facilis animi ea laudantium quo laborum odio! Tempore.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.result-container {
|
||||||
|
background: #fff;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding-top: 150px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
& > div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
p {
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
&.success {
|
||||||
|
p {
|
||||||
|
color: #99ccff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.fail {
|
||||||
|
p {
|
||||||
|
color: #ff6633;
|
||||||
|
}
|
||||||
|
.reason {
|
||||||
|
padding: 0 40px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user