568 lines
14 KiB
Vue
568 lines
14 KiB
Vue
<template>
|
||
<view class="Financial_body">
|
||
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil">
|
||
<block slot="backText">返回</block>
|
||
<block slot="content">开始评估</block>
|
||
</cu-custom>
|
||
<view class="Financial_container flex column">
|
||
<view class="Financial_content_container flex column flexGrow">
|
||
<view class="Financial_content_plateNumber_container flex">
|
||
<view class="Financial_content_plateNumber_container_left">
|
||
<view class="Financial_content_plateNumber_container_left_label"> 查询车牌号码</view>
|
||
<plateNumber ref='plateNumber'></plateNumber>
|
||
</view>
|
||
<view class="Financial_content_plateNumber_container_right">
|
||
<view @click="isShow.seniorPagePopup=true"
|
||
class="Financial_content_plateNumber_container_right_seniorPage"> 高级评估设置</view>
|
||
<plateNumberColor ref='plateNumberColor' />
|
||
</view>
|
||
</view>
|
||
<view class="Financial_content_assess_container ">
|
||
<assessCard @productSelect='productSelect' v-if="assessCardData" :assessCardData='assessCardData' />
|
||
</view>
|
||
</view>
|
||
<view class="Financial_footer_container flex">
|
||
<view @click="$refs.introducePopup.open"
|
||
class="Financial_footer_container_introduceButton flex flex_center">服务介绍</view>
|
||
<view @click="ReconfirmFn" class="Financial_footer_container_paymentButton flex flex_center">
|
||
立即支付</view>
|
||
</view>
|
||
</view>
|
||
<seniorPagePopup ref='seniorPagePopup' :isShow.sync='isShow.seniorPagePopup' />
|
||
<uni-popup ref='introducePopup'>
|
||
<view class="introduce_body">
|
||
<!-- <view class="introduce_header">
|
||
<uni-icons custom-prefix="custom-icon" type="clear"
|
||
style="margin-left: 10rpx;" size="25"></uni-icons>
|
||
</view> -->
|
||
<view class="introduce_text ">
|
||
1.全国12吨以上重载货车（车型9.6米以上）车辆安全评分分数是车辆保险保费的直接重要影响因素之一,评分的及时获知和有效改善能降低保费,帮助车主降本增效;<br />
|
||
2.评分因素:1.道路;2.运营;3.驾驶等主要因素。评分的改善可以有效降低车辆事故率。<br />
|
||
3.车主以往查询的渠道主要通过保险公司查询。缺点:1.不方便（不能随时自主查询）;2.不全面（不清楚评分低的原因）;3.缺少有效的改善建议;4.只能在投保前获知评分结果,不能提前获知而丧失改善的时间。
|
||
</view>
|
||
<view @click="$refs.introducePopup.close" class="introduce_footer">
|
||
返回
|
||
</view>
|
||
|
||
</view>
|
||
</uni-popup>
|
||
<uni-popup ref='Reconfirm'>
|
||
<view class="Reconfirm_body">
|
||
<view class="Reconfirm_container">
|
||
<view v-if="palayData[item.value]" v-for="(item,index) in ReconfirmData" :key='index' class="Reconfirm_container_item">
|
||
<view class="Reconfirm_container_item_label">{{item.label}}</view>
|
||
<view class="Reconfirm_container_item_value">{{palayData[item.value]}}</view>
|
||
</view>
|
||
<view class="Reconfirm_container_item">
|
||
<view class="Reconfirm_container_item_label">合计支付</view>
|
||
<view class="Reconfirm_container_item_value">￥{{palayData.productPrice}}</view>
|
||
</view>
|
||
</view>
|
||
<view @click="submit" class="Reconfirm_footer">
|
||
确认支付
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
<uni-popup :maskClick="false" ref='guidePopup'>
|
||
<view class="guidePopup_body">
|
||
<view class="guidePopup_img">
|
||
<image style="width:480rpx;height:474rpx;" src="../static/img/guide.png" mode=""></image>
|
||
<view class="guidePopup_tip">
|
||
对车辆进行评分与改善建议
|
||
</view>
|
||
<view @click="$refs.guidePopup.close" class="guidePopup_footer">
|
||
立即评估
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import assessCard from '../components/assessCard.vue'
|
||
import plateNumber from '../components/plateNumber.vue'
|
||
import plateNumberColor from '../components/plateNumberColor.vue'
|
||
import seniorPagePopup from '../components/seniorPagePopup.vue'
|
||
import Financial from '@/api/Financial.js'
|
||
export default {
|
||
components: {
|
||
assessCard,
|
||
plateNumber,
|
||
plateNumberColor,
|
||
seniorPagePopup
|
||
},
|
||
data() {
|
||
return {
|
||
counter:0,
|
||
ReconfirmData: [{
|
||
label: '车牌号码',
|
||
value: 'platenumOrVinnum',
|
||
isShow:true
|
||
},
|
||
{
|
||
label: '车牌底色',
|
||
value: 'platecolor',
|
||
isShow:true
|
||
},
|
||
{
|
||
label: '统计年月',
|
||
value: 'lastQueryDate',
|
||
isShow:true
|
||
},
|
||
{
|
||
label: '滚动周期',
|
||
value: 'statype',
|
||
isShow:true
|
||
},
|
||
{
|
||
label: '获取报告类型',
|
||
value: 'productLabel',
|
||
isShow:true
|
||
}
|
||
],
|
||
show: {
|
||
guide: false
|
||
},
|
||
assessCardData: null,
|
||
product: null,
|
||
palayData: null,
|
||
isShow: {
|
||
seniorPagePopup: false
|
||
}
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
if (e.guide !== undefined) {
|
||
this.show.guide = Boolean(e.guide)
|
||
}
|
||
},
|
||
created() {
|
||
this.getProductList()
|
||
},
|
||
watch: {
|
||
'show.guide': {
|
||
handler(n, o) {
|
||
if (n) {
|
||
this.$nextTick(function() {
|
||
this.$refs.guidePopup.open()
|
||
})
|
||
}
|
||
},
|
||
immediate: true,
|
||
}
|
||
},
|
||
methods: {
|
||
ReconfirmFn() {
|
||
const that = this
|
||
try {
|
||
const platenumOrVinnum = this.$refs.plateNumber.plateNumberCallBack();
|
||
const platecolor = this.$refs.plateNumberColor.backgroundCallBack();
|
||
let seniorPage = this.$refs.seniorPagePopup.seniorPageCallBack();
|
||
seniorPage.lastQueryDate = seniorPage.queryDate ?`${seniorPage.queryDate.split('-')[0]}-${seniorPage.queryDate.split('-')[1]}` : '' ;
|
||
seniorPage.queryDate = seniorPage.queryDate ?
|
||
`${seniorPage.queryDate.split('-')[0]}${seniorPage.queryDate.split('-')[1]}` : '';
|
||
this.palayData = {
|
||
platenumOrVinnum,
|
||
platecolor,
|
||
productId: this.product.id,
|
||
productLabel: this.product.label,
|
||
productPrice: this.product.price,
|
||
customerId: uni.getStorageSync('user').id,
|
||
payType: 'PRIWEPAY',
|
||
statype: seniorPage.statype,
|
||
queryDate: seniorPage.queryDate,
|
||
lastQueryDate: seniorPage.lastQueryDate,
|
||
appId: 'wx7a939c19b270cc3d',
|
||
openId: uni.getStorageSync('openid'),
|
||
unionId: uni.getStorageSync('unionid'),
|
||
createSource:'XOIL-COMPANY'
|
||
}
|
||
this.$refs.Reconfirm.open()
|
||
} catch (e) {
|
||
console.log('提交报错')
|
||
uni.showToast({
|
||
title: e.message,
|
||
duration: 2000,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
//点击产品回调
|
||
productSelect(e) {
|
||
this.product = e
|
||
console.log('选中的产品', e)
|
||
},
|
||
//获取产品列表
|
||
getProductList() {
|
||
Financial.Productlist({
|
||
applySystem: 'XOIL-MINIAPP',
|
||
enableMark:'ENABLE',
|
||
}).then(res => {
|
||
if (res.code == 20000) {
|
||
console.log(this.assessCardData)
|
||
this.assessCardData = res.data
|
||
}
|
||
})
|
||
},
|
||
goEstimate(payRecordId) {
|
||
let that = this
|
||
let user = uni.getStorageSync('user');
|
||
let data = {
|
||
customerId: user.id,
|
||
payRecordId
|
||
}
|
||
console.log(data,'datadatadatadata')
|
||
Financial.findHomePageReport(data).then(res => {
|
||
if (Boolean(Number(res.data?.isThereIsNewData))) {
|
||
this.toEstimate(res.data)
|
||
} else {
|
||
if(this.counter>=3){
|
||
uni.hideLoading();
|
||
setTimeout(()=>{
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '很抱歉，您的车辆可能因非重载货车或长时间未在公路行驶，所以无法查询到您的车辆数据，您所支付的款项将在48小时内原路退回',
|
||
success: function (res) {
|
||
that.counter = 0
|
||
if (res.confirm) {
|
||
console.log('用户点击确定');
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
},1000)
|
||
return
|
||
}else{
|
||
this.counter++;
|
||
setTimeout(()=>{
|
||
this.goEstimate(payRecordId)
|
||
},3000)
|
||
}
|
||
}
|
||
});
|
||
},
|
||
toEstimate(data){
|
||
uni.hideLoading();
|
||
uni.redirectTo({
|
||
url: `/Financial/pages/estimate/index?data=${encodeURIComponent(JSON.stringify(data))}`,
|
||
success() {},
|
||
fail(e) {
|
||
console.log(e)
|
||
},
|
||
})
|
||
},
|
||
submit(e) {
|
||
let that = this
|
||
Financial.weiXinPay(this.palayData).then(res => {
|
||
wx.requestPayment({
|
||
...res.data.baseWxOrderVo,
|
||
success: (successRes) => {
|
||
uni.showToast({
|
||
title:'支付成功',
|
||
icon:'success',
|
||
success() {
|
||
that.$refs.Reconfirm.close();
|
||
setTimeout(()=>{
|
||
uni.showLoading({
|
||
title: '报告获取中',
|
||
mask:true
|
||
});
|
||
},1000)
|
||
setTimeout(()=>{
|
||
that.goEstimate(res.data.outTradeNo)
|
||
},2000)
|
||
},
|
||
complete() {
|
||
|
||
}
|
||
})
|
||
console.log('success')
|
||
},
|
||
fail: function(err) {
|
||
// 调用失败
|
||
console.log('fail', err)
|
||
},
|
||
complete: () => {
|
||
// 调用完成回调
|
||
}
|
||
})
|
||
})
|
||
// const that = this
|
||
// try {
|
||
// const platenumOrVinnum = this.$refs.plateNumber.plateNumberCallBack();
|
||
// const platecolor = this.$refs.plateNumberColor.backgroundCallBack();
|
||
// let seniorPage = this.$refs.seniorPagePopup.seniorPageCallBack();
|
||
// seniorPage.queryDate = seniorPage.queryDate ?
|
||
// `${seniorPage.queryDate.split('-')[0]}${seniorPage.queryDate.split('-')[1]}` : ''
|
||
// this.palayData = {
|
||
// platenumOrVinnum,
|
||
// platecolor,
|
||
// productId: this.product.id,
|
||
// productLabel:this.product.label,
|
||
// productPrice:this.product.price,
|
||
// customerId: uni.getStorageSync('user').id,
|
||
// payType: 'PRIWEPAY',
|
||
// statype: seniorPage.statype,
|
||
// queryDate: seniorPage.queryDate,
|
||
// appId: 'wx7a939c19b270cc3d',
|
||
// openId: uni.getStorageSync('openid'),
|
||
// unionId: uni.getStorageSync('unionid')
|
||
// }
|
||
// Financial.weiXinPay(palayData).then(res => {
|
||
// wx.requestPayment({
|
||
// ...res.data.baseWxOrderVo,
|
||
// success: (successRes) => {
|
||
// that.goEstimate()
|
||
// console.log('success')
|
||
// },
|
||
// fail: function(err) {
|
||
// // 调用失败
|
||
// console.log('fail', err)
|
||
// },
|
||
// complete: () => {
|
||
// // 调用完成回调
|
||
// }
|
||
// })
|
||
// })
|
||
// } catch (e) {
|
||
// console.log('提交报错')
|
||
// uni.showToast({
|
||
// title: e.message,
|
||
// duration: 2000,
|
||
// icon: 'none'
|
||
// });
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.guidePopup_tip {
|
||
margin: 48rpx 0 82rpx 0;
|
||
font-size: 36rpx;
|
||
/* -webkit-text-fill-color: transparent;
|
||
-webkit-background-clip: text; */
|
||
line-height: 42rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.guidePopup_footer {
|
||
width: 435rpx;
|
||
height: 95rpx;
|
||
background: #7E5334;
|
||
box-shadow: 0px 4rpx 10rpx 0px rgba(0, 0, 0, 0.302);
|
||
border-radius: 108rpx ;
|
||
opacity: 1;
|
||
position: relative;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #FFFFFF;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.guidePopup_img {
|
||
width: 480rpx;
|
||
position: absolute;
|
||
top: -180rpx;
|
||
left: 0;
|
||
right: 0;
|
||
margin: auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.Reconfirm_container_item_label {
|
||
color: #BBBBBB;
|
||
}
|
||
|
||
.guidePopup_body {
|
||
width: 609rpx;
|
||
height: 652rpx;
|
||
background: linear-gradient(180deg, #FDD8C0 10%, #FFFFFF 55%);
|
||
border-radius: 77rpx 77rpx 77rpx 77rpx;
|
||
opacity: 1;
|
||
border: 1px solid #FFFFFF;
|
||
position: relative;
|
||
}
|
||
|
||
.Reconfirm_container_item_value {
|
||
color: #FF6700;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.Reconfirm_container_item {
|
||
display: flex;
|
||
margin: 15rpx 0;
|
||
}
|
||
|
||
.Reconfirm_container {
|
||
position: relative;
|
||
left: 0;
|
||
right: 0;
|
||
margin: 0 auto;
|
||
width: max-content;
|
||
}
|
||
|
||
.Reconfirm_body {
|
||
background-color: #FFFFFF;
|
||
border-radius: 50rpx;
|
||
font-size: 32rpx;
|
||
width: 646rpx;
|
||
padding: 60rpx;
|
||
}
|
||
|
||
.introduce_body {
|
||
background-color: #FFFFFF;
|
||
padding: 60rpx;
|
||
width: 646rpx;
|
||
border-radius: 50rpx;
|
||
font-size: 32rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.introduce_text {
|
||
color: #FF6700;
|
||
line-height: 38rpx;
|
||
font-family: 'Roboto';
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.introduce_header {
|
||
position: absolute;
|
||
top: 10rpx;
|
||
right: 20rpx;
|
||
}
|
||
|
||
.introduce_footer {
|
||
background: #BBBBBB;
|
||
border-radius: 20rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
padding: 20rpx 0;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.Reconfirm_footer {
|
||
background: #FF6700;
|
||
color: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
padding: 20rpx 0;
|
||
margin-top: 40rpx;
|
||
}
|
||
|
||
.Financial_content_plateNumber_container_right_seniorPage {
|
||
height: 60rpx;
|
||
width: 100%;
|
||
border-radius: 5px;
|
||
background: #FFFFFF;
|
||
color: #FF6700;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.Financial_content_plateNumber_container_left_label {
|
||
color: #FFFFFF;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.Financial_content_assess_card {}
|
||
|
||
.Financial_content_assess_container {
|
||
height: calc(100% - 230rpx - 32rpx);
|
||
/* overflow: hidden; */
|
||
}
|
||
|
||
.Financial_content_plateNumber_container_right {
|
||
width: calc(100% - 360rpx);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.Financial_content_plateNumber_container_left {
|
||
width: 360rpx;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.Financial_content_plateNumber_container {
|
||
background: #FF6700;
|
||
border-radius: 20px;
|
||
height: 230rpx;
|
||
width: 100%;
|
||
margin-bottom: 32rpx;
|
||
padding: 26rpx;
|
||
}
|
||
|
||
.Financial_content_container {
|
||
padding: 58rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.flex_center {
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.Financial_footer_container {
|
||
height: 120rpx;
|
||
width: 100%;
|
||
color: #FFFFFF;
|
||
font-size: 32rpx;
|
||
position: sticky;
|
||
bottom: 0;
|
||
}
|
||
|
||
.Financial_footer_container_introduceButton {
|
||
height: 100%;
|
||
background: #17A00E;
|
||
width: 35%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.Financial_footer_container_paymentButton {
|
||
height: 100%;
|
||
background: #FF6700;
|
||
width: 65%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.flexGrow {
|
||
flex: 1;
|
||
}
|
||
|
||
.column {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
}
|
||
|
||
.Financial_container {
|
||
flex: 1;
|
||
width: 100%;
|
||
}
|
||
|
||
.Financial_body {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #E5E5E5;
|
||
}
|
||
</style>
|