partnerApp/pages/carInsure1/payWay1.vue

<template>
	<view class="pageBody">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		
		<!-- 获取保单方式 -->
		<view class="getProposalWay">
			<view class="title  d-flex a-center  j-sb">
				<text style="font-weight: bold;">保单获取方式</text>
			</view>
			<view class="content">
				<view class="row d-flex a-center ">
					<view class="left">保单形式：</view>
					<picker class="right d-flex flex-1" mode="selector" range-key="label"  :range="insurancePolicyList"  @change="bindPickerChange($event,'insurancePolicy')">
						<view class="d-flex a-center  j-sb flex-1" style="width: 100%;">
							<view>{{insurancePolicy}}</view>
							<view class="icon iconfont icon-xiala" style="margin-left: 20upx;font-size: 28upx;"></view>
						</view>
					</picker>
				</view>
				<template v-if="insurancePolicy=='电子'">
				<!-- 邮箱地址 -->
					<view class="row d-flex a-center ">
						<view class="left">邮箱地址：</view>
						<input class="right d-flex flex-1" type="text" style="font-size: 28upx;" placeholder="请输入邮箱地址" v-model="email" />
					</view>
				</template>
				<template v-if="insurancePolicy=='纸质'">
					<view class="row d-flex a-center ">
						<view class="left">配送方式：</view>
						<picker disabled class="right d-flex flex-1" mode="selector" range-key="label"  :range="distributionList"  @change="bindPickerChange($event,'distribution')">
							<view class="d-flex a-center j-sb flex-1" style="width: 100%;">
								<view>{{distribution}}</view>
								<view class="icon iconfont icon-xiala" style="margin-left: 20upx;font-size: 28upx;"></view>
							</view>
						</picker>
					</view>
				</template>
				
				<template v-if="(insurancePolicy=='纸质')&&(distribution=='邮寄')">
					<view class="row d-flex a-center ">
						<view class="left">收件人：</view>
						<input class="right d-flex flex-1" type="text" placeholder="请输入收件人" v-model="mailAddrName" />
					</view>
					<view class="row d-flex a-center ">
						<view class="left">手机号：</view>
						<input class="right d-flex flex-1" type="text" placeholder="请输入手机号" v-model="mailAddrMobile" />
					</view>
					<view class="row d-flex a-center " style="height:auto;min-height: 80upx;padding: 10upx 0;box-sizing: border-box; ">
						<view class="left d-flex">地址：</view>
						<view class="right flex-column d-flex flex-1">
							<view class="d-flex a-center j-sb" @tap="showMulLinkageThreePicker">
								<template v-if="!!countryFore">
									<view>{{countryFore}}</view>
								</template>
								<template v-if="!countryFore">
									<view style="color: #999;font-size: 28upx;">请选择收件地址</view>
								</template>
								<view class="icon iconfont icon-xiala" style="margin-left: 20upx;font-size: 28upx;"></view>
							</view>
							<view style="margin-top: 20upx;">
								<input width="200upx" style="font-size: 26upx;" v-model="mailAddress"  placeholder-style="font-size:26upx; color:#999;" placeholder="请填写具体路名、门牌地址"/>
							</view>
						</view>
					</view>
				</template>
				
			</view>
		</view>
		
		
		
		<view class="bodyContent">
		<view>如您在投保过程中，有任何疑问，可以联系我们电话客服，将会有公司专属坐席为您服务解答。</view>
		<button @tap="onlinePay" class="user-set-btn d-flex a-center j-center main-bg-color" type="primary" style="margin-top: 40upx;">线上缴费</button>
		<button @tap="payPopupShow" class="user-set-btn d-flex a-center j-center" type="default"  style="margin-top: 40upx;">线下缴费</button>
		</view>
		
		<wyb-popup ref="popupPay" type="center" mode="size-fixed"  height="520" width="600" radius="6" :showCloseIcon="true">
		    <view class="popupBody">
				<view class="popHeader d-flex a-center j-center">
					掌柜客服温馨提示
				</view>
				<view class="popupContent">
					<view class="desc">非常感谢您选择线下支付，我们客服工作人员会尽快联系您进行投保，感谢您的支持。</view>
					<button @tap="mobileCall" class="user-set-btn d-flex a-center j-center" type="primary" style="margin-top: 40upx;">电话咨询客服</button>
					<button @tap="onlineCustomerService" class="user-set-btn d-flex a-center j-center" type="default" style="margin-top: 40upx;">等待工作人员联系</button>
				</view>
		    </view>
		</wyb-popup>
		
		<!-- 省市选择 -->
		<w-picker mode="region" :defaultVal="['山西省','太原市','小店区']" :areaCode="['14','1401','140105']" @confirm="onConfirmCity" ref="cityPicker" themeColor="#007AFF"></w-picker>
		
		
	</view>
</template>

<script>
	import {mapMutations} from "vuex"
	import wPicker from "@/components/modules/carInsure/w-picker/w-picker"
	import wybPopup from '@/components/common/wyb-popup/wyb-popup.vue'
	export default {
		components: {
			wybPopup,
			wPicker
		},
		data() {
			return {
				orderno:'',
				
				email:"",
				insurancePolicy:"电子",// 保单形式
				insurancePolicyList:["电子","纸质"],
				distribution:'邮寄',//邮寄方式
				distributionList:["邮寄","网点自取"],
				mailAddrName:"",//邮寄地址名字
				mailAddrMobile:"",//邮寄地址电话
				countryFore:"",//邮寄城市地址
				mailAddress:"",//邮寄地址
			}
		},
		onLoad(params) {
			this.orderno = params.orderno;
		},
		methods: {
			...mapMutations(['setOrderStage','setOrderType']),
			
			//选择下拉
			bindPickerChange(e,type){
				this[type]= this[type+'List'][e.target.value];
			},
			// 城市三级联动
			showMulLinkageThreePicker() {
				this.$refs.cityPicker.show()
			},
			onConfirmCity(e) {
				this.countryFore = e.result;
				this.mailAddress="";
			},
			
			payPopupShow(){
				if(this.checkForm()){
					this.$refs.popupPay.show() // 显示
				}
			},
			// 电话咨询
			mobileCall(){
				uni.makePhoneCall({
					phoneNumber: '4006333016',
					success: () => {
						this.$refs.popupPay.hide() 
						console.log("成功拨打电话")
					}
				})
			},
			//线上客服
			async onlineCustomerService(){
				this.$refs.popupPay.hide()
				if(this.checkForm()){
					var data = {
					  "billtype": "",
					  "mailaddress": "",
					  "mailtype": "",
					  "orderno": this.orderno,
					  "paytype": "线下缴费",
					  "policytype": "",
					  "receiptname": "",
					  "receiptphone": ""
					}
					
					if(this.insurancePolicy == '电子'){
						data.policytype = this.insurancePolicy;
						data.mailtype = '邮箱';
						data.mailaddress = this.email;
					}
					if(this.insurancePolicy == '纸质'){
						data.policytype = this.insurancePolicy;
						data.mailtype = this.distribution;
						data.mailaddress = this.countryFore + this.mailAddress;
						data.receiptname = this.mailAddrName;
						data.receiptphone = this.mailAddrMobile;
					}

					let res = await this.$http.post('/insOrder/savePayType',data);
					if(res.code ==200){
						uni.showToast({ title: '15分钟内工作人员将会与您联系进行线下支付，请耐心等待', icon:"success",duration:2000 });
						
						setTimeout(() => {
							this.setOrderType(0);
							this.setOrderStage(3);
							this.navigate({url:"/pages/orders/orders"},"switchTab",true);
						}, 2000);
					}
				}
			},
			
			// 验证是否是邮箱
			checkEmail(str) {
			      return /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(str);
			},
			// 手机号验证
			isMobile(str){
			    return /^1[3456789]\d{9}$/.test(str.trim())
			},
			checkForm(){
				if(this.insurancePolicy == '电子'){
					if(!this.checkEmail(this.email)){
						uni.showToast({ title: '请输入正确的邮箱地址', icon:'none' });
						return false;
					}else{
						return true;
					}
				}
				
				if((this.insurancePolicy == '纸质')  && (this.distribution == '邮寄')){
					if(this.mailAddrName.trim()==""){
						uni.showToast({ title: '请输入收件人姓名', icon:'none' });
						return false;
					}else if(!this.isMobile(this.mailAddrMobile)){
						uni.showToast({ title: '请输入正确的手机号', icon:'none' });
						return false;
					}else if(this.countryFore.trim()==""){
						uni.showToast({ title: '请选择邮寄城市', icon:'none' });
						return false;
					}else if(this.mailAddress.trim()==""){
						uni.showToast({ title: '请输入详细地址', icon:'none' });
						return false;
					}else{
						return true;
					}
				}
				
			},
			
			//线上缴费
			onlinePay(){
				if(this.checkForm()){
					uni.showModal({
						title: "提示",
						content: "选择消费方式后不可更改,是否确认选择线上缴费？",
						success: async (res) => {
							if (res.confirm) {
								
								var data = {
								  "billtype": "",
								  "mailaddress": "",
								  "mailtype": "",
								  "orderno": this.orderno,
								  "paytype": "线上缴费",
								  "policytype": "",
								  "receiptname": "",
								  "receiptphone": ""
								}
								
								if(this.insurancePolicy == '电子'){
									data.policytype = this.insurancePolicy;
									data.mailtype = '邮箱';
									data.mailaddress = this.email;
								}
								if(this.insurancePolicy == '纸质'){
									data.policytype = this.insurancePolicy;
									data.mailtype = this.distribution;
									data.mailaddress = this.countryFore + this.mailAddress;
									data.receiptname = this.mailAddrName;
									data.receiptphone = this.mailAddrMobile;
								}
								
								let res= await this.$http.post('/insOrder/savePayType',data);
								if(res.code ==200){
									this.navigate({url:"/pages/carInsure/payCode?orderno="+this.orderno},"reLaunch",true);
								}
								
							}
						}
						
					})
						
				}
			}
		}
	}
</script>

<style>
.pageBody{
	max-width: 750upx;
	min-height: 100vh;
	background: #f5f5f5;
	font-size: 26upx;
	font-family: "Arial,Helvetica,sans-serif,PingFangSC";
}
.bodyContent{
	background: #FFFFFF;
	padding: 30upx;
}
.popupBody{
	padding: 0upx 30upx;
}
.popHeader{
	height: 100upx;
	font-size: 34upx;
	font-weight: bold;
	border-bottom: 1px solid #FAFAFA;
}
.popupContent{
	padding: 20upx 0;
}

.getProposalWay{
	margin-bottom: 20upx;
	background: #FFFFFF;
	padding: 0upx 30upx;
}
.getProposalWay .title{
	height: 80upx;
	font-size: 32upx;
	box-shadow:inset 0 -3upx 0px  #fafafa;
}
.getProposalWay .content .row{
	height: 80upx;
	border-bottom: 1px solid #F9F9F9;
}
.getProposalWay .content .row .left{
	width: 170upx;
	flex-shrink: 0;
	font-size: 28upx;
}
.getProposalWay .content .row .right{
	font-size: 28upx;
}
</style>