兑换页面添加验证码

src/views/scanRedeem.vue

@@ -23,7 +23,27 @@
         <p>绑定手机号：</p>
         <el-input placeholder="请输入需要绑定的手机号" v-model="userPhone">
         </el-input>
+        <div class="code-box">
+          <el-input
+            v-model="code"
+            autocomplete="off"
+            placeholder="请输入验证码"
+            class="code-input"
+            @blur="handleTrim('code')"
+            maxlength="6"
+          >
+          </el-input>
+          <el-button
+            type="primary"
+            @click="sendCode('time', 'verificationCodeShow')"
+            size="small"
+            class="sendCode"
+          >
+            {{ verificationCodeShow ? time + "s" : "发送验证码" }}
+          </el-button>
+        </div>
       </div>
+
       <el-button
         class="sure-btn"
         type="primary"
@@ -41,13 +61,14 @@
       >2. 手机号绑定后自动注册为平台用户，并自动兑换商品。</b
     >
     <b class="tips-content"
-      >3. 请您在电脑端浏览器登录https://read.21stcentury.com.cn
+      >3. 请您在【电脑端】浏览器登录https://read.21stcentury.com.cn
       平台至书架模块自行查看对应电子内容。</b
     >
   </div>
 </template>
 
 <script>
+import { getLogin } from "@/api/ajax";
 export default {
   name: "scanRedeem",
   components: {},
@@ -58,6 +79,10 @@ export default {
       userPhone: "", // 用户手机号
       flag: true,
       loading: false,
+      code: "",
+      time: 60, //获取验证码的时间
+      verificationCodeShow: false, //是否已经获取了验证码
+      timer: null,
     };
   },
   watch: {},
@@ -66,7 +91,7 @@ export default {
     sureChange() {
       if (this.trackingNumber && this.trackingNumber.trim()) {
         this.flag = false;
-        this.userPhone = "13717583743";
+        this.userPhone = "13717582171";
       } else {
         this.$message.warning("请先输入快递单号");
       }
@@ -75,20 +100,72 @@ export default {
     surePhone() {
       if (this.userPhone && this.userPhone.trim()) {
         // this.loading = true;
-        this.$confirm(
-          "请您在电脑端浏览器登录https://read.21stcentury.com.cn平台至书架模块自行查看对应电子内容",
-          "兑换成功",
-          {
-            confirmButtonText: "确定",
-            cancelButtonText: "取消",
-            type: "success",
-            customClass: "scanRedeem-model",
-          }
-        ).then(({}) => {});
+        let pwd = "123456";
+        let str =
+          "<p>用户名：" +
+          this.userPhone +
+          "</p><p>密码：" +
+          pwd +
+          "</p>请您在<b>【电脑端】</b>浏览器登录https://read.21stcentury.com.cn平台至书架模块自行查看对应电子内容";
+        this.$confirm(str, "兑换成功", {
+          type: "success",
+          customClass: "scanRedeem-model",
+          showClose: false,
+          showCancelButton: false,
+          showConfirmButton: false,
+          dangerouslyUseHTMLString: true,
+          closeOnClickModal: false,
+        }).then(({}) => {});
       } else {
         this.$message.warning("请输入需要绑定的手机号");
       }
     },
+    // 发送验证码
+    sendCode(time, flag) {
+      let this_ = this;
+      if (this_[time] != 60) {
+        return;
+      }
+      this_.timer = null;
+      if (this_.userPhone) {
+        let reg = /^1[3-9]\d{9}$/;
+        let regex = /^09\d{7,8}$/;
+        let result = reg.test(this_.userPhone) || regex.test(this_.userPhone);
+        if (!result) {
+          this_.$message.warning("请输入正确的手机号");
+          return;
+        }
+        this_[flag] = true;
+        this_.timer = setInterval(() => {
+          this_[time]--;
+          if (this_[time] == 0) {
+            this_[flag] = false;
+            clearInterval(this_.timer);
+            this_.timer = null;
+            this_[time] = 60;
+          }
+        }, 1000);
+        let MethodName = "/OrgServer/LoginControl/SendVerificationCode";
+        let data = {
+          send_type: "SMS",
+          phone_or_email: this_.userPhone,
+        };
+        getLogin(MethodName, data)
+          .then((res) => {})
+          .catch(() => {
+            this_[flag] = false;
+            clearInterval(this_.timer);
+            this_.timer = null;
+            this_[time] = 60;
+          });
+      } else {
+        this_.$message.warning("请先输入手机号");
+      }
+    },
+    // 去掉前后空格
+    handleTrim(fild) {
+      this[fild] = this[fild].trim();
+    },
   },
   mounted() {},
 };
@@ -144,6 +221,15 @@ export default {
     background: #165dff;
     border-color: #165dff;
   }
+  .code-box {
+    display: flex;
+    margin: 10px 0;
+    .sendCode {
+      border-radius: 0 4px 4px 0;
+      width: 92px;
+      flex-shrink: 0;
+    }
+  }
 }
 </style>
 <style lang="scss">