You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
520 lines
12 KiB
520 lines
12 KiB
<template> |
|
<view class="Financial_body"> |
|
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-zj-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(1)" 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 { |
|
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: 'wx2f203fde39b883bc', |
|
openId: uni.getStorageSync('openid'), |
|
unionId: uni.getStorageSync('unionid') |
|
} |
|
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: 'ZHONGPIN-MINIAPP', |
|
enableMark:'ENABLE', |
|
}).then(res => { |
|
if (res.code == 20000) { |
|
console.log(this.assessCardData) |
|
this.assessCardData = res.data |
|
} |
|
}) |
|
}, |
|
goEstimate() { |
|
let user = uni.getStorageSync('user'); |
|
console.log(user, 'user') |
|
Financial.findHomePageReport({ |
|
customerId: user.id |
|
}).then(res => { |
|
if (res.data) { |
|
console.log(res.data, 'res.data') |
|
uni.redirectTo({ |
|
url: `/Financial/pages/estimate/index?data=${encodeURIComponent(JSON.stringify(res.data))}`, |
|
fail(e) { |
|
console.log(e) |
|
}, |
|
}) |
|
} else { |
|
uni.showToast({ |
|
title:'更新评估报告错误', |
|
icon:'error' |
|
}) |
|
console.log('更新评估报告错误') |
|
} |
|
}); |
|
}, |
|
submit(e) { |
|
let that = this |
|
if(e){ |
|
Financial.ybPay(JSON.parse(JSON.stringify(Object.assign(this.palayData,{merchantNo:'10088997357'})))).then(res => { |
|
wx.requestPayment({ |
|
...res.data, |
|
success: (successRes) => { |
|
uni.showToast({ |
|
title:'支付成功', |
|
icon:'success', |
|
success() { |
|
that.$refs.Reconfirm.close(); |
|
setTimeout(()=>{ |
|
that.goEstimate() |
|
},2000) |
|
}, |
|
complete() { |
|
|
|
} |
|
}) |
|
console.log('success') |
|
}, |
|
fail: function(err) { |
|
// 调用失败 |
|
console.log('fail', err) |
|
}, |
|
complete: () => { |
|
// 调用完成回调 |
|
} |
|
}) |
|
}) |
|
}else{ |
|
Financial.weiXinPay(this.palayData).then(res => { |
|
wx.requestPayment({ |
|
...res.data.baseWxOrderVo, |
|
success: (successRes) => { |
|
uni.showToast({ |
|
title:'支付成功', |
|
icon:'success', |
|
success() { |
|
that.$refs.Reconfirm.close(); |
|
setTimeout(()=>{ |
|
that.goEstimate() |
|
},2000) |
|
}, |
|
complete() { |
|
|
|
} |
|
}) |
|
console.log('success') |
|
}, |
|
fail: function(err) { |
|
// 调用失败 |
|
console.log('fail', err) |
|
}, |
|
complete: () => { |
|
// 调用完成回调 |
|
} |
|
}) |
|
}) |
|
} |
|
} |
|
} |
|
} |
|
</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>
|
|
|