From ded1e4d7329beb3ce741120e4d5c0f098788cecd Mon Sep 17 00:00:00 2001
From: yangfuda <945208611@qq.com>
Date: Tue, 10 Jan 2023 16:06:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=AC=E4=BC=97=E5=8F=B7=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E6=96=B0=E9=A1=B9=E7=9B=AE-=E7=BB=91=E5=AE=9A=E6=89=8B?=
 =?UTF-8?q?=E6=9C=BA=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js     |   1 +
 src/views/smsManage.vue | 243 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 244 insertions(+)
 create mode 100644 src/views/smsManage.vue

diff --git a/src/router/index.js b/src/router/index.js
index d9c3adc..75b8780 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,6 +17,7 @@ const _import = require('./import-views')
 const globalRoutes = [
   { path: '/404', component: () => import('@/views/common/404'), name: '404', meta: { title: '404未找到' } },
   { path: '/login', component: () => import('@/views/common/login'), name: 'login', meta: { title: '登录' } },
+  { path: '/smsManage', component: () => import('@/views/smsManage'), name: 'smsManage', meta: { title: '绑定手机号' } }
 ]
 
 // 主入口路由(需嵌套上左右整体布局)
diff --git a/src/views/smsManage.vue b/src/views/smsManage.vue
new file mode 100644
index 0000000..14be9e0
--- /dev/null
+++ b/src/views/smsManage.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="app-container">
+    <div class="title">
+      <!-- <img style="display: block;
+    margin: 0 auto;" src="../../static/images/onlineHome/yinnongLogo.jpg" alt=""> -->
+    </div>
+    <!-- <van-tabs v-model="active" :swipeable="true" style="margin-top:0.5rem;padding:0 10px;"> -->
+      <van-form style="margin:50px 0;">
+        <van-field
+          v-model="formData.memberName"
+          name="请输入姓名"
+          placeholder="请输入姓名"
+          :rules="[{ required: true, message: '' }]"
+        />
+        <van-field
+          v-model="formData.idcard"
+          name="请输入身份证号"
+          style="margin-top: 20px"
+          placeholder="请输入身份证号"
+          :rules="[{ required: true, message: '' }]"
+        />
+        <van-field
+          v-model="formData.mobile"
+          name="请输入手机号"
+          style="margin-top: 20px"
+          placeholder="请输入手机号"
+          :rules="[{ required: true, message: '' }]"
+        />
+          <van-field
+          v-model="formData.code"
+          center
+          clearable
+          label="验证码"
+          placeholder="图形验证码"
+        >
+          <template #button>
+            <img style="width: 100px" :src="codeUrl" @click="getCode" />
+          </template>
+        </van-field>
+        <van-field
+          v-model="formData.smsCode"
+          style="margin-top: 20px"
+          placeholder="请输入验证码"
+          :rules="[{ required: true, message: '' }]"
+        >
+          <template #button>
+            <!-- <van-button size="mini" type="info" @click="getRegisterSmsCode" >获取验证码</van-button> -->
+            <div  class="registerSmsBtn" @click="getRegisterSmsCode">{{
+              computeTime > 0 ? `(${computeTime}s)已发送` : "获取短信码"
+            }}</div>
+
+
+          </template>
+        </van-field>
+        <div style="margin: 50px 16px 16px;">
+          <van-button block type="info" native-type="submit" @click="registerSubmit">绑定</van-button>
+        </div>
+      </van-form>
+  </div>
+</template>
+<style scoped>
+  .app-container{
+    background: #fff;
+    height: 100vh;
+  }
+  .title{
+    padding-top: 20%;
+    width: 88%;
+    margin: 0 auto;
+  }
+  .van-tab--active{
+    font-size: .6rem;
+    font-weight: bold;
+  }
+  .van-tabs__line{
+    background:#1D6FE9;
+    width: 0.15rem;
+    height: 0.15rem;
+    border-radius: 0.07rem;
+    bottom: 0.3rem;
+  }
+  .van-tabs__nav{
+    padding:0
+  }
+  .van-tab{
+    display: inline-block;
+    flex: inherit;
+    margin-left: 30px;
+    line-height: .8rem;
+  }
+  .van-tab__text--ellipsis {
+    overflow: auto;
+  }
+  .van-password-input{
+    width: 50%;
+    margin: 0 auto;
+  }
+  [class*=van-hairline]::after{
+    border:none;
+  }
+  .van-password-input__security li{
+    margin: 0 10px;
+    border-bottom: 3px solid black;
+  }
+  .registerSmsBtn{
+    color: rgb(29, 111, 233);
+    font-size: 0.34rem;
+
+  }
+</style>
+<script>
+import { getUUID } from '@/utils'
+export default {
+  data() {
+    return {
+      showMessage:false,
+      smsCodeValue:"",
+      showKeyboard:false,
+      formData: {
+        username: "", //账号
+        password: "", //密码
+        code: null, //图片验证码
+        uuid: null, //识别uuid
+        mobile: null, //手机号
+        smsCode: null, //短信验证码
+        memberName:null, //身份信息
+        idcard:null, //身份号码
+        rememberMe:false
+      },
+      loading: false,
+      codeUrl: "", //验证码
+      isSmsLogin: false, //是否手机验证码
+      computeTime: 0,
+      active:1
+    };
+  },
+  created() {
+    this.getCode();
+    this.reset();
+  },
+  methods: {
+    reset(){
+
+    },
+    showPopup(){
+      this.showKeyboard = !this.showKeyboard
+    },
+    showMessagePop(){
+      this.showMessage = !this.showMessage
+    },
+    getCode() {
+      this.formData.uuid = getUUID()
+      this.codeUrl = this.$http.adornUrl(`/captcha?uuid=${this.formData.uuid}`)
+    },
+    getRegisterSmsCode(){
+       if (!this.computeTime) {
+      let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
+      if (!myreg.test(this.formData.mobile)) {
+        this.$dialog.alert({
+            message: '手机号格式不正确',
+          });
+        return false;
+      }else if (this.formData.code == "") {
+        this.$dialog.alert({
+            message: '图片验证码不能为空',
+        });
+        return false;
+      }
+      if (this.active==2) {
+        let formObj = {
+          code :this.formData.code,
+          mobile:this.formData.mobile,
+          uuid:this.formData.uuid
+        }
+        getRegisterSmsCode(formObj).then((res) => {
+          console.log(res)
+          console.log(res.code == 200)
+          if(res.code == 200) {
+            this.$dialog.alert({
+                message: '验证码已发送',
+            });
+            this.formData.uuid = res.uuid;
+            this.computeTime = 60;
+            this.timer = setInterval(() => {
+              this.computeTime--;
+              if (this.computeTime <= 0) {
+                clearInterval(this.timer);
+              }
+            }, 1000);
+          }
+        }).catch((res)=>{
+          if(res=='Error: 验证码已失效'){
+            this.getCode()
+          }
+        });
+      }
+      }
+    },
+    registerSubmit(){
+
+      //注册
+      if (this.formData.memberName == "") {
+        this.$dialog.alert({
+            message: '姓名不能为空',
+        });
+        return false;
+      } else if (this.formData.idcard == "") {
+        this.$dialog.alert({
+            message: '身份证号不能为空',
+        });
+        return false;
+      } else if (this.formData.mobile == "") {
+        this.$dialog.alert({
+            message: '手机号码不能为空',
+        });
+        return false;
+      }else if (this.formData.smsCode == "") {
+        this.$dialog.alert({
+            message: '短信验证码不能为空',
+        });
+        return false;
+      }
+      //registerCheck,registerOn
+      console.log(this.formData)
+      registerCheck(this.formData).then((res)=>{
+        if(res.code == 200){
+          registerOn(this.formData).then((res)=>{
+            if(res.code == 200){
+              //
+              this.$dialog.alert({
+                  message: '您的初始密码：'+res.password,
+              }).then(() => {
+                  this.$router.push({ path: "/yinnong/workbench" }).catch(() => {});
+              });
+            }
+          })
+        }
+      })
+
+    }
+  },
+};
+</script>
\ No newline at end of file