123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236 |
- <template>
- <view class="page-container">
- <u--form label-width="auto" labelAlign="right"
- ref="uForm"
- :model="model"
- :rules="rules"
- :labelStyle="{
- fontSize: '28rpx',
- fontWeight: '500',
- }"
- >
- <u-cell-group :border="false">
-
- <u-cell :border="true" :isLink="false" :clickable="true">
- <view slot="value" class="value">
- <u-form-item label="用户昵称">
- {{renderItem(userInfo,'nickName','--')}}
- </u-form-item>
- </view>
- </u-cell>
-
- <u-cell :border="true" :isLink="false" :clickable="true">
- <view slot="value" class="value">
- <u-form-item label="旧密码" prop="form.oldPassword" :required="true">
- <u--input
- v-model="model.form.oldPassword"
- placeholder="请输入旧密码"
- border="none"
- type="password"
- :clearable="true"
- inputAlign="right"
- >
- </u--input>
- </u-form-item>
- </view>
- </u-cell>
-
- <u-cell :border="true" :isLink="false" :clickable="true">
- <view slot="value" class="value">
- <u-form-item label="新密码" prop="form.newPassword" :required="true">
- <u--input
- v-model="model.form.newPassword"
- placeholder="请输入新密码"
- border="none"
- type="password"
- :clearable="true"
- inputAlign="right"
- >
- </u--input>
- </u-form-item>
- </view>
- </u-cell>
-
- <u-cell :border="true" :isLink="false" :clickable="true">
- <view slot="value" class="value">
- <u-form-item label="确认密码" prop="form.confirmPassword" :required="true">
- <u--input
- v-model="model.form.confirmPassword"
- placeholder="请输入确认密码"
- border="none"
- type="password"
- :clearable="true"
- inputAlign="right"
- >
- </u--input>
- </u-form-item>
- </view>
- </u-cell>
- </u-cell-group>
-
- </u--form>
-
- <view class="footer">
- <u-row style="margin-top: 40rpx;">
- <u-col :span="12" style="padding: 0 30rpx;">
- <u-button type="primary" shape="circle"
- color="linear-gradient(to right, #41B5FF, #4573FC)"
- :custom-style="{
- width: '100%',
- height: '38px'
- }" @click="handleSubmit">提交
- </u-button>
- </u-col>
- </u-row>
- </view>
- </view>
- </template>
- <script>
- import { encrypt, decrypt } from "@/utils/jsencrypt";
- import {updateUserPwd,userProfile} from '@/api/common/user.js'
- export default {
- components: {
- },
- data() {
- return {
- model: {
- form: {
- oldPassword: "",
- newPassword: "",
- confirmPassword: "",
- }
- },
- rules: {
- 'form.oldPassword': [
- {
- type: 'string',
- required: true,
- message: '请输入旧密码',
- trigger: ['blur', 'change']
- },
- ],
- 'form.newPassword': [
- {
- type: 'string',
- required: true,
- message: '请输入新密码',
- trigger: ['blur', 'change']
- },
- /* {
- type: 'string',
- required: true,
- message: '长度在 6 到 20 个字符',
- min: 6, max: 20,
- trigger: ['blur', 'change']
- }, */
- ],
- 'form.confirmPassword': [
- {
- type: 'string',
- required: true,
- message: '请输入确认密码',
- trigger: ['blur', 'change']
- },
- {
- // 自定义验证函数,见上说明
- validator: (rule, value, callback) => {
- if (this.model.form.newPassword != value) {
- callback(new Error("两次输入的密码不一致"));
- } else {
- callback();
- }
- },
- // 触发器可以同时用blur和change
- trigger: ['change','blur'],
- }
- ],
-
- },
- userInfo: null,
- }
- },
- onLoad() {
- this.getUserInfo()
- },
- onShow() {
-
- },
- onHide() {
-
- },
- onReady() {
- this.$refs.uForm.setRules(this.rules)
- },
- methods: {
- getUserInfo() {
- userProfile().then((res) => {
- this.userInfo = res.data
- })
- },
- // 提交
- async handleSubmit() {
- this.$refs.uForm.validate().then(async res => {
- let ajaxData = {
- ...this.model.form,
- }
- ajaxData.oldPassword = encrypt(ajaxData.oldPassword)
- ajaxData.newPassword = encrypt(ajaxData.newPassword)
- delete ajaxData.confirmPassword
-
- let { data, code } = await updateUserPwd(ajaxData)
-
- if (code == 0) {
- this.$modal.msgSuccess('修改成功')
- }
-
- }).catch(errors => {
- console.log('校验失败',errors)
- })
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- .page-container {
- background: #fff;
- font-size: 28rpx;
- min-height: 100%;
- position: relative;
- .footer {
- padding: 10rpx 0;
- position: fixed;
- width: 100%;
- left: 0;
- bottom: 0;
- }
- }
- ::v-deep {
- .u-cell__body {
- .u-cell__body__content {
- width: auto;
- flex: none;
-
- }
-
- .value {
- flex: 1;
-
- .u-form-item__body {
- padding: 0;
- }
- }
- .u-form-item__body__right__content__slot {
- flex: 1;
- justify-content: flex-end;
- text-align: right;
- }
- }
-
- }
- </style>
|