st-comp 0.0.202 → 0.0.203

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.202",
+  "version": "0.0.203",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/packages/User/components/EditInfoDialog/Mobile.vue

@@ -9,16 +9,16 @@ const visible = ref(false);
 const ruleFormRef = ref();
 const ruleForm = reactive({
   mobile: "",
+  verifyCode: "",
 });
 const rules = reactive({
   mobile: [
     { required: true, message: "请输入手机号", trigger: "blur" },
     {
       validator: (rule, value, callback) => {
-        const regex = /^1[3-9]\d{9}$/;
         if (value === userData.mobile) {
           callback("新手机号与旧手机号相同");
-        } else if (!regex.test(value)) {
+        } else if (!validatePhone(value)) {
           callback("手机号格式错误");
         } else {
           callback();
@@ -27,8 +27,40 @@ const rules = reactive({
       trigger: "blur",
     },
   ],
+  verifyCode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
 });
 
+const smsTimer = ref(null);
+const smsInterval = ref(0);
+const smsInterval_init = 60;
+
+// 手机号校验
+const validatePhone = (mobile) => {
+  return /^1[3-9]\d{9}$/.test(mobile);
+};
+// 获取短信验证码
+const getSms = async () => {
+  // 校验手机号格式
+  if (!ruleForm.mobile) return false;
+  if (!validatePhone(ruleForm.mobile)) return ElMessage.error("手机号格式错误");
+
+  // 接口请求
+  const params = {
+    type: 5,
+    userId: userData.id,
+    mobile: ruleForm.mobile,
+  };
+  await stConfig.request.post("/invest/sys/commonSms", params);
+  ElMessage.success("短信验证码已发送");
+
+  // 间隔设置
+  smsInterval.value = smsInterval_init;
+  smsTimer.value = setInterval(() => {
+    smsInterval.value -= 1;
+    if (smsInterval.value === 0) clearInterval(smsTimer.value);
+  }, 1000);
+};
+
 // 打开
 const handleOpen = () => {
   ruleForm.mobile = "";
@@ -57,7 +89,12 @@ const handleSubmit = () => {
 
 <template>
   <div class="mobile">
-    <el-text type="info">{{ userData.mobile ?? "暂无" }}</el-text>
+    <el-text
+      v-if="userData.mobile"
+      type="info"
+    >
+      {{ userData.mobile }}
+    </el-text>
     <el-text
       class="btn"
       size="small"
@@ -69,6 +106,7 @@ const handleSubmit = () => {
   </div>
   <!-- 手机号绑定窗口 -->
   <el-dialog
+    modal-class="mobile-dialog"
     v-model="visible"
     width="460"
     title="手机号绑定"
@@ -86,6 +124,33 @@ const handleSubmit = () => {
       >
         <el-input v-model="ruleForm.mobile" />
       </el-form-item>
+      <el-form-item
+        label="验证码"
+        prop="verifyCode"
+      >
+        <el-input
+          class="sms-input"
+          v-model="ruleForm.verifyCode"
+          placeholder="验证码"
+        >
+          <template #suffix>
+            <span
+              v-if="smsInterval"
+              class="get-button disabled"
+            >
+              重新发送({{ smsInterval }})
+            </span>
+            <span
+              v-else
+              class="get-button"
+              :class="{ disabled: !ruleForm.mobile }"
+              @click.stop="getSms"
+            >
+              获取验证码
+            </span>
+          </template>
+        </el-input>
+      </el-form-item>
     </el-form>
     <template #footer>
       <el-button @click="visible = false"> 取消 </el-button>
@@ -107,4 +172,19 @@ const handleSubmit = () => {
     cursor: pointer;
   }
 }
+.mobile-dialog {
+  .sms-input {
+    .get-button {
+      color: var(--el-color-primary);
+      line-height: 16px;
+      border-left: var(--el-border);
+      padding-left: 10px;
+      cursor: pointer;
+    }
+    .disabled {
+      color: var(--el-color-info);
+      cursor: not-allowed;
+    }
+  }
+}
 </style>