xiamen-sb-uniapp/pages/setting/forget-password.vue

<template>
    <view>
        <u-toast ref="uToast" />
        <view class="w75">
            <view
                class="f-weight-bold"
                style="color: #333; font-size: 42rpx; padding-top: 100rpx"
            >修改密码</view
            >
            <view
                class="f-size-32"
                style="color: #bbb; margin-top: 20rpx"
            >请设置新密码</view
            >
            <view class="input" style="margin-top: 50rpx">
                <view>
                    <input
                        type="password"
                        v-model="form.oldPassword"
                        placeholder="请输入原密码"
                        placeholder-class="placeholder-class"
                    />
                </view>
                <view>
                    <input
                        type="password"
                        v-model="form.password"
                        placeholder="请输入新密码"
                        placeholder-class="placeholder-class"
                    />
                </view>
                <view>
                    <input
                        type="password"
                        v-model="form.passwordConfirm"
                        placeholder="请输入确认密码"
                        placeholder-class="placeholder-class"
                    />
                </view>
            </view>

            <!--<view
                class="f-size-24 my3"
                style="color: #bbb"
            >为保证您的帐户和资金安全，请不要设置与其他软件（如社交软件），网站（如社交平台、论坛）相同或相似的用户名和密码。
            </view>-->
            <button
                @tap="submit"
                class="main-color-bg text-color-white"
                style="border-radius: 80rpx; line-height: 100rpx"
            >
                确定
            </button>
        </view>
    </view>
</template>

<script>
import { encryptPassword } from '@/utils/password';
export default {
    data() {
        return {
            form: {
                oldPassword: '', // 手机号
                password: '', // 验证码
                passwordConfirm: '' // 密码
            }
        };
    },
    methods: {
        // 提交
        submit() {
            if (this.$BaseTool.String.isBlank(this.form.oldPassword)) {
                return this.$refs.uToast.show({
                    title: '旧密码不能为空',
                    type: 'default',
                    icon: false
                });
            } else if (this.$BaseTool.String.isBlank(this.form.password)) {
                return this.$refs.uToast.show({
                    title: '新密码不能为空',
                    type: 'default',
                    icon: false
                });
            } else if (this.$BaseTool.String.isBlank(this.form.passwordConfirm)) {
                return this.$refs.uToast.show({
                    title: '确认密码不能为空',
                    type: 'default',
                    icon: false
                });
            } else if (this.form.password !== this.form.passwordConfirm) {
                return this.$refs.uToast.show({
                    title: '密码与确认密码不一致',
                    type: 'default',
                    icon: false
                });
            } else {
                this.$Http.changePwd({
                    oldPassword: encryptPassword(this.form.oldPassword),
                    password: encryptPassword(this.form.password)
                }).then(r => {
                    // 设置成功，跳转我的页面
                    uni.reLaunch({ url: '/pages/my/my' });
                })
            }
        }
    }
};
</script>

<style scoped lang="less">
.input {
    width: 600rpx;
    margin: 0 auto;

    & > view {
        height: 100rpx;
        border-bottom: 1rpx solid #e6e6e6;
    }

    .code {
        height: 56rpx;
        line-height: 56rpx;
        padding: 0rpx 20rpx;
        background: #ffffff;
        border: 1rpx solid #0082ff;
        border-radius: 28rpx;
    }

    input {
        height: 100rpx;
    }
}
</style>