密码修改优化

store/src/admin/setting/password.vue

@@ -1,150 +1,188 @@
 <template>
-	<div class="app-content">
-		<!-- tabs -->
-		<div class="tabs-wrap">
-			<button class="admin-button-com" :class="[tabIndex == 1? 'blue' : '']" @click="changeTab(1)">密码设置</button>
-			<button class="admin-button-com" :class="[tabIndex == 2? 'blue' : '']" @click="changeTab(2)">确认密码设置</button>
-		</div>
-		<!-- 输入框 - block -->
-		<form @submit="formSubmit">
-			<div class="input-line-wrap">
-				<tui-list-cell class="line-cell" :hover="false" v-if="isOldPass">
-					<div class="tui-title">旧密码</div>
-					<input placeholder-class="phcolor" v-model="form.old" class="tui-input" name="old" placeholder="请输入旧密码" maxlength="50" type="password" />
-				</tui-list-cell>
-				<tui-list-cell class="line-cell" :hover="false">
-					<div class="tui-title">密码</div>
-					<input placeholder-class="phcolor" v-model="form.new" class="tui-input" name="new" placeholder="请输入确认密码" maxlength="50" type="password" />
-				</tui-list-cell>
-				<tui-list-cell class="line-cell" :hover="false">
-					<div class="tui-title">确认密码</div>
-					<input placeholder-class="phcolor" v-model="form.confirm" class="tui-input" name="confirm" placeholder="请输入确认密码" maxlength="50" type="password" />
-				</tui-list-cell>
-				<div class="btn-wrap">
-					<button class="admin-button-com blue big" formType="submit">提交</button>
-				</div>
-			</div>
-		</form>
-	</div>
+  <div class="app-content">
+    <!-- tabs -->
+    <div class="tabs-wrap">
+      <button
+        class="admin-button-com"
+        :class="[tabIndex == 1? 'blue' : '']"
+        @click="changeTab(1)"
+      >密码设置</button>
+      <button
+        class="admin-button-com"
+        :class="[tabIndex == 2? 'blue' : '']"
+        @click="changeTab(2)"
+      >确认密码设置</button>
+    </div>
+    <!-- 输入框 - block -->
+    <form @submit="formSubmit">
+      <div class="input-line-wrap">
+        <tui-list-cell class="line-cell" :hover="false" v-if="isOldPass">
+          <div class="tui-title">帐号</div>
+          <div class="tui-title">{{selfInfo.id}}</div>
+        </tui-list-cell>
+        <tui-list-cell class="line-cell" :hover="false" v-if="isOldPass">
+          <div class="tui-title">旧密码</div>
+          <input
+            placeholder-class="phcolor"
+            v-model="form.old"
+            class="tui-input"
+            name="old"
+            placeholder="请输入旧密码"
+            maxlength="50"
+            type="password"
+          />
+        </tui-list-cell>
+        <tui-list-cell class="line-cell" :hover="false">
+          <div class="tui-title">密码</div>
+          <input
+            placeholder-class="phcolor"
+            v-model="form.new"
+            class="tui-input"
+            name="new"
+            placeholder="请输入确认密码"
+            maxlength="50"
+            type="password"
+          />
+        </tui-list-cell>
+        <tui-list-cell class="line-cell" :hover="false">
+          <div class="tui-title">确认密码</div>
+          <input
+            placeholder-class="phcolor"
+            v-model="form.confirm"
+            class="tui-input"
+            name="confirm"
+            placeholder="请输入确认密码"
+            maxlength="50"
+            type="password"
+          />
+        </tui-list-cell>
+        <div class="btn-wrap">
+          <button class="admin-button-com blue big" formType="submit">提交</button>
+        </div>
+      </div>
+    </form>
+  </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import TuiListCell from '@/components/plugin/list-cell'
-const form = require('@/utils/formValidation.js')
-// api
-import { getSelfInfo } from '@/utils/auth'
-import { updatePassword, updateConfirmPassword } from '@/api/login'
+import { mapGetters } from "vuex";
+import TuiListCell from "@/components/plugin/list-cell";
+const form = require("@/utils/formValidation.js");
+import { getSelfInfo } from "@/utils/auth";
+import { updatePassword, updateConfirmPassword } from "@/api/login";
 export default {
-	name: 'password-setting',
-	components: {
-		TuiListCell
-	},
-	data() {
-		return {
-			tabIndex: 1,
-			form: {
-				old: '',
-				new: '',
-				confirm: ''
-			},
-			old: [{
-				name: 'old',
-				rule: ['required'],
-				msg: ['请输入旧密码']
-			}],
-			rules: [
-				{
-					name: 'new',
-					rule: ['required'],
-					msg: ['请输入新密码']
-				},
-				{
-					name: 'confirm',
-					rule: ['required'],
-					msg: ['请输入确认密码']
-				}
-			]
-		}
-	},
-	computed: {
-		...mapGetters({ selfInfo: 'getSelfInfo' }),
-		isOldPass() {
-			let status = this.selfInfo ? this.tabIndex == 1 ? this.selfInfo.password : this.selfInfo.confirmPassword : false
-			return !!status
-		}
-	},
-	onLoad() {
-		getSelfInfo().then(res => {
-		// 	console.log(res)
-		// 	// if (res.) {}
-		})
-	},
-	methods: {
-		changeTab(index) {
-			this.tabIndex = index
-			this.form = {
-				old: '',
-				new: '',
-				confirm: ''
-			}
-		},
-		confirmFn() {
-			if (!this.isOldPass) {
-				delete this.form.old
-			}
-			let hostFn = this.tabIndex == 1 ? updatePassword : updateConfirmPassword
-			hostFn(this.form).then(res => {
-				this.$msg('修改成功！')
-				this.$util.pageTo({
-					url: '/admin/home/workbench',
-					type: 4
-				})
-			})
-		},
-		// 表单验证
-		formSubmit(e) {
-			// 表单规则
-			let rules = this.isOldPass ? [...this.old, ...this.rules] : this.rules
-			// 进行表单检查
-			let formData = e.detail.value
-			let checkRes = form.validation(formData, rules)
-			// 验证通过!
-			if (!checkRes) {
-				this.confirmFn()
-			} else {
-				this.$msg(checkRes)
-			}
-		}
-	}
-}
+  name: "password-setting",
+  components: {
+    TuiListCell
+  },
+  data() {
+    return {
+      tabIndex: 1,
+      form: {
+        old: "",
+        new: "",
+        confirm: ""
+      },
+      old: [
+        {
+          name: "old",
+          rule: ["required"],
+          msg: ["请输入旧密码"]
+        }
+      ],
+      rules: [
+        {
+          name: "new",
+          rule: ["required"],
+          msg: ["请输入新密码"]
+        },
+        {
+          name: "confirm",
+          rule: ["required"],
+          msg: ["请输入确认密码"]
+        }
+      ]
+    };
+  },
+  computed: {
+    ...mapGetters({ selfInfo: "getSelfInfo" }),
+    isOldPass() {
+      let status = this.selfInfo
+        ? this.tabIndex == 1
+          ? this.selfInfo.password
+          : this.selfInfo.confirmPassword
+        : false;
+      return !!status;
+    }
+  },
+  onLoad() {
+    getSelfInfo().then(res => {});
+  },
+  methods: {
+    changeTab(index) {
+      this.tabIndex = index;
+      this.form = {
+        old: "",
+        new: "",
+        confirm: ""
+      };
+    },
+    confirmFn() {
+      if (!this.isOldPass) {
+        delete this.form.old;
+      }
+      let hostFn = this.tabIndex == 1 ? updatePassword : updateConfirmPassword;
+      hostFn(this.form).then(res => {
+        this.$msg("修改成功！");
+        this.$util.pageTo({
+          url: "/admin/home/workbench",
+          type: 4
+        });
+      });
+    },
+    // 表单验证
+    formSubmit(e) {
+      // 表单规则
+      let rules = this.isOldPass ? [...this.old, ...this.rules] : this.rules;
+      // 进行表单检查
+      let formData = e.detail.value;
+      let checkRes = form.validation(formData, rules);
+      // 验证通过!
+      if (!checkRes) {
+        this.confirmFn();
+      } else {
+        this.$msg(checkRes);
+      }
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-	.tabs-wrap {
-		width: calc(100% - 60px);
-		padding: 20px 30px;
-		.admin-button-com {
-			width: 50%;
-			padding-top: 16px;
-			padding-bottom: 16px;
-			&:first-child {
-				border-top-right-radius: 0;
-				border-bottom-right-radius: 0;
-			}
-			&:last-child {
-				border-top-left-radius: 0;
-				border-bottom-left-radius: 0;
-			}
-		}
-	}
-	// 按钮
-	.btn-wrap {
-		width: calc(100% - 60px);
-		margin: 60px 30px 0;
-		.admin-button-com {
-			width: 100%;
-			margin: 0 auto;
-		}
-	}
+.tabs-wrap {
+  width: calc(100% - 60px);
+  padding: 20px 30px;
+  .admin-button-com {
+    width: 50%;
+    padding-top: 16px;
+    padding-bottom: 16px;
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}
+// 按钮
+.btn-wrap {
+  width: calc(100% - 60px);
+  margin: 60px 30px 0;
+  .admin-button-com {
+    width: 100%;
+    margin: 0 auto;
+  }
+}
 </style>