mall_client/zyhs3_uniapp/components/payModal/payModal.vue

<template>
	<view>
		<u-modal duration="100" width="640rpx" confirmColor="#576B95" cancelColor="#000000" :closeOnClickOverlay="true"
			:showCancelButton="true" :confirmText="confirmText" @confirm="handlerConfirm" @cancel="handlerClose"
			@close="handlerClose" :show="show">
			<view class="slot-content">
				<view class="title">输入验证码</view>
				<!-- <u-gap height="32rpx"></u-gap> -->
				<view class="tips"> 我们已发送短信验证码到您的手机号 </view>
				<view class="tips">
					{{ userInfo.mobile }}
				</view>
				<u-gap height="32rpx"></u-gap>
				<u-code-input :focus="show" color="#000000" fontSize="56rpx" :bold="true" borderColor="#ff7000"
					v-model="value" @finish="handlerCodeFinish" @change="handlerInput"></u-code-input>
				<u-gap height="32rpx"></u-gap>
				<view class="btn_send" :class="timer != null ? 'btn_send_dis' : ''" @click="handlerSend">{{ text }}
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		payInvestmentRecord
	} from "@/api/system/user.js";

	import {
		sendMobileCode
	} from "@/api/login";
	export default {
		name: "payModal",
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			investmentObj: {
				type: Object,
				default: () => {},
			},
			confirmText: {
				type: String,
				default: "确认支付",
			},
			payType: {
				type: String,
				default: "pay",
			},
			redirectUrl: {
				type: String,
				default: "/pages/mine/record/index",
			}
		},
		data() {
			return {
				timer: null,
				value: "",
				text: "重新发送",
				count: "",
				userInfo: JSON.parse(uni.getStorageSync("App-UserInfo")),
			};
		},
		methods: {
			handlerClose() {
				this.value = "";
				this.$emit("handlerClose");
			},
			handlerConfirm() {
				this.handelerConfirmPay();
			},
			handlerCodeFinish() {
				this.$emit("handlerInput", this.value);
			},
			handlerInput() {
				// this.$emit('handlerInput', this.value);
			},
			handelerConfirmPay() {
				let {
					order,
					value,
					userInfo
				} = this.$data;
				if (value == "")
					return uni.showToast({
						icon: "none",
						title: "请输入验证码！",
					});
				if (value.length != 6)
					return uni.showToast({
						icon: "none",
						title: "请输入正确的验证码！",
					});
				if (this.payType != "pay") {
					return this.$emit("handlerConfirmChange");
				}
				this.showModal = false;
				uni.showLoading({
					title: "加载中",
					mask: true,
				});
				let that = this;
				payInvestmentRecord({
					investmentRecordCode: this.investmentObj.investmentCode,
					phone: userInfo.mobile,
					phoneCode: value,
				}).then((res) => {
					uni.hideLoading();
					let {
						code,
						msg
					} = res;
					this.handlerClose();
					this.value = "";
					that.$emit("paySucess");
					if (that.redirectUrl) {
						uni.showToast({
							icon: "none",
							title: msg,
							success: () => {
								uni.navigateTo({
									url: that.redirectUrl,
								});
							},
						});
					}
				})
			},
			async handlerSend() {
				if (this.count != 0) return;
				let res = await sendMobileCode({
					mobile: this.userInfo.mobile,
				});
				if (res.code == 200) {
					if (!this.showModal) this.showModal = true;
					uni.showToast({
						icon: "none",
						title: "验证码发送成功！",
					});
					// this.$toast("验证码发送成功");
					const TIME_COUNT = 180;
					this.count = TIME_COUNT;

					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
							this.text = this.count + "后重新发送";
						} else {
							this.text = "重新发送";
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000);
				} else {
					uni.showToast({
						icon: "none",
						title: res.msg,
					});
				}
			},
		},
	};
</script>

<style lang="scss">
	.slot-content {
		.title {
			text-align: center;
			font-size: 34rpx;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.9);
			margin-bottom: 20rpx;
		}

		.tips {
			text-align: center;
			font-weight: 400;
		}

		.btn_send {
			color: #ff7000;
			font-size: 28rpx;
			text-align: center;
			text-decoration-line: underline;
		}

		.btn_send_dis {
			color: #999999;
			text-decoration-line: none;
		}
	}

	/deep/.u-code-input__item {
		width: 80rpx !important;
		height: 96rpx !important;
		border-radius: 8rpx;
		background: rgba(255, 112, 0, 0.12) !important;
		margin-right: 9rpx !important;
	}

	/deep/.u-code-input__input {
		height: 96rpx !important;
		caret-color: #000000 !important;
	}

	/deep/.u-modal__content {
		padding-bottom: 20rpx !important;
	}
</style>