vue-insagent-app/pages/tools/policy/subOrders.vue

<template>
	<view @click.native="init" class="page">
		<service-widget @btnClick="btn_click"></service-widget>
		<view class="car-header dis a-c">
			<image src="/static/image/car-insure/Group.png" mode="" style="width: 40px;height: 40px;"></image>
			<view class="dis f-c head-name">
				<text>{{ licenseno }}</text>
				<view class="name1">
					<text style="margin-right: 10px;">{{ insuredname }}</text>
					<text>{{ modelcname }}</text>
				</view>
			</view>
		</view>
		<view class="pdd mt-3">
			<view class="sub-orders " v-for="(item, index) in sublist" :key="index">
				<view class="status dis a-c j-s">
					<view v-for="(statusitem, statusindex) in statusList" :key="statusindex" class="dis a-c"
						style="font-weight: bold;" v-if="item.orderstatus == statusitem.value">
						<image :src="statusitem.src" mode="" style="width: 22px;height: 22px;margin-right: 5px;">
						</image>
						<text :style="{ color: statusitem.color }">{{ statusitem.label }}</text>
					</view>
					<text>￥{{ item.sumpremium }}</text>
				</view>
				<view class="orders-centre">
					<text>{{ item.inscompany }}</text>
					<text>（ {{ item.agreementName }} ）</text>
					<view class="sum dis f-wrap">
						<view v-if="item.jqpremium">交强险：￥{{ item.jqpremium }}</view>
						<view v-if="item.sypremium">商业险：￥{{ item.sypremium }}</view>
						<view>车船税：￥{{ item.taxamount }}</view>
						<view v-if="item.jypremium">驾意险：￥{{ item.jypremium }}</view>
					</view>
					<view v-if="item.auditopinion" class="dis f-c" style="font-size: 12px;">
						<text>审核意见</text>
						<text>{{ item.auditopinion }}</text>
					</view>
				</view>
				<view class="orders-below dis f-c">
					<view class="dis a-c j-end">
						<u-button
							v-if="item.orderstatus == 2 && ['恒邦财险', '安盛天平', '中国人寿', '众安平安', '太平财险', '紫金财险', '永诚财险', '国任财险', '大家财险', '华泰财险', '中煤财险', '华农财险', '渤海财险', '泰康财险', '大地财险', '人保财险', '泰山财险', '申能财险'].includes(item.inscompany)"
							size="mini" :custom-style="{ fontSize: '14px' }" type="error" :plain="true"
							@click="queryStatus(item.id, item)">查询缴费状态</u-button>
						<u-button v-if="item.orderstatus == 2" size="mini" type="error" :custom-style="{ fontSize: '14px' }"
							:plain="true" @click="Payment(item.id, item.apiType)">二维码</u-button>
						<u-button v-if="item.orderstatus == 2 && ['紫金财险'].includes(item.inscompany)" size="mini"
							type="error" :custom-style="{ fontSize: '14px' }" :plain="true"
							@click="cancelorder(item.id)">撤单</u-button>
						<u-button v-if="item.orderstatus == 2" size="mini" type="primary"
							:custom-style="{ fontSize: '14px' }" :plain="true"
							@click="revokeCode(item.id)">撤销二维码</u-button>
					</view>
					<view class="dis a-c j-end" style="margin-top: 5px;">
						<u-button v-if="(item.orderstatus == 4 || item.orderstatus == 1) && item.inscompany == '华泰财险'"
							size="mini" :custom-style="{ fontSize: '14px' }" type="error" :plain="true"
							@click="huataiunderwriting(item)">更新订单</u-button>
						<u-button
							v-if="item.orderstatus == 1 && ['中煤财险', '永诚财险', '国任财险', '大家财险', '渤海财险', '恒邦财险', '安盛天平', '中国人寿', '众安平安', '太平财险', '华农财险', '泰康财险', '大地财险', '人保财险', '泰山财险', '申能财险'].includes(item.inscompany)"
							size="mini" type="error" :plain="true" :custom-style="{ fontSize: '14px' }"
							@click="underwriting(item.id, item.inscompany)">更新订单</u-button>
						<u-button size="mini" type="primary" :custom-style="{ fontSize: '14px', background: '#FF5600' }"
							@click="bjdpreview(item.id)">报价单</u-button>
						<u-button size="mini" type="primary" :custom-style="{ fontSize: '14px' }"
							@click="detial(item.id)">查看详情</u-button>
					</view>
					<!-- <text class="arrivalNavigations" :data-id="item.id" @tap.stop.prevent="Moremethods">更多
						<view class="arrivalNavigation" v-if="item.checked">
							<view class="d4"></view>
							<view class="sideNavigation">
								<view class="sideNavigation-btn">
									<view @click="bjdpreview(item.id)">报价单</view>
									<view v-if="item.orderstatus==2 && ['紫金财险'].includes(item.inscompany)"
										@click="cancelorder(item.id)">撤单</view>
									<view v-if="item.orderstatus==2" @click="revokeCode(item.id)">撤销二维码</view>
								</view>
							</view>
						</view>
					</text> -->
				</view>
			</view>
		</view>
		<o-empty v-if="sublist.length == 0" />
		<!-- <u-popup v-model="trajectoryShow" mode="center" border-radius="8" width="80%">
			<u-steps mode="number" :list="numList" :current="2" direction="column" style="padding: 20px;"></u-steps>
		</u-popup> -->
	</view>
</template>
<script>
import store from '@/store';
import {
	mapState,
	mapMutations
} from "vuex"
export default {
	data() {
		return {
			show: true,
			modeClass: 'fade',
			// trajectoryShow: false,
			// trajectoryList: [],
			MoreShow: false,
			moreindex: "",
			companyId: "",
			modelcname: "",
			orderno: "",
			insuredname: "",
			licenseno: "",
			sublist: [],
			numList: [{
				name: '报价中'
			}, {
				name: '待核保'
			},
			{
				name: '核保退回'
			}, {
				name: '待缴费'
			}, {
				name: '已承保'
			},

			],
			statusList: [{
				label: '报价中',
				value: 0,
				color: "#229805",
				src: "/static/image/car-insure/state1.png"
			},
			{
				label: '待核保',
				value: 1,
				color: "#FF5600",
				src: "/static/image/car-insure/state2.png"
			},
			{
				label: '待缴费',
				value: 2,
				color: "#FF0F00",
				src: "/static/image/car-insure/state3.png"
			},
			{
				label: '已承保',
				value: 3,
				color: "#0052FF",
				src: "/static/image/car-insure/state4.png"
			},
			{
				label: '核保退回',
				value: 4,
				color: "#727272",
				src: "/static/image/car-insure/state5.png"
			}
			],
		}
	},
	computed: {
		...mapState(['userInfo', 'quotationType']),
	},
	onLoad(params) {

		let item = JSON.parse(params.orderno);
		this.orderno = item.orderno;
		this.modelcname = item.modelcname;
		this.insuredname = item.insuredname;
		this.licenseno = item.licenseno;
		this.querylist();
	},
	methods: {
		btn_click() {
			uni.navigateTo({
				url: '/pages/chat/chat'
			})
		},
		handle(type) {
			this.show = !this.show
			this.modeClass = type
		},
		async querylist() {
			let params = {
				orderNo: this.orderno
			}
			let res = await this.$http.post('/insurance/order/querySuborder', params)
			this.sublist = res.data;
			this.sublist.map(val => {
				val.checked = false;
				return val;
			})
		},
		//更多操作
		Moremethods(e) {
			let id = e.currentTarget.dataset.id;
			let list = this.sublist;
			this.sublist = list.map(val => {
				if (val.id == id) {
					val.checked = !val.checked;
				} else {
					val.checked = false;
				}
				return val;
			})
		},
		//查看详情
		detial(id) {
			uni.navigateTo({
				url: "/pages/tools/policy/quoteDetail?companyId=" + id
			})
		},
		//付款码
		Payment(id, type) {
			let pro = this.quotationType.themeCode;
			if (pro == "QD") {
				uni.navigateTo({
					url: "/pages/orders/paymentCode?companyId=" + id + '&apiType=' + type,
				})
			} else {
				uni.navigateTo({
					url: "/pages/orders/paymentCode1?companyId=" + id + '&apiType=' + type,
				})
			}
		},
		//报价单
		bjdpreview(id) {
			let pro = this.quotationType.themeCode;
			if (pro == "QD") {
				uni.navigateTo({
					url: "/pages/orders/quotation?companyId=" + id
				})
			} else {
				uni.navigateTo({
					url: "/pages/orders/quotation1?companyId=" + id
				})
			}
		},
		//撤销二维码
		async revokeCode(id) {
			let res = await this.$http.post('/order/qrCode/destructionQrCode?areaCompanyId=' + id)
			if (res.code == '200') {
				uni.showToast({
					title: res.msg,
					icon: 'success',
					duration: 1000
				});
				this.querylist();
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 1000
				});
			}
		},
		async huataiunderwriting(item) {
			let api = item.apiType == '2' ? '/insurance/crawler/auditStatusQuery' :
				'/order/huaTaiApi/auditStatusQuery';
			let params = {
				companyId: item.id,
			}
			let res = await this.$http.post(`${api}`, params)
			if (res.code == '200') {
				uni.showToast({
					title: res.msg,
					icon: 'success',
					duration: 1000
				});
				this.querylist();
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 1000
				});
			}
		},

		//核保状态查询
		async underwriting(id, inscompany) {
			switch (inscompany) {
				case "中煤财险":
					let zmres = await this.$http.post('/order/zhongMeiApi/auditStatusQuery', {
						companyId: id
					})
					if (zmres.code == '200') {
						uni.showToast({
							title: zmres.msg,
							icon: 'none',
							duration: 1000
						});
						this.querylist();
					} else {
						uni.showToast({
							title: zmres.msg,
							icon: 'none',
						});
					}
					break;
				case "永诚财险":
					let ycres = await this.$http.get('/api/yongCheng/orderStatusBySuborderId/' + id);
					if (ycres.code == '200') {
						uni.showToast({
							title: ycres.msg,
							icon: 'none',
							duration: 2000
						});
						this.querylist();
					} else {
						uni.showToast({
							title: ycres.msg,
							icon: 'none',
						});
					}
					break;
				case "国任财险":
					let grres = await this.$http.post('/api/guoRen/updateOrderInfo', {
						companyId: id
					});
					if (grres.code == '200') {
						uni.showToast({
							title: grres.msg,
							icon: 'none',
							duration: 2000
						});
						this.querylist();
					} else {
						uni.showToast({
							title: grres.msg,
							icon: 'none',
						});
					}
					break;
				case "大家财险":
					let djapi = item.apiType == '2' ? '/insurance/crawler/auditStatusQuery' :
						'/api/dajia/verifyPayment';
					let djres = await this.$http.post(`${djapi}`, {
						companyId: id
					});
					if (djres.code == '200') {
						uni.showToast({
							title: djres.msg,
							icon: 'none',
							duration: 2000
						});
						this.querylist();
					} else {
						uni.showToast({
							title: djres.msg,
							icon: 'none',
						});
					}
					break;
				case "渤海财险":
					let bhapi = item.apiType == '2' ? '/insurance/crawler/auditStatusQuery' :
						'/order/boHaiApi/auditStatusQuery';
					let bhres = await this.$http.post(`${bhapi}`, {
						companyId: id
					});
					if (bhres.code == '200') {
						uni.showToast({
							title: bhres.msg,
							icon: 'none',
							duration: 2000
						});
						this.querylist();
					} else {
						uni.showToast({
							title: bhres.msg,
							icon: 'error',
						});
					}
					break;
				case "诚泰财险":
					let ctapi = item.apiType == '2' ? '/insurance/crawler/auditStatusQuery' :
						'/order/chengTai/auditStatusQuery';
					let ctres = await this.$http.post(`${ctapi}`, {
						companyId: id
					});
					if (ctres.code == '200') {
						uni.showToast({
							title: ctres.msg,
							icon: 'none',
							duration: 2000
						});
						this.querylist();
					} else {
						uni.showToast({
							title: ctres.msg,
							icon: 'error',
						});
					}
					break;
				default:
					let pythonres = await this.$http.post('/insurance/crawler/auditStatusQuery', {
						companyId: id
					});
					if (pythonres.code == '200') {
						uni.showToast({
							title: pythonres.msg,
							icon: 'none',
							duration: 2000
						});
						this.querylist();
					} else {
						uni.showToast({
							title: pythonres.msg,
							icon: 'none',
						});
					}
					break;
			}

		},
		//撤单
		async cancelorder(item) {
			let res = await this.$http.post('/order/zijin/cancel', {
				companyId: item
			})
			if (res.code == '200') {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 1000
				});
				this.querylist();
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none',
				});
			}
		},
		async queryStatus(id, item) {
			switch (item.inscompany) {
				case "紫金财险":
					let zjapi = item.apiType == "2" ? "/insurance/crawler/getOrderDetail" :
						'/order/zijin/getOrderDetail';
					let zjres = await this.$http.post(`${zjapi}`, {
						[item.apiType == 2 ? "subOrderNo" : "companyId"]: id
					});
					if (zjres.code == '200') {
						uni.showToast({
							title: zjres.msg,
							icon: 'none',
							duration: 2000
						});
						this.querylist();
					} else {
						uni.showToast({
							title: zjres.msg,
							icon: 'none',
						});
					}
					break;
				case "大家财险":
					let djapi = item.apiType == '2' ? '/insurance/crawler/verifyPayment' :
						'/api/dajia/verifyPayment';
					let djres = await this.$http.post(`${djapi}`, {
						[item.apiType == 2 ? "subOrderNo" : "companyId"]: id
					});
					if (djres.code == '200') {
						uni.showToast({
							title: djres.msg,
							icon: 'none',
							duration: 2000
						});
						this.querylist();
					} else {
						uni.showToast({
							title: djres.msg,
							icon: 'none',
						});
					}
					break;
				case "华泰财险":
					let htapi = item.apiType == '2' ? '/insurance/crawler/verifyPayment' :
						'/order/huaTaiApi/paymentEnquiry';
					let htres = await this.$http.post(`${htapi}`, {
						[item.apiType == 2 ? "subOrderNo" : "companyId"]: id
					});
					if (htres.code == '200') {
						uni.showToast({
							title: htres.msg,
							icon: 'none',
							duration: 2000
						});
						this.querylist();
					} else {
						uni.showToast({
							title: htres.msg,
							icon: 'error',
						});
					}
					break;
				case "永诚财险":
					let ycres = await this.$http.get(
						'/api/yongCheng/orderStatusBySuborderId/' + id);
					if (ycres.code == '200') {
						uni.showToast({
							title: ycres.msg,
							icon: 'none',
							duration: 2000
						});
						this.querylist();
					} else {
						uni.showToast({
							title: ycres.msg,
							icon: 'none',
						});
					}
					break;
				case "国任财险":
					let grres = await this.$http.post('/api/guoRen/updateOrderInfo', {
						companyId: id
					});
					if (grres.code == '200') {
						uni.showToast({
							title: grres.msg,
							icon: 'none',
							duration: 2000
						});
						this.querylist();
					} else {
						uni.showToast({
							title: grres.msg,
							icon: 'none',
						});
					}
					break;
				case "中煤财险":
					let zmres = await this.$http.post('/order/zhongMeiApi/paymentEnquiry', {
						companyId: id
					});
					if (zmres.code == '200') {
						uni.showToast({
							title: zmres.msg,
							icon: 'none',
							duration: 2000
						});
						this.querylist();
					} else {
						uni.showToast({
							title: zmres.msg,
							icon: 'none',
						});
					}
					break;
				case "渤海财险":
					let bhapi = item.apiType == '2' ? '/insurance/crawler/verifyPayment' :
						'/order/boHaiApi/getOrderDetail';
					let bhres = await this.$http.post(`${bhapi}`, {
						[item.apiType == 2 ? "subOrderNo" : "companyId"]: id
					});
					if (bhres.code == '200') {
						uni.showToast({
							title: bhres.msg,
							icon: 'none',
							duration: 2000
						});
						this.querylist();
					} else {
						uni.showToast({
							title: bhres.msg,
							icon: 'error',
						});
					}
					break;
				case "诚泰财险":
					let ctapi = item.apiType == '2' ? '/insurance/crawler/verifyPayment' :
						'/api/chengTai/payment';
					let ctres = await this.$http.post(`${ctapi}`, {
						[item.apiType == 2 ? "subOrderNo" : "companyId"]: id
					});
					if (ctres.code == '200') {
						uni.showToast({
							title: ctres.msg,
							icon: 'none',
							duration: 2000
						});
						this.querylist();
					} else {
						uni.showToast({
							title: ctres.msg,
							icon: 'error',
						});
					}
					break;
				default:
					let pythonres = await this.$http.post('/insurance/crawler/verifyPayment', {
						subOrderNo: id
					});
					if (pythonres.code == '200') {
						uni.showToast({
							title: pythonres.msg,
							icon: 'none',
							duration: 2000
						});
						this.querylist();
					} else {
						uni.showToast({
							title: pythonres.msg,
							icon: 'none',
						});
					}
					break;
			}
		},
		init() {
			this.sublist = this.sublist.map(val => {
				val.checked = false;
				return val;
			})
		}

	}
}
</script>
<style>
page {
	background: #f2f2f2;
}
</style>
<style lang="scss" scoped>
.page {
	min-height: calc(100vh - 44px);
	background-color: #F8FAFE;
	padding: 16px 16px 30px 16px;
}

.car-header {
	width: 100%;
	height: auto;
	background: #FFFFFF;
	box-shadow: 0px 4px 10px 0px #DAE3F4;
	border-radius: 6px;
	padding: 8px 15px;


	.head-name {
		margin-left: 20px;

		&>text {
			font-weight: bold;
			font-size: 15px;
			color: #232832;
		}

		.name1 text {
			font-size: 14px;
			font-weight: bold;
			color: #333333;
		}
	}
}

.sub-orders {
	width: 100%;
	background: white;
	border-radius: 6px;
	padding: 10px;
	box-shadow: 0px 4px 10px 0px #DAE3F4;
	border-radius: 6px;
	margin-bottom: 10px;

	.status {
		padding-bottom: 8px;
		border-bottom: 1px solid #EFEFEF;

		>text {
			color: #FF5600;
			font-size: 16px;
			font-weight: bold;
		}
	}

	.orders-centre {
		padding: 6px 0;
		border-bottom: 1px solid #EFEFEF;

		>text {
			font-size: 15px;
			font-weight: bold;
			color: #232832;
		}

		.sum {
			view {
				width: 50%;
				color: #2D4D89;
				font-size: 13px;
			}
		}
	}

	.orders-below {
		padding-top: 10px;

		>view {
			uni-button {
				margin-left: 5px;
			}
		}

	}

}


.strong {
	font-weight: bold;
}

.arrivalNavigations {
	font-size: 14px;
	color: rgba(51, 51, 51, 0.8);
	margin-right: auto;
	position: relative;
}

//从这里开始是弹出框的样式  不需要搜索框的 前面样式都不用加
.arrivalNavigation {
	width: 250rpx;
	position: absolute;
	left: -10px;
	top: 30px;
	z-index: 99;

	.sideNavigation {
		width: 80px;
		background-color: #fff;
		box-shadow: 0px 4px 10px 0px #DAE3F4;
		border-radius: 10rpx;

		.sideNavigation-btn>view {
			text-align: center;
			font-size: 14px;
			color: #333333;
			text-align: center;
			padding: 6px 0;
			border-bottom: 1px solid #EFEFEF;

			&:last-child {
				border: none;
			}
		}
	}

	.d4 {
		width: 0;
		height: 0;
		margin-left: 22px;
		margin-top: -20rpx;
		border-width: 20rpx;
		border-style: solid;
		border-color: transparent #fff transparent transparent;
		transform: rotate(90deg);
		/*顺时针旋转90°*/

	}
}
</style>