源文件

jeepay-ui-uapp-agent/pageWork/setUp/passwordSetting.vue

@@ -0,0 +1,153 @@
+<template>
+  <view class="page-wrapper global-wrapper bgF2" v-if="flag">
+    <JHeaderTitle title="修改密码" bgColor="#f2f2f2"></JHeaderTitle>
+    <view class="origin-pwd">
+      <LoginInput
+        title="原密码"
+        v-model:value="pwdInfo.oldPassword"
+        bgColor="#fff"
+        pd="30rpx 30rpx 20rpx 30rpx"
+        place="请输入原密码"
+        :password="!oldPasswordEyes"
+        :rules="{ name: 'oldPassword', rule: 'REG_NotNUll' }"
+      >
+        <view class="right-eyes" @tap="oldPasswordEyes = !oldPasswordEyes">
+          <image :src="eyeImg[oldPasswordEyes ? 1 : 0]" mode="scaleToFill" />
+        </view>
+      </LoginInput>
+      <view class="forget" @tap="jumpPage">忘记原密码？</view>
+    </view>
+    <view class="edit-pwd">
+      <LoginInput
+        title="新密码"
+        v-model:value="pwdInfo.newPassword"
+        place="请输入新密码"
+        bgColor="#fff"
+        pd="50rpx 30rpx 30rpx 30rpx"
+        :password="!isOpenEyes"
+        :rules="{ name: 'newPassword', rule: 'REG_NotNUll' }"
+      >
+        <view class="right-eyes" @tap="isOpenEyes = !isOpenEyes">
+          <image :src="eyeImg[isOpenEyes ? 1 : 0]" mode="scaleToFill" />
+        </view>
+      </LoginInput>
+      <LoginInput
+        title=""
+        v-model:value="pwdInfo.confirmPassword"
+        place="请再次输入新密码"
+        bgColor="#fff"
+        pd="0 30rpx"
+        :password="!confirmOpenEyes"
+        :rules="{ name: 'confirmPassword', rule: 'REG_NotNUll' }"
+      >
+        <view class="right-eyes" @tap="confirmOpenEyes = !confirmOpenEyes">
+          <image :src="eyeImg[confirmOpenEyes ? 1 : 0]" mode="scaleToFill" />
+        </view>
+      </LoginInput>
+    </view>
+    <JButton pd="30rpx" @HandleTouch="editPwd.open()">确认修改</JButton>
+  </view>
+  <JPopup ref="editPwd">
+    <JCard @confirm="confirm" title="确认修改" @tap.stop>
+      密码修改成功后，当前账号将退出登录。重新登录需使用更新后的密码。</JCard
+    >
+    <JButton pd="0 30rpx 30rpx 30rpx" bgColor="rgba(255, 255, 255, 0.8)" color="#000" @HandleTouch="editPwd.close()"
+      >取消</JButton
+    >
+  </JPopup>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue"
+import { $modifyPwd, $getPasswordRules } from "../../http/apiManager.js"
+import { onShow } from "@dcloudio/uni-app"
+import JMainCard from "@/components//newComponents/JMainCard/JMainCard"
+import LoginInput from "@/components//newComponents/LoginInput/LoginInput"
+import JButton from "@/components//newComponents/JButton/JButton"
+import JPopup from "@/components//newComponents/JPopup/JPopup"
+import JCard from "@/components/newComponents/JCard/JCard"
+import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.vue"
+import user from "@/hooks/user.js"
+import { validateArray, clearRulesArray } from "@/hooks/rules"
+import { Base64 } from "js-base64"
+onShow(() => {
+  flag.value = true
+  getRules()
+})
+const eyeImg = reactive(["/static/loginImg/login-eye-close.svg", "/static/loginImg/login-eye-open.svg"])
+const isOpenEyes = ref(false)
+const confirmOpenEyes = ref(false)
+const oldPasswordEyes = ref(false)
+const editPwd = ref()
+const pwdInfo = reactive({})
+const flag = ref(true)
+const rules = ref({})
+const getRules = () => {
+  $getPasswordRules().then((res) => {
+    rules.value.rule = new RegExp(res.bizData.regexpRules)
+    rules.value.ruleText = res.bizData.errTips
+  })
+}
+const confirm = () => {
+  if (validateArray(pwdInfo)) {
+    if (pwdInfo.newPassword !== pwdInfo.confirmPassword)
+      return uni.showToast({
+        title: "两次密码输入不一致",
+        icon: "error",
+        mask: true,
+      })
+    if (!rules.value.rule.test(pwdInfo.newPassword))
+      return uni.showToast({
+        title: rules.value.ruleText,
+        icon: "none",
+      })
+    uni.showLoading({
+      title: "修改中",
+      mask: true,
+    })
+    $modifyPwd({
+      originalPwd: Base64.encode(pwdInfo.oldPassword),
+      confirmPwd: Base64.encode(pwdInfo.newPassword),
+    }).then((res) => {
+      uni.hideLoading()
+      uni.showToast({
+        title: "修改成功",
+        icon: "success",
+        mask: true,
+      })
+      clearRulesArray()
+      editPwd.value.close()
+      user.logout()
+    })
+  }
+}
+const jumpPage = () => {
+  flag.value = false
+  uni.navigateTo({ url: "/pages/login/forgetPassword" })
+}
+</script>
+
+<style lang="scss" scoped>
+.page-wrapper {
+  .origin-pwd {
+    font-size: 33rpx;
+    .forget {
+      margin-left: 50rpx;
+      font-size: 27rpx;
+      color: $primaryColor;
+    }
+  }
+}
+.right-eyes {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 110rpx;
+  height: 110rpx;
+  background-color: transparent;
+}
+image {
+  width: 36rpx;
+  height: 36rpx;
+}
+</style>