chushih

pages/user/resetPassword.vue

@@ -0,0 +1,185 @@
+<template>
+  <view class="resetPassword">
+    <u-navbar
+      leftIconColor="#eee"
+      :title="$lang.reset + $lang.password"
+      bgColor="#0c0c0d"
+      :placeholder="true"
+      :fixed="true"
+      height="60"
+      @leftClick="back"
+    >
+    </u-navbar>
+
+    <view class="content">
+      <view class="logo">
+        <u--image
+          :showLoading="false"
+          :src="require('static/images/ez-logo-login.png')"
+          width="125px"
+          height="119px"
+          mode="scaleToFill"
+        ></u--image>
+      </view>
+      <u-input
+        class="input"
+        v-model="password_now"
+        :password="true"
+        :placeholder="$lang.enterNowPassword"
+      >
+        <text class="text" slot="prefix">{{ $lang.nowPassword }}</text>
+      </u-input>
+      <u-input
+        class="input"
+        v-model="password_new"
+        :password="true"
+        :placeholder="$lang.enterNewPassword"
+      >
+        <text class="text" slot="prefix">{{ $lang.nwwPassword }}</text>
+      </u-input>
+      <u-input
+        class="input"
+        v-model="password_reply"
+        :password="true"
+        :placeholder="$lang.enterPasswordAgain"
+      >
+        <text class="text" slot="prefix">{{ $lang.confirmPassword }}</text>
+      </u-input>
+      <view class="btn-box">
+        <view class="btn" @tap="reset()">{{ $lang.reset }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  data() {
+    return {
+      password_now: "",
+      password_new: "",
+      password_reply: "",
+    };
+  },
+  computed: {
+    ...mapState({
+      userInfo: (state) => state.app.userInfo,
+      $lang: (state) => state.app.lang[state.app.language],
+    }),
+  },
+  onLoad() {},
+  methods: {
+    back() {
+      uni.navigateBack();
+    },
+    reset() {
+      const params = {
+        password_now: this.password_now,
+        password_new: this.password_new,
+        password_reply: this.password_reply,
+        user_id: this.userInfo.id,
+        api_token: this.userInfo.api_token,
+      };
+      if (!params.password_now) {
+        this.$toast({
+          message: this.$lang.enterNowPassword,
+          duration: 2000,
+        });
+      } else if (!params.password_new) {
+        this.$toast({
+          message: this.$lang.enterNewPassword,
+          duration: 2000,
+        });
+      } else if (!params.password_reply) {
+        this.$toast({
+          message: this.$lang.enterPasswordAgain,
+          duration: 2000,
+        });
+      } else {
+        this.$toast({
+          type: "loading",
+          message: `${this.$lang.submit}...`,
+          duration: 200000,
+        });
+        this.$api
+          .updatePassword(params)
+          .then((res) => {
+            if (res.Success == 1) {
+              this.$toast({
+                type: "success",
+                title: res.Msg,
+                duration: 2000,
+              });
+            } else {
+              this.$toast({
+                title: res.Msg,
+                duration: 2000,
+              });
+            }
+          })
+          .catch((err) => {
+            console.log(err);
+          })
+          .finally(() => {
+            this.$toastHide();
+          });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.resetPassword {
+  /deep/.u-navbar__content__title {
+    color: #eee;
+    font-weight: 600;
+  }
+  .content {
+    width: 280px;
+    padding-bottom: 50px;
+    margin: 0 auto;
+    .logo {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 20px;
+      margin-top: 20%;
+    }
+    .input {
+      height: 30px;
+      line-height: 30px;
+      margin-bottom: 15px;
+      background: #fff;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+    .phone-code {
+      min-width: 50px;
+      text-align: center;
+      border-right: 1px solid #ddd;
+    }
+    .text {
+      padding-right: 5px;
+    }
+    .btn-box {
+      margin-top: 20px;
+      .btn {
+        width: 100%;
+        height: 48px;
+        line-height: 48px;
+        text-align: center;
+        font-size: 16px;
+        background: url("~@/static/images/btn_bg.png") no-repeat;
+        background-size: 100% 100%;
+        font-weight: 600;
+        margin-top: 15px;
+        &:active {
+          opacity: 0.8;
+        }
+      }
+    }
+  }
+}
+</style>