MP_XOIL_company_new/Financial/pages/index.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 {
				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')
					}
					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() {
				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
				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: () => {
							// 调用完成回调
						}
					})
				})
				// 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>