账号设置

src/layout/uppasswd/uppasswdForm.vue

@@ -0,0 +1,146 @@
+<template>
+  <div id="uppasswdForm">
+    <el-row>
+      <el-col :span="24" class="top">
+        <span class="shu"></span><span class="title">{{ formTitle }}</span>
+      </el-col>
+      <el-col :span="24" class="form">
+        <el-form :model="form" :rules="rules" label-width="100px">
+          <el-form-item label="旧密码" prop="oldpasswd">
+            <el-input type="password" v-model="form.oldpasswd" autocomplete="off" placeholder="请输入旧密码"></el-input>
+          </el-form-item>
+          <el-form-item label="新密码" prop="newpasswd">
+            <el-input type="password" v-model="form.newpasswd" autocomplete="off" placeholder="请输入新密码"></el-input>
+          </el-form-item>
+          <div class="ccc">
+            <el-form-item>
+              <el-button>取 消</el-button>
+              <el-button type="primary" @click="submitForm('form')">确 定</el-button>
+            </el-form-item>
+          </div>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'uppasswdForm',
+  props: {
+    form: null,
+    formTitle: null,
+  },
+  components: {},
+  data: () => ({
+    rules: {
+      oldpasswd: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
+      newpasswd: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
+    },
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    submitForm() {
+      this.$emit('submitForm', { data: this.form });
+    },
+    resetForm() {
+      this.$emit('resetForm');
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.top .shu {
+  float: left;
+  width: 4px;
+  height: 20px;
+  background: rgba(233, 2, 29, 1);
+}
+.top .title {
+  float: left;
+  padding: 0 10px;
+  font-size: 16px;
+  font-family: Source Han Sans SC;
+  font-weight: bold;
+  color: rgba(40, 40, 40, 1);
+}
+/deep/.el-textarea__inner {
+  min-height: 100px !important;
+}
+/deep/.select {
+  width: 632px;
+}
+.selects {
+  width: 473px;
+  margin: 0 15px 0 0;
+}
+/deep/.el-radio__input.is-checked + .el-radio__label {
+  color: #e9021d;
+}
+/deep/.el-radio__input.is-checked .el-radio__inner {
+  border-color: #e9021d;
+  background: #e9021d;
+}
+/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #e9021d;
+}
+/deep/.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #e9021d;
+  border-color: #e9021d;
+}
+/deep/.el-checkbox-button,
+.el-checkbox-button__inner {
+  margin: 0 15px 0 0;
+}
+/deep/.el-checkbox-button__inner {
+  padding: 7px 5px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+/deep/.el-checkbox-button__inner:hover {
+  color: #e9021d;
+}
+/deep/.el-checkbox-button:first-child .el-checkbox-button__inner {
+  border-left: 1px solid #ccc;
+  border-radius: 5px;
+}
+/deep/.el-checkbox-button:last-child .el-checkbox-button__inner {
+  border-radius: 5px;
+}
+/deep/.el-checkbox-button.is-checked .el-checkbox-button__inner {
+  color: #e9021d;
+  background-color: #ffffff;
+  border-color: #e9021d;
+}
+/deep/.el-checkbox-button.is-checked .el-checkbox-button__inner {
+  box-shadow: none;
+}
+/deep/.el-switch.is-checked .el-switch__core {
+  border-color: #e9021d;
+  background-color: #e9021d;
+}
+.clickBtn .el-button {
+  width: 100px;
+  height: 40px;
+  padding: 0;
+  color: #ffffff;
+  background: #b9b9b9;
+  border-radius: 4px;
+  margin: 40px;
+}
+.clickBtn {
+  text-align: center;
+  margin: 40px 0;
+  border-top: 1px solid #ccc;
+}
+.clickBtn .el-button:first-child {
+  background-color: #e9021d;
+}
+</style>

src/layout/userInfo/userInfoForm.vue

@@ -0,0 +1,150 @@
+<template>
+  <div id="userInfoForm">
+    <el-row>
+      <el-col :span="24" class="top">
+        <span class="shu"></span><span class="title">{{ formTitle }}</span>
+      </el-col>
+      <el-col :span="24" class="form">
+        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+          <el-col :span="24">
+            <el-form-item label="用户名称" prop="name">
+              <el-input v-model="ruleForm.name" placeholder="请输入用户名称"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="手机号" prop="phone">
+              <el-input disabled v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="24" class="clickBtn">
+            <el-form-item>
+              <el-button type="primary" size="small" @click="submitForm('ruleForm')">提交</el-button>
+              <el-button size="small" @click="resetForm('ruleForm')">取消</el-button>
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'userInfoForm',
+  props: {
+    ruleForm: null,
+    formTitle: null,
+  },
+  components: {},
+  data: () => ({
+    rules: {
+      name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+      phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
+    },
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    submitForm() {
+      this.$emit('submitForm', { data: this.ruleForm });
+    },
+    resetForm() {
+      this.$emit('resetForm');
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+p {
+  padding: 0;
+  margin: 0;
+}
+.top .shu {
+  float: left;
+  width: 4px;
+  height: 20px;
+  background: rgba(233, 2, 29, 1);
+}
+.top .title {
+  float: left;
+  padding: 0 10px;
+  font-size: 16px;
+  font-family: Source Han Sans SC;
+  font-weight: bold;
+  color: rgba(40, 40, 40, 1);
+}
+/deep/.el-textarea__inner {
+  min-height: 100px !important;
+}
+/deep/.select {
+  width: 632px;
+}
+.selects {
+  width: 473px;
+  margin: 0 15px 0 0;
+}
+/deep/.el-radio__input.is-checked + .el-radio__label {
+  color: #e9021d;
+}
+/deep/.el-radio__input.is-checked .el-radio__inner {
+  border-color: #e9021d;
+  background: #e9021d;
+}
+/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #e9021d;
+}
+/deep/.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #e9021d;
+  border-color: #e9021d;
+}
+/deep/.el-checkbox-button,
+.el-checkbox-button__inner {
+  margin: 0 15px 0 0;
+}
+/deep/.el-checkbox-button__inner {
+  padding: 7px 5px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+/deep/.el-checkbox-button__inner:hover {
+  color: #e9021d;
+}
+/deep/.el-checkbox-button:first-child .el-checkbox-button__inner {
+  border-left: 1px solid #ccc;
+  border-radius: 5px;
+}
+/deep/.el-checkbox-button:last-child .el-checkbox-button__inner {
+  border-radius: 5px;
+}
+/deep/.el-checkbox-button.is-checked .el-checkbox-button__inner {
+  color: #e9021d;
+  background-color: #ffffff;
+  border-color: #e9021d;
+}
+/deep/.el-checkbox-button.is-checked .el-checkbox-button__inner {
+  box-shadow: none;
+}
+/deep/.el-switch.is-checked .el-switch__core {
+  border-color: #e9021d;
+  background-color: #e9021d;
+}
+.clickBtn .el-button {
+  width: 100px;
+  height: 40px;
+  padding: 0;
+  color: #ffffff;
+  background: #b9b9b9;
+  border-radius: 4px;
+  margin: 40px;
+}
+.clickBtn {
+  text-align: center;
+  margin: 40px 0;
+  border-top: 1px solid #ccc;
+}
+.clickBtn .el-button:first-child {
+  background-color: #e9021d;
+}
+</style>

src/router/index.js

@@ -8,6 +8,16 @@ const routes = [
     path: '/home',
     component: () => import('../views/home/index.vue'),
   },
+  // 修改密码
+  {
+    path: '/uppasswd/index',
+    component: () => import('../views/uppasswd/index.vue'),
+  },
+  // 个人信息管理
+  {
+    path: '/userInfo/index',
+    component: () => import('../views/userInfo/index.vue'),
+  },
   // 金融数字超市-债权产品
   {
     path: '/supermarket/debt',

src/views/uppasswd/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="debt">
+        <el-col :span="24" class="top">
+          <!-- <topInfo :topTitle="topTitle" :display="display"></topInfo> -->
+          <detailTopInfo :topTitle="topTitle" :display="display"></detailTopInfo>
+        </el-col>
+        <el-col :span="24" class="main">
+          <uppasswdForm :form="form" :formTitle="formTitle" @submitForm="submitForm" @resetForm="resetForm"></uppasswdForm>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import topInfo from '@/layout/common/topInfo.vue';
+import detailTopInfo from '@/layout/common/detailTopInfo.vue';
+import uppasswdForm from '@/layout/uppasswd/uppasswdForm.vue';
+import { mapState, mapMutations, createNamespacedHelpers, mapGetters } from 'vuex';
+const { mapActions: otheruser } = createNamespacedHelpers('otheruser');
+export default {
+  name: 'detail',
+  props: {},
+  components: {
+    detailTopInfo, //头部导航
+    uppasswdForm, //头部返回
+  },
+  data: () => ({
+    topTitle: '账号设置',
+    display: 'block',
+
+    formTitle: '修改密码',
+    form: {},
+  }),
+  created() {},
+  computed: {
+    id() {
+      return this.user.uid;
+    },
+    ...mapState(['user']),
+  },
+  methods: {
+    ...otheruser(['query', 'fetch', 'update', 'create', 'updates']),
+    // 提交
+    async submitForm({ data }) {
+      const uid = this.user.uid;
+      let res = await this.updates({ ...data, uid });
+      if (res.errcode === 0) {
+        this.$router.push({ path: '/login' });
+        this.$message({
+          message: '修改密码成功',
+          type: 'success',
+        });
+      }
+    },
+    // 取消
+    resetForm() {
+      this.$router.push({ path: '/index' });
+    },
+    // 返回
+    goBack() {
+      this.$router.go(-1);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  height: 50px;
+  margin: 0 0 10px 0;
+}
+.main {
+  min-height: 765px;
+  background: #ffffff;
+  padding: 20px;
+}
+</style>

src/views/userInfo/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <div id="detail">
+    <el-row>
+      <el-col :span="24" class="debt">
+        <el-col :span="24" class="top">
+          <!-- <topInfo :topTitle="topTitle" :display="display"></topInfo> -->
+          <detailTopInfo :topTitle="topTitle" :display="display"></detailTopInfo>
+        </el-col>
+        <el-col :span="24" class="main">
+          <userInfoForm :ruleForm="ruleForm" :formTitle="formTitle" @submitForm="submitForm" @resetForm="resetForm"></userInfoForm>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import topInfo from '@/layout/common/topInfo.vue';
+import detailTopInfo from '@/layout/common/detailTopInfo.vue';
+import userInfoForm from '@/layout/userInfo/userInfoForm.vue';
+import { mapState, mapMutations, createNamespacedHelpers, mapGetters } from 'vuex';
+const { mapActions: otheruser } = createNamespacedHelpers('otheruser');
+export default {
+  name: 'detail',
+  props: {},
+  components: {
+    detailTopInfo, //头部导航
+    userInfoForm, //头部返回
+  },
+  data: () => ({
+    topTitle: '账号设置',
+    display: 'block',
+
+    formTitle: '个人信息管理',
+    ruleForm: {},
+  }),
+  created() {
+    this.searchInfo();
+  },
+  computed: {
+    id() {
+      return this.user.uid;
+    },
+    ...mapState(['user']),
+  },
+  methods: {
+    ...otheruser(['query', 'fetch', 'update', 'create']),
+    async searchInfo() {
+      if (this.id) {
+        const res = await this.fetch(this.id);
+        this.$set(this, `ruleForm`, res.data);
+      }
+    },
+    // 提交
+    async submitForm({ data }) {
+      let res;
+      if (this.id) {
+        res = await this.update(data);
+        if (res.errcode === 0) {
+          this.$router.push({ name: 'login' });
+          this.$message({
+            message: '信息修改成功',
+            type: 'success',
+          });
+        }
+      }
+      console.log(res.data);
+    },
+    // 取消
+    resetForm() {
+      this.$router.push({ path: '/index' });
+    },
+    // 返回
+    goBack() {
+      this.$router.go(-1);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.top {
+  height: 50px;
+  margin: 0 0 10px 0;
+}
+.main {
+  min-height: 765px;
+  background: #ffffff;
+  padding: 20px;
+}
+</style>