忘记密码邮箱重置功能开发完成

pages/resetPsw.vue

@@ -0,0 +1,305 @@
+<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需不需要改 -->
+          <a
+            href="https://17pdf.com"
+            class="text-[#666] text-[24px] no-underline bg-transparent"
+          >
+            <span class="logo-img m-0 py-20px pl-170px"></span>
+            <span>17PDF Reader</span>
+          </a>
+        </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"
+                  />
+                </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"
+                  />
+                </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">
+                <a
+                  href="https://17pdf.com"
+                  class="opacity-30 text-[#fff] no-underline bg-transparent"
+                  >产品</a
+                >
+              </li>
+              <li class="list-none text-[16px] mt-24px">
+                <a
+                  href="https://17pdf.com/sdk"
+                  class="opacity-30 text-[#fff] no-underline bg-transparent"
+                  >SDK介绍</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>
+            <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="https://17pdf.com/terms" class="text-muted"
+            >服务条款</a
+          >
+          |
+          <a target="_blank" href="https://17pdf.com/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: 'custom',
+  data() {
+    return {
+      confirm_newPassword: '',
+      newPassword: '',
+      showError: false
+    }
+  },
+  methods: {
+    resetPassword() {
+      if(this.newPassword === '' || this.confirm_newPassword !== this.newPassword || this.newPassword.length < 6) {
+        this.showError = true
+        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('/')
+        }
+      })
+    }
+  }
+}
+</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);
+}
+</style>