jjx-wap/components/user/account.vue

<template> <!-- 账户管理 -->
    <view>
        <view class="layout layout-account">
            <view class="account-title m-top-20">用户名管理</view>
            <!--			<view class="account-head m-top-30">-->
            <!--				<view class="flex justify-center direction-column align-center">-->
            <!--					<u&#45;&#45;image :showLoading="true" src="https://cdn.uviewui.com/uview/album/1.jpg" width="100rpx" height="100rpx" radius="10rpx"></u&#45;&#45;image>-->
            <!--					<view class="xiu">修改头像</view>-->
            <!--				</view>-->
            <!--				<view class="tip m-top-30">选择你喜欢的图片，格式为jpg、png、jpeg，大小不超过2M。</view>-->
            <!--			</view>-->
            <view class="account-form m-top-30">
                <view class="group">
                    <u-icon name="account" color="#666" size="26"></u-icon>
                    <view class="lb">用户名</view>
                    <view class="vl">{{ userData.nickname }}</view>
                    <!--					<view class="op">修改</view>-->
                </view>
                <view class="group">
                    <u-icon name="phone" color="#666" size="26"></u-icon>
                    <view class="lb">绑定手机号</view>
                    <view class="vl">{{ userData.mobile.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") }}</view>
                    <!--					<view class="op">修改</view>-->
                </view>
                <!--				<view class="group">-->
                <!--					<u-icon name="email" color="#666" size="26"></u-icon>-->
                <!--					<view class="lb">绑定邮箱</view>-->
                <!--					<view class="vl">649077859@163.com</view>-->
                <!--					<view class="op">修改</view>-->
                <!--				</view>-->
                <view class="group">
                    <u-icon name="lock" color="#666" size="26"></u-icon>
                    <view class="lb">登录密码</view>
                    <view class="vl">已设置</view>
                    <view class="op" @click="showPopup = true">修改</view>
                </view>
            </view>
        </view>
        <u-popup closeable :show="showPopup"
                 round="10"
                 mode="center"
                 :custom-style="{width: '80%'}"
                 @close="showPopup = false">
            <view class="p-20 m-20 flex flex-center">
                <u-text text="修改登录密码" size="17" align="center"/>
            </view>
            <view class="mt-15">
                <u-cell-group :border="false">
                    <u-cell title="原密码">
                        <u-input v-model="formData.oldPassword" slot="value" placeholder="请输入原密码"/>
                    </u-cell>
                    <u-cell title="新密码">
                        <u-input v-model="formData.newPassword" slot="value" placeholder="请输入新密码"/>
                    </u-cell>
                    <u-cell title="确认密码" :border="false">
                        <u-input v-model="formData.passwordConfirmation" slot="value" placeholder="请输入确认密码"/>
                    </u-cell>

                </u-cell-group>
            </view>
            <view class="mt-15">
                <u-button type="primary" shapre="circle" @click="submit"
                          :disabled="!formData.oldPassword || !formData.newPassword || !formData.passwordConfirmation">
                    确定
                </u-button>
            </view>
        </u-popup>
    </view>
</template>

<script>

export default {
    props: {
        userData: {
            type: Object
        }
    },
    data() {
        return {
            showPopup: false,
            formData: {
                oldPassword: null,
                newPassword: null,
                passwordConfirmation: null,
            },
        };
    },
    methods: {
        submit() {
            if (!this.formData.oldPassword) return this.$message.error('请输入原密码');
            if (!this.formData.newPassword) return this.$message.error('请输入原密码');
            if (!this.formData.passwordConfirmation) return this.$message.error('请输入原密码');
            if (this.formData.newPassword !== this.formData.passwordConfirmation) return this.$message.error('两次输入的密码不一致!');
            if (this.formData.newPassword === this.formData.oldPassword) return this.$message.error('新密码不能与原密码相同!');
            if (this.formData.newPassword.length < 6 || this.formData.newPassword.length > 20) return this.$message.error('密码长度在 6 到 20 个字符');
            const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+$/
            if (!reg.test(this.formData.newPassword)) {
                return this.$message({
                    message: '密码必须由数字和字母组成',
                    type: 'error'
                })
            }
            vk.callFunction({
                url: 'user/kh/updatePwd',
                data: this.formData
            }).then(res => {
                this.$message.success('修改成功')
                this.formData = {
                    oldPassword: null,
                    newPassword: null,
                    passwordConfirmation: null,
                }
                this.showPopup = false
            })
        },
    }
}
</script>

<style lang="scss">
.layout-account {
    padding: 10rpx 30rpx;

    .account-title {
        position: relative;
        padding-left: 20rpx;
        font-size: 28rpx;
        font-weight: 600;
        line-height: 48rpx;
        color: #A92924;

        &:before {
            position: absolute;
            left: 0;
            top: 50%;
            z-index: 9;
            margin-top: -14rpx;
            content: '';
            width: 6rpx;
            height: 28rpx;
            background: #A92924;
        }
    }

    .tip {
        font-size: 24rpx;
        line-height: 48rpx;
        color: #999999;
        text-align: center;
    }

    .xiu {
        font-size: 24rpx;
        line-height: 48rpx;
        color: #A92924;
        text-align: center;
    }

    .group {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1px solid #f2f2f2;

        .lb {
            width: 150rpx;
            padding: 0 20rpx;
            font-size: 24rpx;
            line-height: 48rpx;
            color: #666666;
        }

        .vl {
            flex: 1;
            font-size: 24rpx;
            line-height: 48rpx;
            color: #333333;
        }

        .op {
            font-size: 24rpx;
            line-height: 48rpx;
            color: #A92924;
        }
    }
}
</style>