mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-07 06:36:44 +08:00
660 lines
18 KiB
Vue
660 lines
18 KiB
Vue
<template>
|
||
<div class="card-Insurance">
|
||
<div class="card-Insurance-box">
|
||
<div class="card-Insurance-header">
|
||
<van-sticky>
|
||
<van-tabs v-model="activeName" @click="changeTab">
|
||
<van-tab title="产品列表" name="product"> </van-tab>
|
||
<van-tab title="我的订单" name="order"> </van-tab>
|
||
</van-tabs>
|
||
</van-sticky>
|
||
|
||
<div class="show" v-if="activeName == 'product'">
|
||
<ul class="card-Products">
|
||
<li v-for="(itemIcon, index) in list" :key="index" class="border-gb" @click="formsD(itemIcon.productCode)">
|
||
<div>
|
||
<img :src="itemIcon.productImageUrl" class="ml10" width="118" height="70" />
|
||
</div>
|
||
<div>
|
||
<p>{{ itemIcon.productName }}</p>
|
||
<span>{{ itemIcon.productDesc }}</span>
|
||
</div>
|
||
</li>
|
||
<template v-if="list.length === 0">
|
||
<li class="flex flex-direction-colunm align-items-c">
|
||
<img src="@/assets/images/pic_page-non.png" class="mt50" alt="" />
|
||
<p class="gray text-center pt20">暂无产品</p>
|
||
</li>
|
||
</template>
|
||
</ul>
|
||
</div>
|
||
<div v-if="activeName == 'order'">
|
||
<van-list
|
||
v-model="loading"
|
||
:immediate-check="false"
|
||
:finished="finished"
|
||
:finished-text="finishedText"
|
||
error-text="请求失败，点击重新加载"
|
||
:error.sync="error"
|
||
@load="loadMore"
|
||
class="pb45"
|
||
>
|
||
<div v-if="isSuccess">
|
||
<div class="order-container" v-for="(orderItem, index) in NewItems" :key="index">
|
||
<div class="fs14 fwb mb5">{{ orderItem.riskName }}</div>
|
||
<div>
|
||
<span>投保单号：{{ orderItem.prtNo }}</span>
|
||
</div>
|
||
<div>
|
||
<span>订单号：{{ orderItem.orderNo }}</span>
|
||
</div>
|
||
<div>
|
||
<span>投保人：{{ orderItem.appantName }}</span>
|
||
</div>
|
||
<div v-if="orderItem.insuredName">
|
||
<span>被保人：{{ orderItem.insuredName }}</span>
|
||
</div>
|
||
<div class="flex justify-content-s">
|
||
<span>订单状态：{{ orderItem.orderStatus | statusFormat }}</span>
|
||
<div v-if="orderItem.isCanPay && (orderItem.orderStatus == '02' || orderItem.orderStatus == '19' || orderItem.orderStatus == '55')">
|
||
<van-button round @click="goPay(orderItem.orderNo)" size="mini" class="mr5" type="danger" v-no-more-click="1000">去支付</van-button>
|
||
</div>
|
||
<div v-if="canRevoke[orderItem.orderStatus]">
|
||
<van-button round @click="revokeOrder(orderItem)" size="mini" class="mr5" type="danger">撤单</van-button>
|
||
</div>
|
||
<!-- isGroupCard 1 团险标识 判断该订单是否可编辑 59 团险卡单投保人信息保存成功 60 团险卡单被保人信息保存成功-->
|
||
<div v-if="orderItem.isGroupCard == '1' && (orderItem.orderStatus == '59' ||orderItem.orderStatus == '60')">
|
||
<van-button round @click="editOrder(orderItem)" size="mini" class="mr5" type="danger">编辑</van-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<template v-if="NewItems.length === 0">
|
||
<li class="flex flex-direction-colunm align-items-c">
|
||
<img src="@/assets/images/pic_page-non.png" class="mt50" alt="" />
|
||
<p class="gray text-center pt20">暂无订单</p>
|
||
</li>
|
||
</template>
|
||
<van-dialog
|
||
class="dialog-delete"
|
||
@confirm="checkCaptchaCode"
|
||
@cancel="cancelCaptchaCode"
|
||
:before-close="beforeClose"
|
||
confirm-button-color="#fff"
|
||
v-model="revokePanelShow"
|
||
title="短信验证"
|
||
show-cancel-button
|
||
>
|
||
<p class="captchaReceiver">投保人手机号: {{ captchaReceiver | phoneNumFilter }}</p>
|
||
<van-field v-model="sms" center clearable placeholder="请输入短信验证码">
|
||
<template #button>
|
||
<van-button :disabled="sendTime !== 0" v-no-more-click="1000" @click="getCaptchaCode" size="small" type="danger">{{
|
||
sendTime ? `${sendTime}s后获取` : '获取验证码'
|
||
}}</van-button>
|
||
</template>
|
||
</van-field>
|
||
</van-dialog>
|
||
</div>
|
||
</van-list>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getCardList, getOrderList, getAuthCode, revokeOrder } from '@/api/ebiz/cardList/cardList.js'
|
||
import {Tab, Tabs, List, Sticky, Toast} from 'vant'
|
||
import dataDictionary from '@/assets/js/utils/data-dictionary' //根据数据字典找到订单状态
|
||
// import formatDate from '@/assets/js/utils/date-utils'
|
||
|
||
export default {
|
||
name: 'kadantoubao.vue',
|
||
components: {
|
||
[Sticky.name]: Sticky,
|
||
[List.name]: List,
|
||
[Tab.name]: Tab,
|
||
[Tabs.name]: Tabs
|
||
},
|
||
data() {
|
||
return {
|
||
activeName: 'product',
|
||
loading: false,
|
||
finished: false,
|
||
currentPage: 1, //当前页数
|
||
error: false,
|
||
finishedText: '',
|
||
pageSize: 10, //每页数据条数
|
||
isSuccess: false,
|
||
// , '我的卡单'
|
||
list: [],
|
||
// orderList: [{ text: '11111' }, { text: '11111' }], //我的订单
|
||
orderList: [], //我的订单
|
||
canRevoke: {
|
||
'19': true,
|
||
'02': true,
|
||
'48': true,
|
||
'49': true,
|
||
'55': true,
|
||
'58': true,
|
||
'46': true,
|
||
'50': true,
|
||
'51': true
|
||
},
|
||
iNow: 0,
|
||
sms: '',
|
||
smsId: '',
|
||
sendTime: 0,
|
||
revokePanelShow:false,
|
||
getCaptcha: false,
|
||
captchaTimer: null,
|
||
captchaReceiver: '',
|
||
revokeOrderNo: '',
|
||
captchaMaped: false
|
||
}
|
||
},
|
||
created() {
|
||
this.getLists()
|
||
},
|
||
mounted() {
|
||
document.body.style.backgroundColor = '#fff'
|
||
setTimeout(() => {
|
||
// eslint-disable-next-line no-undef
|
||
EWebBridge.webCallAppInJs('webview_left_button', {
|
||
intercept: '1' //是否拦截原生返回事件 1是 其他否
|
||
})
|
||
}, 100)
|
||
window.appCallBack = this.appCallBack
|
||
},
|
||
beforeRouteLeave(to, from, next) {
|
||
document.body.style.backgroundColor = ''
|
||
next()
|
||
},
|
||
methods: {
|
||
//分页用-查询订单列表
|
||
loadMore() {
|
||
let pageInfo = {
|
||
pageNum: this.currentPage,
|
||
pageSize: this.pageSize
|
||
}
|
||
this.getOrderList(pageInfo)
|
||
},
|
||
|
||
appCallBack(data) {
|
||
if (data.trigger == 'left_button_click') {
|
||
this.$jump({
|
||
flag: 'service'
|
||
})
|
||
}
|
||
},
|
||
|
||
//改变菜单栏
|
||
changeTab(name) {
|
||
if (name == 'product') {
|
||
this.getLists()
|
||
} else {
|
||
this.loadMore()
|
||
}
|
||
},
|
||
|
||
//跳转到详情页
|
||
formsD(productCode) {
|
||
localStorage.productDetailCode = productCode
|
||
this.$jump({
|
||
flag: 'h5',
|
||
extra: {
|
||
url: location.origin + `/#/cardList/productDetails/${productCode}`
|
||
},
|
||
routerInfo: {
|
||
path: `/cardList/productDetails/${productCode}`
|
||
}
|
||
})
|
||
},
|
||
// getLists: function() {
|
||
// var self = this
|
||
// // 产品列表
|
||
// getCardList({
|
||
// type: 'app'
|
||
// })
|
||
// .then(res => {
|
||
// console.log(res)
|
||
// // if (res.result == 0) {
|
||
// // self.navList = res.productTypeList
|
||
// // window.localStorage.setItem('productList', JSON.stringify(res.productList))
|
||
// // let productList = window.localStorage.getItem('productList')
|
||
// // var resu = JSON.parse(productList).filter(function(obj) {
|
||
// // return obj.productType == '01'
|
||
// // })
|
||
// // self.dataList = resu
|
||
// // } else {
|
||
// // Toast.fail(res.resultMessage)
|
||
// // }
|
||
// })
|
||
// .then(function(err) {
|
||
// console.log(err)
|
||
// })
|
||
// }
|
||
|
||
// 获取卡单列表
|
||
getLists() {
|
||
let data = {
|
||
type: 'appCard'
|
||
}
|
||
getCardList(data)
|
||
.then(res => {
|
||
if (res.result == 0) {
|
||
this.list = res.productList
|
||
} else {
|
||
this.$toast.fail(res.resultMessage)
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log('errerr', err)
|
||
})
|
||
},
|
||
|
||
//获取我的订单列表
|
||
getOrderList(data) {
|
||
getOrderList(data).then(
|
||
res => {
|
||
if (res.result == '0') {
|
||
this.isSuccess = true
|
||
this.currentPage++
|
||
this.loading = false
|
||
if (res.orderDTOPageInfo == null) {
|
||
this.finished = true
|
||
this.loading = false
|
||
this.finishedText = ''
|
||
return
|
||
}
|
||
let answerList = res.orderDTOPageInfo.list
|
||
this.orderList = this.orderList.concat(answerList)
|
||
if (answerList.length == 0) {
|
||
this.finishedText = ''
|
||
} else {
|
||
this.finishedText = '已经全部加载'
|
||
}
|
||
if (answerList.length == 0) {
|
||
this.isSuccess = false
|
||
}
|
||
this.loading = false
|
||
if (res.orderDTOPageInfo.hasNextPage == false) {
|
||
//当下一页为0时 表示全部数据加载完毕
|
||
this.finished = true
|
||
}
|
||
} else {
|
||
this.finished = true
|
||
this.loading = false
|
||
this.finishedText = res.resultMessage
|
||
}
|
||
},
|
||
error => {
|
||
console.log(error)
|
||
}
|
||
)
|
||
},
|
||
|
||
//去支付
|
||
goPay(val) {
|
||
localStorage.setItem('orderNo', JSON.stringify(parseInt(val)))
|
||
this.$jump({
|
||
flag: 'h5',
|
||
extra: {
|
||
url: location.origin + `/#/cardList/pay`,
|
||
forbidSwipeBack: 1
|
||
},
|
||
routerInfo: {
|
||
path: `/cardList/pay`
|
||
}
|
||
})
|
||
},
|
||
//撤单
|
||
revokeOrder(order) {
|
||
console.dir(order)
|
||
this.$dialog
|
||
.confirm({
|
||
className: 'dialog-delete',
|
||
title: '提示',
|
||
message: '撤单后,数据将不可恢复,您确定要撤单吗?',
|
||
cancelButtonColor: '#E9332E',
|
||
confirmButtonColor: '#FFFFFF'
|
||
})
|
||
.then(() => {
|
||
this.revokePanelShow = true
|
||
this.captchaReceiver = order.appntMobile
|
||
this.revokeOrderNo = order.orderNo
|
||
})
|
||
},
|
||
//编辑
|
||
editOrder(order){
|
||
let orderStatus = order.orderStatus
|
||
console.log(order.orderStatus,'fdkfa')
|
||
let cardOrderNo = order.orderNo
|
||
localStorage.setItem('orderNo', JSON.stringify(cardOrderNo))
|
||
let url
|
||
if(orderStatus == '59'){
|
||
url =`/cardList/GroupAppntInfo?cardOrderNo=${cardOrderNo}&editOrder=1`
|
||
}else if(orderStatus == '60'){
|
||
url =`/cardList/GroupInsuredList?cardOrderNo=${cardOrderNo}&editOrder=1`
|
||
}
|
||
this.$jump({
|
||
flag: 'h5',
|
||
extra: {
|
||
url: location.origin + `/#`+ url,
|
||
forbidSwipeBack: 1
|
||
},
|
||
routerInfo: {
|
||
path: url
|
||
}
|
||
})
|
||
},
|
||
beforeClose(action, done) {
|
||
this.captchaMaped ? done() : done(false)
|
||
},
|
||
async getCaptchaCode() {
|
||
if (this.sendTime !== 0) return
|
||
this.getCaptcha = true
|
||
this.sendTime = 60
|
||
let data = {
|
||
operateType: 'appntInfoEntry',
|
||
type: 'H5',
|
||
operateCode: this.captchaReceiver,
|
||
system: 'agentApp',
|
||
operateCodeType: '0'
|
||
}
|
||
let res = await getAuthCode(data)
|
||
if (res.result === '0') {
|
||
this.$toast('获取验证码成功')
|
||
}
|
||
this.smsId = res.sessionId
|
||
this.captchaTimer = setInterval(() => {
|
||
this.sendTime--
|
||
if (this.sendTime === 0) {
|
||
clearInterval(this.captchaTimer)
|
||
this.captchaTimer = null
|
||
}
|
||
}, 1000)
|
||
},
|
||
async checkCaptchaCode() {
|
||
if (!this.getCaptcha) {
|
||
return this.$toast('请先获取验证码')
|
||
}
|
||
if (!this.sms.trim()) {
|
||
return this.$toast('请输入验证码')
|
||
}
|
||
clearInterval(this.captchaTimer)
|
||
this.captchaTimer = null
|
||
let revokeResult = await revokeOrder({
|
||
id: this.revokeOrderNo,
|
||
smsId: this.smsId,
|
||
code: this.sms
|
||
})
|
||
if (revokeResult.result == 0) {
|
||
this.$toast('撤单成功!')
|
||
setTimeout(() => {
|
||
this.orderList = []
|
||
this.isSuccess = false
|
||
this.currentPage = 1
|
||
;[this.loading, this.finished] = [true, false]
|
||
let pageInfo = {
|
||
pageNum: this.currentPage,
|
||
pageSize: this.pageSize
|
||
}
|
||
this.loadMore(pageInfo)
|
||
}, 1000)
|
||
} else {
|
||
Toast.fail(revokeResult.resultMessage)
|
||
}
|
||
this.cancelCaptchaCode()
|
||
this.sms = ''
|
||
},
|
||
cancelCaptchaCode() {
|
||
this.sendTime = 0
|
||
this.revokePanelShow = false
|
||
clearInterval(this.captchaTimer)
|
||
this.captchaTimer = null
|
||
this.getCaptcha = false
|
||
this.captchaMaped = false
|
||
this.captchaReceiver = ''
|
||
},
|
||
},
|
||
filters: {
|
||
statusFormat(val) {
|
||
let text
|
||
dataDictionary.policyState.forEach(state => {
|
||
if (state.id == val) {
|
||
text = state.text
|
||
}
|
||
})
|
||
return text
|
||
},
|
||
phoneNumFilter(phoneNum) {
|
||
let num = phoneNum.split('')
|
||
num.splice(3, 4, '****')
|
||
return num.join('')
|
||
}
|
||
},
|
||
computed: {
|
||
NewItems() {
|
||
var NewItems = []
|
||
this.orderList.map(function(orderItem) {
|
||
let currentTime = '',
|
||
compareTime = '',
|
||
orderObj = {
|
||
riskName: '',
|
||
orderNo: orderItem.orderInfoDTO.orderNo,
|
||
prtNo: orderItem.orderInfoDTO.prtNo,
|
||
appantName: orderItem.appntDTO.name,
|
||
insuredName: '',
|
||
orderStatus: orderItem.orderInfoDTO.orderStatus,
|
||
appntMobile: orderItem.appntDTO.mobile,
|
||
isGroupCard: orderItem.orderInfoDTO.isGroupCard
|
||
}
|
||
// 团险产品团险产品显示多个被保人姓名
|
||
if(orderItem.insuredDTOs.length == 1){
|
||
if(orderItem.insuredDTOs[0].riskDTOLst && orderItem.insuredDTOs[0].riskDTOLst.length){
|
||
orderObj.riskName = orderItem.insuredDTOs[0].riskDTOLst[0].riskName
|
||
}
|
||
orderObj.insuredName = orderItem.insuredDTOs[0].name
|
||
}else if((orderItem.insuredDTOs.length > 1)){
|
||
if(orderItem.insuredDTOs[0].riskDTOLst && orderItem.insuredDTOs[0].riskDTOLst.length){
|
||
orderObj.riskName = orderItem.insuredDTOs[0].riskDTOLst[0].riskName
|
||
}
|
||
orderObj.insuredName = ''
|
||
orderItem.insuredDTOs.forEach((item, index) => {
|
||
if(index == orderItem.insuredDTOs.length -1){
|
||
orderObj.insuredName += item.name
|
||
}else{
|
||
orderObj.insuredName += item.name+'/'
|
||
}
|
||
})
|
||
}
|
||
let dateToday = new Date()
|
||
dateToday.setHours(0)
|
||
dateToday.setMinutes(0)
|
||
dateToday.setSeconds(0)
|
||
currentTime = dateToday.getTime()
|
||
compareTime = new Date(orderItem.orderInfoDTO.appntDateStr.replace(/-/g, '/')).getTime()
|
||
let tmpSub = compareTime - currentTime
|
||
if (tmpSub > 0 && tmpSub < 24 * 60 * 60 * 1000) {
|
||
orderObj.isCanPay = true
|
||
}
|
||
NewItems.push(orderObj)
|
||
})
|
||
return NewItems
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* .myCardl {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
} */
|
||
.order-container {
|
||
margin: 10px;
|
||
padding: 15px;
|
||
border-radius: 3px;
|
||
border: 1px solid #dadada;
|
||
box-shadow: 0 3px 9px 1px hsla(0, 0%, 80%, 0.35);
|
||
}
|
||
.order-container > div {
|
||
margin-bottom: 2px;
|
||
}
|
||
.product-list-default-bg {
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.myCard li {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 360px;
|
||
height: 124px;
|
||
/* border: 1px solid #dadada; */
|
||
/* box-shadow: 0 3px 9px 1px hsla(0, 0%, 80%, 0.35); */
|
||
margin: 0 auto;
|
||
}
|
||
.myCard li:nth-child(1) {
|
||
margin-top: 15px;
|
||
}
|
||
.myCard li p {
|
||
font-size: 15px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.myCard li span {
|
||
font-size: 11px;
|
||
font-family: '微软雅黑';
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 12px;
|
||
color: #999999;
|
||
}
|
||
.Tab {
|
||
width: 100%;
|
||
display: flex;
|
||
height: 30px;
|
||
background-color: #f2f2f2;
|
||
}
|
||
|
||
.tab {
|
||
width: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.card-Products {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.card-Products > li {
|
||
width: 100%;
|
||
display: flex;
|
||
height: auto;
|
||
/* border-bottom: 1px solid #cccccc; */
|
||
}
|
||
|
||
.card-Products > li img {
|
||
/* width: 117px;
|
||
height: 70px;
|
||
margin-left: 10px; */
|
||
}
|
||
|
||
.card-Products li div:nth-of-type(1) {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.card-Products li > div:nth-of-type(2) {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
justify-content: space-between;
|
||
padding: 15px 5px;
|
||
}
|
||
|
||
.card-Products li > div:nth-of-type(2) p {
|
||
font-weight: bold;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.card-Products li > div:nth-of-type(2) span {
|
||
color: #b5b5b5;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.ac {
|
||
border-bottom: 0.04rem solid #1296db;
|
||
color: #1296db;
|
||
}
|
||
|
||
.nav {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 10px;
|
||
height: 45px;
|
||
}
|
||
|
||
.card-Insurance {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.header > img {
|
||
width: 100%;
|
||
}
|
||
|
||
.card-Insurance-box {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.card-Insurance-header {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
}
|
||
/deep/ .dialog-delete{
|
||
padding-bottom: 15px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/deep/ .dialog-delete .van-dialog__header {
|
||
padding: 0.5em !important;
|
||
margin-bottom: 1em !important;
|
||
border-bottom: 1px solid #eaeaea;
|
||
}
|
||
|
||
/deep/ .van-cell {
|
||
padding: 0;
|
||
padding-bottom: 0.5em;
|
||
border-bottom: 1px solid #eaeaea;
|
||
}
|
||
|
||
/deep/ .van-dialog__content {
|
||
padding: 1em;
|
||
}
|
||
|
||
.captchaReceiver {
|
||
margin-bottom: 1em;
|
||
padding-bottom: 1em;
|
||
border-bottom: 1px solid #eaeaea;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|