partnerApp/pages/carInsure1/yonganCode.vue

<template>
	<view class="page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="mx-3 mt-3">
			<view class="phone d-flex">
				<view class="title">电话号码</view>
				<input placeholder="请输入手机号" v-model="mobile" maxlength="11" disabled />
			</view>
			<view class="code d-flex">
				<view class="title">验证码</view>
				<input placeholder="请输入验证码" v-model="code" maxlength="6" style="padding-right: 200rpx;"
					@input="OnBtnChange" />
				<view class="d-flex a-center j-center login-font-color yanzhengma" @tap="getCheckNum">
					<view class="d-flex a-center j-center"
						:class="!codetime?'yanzhengma1 main-text-color':'yanzhengma2'">
						{{!codetime?'获取验证码':codetime+' s'}}
					</view>
				</view>
			</view>
			<button class="my-3 mt-4 d-flex a-center j-center font-weight main-bg-color" :loading="loading"
				:class="{'main-bf-hover-color':disabled}" type="primary" @tap="submit" :disabled="disabled"
				style="letter-spacing: 20rpx;">提交</button>
		</view>
	</view>
</template>
<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/common/image-tools-base64.js';
	import {
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				mobile: "",
				code: "",
				disabled: true,
				loading: false,
				codetime: 0,
				showRecommend: false,
				recommendername: "",
				recommenderid: "",
				companyId: null, //子订单号
			}
		},
		async onLoad(params) {
			if (!!params.companyId) {
				this.companyId =String(params.companyId);
				this.mobile = params.mobile;
			}
		},
		methods: {
			...mapMutations(['setUserModules']),
			// 改变按钮状态
			OnBtnChange() {
				if (this.code) {
					this.disabled = false;
					return;
				}
				this.disabled = true;
			},
			// 获取验证码
			async getCheckNum() {
				if (this.codetime > 0) return;
				// 请求服务器，发送验证码
				let params = {
					companyId: this.companyId,
				}
				let res = await this.$http.post('/order/yongAn/getMessage', params);
				// 请求失败处理
				if (res.code == '200') {   
					uni.showToast({
						title: "发送成功",
						icon: "none"
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
				}
				// 发送成功，开启倒计时
				this.codetime = 60;
				let timer = setInterval(() => {
					this.codetime--;
					if (this.codetime < 1) {
						clearInterval(timer);
						this.codetime = 0;
					}
				}, 1000);
			},
			async submit() {
				let params1 = {
					companyId: this.companyId,
					verificationCode: this.code,
				}
				let res = await this.$http.post('/order/yongAn/getPayUrl', params1);
				if (res.code == '200') {
					uni.showToast({
						icon: "none",
						title: '支付成功，请等待跳转支付页面',
						duration: 1500
					})
					//#ifdef APP-PLUS
					uni.navigateTo({
						url: '/pages/carInsure1/zhifu1?url=' + res.msg
					})
					//#endif
					//#ifdef H5
					window.location.href = res.msg;
					//#endif
				} else {
					//#ifdef APP-PLUS
					return uni.showToast({
						icon: "none",
						title: res.msg,
						duration: 1500
					})
					//#endif
				}
			}

		}
	}
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.idCardBefore {
		background: rgba($themeColor, 0.1) url('/static/image/user/identy2.png') center center no-repeat;
		background-size: auto 70%;
		padding: 10upx;
	}

	.page {
		background: #F5F5F5;
		height: 100vh;
		width: 100%;
		position: absolute;
	}

	.phone,
	.password,
	.code {
		position: relative;
		height: 90upx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding: 0 30upx;
		margin-bottom: 26upx;
	}

	.phone .title,
	.password .title,
	.code .title {
		width: 160upx;
		flex-shrink: 0;
		color: #666;
	}

	.phone input,
	.password input,
	.code input {
		width: 350upx;
		font-size: 28upx;
	}

	.yanzhengma {
		width: 150upx;
		position: absolute;
		right: 30upx;
	}

	.yanzhengma1 {
		font-size: 26upx;
		background: #FFFFFF;
		border-radius: 10rpx;
		width: 150rpx;
		padding: 5rpx 0;
	}

	.yanzhengma2 {
		background: #FFFFFF;
		font-size: 26upx;
		color: #B2B2B2;
		border-radius: 10rpx;
		width: 150rpx;
		padding: 5rpx 0;
	}

	.recommendInfo {
		background: #FFFFFF;
	}

	.recommendInfo>view:nth-of-type(1) {
		border-bottom: 1px solid #ddd;
	}

	.recommendInfo>view:nth-of-type(1)>view:nth-of-type(1) {
		width: 150upx;
		height: 150upx;
		border-radius: 50%;
	}

	.recommendInfo>view:nth-of-type(1)>view:nth-of-type(1)>image {
		width: 100%;
		height: 100%;
	}

	.recommendInfo>view:nth-of-type(1)>view:nth-of-type(2) {
		padding: 20upx;
	}

	.recommendInfo>view:nth-of-type(1)>view:nth-of-type(2)>view {
		height: 55upx;
	}

	.recommendInfo>view:nth-of-type(2) {
		line-height: 50upx;
	}
</style>