|
|
@@ -0,0 +1,206 @@
|
|
|
+<template>
|
|
|
+ <view class="page">
|
|
|
+ <view class="form">
|
|
|
+ <view class="mt-2 position-relative border-bottom dis a-c">
|
|
|
+ <text>手机号</text>
|
|
|
+ <input type="text" v-model="phone" class="uni-input common-input" maxlength="11" disabled
|
|
|
+ style="padding-left: 56rpx;" placeholder="手机号" />
|
|
|
+ </view>
|
|
|
+ <view class="mt-2 position-relative border-bottom dis a-c">
|
|
|
+ <text>验证码</text>
|
|
|
+ <input type="text" v-model="smsCode" class="uni-input common-input" maxlength="6"
|
|
|
+ style="padding-right:120px;padding-left: 56rpx;" placeholder="请输入验证码" />
|
|
|
+ <view class="position-absolute top-0 right-0 d-flex a-center j-center text-light-muted"
|
|
|
+ style="width: 240rpx;height: 100%;" @tap="getCheckNum">
|
|
|
+ <view class="d-flex a-center j-center "
|
|
|
+ :class="!codetime?'yanzhengmaView1 text-color':'yanzhengmaView2'">
|
|
|
+ {{!codetime?'获取验证码':codetime+' S'+'后重新获取'}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="logout dis a-c j-c" @tap="submit">
|
|
|
+ <text>提交</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ phone: "", //手机号
|
|
|
+ countdownTimer: null, //计时器
|
|
|
+ smsCode: "",
|
|
|
+ codetime: 0, //验证码获取倒计时
|
|
|
+ companyId: "", //订单号
|
|
|
+ isSending: false, // 新增发送状态标志
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+
|
|
|
+ },
|
|
|
+ async onLoad(params) {
|
|
|
+ if (params.companyId) {
|
|
|
+ this.companyId = params.companyId;
|
|
|
+ const res = await this.$http.get('/insurance/crawler/yaGetMobile', {
|
|
|
+ companyId: this.companyId,
|
|
|
+ });
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.phone = res.msg;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getCheckNum() {
|
|
|
+ try {
|
|
|
+ // 1. 防止重复点击
|
|
|
+ if (this.isSending || this.codetime > 0) return;
|
|
|
+
|
|
|
+ uni.hideKeyboard();
|
|
|
+ this.isSending = true; // 标记为发送中
|
|
|
+
|
|
|
+ // 2. 显示加载状态
|
|
|
+ uni.showLoading({
|
|
|
+ title: '发送中...',
|
|
|
+ mask: true
|
|
|
+ });
|
|
|
+
|
|
|
+ // 3. 发送验证码请求
|
|
|
+ const res = await this.$http.post('/insurance/crawler/yaSendCode', {
|
|
|
+ companyId: this.companyId,
|
|
|
+ smsCode: this.smsCode,
|
|
|
+ });
|
|
|
+
|
|
|
+ uni.hideLoading();
|
|
|
+ this.isSending = false; // 重置发送状态
|
|
|
+
|
|
|
+ if (res.code == 200) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "验证码发送成功",
|
|
|
+ icon: "success",
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+
|
|
|
+ // 启动倒计时
|
|
|
+ this.startCountdown();
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg || '发送失败',
|
|
|
+ icon: "error",
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log(1);
|
|
|
+ this.isSending = false; // 确保异常时也重置状态
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: '网络错误,请重试',
|
|
|
+ icon: "error",
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ console.error('发送验证码失败:', error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ startCountdown() {
|
|
|
+ if (this.countdownTimer) {
|
|
|
+ clearInterval(this.countdownTimer);
|
|
|
+ }
|
|
|
+ this.codetime = 180;
|
|
|
+ this.countdownTimer = setInterval(() => {
|
|
|
+ this.codetime--;
|
|
|
+ if (this.codetime <= 0) {
|
|
|
+ clearInterval(this.countdownTimer);
|
|
|
+ this.countdownTimer = null;
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if (this.countdownTimer) {
|
|
|
+ clearInterval(this.countdownTimer);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async submit() {
|
|
|
+ if (!this.smsCode) {
|
|
|
+ return uni.showToast({
|
|
|
+ title: '请输入验证码',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ let res = await this.$http.post('/insurance/crawler/yaVerifySendCode', {
|
|
|
+ companyId: this.companyId,
|
|
|
+ smsCode: this.smsCode,
|
|
|
+ });
|
|
|
+ if (res.code == '200') {
|
|
|
+ window.open(res.data);
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.msg,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page {
|
|
|
+ background-color: #f8f8f8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page {
|
|
|
+ padding: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logout {
|
|
|
+ width: 90%;
|
|
|
+ height: 88rpx;
|
|
|
+ margin: 40rpx auto 0;
|
|
|
+ background: #0052FF;
|
|
|
+ border-radius: 45rpx 45rpx 45rpx 45rpx;
|
|
|
+ border: 1rpx solid #0052FF;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 第三方登录End */
|
|
|
+ .yanzhengmaView1 {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ width: 150rpx;
|
|
|
+ padding: 5rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .yanzhengmaView2 {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ width: 220rpx;
|
|
|
+ padding: 5rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-color {
|
|
|
+ background-color: #0052FF;
|
|
|
+ border-radius: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-hover-color {
|
|
|
+ background-color: #0052FF;
|
|
|
+ opacity: 0.65;
|
|
|
+ border-radius: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-color {
|
|
|
+ color: #0052FF;
|
|
|
+ }
|
|
|
+</style>
|