新增首页帮助联系我们、修改密码

src/views/addition/contact.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="contactBox">
+    <el-dialog
+      title="联系我们"
+      :visible.sync="isshowContactUs"
+      width="50%"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <div class="contactCon">
+        <p style="font-size: 16px; font-weight: bolder; color: #000">
+          工作时间:
+        </p>
+
+        <p style="text-indent: 2em; margin-top: 10px; color: #000">
+          法定工作日
+          <span><i class="el-icon-time"></i>上午: 08:30-11:30</span>
+
+          <span><i class="el-icon-time"></i>下午:14:30-17:30</span>
+        </p>
+        <p
+          style="
+            font-size: 16px;
+            font-weight: bolder;
+            color: #000;
+            margin-top: 20px;
+          "
+        >
+          联系人:
+        </p>
+
+        <p
+          style="text-indent: 2em; margin-top: 10px; color: #000"
+          v-for="(item, index) in contactPeople"
+        >
+          {{ item.name }}
+          <span><i class="el-icon-chat-dot-round"></i>{{ item.qq }}</span>
+
+          <span><i class="el-icon-phone-outline"></i>{{ item.phone }}</span>
+        </p>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="cancel">关 闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "contact",
+  props: ["isshowContactUs"],
+  data() {
+    return {
+      contactPeople: [
+        { name: "钟工", qq: "2748772353", phone: "17681126856" },
+        { name: "张工", qq: "1219695258", phone: "18734022548" },
+      ],
+    };
+  },
+  methods: {
+    handleClose() {
+      this.$emit("closeContactUs");
+    },
+    cancel() {
+      this.handleClose();
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped>
+.contactCon {
+  font: 14px Helvetica, Tahoma, Arial, sans-serif;
+}
+::v-deep .el-dialog__header {
+  padding: 30px 0;
+  text-align: center;
+}
+::v-deep .el-dialog__headerbtn {
+  top: 36px;
+}
+::v-deep .el-dialog__title {
+  font-size: 26px;
+}
+::v-deep .el-dialog__body {
+  background: #f8fafb;
+  border-top: 1px solid #e5e5e5;
+  border-bottom: 1px solid #e5e5e5;
+}
+</style>

src/views/addition/help.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="contactBox">
+    <el-dialog
+      title="帮助指南"
+      :visible.sync="isshowHelp"
+      width="50%"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <div class="contactCon">
+        contents
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="cancel">关 闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "help",
+  props: ["isshowHelp"],
+  data() {
+    return {
+
+    };
+  },
+  methods: {
+    handleClose() {
+      this.$emit("closeHelp");
+    },
+    cancel() {
+      this.handleClose();
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped>
+.contactCon {
+  font: 14px Helvetica, Tahoma, Arial, sans-serif;
+}
+::v-deep .el-dialog__header {
+  padding: 30px 0;
+  text-align: center;
+}
+::v-deep .el-dialog__headerbtn{
+  top: 36px;
+}
+::v-deep .el-dialog__title {
+  font-size: 26px;
+}
+::v-deep .el-dialog__body {
+  background: #f8fafb;
+  border-top: 1px solid #e5e5e5;
+  border-bottom: 1px solid #e5e5e5;
+}
+</style>

src/views/user/changePass/changePass.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="changePassBox">
+    <el-dialog
+      title="重置密码"
+      :visible.sync="isShowChangePass"
+      width="50%"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+    >
+      <div class="dialogCon">
+        <el-form
+          :model="ruleForm"
+          status-icon
+          :rules="rules"
+          ref="formName"
+          label-width="100px"
+        >
+          <el-form-item label="登录名称:" prop="userName">
+            <el-input
+              v-model="ruleForm.userName"
+              autocomplete="off"
+              disabled
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="旧密码:" prop="oldPass">
+            <el-input
+              type="password"
+              v-model="ruleForm.oldPass"
+              autocomplete="off"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="新密码:" prop="newPass">
+            <el-input
+              type="password"
+              v-model="ruleForm.newPass"
+              autocomplete="off"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="确认密码:" prop="ackNewPass">
+            <el-input
+              type="password"
+              v-model="ruleForm.ackNewPass"
+              autocomplete="off"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+        <div style="margin-left: 100px">
+          <i class="el-icon-edit"></i>
+          <span>请再次输入您的密码</span>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="confirm">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "changePass",
+  props: ["isShowChangePass"],
+  data() {
+    return {
+      ruleForm: {
+        userName: "admin",
+        oldPass: "",
+        newPass: "",
+        ackNewPass: "",
+      },
+      rules: {
+        oldPass: [{ required: true, message: "请输入原密码" }],
+        newPass: [
+          { required: true, message: "请输入新密码" },
+          {
+            pattern: /^(?=.*[a-zA-Z])(?=.*\d).+$/,
+            message: "必须包含字母、数字",
+          },
+          { validator: this.validatePass, trigger: "blur" },
+          { min: 9, message: "密码不能小于9个字符", trigger: "blur" },
+        ],
+        ackNewPass: [
+          { required: true, message: "请再次输入新密码" },
+          { validator: this.validateNewPass, trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    handleClose() {
+      this.$emit("closeChangePass");
+      this.empty();
+    },
+    cancel() {
+      this.handleClose();
+    },
+    empty() {
+      this.ruleForm.oldPass = "";
+      this.ruleForm.newPass = "";
+      this.ruleForm.ackNewPass = "";
+    },
+    validatePass(rule, value, callback) {
+      if (this.ruleForm.ackNewPass !== "") {
+        this.$refs.formName.validateField("ackNewPass");
+      }
+      callback();
+    },
+    validateNewPass(rule, value, callback) {
+      if (value !== this.ruleForm.newPass) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    },
+    confirm() {
+      this.$refs.formName.validate((valid) => {
+        if (valid) {
+          alert("submit!");
+          this.handleClose();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style scoped>
+::v-deep .el-dialog__header {
+  padding: 10px 20px 10px;
+  background: #6f63dd !important;
+  color: #ffffff;
+}
+::v-deep .el-dialog__title {
+  color: #ffffff !important;
+  font-size: 14px;
+}
+::v-deep .el-dialog__headerbtn {
+  top: 15px;
+}
+</style>