new-greemall-wxapp/components/zhifutanchuan.vue

<template>
	<view :style="{ top: 0 }" class="z-popup">
		<view class="anniukuang" v-if="
        infoSync.miniProgram.appId == 'wxb80d6a6523463b70' ? !showYSF : true
      ">
			<button class="btn" @click="WeiXinPay">
				<uni-icons type="weixin" size="30" style="margin-right: 20rpx"></uni-icons>
				微信支付
			</button>
		</view>
		<view class="anniukuang" v-if="showYSF">
			<button class="btn" @click="YunFlashPay">
				<uni-icons type="cloud-upload" size="30" style="margin-right: 20rpx"></uni-icons>
				云闪付
			</button>
		</view>
		<neil-modal v-if="isShow" :show="isShow" title="以旧换新参与人信息" @cancel="fail" @confirm="success">
			<view style="min-height: 90upx; padding: 32upx 24upx">
				<view>应'政府以旧换新补贴'政策要求发票抬头需与享受以旧换新者(领券人)实名信息完全一致，请务必填写准确!若不一致，后续有补贴失败追回风险。</view>
				<view style="height: 20rpx"></view>
				<view class="uni-form-item uni-column">
					<view class="title">用户姓名</view>
					<input class="uni-input" v-model="buyerName" :placeholder="isShow ? '请输入' : ''" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">身份证</view>
					<input class="uni-input" v-model="buyerIdCard" :placeholder="isShow ? '请输入' : ''" />
				</view>
			</view>
		</neil-modal>
	</view>
</template>

<script>
	import neilModal from '@/components/neil-modal/neil-modal.vue';
	export default {
		props: {
			orderInfo: {
				type: Object,
				default: () => ({}),
			},
		},
		components: {
			neilModal,
		},
		computed: {
			showYSF() {
				return (
					this.orderInfo.isRecordBuyer &&
					((this.orderInfo.goods &&
							!this.orderInfo.goods.find((item) => item.num > 1)) ||
						(this.orderInfo.orderDetails &&
							!this.orderInfo.orderDetails.find((item) => item.num > 1)))
				);
			},
		},
		data() {
			return {
				infoSync: uni.getAccountInfoSync(),
				isShow: false,
				buyerName: '',
				buyerIdCard: '',
			};
		},
		methods: {
			WeiXinPay() {
				this.$emit('PAY_TYPE_STR', {
					payType: '微信支付',
					wechatPay: true,
				});
			},
			YunFlashPay() {
				if (this.orderInfo.isRecordBuyer) {
					this.isShow = true;
				} else {
					this.$emit('PAY_TYPE_STR', {
						payType: '云闪付',
						wechatPay: false,
					});
				}
			},
			isIdCard(idCard) {
				// 15位和18位身份证号码的正则表达式
				var regIdCard =
					/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;

				// 如果通过该验证，说明身份证格式正确，但准确性还需计算
				if (regIdCard.test(idCard)) {
					if (idCard.length == 18) {
						var idCardWi = new Array(
							7,
							9,
							10,
							5,
							8,
							4,
							2,
							1,
							6,
							3,
							7,
							9,
							10,
							5,
							8,
							4,
							2
						); // 将前17位加权因子保存在数组里
						var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); // 这是除以11后，可能产生的11位余数、验证码，也保存成数组
						var idCardWiSum = 0; // 用来保存前17位各自乖以加权因子后的总和
						for (var i = 0; i < 17; i++) {
							idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i];
						}

						var idCardMod = idCardWiSum % 11; // 计算出校验码所在数组的位置
						var idCardLast = idCard.substring(17); // 得到最后一位身份证号码

						// 如果等于2，则说明校验码是10，身份证号码最后一位应该是X
						if (idCardMod == 2) {
							if (idCardLast == 'X' || idCardLast == 'x') {
								//alert("恭喜通过验证啦！");
								return true;
							} else {
								//alert("身份证号码错误！");
								return false;
							}
						} else {
							// 用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
							if (idCardLast == idCardY[idCardMod]) {
								//alert("恭喜通过验证啦！");
								return true;
							} else {
								//alert("身份证号码错误！");
								return false;
							}
						}
					} else {
						return true;
					}
				} else {
					//alert("身份证格式不正确!");
					return false;
				}
			},
			checkChinese(val) {
				return val.charCodeAt() > 255 ? true : false;
			},
			success() {
				this.isShow = false;
				if (!this.buyerName || !this.buyerIdCard) {
					this.$toast('用户姓名与身份证必须填写！');
					return;
				}
				if (!(this.buyerName.length >= 2 && this.checkChinese(this.buyerName))) {
					this.$toast('姓名必须至少两个字并且为中文！');
					return;
				}
				if (!this.isIdCard(this.buyerIdCard)) {
					this.$toast('身份证不符合规格！');
					return;
				}
				this.$emit('PAY_TYPE_STR', {
					payType: '云闪付',
					wechatPay: false,
					buyerName: this.buyerName,
					buyerIdCard: this.buyerIdCard,
				});
			},
			fail() {
				this.isShow = false;
			},
		},
	};
</script>

<style scoped lang="scss">
	.btn {
		width: 100%;
		font-size: 36rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	.z-popup {
		position: fixed;
		background: #efefef;
		width: 100%;
		height: 100vh;
		z-index: 1000000000;
		left: 0;
		right: 0;
		transition: top 0.5s;
		box-sizing: border-box;
		padding: 40rpx;

		.zhuangtaitubiao {
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 40rpx;
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			box-sizing: border-box;

			.textclass {
				font-size: 32rpx;
				font-weight: 500;
				box-sizing: border-box;
			}
		}

		.anniukuang {
			width: 100%;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			box-sizing: border-box;
		}

		.title {
			font-size: 32rpx;
			font-weight: 500;
			align-items: left;
			box-sizing: border-box;
		}

		.row {
			display: flex;
			align-items: left;
			margin-top: 30rpx;
			width: 100%;
			box-sizing: border-box;

			// .label {
			// 	color: $sec-font;
			// }

			// .price {
			// 	color: $minor-color;
			// 	font-weight: 500;
			// }
		}
	}
</style>