第一次提交

pages/user/password/password.vue

@@ -0,0 +1,264 @@
+<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>