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 institutionalPerform from './institutionalPerform'
|
||||
import question from './question'
|
||||
export default [
|
||||
...proposal,
|
||||
...sale,
|
||||
@@ -36,5 +37,6 @@ export default [
|
||||
...manpower,
|
||||
...institutionalPerform,
|
||||
...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