123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198 |
- <template>
- <div class="mine-box">
- <div class="mine-body">
- <div class="form-list-box">
- <div class="info-box">
- <div class="label">当前密码</div>
- <div class="input-box">
- <input
- :type="show1 ? 'text' : 'password'"
- placeholder="请输入"
- v-model="lastPassword"
- />
- </div>
- <div class="icon-box" @click="getShow('1')">
- <van-icon name="eye-o" v-if="show1" />
- <van-icon name="closed-eye" v-else class="iconfont" />
- </div>
- </div>
- <div class="info-box">
- <div class="label">修改密码</div>
- <div class="input-box">
- <input
- :type="show2 ? 'text' : 'password'"
- placeholder="请输入"
- v-model="password"
- />
- </div>
- <div class="icon-box" @click="getShow('2')">
- <van-icon name="eye-o" v-if="show2" />
- <van-icon name="closed-eye" v-else class="iconfont" />
- </div>
- </div>
- <div class="info-box">
- <div class="label">确认修改密码</div>
- <div class="input-box">
- <input
- :type="show3 ? 'text' : 'password'"
- placeholder="请输入"
- v-model="checkPassword"
- />
- </div>
- <div class="icon-box" @click="getShow('3')">
- <van-icon name="eye-o" v-if="show3" />
- <van-icon name="closed-eye" v-else class="iconfont" />
- </div>
- </div>
- <div class="foot-box">
- <div class="but" @click="editPassword">保存</div>
- </div>
- </div>
- </div>
- </div>
- </template>
-
- <script>
- import { editPassword, getUserLocalStorageInfo } from "@/js_sdk/http";
- // import auth from "@/service/auth";
- export default {
- name: "PasswordEdit",
- data() {
- return {
- show1: false,
- show2: false,
- show3: false,
- lastPassword: "",
- password: "",
- checkPassword: "",
- };
- },
- created() {},
- mounted() {},
- methods: {
- getShow(type) {
- this["show" + type] = !this["show" + type];
- },
- editPassword() {
- if (this.password === "") {
- this.$showToast("请填写密码");
- return false;
- }
- if (this.lastPassword === "") {
- this.$showToast("请填写原密码");
- return false;
- }
- if (this.password !== this.checkPassword) {
- this.$showToast("确认密码与密码不一致");
- return false;
- }
- if (this.password.length <= 6) {
- this.$showToast("新密码必须超过六位数!");
- return false;
- }
- var pwdRegex = new RegExp("(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}");
- if (!pwdRegex.test(this.password)) {
- this.$showToast(
- "您的密码复杂度太低(密码中必须包含字母、数字),请及时修改密码!"
- );
- return false;
- }
- editPassword({
- userId: getUserLocalStorageInfo().user.id,
- newPassword: this.password,
- oldPassword: this.lastPassword,
- }).then((res) => {
- if (res.errno === 0 && res.data) {
- uni.clearStorageSync();
- uni.reLaunch({
- url: "/pages/login/login",
- });
- this.$showToast("修改成功,请重新登陆");
- } else {
- this.$showToast(res.errmsg);
- }
- });
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .mine-box {
- width: 100%;
- height: 100%;
- // background-image: url("../../assets/image/mine/mine-bg.jpg");
- // background-image: url("../../../static/passwordbac.png");
- background-image: url("https://pgy.idea-sf.com/mnpApi/FileController/download/128270394311049216");
- background-size: 100% 100%;
- background-repeat: no-repeat;
- box-sizing: border-box;
- overflow: hidden;
- .mine-body {
- padding: 30rpx;
- box-sizing: border-box;
- height: calc(100vh - 100rpx);
- box-sizing: border-box;
- overflow-y: auto;
- .form-list-box {
- width: 100%;
- background: rgba(#fff, 0.8);
- border-radius: 20rpx;
- box-sizing: border-box;
- margin-top: 160rpx;
- padding: 15rpx 30rpx;
- box-sizing: border-box;
- .info-box {
- height: 100rpx;
- @include flex;
- border-bottom: 1rpx solid #c6c5c9;
- .label {
- width: 200rpx;
- line-height: 100rpx;
- height: 100rpx;
- font-size: 30rpx;
- color: #262626;
- }
- .input-box {
- width: 260rpx;
- input {
- width: 100%;
- height: 100rpx;
- font-size: 30rpx;
- color: #999999;
- background: rgba(#fff, 0);
- }
- }
- .icon-box {
- width: 100rpx;
- text-align: center;
- i {
- font-size: 35rpx;
- color: #333;
- }
- }
- &:last-child {
- border-bottom: none;
- }
- }
- .foot-box {
- margin-top: 200rpx;
- width: 100%;
- .but {
- text-align: center;
- background: rgba(102, 0, 255, 1);
- color: #fff;
- font-size: 30rpx;
- line-height: 100rpx;
- border-radius: 10rpx;
- }
- }
- }
- }
- }
- </style>
-
|