<template>
|
<view class="box" v-if="info">
|
<view class="box_head">
|
<view class="box_head_info">
|
<view class="box_head_info_title">赔付总金额：</view>
|
<view class="box_head_info_price">¥ {{price}}</view>
|
<view class="bian" v-if="info.feeUpdate === 1">
|
<view class="bian_head">
|
<image src="/static/icon/ic_t1ips@2x.png" mode="widthFix"></image>
|
<text>变更说明：</text>
|
</view>
|
<view class="bian_info">{{info.supplementSettleClaimsLog}}</view>
|
</view>
|
<view class="list">
|
<view class="list_label">赔付项目</view>
|
<view class="list_row" v-for="(item, index) in list" :key="index">
|
<view class="list_row_top">
|
<view class="left">{{item.name}}</view>
|
<view class="right">¥{{item.fee || 0}}</view>
|
</view>
|
<view class="list_row_info">费用说明：{{item.describe || ''}}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
export default {
|
data() {
|
return {
|
id: null,
|
list: [],
|
price: 0,
|
info: null
|
};
|
},
|
onLoad(option) {
|
this.id = option.id
|
this.getDetails()
|
},
|
methods: {
|
getDetails() {
|
this.$u.api.settleClaimsById(this.id)
|
.then(res => {
|
if (res.code === 200) {
|
this.info = res.data
|
let arr = res.data.hpAccountContent ? JSON.parse(res.data.hpAccountContent) : []
|
this.list = arr.filter(item => [0,1].includes(item.type))
|
this.price = res.data.hpAccount + res.data.hpOtherAccount
|
}
|
})
|
},
|
}
|
}
|
</script>
|
<style>
|
page {
|
background-color: #f7f7f7;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
.box_head {
|
width: 100%;
|
height: 240rpx;
|
padding: 30rpx;
|
box-sizing: border-box;
|
background: linear-gradient( 180deg, #437CB3 0%, #F7F7F7 100%);
|
.box_head_info {
|
width: 100%;
|
padding: 32rpx 30rpx;
|
box-sizing: border-box;
|
background-color: rgba(255, 255, 255, 0.7);
|
border-radius: 16rpx;
|
position: relative;
|
.box_head_info_title {
|
font-weight: 400;
|
font-size: 32rpx;
|
color: #333333;
|
}
|
.box_head_info_price {
|
font-weight: bold;
|
font-size: 52rpx;
|
color: #111111;
|
margin-top: 16rpx;
|
}
|
.bian {
|
width: 100%;
|
padding: 24rpx 20rpx;
|
box-sizing: border-box;
|
background: rgba(255,151,29,0.1);
|
border-radius: 8rpx;
|
margin-top: 30rpx;
|
.bian_head {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
image {
|
width: 32rpx;
|
height: 32rpx;
|
margin-right: 8rpx;
|
}
|
text {
|
font-weight: 500;
|
font-size: 28rpx;
|
color: #111111;
|
}
|
}
|
.bian_info {
|
width: 100%;
|
margin-top: 16rpx;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
}
|
}
|
.list {
|
width: 100%;
|
margin-top: 40rpx;
|
.list_label {
|
font-weight: 400;
|
font-size: 32rpx;
|
color: #777777;
|
margin-bottom: 30rpx;
|
}
|
.list_row {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 30rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.list_row_top {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.left {
|
font-weight: 500;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
.right {
|
font-weight: 500;
|
font-size: 30rpx;
|
color: #FF0000;
|
}
|
}
|
.list_row_info {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #777777;
|
margin-top: 20rpx;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
