完善

src/components/Login/updatepsw.vue

@@ -408,7 +408,7 @@ export default {
     margin-right: 16px;
   }
   .login-form-button {
-    width: 96px;
+    width: 60px;
     height: 32px;
     margin-top: 16px;
     border-radius: 0px;
@@ -418,16 +418,17 @@ export default {
     color: white;
     padding: 0 !important;
     line-height: 32px;
+    border-radius: 6px;
   }
   .login-form-button span {
     letter-spacing: 1px;
   }
 }
 .state-box{
-	position: absolute;
+    position: absolute;
-	left: -111px;
+    left: -37px;
-	width: 430px;
+    width: 430px;
-	top: -15px;
+    top: -15px;
 }
 .sms-btn{
   width: 102px !important;

src/components/Login/updateptel.vue

@@ -0,0 +1,406 @@
+<template>
+  <div class="center">
+    <div class="formcontainer">
+      <!-- <ul class="loginchange centerall">
+        <router-link to="/login"><li class="goback">&lt;返回</li></router-link>
+        <li class="loginactive">找回密码</li>
+      </ul>-->
+      <div class="formbox">
+        <template>
+          <a-form id="components-form-demo-normal-login" hideRequiredMark :form="form1" class="login-form" @submit="phonehandleSubmit" layout="horizontal" :wrapperCol="{ span: 14 }" :labelCol="{ span: 4 }">
+            <a-form-item label="手机号" style="text-align: left;margin-top: 40px;">
+              <a-input v-decorator="[
+                  'tel',
+                  {
+                    rules: [
+                      { required: true, message: '请输入手机号' },
+                      {
+                        pattern: /^1[3456789]\d{9}$/,
+                        message: '请输入正确手机号',
+                      },
+                    ],
+                    validateTrigger: 'submit',
+                  },
+                ]" autocomplete="off" :maxLength="11" placeholder="请输入手机号">
+                <!-- <i slot="prefix" class="icon-shouji iconfont" style="font-size: 24px" /> -->
+              </a-input>
+            </a-form-item>
+            <a-form-item label="验证码" style="text-align: left;margin-bottom: 64px;">
+              <div class="g_flex_row_start">
+                <div>
+                  <a-input style="width:240px" v-decorator="[
+                    'code',
+                    {
+                      rules: [
+                        {
+                          required: true,
+                          message: '请输入验证码',
+                        },
+                      ],
+                      validateTrigger: 'submit',
+                    },
+                  ]" type="text" placeholder="请输入短信验证码">
+                  <!-- <i slot="prefix" class="icon-duanxinyanzheng iconfont" /> -->
+                  <!-- <span class="getrulecode" slot="suffix">
+                    <span @click="getPhoneCode" data-mark="getcode" v-if="timedata.isfinish">获取验证码</span>
+                    <timmer :timedata="timedata" v-if="!timedata.isfinish" />
+                  </span> -->
+                  </a-input>
+                </div>
+                <div class="g_ml_12">
+                  <!-- <a-button>
+                    <span @click="getPhoneCode" data-mark="getcode" v-if="timedata.isfinish">获取验证码</span>
+                    <timmer :timedata="timedata" v-if="!timedata.isfinish" />
+                  </a-button> -->
+                  <div class="getrulecode sms-btn" style="line-height: 32px;">
+                    <span @click.stop="getPhoneCode" data-mark="getcode" v-if="timedata.isfinish">获取验证码</span>
+                    <timmer :timedata="timedata" v-if="!timedata.isfinish" />
+                  </div>
+                </div>
+              </div>
+            </a-form-item>
+            <a-form-item label class="submit" style="height: 40px;position: relative;margin-bottom: 0;">
+              <div class="state-box">
+				      <a-button type="primary" class="cancel login-form-button" @click="cancel">取消</a-button>
+				    <a-button 
+				  	style="border: 1px solid #1890ff;"
+				    type="primary" html-type="submit" :loading="btnLoading" class="login-form-button">确定</a-button>
+			  </div>
+			</a-form-item>
+          </a-form>
+          <!-- <div class="register">
+            <router-link to="/register">还没有账号，立即注册</router-link>
+          </div>-->
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getPhoneCodeApi, updatePswApi } from '../../api/login'
+import { setUserTelApi } from '../../api/userinfo'
+import timmer from './components/countback.vue'
+
+export default {
+  inject: ['reload'],
+  // 组件名称
+  name: 'updatepsw',
+  // 局部注册的组件
+  components: {
+    timmer,
+  },
+  // 组件参数 接收来自父组件的数据
+  props: {
+    loginShow: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  // 组件状态值
+  data() {
+    return {
+      loginway: 1,
+      ischecked: false,
+      setpassword: '', // 重置密码的密码字段
+      form1: this.$form.createForm(this),
+      timedata: {
+        isfinish: true,
+        deadline: 60,
+        timmer: null,
+      },
+      btnLoading: false,
+    }
+  },
+  // 计算属性
+  computed: {},
+  // 侦听器
+  watch: {},
+  // 生命周期钩子   注：没用到的钩子请自行删除
+  /**
+   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
+   */
+  created() {},
+  /**
+   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
+   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
+   */
+  mounted() {},
+  // 组件方法
+  methods: {
+    cancel() {
+      this.$emit('update:loginShow', false)
+    },
+    async phonehandleSubmit(e) {
+      e.preventDefault()
+      let params = new FormData()
+      this.form1.validateFields(async (err, values) => {
+        console.log(err)
+        console.log(values)
+        if (!err) {
+          try {
+            var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
+            if (values.tel.length === 0) {
+              this.$message.warning('请输入手机号')
+            } else if (!reg_tel.test(values.tel)) {
+              this.$message.warning('请输入正确的手机号')
+            } else if (values.code.length === 0) {
+              this.$message.warning('请输入验证码')
+            } else {
+              this.timedata.isfinish = false
+              const { data } = await setUserTelApi(values)
+              console.log('why',data)
+              if (data.status === 200) {
+                this.$message.success('绑定手机成功')
+              }else{
+                this.$message.error(data.msg)
+              }
+            }
+          } catch (error) {
+            console.log(error)
+          }
+        }
+      })
+    },
+    async getPhoneCode() {
+      const that = this
+
+      this.form1.validateFields(['tel'], async (err, values) => {
+        console.log(values)
+
+        if (!err) {
+          that.timedata.isfinish = false
+
+          try {
+            const { data } = await getPhoneCodeApi({ tel: values.tel })
+            console.log(data)
+            if (data.status !== 200) {
+              this.$message.warning(data.msg)
+            }
+          } catch (error) {
+            console.log(error)
+          }
+        } else {
+          console.log(err)
+        }
+      })
+    },
+    checked() {
+      console.log(this.ischecked)
+    },
+    getpassword(e) {
+      this.setpassword = e.target.value
+      console.log(e)
+    },
+    // 检验密码不一致的回调
+    replacepassword(rule, value, callback) {
+      console.log(rule)
+      console.log(value)
+      if (this.setpassword !== value) {
+        callback('两次密码不一致')
+      }
+      callback()
+
+      // console.log(callback);
+    },
+  },
+}
+</script>
+
+<style scoped lang="less">
+.submit {
+  display: flex;
+  justify-content: center;
+}
+.center {
+  width: unset !important;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  // margin: 0 auto;
+  /deep/ .login-form {
+    background-color: #fff !important;
+  }
+  .centerall {
+    margin: 0 auto;
+  }
+  .loginchange {
+    display: flex;
+    position: relative;
+    width: 230px;
+    justify-content: center;
+    margin-top: 32px;
+    .loginactive {
+      color: #4d575e;
+      border-bottom: 1px solid #4d575e;
+    }
+    a {
+      li {
+        position: absolute;
+        left: 0;
+        top: 0;
+        font-size: 14px;
+        margin-bottom: 0;
+        padding: 0;
+        color: #4d575e;
+        &:hover {
+          color: #ff6a00cc;
+        }
+      }
+    }
+    li {
+      padding: 0 0 4px 0;
+      margin-bottom: 24px;
+      font-size: 14px;
+      text-align: left;
+      color: #cccccc;
+      line-height: 22px;
+      cursor: pointer;
+    }
+  }
+  .formbox {
+    width: 444px;
+    margin: 0 auto;
+    .ant-form-item {
+      display: flex;
+      margin-bottom: 16px;
+      // align-items: center;
+    }
+    /deep/ .ant-form-explain {
+      // margin-top: -2px;
+      // line-height: 20px;
+      min-height: 20px !important;
+    }
+    /deep/.ant-form-item-control {
+      width: 360px !important;
+      .ant-input-affix-wrapper {
+        display: flex;
+        flex: 1;
+      }
+    }
+
+    /deep/.ant-input-affix-wrapper {
+      i {
+        font-size: 26px;
+        // margin: 0 8px 0 4px;
+        color: #4d575e;
+      }
+      .ant-input {
+        height: 32px;
+        // background-color: #f6f6f6;
+        // width: 430px;
+        text-indent: 15px;
+        font-size: 14px;
+        // border: none;
+        padding: 0 !important;
+        border: 1px solid #dddddd;
+        &:hover {
+          border-color: #1890ff;
+        }
+        &:focus {
+          box-shadow: none;
+        }
+        &::placeholder {
+          opacity: 0.4;
+          color: #4d575e;
+          font-size: 14px;
+          text-indent: 15px;
+        }
+      }
+    }
+    .ant-input {
+      height: 32px;
+      // background-color: #f6f6f6;
+      // width: 430px;
+      text-indent: 15px;
+      font-size: 14px;
+      // border: none;
+      padding: 0 !important;
+      border: 1px solid #dddddd;
+      &:hover {
+        border-color: #1890ff;
+      }
+      &:focus {
+        box-shadow: none;
+      }
+      &::placeholder {
+        opacity: 0.4;
+        color: #4d575e;
+        font-size: 14px;
+        text-indent: 15px;
+      }
+    }
+
+    .register {
+      display: flex;
+      justify-content: center;
+      font-size: 12px;
+      span {
+        color: #4d575e;
+        i {
+          vertical-align: middle;
+          margin-right: 10px;
+        }
+      }
+      a {
+        color: #353649;
+      }
+    }
+
+    .getrulecode {
+      font-size: 12px;
+      width: 67px;
+      text-align: center;
+      border-left: 1px #cccccc solid;
+      line-height: 12px;
+      color: #4d575e;
+      span[data-mark='getcode'] {
+        padding: 0 0 0 5px;
+        cursor: pointer;
+      }
+    }
+  }
+  .cancel.login-form-button {
+    background-color: #fff;
+    color: #1890ff;
+    border: 1px solid #1890ff;
+    margin-right: 16px;
+  }
+  .login-form-button {
+    width: 60px;
+    height: 32px;
+    margin-top: 16px;
+    border-radius: 6px;
+    background-color: #1890ff;
+    font-size: 14px;
+    border: none;
+    color: white;
+    padding: 0 !important;
+    line-height: 32px;
+  }
+  .login-form-button span {
+    letter-spacing: 1px;
+  }
+}
+.sms-btn{
+  width: 102px !important;
+  height: 32px !important;
+  border: 1px solid #1890ff !important;
+  color: #1677ff !important;
+  background-color: transparent;
+  border-color: #1677ff;
+  box-shadow: none;
+  font-size: 14px !important;
+  // padding: 7px 12.5px;
+  border-radius: 6px;
+  position: relative;
+  top: 4px;
+}
+
+.state-box{
+    position: absolute;
+    left: -37px;
+    width: 430px;
+    top: -15px;
+}
+</style>

src/components/userinfo/accountsetting/components/loginpsw.vue

@@ -18,7 +18,7 @@
         <div class="label g_fs_14 g_mb_12 g_c_3 g_fw_600">密保手机</div>
         <div class="result g_flex_row_start">
           <div class="g_c_9 g_fs_14">已绑定手机：177****8662</div>
-          <div class="g_fs_14 g_ml_16 g_c_main" style="cursor: pointer;">修改</div>
+          <div class="g_fs_14 g_ml_16 g_c_main" style="cursor: pointer;" @click="telShow = true">修改</div>
         </div>
       </div>
 
@@ -85,56 +85,27 @@
         <updatepsw :loginShow.sync='loginShow'></updatepsw>
       </div>
     </a-modal>
-
+    <a-modal title="修改手机号" :width="640" footer :visible="telShow" class="modal" @cancel="telShow = false" :maskClosable="false" okText="提交" cancelText="取消" :destroyOnClose="true">
-    <a-modal
+      <div style="margin: 0 auto;">
-      title="重置密码"
+        <updateptel :loginShow.sync='telShow'></updateptel>
-      :visible="pwdModal.isShow"
+      </div>
-      :confirm-loading="pwdModal.isLoading"
-      :footer="false"
-      class="login-sa-modal"
-      width="640px"
-    >
-      <a-form
-        :form="pwdModal"
-        layout="horizontal"
-        @submit="pwdHandleOk"
-      >
-        <div style="width: 75%;margin: 0 auto;">
-          <a-form-item label="手机号">
-            <a-input placeholder="请输入手机号" v-model="pwdModal.tel" style="width: 350px;" />
-          </a-form-item>
-
-          <a-form-item label="验证码">
-            <a-input placeholder="请输入验证码" v-model="pwdModal.code" style="width: 350px;" />
-          </a-form-item>
-
-          <a-form-item label="新密码">
-            <a-input placeholder="请输入新密码" v-model="pwdModal.user" style="width: 350px;" type="password" />
-          </a-form-item>
-
-          <a-form-item label="确认密码">
-            <a-input placeholder="请再次输入新密码" v-model="pwdModal.user" style="width: 350px;" type="password" />
-          </a-form-item>
-
-        </div>
-        <a-form-item style="margin-top: -5px;margin-bottom: 0;" class="g_flex_row_end">
-          <a-button style="height: 32px;overflow: hidden;margin-right: 16px;">取消</a-button>
-          <a-button type="primary" style="height: 32px;overflow: hidden;">确定</a-button>
-        </a-form-item>
-      </a-form>
     </a-modal>
+
+    
   </div>
 </template>
 
 <script>
 import { setUserPswApi } from '../../../../api/userinfo'
 import updatepsw from '../../../Login/updatepsw.vue'
+import updateptel from '../../../Login/updateptel.vue'
 export default {
   // 组件名称
   name: 'loginpsw',
   // 局部注册的组件
   components: {
     updatepsw,
+    updateptel
   },
   inject: ['logout'],
   // 组件参数 接收来自父组件的数据
@@ -152,6 +123,7 @@ export default {
       form: this.$form.createForm(this),
       loginShow: false,
       btnLoading: false,
+      telShow:false,
 
       pwdModal:{
         isShow:false