17pdf_front_end/pages/resetPsw.vue

<template>
  <div class="family text-[14px] leading-[1.42857143] text-[#333] bg-[#fff]">
    <div class="header h-80px">
      <nav
        class="nav-header-password col-md-12 leading-[80px] relative min-h-1px px-15px"
      >
        <div class="logo p-0">
          <!-- 此处a需不需要改 -->
          <nuxt-link to="/" class="text-[#666] text-[24px] no-underline bg-transparent">
            <span class="logo-img m-0 py-20px pl-170px"></span>
            <span>17PDF Reader</span>
          </nuxt-link>
        </div>
      </nav>
    </div>
    <div class="pc-container px-15px mx-auto sm:w-750px">
      <section class="password-reset-form py-72px px-0">
        <div class="px-15px mx-auto sm:w-750px">
          <div class="row mx-[-15px]">
            <div class="col-md-3 relative min-h-1px px-15px"></div>
            <div class="col-md-6 relative min-h-1px px-15px tiny:w-[70%] tiny:my-0 tiny:mx-auto">
              <h2 class="text-center text-[#00bbd3] text-[30px] mb-32px text-center mt-20px leading-[1.1] font-medium">
                设置新密码
              </h2>
            </div>
          </div>
          <div class="row form-wrapper mx-[-15px]">
            <div class="col-md-3 relative min-h-1px px-15px"></div>
            <div class="col-md-6 relative min-h-1px px-15px tiny:w-[70%] tiny:my-0 tiny:mx-auto">
              <h3 v-show = " showError " class="warning text-[24px] mt-20px mb-10px font-medium laeding-[1.1]">
                密码重置失败，请确认两次密码一致！
              </h3>         
                <input type="hidden" name="_method" value="put" /><input
                  type="hidden"
                  name="authenticity_token"
                  value="QBgQOkuMzY9y68DxLhdc/7SYTXa5vCi1AOwaPmWairZQEy8t4DnUteFfBA8cJWji/bkgBGwDpQrcSnHum6baJQ=="
                />
                <div class="form-group mb-34px">
                  <label
                    for="password"
                    class="text-[#333] text-[14px] font-normal max-w-full mb-5px"
                    >请输入新密码</label
                  >
                  <input
                    id="password"
                    v-model="newPassword"
                    type="password"
                    class="form-control h-40px w-full py-6px px-12px text-[14px] leading-[1.42857143] text-[#555] bg-[#fff] border border-solid border-gray-[#ccc] m-0"
                    @input="changeErr" 
                    @keydown="keydown($event)" 
                    @keydown.enter="resetPassword"
                  />
                </div>

                <div class="form-group mb-34px">
                  <label
                    for="password-confirmation"
                    class="text-[#666] text-[14px] font-normal max-w-full mb-5px"
                    >请再次输入新密码</label
                  >
                  <input
                    id="password-confirmation"
                    v-model="confirm_newPassword"
                    type="password"
                    class="form-control h-40px w-full py-6px px-12px text-[14px] leading-[1.42857143] text-[#555] bg-[#fff] border border-solid border-gray-[#ccc] m-0"
                    @input="changeErr" 
                    @keydown="keydown($event)"
                    @keydown.enter="resetPassword"
                  />
                </div>
                <div v-show="errMsg !== ''" class="error-mess error-mess-signup mb-5px">
                  <span id="error-message error-tip ">{{errMsg}}</span>
                </div>
                <button
                  class="btn btn-block bg-[#fdc656] text-[#fff] h-50px w-full py-6px px-12px mb-0 text-[14px] m-0 font-normal leading-[1.42857143] text-center whitespace-nowrap align-middle cursor-pointer border border-solid border-transparent"
                  type="submit"
                  @click="resetPassword"
                >
                  确认修改
                </button>
            </div>
          </div>
        </div>
      </section>
    </div>
    <footer class="footer-password">
      <div
        class="container-password footer-container w-full bg-[#222] text-[#fff] text-[18px] text-center px-15px mx-auto"
      >
        <div class="row footer-row py-50px px-100px text-left mx-[-15px]">
          <div
            class="col-xs-2 w-[16.66666667%] float-left relative min-h-1px px-15px"
          ></div>
          <div class="col-xs-3 w-[25%] float-left relative min-h-1px px-15px">
            <h4 class="title text-[18px] my-10px font-medium leading-[1.1]">
              PDF
            </h4>
            <ul class="p-0 mt-0 mb-10px">
              <li class="list-none text-[16px] mt-24px">
                <nuxt-link to="/" class="opacity-30 text-[#fff] no-underline bg-transparent">产品</nuxt-link>
              </li>
              <li class="list-none text-[16px] mt-24px">
                <nuxt-link to="/sdk" class="opacity-30 text-[#fff] no-underline bg-transparent">SDK介绍</nuxt-link>
              </li>
            </ul>
          </div>

          <div class="col-xs-3 w-[25%] float-left relative min-h-1px px-15px">
            <h4 class="title text-[18px] my-10px font-medium leading-[1.1]">
              下载
            </h4>
            <ul class="p-0 mt-0 mb-10px">
              <li class="list-none text-[16px] mt-24px">
                <a
                  target="_blank"
                  href="https://www.kdanmobile.com/zh-cn/pdf-reader/"
                  class="opacity-30 text-[#fff] no-underline bg-transparent"
                  >PDF Reader</a
                >
              </li>
              <li class="list-none text-[16px] mt-24px">
                <a
                  target="_blank"
                  href="https://markups.kdanmobile.com/"
                  class="opacity-30 text-[#fff] no-underline bg-transparent"
                  >Markup</a
                >
              </li>
              <li class="list-none text-[16px] mt-24px">
                <a
                  target="_blank"
                  href="https://www.kdanmobile.com/zh-cn/pdf-reader/"
                  class="opacity-30 text-[#fff] no-underline bg-transparent"
                  >Connoisser</a
                >
              </li>
              <li class="list-none text-[16px] mt-24px">
                <a
                  target="_blank"
                  href="https://chrome.google.com/webstore/detail/pdf-markup-my-web-markups/cbjngbfjehiofmihfpodinolkcokdojp"
                  class="opacity-30 text-[#fff] no-underline bg-transparent"
                  >网页插件</a
                >
              </li>
            </ul>
          </div>

          <div class="col-xs-3 w-[25%] float-left relative min-h-1px px-15px">
            <h4 class="title text-[18px] my-10px font-medium leading-[1.1]">
              联系我们
            </h4>
            <div class="icon mt-28px">
              <a
                class="call mt-20px mr-20px no-underline"
                title="0731-84225961"
              ></a>
              <a
                target="_blank"
                href="http://weibo.com/kdanmobilesoftware"
                class="weibo mt-20px mr-20px no-underline"
              ></a>
              <a
                class="qq mt-20px mr-20px no-underline"
                href="tencent://message/?uin=231368992&amp;Site"
              ></a>
            </div>
          </div>
        </div>
        <p class="text-muted text-[14px] text-[#777] mb-10px mt-0 mx-0">
          <a target="_blank" href="/terms" class="text-muted"
            >服务条款</a
          >
          |
          <a target="_blank" href="/privacy" class="text-muted"
            >隐私政策</a
          >
          | ©2022 Kdanmobile All Rights Reserved.
        </p>
        <p class="text-muted text-[14px] text-[#777] mb-10px mt-0 mx-0">
          凯钿公司 版权所有
        </p>
      </div>
    </footer>
  </div>
</template>

<script>
import qs from 'qs'
export default {
  layout(){
    return 'custom'
  },
  middleware:'user',
  head(){
    return {
      title:'17PDF Reader - 账号管理'
    }
  },
  data() {
    return {
      confirm_newPassword: '',
      newPassword: '',
      showError: false,
      errMsg: ''
    }
  },
  mounted() {
    this.isTheLinkVaild()
  },
  methods: {
    resetPassword() {
      this.isTheLinkVaild()
      if(this.newPassword === '' || this.confirm_newPassword === '') {
        this.errMsg = "密码不能为空"
        return
      } else if (this.newPassword.length < 6){
        this.errMsg = "密码不能少于六位"
        return
      } else if(this.confirm_newPassword !== this.newPassword){
        this.errMsg = "密码不一致"
        return
      }
      const data = qs.parse(location.href.split('?')[1])
      const params = {
        account: data.account,
        verifyCode: data.verifyCode,
        type: '0',
        newPassword: this.newPassword
      }
      this.$axios.post('members/resetPassword', params).then((res) => {
        if(res.code === 200) {
          this.$router.push('/')
        }
      })
    },
    changeErr(){
      this.errMsg = ''
    },
    keydown(event){
	    if(event.keyCode == 32){
		    event.returnValue = false
        this.errMsg = '请勿输入空格'
        }
    },
    isTheLinkVaild(){
      const data = qs.parse(location.href.split('?')[1])
      const params = {
        account: data.account,
        code: data.verifyCode
      }
      this.$axios.post('members/checkResetPasswordValid',qs.stringify(params)).then((res)=>{
        if(res.code !== 200) {
          this.$router.push('/edit')
        }
      })
    }
  }
}
</script>

<style>
/* 字体 */
.family {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* 头部边框 */
.nav-header-password {
  border-bottom: 1px solid #dadada;
}

/* logo背景图 */
.logo-img {
  background: url(~/assets/images/password/logo_pdf_top_red-f4311f231ebc70c4ba5ac8e1e6af907a48ea69f1f159c501a277ade70dfd7022.png)
    no-repeat 85% 50%;
}

/* input被focus */
.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%),
    0 0 8px rgb(102 175 233 / 60%);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(102 175 233 / 60%);
}

.btn:hover {
  background-color: #fab93d;
}

.container-password::before,
.container-password::after,
.row::before,
.row::after {
  content: ' ';
  display: table;
  clear: both;
}

/* windi css不能实现的 */
.form-control {
  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  -webkit-transition: border-color ease-in-out 0.15s,
    -webkit-box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

/* 确认按钮 */
.btn {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 底部图标 */
.call:before {
  content: url(~/assets/images/password/ic_foot_phone_normal-6c4b69f54ec3fd9ba9c181a1a776c0ea4695c2c4f26c134b88f41796d14c72af.png);
}

.weibo:before {
  content: url(~/assets/images/password/ic_foot_weibo_normal-c0b566a8cc73aa0577487c8f179327856e74b0572a787211917c3a2e671f8628.png);
}

.qq:before {
  content: url(~/assets/images/password/ic_foot_qq_normal-e67510e549266f75e77757d308306b01185370fffc5a105438d91601b6a486ec.png);
}
.error-mess {
    position: relative;
    font-size: 14px;
    text-align: center;
  }
  .error-mess-signup {
    position: initial;
    clear: both;
    margin-top: 15px;
  }
.error-mess span{
      display: inline-block;
      background: #808080;
      color: rgb(255, 255, 255);
      padding: 5px 15px;
      border-radius: 4px;
    }
</style>