aishangjia-uniapp/pages/user/password/password.vue

<template>
  <view class="container" :style="appThemeStyle">
    <!-- 标题 -->
    <view class="page-title">修改密码</view>
    <!-- 表单组件 -->
    <view class="form-wrapper">
      <u--form :model="form" ref="uForm" :rules="rules" label-width="140rpx">
        <u-form-item label="旧密码" prop="oldPassword">
          <u--input v-model="form.oldPassword" type="text" maxlength="20" placeholder="请输入旧密码" />
        </u-form-item>
        <u-form-item label="新密码" prop="password">
          <u--input v-model="form.password" type="text" maxlength="20" placeholder="请输入新密码" />
        </u-form-item>
        <u-form-item label="确认密码" prop="password2">
          <u--input v-model="form.password2" type="text" maxlength="20" placeholder="请输入确认密码" />
        </u-form-item>
      </u--form>
    </view>
    <!-- 操作按钮 -->
    <view class="footer">
      <view class="btn-wrapper">
		  
        <view class="btn-item btn-item-main" :class="{ disabled }" @click="handleSubmit()">保存</view>
      </view>
    </view>
  </view>
</template>

<script>
  import store from '@/store'
  import { fileUrl } from '@/config.js'
  import AvatarImage from '@/components/avatar-image'
  import * as UserApi from '@/api/user'
  import * as UploadApi from '@/api/upload'

  // 表单验证规则
  const rules = {
    nickname: [{
      required: true,
      message: '请输入用户昵称',
      trigger: ['blur', 'change']
    }]
  }

  export default {
    components: {
      AvatarImage
    },
    data() {
      return {
        // 按钮禁用
        disabled: false,
        // 头像路径 (用于显示)
        avatarUrl: '',
        // 临时图片 (用于上传)
        tempFile: null,
        // 表单数据
        form: {
          avatarId: '',
          nickname: ''
        },
        // 验证规则
        rules,
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {
      // 获取当前用户信息
      // this.getUserInfo()
    },

    // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
    onReady() {
      this.$refs.uForm.setRules(this.rules)
    },

    methods: {
      getUserInfo() {
      	const { form } = this
      	const app = this
      	UserApi.getUser().then(res => {
      		if( res.code == 0 && res.data.username != 'www') {
      			console.log("获取用户信息: ",res.data);
      			app.form = res.data
      			app.userInfo = res.data
      			store.dispatch('setUserInfo',res.data)
      			app.isLogin = true
      			res.data.roles.map(d => {
      				if(d.roleCode == 'superAdmin'){
      					app.superAdmin = true
      				}
      				if(d.roleCode == 'agent'){
      					app.agent = true
      				}
      				if(d.roleCode == 'admin'){
      					app.isAdmin = true
      				}
      			})
      		}else{
      			app.isLogin = false
      			app.handleLogout()
      		}
      	})
      },

      // 点击头像按钮事件
      onClickAvatar() {
        // #ifdef MP-WEIXIN
        return
        // #endif
        this.chooseImage()
      },

      // 选择头像事件 - 仅限微信小程序
      // #ifdef MP-WEIXIN
      onChooseAvatar({ detail }) {
        const app = this
        app.avatarUrl = detail.avatarUrl
        app.tempFile = { path: app.avatarUrl }
      },
      // #endif

      // 选择图片
      chooseImage() {
        const app = this
        // 选择图片
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success(chooseImageRes) {
			const tempFilePaths = chooseImageRes.tempFilePaths;
			UploadApi.uploadFile({
				filePath: tempFilePaths[0],
				fileType: 'image',
				name: 'file'
			}).then(res => {
				console.log("res: ", res);
				app.form.avatar = fileUrl + res.data.path
				console.log("form: ",app.form);
				
			})
          }
        });
      },

      // 上传图片
      uploadFile() {
        const app = this
        return UploadApi.image([app.tempFile])
          .then(fileIds => {
            app.form.avatarId = fileIds[0]
            app.tempFile = null
          })
      },

      // 确认修改
      async handleSubmit() {
        const app = this
        // 判断是否重复提交
        if (app.disabled === true) return
        app.$refs.uForm.validate(async valid => {
          if (valid) {
            // 按钮禁用
            app.disabled = true
            // 先上传头像图片
            if (app.tempFile) {
              await app.uploadFile()
            }
            // 提交保存个人信息
            UserApi.updatePassword(app.form)
              .then(result => {
                app.$toast(result.message)
                setTimeout(() => {
                  app.disabled = false
                  uni.navigateBack()
                }, 1500)
              })
              .catch(err => app.disabled = false)
          }
        })
      },

      // 绑定昵称输入框 (用于微信小程序端快速填写昵称能力)
      onInputNickName(val) {
        if (val) {
          this.form.nickname = val
        }
      }

    }
  }
</script>

<style>
  page {
    background: #f7f8fa;
  }
</style>
<style lang="scss" scoped>
  .container {}

  .page-title {
    width: 94%;
    margin: 0 auto;
    padding-top: 40rpx;
    font-size: 28rpx;
    color: rgba(69, 90, 100, 0.6);
  }

  .form-wrapper {
    margin: 20rpx auto 20rpx auto;
    padding: 0 40rpx;
    width: 90%;
    box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
    border-radius: 16rpx;
    background: #fff;
  }

  /* 底部操作栏 */

  .footer {
    margin-top: 80rpx;

    .btn-wrapper {
      height: 100%;
      // display: flex;
      // align-items: center;
      padding: 0 20rpx;
    }

    .btn-item {
      flex: 1;
      font-size: 28rpx;
      height: 86rpx;
      color: #fff;
      border-radius: 50rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .btn-item-wechat {
      background: #0ba90b;
      margin-bottom: 26rpx;
    }

    .btn-item-main {
	  width: 400rpx;
	  margin: auto;
      background: linear-gradient(to bottom, $main-bg, $main-bg2);
      color: $main-text;

      // 禁用按钮
      &.disabled {
        opacity: 0.6;
      }
    }

  }
</style>